Chore/remove usage of mantine color scheme (#6108)

Remove instances of `colorScheme === "dark" ?` in the app and rely on
the theme.css' light and dark variables instead.

frontend/src/core/components/shared/LogoIcon.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { useMantineColorScheme } from "@mantine/core";
+import { useLogoPath } from "@app/hooks/useLogoPath";
+
+interface LogoIconProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  alt?: string;
+}
+
+export function LogoIcon({ alt = "", ...props }: LogoIconProps) {
+  const { colorScheme } = useMantineColorScheme();
+  const logoPaths = useLogoPath();
+  const src = colorScheme === "dark" ? logoPaths.dark : logoPaths.light;
+  return <img src={src} alt={alt} {...props} />;
+}

frontend/src/core/components/shared/TextInput.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from "react";
-import { useMantineColorScheme } from "@mantine/core";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import styles from "@app/components/shared/textInput/TextInput.module.css";
 
@@ -61,8 +60,6 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     },
     ref,
   ) => {
-    const { colorScheme } = useMantineColorScheme();
-
     const handleClear = () => {
       if (onClear) {
         onClear();
@@ -79,7 +76,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
         {icon && (
           <span
             className={styles.icon}
-            style={{ color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382" }}
+            style={{ color: "var(--search-text-and-icon-color)" }}
           >
             {icon}
           </span>
@@ -99,8 +96,8 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           aria-label={ariaLabel}
           onFocus={onFocus}
           style={{
-            backgroundColor: colorScheme === "dark" ? "#4B525A" : "#FFFFFF",
-            color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382",
+            backgroundColor: "var(--input-bg)",
+            color: "var(--search-text-and-icon-color)",
             paddingRight: shouldShowClearButton ? "40px" : "12px",
             paddingLeft: icon ? "40px" : "12px",
           }}
@@ -111,7 +108,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
             type="button"
             className={styles.clearButton}
             onClick={handleClear}
-            style={{ color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382" }}
+            style={{ color: "var(--search-text-and-icon-color)" }}
             aria-label="Clear input"
           >
             <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />

frontend/src/core/components/shared/Wordmark.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useMantineColorScheme } from "@mantine/core";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
+
+interface WordmarkProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  alt?: string;
+  muted?: boolean;
+}
+
+export function Wordmark({ alt = "", muted = false, ...props }: WordmarkProps) {
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === "dark";
+  const { wordmark } = useLogoAssets();
+
+  // light: black text (standard) or grey text (muted)
+  // dark:  white text for both variants
+  const src = isDark ? wordmark.white : muted ? wordmark.grey : wordmark.black;
+
+  return <img src={src} alt={alt} {...props} />;
+}