Merge pull request #327 from mbta/cm/workflow-entry-change

tweak: Workflow entry change
mbta · May 2, 2024 · 8012645 · 8012645
2 parents aa2fc20 + 817429b
commit 8012645
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 27 deletions.
diff --git a/assets/css/dashboard/configure-screens-workflow-page.scss b/assets/css/dashboard/configure-screens-workflow-page.scss
@@ -112,7 +112,7 @@
             height: 38px;
             padding: 6px 12px;
             border: 1px solid $text-primary;
-            background-color: $button-primary;
+            background-color: $button-secondary;
 
             &:disabled {
               color: #6c757d;
@@ -121,8 +121,8 @@
           }
 
           .selected {
-            background-color: #8ecdff;
-            color: $button-primary;
+            background-color: $button-primary;
+            color: $button-secondary;
             border: transparent;
           }
         }

diff --git a/assets/css/dashboard/pending-screens-page.scss b/assets/css/dashboard/pending-screens-page.scss
@@ -1,5 +1,11 @@
 .pending-screens-page {
   height: 100%;
+
+  .add-new-button {
+    height: 48px;
+    background-color: $button-primary;
+    color: $button-secondary;
+  }
 }
 
 .no-screens-text {
@@ -71,8 +77,8 @@
       }
 
       .publish-button {
-        background-color: #8ecdff;
-        color: #212529;
+        background-color: $button-primary;
+        color: $button-secondary;
       }
     }
   }

diff --git a/assets/css/variables.scss b/assets/css/variables.scss
@@ -44,4 +44,5 @@ $theme-primary: #384956;
 
 $border-primary: #8b9198;
 
-$button-primary: #212529;
+$button-primary: #8ecdff;
+$button-secondary: #212529;
diff --git a/assets/css/workflow.scss b/assets/css/workflow.scss
@@ -86,8 +86,8 @@
         }
 
         .error-modal__refresh-button {
-          background-color: #8ecdff;
-          color: $button-primary;
+          background-color: $button-primary;
+          color: $button-secondary;
         }
 
         .error-modal__cancel-button {

diff --git a/assets/js/components/Dashboard/PendingScreensPage.tsx b/assets/js/components/Dashboard/PendingScreensPage.tsx
@@ -10,7 +10,7 @@ import {
   fetchExistingScreensAtPlacesWithPendingScreens,
   publishScreensForPlace,
 } from "../../utils/api";
-import { Accordion } from "react-bootstrap";
+import { Accordion, Button, Col, Container, Row } from "react-bootstrap";
 import PendingScreensPlaceRowAccordion from "./PendingScreensPlaceRowAccordion";
 import { ScreenConfiguration } from "../../models/screen_configuration";
 import {
@@ -19,6 +19,7 @@ import {
 } from "../../hooks/useScreenplayContext";
 import { format } from "date-fns/format";
 import { Place } from "../../models/place";
+import { useNavigate } from "react-router-dom";
 
 const PendingScreensPage: ComponentType = () => {
   const { places } = useScreenplayContext();
@@ -34,6 +35,8 @@ const PendingScreensPage: ComponentType = () => {
     [places],
   );
 
+  const navigate = useNavigate();
+
   const fetchData = useCallback(() => {
     fetchExistingScreensAtPlacesWithPendingScreens().then(
       ({ places_and_screens, etag, last_modified_ms }) => {
@@ -165,7 +168,21 @@ const PendingScreensPage: ComponentType = () => {
 
   return (
     <div className="pending-screens-page">
-      <div className="page-content__header">Pending</div>
+      <div className="page-content__header">
+        <Container fluid>
+          <Row className="align-items-center text-white justify-content-between">
+            <Col lg="auto">Pending</Col>
+            <Col lg="auto">
+              <Button
+                className="add-new-button"
+                onClick={() => navigate("/configure-screens")}
+              >
+                Add new
+              </Button>
+            </Col>
+          </Row>
+        </Container>
+      </div>
       <div className="page-content__body" style={{ color: "white" }}>
         {layout}
       </div>

diff --git a/assets/js/components/Dashboard/Sidebar.tsx b/assets/js/components/Dashboard/Sidebar.tsx
@@ -5,7 +5,6 @@ import {
   CollectionFill,
   ExclamationTriangleFill,
   PersonFill,
-  PlusLg,
   ClockFill,
 } from "react-bootstrap-icons";
 import TSquare from "../../../static/images/t-square.svg";
@@ -45,22 +44,12 @@ const Sidebar: ComponentType = () => {
           </Button>
         </Link>
         {isScreensAdmin && (
-          <>
-            <Link className="sidebar-link" to="/pending">
-              <Button className={pathname === "pending" ? "selected" : ""}>
-                <ClockFill size={20} className="sidebar-link__icon" />
-                <span className="nav-link__name">Pending</span>
-              </Button>
-            </Link>
-            <Link className="sidebar-link" to="/configure-screens">
-              <Button
-                className={pathname === "configure-screens" ? "selected" : ""}
-              >
-                <PlusLg size={20} className="sidebar-link__icon" />
-                <span className="nav-link__name">Configure</span>
-              </Button>
-            </Link>
-          </>
+          <Link className="sidebar-link" to="/pending">
+            <Button className={pathname === "pending" ? "selected" : ""}>
+              <ClockFill size={20} className="sidebar-link__icon" />
+              <span className="nav-link__name">Pending</span>
+            </Button>
+          </Link>
         )}
         {/* This button slightly different to trigger a reload */}
         <Button href="/" className="takeover-button">