add per-environment styling (#573)

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;
 }

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";

assets/css/sidebar.scss → 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;

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 (
     <NavLink
       to={to}
-      className={({ isActive }) => `sidebar-link ${isActive ? "active" : ""}`}
+      className={({ isActive }) =>
+        cx(sidebarStyles.link, { [sidebarStyles.active]: isActive })
+      }
       reloadDocument={reloadDocument}
     >
       {({ isActive }) => {
         const IconComponent = isActive ? activeIcon : icon;
         return (
           <>
-            <span className="sidebar-link-highlight">
+            <span className={sidebarStyles.linkHighlight}>
               <IconComponent size={36} />
             </span>
             <span>{children}</span>
@@ -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 (
-    <nav className="sidebar-container">
-      <a href="/dashboard" className="sidebar-logo">
-        <img src={TLogo} alt="Screenplay Logo" style={{ width: 32 }} />
+    <nav className={sidebarStyles.container}>
+      <a href="/dashboard" className={cx(sidebarStyles.logo, environment)}>
+        <img
+          src={environment === "prod" ? TLogo : TLogoBlack}
+          alt="Screenplay Logo"
+          style={{ width: 32 }}
+        />
+        <span className={sidebarStyles.environmentName}>
+          {{ dev: "Dev", "dev-green": "Dev-Green" }[environment]}
+        </span>
       </a>
       <SidebarLink to="/dashboard" icon={GeoAlt} activeIcon={GeoAltFill}>
         Places

lib/screenplay_web/templates/layout/app.html.heex

@@ -34,6 +34,8 @@
     <% end %>
     <%= csrf_meta_tag() %>
     <title>Screenplay</title>
+    <link rel="icon" href={Routes.static_path(@conn, "/favicon.ico")} sizes="32x32">
+    <link rel="icon" href={Routes.static_path(@conn, "/images/favicon-#{@environment_name || "prod"}.svg")} type="image/svg+xml">
     <link rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")}/>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>