fix: update styling to match github (#11)

narwhal-apps · Nov 25, 2022 · fd7fa26 · fd7fa26
1 parent a365b67
commit fd7fa26
Show file tree

Hide file tree

Showing 28 changed files with 524 additions and 170 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.3.0
+
+### Features
+* you can now toggle the theme
+
+### Fix
+* add space at bottom to show complete review list
+* change styling to look like github
+* on logout, delete all store data
+* add animation for loading state
+
 ## 0.2.0
 ### Features
 * rework application from react to svelte (reduce bundle size)

diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@
 
 An system tray app for showing your pull requested reviews.
 
-![image](./docs/app.png)
+![image](./website/static/screenshot.png)
 
 ## Development instructions
 

diff --git a/docs/app.png b/docs/app.png
diff --git a/docs/icon.png b/docs/icon.png
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Gitbar</title>
   </head>
-  <body class="bg-white text-slate-500 antialiased dark:bg-slate-900 dark:text-slate-400">
+  <body class="bg-white text-slate-500 antialiased dark:bg-stone-900 dark:text-slate-400">
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gitbar",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "gitbar"
-version = "0.2.0"
+version = "0.3.0"
 description = "Github review counter"
 authors = ["mikael.kristiansson"]
 license = "MIT"

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
   },
   "package": {
     "productName": "Gitbar",
-    "version": "0.2.0"
+    "version": "0.3.0"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/App.svelte b/src/App.svelte
@@ -1,9 +1,38 @@
 <script>
+  import { onMount } from 'svelte';
   import AuthGuard from './components/AuthGuard.svelte';
   import Footer from './components/Footer.svelte';
   import Reviews from './components/Reviews.svelte';
+  import { appearance } from './lib/theme';
+
+  onMount(() => {
+    // use the existence of the dark class on the html element for the initial value
+    let dark = document.documentElement.classList.contains('dark');
+    $appearance.setTheme(dark);
+
+    // listen for changes so we auto-adjust based on system settings
+    const matcher = window.matchMedia('(prefers-color-scheme: dark)');
+    matcher.addEventListener('change', $appearance.setMatchTheme);
+    return () =>
+      matcher.removeEventListener('change', $appearance.setMatchTheme);
+  });
 </script>
 
+<svelte:head>
+  <!-- set dark mode class based on user preference / device settings (in head to avoid FOUC) -->
+  <script>
+    if (
+      localStorage.getItem('gitbar-theme') === 'dark' ||
+      (!localStorage.getItem('gitbar-theme') &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  </script>
+</svelte:head>
+
 <AuthGuard>
   <Reviews />
   <Footer />

diff --git a/src/components/AuthGuard.svelte b/src/components/AuthGuard.svelte
@@ -5,7 +5,6 @@
 
 {#if $auth.account}
   <slot />
-  <!-- wait in case there's a session that we need to verify -->
 {:else}
   <!-- user is a guest. Show a login widget instead of the current page. -->
   <Login />

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -1,19 +1,12 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
-  import { getVersion, getName } from '@tauri-apps/api/app';
-  import { auth, defaultSettings } from '../lib/auth';
+  import { auth } from '../lib/auth';
   import { github } from '../lib/github';
   import Image from './Image.svelte';
   import Modal from './Modal.svelte';
-  import Toggle from './Toggle.svelte';
-  import Range from './Range.svelte';
+  import Settings from './Settings.svelte';
 
   let fetching = false;
   let modalVisible = false;
-  let openAtStartup = $auth.settings?.openAtStartup;
-  let fetchInterval =
-    ($auth.settings.fetchInterval || defaultSettings.fetchInterval) / 1000;
-  let app = { name: '', version: '' };
 
   const startFetch = () => {
     fetching = true;
@@ -28,28 +21,10 @@
       e.preventDefault();
     }
   }
-
-  const changeAutoStart = (e) => {
-    openAtStartup = e.target.checked;
-  };
-
-  const onSave = () => {
-    $auth.updateSettings({
-      openAtStartup,
-      fetchInterval: fetchInterval * 1000,
-    });
-    modalVisible = false;
-  };
-  onMount(() => {
-    Promise.all([getName(), getVersion()]).then((values) => {
-      const [name, version] = values;
-      app = { name, version };
-    });
-  });
 </script>
 
 <footer
-  class="fixed bottom-0 left-0 border-t dark:bg-gray-800 bg-white border-gray-200 shadow-md dark:border-gray-700 w-full px-2 py-2"
+  class="fixed bottom-0 left-0 dark:bg-gray-900 bg-gray-50 shadow-md w-full px-2 py-2"
 >
   <div class="flex justify-between">
     <div class="p-2 flex items-center">
@@ -76,7 +51,10 @@
       <span class="ml-1 block truncate">{$auth.account?.user?.name}</span>
     </div>
     <div class="flex justify-between">
-      <button class="p-2" on:click={startFetch}>
+      <button
+        class="p-2 dark:text-white dark:hover:text-white/70 text-slate-600 hover:text-slate-600/70"
+        on:click={startFetch}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
@@ -92,7 +70,10 @@
           />
         </svg>
       </button>
-      <button class="p-2" on:click={() => (modalVisible = true)}>
+      <button
+        class="p-2 dark:text-white dark:hover:text-white/70 text-slate-600 hover:text-slate-600/70"
+        on:click={() => (modalVisible = true)}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
@@ -108,7 +89,10 @@
           />
         </svg>
       </button>
-      <button class="p-2" on:click={$auth.signOut}>
+      <button
+        class="p-2 dark:text-white dark:hover:text-white/70 text-slate-600 hover:text-slate-600/70"
+        on:click={$auth.signOut}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
@@ -129,65 +113,21 @@
 </footer>
 
 <Modal bind:modalVisible on:keydown={keydown}>
-  <div
-    class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600"
-  >
-    <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-      Settings
-    </h3>
-    <button
-      type="button"
-      class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
-      on:click={() => (modalVisible = false)}
-    >
-      <svg
-        aria-hidden="true"
-        class="w-5 h-5"
-        fill="currentColor"
-        viewBox="0 0 20 20"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-          clip-rule="evenodd"
-        />
-      </svg>
-      <span class="sr-only">Close modal</span>
-    </button>
-  </div>
-  <div class="p-6 space-y-6">
-    <Toggle
-      name="open_at_start"
-      checked={openAtStartup}
-      label="Auto start Gitbar"
-      on:change={changeAutoStart}
-    />
-    <div>
-      <label
-        for="fetch_interval"
-        class="block text-sm font-bold text-gray-700 dark:text-gray-100"
-      >
-        Fetch interval <strong>{fetchInterval} sec</strong>
-      </label>
-      <div class="relative mt-2">
-        <Range
-          on:change={(e) => (fetchInterval = e.detail.value)}
-          initialValue={fetchInterval}
-          id="fetch_interval"
-        />
-      </div>
-      <div class="relative mt-4 flex items-end justify-end">
-        <button
-          type="button"
-          on:click={onSave}
-          class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
-          >Save</button
-        >
-      </div>
-    </div>
-    <span class="text-sm font-bold italic float-right pb-2">
-      {app.name}@{app.version}
-    </span>
-  </div>
+  <Settings bind:modalVisible />
 </Modal>
+
+<style>
+  @keyframes slide-up {
+    0% {
+      transform: translateY(110vh);
+    }
+    100% {
+      transform: translateY(0vh);
+    }
+  }
+
+  footer {
+    transform: translateY(110vh);
+    animation: slide-up 1s forwards;
+  }
+</style>