Add Copy tooltip icon and tweak animation

xypnox · Feb 9, 2024 · d5d031b · d5d031b
1 parent 0a6856b
commit d5d031b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/src/components/icons.ts b/src/components/icons.ts
@@ -42,6 +42,8 @@ export const icons = {
   "light": "ph:sun-duotone",
   "dark": "ph:moon-duotone",
   "auto": "ph:circle-half-duotone",
+
+  "done": "ph:check-circle",
 }
 
 const CustomizeIcon = `<path d="M4 10h8v1.47c0 .3-.24.53-.53.53H4.53a.53.53 0 0 1-.53-.53V10Z" fill="currentColor"/><rect opacity=".5" x="7" y="10" width="2" height="4" rx=".53" fill="currentColor"/><path opacity=".75" d="M4 6.53c0-.3.24-.53.53-.53H6v2.47c0 .3-.24.53-.53.53h-.94A.53.53 0 0 1 4 8.47V6.53Z" fill="currentColor"/><path opacity=".5" d="M4 2.53c0-.3.24-.53.53-.53h.94c.3 0 .53.24.53.53V5H4.53A.53.53 0 0 1 4 4.47V2.53Z" fill="currentColor"/><path opacity=".75" d="M7 2.53c0-.3.24-.53.53-.53h.94c.3 0 .53.24.53.53V6H7V2.53Z" fill="currentColor"/><path d="M7 7h2v1.47c0 .3-.24.53-.53.53h-.94A.53.53 0 0 1 7 8.47V7Z" fill="currentColor"/><path opacity=".75" d="M10 6h1.47c.3 0 .53.24.53.53v1.94c0 .3-.24.53-.53.53h-.94a.53.53 0 0 1-.53-.53V6Z" fill="currentColor"/><path opacity=".5" d="M10 2.53c0-.3.24-.53.53-.53h.94c.3 0 .53.24.53.53v1.94c0 .3-.24.53-.53.53H10V2.53Z" fill="currentColor"/>`

diff --git a/src/components/themeManager/editor.tsx b/src/components/themeManager/editor.tsx
@@ -7,7 +7,7 @@ import "@melloware/coloris/dist/coloris.css";
 import Coloris from "@melloware/coloris";
 import debounce from "lodash.debounce";
 import { capitalize } from "../../lib/text";
-import { Text, Button, ButtonGroup, Input, baseElementStyles } from "../elements/atoms";
+import { Text, Button, ButtonGroup, Input, baseElementStyles, GroupSeparator } from "../elements/atoms";
 
 const Label = styled('label')`
   width: 100%;
@@ -447,19 +447,19 @@ const Pickers = (props: {
 
 const tooltipAnim = keyframes`
   0% {
-    transform: translateY(-90%);
+    transform: translateY(-100%);
     opacity: 0;
   }
   25% {
-    transform: translateY(-110%);
+    transform: translateY(-125%);
     opacity: 1;
   }
   75% {
-    transform: translateY(-110%);
+    transform: translateY(-125%);
     opacity: 0.75;
   }
   100% {
-    transform: translateY(-120%);
+    transform: translateY(-150%);
     opacity: 0;
   }
 `
@@ -471,13 +471,21 @@ const CopiedTooltip = styled.div`
   right: 0;
   width: max-content;
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  iconify-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    font-size: 1.25rem;
+  }
   background: ${theme.primary.color};
   color: ${theme.primary.contrast};
   padding: 0.5rem;
   border-radius: ${theme.border.radius};
   text-align: center;
   transform: translateY(-100%);
-  animation: ${tooltipAnim} 1s ease-out forwards;
+  animation: ${tooltipAnim} 0.75s ease-out forwards;
 `
 
 export const ThemeEditor = (props: { closeEditor: () => void }) => {
@@ -676,11 +684,17 @@ export const ThemeEditor = (props: { closeEditor: () => void }) => {
       <Text>
         <iconify-icon icon={icons.copy} />
       </Text>
+      <GroupSeparator />
       <Show when={copied()}>
-        <CopiedTooltip>Copied</CopiedTooltip>
+        <CopiedTooltip>
+          <iconify-icon icon={icons.done} />
+          Copied
+        </CopiedTooltip>
       </Show>
       <Button onClick={() => onCopyPalette()}>Palette</Button>
+      <GroupSeparator />
       <Button onClick={() => onCopyCss()}>CSS</Button>
+      <GroupSeparator />
       <Button onClick={() => onCopyVars()}>Vars</Button>
     </ButtonGroup>
   </EditorWrapper>