Update package install toast styles to match figma (#403)

srcbookdev · Oct 22, 2024 · fa491ed · fa491ed
1 parent 5e23133
commit fa491ed
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 55 deletions.
diff --git a/packages/components/src/components/ui/button.tsx b/packages/components/src/components/ui/button.tsx
@@ -19,7 +19,7 @@ const buttonVariants = cva(
         secondary:
           'bg-secondary text-secondary-foreground border border-border hover:bg-muted hover:text-secondary-hover',
         link: 'text-primary underline-offset-4 hover:underline',
-        ghost: 'border border-transparent hover:border hover:border-secondary-foreground',
+        ghost: 'border border-transparent hover:bg-sb-core-20 dark:hover:bg-sb-core-110',
         icon: 'bg-transparent text-secondary-foreground hover:bg-muted',
       },
       size: {

diff --git a/packages/web/src/components/apps/package-install-toast.tsx b/packages/web/src/components/apps/package-install-toast.tsx
@@ -1,22 +1,24 @@
 import { useEffect, useState } from 'react';
-import { CircleAlertIcon, InfoIcon, Loader2Icon, XIcon } from 'lucide-react';
+import { CircleAlertIcon, InfoIcon, Loader2Icon } from 'lucide-react';
 
 import { usePackageJson } from './use-package-json';
 import { useLogs } from './use-logs';
 import { Button } from '@srcbook/components/src/components/ui/button';
 import { cn } from '@/lib/utils';
 
-const ToastWrapper: React.FC<{ showToast: boolean; children: React.ReactNode }> = ({
-  showToast,
-  children,
-}) => (
+const ToastWrapper: React.FC<{
+  showToast: boolean;
+  className?: string;
+  children: React.ReactNode;
+}> = ({ className, showToast, children }) => (
   <div
     className={cn(
-      'absolute bottom-4 left-4 z-20 bg-muted border flex items-center gap-4 p-4',
-      'rounded-lg transition-all duration-150 ease-in-out',
+      'absolute bottom-4 left-4 z-20 p-3 bg-muted border',
+      'rounded-md transition-all duration-150 ease-in-out text-sm',
       {
         'opacity-0 -bottom-8': !showToast,
       },
+      className,
     )}
   >
     {children}
@@ -37,75 +39,68 @@ const PackageInstallToast: React.FunctionComponent = () => {
   switch (status) {
     case 'installing':
       return (
-        <ToastWrapper showToast={showToast}>
-          <Loader2Icon size={18} className="animate-spin" />
-          <span className="select-none">Installing Packages...</span>
-
-          <Button
-            className="active:translate-y-0"
-            onClick={() => {
-              alert('todo');
-              setShowToast(false);
-            }}
-          >
-            Cancel
-          </Button>
-        </ToastWrapper>
-      );
-
-    case 'failed':
-      return (
-        <ToastWrapper showToast={showToast}>
-          <CircleAlertIcon size={18} />
-          <span className="font-medium select-none">Packages failed to install</span>
+        <ToastWrapper showToast={showToast} className="flex items-center gap-9">
+          <div className="flex items-center gap-3">
+            <Loader2Icon size={18} className="animate-spin" />
+            <span className="select-none">Installing Packages...</span>
+          </div>
 
           <Button
+            variant="ghost"
             className="active:translate-y-0"
-            onClick={() => {
-              togglePane();
-              setShowToast(false);
-            }}
-          >
-            More info
-          </Button>
-
-          <Button
-            variant="secondary"
-            size="icon"
             onClick={() => setShowToast(false)}
-            className="active:translate-y-0"
           >
-            <XIcon size={18} />
+            Close
           </Button>
         </ToastWrapper>
       );
 
-    case 'idle':
-    case 'complete':
+    case 'failed':
       return (
-        <ToastWrapper showToast={showToast}>
-          <InfoIcon size={18} />
-          <span className="select-none">Packages need to be installed</span>
+        <ToastWrapper showToast={showToast} className="flex items-center gap-9">
+          <div className="flex items-center gap-3">
+            <CircleAlertIcon size={18} />
+            <span className="font-medium select-none">Packages failed to install</span>
+          </div>
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-3">
             <Button
+              variant="ghost"
               className="active:translate-y-0"
-              onClick={() => npmInstall().then(() => setShowToast(false))}
+              onClick={() => setShowToast(false)}
             >
-              Install
+              Close
             </Button>
-
             <Button
-              variant="secondary"
-              size="icon"
-              onClick={() => setShowToast(false)}
               className="active:translate-y-0"
+              onClick={() => {
+                togglePane();
+                setShowToast(false);
+              }}
             >
-              <XIcon size={18} />
+              More info
             </Button>
           </div>
         </ToastWrapper>
       );
+
+    case 'idle':
+    case 'complete':
+      return (
+        <ToastWrapper showToast={showToast} className="flex items-center gap-9">
+          <div className="flex items-center gap-3">
+            <InfoIcon size={18} />
+            <span className="select-none">Packages need to be installed</span>
+          </div>
+
+          <Button
+            className="active:translate-y-0"
+            onClick={() => npmInstall().then(() => setShowToast(false))}
+          >
+            Install
+          </Button>
+        </ToastWrapper>
+      );
   }
 };