Feat: dark-mode

src/assets/globals.scss

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 html {
-  @apply bg-white font-body;
+  @apply bg-white font-body dark:bg-black dark:text-white;
 }
 
 body,
@@ -18,7 +18,7 @@ html,
 }
 
 a {
-  @apply underline text-link;
+  @apply underline text-link dark:text-primary;
 }
 
 #main:focus {
@@ -57,15 +57,19 @@ a {
 }
 
 .heading-title {
-  @apply font-title text-center text-4xl text-dark uppercase;
+  @apply font-title text-center text-4xl text-dark uppercase dark:text-light;
 }
 
 .heading-subtitle {
   @apply text-2xl font-title text-center;
 }
 
 .button {
-  @apply m-4 inline-block py-2 px-3 bg-transparent text-link border-2 border-primary rounded-sm no-underline;
+  @apply m-4 inline-block py-2 px-3 bg-transparent text-link border-2 border-primary rounded-sm no-underline dark:text-primary;
+}
+
+input, textarea, select, option, .input, .inputControl {
+  @apply border-dark bg-white dark:bg-dark dark:text-light;
 }
 
 .button.tight {

src/components/SearchBar/SearchBar.tsx

@@ -3,9 +3,10 @@ import Link from 'next/link';
 import styles from './searchBar.module.scss';
 import { NextRouter, useRouter } from 'next/router';
 import UserDropdown from '../layout/UserDropdown/UserDropdown';
-import { useCookies } from 'react-cookie';
 import { apiConfiguration } from 'services/api.service';
 import { VariantsApi } from '@spacecowmedia/spellbook-client';
+import DarkMode from 'components/ui/DarkMode/DarkMode';
+import { useCookies } from 'react-cookie';
 
 type Props = {
   onHomepage?: boolean;
@@ -119,7 +120,7 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }) => {
         </div>
 
         {!onHomepage && (
-          <div className="flex flex-shrink flex-row items-center desktop-menu">
+          <div className="flex flex-row-reverse md:flex-row items-center desktop-menu">
             <button
               id="search-bar-menu-button"
               type="button"
@@ -130,6 +131,9 @@ const SearchBar: React.FC<Props> = ({ onHomepage, className }) => {
               <div className="sr-only">Menu</div>
             </button>
 
+            <span className={`text-white mr-2`}>
+              <DarkMode />
+            </span>
             <Link href="/advanced-search/" className={`hidden md:flex ${styles.menuLink}`}>
               <div className={`${styles.advancedSearchIcon} ${styles.linkIcon}`} aria-hidden="true" />
               Advanced

src/components/SearchBar/searchBar.module.scss

@@ -102,7 +102,6 @@
   }
 }
 
-
 .buttonContainer {
-  @apply items-center flex-row px-4 text-white md:border-l border-white
+  @apply items-center flex-row text-white md:border-l border-white
 }

src/components/advancedSearch/AutocompleteInput/AutocompleteInput.tsx

@@ -13,7 +13,13 @@ const MAX_NUMBER_OF_MATCHING_RESULTS = 20;
 const AUTOCOMPLETE_DELAY = 150;
 const BLUR_CLOSE_DELAY = 900;
 
-export type AutoCompleteOption = { value: string; label: string; alias?: RegExp; normalizedValue?: string };
+export type AutoCompleteOption = {
+  value: string;
+  label: string;
+  alias?: RegExp;
+  normalizedValue?: string;
+  normalizedLabel?: string;
+};
 
 type Props = {
   value: string;
@@ -25,7 +31,6 @@ type Props = {
   inputId: string;
   placeholder?: string;
   label?: string;
-  matchAgainstOptionLabel?: boolean;
   hasError?: boolean;
   useValueForInput?: boolean;
   onChange?: (_value: string) => void;
@@ -41,7 +46,6 @@ const AutocompleteInput: React.FC<Props> = ({
   templateAutocomplete,
   inputId,
   label,
-  matchAgainstOptionLabel,
   useValueForInput,
   placeholder,
   hasError,
@@ -66,10 +70,6 @@ const AutocompleteInput: React.FC<Props> = ({
     templateAutocomplete;
   const inMemory = !active || (!cardAutocomplete && !resultAutocomplete && !templateAutocomplete);
 
-  autocompleteOptions?.forEach(
-    (option) => (option.normalizedValue = option.normalizedValue ?? normalizeStringInput(option.value)),
-  );
-
   const total = matchingAutoCompleteOptions.length;
   const option = matchingAutoCompleteOptions[arrowCounter];
   let screenReaderSelectionText = '';
@@ -226,25 +226,28 @@ const AutocompleteInput: React.FC<Props> = ({
         setLoading(false);
       }
     }
+    options
+      .filter((o) => o.normalizedValue === undefined)
+      .forEach((o) => (o.normalizedValue = o.normalizedValue ?? normalizeStringInput(o.value)));
+    options
+      .filter((o) => o.normalizedLabel === undefined)
+      .forEach((o) => (o.normalizedLabel = o.normalizedLabel ?? normalizeStringInput(o.label)));
     return options.filter((option) => {
       const mainMatch = option.normalizedValue?.includes(normalizedValue);
 
       if (mainMatch) {
         return true;
       }
 
-      if (matchAgainstOptionLabel) {
-        const labelMatch = normalizeStringInput(option.label).includes(normalizedValue);
+      const labelMatch = option.normalizedLabel?.includes(normalizedValue);
 
-        if (labelMatch) {
-          return true;
-        }
+      if (labelMatch) {
+        return true;
       }
 
       if (option.alias) {
         return normalizedValue.match(option.alias);
       }
-
       return false;
     });
   };
@@ -291,7 +294,8 @@ const AutocompleteInput: React.FC<Props> = ({
     }
     setMatchingAutoCompleteOptions([]);
     const totalOptions = await findAllMatches(value);
-    setMatchingAutoCompleteOptions(findBestMatches(totalOptions, value));
+    const matchingOptions = findBestMatches(totalOptions, value);
+    setMatchingAutoCompleteOptions(matchingOptions);
   };
 
   const handleKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -358,7 +362,7 @@ const AutocompleteInput: React.FC<Props> = ({
           {matchingAutoCompleteOptions.map((item, index) => (
             <li
               key={index}
-              className={`${styles.autocompleteResult} ${index === arrowCounter && styles.isActive}`}
+              className={`${inputClassName} ${styles.autocompleteResult} ${index === arrowCounter && styles.isActive}`}
               onClick={() => handleClick(item)}
               onMouseOver={() => handleAutocompleteItemHover(index)}
             >

src/components/advancedSearch/AutocompleteInput/autocompleteInput.module.scss

@@ -3,7 +3,7 @@
 }
 
 .autocompleteResults {
-  @apply p-0 m-0 bg-white border border-light overflow-auto max-h-48 absolute w-full z-10;
+  @apply p-0 m-0 bg-white border border-light overflow-auto max-h-48 absolute w-full z-10 dark:bg-dark;
 }
 
 .autocompleteResult {

src/components/advancedSearch/MultiSearchInput/MultiSearchInput.tsx

@@ -118,7 +118,7 @@ const MultiSearchInput: React.FC<Props> = ({
                 value: option.operator + '|' + (option.numeric ?? '') + '|' + (option.negate ?? ''),
                 label: option.label,
               }))}
-              selectTextClassName="sm:w-1/2 flex-grow"
+              selectTextClassName="sm:w-1/2 flex-grow bg-transparent"
               selectBackgroundClassName={`${
                 input.error ? 'border-danger' : 'border-dark'
               } border border-b-0 sm:border-b sm:border-r-0 sm:w-1/2 flex-grow`}
@@ -129,7 +129,7 @@ const MultiSearchInput: React.FC<Props> = ({
                   value={input.value}
                   onChange={(value) => handleInputChange(index, value)}
                   label={inputLabel}
-                  inputClassName="border-dark"
+                  inputClassName={styles.autocompleteInput}
                   autocompleteOptions={autocompleteOptions}
                   cardAutocomplete={cardAutocomplete}
                   resultAutocomplete={resultAutocomplete}

src/components/advancedSearch/RadioSearchInput/RadioSearchInput.tsx

@@ -42,7 +42,7 @@ const RadioSearchInput: React.FC<Props> = ({ checkedValue, options, formName, la
               value={option.value}
               onChange={() => handleChange(option.value)}
             />
-            <span className="ml-2 text-dark">{option.label}</span>
+            <span className="ml-2">{option.label}</span>
           </label>
         ))}
       </fieldset>

src/components/layout/Footer/Footer.tsx

@@ -54,7 +54,7 @@ const Footer: React.FC<Props> = ({ className, noMargin }) => {
           </p>
           <p className="my-4">
             Commander Spellbook utilizes icons provided by&nbsp;
-            <a href="https://fontawesome.com/">Font Awesome</a>&nbsp; according to the&nbsp;
+            <a href="https://fontawesome.com/">Font Awesome</a> according to the&nbsp;
             <a href="https://fontawesome.com/license">Font Awesome License</a>.
           </p>
         </div>

src/components/layout/Icon/Icon.tsx

@@ -33,6 +33,9 @@ import {
   faClone,
   faCheck,
   faXmark,
+  faSun,
+  faMoon,
+  faCircleHalfStroke,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
@@ -82,6 +85,9 @@ const SPELLBOOK_FA_ICONS = {
   copy: faClone,
   check: faCheck,
   cross: faXmark,
+  sun: faSun,
+  moon: faMoon,
+  halfStrokeCircle: faCircleHalfStroke,
 };
 
 export type SpellbookIcon = keyof typeof SPELLBOOK_ICONS | keyof typeof SPELLBOOK_FA_ICONS;

src/components/layout/SearchGuide/SearchSnippet/searchSnippet.module.scss

@@ -1,5 +1,5 @@
 .link {
-  @apply text-dark no-underline;
+  @apply text-dark no-underline dark:text-light;
   .searchSnippet {
     @apply border-2 border-dark pb-2 mb-4 rounded-sm;
   }

src/components/layout/StyledSelect/StyledSelect.tsx

@@ -20,7 +20,7 @@ const StyledSelect: React.FC<Props> = ({
   value,
   options,
   selectBackgroundClassName = 'border border-dark',
-  selectTextClassName = 'text-dark',
+  selectTextClassName = styles.selectOption,
   onChange,
   disabled,
 }) => {
@@ -48,7 +48,7 @@ const StyledSelect: React.FC<Props> = ({
         className={`${styles.operatorSelector} ${selectTextClassName} focus:shadow-outline`}
       >
         {options.map((option, index) => (
-          <option key={`${label}-input-${index}-${option.label}`} value={option.value} className="text-dark">
+          <option key={`${label}-input-${index}-${option.label}`} value={option.value} className={styles.selectOption}>
             {option.label}
           </option>
         ))}

src/components/layout/StyledSelect/styledSelect.module.scss

@@ -1,3 +1,3 @@
 .operatorSelector {
-  @apply w-full h-10 pl-3 pr-6 appearance-none bg-transparent;
+  @apply w-full h-10 pl-3 pr-6 appearance-none;
 }

src/components/search/ComboResults/ComboResults.tsx

@@ -83,7 +83,7 @@ export const ComboResult: React.FC<ResultProps> = ({
         >
           <ColorIdentity identity={combo.identity} size="small" />
         </div>
-        <div className="flex-grow border-b-2 border-light">
+        <div className={`flex-grow  ${styles.comboResultSection}`}>
           <div className="py-1">
             <span className="sr-only">Cards in combo:</span>
             {combo.uses.map(({ card, quantity }) => (
@@ -105,16 +105,16 @@ export const ComboResult: React.FC<ResultProps> = ({
               </CardTooltip>
             ))}
             {combo.requires.length > 0 && (
-              <div className="prerequisites pl-3 pr-3">
-                <span className="text-gray-500">
+              <div className={`${styles.prerequisites} pl-3 pr-3`}>
+                <span>
                   +{combo.requires.reduce((q, r) => q + r.quantity, 0)} other card
                   {combo.requires.reduce((q, r) => q + r.quantity, 0) > 1 ? 's' : ''}
                 </span>
               </div>
             )}
             {prereqCount > 0 && (
-              <div className="prerequisites pl-3 pr-3">
-                <span className="text-gray-500">
+              <div className={`${styles.prerequisites} pl-3 pr-3`}>
+                <span>
                   +{prereqCount} other prerequisite{prereqCount > 1 ? 's' : ''}
                 </span>
               </div>
@@ -133,7 +133,7 @@ export const ComboResult: React.FC<ResultProps> = ({
       <div className="flex items-center flex-grow flex-col">
         <div className="flex-grow" />
         {!hideVariants && combo.variantCount > 1 && (
-          <div className="w-full bg-pink-300 text-right">
+          <div className={styles.variantBanner}>
             <span className="pl-3 pr-3">
               + {combo.variantCount - 1} variant{combo.variantCount > 2 ? 's' : ''}
             </span>

src/components/search/ComboResults/comboResults.module.scss

@@ -2,13 +2,25 @@
   @apply flex flex-wrap justify-center;
 
   a {
-    @apply no-underline text-dark;
+    @apply no-underline text-dark dark:text-light;
   }
 
   .comboResult {
     @apply max-w-lg mx-0 my-2 rounded border-2 border-dark flex-grow flex flex-col content-center;
   }
 
+  .comboResultSection {
+    @apply border-b-2 border-light dark:border-dark;
+  }
+
+  .prerequisites span {
+    @apply text-gray-500 dark:text-gray-400;
+  }
+
+  .variantBanner {
+    @apply w-full bg-pink-300 text-right dark:bg-link;
+  }
+
   @media (min-width: 768px) {
     .comboResult {
       @apply m-2;

src/components/submission/CardSubmission/CardSubmission.tsx

@@ -72,7 +72,6 @@ const CardSubmission = ({ card, template, onChange, index, onDelete }: Props) =>
             placeholder="Search for a template (ex: 'Creature with haste') or type in a new one..."
             // hasError={!!input.error}
             useValueForInput
-            matchAgainstOptionLabel
             maxLength={256}
           />
         </>
@@ -91,7 +90,6 @@ const CardSubmission = ({ card, template, onChange, index, onDelete }: Props) =>
             placeholder="Search for a card..."
             // hasError={!!input.error}
             useValueForInput
-            matchAgainstOptionLabel
             maxLength={256}
           />
         </>
@@ -114,6 +112,17 @@ const CardSubmission = ({ card, template, onChange, index, onDelete }: Props) =>
           value={cardOrTemplate.zoneLocations.map(
             (zone) => ZONE_OPTIONS.find((z) => z.value === zone) || { value: 'N/A', label: 'N/A' },
           )}
+          className="inputControl"
+          styles={{
+            control: (base) => ({
+              ...base,
+              background: 'inherit',
+            }),
+            menu: (base) => ({
+              ...base,
+              background: 'inherit',
+            }),
+          }}
         />
       </div>
 

src/components/submission/Feature Submission/FeatureSubmission.tsx

@@ -30,7 +30,6 @@ const FeatureSubmission: React.FC<Props> = ({ feature, onChange, onDelete, index
         placeholder="Search for a feature (ex: 'Infinite mana')..."
         // hasError={!!input.error}
         useValueForInput
-        matchAgainstOptionLabel
         maxLength={256}
       />
       <button