From d7ea9b65c7a70535d14dee1a7ce15e1ac1b9c195 Mon Sep 17 00:00:00 2001
From: Jordan Doyle <jordan@doyle.la>
Date: Sat, 16 Oct 2021 23:46:03 +0100
Subject: [PATCH] dark mode finishing touches

---
 chartered-frontend/src/dark.sass                                  | 24 ++++++++++++++++++++++++
 chartered-frontend/src/index.sass                                 |  6 ++++++
 chartered-frontend/src/index.tsx                                  |  5 ++++-
 chartered-frontend/src/overscrollColourFixer.ts                   | 18 ++++++++++++++++--
 chartered-frontend/src/util.tsx                                   |  5 ++---
 chartered-frontend/src/pages/crate/Members.tsx                    |  8 +++-----
 chartered-frontend/src/pages/organisations/CreateOrganisation.tsx | 11 ++---------
 7 files changed, 53 insertions(+), 24 deletions(-)

diff --git a/chartered-frontend/src/dark.sass b/chartered-frontend/src/dark.sass
index 4b63e3c..245dbd0 100644
--- a/chartered-frontend/src/dark.sass
+++ a/chartered-frontend/src/dark.sass
@@ -7,7 +7,7 @@
 
 html, body
   @media(prefers-color-scheme: dark)
-    background: $dark-bg-color !important
+    background: $dark-bg-color
 
 .dark
   $primary: hsl(212, 70%, 49%)
@@ -29,6 +29,17 @@
   @each $color, $value in $theme-colors-rgb
     --#{$variable-prefix}#{$color}-rgb: #{$value}
 
+  .dropdown-menu
+    background: $card-border-color
+    border-color: darken($card-border-color, 10%)
+
+    .dropdown-item:hover
+      color: $link-color
+      background: darken($card-border-color, 3%)
+
+  .bg-default-profile-picture
+    background: $card-border-color
+
   a
     color: $link-color
 
@@ -38,12 +49,22 @@
   a.btn
     color: $link-color
 
+    &.btn-danger
+      color: white
+
   .btn-outline-light
     border-color: $link-color
 
     &:hover
       color: $body-color
       background-color: $link-color
+
+  .modal-content
+    background: $dark-bg-color
+    color: $body-color
+
+    .modal-header, .modal-footer
+      border-color: $card-border-color
 
   table
     border-color: $card-border-color !important
@@ -81,6 +102,7 @@
 
   .form-control
     background: transparent !important
+    color: white
     border-color: $card-border-color !important
 
   .input-group
diff --git a/chartered-frontend/src/index.sass b/chartered-frontend/src/index.sass
index 131ccbf..4ebadbe 100644
--- a/chartered-frontend/src/index.sass
+++ a/chartered-frontend/src/index.sass
@@ -55,3 +55,9 @@
     &:focus, &:not(:placeholder-shown)
         width: 350px
 
+.modal-content
+    color: black
+
+.bg-default-profile-picture
+    background: rgb(235, 235, 235)
+    color: rgba(0, 0, 0, .2)
diff --git a/chartered-frontend/src/index.tsx b/chartered-frontend/src/index.tsx
index d0e4103..f82144d 100644
--- a/chartered-frontend/src/index.tsx
+++ a/chartered-frontend/src/index.tsx
@@ -25,13 +25,16 @@
 import CreateOrganisation from "./pages/organisations/CreateOrganisation";
 import User from "./pages/User";
 import Search from "./pages/Search";
+import {backgroundFix} from "./overscrollColourFixer";
 
 if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
   document.querySelector("body")?.classList.add("dark");
 }
 
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
-  document.querySelector("body")?.classList.toggle("dark", e.matches);
+  const body = document.querySelector("body");
+  body?.classList.toggle("dark", e.matches);
+  backgroundFix(body);
 });
 
 function App() {
diff --git a/chartered-frontend/src/overscrollColourFixer.ts b/chartered-frontend/src/overscrollColourFixer.ts
index 62c4a72..1cf8424 100644
--- a/chartered-frontend/src/overscrollColourFixer.ts
+++ a/chartered-frontend/src/overscrollColourFixer.ts
@@ -1,23 +1,31 @@
 // A quick little utility to fix the overscroll colour at the bottom
 // of the page vs the top of the page. We don't have a footer so we
 // just want to carry on the body background, whereas the header is
 // white so we want to use that at the top of the page.
 
+export const backgroundFix = (body: HTMLBodyElement | null) => {
+  if (body?.classList.contains("dark")) {
+    document.documentElement.style.backgroundColor = window.scrollY > 70 ? "#0e1825" : "#2a3746";
+  } else {
+    document.documentElement.style.backgroundColor = window.scrollY > 70 ? "var(--bs-primary)" : "white";
+  }
+};
+
 window.addEventListener("load", () => {
+  const body = document.querySelector("body");
   let ticking = false;
 
-  const backgroundFix = () => {
+  const tickBackgroundFix = () => {
     if (!ticking) {
       ticking = true;
 
       window.requestAnimationFrame(() => {
-        document.documentElement.style.backgroundColor =
-          window.scrollY > 70 ? "var(--bs-primary)" : "#fff";
+        backgroundFix(body);
         ticking = false;
       });
     }
   };
 
-  window.addEventListener("scroll", backgroundFix, false);
-  backgroundFix();
+  window.addEventListener("scroll", tickBackgroundFix, false);
+  tickBackgroundFix();
 });
diff --git a/chartered-frontend/src/util.tsx b/chartered-frontend/src/util.tsx
index 7f217d0..4c6443e 100644
--- a/chartered-frontend/src/util.tsx
+++ a/chartered-frontend/src/util.tsx
@@ -96,14 +96,13 @@
   } else {
     return (
       <div
-        className={`position-relative rounded-circle d-inline-flex justify-content-center align-items-center ${className}`}
-        style={{ width, height, background: "rgb(235, 235, 235)" }}
+        className={`position-relative rounded-circle d-inline-flex justify-content-center align-items-center bg-default-profile-picture ${className}`}
+        style={{ width, height }}
       >
         <PersonFill
           style={{
             width: `calc(${width} / 2)`,
             height: `calc(${height} / 2)`,
-            color: "rgba(0, 0, 0, .1)",
           }}
         />
       </div>
diff --git a/chartered-frontend/src/pages/crate/Members.tsx b/chartered-frontend/src/pages/crate/Members.tsx
index eca38c9..6f9613f 100644
--- a/chartered-frontend/src/pages/crate/Members.tsx
+++ a/chartered-frontend/src/pages/crate/Members.tsx
@@ -1,10 +1,9 @@
 import { useState, useEffect, useRef } from "react";
 import { Link } from "react-router-dom";
 import {
-  PersonPlus,
   Trash,
   CheckLg,
-  PlusLg,
+  PlusLg, PersonPlusFill,
 } from "react-bootstrap-icons";
 import {
   authenticatedEndpoint,
@@ -312,15 +311,14 @@
     <tr>
       <td className="align-middle fit">
         <div
-          className="d-flex align-items-center justify-content-center rounded-circle"
+          className="d-flex align-items-center justify-content-center rounded-circle bg-default-profile-picture"
           style={{
             width: "48px",
             height: "48px",
-            background: "#DEDEDE",
             fontSize: "1rem",
           }}
         >
-          <PersonPlus />
+          <PersonPlusFill width="24px" height="24px" />
         </div>
       </td>
 
diff --git a/chartered-frontend/src/pages/organisations/CreateOrganisation.tsx b/chartered-frontend/src/pages/organisations/CreateOrganisation.tsx
index 82f95a0..d8feeac 100644
--- a/chartered-frontend/src/pages/organisations/CreateOrganisation.tsx
+++ a/chartered-frontend/src/pages/organisations/CreateOrganisation.tsx
@@ -127,25 +127,18 @@
 
               <button
                 type="submit"
-                className="btn btn-success mt-2 float-end"
+                className="btn btn-success mt-2"
                 style={{ display: !loading ? "block" : "none" }}
               >
                 Create
               </button>
               <div
-                className="spinner-border text-primary mt-4 float-end"
+                className="spinner-border text-primary mt-4"
                 role="status"
                 style={{ display: loading ? "block" : "none" }}
               >
                 <span className="visually-hidden">Submitting...</span>
               </div>
-
-              <Link
-                to="/ssh-keys/list"
-                className="btn btn-danger mt-2 float-end me-1"
-              >
-                Cancel
-              </Link>
             </form>
           </div>
         </div>
--
rgit 0.1.3