Fix icons and delete confirm

midday-ai · Dec 8, 2024 · ea9cdad · ea9cdad
1 parent f294e90
commit ea9cdad
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 16 deletions.
diff --git a/apps/dashboard/src/components/delete-account.tsx b/apps/dashboard/src/components/delete-account.tsx
@@ -20,11 +20,14 @@ import {
   CardHeader,
   CardTitle,
 } from "@midday/ui/card";
+import { Input } from "@midday/ui/input";
+import { Label } from "@midday/ui/label";
 import { Loader2 } from "lucide-react";
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
 
 export function DeleteAccount() {
   const [isPending, startTransition] = useTransition();
+  const [value, setValue] = useState("");
 
   return (
     <Card className="border-destructive">
@@ -56,10 +59,23 @@ export function DeleteAccount() {
                 account and remove your data from our servers.
               </AlertDialogDescription>
             </AlertDialogHeader>
+
+            <div className="flex flex-col gap-2 mt-2">
+              <Label htmlFor="confirm-delete">
+                Type <span className="font-medium">DELETE</span> to confirm.
+              </Label>
+              <Input
+                id="confirm-delete"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+              />
+            </div>
+
             <AlertDialogFooter>
               <AlertDialogCancel>Cancel</AlertDialogCancel>
               <AlertDialogAction
                 onClick={() => startTransition(() => deleteUserAction())}
+                disabled={value !== "DELETE"}
               >
                 {isPending ? (
                   <Loader2 className="h-4 w-4 animate-spin" />

diff --git a/apps/dashboard/src/components/delete-team.tsx b/apps/dashboard/src/components/delete-team.tsx
@@ -20,15 +20,20 @@ import {
   CardHeader,
   CardTitle,
 } from "@midday/ui/card";
+import { Input } from "@midday/ui/input";
+import { Label } from "@midday/ui/label";
 import { Loader2 } from "lucide-react";
 import { useAction } from "next-safe-action/hooks";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 interface DeleteTeamProps {
   teamId: string;
 }
 
 export function DeleteTeam({ teamId }: DeleteTeamProps) {
+  const [value, setValue] = useState("");
+
   const router = useRouter();
   const deleteTeam = useAction(deleteTeamAction, {
     onSuccess: () => router.push("/teams"),
@@ -64,9 +69,24 @@ export function DeleteTeam({ teamId }: DeleteTeamProps) {
                 team and remove your data from our servers.
               </AlertDialogDescription>
             </AlertDialogHeader>
+
+            <div className="flex flex-col gap-2 mt-2">
+              <Label htmlFor="confirm-delete">
+                Type <span className="font-medium">DELETE</span> to confirm.
+              </Label>
+              <Input
+                id="confirm-delete"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+              />
+            </div>
+
             <AlertDialogFooter>
               <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction onClick={() => deleteTeam.execute({ teamId })}>
+              <AlertDialogAction
+                onClick={() => deleteTeam.execute({ teamId })}
+                disabled={value !== "DELETE"}
+              >
                 {deleteTeam.status === "executing" ? (
                   <Loader2 className="h-4 w-4 animate-spin" />
                 ) : (

diff --git a/apps/website/src/components/metrics.tsx b/apps/website/src/components/metrics.tsx
@@ -6,7 +6,7 @@ export function Metrics() {
       <Link href="/open-startup">
         <div className="flex flex-col md:pr-8 text-center">
           <h4 className="text-[#878787] text-sm mb-4">Businesses</h4>
-          <span className="text-2xl font-mono text-stroke">10,500+</span>
+          <span className="text-2xl font-mono text-stroke">10,600+</span>
         </div>
       </Link>
       <Link href="/open-startup">
@@ -18,7 +18,7 @@ export function Metrics() {
       <Link href="/open-startup">
         <div className="flex flex-col md:px-8 text-center">
           <h4 className="text-[#878787] text-sm mb-4">Transactions</h4>
-          <span className="text-2xl font-mono text-stroke">920K</span>
+          <span className="text-2xl font-mono text-stroke">942K</span>
         </div>
       </Link>
       <Link href="/open-startup">

diff --git a/packages/ui/src/components/icons.tsx b/packages/ui/src/components/icons.tsx
@@ -203,12 +203,10 @@ export const Icons = {
       >
         <path fill="currentColor" d="M0 0h24v24H0z" />
       </mask>
-      <g mask="url(#a)">
-        <path
-          fill="currentColor"
-          d="M3 21v-2l2-2v4H3Zm4 0v-6l2-2v8H7Zm4 0v-8l2 2.025V21h-2Zm4 0v-5.975l2-2V21h-2Zm4 0V11l2-2v12h-2ZM3 15.825V13l7-7 4 4 7-7v2.825l-7 7-4-4-7 7Z"
-        />
-      </g>
+      <path
+        fill="currentColor"
+        d="M3 21v-2l2-2v4H3Zm4 0v-6l2-2v8H7Zm4 0v-8l2 2.025V21h-2Zm4 0v-5.975l2-2V21h-2Zm4 0V11l2-2v12h-2ZM3 15.825V13l7-7 4 4 7-7v2.825l-7 7-4-4-7 7Z"
+      />
     </svg>
   ),
   Apps: MdOutlineApps,
@@ -257,12 +255,10 @@ export const Icons = {
       >
         <path fill="currentColor" d="M0 0h24v24H0z" />
       </mask>
-      <g mask="url(#a)">
-        <path
-          fill="currentColor"
-          d="M1 20v-2.8c0-.567.146-1.087.438-1.563.291-.475.679-.837 1.162-1.087a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 9 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.162 1.087.292.476.438.996.438 1.563V20H1Zm18 0v-3c0-.733-.204-1.438-.613-2.113-.408-.675-.987-1.254-1.737-1.737a12.515 12.515 0 0 1 4.5 1.4c.6.333 1.058.704 1.375 1.112.317.409.475.855.475 1.338v3h-4ZM9 12c-1.1 0-2.042-.392-2.825-1.175C5.392 10.042 5 9.1 5 8s.392-2.042 1.175-2.825C6.958 4.392 7.9 4 9 4s2.042.392 2.825 1.175C12.608 5.958 13 6.9 13 8s-.392 2.042-1.175 2.825C11.042 11.608 10.1 12 9 12Zm10-4c0 1.1-.392 2.042-1.175 2.825C17.042 11.608 16.1 12 15 12c-.183 0-.417-.02-.7-.063a6.128 6.128 0 0 1-.7-.137 5.947 5.947 0 0 0 1.037-1.775C14.88 9.375 15 8.7 15 8s-.12-1.375-.363-2.025A5.947 5.947 0 0 0 13.6 4.2a3.04 3.04 0 0 1 .7-.163c.233-.024.467-.037.7-.037 1.1 0 2.042.392 2.825 1.175C18.608 5.958 19 6.9 19 8ZM3 18h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C10.804 9.021 11 8.55 11 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 9 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 7 8c0 .55.196 1.02.588 1.412C7.979 9.804 8.45 10 9 10Z"
-        />
-      </g>
+      <path
+        fill="currentColor"
+        d="M1 20v-2.8c0-.567.146-1.087.438-1.563.291-.475.679-.837 1.162-1.087a14.843 14.843 0 0 1 3.15-1.163A13.76 13.76 0 0 1 9 13c1.1 0 2.183.13 3.25.387 1.067.259 2.117.646 3.15 1.163.483.25.87.612 1.162 1.087.292.476.438.996.438 1.563V20H1Zm18 0v-3c0-.733-.204-1.438-.613-2.113-.408-.675-.987-1.254-1.737-1.737a12.515 12.515 0 0 1 4.5 1.4c.6.333 1.058.704 1.375 1.112.317.409.475.855.475 1.338v3h-4ZM9 12c-1.1 0-2.042-.392-2.825-1.175C5.392 10.042 5 9.1 5 8s.392-2.042 1.175-2.825C6.958 4.392 7.9 4 9 4s2.042.392 2.825 1.175C12.608 5.958 13 6.9 13 8s-.392 2.042-1.175 2.825C11.042 11.608 10.1 12 9 12Zm10-4c0 1.1-.392 2.042-1.175 2.825C17.042 11.608 16.1 12 15 12c-.183 0-.417-.02-.7-.063a6.128 6.128 0 0 1-.7-.137 5.947 5.947 0 0 0 1.037-1.775C14.88 9.375 15 8.7 15 8s-.12-1.375-.363-2.025A5.947 5.947 0 0 0 13.6 4.2a3.04 3.04 0 0 1 .7-.163c.233-.024.467-.037.7-.037 1.1 0 2.042.392 2.825 1.175C18.608 5.958 19 6.9 19 8ZM3 18h12v-.8a.973.973 0 0 0-.5-.85c-.9-.45-1.808-.787-2.725-1.012a11.6 11.6 0 0 0-5.55 0c-.917.225-1.825.562-2.725 1.012a.973.973 0 0 0-.5.85v.8Zm6-8c.55 0 1.02-.196 1.412-.588C10.804 9.021 11 8.55 11 8c0-.55-.196-1.02-.588-1.412A1.926 1.926 0 0 0 9 6c-.55 0-1.02.196-1.412.588A1.926 1.926 0 0 0 7 8c0 .55.196 1.02.588 1.412C7.979 9.804 8.45 10 9 10Z"
+      />
     </svg>
   ),
   X: FaXTwitter,