fix: organize colors, modal buttons (#473)

* organize and prune color variables and apply light theme at custom modal level * use var for disabled input text color * prevent flicker on select file button * remove classnames import from file upload modal * restore necessry whitespace in version modal text * position close x correctly in modal header * fix typo in focus selector * remove unneeded ant animation prop
simularium · Mar 12, 2024 · 50a8c6f · 50a8c6f
1 parent a317426
commit 50a8c6f
Show file tree

Hide file tree

Showing 14 changed files with 114 additions and 147 deletions.
diff --git a/src/components/CustomModal/index.tsx b/src/components/CustomModal/index.tsx
@@ -2,11 +2,15 @@ import React from "react";
 import { Modal, ModalProps } from "antd";
 import classNames from "classnames";
 
+import theme from "../theme/light-theme.css";
 import styles from "./style.css";
 
 /** Tiny wrapper component to keep modal styling consistent */
 const CustomModal: React.FC<ModalProps> = (props) => (
-    <Modal {...props} className={classNames(styles.modal, props.className)} />
+    <Modal
+        {...props}
+        className={classNames(theme.lightTheme, styles.modal, props.className)}
+    />
 );
 
 export default CustomModal;
diff --git a/src/components/CustomModal/style.css b/src/components/CustomModal/style.css
@@ -12,7 +12,7 @@
 
 .modal :global(.ant-modal-footer) {
     padding: 12px 16px 20px;
-    background-color: var(--modal-content-bg);
+    background-color: var(--light-theme-modal-content-bg);
     max-height: 56px;
 }
 
@@ -33,6 +33,7 @@
     height: 40px;
     display: flex;
     align-items: center;
+    justify-content: center;
 }
 
 .modal :global(.ant-checkbox-inner) {
@@ -54,4 +55,8 @@
 
 .modal :global(.ant-modal-close):hover{
     color: var(--white-three);
+}
+
+.modal :global(.ant-modal-footer) button {
+    width: 82px;
 }
diff --git a/src/components/FileUploadModal/index.tsx b/src/components/FileUploadModal/index.tsx
@@ -18,7 +18,6 @@ import LocalFileUpload from "../LocalFileUpload";
 import uploadFiles from "./upload-local-files";
 
 import styles from "./style.css";
-import theme from "../theme/light-theme.css";
 
 const enum UploadTab {
     // this version of antd requires tab keys to be strings
@@ -102,7 +101,6 @@ const FileUploadModal: React.FC<FileUploadModalProps> = ({
                 Cancel
             </Button>
             <Button
-                type="primary"
                 className="primary-button"
                 disabled={disableLoad}
                 onClick={onLoadClick}
@@ -114,7 +112,7 @@ const FileUploadModal: React.FC<FileUploadModalProps> = ({
 
     return (
         <CustomModal
-            className={[styles.uploadModal, theme.lightTheme].join(" ")}
+            className={styles.uploadModal}
             title="Choose a Simularium file to load"
             open
             footer={footerButtons}

diff --git a/src/components/LandingPage/style.css b/src/components/LandingPage/style.css
@@ -139,30 +139,4 @@
 
 .markdown p {
     margin-bottom: 2em;
-}
-
-/* These will be useful if we ever bring a call-to-action button back */
-/* .call-to-action-panel :global(.ant-btn) {
-    display: block;
-    width: 130px;
-    height: 30px;
-    font-size: 14px;
-    margin-top: 3em;
-    margin-bottom: 0.5em;
-    margin-left: auto;
-    margin-right: auto;
-    transition: 0.3s;
-    border-radius: 3px;
-}
-
-.call-to-action-panel :global(.ant-btn-primary),
-.call-to-action-panel :global(.ant-btn-ghost:hover) {
-    background-color: var(--light-theme-button-purple);
-    color: var(--light-theme-background-purple);
-}
-
-.call-to-action-panel :global(.ant-btn-ghost),
-:global(.ant-btn-primary:hover) {
-    background-color: transparent;
-    color: var(--light-theme-button-purple);
-} */
+}
diff --git a/src/components/LocalFileUpload/style.css b/src/components/LocalFileUpload/style.css
@@ -16,7 +16,7 @@
 }
 
 .file-upload :global(.ant-upload-list-item-card-actions-btn) svg {
-    color: #d14040;
+    color: var(--cancel-icon-color);
 }
 
 .file-upload :global(.ant-upload-list-text .ant-upload-list-item-name) {

diff --git a/src/components/ShareTrajectoryModal/index.tsx b/src/components/ShareTrajectoryModal/index.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import classNames from "classnames";
 import { connect } from "react-redux";
 import { Button, Checkbox, Divider, Input } from "antd";
 
@@ -14,7 +13,6 @@ import { URL_PARAM_KEY_TIME } from "../../constants";
 import { editUrlParams } from "../../util";
 
 import styles from "./style.css";
-import theme from "../theme/light-theme.css";
 
 interface ShareTrajectoryModalProps {
     trajectoryIsSharable: boolean;
@@ -125,11 +123,7 @@ const ShareTrajectoryModal = ({
                 </>
             ),
             footer: (
-                <Button
-                    className={styles.okButton}
-                    type="default"
-                    onClick={closeModal}
-                >
+                <Button className={"secondary-button"} onClick={closeModal}>
                     Ok
                 </Button>
             ),
@@ -143,12 +137,14 @@ const ShareTrajectoryModal = ({
                             value={url}
                             disabled
                         />
-                        <Button type="text" onClick={copyToClipboard}>
+                        <Button
+                            className={"primary-button"}
+                            onClick={copyToClipboard}
+                        >
                             Copy {Link}
                         </Button>
                     </div>
                     <div className={styles.timeInputContainer}>
-                        {" "}
                         <Checkbox onChange={handleAllowUserInput}></Checkbox>
                         <p className={styles.timeInputText}>Start at</p>
                         <Input
@@ -158,9 +154,8 @@ const ShareTrajectoryModal = ({
                             onChange={handleUserInput}
                         />
                         <div>
-                            {" "}
-                            /{displayTimes.roundedLastFrameTime}{" "}
-                            {timeUnits ? timeUnits.name : null}{" "}
+                            /{displayTimes.roundedLastFrameTime}
+                            {timeUnits ? timeUnits.name : null}
                         </div>
                     </div>
                 </>
@@ -175,7 +170,7 @@ const ShareTrajectoryModal = ({
 
     return (
         <CustomModal
-            className={classNames(styles.uploadModal, theme.lightTheme)}
+            className={styles.uploadModal}
             title="Share Trajectory"
             width={trajectoryIsSharable ? 550 : 611}
             onCancel={closeModal}

diff --git a/src/components/ShareTrajectoryModal/style.css b/src/components/ShareTrajectoryModal/style.css
@@ -1,7 +1,3 @@
-.ok-button {
-    width: 75px;
-}
-
 .body-text {
     padding-bottom: 10px;
 }
@@ -21,7 +17,7 @@
 
 .time-input[disabled] {
     background: transparent;
-    color: var(--medium-grey);
+    color: var(--light-theme-input-disabled-color);
 }
 
 .time-input-text {

diff --git a/src/components/StarCheckbox/style.css b/src/components/StarCheckbox/style.css
@@ -3,7 +3,7 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    color: #4a4a4a;
+    color: var(--star-checkbox-bg);
     font-size: 14px;
     font-variant: tabular-nums;
     line-height: 1.5715;
@@ -18,7 +18,7 @@
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    color: #4a4a4a;
+    color: var(--star-checkbox-bg);
     font-size: 14px;
     font-variant: tabular-nums;
     line-height: 1.5715;

diff --git a/src/components/VersionModal/index.tsx b/src/components/VersionModal/index.tsx
@@ -15,7 +15,7 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
     };
 
     const footerButton = (
-        <Button type="primary" onClick={closeModal}>
+        <Button className={"secondary-button"} onClick={closeModal}>
             Close
         </Button>
     );
@@ -31,19 +31,15 @@ const VersionModal: React.FC<VersionModalProps> = ({ setModalVisible }) => {
             width={425}
         >
             <div>
-                {" "}
                 Application:{" "}
                 <span className={styles.blueText}>
-                    {" "}
-                    simularium-website v{SIMULARIUM_WEBSITE_VERSION}{" "}
+                    simularium-website v{SIMULARIUM_WEBSITE_VERSION}
                 </span>
             </div>
             <div>
-                {" "}
                 Viewer:{" "}
                 <span className={styles.blueText}>
-                    {" "}
-                    simularium-viewer v{SIMULARIUM_VIEWER_VERSION}{" "}
+                    simularium-viewer v{SIMULARIUM_VIEWER_VERSION}
                 </span>
             </div>
         </CustomModal>

diff --git a/src/components/VersionModal/style.css b/src/components/VersionModal/style.css
@@ -14,5 +14,5 @@
 }
 
 .container :global(.ant-modal-footer) {
-    background-color: var(--modal-content-bg);
+    background-color: var(--light-theme-modal-content-bg);
 }
diff --git a/src/components/theme/light-theme.css b/src/components/theme/light-theme.css
@@ -1,42 +1,41 @@
-/* Default and primary button colors differ within modals */
+/* Primary and secondary button colors differ within modals */
 
-/* primary button */
+/* primary buttons */
 .light-theme :global(.primary-button),
 .light-theme :global(.primary-button):focus {
-    border: 1px solid var(--light-theme-button-primary-bg);
-    border-radius: 3px;
-    background-color: var(--light-theme-button-primary-bg);
-    color: var(--light-theme-button-primary-text);
+    background-color: var(--light-theme-btn-primary-bg);
+    border: var(--light-theme-btn-primary-border);
+    color: var(--light-theme-btn-primary-color);
 }
 
-.light-theme :global(.primary-button):hover {
-    color: var(--light-theme-button-primary-text-hover);
-    border: 1px solid var(--light-theme-button-primary-border-hover);
+.light-theme :global(.primary-button:hover) {
+    background-color: var(--light-theme-btn-primary-hover-bg);
+    border: var(--light-theme-btn-primary-hover-border);
+    color: var(--light-theme-btn-primary-hover-color);
 }
 
-.light-theme :global(.primary-button):disabled {
-    border: 1px solid var(--light-theme-button-primary-text-disabled);
-    color: var(--light-theme-button-primary-text-disabled);
-    background-color: var(--light-theme-button-primary-bg-disabled);
+.light-theme :global(.primary-button[disabled]) {
+    background: var(--light-theme-btn-primary-disabled-bg);
+    border: var(--light-theme-btn-primary-disabled-border);
+    color: var(--light-theme-btn-primary-disabled-color);
 }
 
-/* secondary button */
+/* secondary buttons: typically: close, ok, cancel */
 .light-theme :global(.secondary-button),
 .light-theme :global(.secondary-button):focus {
-    border: 1px solid var(--light-theme-button-secondary-border);
-    border-radius: 3px;
-    background-color: transparent;
-    color: var(--light-theme-button-secondary-text);
+    background-color: var(--light-theme-btn-secondary-bg);
+    border-color: var(--light-theme-btn-secondary-border);
+    color: var(--light-theme-btn-secondary-color);
 }
 
-.light-theme :global(.secondary-button):hover {
-    background-color: var(--light-theme-button-secondary-bg-hover);
-    color: var(--light-theme-button-secondary-text-hover);
-    border: 1px solid var(--light-theme-button-secondary-border);
+.light-theme :global(.secondary-button:hover) {
+    background-color: var(--light-theme-btn-secondary-hover-bg);
+    border-color: var(--light-theme-btn-secondary-hover-border);
+    color: var(--light-theme-btn-secondary-hover-color);
 }
 
-.light-theme :global(.secondary-button):disabled {
-    border: 1px solid var(--light-theme-button-primary-border-disabled);
-    color: var(--light-theme-button-secondary-text-disabled);
-    background-color: transparent;
+.light-theme :global(.secondary-button[disabled]) {
+    background: var(--light-theme-btn-secondary-disabled-bg);
+    border: var(--light-theme-btn-secondary-disabled-border);
+    color: var(--light-theme-btn-secondary-disabled-color);
 }
diff --git a/src/style.css b/src/style.css
@@ -80,7 +80,7 @@ use the :after pseduo selector to input the content.
 */
 .icon-focus:before {
     content: "\e90a";
-    color: #d8d8d8;
+    color: var(--icon-moon-color);
 }
 
 .icon-rotate:before {

diff --git a/src/styles/ant-vars.less b/src/styles/ant-vars.less
@@ -9,12 +9,12 @@ https://github.com/ant-design/ant-design/blob/master/components/style/themes/def
 @baby-purple: #b59ff6;
 @dark-purple: #3b3649;
 @allen-purple: #8d87aa;
-@greyish-brown: #4a4a4a;
+@grayish-brown: #4a4a4a;
 @highlight-green: #b2d030;
 @blue: #0094FF;
 @medium-dark-gray: #8b8b8b;
-@pale-grey: #ddd9ec;
-@warm-grey: #979797;
+@pale-gray: #ddd9ec;
+@warm-gray: #979797;
 @heather: #bab5c9;
 
 // -------- Colors -----------
@@ -46,11 +46,11 @@ https://github.com/ant-design/ant-design/blob/master/components/style/themes/def
 @font-family: 'Overpass', sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
   'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
   'Noto Color Emoji';
-@text-color             : @greyish-brown;
+@text-color             : @grayish-brown;
 //@text-color-secondary   : darken(#fff, 40%);
 
 @background-color-light : lighten(@dark-three, 10%);  // background of header and selected item
-//@background-color-base  : hsv(0, 0, 96%);  // Default grey background color
+//@background-color-base  : hsv(0, 0, 96%);  // Default gray background color
 
 // The background colors for active and hover states for things like
 // list items or table cells.
@@ -143,7 +143,7 @@ https://github.com/ant-design/ant-design/blob/master/components/style/themes/def
 // Radio buttons
 @radio-button-bg: @black;
 @radio-button-checked-bg: @dark-three;
-@radio-button-color: @greyish-brown;
+@radio-button-color: @grayish-brown;
 @radio-button-hover-color: @primary-5;
 @radio-button-active-color: @dark-three;
 @radio-disabled-button-checked-bg: tint(@black, 90%);
@@ -201,7 +201,7 @@ https://github.com/ant-design/ant-design/blob/master/components/style/themes/def
 // @modal-header-close-size: 56px;
 @modal-content-bg: #e7e4f2;
 @modal-heading-color: #fff;
-@modal-close-color: @warm-grey;
+@modal-close-color: @warm-gray;
 @modal-footer-bg: #f6f4ff;
 @modal-footer-border-color-split: @heather;
 @modal-footer-border-width: 1px;