Improve UX of highlight color picker

WorldBrain · Jul 24, 2024 · 8ca329c · 8ca329c
1 parent 9630e11
commit 8ca329c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/annotations/components/highlightColorPicker/index.tsx b/src/annotations/components/highlightColorPicker/index.tsx
@@ -23,6 +23,7 @@ import {
 } from '@worldbrain/memex-common/lib/common-ui/components/highlightColorPicker/utils'
 import { color } from 'html2canvas/dist/types/css/types/color'
 import KeyboardShortcuts from '@worldbrain/memex-common/lib/common-ui/components/keyboard-shortcuts'
+import LoadingBlock from '@worldbrain/memex-common/lib/common-ui/components/loading-block'
 
 export interface Props {
     annotationId: string
@@ -406,7 +407,6 @@ export default class HighlightColorPicker extends React.Component<
                     }}
                 />
             </ColorEditBox>
-            // </PopoutBox>
         )
     }
 
@@ -428,11 +428,7 @@ export default class HighlightColorPicker extends React.Component<
             this.state.highlightColorSettingLoadState == null ||
             this.state.highlightColorSettingLoadState === 'running'
         ) {
-            return (
-                <LoadingBox>
-                    <LoadingIndicator size={30} />
-                </LoadingBox>
-            )
+            return <LoadingBlock size={22} width={'230px'} height={'208px'} />
         } else {
             try {
                 const settings = this.state.highlightColorSettingState
@@ -687,6 +683,14 @@ const LoadingBox = styled.div`
     width: 100%;
 `
 
+const TopSection = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    grid-gap: 5px;
+    color: ${(props) => props.theme.colors.white};
+`
+
 export const GlobalStyle = createGlobalStyle`
 
 .react-colorful {

diff --git a/src/in-page-ui/ribbon/react/containers/ribbon/logic.ts b/src/in-page-ui/ribbon/react/containers/ribbon/logic.ts
@@ -1062,11 +1062,13 @@ export class RibbonContainerLogic extends UILogic<
             })
 
         setState(!currentSetting)
-
         try {
             if (currentSetting === true) {
                 await this.dependencies.inPageUI.removeTooltip()
             } else {
+                await this.dependencies.tooltip.setState(!currentSetting)
+                await this.dependencies.inPageUI.toggleTooltip()
+
                 await this.dependencies.inPageUI.showTooltip()
             }
             await this.dependencies.tooltip.setState(!currentSetting)