From 9a9345db85da0783a1dc7b23b0da670f9cc49df6 Mon Sep 17 00:00:00 2001 From: Brett Heath-Wlaz Date: Thu, 5 Dec 2024 13:33:39 -0500 Subject: [PATCH] add per-environment styling (#573) --- .../new-pa-message/associate-alert-page.scss | 6 --- assets/css/screenplay.scss | 1 - .../css/{sidebar.scss => sidebar.module.scss} | 45 +++++++++++++----- assets/js/components/Dashboard/Sidebar.tsx | 26 ++++++++-- assets/static/favicon.ico | Bin 3933 -> 4286 bytes assets/static/images/favicon-dev-green.svg | 5 ++ assets/static/images/favicon-dev.svg | 5 ++ assets/static/images/favicon-prod.svg | 5 ++ assets/static/images/t-logo-black.svg | 4 ++ .../templates/layout/app.html.heex | 2 + 10 files changed, 75 insertions(+), 24 deletions(-) rename assets/css/{sidebar.scss => sidebar.module.scss} (51%) create mode 100644 assets/static/images/favicon-dev-green.svg create mode 100644 assets/static/images/favicon-dev.svg create mode 100644 assets/static/images/favicon-prod.svg create mode 100644 assets/static/images/t-logo-black.svg diff --git a/assets/css/dashboard/new-pa-message/associate-alert-page.scss b/assets/css/dashboard/new-pa-message/associate-alert-page.scss index 5a01a696a..26a0f066d 100644 --- a/assets/css/dashboard/new-pa-message/associate-alert-page.scss +++ b/assets/css/dashboard/new-pa-message/associate-alert-page.scss @@ -1,9 +1,3 @@ -.sidebar-container:has( - + .page-content > .new-pa-message > .associate-alert-page - ) { - display: none !important; -} - .associate-alert-page { padding: 24px 48px; } diff --git a/assets/css/screenplay.scss b/assets/css/screenplay.scss index b84468c82..75a4bc9f7 100644 --- a/assets/css/screenplay.scss +++ b/assets/css/screenplay.scss @@ -28,7 +28,6 @@ $form-feedback-invalid-color: $text-error; @import "place-row.scss"; @import "places-action-bar.scss"; @import "filter-dropdown.scss"; -@import "sidebar.scss"; @import "screenplay-container.scss"; @import "screen-detail.scss"; @import "screen-simulation.scss"; diff --git a/assets/css/sidebar.scss b/assets/css/sidebar.module.scss similarity index 51% rename from assets/css/sidebar.scss rename to assets/css/sidebar.module.scss index ba79ec4eb..8dae04043 100644 --- a/assets/css/sidebar.scss +++ b/assets/css/sidebar.module.scss @@ -1,22 +1,26 @@ -.sidebar-container { +@import "./variables.scss"; + +.container { width: $sidebar-width; flex: none; height: 100vh; display: flex; flex-direction: column; - gap: 48px; - padding-top: 32px; + gap: 32px; overflow-y: auto; background-color: #1e2933; border-right: 1px solid #384e5c; + &:has(:global(+ .page-content > .new-pa-message > .associate-alert-page)) { + display: none !important; + } } -.sidebar-link { +.link { display: flex; flex-direction: column; align-items: center; text-align: center; - padding: 0 10px; + padding: 8px 10px; gap: 4px; text-decoration: none; color: #c1e4ff; @@ -27,23 +31,40 @@ } } -.sidebar-link-highlight { +.linkHighlight { padding: 8px; border-radius: 8px; - .sidebar-link.active &, - .sidebar-link:hover & { + .link.active &, + .link:hover & { background-color: #384e5c; } } -.sidebar-logo { +.logo { + padding-top: 32px; + padding-bottom: 32px; color: white; + text-decoration: none; display: flex; - justify-content: center; + flex-direction: column; + align-items: center; + &:global(.dev) { + color: black; + background-color: #d0d336; + } + &:global(.dev-green) { + color: black; + background-color: #7fee91; + } +} + +.environmentName { + height: 0; + font-size: 10px; } -.sidebar-link, -.sidebar-logo { +.link, +.logo { &:focus-visible { outline: 1px solid #c1e4ff; outline-offset: -1px; diff --git a/assets/js/components/Dashboard/Sidebar.tsx b/assets/js/components/Dashboard/Sidebar.tsx index ebbf0806f..9d08b25a0 100644 --- a/assets/js/components/Dashboard/Sidebar.tsx +++ b/assets/js/components/Dashboard/Sidebar.tsx @@ -14,6 +14,9 @@ import { Icon, } from "react-bootstrap-icons"; import TLogo from "../../../static/images/t-logo.svg"; +import TLogoBlack from "../../../static/images/t-logo-black.svg"; +import cx from "classnames"; +import * as sidebarStyles from "Styles/sidebar.module.scss"; const SidebarLink = ({ to, @@ -31,14 +34,16 @@ const SidebarLink = ({ return ( `sidebar-link ${isActive ? "active" : ""}`} + className={({ isActive }) => + cx(sidebarStyles.link, { [sidebarStyles.active]: isActive }) + } reloadDocument={reloadDocument} > {({ isActive }) => { const IconComponent = isActive ? activeIcon : icon; return ( <> - + {children} @@ -56,11 +61,22 @@ const Sidebar = () => { const isPaMessageAdmin = !!document.querySelector( "meta[name=is-pa-message-admin]", ); + const environment = + document + .querySelector("meta[name=environment-name]") + ?.getAttribute("content") ?? "prod"; return ( -