refactor

liam-hq · Jan 31, 2025 · e435a3c · e435a3c
1 parent 39f734a
commit e435a3c
Show file tree

Hide file tree

Showing 14 changed files with 382 additions and 288 deletions.
diff --git a/...tend/packages/erd-core/src/components/ERDRenderer/Toolbar/FitviewButton/FitviewButton.tsx b/...tend/packages/erd-core/src/components/ERDRenderer/Toolbar/FitviewButton/FitviewButton.tsx
@@ -4,14 +4,23 @@ import { useUserEditingStore } from '@/stores'
 import { IconButton, Scan } from '@liam-hq/ui'
 import { ToolbarButton } from '@radix-ui/react-toolbar'
 import { useReactFlow } from '@xyflow/react'
-import { type FC, type ReactNode, useCallback } from 'react'
+import {
+  type ComponentProps,
+  type FC,
+  type ReactNode,
+  useCallback,
+} from 'react'
 import styles from './Fitview.module.css'
 
 interface FitviewButtonProps {
   children?: ReactNode
+  size?: ComponentProps<typeof IconButton>['size']
 }
 
-export const FitviewButton: FC<FitviewButtonProps> = ({ children = '' }) => {
+export const FitviewButton: FC<FitviewButtonProps> = ({
+  children = '',
+  size = 'md',
+}) => {
   const { fitView } = useReactFlow()
   const { showMode } = useUserEditingStore()
   const { version } = useVersion()
@@ -30,7 +39,7 @@ export const FitviewButton: FC<FitviewButtonProps> = ({ children = '' }) => {
 
   return (
     <ToolbarButton asChild onClick={handleClick} className={styles.menuButton}>
-      <IconButton icon={<Scan />} tooltipContent="Zoom to Fit">
+      <IconButton size={size} icon={<Scan />} tooltipContent="Zoom to Fit">
         {children}
       </IconButton>
     </ToolbarButton>

diff --git a/...ckages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/MobileToolbar.module.css b/...ckages/erd-core/src/components/ERDRenderer/Toolbar/MobileToolbar/MobileToolbar.module.css
@@ -7,7 +7,6 @@
   position: fixed;
   left: 16px;
   bottom: 16px;
-  padding: var(--spacing-2, 8px);
   flex-direction: column;
   justify-content: center;
   gap: var(--spacing-2, 8px);
@@ -23,10 +22,19 @@
   }
 }
 
+.ellipsis {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .positionRelative {
   position: relative; /* for children elements absolute position */
 }
 
+/* for resize animation */
 .closed {
   width: 40px;
   height: 40px;
@@ -42,25 +50,7 @@
   height: 178px;
 }
 
-.ellipsis {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-}
-
-.ellipsis button {
-  width: 100%;
-  height: 100%;
-  min-width: 40px;
-  min-height: 40px;
-  padding: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
+/* for fade-in animation */
 .hidden {
   visibility: hidden;
   pointer-events: none;
@@ -72,10 +62,6 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
-
-  /* fade in animation */
   opacity: 0;
   transition: opacity 155ms ease;
   transition-delay: 150ms;
@@ -86,116 +72,3 @@
   visibility: visible;
   pointer-events: auto;
 }
-
-.closeButton {
-  display: flex;
-  height: 23px;
-  padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
-  justify-content: center;
-  gap: var(--spacing-1half, 6px);
-  width: 100%;
-  border-radius: var(--border-radius-base, 4px);
-  border: 1px solid var(--button-border, #434546);
-  color: var(--button-secondary-foreground, #fff);
-  font-size: var(--font-size-3, 12px);
-}
-
-/* showModeMenu before */
-.showShowModeMenu {
-  width: 141px;
-}
-
-.box2 {
-  display: flex;
-  padding-left: var(--spacing-1, 4px);
-  align-items: center;
-  gap: var(--spacing-1, 4px);
-}
-
-.showMode {
-  display: flex;
-  width: 102px;
-  padding: var(--spacing-1, 4px) var(--spacing-2, 8px);
-  align-items: center;
-  gap: var(--spacing-1half, 6px);
-
-  color: var(--button-secondary-foreground, #fff);
-  font-size: var(--font-size-3, 12px);
-}
-
-/* showModeMenu */
-.box1 {
-  display: flex;
-  padding: var(--spacing-1, 4px) 0px;
-  align-items: center;
-  gap: var(--spacing-1, 4px);
-  align-self: stretch;
-}
-
-.cheveron {
-  display: flex;
-  width: 12px;
-  height: 12px;
-  justify-content: center;
-  align-items: center;
-}
-.backShowLink {
-  color: var(--overlay-60, rgba(255, 255, 255, 0.6));
-  font-size: var(--font-size-3, 12px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-}
-
-.wrapper {
-  display: flex;
-  padding: var(--spacing-1, 4px);
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: var(--spacing-1, 4px);
-}
-
-.zoomLevelText {
-  display: flex;
-  width: 100%;
-  padding: var(--spacing-1, 4px);
-  gap: var(--spacing-1, 4px);
-  justify-content: space-between;
-  align-items: center;
-}
-
-.zoom {
-  color: var(--overlay-60, rgba(255, 255, 255, 0.6));
-  font-size: var(--font-size-3, 12px);
-}
-
-.zoomPercent {
-  color: var(--global-foreground, #fff);
-  font-family: var(--code-font, 'IBM Plex Mono');
-  text-align: center;
-  font-size: var(--font-size-3, 12px);
-}
-
-.divider {
-  width: 141px;
-  height: 1px;
-  color: #383a3b;
-}
-
-.buttonGroup {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  align-self: stretch;
-}
-
-.menuButton {
-  display: flex;
-  padding: var(--spacing-2, 8px) var(--spacing-1, 4px);
-  align-items: center;
-  gap: var(--spacing-2, 8px);
-
-  color: var(--global-foreground, #fff);
-  font-size: var(--font-size-2, 11px);
-}