From 12172f11c059db93ed433c8fce0f199a19943a57 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 10 Jul 2023 23:35:23 +0800
Subject: [PATCH] chore: update styles

---
 web/src/components/AnalyticsDialog.tsx      | 15 +++++++++++++--
 web/src/components/GenerateQRCodeDialog.tsx |  2 +-
 web/src/components/ShortcutView.tsx         |  4 ++--
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/web/src/components/AnalyticsDialog.tsx b/web/src/components/AnalyticsDialog.tsx
index 0fa8dae..1a777a4 100644
--- a/web/src/components/AnalyticsDialog.tsx
+++ b/web/src/components/AnalyticsDialog.tsx
@@ -66,12 +66,23 @@ const AnalyticsDialog: React.FC<Props> = (props: Props) => {
               <div className="w-full mt-4 py-1 px-2 flex flex-row justify-between items-center">
                 <span>Devices</span>
                 <div>
-                  <button className={`text-sm ${selectedDeviceTab === "os" && "text-blue-600"}`} onClick={() => setSelectedDeviceTab("os")}>
+                  <button
+                    className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
+                      selectedDeviceTab === "os"
+                        ? "border-blue-600 text-blue-600"
+                        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    }`}
+                    onClick={() => setSelectedDeviceTab("os")}
+                  >
                     OS
                   </button>
                   <span className="text-gray-200 font-mono mx-1">/</span>
                   <button
-                    className={`text-sm ${selectedDeviceTab === "browser" && "text-blue-600"}`}
+                    className={`whitespace-nowrap border-b-2 px-1 text-sm font-medium ${
+                      selectedDeviceTab === "browser"
+                        ? "border-blue-600 text-blue-600"
+                        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
+                    }`}
                     onClick={() => setSelectedDeviceTab("browser")}
                   >
                     Browser
diff --git a/web/src/components/GenerateQRCodeDialog.tsx b/web/src/components/GenerateQRCodeDialog.tsx
index 72494dd..f96df66 100644
--- a/web/src/components/GenerateQRCodeDialog.tsx
+++ b/web/src/components/GenerateQRCodeDialog.tsx
@@ -47,7 +47,7 @@ const GenerateQRCodeDialog: React.FC<Props> = (props: Props) => {
             <QRCodeCanvas value={shortifyLink} size={128} bgColor={"#ffffff"} fgColor={"#000000"} includeMargin={false} level={"L"} />
           </div>
           <div className="w-full flex flex-row justify-center items-center px-4">
-            <Button className="w-full" color="primary" onClick={handleDownloadQRCodeClick}>
+            <Button className="w-full" color="neutral" onClick={handleDownloadQRCodeClick}>
               <Icon.Download className="w-4 h-auto mr-1" />
               Download
             </Button>
diff --git a/web/src/components/ShortcutView.tsx b/web/src/components/ShortcutView.tsx
index 702e526..eddb5a9 100644
--- a/web/src/components/ShortcutView.tsx
+++ b/web/src/components/ShortcutView.tsx
@@ -63,9 +63,9 @@ const ShortcutView = (props: Props) => {
           <div className="group flex flex-row justify-start items-center pr-2 mr-1 shrink-0">
             <div className="w-6 h-6 mr-1 flex justify-center items-center overflow-clip">
               {favicon ? (
-                <img className="w-[90%] h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
+                <img className="w-full h-auto rounded-full" src={favicon} decoding="async" loading="lazy" />
               ) : (
-                <Icon.Globe2 className="w-5 h-auto text-gray-500" />
+                <Icon.CircleSlash className="w-6 h-auto text-gray-400" />
               )}
             </div>
             <a