From cbd337ff98e42d13f6203e9b41ceb823eec73cde Mon Sep 17 00:00:00 2001 From: meganrm Date: Thu, 15 Feb 2024 10:47:12 -0800 Subject: [PATCH 1/9] remove right justify --- src/components/CustomModal/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/CustomModal/style.css b/src/components/CustomModal/style.css index 811295a02..690a19614 100644 --- a/src/components/CustomModal/style.css +++ b/src/components/CustomModal/style.css @@ -40,10 +40,9 @@ border: 1px solid var(--dark-three) !important; } -.modal :global(.ant-input) { - border: 1px solid var(--heather); +.modal :global(.ant-input-affix-wrapper) { + border: 1px solid var(--input-border-highlight); border-radius: 3px; - text-align: right; } .modal :global(.ant-divider) { From c303840a85af0fcae9ca9e5a36057e9d6b5846b3 Mon Sep 17 00:00:00 2001 From: meganrm Date: Thu, 15 Feb 2024 10:48:48 -0800 Subject: [PATCH 2/9] make sure all modals are getting consistent button styling --- src/components/FileUploadModal/index.tsx | 14 ++++-- src/components/FileUploadModal/style.css | 5 -- src/components/LocalFileUpload/index.tsx | 4 +- src/components/ShareTrajectoryModal/index.tsx | 4 +- src/components/theme/light-theme.css | 47 ++++++++++++------- src/styles/colors.css | 2 +- 6 files changed, 48 insertions(+), 28 deletions(-) diff --git a/src/components/FileUploadModal/index.tsx b/src/components/FileUploadModal/index.tsx index c598081a1..a8a1d4297 100644 --- a/src/components/FileUploadModal/index.tsx +++ b/src/components/FileUploadModal/index.tsx @@ -18,6 +18,7 @@ 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 @@ -97,8 +98,15 @@ const FileUploadModal: React.FC = ({ const footerButtons = ( <> - - + @@ -106,7 +114,7 @@ const FileUploadModal: React.FC = ({ return ( = ({ state: { localFile: true }, }} > - {children || } + {children || ( + + )} ); diff --git a/src/components/ShareTrajectoryModal/index.tsx b/src/components/ShareTrajectoryModal/index.tsx index e10c64d12..fd6d7b012 100644 --- a/src/components/ShareTrajectoryModal/index.tsx +++ b/src/components/ShareTrajectoryModal/index.tsx @@ -1,4 +1,5 @@ import React from "react"; +import classNames from "classnames"; import { connect } from "react-redux"; import { Button, Checkbox, Divider, Input } from "antd"; @@ -11,7 +12,6 @@ import CustomModal from "../CustomModal"; import { Link, Warn } from "../Icons"; import { URL_PARAM_KEY_TIME } from "../../constants"; import { editUrlParams } from "../../util"; -import classNames from "classnames"; import styles from "./style.css"; import theme from "../theme/light-theme.css"; @@ -166,7 +166,7 @@ const ShareTrajectoryModal = ({ ), footer: ( - ), diff --git a/src/components/theme/light-theme.css b/src/components/theme/light-theme.css index 07a07e33c..52b4f35bb 100644 --- a/src/components/theme/light-theme.css +++ b/src/components/theme/light-theme.css @@ -1,25 +1,40 @@ /* Default and primary button colors differ within modals */ -.light-theme :global(.ant-btn-default) { - background-color: var(--light-button-default-background); - border-color: var(--light-theme-modal-btn-default-color); - color: var(--light-button-default-color); + +/* primary button */ +.light-theme :global(.primary-button), modal :global(.primary-button):focus { + border: 1px solid var(--dark-four); + border-radius: 3px; + background-color: var(--dark-four); + color: var(--white-three) } -.light-theme :global(.ant-btn-primary) { - background-color: var(--light-theme-btn-primary-bg); - border: var(--light-button-primary-border); - color: var(--light-theme-btn-primary-color); +.light-theme :global(.primary-button):hover{ + color:var(--baby-purple); + border: 1px solid var(--dark-four); } -.light-theme :global(.ant-btn-primary[disabled]) { - background: var(--light-button-disabled-background); - border: var(--light-button-disabled-border); - color: var(--light-theme-btn-primary-color); +.light-theme :global(.primary-button):disabled{ + border: 1px solid var(--heather); + color:var(--white-three); + background-color: var(--heather); } -.light-theme :global(.ant-btn-text) { - background-color: var(--dark-four); - border-color: var(--dark-four); - color: var(--white-three); +/* secondary button */ +.light-theme :global(.secondary-button), modal :global(.secondary-button):focus{ + border: 1px solid var(--dark-four); + border-radius: 3px; + background-color: transparent; + color: var(--dark-four) +} + +.light-theme :global(.secondary-button):hover{ + background-color: var(--charcoal-grey); + color:var(--baby-purple); + border: 1px solid var(--dark-four); } +.light-theme :global(.secondary-button):disabled{ + border: 1px solid var(--heather); + color:var(--heather); + background-color: transparent; +} \ No newline at end of file diff --git a/src/styles/colors.css b/src/styles/colors.css index 9803ecefc..3bf16de3a 100644 --- a/src/styles/colors.css +++ b/src/styles/colors.css @@ -36,7 +36,7 @@ --footer-text: var(--warm-gray); --footer-text-border-bottom: var(--greyish-brown); --footer-link: var(--blue); - --input-border-highlight: var(--baby-purple); + --input-border-highlight: var(--heather); --dark-theme-primary-color: var(--baby-purple); --dark-theme-body-bg: var(--black); --dark-theme-header-bg: var(--dark-three); From 827db583ab56ed2d385b5d4487025daf6b6b3feb Mon Sep 17 00:00:00 2001 From: meganrm Date: Thu, 15 Feb 2024 11:41:20 -0800 Subject: [PATCH 3/9] fix hover issues --- src/components/LocalFileUpload/style.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/src/components/LocalFileUpload/style.css b/src/components/LocalFileUpload/style.css index ec8863070..a56c5971f 100644 --- a/src/components/LocalFileUpload/style.css +++ b/src/components/LocalFileUpload/style.css @@ -1,11 +1,30 @@ .file-upload :global(.ant-upload-list) { min-height: 30px; } +.file-upload :global(.ant-upload-list-item):hover, +.file-upload :global(.ant-upload-list-item-list-type-text):focus, +.file-upload :global(.ant-upload-list-item-list-type-text) :global(.ant-upload-list-item-info):hover { + background-color: transparent; +} .file-upload :global(.ant-upload-list-item-card-actions-btn) { border: none; } +.file-upload :global(.ant-upload-list-item-card-actions-btn) { + opacity: initial; +} + .file-upload :global(.ant-upload-list-item-card-actions-btn) svg { color: #d14040; } + +.file-upload :global(.ant-upload-list-text .ant-upload-list-item-name) { + padding: 0; +} + +.file-upload :global(.ant-upload-span) { + justify-content: flex-start; + width: max-content; +} + From 06563c4574ae60b453b4979531fbf44cd2390fa3 Mon Sep 17 00:00:00 2001 From: meganrm Date: Thu, 15 Feb 2024 11:41:53 -0800 Subject: [PATCH 4/9] keep close x from disappearing --- src/components/CustomModal/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/CustomModal/style.css b/src/components/CustomModal/style.css index 690a19614..3e6fd6532 100644 --- a/src/components/CustomModal/style.css +++ b/src/components/CustomModal/style.css @@ -51,3 +51,7 @@ left: 0; background-color: var(--heather); } + +.modal :global(.ant-modal-close):hover{ + color: var(--white-three); +} \ No newline at end of file From 1d17a0b5d8d72cbb359447fd02e65042b32364c6 Mon Sep 17 00:00:00 2001 From: meganrm Date: Thu, 15 Feb 2024 11:42:06 -0800 Subject: [PATCH 5/9] change color vars to semantic ones --- src/components/theme/light-theme.css | 44 +++++++++++++++------------- src/styles/colors.css | 17 +++++++++++ 2 files changed, 40 insertions(+), 21 deletions(-) diff --git a/src/components/theme/light-theme.css b/src/components/theme/light-theme.css index 52b4f35bb..40cb76151 100644 --- a/src/components/theme/light-theme.css +++ b/src/components/theme/light-theme.css @@ -1,40 +1,42 @@ /* Default and primary button colors differ within modals */ /* primary button */ -.light-theme :global(.primary-button), modal :global(.primary-button):focus { - border: 1px solid var(--dark-four); +.light-theme :global(.primary-button), +modal :global(.primary-button):focus { + border: 1px solid var(--light-theme-button-primary-bg); border-radius: 3px; - background-color: var(--dark-four); - color: var(--white-three) + background-color: var(--light-theme-button-primary-bg); + color: var(--light-theme-button-primary-text); } -.light-theme :global(.primary-button):hover{ - color:var(--baby-purple); - border: 1px solid var(--dark-four); +.light-theme :global(.primary-button):hover { + color: var(--light-theme-button-primary-text-hove); + border: 1px solid var(--light-theme-button-primary-border-hover); } -.light-theme :global(.primary-button):disabled{ +.light-theme :global(.primary-button):disabled { border: 1px solid var(--heather); - color:var(--white-three); - background-color: var(--heather); + color: var(--light-theme-button-primary-text-disabled); + background-color: var(--light-theme-button-primary-bg-disabled); } /* secondary button */ -.light-theme :global(.secondary-button), modal :global(.secondary-button):focus{ - border: 1px solid var(--dark-four); +.light-theme :global(.secondary-button), +modal :global(.secondary-button):focus { + border: 1px solid var(--light-theme-button-secondary-border); border-radius: 3px; background-color: transparent; - color: var(--dark-four) + color: var(--light-theme-button-secondary-text); } -.light-theme :global(.secondary-button):hover{ - background-color: var(--charcoal-grey); - color:var(--baby-purple); - border: 1px solid var(--dark-four); +.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):disabled{ - border: 1px solid var(--heather); - color:var(--heather); +.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; -} \ No newline at end of file +} diff --git a/src/styles/colors.css b/src/styles/colors.css index 3bf16de3a..02855f60c 100644 --- a/src/styles/colors.css +++ b/src/styles/colors.css @@ -66,6 +66,23 @@ --dark-theme-version-badge-purple: var(--dark-five); --light-theme-background-purple: var(--pale-grey); --light-theme-button-purple: var(--dark-blue-grey); + + --light-theme-button-primary-text: var(--white-three); + --light-theme-button-primary-bg: var(--dark-blue-grey); + --light-theme-button-primary-text-hover: var(--baby-purple); + --light-theme-button-primary-border-hover: var(--dark-four); + --light-theme-button-primary-text-disabled: var(--white-three); + --light-theme-button-primary-bg-disabled: var(--heather); + + + --light-theme-button-secondary-text: var(--dark-four); + --light-theme-button-secondary-border: var(--dark-four); + --light-theme-button-secondary-text-hover: var(--baby-purple); + --light-theme-button-secondary-bg-hover: var(--charcoal-grey); + --light-theme-button-secondary-text-disabled: var(--heather); + --light-theme-button-primary-border-disabled: var(--heather); + + --light-theme-heading1-gray: var(--dark-three); --light-theme-heading2-gray: var(--greyish-brown); --light-theme-panel-light-gray: var(--white-four); From 201caa46be24cf54da7a01895e54aed010a55a6f Mon Sep 17 00:00:00 2001 From: meganrm Date: Thu, 15 Feb 2024 11:48:52 -0800 Subject: [PATCH 6/9] make share target bigger --- src/components/ShareTrajectoryButton/index.tsx | 3 +-- src/components/ShareTrajectoryButton/style.css | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/ShareTrajectoryButton/index.tsx b/src/components/ShareTrajectoryButton/index.tsx index b2ec72dc7..c80124c27 100644 --- a/src/components/ShareTrajectoryButton/index.tsx +++ b/src/components/ShareTrajectoryButton/index.tsx @@ -30,7 +30,7 @@ const ShareTrajectoryButton = ({ const tooltipOffset = isDisabled ? [0, -30] : [0, -18]; return ( -
+
{isSharing ? (