fix(clear-button): graphClear and CameraRecenterControl Buttons Overl…

…ap Each Other
stakwork · Sep 25, 2024 · e8183f6 · e8183f6
1 parent 9fc43d7
commit e8183f6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/src/components/App/ActionsToolbar/GraphClear/index.tsx b/src/components/App/ActionsToolbar/GraphClear/index.tsx
@@ -1,15 +1,20 @@
 import { Button } from '@mui/material'
 import styled from 'styled-components'
+import { Tooltip } from '~/components/common/ToolTip'
 import ClearIcon from '~/components/Icons/ClearIcon'
 import { useDataStore } from '~/stores/useDataStore'
 
 export const GraphClear = () => {
   const { resetData } = useDataStore((s) => s)
 
-  return <CameraCenterButton href="" onClick={() => resetData()} size="medium" startIcon={<ClearIcon />} />
+  return (
+    <Tooltip content="Clear Graph" fontSize="13px" position="left">
+      <ClearButton href="" onClick={() => resetData()} size="medium" startIcon={<ClearIcon />} />
+    </Tooltip>
+  )
 }
 
-const CameraCenterButton = styled(Button)`
+const ClearButton = styled(Button)`
   && {
     padding: 0;
     width: 32px;

diff --git a/src/components/App/ActionsToolbar/index.tsx b/src/components/App/ActionsToolbar/index.tsx
@@ -17,8 +17,10 @@ export const ActionsToolbar = () => {
 
   return (
     <Wrapper align="flex-end" id="actions-toolbar">
-      {!isLoading && !universeQuestionIsOpen && isAdmin && <GraphClear />}
-      {!isLoading && !universeQuestionIsOpen && <CameraRecenterControl />}
+      <ButtonWrapper>
+        {!isLoading && !universeQuestionIsOpen && isAdmin && <GraphClear />}
+        {!isLoading && !universeQuestionIsOpen && <CameraRecenterControl />}
+      </ButtonWrapper>
       <Flex align="center" direction="row" mt={16}>
         {!isLoading && !universeQuestionIsOpen && <GraphViewControl />}
       </Flex>
@@ -33,3 +35,9 @@ const Wrapper = styled(Flex)`
   bottom: 20px;
   pointer-events: all;
 `
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`
diff --git a/src/components/common/ToolTip/index.tsx b/src/components/common/ToolTip/index.tsx
@@ -47,9 +47,16 @@ const TooltipText = styled.div<{
   padding: ${({ padding }) => padding || '5px 8px'};
   position: absolute;
   z-index: 1;
-  ${({ position }) => (position === 'top' ? 'bottom: 100%;' : 'top: 100%;')}
-  left: ${({ mrLeft }) => mrLeft || '50%'};
-  transform: translateX(-50%);
+  ${({ position }) => {
+    switch (position) {
+      case 'top':
+        return 'bottom: 100%; left: 50%; transform: translateX(-50%);'
+      case 'left':
+        return 'right: calc(100% + 6px); top: 50%; transform: translateY(-50%);'
+      default:
+        return 'top: 100%; left: 50%; transform: translateX(-50%);'
+    }
+  }}
   margin-top: ${({ margin }) => margin || '0px'};
   opacity: 0;
   transition: opacity 0.3s;