Misc UI updates:

a) Add tooltip for Login; b) Modify the About Page; c) Add a footer; d) Change the background color; e) change the default icon
ccxzhang · Aug 1, 2024 · 5d9e9bf · 5d9e9bf
1 parent 3e8107a
commit 5d9e9bf
Show file tree

Hide file tree

Showing 12 changed files with 283 additions and 44 deletions.
diff --git a/electron-builder.yml b/electron-builder.yml
@@ -19,6 +19,7 @@ nsis:
   uninstallDisplayName: ${productName}
   createDesktopShortcut: always
 mac:
+  icon: resources/icon.png
   entitlementsInherit: build/entitlements.mac.plist
   extendInfo:
     - NSCameraUsageDescription: Application requests access to the device's camera.

diff --git a/resources/icon.png b/resources/icon.png
diff --git a/src/main/index.js b/src/main/index.js
@@ -2,7 +2,7 @@ import { app, shell, BrowserWindow, ipcMain, protocol, net } from 'electron'
 import { path, join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 
-const iconPath = join(__dirname, '../../resources/icon.png')
+const iconPath = join(__dirname, '../../resources/icon')
 
 function createWindow() {
   // Create the browser window.

diff --git a/src/renderer/src/App.jsx b/src/renderer/src/App.jsx
@@ -5,6 +5,7 @@ import { initializeAuth, disconnect } from './reducers/authReducer'
 import MainPage from './pages/MainPage'
 import NotificationModal from './pages/Modal'
 import Login from './pages/Login'
+import Footer from './pages/Footer'
 import About from './pages/About'
 import NavBar from './pages/NavBar'
 import HistoryPage from './pages/DownloadHistory'
@@ -24,7 +25,6 @@ const App = () => {
     dispatch(disconnect())
   }
 
-  // eslint-disable-next-line react/prop-types
   const PrivateRoute = ({ children }) => {
     return accessToken ? children : <Navigate to="/login" />
   }
@@ -34,7 +34,7 @@ const App = () => {
       <div className="min-w-full mx-auto">
         <NavBar accessToken={accessToken} username={username} handleDisconnect={handleDisconnect} />
       </div>
-      <div className="bg-extra-light-green text-black min-h-screen flex flex-col">
+      <div className="bg-grey-100 text-black min-h-screen flex flex-col">
         <Routes>
           <Route path="/about" element={<About />} />
           <Route
@@ -74,6 +74,7 @@ const App = () => {
         </Routes>
         {(isLoading || errorMessage) && <NotificationModal />}
       </div>
+      <Footer />
     </Router>
   )
 }

diff --git a/src/renderer/src/assets/WBG-SupportedBy-horizontal-white-web.png b/src/renderer/src/assets/WBG-SupportedBy-horizontal-white-web.png
diff --git a/src/renderer/src/components/Tooltip.jsx b/src/renderer/src/components/Tooltip.jsx
@@ -0,0 +1,35 @@
+import React, { useState } from 'react'
+
+// eslint-disable-next-line react/prop-types
+const Tooltip = ({ text }) => {
+  const [show, setShow] = useState(false)
+
+  return (
+    <span
+      className="inline-flex items-center justify-center w-6 h-6 bg-gray-200 rounded-full text-gray-600 cursor-pointer relative"
+      onMouseEnter={() => setShow(true)}
+      onMouseLeave={() => setShow(false)}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        class="size-5"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+          clip-rule="evenodd"
+        />
+      </svg>
+
+      {show && (
+        <div className="absolute bottom-full mb-2 w-48 p-2 bg-gray-100 bg-opacity-75 text-black text-sm rounded shadow-lg">
+          {text}
+        </div>
+      )}
+    </span>
+  )
+}
+
+export default Tooltip
diff --git a/src/renderer/src/output.css b/src/renderer/src/output.css
@@ -612,6 +612,10 @@ html {
   inset: 0px;
 }
 
+.bottom-full {
+  bottom: 100%;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -637,6 +641,10 @@ html {
   margin-right: auto;
 }
 
+.mb-12 {
+  margin-bottom: 3rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -665,10 +673,18 @@ html {
   margin-right: 0.5rem;
 }
 
+.mr-4 {
+  margin-right: 1rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
 
+.mt-10 {
+  margin-top: 2.5rem;
+}
+
 .mt-2 {
   margin-top: 0.5rem;
 }
@@ -677,6 +693,14 @@ html {
   margin-top: 1rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
 .block {
   display: block;
 }
@@ -698,14 +722,27 @@ html {
   height: 1rem;
 }
 
-.h-10 {
-  height: 2.5rem;
+.size-5 {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.h-12 {
+  height: 3rem;
 }
 
 .h-4 {
   height: 1rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-96 {
+  height: 24rem;
+}
+
 .max-h-60 {
   max-height: 15rem;
 }
@@ -726,10 +763,6 @@ html {
   width: 33.333333%;
 }
 
-.w-10 {
-  width: 2.5rem;
-}
-
 .w-4 {
   width: 1rem;
 }
@@ -738,6 +771,10 @@ html {
   width: 12rem;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-full {
   width: 100%;
 }
@@ -750,6 +787,10 @@ html {
   max-width: 56rem;
 }
 
+.max-w-7xl {
+  max-width: 80rem;
+}
+
 .max-w-md {
   max-width: 28rem;
 }
@@ -770,10 +811,18 @@ html {
   cursor: pointer;
 }
 
+.list-none {
+  list-style-type: none;
+}
+
 .flex-col {
   flex-direction: column;
 }
 
+.flex-nowrap {
+  flex-wrap: nowrap;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -798,6 +847,12 @@ html {
   gap: 1.5rem;
 }
 
+.space-x-10 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(2.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
@@ -844,6 +899,10 @@ html {
   border-radius: 0.25rem;
 }
 
+.rounded-full {
+  border-radius: 9999px;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -856,6 +915,10 @@ html {
   border-width: 1px;
 }
 
+.border-2 {
+  border-width: 2px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -864,6 +927,10 @@ html {
   border-right-width: 1px;
 }
 
+.border-none {
+  border-style: none;
+}
+
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -894,9 +961,9 @@ html {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
-.bg-extra-light-green {
+.bg-gff-green {
   --tw-bg-opacity: 1;
-  background-color: rgb(163 218 214 / var(--tw-bg-opacity));
+  background-color: rgb(31 162 156 / var(--tw-bg-opacity));
 }
 
 .bg-gray-100 {
@@ -924,11 +991,6 @@ html {
   background-color: rgb(99 102 241 / var(--tw-bg-opacity));
 }
 
-.bg-teal-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 251 241 / var(--tw-bg-opacity));
-}
-
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -950,6 +1012,10 @@ html {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -970,6 +1036,11 @@ html {
   padding-right: 1rem;
 }
 
+.px-5 {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1017,6 +1088,16 @@ html {
   line-height: 2rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -1066,6 +1147,10 @@ html {
   line-height: 1.5;
 }
 
+.leading-relaxed {
+  line-height: 1.625;
+}
+
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1096,6 +1181,16 @@ html {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
 .text-indigo-600 {
   --tw-text-opacity: 1;
   color: rgb(79 70 229 / var(--tw-text-opacity));
@@ -1249,17 +1344,9 @@ html {
 }
 
 @media (min-width: 768px) {
-  .md\:h-16 {
-    height: 4rem;
-  }
-
   .md\:w-1\/2 {
     width: 50%;
   }
-
-  .md\:w-16 {
-    width: 4rem;
-  }
 }
 
 @media (min-width: 1024px) {