desktop wip

GrantortoyI · Jan 19, 2024 · 5d821c3 · 5d821c3
1 parent 5159773
commit 5d821c3
Show file tree

Hide file tree

Showing 18 changed files with 190 additions and 39 deletions.
diff --git a/.nvm b/.nvm
@@ -0,0 +1 @@
+20.9
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -64,4 +64,4 @@
     "@types/react-dom": "^18.2.18",
     "typescript": "^5.3.3"
   }
-}
+}
diff --git a/apps/dashboard/src/components/copy-input.tsx b/apps/dashboard/src/components/copy-input.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { Icons } from "@midday/ui/icons";
-import { Input } from "@midday/ui/input";
 import { motion } from "framer-motion";
 import { useState } from "react";
 

diff --git a/apps/dashboard/src/components/desktop-traffic-light.tsx b/apps/dashboard/src/components/desktop-traffic-light.tsx
@@ -1,9 +1,98 @@
+"use client";
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@midday/ui/tooltip";
+import { cn } from "@midday/ui/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState } from "react";
+
 export function DesktopTrafficLight() {
+  const [hasUpdate, setUpdate] = useState();
+  const [status, setStatus] = useState<string | null>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setUpdate(true);
+    }, 2000);
+  }, []);
+
+  const handleOnDownload = () => {
+    setStatus("progress");
+    setTimeout(() => {
+      setStatus("refresh");
+    }, 4000);
+  };
+
   return (
-    <div className="fixed top-[9px] left-[9px] flex space-x-[8px] hidden todesktop:flex">
-      <div className="w-[11px] h-[11px] border rounded-full" />
-      <div className="w-[11px] h-[11px] border rounded-full" />
-      <div className="w-[11px] h-[11px] border rounded-full" />
+    <div className="fixed top-[9px] left-[9px] flex space-x-[8px] hidden todesktop:flex z-10">
+      <div className="w-[11px] h-[11px] bg-border rounded-full" />
+      <div className="w-[11px] h-[11px] bg-border rounded-full" />
+      <div className="w-[11px] h-[11px] bg-border rounded-full" />
+
+      <AnimatePresence>
+        {hasUpdate && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+          >
+            <TooltipProvider delayDuration={50}>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <div className="w-[11px] h-[11px] bg-[#7aafd3] rounded-full flex items-center justify-center hidden todesktop:flex">
+                    <button
+                      className={cn("update", status)}
+                      type="button"
+                      onClick={() => handleOnDownload()}
+                    >
+                      <div className="update">
+                        <svg
+                          width="12"
+                          height="12"
+                          viewBox="0 0 12 12"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M6 3.25V8.75M6 8.75L8.25 6.5M6 8.75L3.75 6.5"
+                            stroke="#294771"
+                            stroke-width="1.5"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            className="svg-update"
+                          />
+                          <circle
+                            cx="6"
+                            cy="6"
+                            r="2.25"
+                            stroke="#294771"
+                            stroke-width="4.5"
+                            className="svg-progress"
+                          />
+                          <path
+                            d="M3.75 6C3.75 4.75736 4.75736 3.75 6 3.75C6.39468 3.75 6.71356 3.83142 7.00573 3.99422L6.42675 4.5732C6.26926 4.73069 6.3808 4.99997 6.60353 4.99997H8.74998C8.88805 4.99997 8.99998 4.88805 8.99998 4.74997V2.60353C8.99998 2.3808 8.73069 2.26926 8.5732 2.42675L8.09023 2.90972C7.51041 2.49373 6.83971 2.25 6 2.25C3.92893 2.25 2.25 3.92893 2.25 6C2.25 8.07107 3.92893 9.75 6 9.75C7.63395 9.75 9.02199 8.70541 9.53642 7.24993C9.67446 6.8594 9.46977 6.4309 9.07923 6.29287C8.68869 6.15483 8.2602 6.35953 8.12216 6.75007C7.81293 7.62497 6.97849 8.25 6 8.25C4.75736 8.25 3.75 7.24264 3.75 6Z"
+                            fill="#294771"
+                            className="svg-refresh"
+                          />
+                        </svg>
+                      </div>
+                    </button>
+                  </div>
+                </TooltipTrigger>
+
+                <TooltipContent sideOffset={10} className="text-xs p-2">
+                  {!status && "Update Available"}
+                  {status === "refresh" && "Restart to Update"}
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }
diff --git a/apps/dashboard/src/styles/globals.css b/apps/dashboard/src/styles/globals.css
@@ -332,4 +332,67 @@ html.todesktop.div {
 
 html.todesktop a {
   cursor: pointer !important;
+}
+
+.update {
+  background: #68A7FF;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  position: relative;
+}
+
+.update svg{
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  top: 0;
+  left: 0;
+}
+
+.update svg path.svg-update{
+  opacity: 1;
+  transform: scale(1);
+}
+
+.update svg circle.svg-progress{
+  stroke-dashoffset: 16px;
+  stroke-dasharray: 16px;
+  transform: rotate(270deg);
+  transform-origin: center;
+}
+
+.update.progress svg path.svg-update,
+.update.refresh svg path.svg-update {
+  opacity: 0;
+  transform: scale(.5);
+}
+
+.update.progress svg circle.svg-progress {
+  stroke-dashoffset: 0px;
+  transform: rotate(270deg);
+  transition: all 4s linear;
+}
+
+.update svg path.svg-refresh{
+  opacity: 0;
+  transform: scale(.2) rotate(-135deg);
+  transition: all .3s ease;
+  transform-origin: center;
+}
+
+.update.refresh svg path.svg-refresh{
+  opacity: 1;
+  transform: scale(1) rotate(0);
+}
+
+@keyframes anim-update {
+  0%{
+    transform: scale(0);
+    opacity: 1;
+  }
+  100%{
+    transform: scale(4);
+    opacity: 0;
+  }
 }
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -12,9 +12,9 @@
     "check:types": "tsc --noEmit"
   },
   "dependencies": {
+    "@logsnag/next": "^1.0.3",
     "@midday/location": "workspace:*",
     "@midday/ui": "workspace:*",
-    "@logsnag/next": "^1.0.3",
     "@vercel/analytics": "^1.1.2",
     "next": "14.1.0",
     "next-international": "1.2.3",

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "workspaces": [
     "packages/*",
     "apps/*",
-    "tooling/*"
+    "tooling/*",
+    "packages/email/.react-email"
   ],
   "scripts": {
     "build": "turbo build",

diff --git a/packages/email/package.json b/packages/email/package.json
@@ -11,16 +11,13 @@
     "export": "email export"
   },
   "dependencies": {
-    "@formatjs/intl": "^2.9.9",
-    "@react-email/render": "0.0.9",
-    "@react-email/components": "0.0.11",
+    "@formatjs/intl": "^2.9.11",
+    "@react-email/components": "0.0.14",
+    "@react-email/tailwind": "0.0.14",
     "date-fns": "^3.2.0",
-    "react-email": "1.9.5"
+    "react-email": "2.0.0"
   },
   "devDependencies": {
     "typescript": "^5.3.3"
-  },
-  "overrides": {
-    "@react-email/render": "0.0.9"
   }
-}
+}
diff --git a/packages/events/package.json b/packages/events/package.json
@@ -5,10 +5,10 @@
     "private": true,
     "sideEffects": false,
     "scripts": {
-      "clean": "rm -rf .turbo node_modules",
-      "lint": "biome check .",
-      "format": "biome --write .",
-      "check:types": "tsc --noEmit"
+        "clean": "rm -rf .turbo node_modules",
+        "lint": "biome check .",
+        "format": "biome --write .",
+        "check:types": "tsc --noEmit"
     },
     "dependencies": {
         "@logsnag/next": "^1.0.3"
@@ -21,4 +21,4 @@
         "./client": "./src/client.ts",
         "./events": "./src/events.ts"
     }
-  }
+}
diff --git a/packages/gocardless/package.json b/packages/gocardless/package.json
@@ -5,16 +5,16 @@
     "private": true,
     "sideEffects": false,
     "scripts": {
-      "clean": "rm -rf .turbo node_modules",
-      "lint": "biome check .",
-      "format": "biome --write .",
-      "check:types": "tsc --noEmit"
+        "clean": "rm -rf .turbo node_modules",
+        "lint": "biome check .",
+        "format": "biome --write .",
+        "check:types": "tsc --noEmit"
     },
     "dependencies": {
-      "@midday/kv": "workspace:*",
-      "change-case": "^5.3.0"
+        "@midday/kv": "workspace:*",
+        "change-case": "^5.3.0"
     },
     "devDependencies": {
         "typescript": "^5.3.3"
     }
-  }
+}
diff --git a/packages/jobs/package.json b/packages/jobs/package.json
@@ -17,4 +17,4 @@
     "langchain": "^0.1.4",
     "pdf-parse": "^1.1.1"
   }
-}
+}
diff --git a/packages/kv/package.json b/packages/kv/package.json
@@ -13,4 +13,3 @@
         "@vercel/kv": "1.0.1"
     }
 }
-
diff --git a/packages/location/package.json b/packages/location/package.json
@@ -5,12 +5,12 @@
     "private": true,
     "sideEffects": false,
     "scripts": {
-      "clean": "rm -rf .turbo node_modules",
-      "lint": "biome check .",
-      "format": "biome --write .",
-      "check:types": "tsc --noEmit"
+        "clean": "rm -rf .turbo node_modules",
+        "lint": "biome check .",
+        "format": "biome --write .",
+        "check:types": "tsc --noEmit"
     },
     "devDependencies": {
         "typescript": "^5.3.3"
     }
-  }
+}
diff --git a/packages/notification/package.json b/packages/notification/package.json
@@ -15,4 +15,4 @@
   "devDependencies": {
     "typescript": "^5.3.3"
   }
-}
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -101,4 +101,4 @@
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^0.8.0"
   }
-}
+}
diff --git a/packages/ui/src/components/icons.tsx b/packages/ui/src/components/icons.tsx
@@ -30,6 +30,7 @@ import {
   MdInventory2,
   MdMoreHoriz,
   MdOutlineAccountBalanceWallet,
+  MdOutlineArrowDownward,
   MdOutlineBrokenImage,
   MdOutlineCancel,
   MdOutlineCategory,
@@ -448,4 +449,5 @@ export const Icons = {
   PlayCircle: MdPlayCircle,
   PauseCircle: MdPauseCircle,
   MoreVertical: MdOutlineMoreVert,
+  ArrowDown: MdOutlineArrowDownward,
 };
diff --git a/tooling/tsconfig/package.json b/tooling/tsconfig/package.json
@@ -3,6 +3,6 @@
     "private": true,
     "version": "1.0.0",
     "files": [
-      "base.json"
+        "base.json"
     ]
-  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -64,4 +64,4 @@ @@
         "@types/react-dom": "^18.2.18",
         "typescript": "^5.3.3"
       }
-    }
+    }