Squashed commit of the following:

commit 092f511 Author: Joe Heffernan <[email protected]> Date: Fri Mar 22 16:20:24 2024 -0700 fix/hide tooltips after click (#477) * mange toolltip title and open with local state * use optional chaining for possibly null functions commit 41f8139 Author: Joe Heffernan <[email protected]> Date: Mon Mar 18 19:45:23 2024 -0700 feature/viewport button component (#478) * add viewport button component and organize dark theme colors * use antd tooltip placement prop type commit 4796413 Author: ascibisz <[email protected]> Date: Mon Mar 18 11:21:32 2024 -0700 0.11.0 commit e20842b Author: Joe Heffernan <[email protected]> Date: Tue Mar 12 13:32:28 2024 -0700 Fix/icomoon (#476) * new icon glyph set * apply icomoon icons with css vars and global styles * remove unused icons * remove icon declarations now in icomoon font * use var for star icon colors * new icomoon font set commit 1980c09 Author: Megan Riel-Mehan <[email protected]> Date: Tue Mar 12 12:05:34 2024 -0700 Feature/embed (#474) * fix the html loader result * add type * embed path * make sure the loading overlay shows * style title * remove extra color * remove log * remove unused code commit 50a8c6f Author: Joe Heffernan <[email protected]> Date: Tue Mar 12 10:43:06 2024 -0700 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 commit a317426 Author: Joe Heffernan <[email protected]> Date: Mon Mar 11 11:51:56 2024 -0700 reverse home page card order (#472) commit bb038e1 Author: Megan Riel-Mehan <[email protected]> Date: Fri Mar 8 10:56:44 2024 -0800 fix the html loader result (#475) * fix the html loader result * add type
simularium · Mar 25, 2024 · 090767f · 090767f
1 parent ad89ebc
commit 090767f
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 7 deletions.
diff --git a/src/components/CustomModal/style.css b/src/components/CustomModal/style.css
@@ -71,4 +71,4 @@
 .modal :global(.ant-checkbox)::after {
     background-color: transparent;
     border: 1px solid var(--light-theme-checkbox-color) !important;
-}
+}
diff --git a/src/components/StarCheckbox/index.tsx b/src/components/StarCheckbox/index.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import classNames from "classnames";
 import { Tooltip } from "antd";
 import { CheckboxChangeEvent, CheckboxProps } from "antd/lib/checkbox";
@@ -14,6 +14,9 @@ const StarCheckbox = ({
     value,
     className,
 }: CheckboxProps): JSX.Element => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [tooltipTitle, setTooltipTitle] = useState("Highlight");
+
     const parentClassnames = className ? className.split(" ") : [];
     const wrapperClassnames = classNames([...parentClassnames, styles.wrapper]);
     const checkboxClassNames = classNames(
@@ -24,22 +27,41 @@ const StarCheckbox = ({
         }
     );
 
+    const updateTooltipTitle = () => {
+        const text = checked ? "Remove highlight" : "Highlight";
+        setTooltipTitle(text);
+    };
+
+    const handleMouseEnter = () => {
+        setShowTooltip(true);
+    };
+
+    const handleMouseLeave = () => {
+        setShowTooltip(false);
+        updateTooltipTitle();
+    };
+
     return (
         <label className={wrapperClassnames}>
             <span className={styles.container}>
                 <Tooltip
-                    title={checked ? "Remove highlight" : "Highlight"}
+                    title={tooltipTitle}
                     placement="top"
                     mouseEnterDelay={TOOLTIP_DELAY}
                     color={TOOLTIP_COLOR}
+                    open={showTooltip}
+                    onOpenChange={updateTooltipTitle}
                 >
                     <input
                         checked={checked}
                         type="checkbox"
-                        onChange={(e: any) =>
-                            onChange ? onChange(e as CheckboxChangeEvent) : null
-                        }
+                        onChange={(e: any) => {
+                            setShowTooltip(false);
+                            onChange?.(e);
+                        }}
                         value={value}
+                        onMouseEnter={handleMouseEnter}
+                        onMouseLeave={handleMouseLeave}
                     />
                 </Tooltip>
                 <span className={checkboxClassNames} />

diff --git a/src/style.css b/src/style.css
@@ -1,4 +1,9 @@
 
+@import "./styles/colors.css";
+@import "./styles/constants.css";
+@import "./styles/icons.css";
+
+
 @import "./styles/colors.css";
 @import "./styles/constants.css";
 @import "./styles/icons.css";
@@ -161,4 +166,4 @@ with "icon-moon" class name.
     font-size: 12px;
     color: var(--light-theme-modal-close-icon);
     content: var(--close);
-}
+}
diff --git a/src/styles/colors.css b/src/styles/colors.css
@@ -15,12 +15,17 @@
     --dim-gray-two: #6e6e6e;
     --purplish-gray: #4a4658;
     --pale-gray: #ddd9ec;
+    --dim-gray-two: #6e6e6e;
+    --purplish-gray: #4a4658;
+    --pale-gray: #ddd9ec;
     --heather: #bab5c9;
     --text-gray: #a0a0a0;
     --grayish-brown: #4a4a4a;
     --warm-gray: #979797;
     --charcoal-gray: #3b3649;
     --light-purple: #e7e4f2;
+    --charcoal-gray: #3b3649;
+    --light-purple: #e7e4f2;
     --baby-purple: #b59ff6;
     --allen-purple: #8d87aa;
     --blue: #0094ff;
@@ -30,9 +35,17 @@
     --brick-red: #d14040;
     /* non-theme variables */
     --star-checkbox-bg: var(--grayish-brown);
+    --blue: #0094ff;
+    --baby-purple-two: #dccfff;
+    --medium-gray: #aeaeae;
+    --dark-blue-gray: #69738a;
+    --brick-red: #d14040;
+    /* non-theme variables */
+    --star-checkbox-bg: var(--grayish-brown);
     --footer-bg: var(--dark-three);
     --footer-text: var(--warm-gray);
     --footer-text-border-bottom: var(--grayish-brown);
+    --footer-text-border-bottom: var(--grayish-brown);
     --footer-link: var(--blue);
     --input-border-highlight: var(--heather);
     --color-picker-tooltip: var(--dark-blue-gray);
@@ -46,12 +59,27 @@
     --dark-theme-viewport-button-hover-bg: var(--purplish-gray);
     --dark-theme-viewport-button-disabled-color: var(--dim-gray-two);
     /* dark theme general/uncategorized */
+    --color-picker-tooltip: var(--dark-blue-gray);
+    --cancel-icon-color: var(--brick-red);
+    /* Dark theme */
+    /* viewport-buttons */
+    --dark-theme-viewport-button-bg: var(--dark-three);
+    --dark-theme-viewport-button-border: var(--dark-three);
+    --dark-theme-viewport-button-color: var(--white-three);
+    --dark-theme-viewport-button-toggle-border: var(--dim-gray-two);
+    --dark-theme-viewport-button-hover-bg: var(--purplish-gray);
+    --dark-theme-viewport-button-disabled-color: var(--dim-gray-two);
+    /* dark theme general/uncategorized */
     --dark-theme-body-bg: var(--black);
     --dark-theme-header-bg: var(--dark-three);
     --dark-theme-text-color: var(--off-white);
     --dark-theme-dim-color: var(--text-gray);
     --dark-theme-slider-handle-color: var(--white-three);
     --dark-theme-primary-color: var(--baby-purple);
+    --dark-theme-text-color: var(--off-white);
+    --dark-theme-dim-color: var(--text-gray);
+    --dark-theme-slider-handle-color: var(--white-three);
+    --dark-theme-primary-color: var(--baby-purple);
     --dark-theme-header-text: var(--text-gray);
     --dark-theme-component-bg: var(--dark-four);
     --dark-theme-input-border: var(--white-two);
@@ -66,6 +94,8 @@
     --dark-theme-sidebar-text: var(--white-two);
     --dark-theme-btn-hover-bg: var(--grayish-brown);
     --dark-theme-tooltip-bg: var(--charcoal-gray);
+    --dark-theme-btn-hover-bg: var(--grayish-brown);
+    --dark-theme-tooltip-bg: var(--charcoal-gray);
     --dark-theme-version-badge-purple: var(--dark-five);
     --dark-theme-star-icon-color: var(--warm-gray);
     --dark-theme-star-icon-active-color: var(--white-two);