Colors and Dark Mode (#555)

Co-authored-by: Paul Pan <[email protected]> Co-authored-by: Trevor Kwan <[email protected]> Co-authored-by: Trevor Kwan <[email protected]> Co-authored-by: Matei-Alexandru Gardus <[email protected]>
acmucsd · Mar 31, 2022 · 796f6d8 · 796f6d8
1 parent 1a19b33
commit 796f6d8
Show file tree

Hide file tree

Showing 107 changed files with 3,032 additions and 2,412 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -24,6 +24,7 @@ module.exports = {
     'jsx-a11y/label-has-associated-control': ['off'],
     'jsx-a11y/no-static-element-interactions': ['off'],
     'react/jsx-filename-extension': ['warn', { extensions: ['.ts', '.tsx'] }],
-    'react/no-array-index-key': 'off'
+    'react/no-array-index-key': 'off',
+    'react/require-default-props': 'off'
   },
 };
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,32 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" theme="light">
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
+    <script>
+      // set theme based if localStorage preference or OS preference exists
+      const colorMode = () => {
+
+        // if localStorage preference exists
+        const localTheme = localStorage.getItem('theme');
+        if (localTheme) {
+          return localTheme;
+        }
+
+        // if OS preference exists
+        const mql = window.matchMedia('(prefers-color-scheme: dark)');
+        if (typeof mql.matches === 'boolean') { 
+          return mql.matches ? 'dark' : 'light';
+        }
+
+        return 'light';
+      };
+
+      // set theme based on colorMode()
+      document.documentElement.setAttribute('theme', colorMode());
+    </script>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

diff --git a/src/admin/components/AddAttendanceForm/index.tsx b/src/admin/components/AddAttendanceForm/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, ChangeEventHandler, FocusEventHandler, FormEventHandler } from 'react';
+import React, { useState, FormEventHandler } from 'react';
 import { AutoComplete, Checkbox, Form, Input, Button, Tooltip, Tag, Icon, Select } from 'antd';
 import { useHistory } from 'react-router-dom';
 
@@ -7,8 +7,6 @@ import './style.less';
 const { Option } = AutoComplete;
 
 interface AddAttendanceFormProps {
-  handleBlur: FocusEventHandler;
-  handleChange: ChangeEventHandler;
   handleSubmit: FormEventHandler;
   isSubmitting: boolean;
   isValidating: boolean;

diff --git a/src/admin/components/AddAttendanceForm/style.less b/src/admin/components/AddAttendanceForm/style.less
@@ -5,13 +5,13 @@
   width: 50%;
 
   .subtitle {
-    color: @blue-3;
+    color: var(--theme-primary-3);
     font-size: @general-heading-2;
     font-weight: 700;
   }
 
   label {
-    color: @blue-3;
+    color: var(--theme-primary-3);
     font-size: @card-heading-2;
     font-weight: 500;
 
@@ -20,13 +20,13 @@
     }
 
     span {
-      color: @black;
+      color: var(--theme-text-on-background-2);
       font-weight: 400;
     }
   }
 
   h1 {
-    color: @black;
+    color: var(--theme-text-on-background-2);
     font-size: @general-heading-1;
     font-weight: 700;
   }
@@ -37,19 +37,24 @@
     width: 100%;
   }
 
+  .ant-select-selection {
+    background-color: var(--theme-surface-2);
+    color: var(--theme-text-on-surface-1);
+  }
+
   .save-button {
-    background-color: @green-1;
-    border-color: @green-2;
+    background-color: var(--theme-success-1);
+    border-color: var(--theme-success-2);
     font-size: @general-body;
     font-weight: 500;
     height: @button-height;
     margin-right: 20px;
   }
 
   .discard-button {
-    background-color: @white;
-    border-color: @red;
-    color: @red;
+    background-color: var(--theme-background);
+    border-color: var(--theme-danger-1);
+    color: var(--theme-danger-1);
     font-size: @general-body;
     font-weight: 500;
     height: @button-height;
@@ -78,16 +83,17 @@
     }
 
     .add-new-attendee {
-      background: @white;
+      background: var(--theme-background);
       border-style: dashed;
+      color: var(--theme-text-on-background-2);
       font-size: @card-body;
     }
   }
 
   .input-style() {
-    background-color: @gray-1;
-    border-color: @gray-4;
-    color: @black;
+    background-color: var(--theme-surface-1);
+    border-color: var(--theme-accent-line-1);
+    color: var(--theme-text-on-surface-1);
     font-size: @general-body;
     height: @profile-input-height;
   }

diff --git a/src/admin/components/AdminPage/style.less b/src/admin/components/AdminPage/style.less
@@ -7,10 +7,17 @@
   }
 
   .admin-redirect-button {
+    background-color: var(--theme-surface-2);
+    border-color: var(--theme-accent-line-1);
+    color: var(--theme-text-on-surface-1);
     font-size: @card-heading-1;
     height: @card-heading-1 * 1.5;
     margin-bottom: 12px;
     margin-right: 12px;
     min-width: @button-width;
+
+    &:hover {
+      background-color: var(--theme-surface-1);
+    }
   }
 }
diff --git a/src/admin/components/AwardPointsForm/style.less b/src/admin/components/AwardPointsForm/style.less
@@ -5,13 +5,13 @@
   width: 50%;
 
   .subtitle {
-    color: @blue-3;
+    color: var(--theme-primary-3);
     font-size: @general-heading-2;
     font-weight: 700;
   }
 
   label {
-    color: @blue-3;
+    color: var(--theme-primary-3);
     font-size: @card-heading-2;
     font-weight: 500;
 
@@ -21,7 +21,7 @@
   }
 
   h1 {
-    color: @black;
+    color: var(--theme-text-on-background-2);
     font-size: @general-heading-1;
     font-weight: 700;
   }
@@ -33,18 +33,18 @@
   }
 
   .save-button {
-    background-color: @green-1;
-    border-color: @green-2;
+    background-color: var(--theme-success-1);
+    border-color: var(--theme-surface-2);
     font-size: @general-body;
     font-weight: 500;
     height: @button-height;
     margin-right: 20px;
   }
 
   .discard-button {
-    background-color: @white;
-    border-color: @red;
-    color: @red;
+    background-color: var(--theme-background);
+    border-color: var(--theme-danger-1);
+    color: var(--theme-danger-1);
     font-size: @general-body;
     font-weight: 500;
     height: @button-height;
@@ -73,16 +73,17 @@
     }
 
     .add-new-awardee {
-      background: @white;
+      background: var(--theme-background);
       border-style: dashed;
+      color: var(--theme-text-on-background-2);
       font-size: @card-body;
     }
   }
 
   .input-style() {
-    background-color: @gray-1;
-    border-color: @gray-4;
-    color: @black;
+    background-color: var(--theme-surface-2);
+    border-color: var(--theme-accent-line-1);
+    color: var(--theme-text-on-surface-1);
     font-size: @general-body;
     height: @profile-input-height;
   }

diff --git a/src/admin/components/AwardPointsPage/style.less b/src/admin/components/AwardPointsPage/style.less
@@ -2,6 +2,7 @@
 
 .award-points-page {
   .title {
+    color: var(--theme-text-on-background-1);
     font-size: @general-heading-1;
     font-weight: 700;
   }

diff --git a/src/admin/components/CreateEventForm/style.less b/src/admin/components/CreateEventForm/style.less
@@ -5,13 +5,13 @@
   width: 50%;
 
   .subtitle {
-    color: @blue-3;
+    color: var(--theme-primary-3);
     font-size: @general-heading-2;
     font-weight: 700;
   }
 
   label {
-    color: @blue-3;
+    color: var(--theme-primary-3);
     font-size: @card-heading-2;
     font-weight: 500;
 
@@ -21,7 +21,7 @@
   }
 
   h1 {
-    color: @black;
+    color: var(--theme-text-on-background-1);
     font-size: @general-heading-1;
     font-weight: 700;
   }
@@ -33,8 +33,8 @@
   }
 
   .save-button {
-    background-color: @green-1;
-    border-color: @green-2;
+    background-color: var(--theme-success-1);
+    border-color: var(--theme-surface-2);
     font-size: @general-body;
     font-weight: 500;
     height: @button-height;
@@ -43,9 +43,9 @@
   }
 
   .discard-button {
-    background-color: @white;
-    border-color: @red;
-    color: @red;
+    background-color: var(--theme-background);
+    border-color: var(--theme-danger-1);
+    color: var(--theme-danger-1);
     font-size: @general-body;
     font-weight: 500;
     height: @button-height;
@@ -55,9 +55,9 @@
   }
 
   .link-button {
-    background-color: @white;
-    border-color: @blue-1;
-    color: @blue-1;
+    background-color: var(--theme-background);
+    border-color: var(--theme-primary-4);
+    color: var(--theme-primary-4);
     font-size: @general-body;
     font-weight: 500;
     height: @button-height;
@@ -145,7 +145,7 @@
   }
 
   .form-error {
-    color: #f66;
+    color: var(--theme-danger-1);
     height: 20px;
     white-space: nowrap;
   }
@@ -155,9 +155,9 @@
   }
 
   .input-style() {
-    background-color: @gray-1;
-    border-color: @gray-4;
-    color: @black;
+    background-color: var(--theme-surface-2);
+    border-color: var(--theme-accent-line-1);
+    color: var(--theme-text-on-surface-1);
     font-size: @general-body;
     height: @profile-input-height;
   }
@@ -170,3 +170,26 @@
     width: 100%;
   }
 }
+
+// fix ant time and date selectors for dark mode
+.ant-time-picker-panel-inner {
+  background-color: var(--theme-background);
+}
+
+li.ant-time-picker-panel-select-option-selected {
+  background-color: var(--theme-background);
+  color: var(--theme-primary-4);
+}
+
+.ant-time-picker-panel-select li:hover {
+  background-color: var(--theme-surface-1);
+}
+
+.ant-time-picker-panel-input {
+  background-color: var(--theme-background);
+  color: var(--theme-text-on-surface-1);
+}
+
+[class*="-picker-clear"] {
+  background-color: var(--theme-surface-2);
+}
diff --git a/src/admin/components/EditEventForm/index.tsx b/src/admin/components/EditEventForm/index.tsx
@@ -48,14 +48,25 @@ interface EditEventFormProps {
 }
 
 const EditEventForm: React.FC<EditEventFormProps> = (props) => {
-  const { event, setFieldValue, setFieldTouched, handleBlur, handleChange, handleSubmit, values: eventData, errors, copyLink } = props;
+  const {
+    event,
+    setFieldValue,
+    setFieldTouched,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+    values: eventData,
+    errors,
+    copyLink,
+    deleteEvent,
+    values,
+  } = props;
 
   const params: { [key: string]: any } = useParams();
   const history = useHistory();
 
   const handleDelete = () => {
-    props
-      .deleteEvent(props.values.uuid)
+    deleteEvent(values.uuid)
       .then(() => {
         history.push('/');
       })