fix: extension onboarding ui/ux (#3639)

dailydotdev · Oct 8, 2024 · 4b79ce9 · 4b79ce9
1 parent 0950fc8
commit 4b79ce9
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/packages/extension/src/newtab/KeepItOverlay.tsx b/packages/extension/src/newtab/KeepItOverlay.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, useCallback, useEffect, useRef } from 'react';
 import {
   DailyIcon,
-  StraightArrowIcon,
+  LongArrowIcon,
 } from '@dailydotdev/shared/src/components/icons';
 import { IconSize } from '@dailydotdev/shared/src/components/Icon';
 import {
@@ -24,6 +24,8 @@ interface KeepItOverlayProps {
   onClose: () => void;
 }
 
+const TEN_SECONDS = 10000;
+
 export function KeepItOverlay({ onClose }: KeepItOverlayProps): ReactElement {
   const { logEvent } = useLogContext();
   const timeoutRef = useRef<ReturnType<typeof window.setTimeout>>();
@@ -52,7 +54,7 @@ export function KeepItOverlay({ onClose }: KeepItOverlayProps): ReactElement {
   useEffect(() => {
     timeoutRef.current = setTimeout(() => {
       onClick();
-    }, 5000);
+    }, TEN_SECONDS);
   }, [onClick]);
 
   return (
@@ -69,13 +71,13 @@ export function KeepItOverlay({ onClose }: KeepItOverlayProps): ReactElement {
         ALREADY DID THAT!
       </Button>
       <div className="absolute ml-16 mt-8 flex translate-y-full flex-col">
-        <StraightArrowIcon
+        <LongArrowIcon
           size={IconSize.XXXLarge}
-          className="z-3 rotate-180 text-brand-subtler"
+          className="z-3 h-[7rem] animate-bounce"
         />
-        <span className="absolute right-0 top-[80%] flex min-w-[20rem] flex-row items-center gap-2 rounded-12 bg-surface-primary p-3">
-          <span className="rounded-full bg-surface-invert p-1">
-            <DailyIcon />
+        <span className="absolute right-0 top-[80%] flex min-w-[21.25rem] flex-row items-center gap-2 rounded-12 bg-surface-primary p-3">
+          <span className="rounded-full bg-surface-invert">
+            <DailyIcon secondary className="w-full" size={IconSize.XLarge} />
           </span>
           <span className="ml-1 flex flex-col text-surface-invert">
             <Typography type={TypographyType.Footnote}>

diff --git a/packages/shared/src/components/icons/Arrow/Long/filled.svg b/packages/shared/src/components/icons/Arrow/Long/filled.svg
diff --git a/packages/shared/src/components/icons/Arrow/Long/index.tsx b/packages/shared/src/components/icons/Arrow/Long/index.tsx
@@ -0,0 +1,7 @@
+import React, { ReactElement } from 'react';
+import Icon, { IconProps } from '../../../Icon';
+import FilledIcon from './filled.svg';
+
+export const LongArrowIcon = (props: IconProps): ReactElement => (
+  <Icon {...props} IconPrimary={FilledIcon} IconSecondary={FilledIcon} />
+);
diff --git a/packages/shared/src/components/icons/Arrow/index.tsx b/packages/shared/src/components/icons/Arrow/index.tsx
@@ -7,5 +7,6 @@ export const ArrowIcon = (props: IconProps): ReactElement => (
   <Icon {...props} IconPrimary={OutlinedIcon} IconSecondary={FilledIcon} />
 );
 
+export * from './Long';
 export * from './Straight';
 export * from './Triangle';