client download - buttons look tweaks

Author: 4lb

src/components/buttons/DownloadButton/DownloadButton.tsx

@@ -24,6 +24,32 @@ export const DownloadButton = ({ platformType, owner, repo, version }: DownloadP
   const [isLinuxMenuClicked, setIsLinuxMenuClicked] = useState(false);
   const [isAppleMenuClicked, setIsAppleMenuClicked] = useState(false);
   const [platform, setPlatform] = useState(platformType);
+  const [downloadName, setDownloadName] = useState("");
+
+  useEffect(() => {
+    switch (platform) {
+      case PlatformType.WINDOWS: {
+        setDownloadName(`defguard-client_${version}_x64_en-US.exe`);
+        break;
+      }
+      case PlatformType.MACOSARM: {
+        setDownloadName(`defguard-aarch64-apple-darwin-${version}.pkg`);
+        break;
+      }
+      case PlatformType.MACOSINTEL: {
+        setDownloadName(`defguard-x86_64-apple-darwin-${version}.pkg`);
+        break;
+      }
+      case PlatformType.DEBIAN: {
+        setDownloadName(`defguard-client_${version}_amd64.deb`);
+        break;
+      }
+      case PlatformType.ARCHLINUX: {
+        setDownloadName(`defguard-client_${version}_amd64.deb`);
+        break;
+      }
+    }
+  }, [platform, version]);
 
   const handleClick = () => {
     setIsButtonClicked(true);
@@ -160,7 +186,11 @@ export const DownloadButton = ({ platformType, owner, repo, version }: DownloadP
           </>
         )}
       </div>
-      <div className="download-main">
+      <a 
+        href={platform === PlatformType.ARCHLINUX ? ARCHLINK : `https://github.com/${owner}/${repo}/releases/download/v${version}/${downloadName}`}
+        className="download-main"
+        onClick={handleClick}
+      >
         <div className="download-text">
           {(platform === PlatformType.DEBIAN ||
             platform === PlatformType.MACOSINTEL ||
@@ -171,7 +201,7 @@ export const DownloadButton = ({ platformType, owner, repo, version }: DownloadP
           {platform === PlatformType.MACOSINTEL && <p>Apple Intel</p>}
           {platform === PlatformType.MACOSARM && <p>Apple ARM</p>}
         </div>
-        <div className="btn" onClick={handleClick}>
+        <div className="btn">
           {isButtonClicked ? (
             <CheckIcon />
           ) : platform !== PlatformType.ARCHLINUX ? (
@@ -182,12 +212,10 @@ export const DownloadButton = ({ platformType, owner, repo, version }: DownloadP
               version={version}
             />
           ) : (
-            <h3>
-              <a href={ARCHLINK}>→</a>
-            </h3>
+            <h3>→</h3>
           )}
         </div>
-      </div>
+      </a>
       <div className="download-footer">
         {(platform === PlatformType.DEBIAN || platform === PlatformType.ARCHLINUX) && (
           <>

src/components/buttons/DownloadButton/style.scss

@@ -32,13 +32,14 @@
 
       .download-menu {
         position: absolute;
-        border-radius: 0px 25px 25px 0px;
+        border-radius: 0;
         border: 1px solid var(--text-body-primary);
+        border-top: unset;
         background: var(--surface-frame-bg);
         text-align: center;
 
         ul {
-          padding: 0 40px;
+          padding: 0 30px;
           line-height: 25px;
           list-style-type: none;
         }
@@ -47,6 +48,10 @@
           text-decoration: none;
           cursor: pointer;
         }
+
+        a:hover {
+          color: #0c8ce0;
+        }
       }
 
       .closed {
@@ -62,44 +67,59 @@
       display: flex;
       height: 78px;
       padding: 0px 20px;
-
       justify-content: space-between;
       align-items: center;
       align-self: stretch;
-
       border: 1px solid var(--text-body-primary);
+      text-decoration: none;
+      color: inherit;
+      cursor: pointer;
+      transition: all 0.2s ease;
+
+      &:hover {
+        background-color: var(--surface-frame-bg);
+        border-color: #0c8ce0;
+
+        .download-text {
+          color: #0c8ce0;
+        }
+
+        svg {
+          path,
+          rect {
+            stroke: #0c8ce0;
+          }
+        }
+      }
 
       .download-text {
         display: flex;
         flex-direction: column;
         justify-content: flex-start;
         align-items: flex-start;
-
         @include typography(paragraph);
+        transition: color 0.2s ease;
 
         p {
           @include typography(footer);
         }
       }
 
-      & > .btn {
+      .btn {
         all: unset;
+        padding: 20px;
 
         &:hover {
           cursor: pointer;
         }
-
-        a {
-          text-decoration: none;
-          padding: 20px;
-        }
       }
 
       svg {
         path,
         rect {
           fill: none;
           stroke: var(--text-body-primary);
+          transition: stroke 0.2s ease;
         }
       }
     }