Improve UX of auto-added button

WorldBrain · Jul 20, 2024 · 0d7c649 · 0d7c649
1 parent f7a3c2b
commit 0d7c649
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/external/@worldbrain/memex-common b/external/@worldbrain/memex-common
diff --git a/src/annotations/components/AnnotationEditable.tsx b/src/annotations/components/AnnotationEditable.tsx
@@ -732,23 +732,24 @@ export default class AnnotationEditable extends React.Component<Props, State> {
                     tooltipText={
                         this.props.isShared ? (
                             <span>
-                                Disable Auto-Add
-                                <br /> Only added to Spaces you manually select
+                                <strong>Auto-Added: ON</strong>
+                                <br />
+                                Visible in all Spaces the page is in
                             </span>
                         ) : (
                             <span>
-                                Enable Auto-Add
-                                <br /> Added to all Spaces the page is in
+                                <strong>Add-added: OFF</strong>
+                                <br /> Only visible in manually added Spaces
                             </span>
                         )
                     }
                     placement="bottom"
                     getPortalRoot={this.props.getRootElement}
                 >
                     <Icon
-                        heightAndWidth="28px"
+                        heightAndWidth="26px"
                         icon={'spread'}
-                        color={this.props.isShared ? 'prime1' : 'greyScale3'}
+                        color={this.props.isShared ? 'prime1' : 'greyScale4'}
                         onClick={(event) => {
                             event.stopPropagation()
                             if (event.shiftKey) {
@@ -759,7 +760,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {
                                 )(!this.props.isShared, !this.props.isShared)
                             }
                         }}
-                        padding={'1px'}
+                        padding={'2px'}
                     />
                 </TooltipBox>
             </AutoAddedIndicator>
@@ -1504,7 +1505,7 @@ export default class AnnotationEditable extends React.Component<Props, State> {
 
 const AutoAddButtonContainer = styled.div`
     position: absolute;
-    bottom: 2px;
+    bottom: 3px;
     left: 10px;
     z-index: 100;
 `