Added InfoPopover icon.

mbta · Dec 2, 2024 · 5e42b6f · 5e42b6f
1 parent 8751717
commit 5e42b6f
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 28 deletions.
diff --git a/assets/css/info-popover.module.scss b/assets/css/info-popover.module.scss
@@ -0,0 +1,8 @@
+@import "./variables.scss";
+
+.popover {
+  --bs-popover-bg: #{$dark-bg};
+  --bs-popover-body-color: #{$text-primary};
+  --bs-popover-border-color: #{$border-primary};
+  margin-bottom: 13px;
+}
diff --git a/assets/css/pa-messages.module.scss b/assets/css/pa-messages.module.scss
@@ -135,6 +135,7 @@
   @include flat-button;
   --bs-btn-color: #{$text-link-primary};
   padding-left: 0;
+  padding-right: 8px;
 }
 
 .audioReviewedText {

diff --git a/assets/js/components/Dashboard/InfoPopover.tsx b/assets/js/components/Dashboard/InfoPopover.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { OverlayTrigger, Popover } from "react-bootstrap";
+import { InfoCircleFill } from "react-bootstrap-icons";
+import { type Placement } from "react-bootstrap/esm/types";
+import * as infoPopoverStyles from "Styles/info-popover.module.scss";
+
+interface Props {
+  popoverText: string;
+  placement: Placement;
+}
+
+const InfoPopover = ({ popoverText, placement }: Props) => {
+  return (
+    <OverlayTrigger
+      placement={placement}
+      overlay={
+        <Popover id="info-popover" className={infoPopoverStyles.popover} body>
+          {popoverText}
+        </Popover>
+      }
+    >
+      <InfoCircleFill fill="#8ECDFF" />
+    </OverlayTrigger>
+  );
+};
+
+export default InfoPopover;
diff --git a/assets/js/components/Dashboard/PaMessageForm/MainForm.tsx b/assets/js/components/Dashboard/PaMessageForm/MainForm.tsx
@@ -1,10 +1,6 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import React, { Dispatch, FormEvent, SetStateAction, useState } from "react";
 import { Button, Card, Col, Container, Form, Row } from "react-bootstrap";
-import DaysPicker from "Components/DaysPicker";
-import PriorityPicker from "Components/PriorityPicker";
-import IntervalPicker from "Components/IntervalPicker";
-import MessageTextBox from "Components/MessageTextBox";
 import { useNavigate } from "react-router-dom";
 import moment, { type Moment } from "moment";
 import {
@@ -15,6 +11,11 @@ import {
   VolumeUpFill,
 } from "react-bootstrap-icons";
 import cx from "classnames";
+import DaysPicker from "Components/DaysPicker";
+import PriorityPicker from "Components/PriorityPicker";
+import IntervalPicker from "Components/IntervalPicker";
+import MessageTextBox from "Components/MessageTextBox";
+import InfoPopover from "Components/InfoPopover";
 import { ActivePeriod, Alert as AlertModel } from "Models/alert";
 import { getAlertEarliestStartLatestEnd } from "../../../util";
 import { AudioPreview, Page } from "./types";
@@ -167,7 +168,7 @@ const MainForm = ({
                 >
                   Start
                 </Form.Label>
-                <div className="d-flex gap-3">
+                <div className="d-flex gap-3 align-items-center">
                   <div className={paMessageStyles.startEndItem}>
                     <Form.Control
                       className={cx(paMessageStyles.inputField, "picker")}
@@ -208,15 +209,23 @@ const MainForm = ({
                       )
                     }
                   />
-                  <Button
-                    className={paMessageStyles.serviceTimeButton}
-                    variant="link"
-                    onClick={() =>
-                      setStartDateTime(moment(startDateTime).hour(3).minute(0))
-                    }
-                  >
-                    Start of service day
-                  </Button>
+                  <div>
+                    <Button
+                      className={paMessageStyles.serviceTimeButton}
+                      variant="link"
+                      onClick={() =>
+                        setStartDateTime(
+                          moment(startDateTime).hour(3).minute(0),
+                        )
+                      }
+                    >
+                      Start of service day
+                    </Button>
+                    <InfoPopover
+                      placement="top"
+                      popoverText="A service day starts at 3:00 AM, and ends at 3:00 AM the following day"
+                    />
+                  </div>
                 </div>
               </Form.Group>
             </Row>
@@ -244,7 +253,7 @@ const MainForm = ({
                   />
                 )}
                 {!endWithEffectPeriod && endDateTime !== null && (
-                  <div className="d-flex gap-3">
+                  <div className="d-flex gap-3 align-items-center">
                     <div className={paMessageStyles.startEndItem}>
                       <Form.Control
                         className={cx(paMessageStyles.inputField, "picker")}
@@ -285,20 +294,28 @@ const MainForm = ({
                         )
                       }
                     />
-                    <Button
-                      className={paMessageStyles.serviceTimeButton}
-                      variant="link"
-                      onClick={() => {
-                        const newMoment = moment(endDateTime).hour(3).minute(0);
-                        if (endDateTime.hour() >= 3) {
-                          newMoment.day(endDateTime.day() + 1);
-                        }
+                    <div>
+                      <Button
+                        className={paMessageStyles.serviceTimeButton}
+                        variant="link"
+                        onClick={() => {
+                          const newMoment = moment(endDateTime)
+                            .hour(3)
+                            .minute(0);
+                          if (endDateTime.hour() >= 3) {
+                            newMoment.day(endDateTime.day() + 1);
+                          }
 
-                        setEndDateTime(newMoment);
-                      }}
-                    >
-                      End of service day
-                    </Button>
+                          setEndDateTime(newMoment);
+                        }}
+                      >
+                        End of service day
+                      </Button>
+                      <InfoPopover
+                        placement="top"
+                        popoverText="A service day starts at 3:00 AM, and ends at 3:00 AM the following day"
+                      />
+                    </div>
                   </div>
                 )}
               </Form.Group>