🏡 index : ~doyle/chartered.git

d7ea9b65c7a70535d14dee1a7ce15e1ac1b9c195 [patch]

21d2e53c6f3c82e463d27a47239acfdfa1cd7bc8

2b4da52a640081d6183657d064781a8a4ed6e3be

d7ea9b65c7a70535d14dee1a7ce15e1ac1b9c195.tar.gz

dark mode finishing touches

Diff

 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>