feat: Update sidebar icons & add quit button for logged out users (#467)

* feat: Update sidebar icons & add quit button for logged out users

* Update README.md

Author: manosim

README.md

@@ -14,14 +14,14 @@ brew install --cask gitify
 
 Gitify supports macOS, Windows and Linux.
 
-### Prerequisites
+### Prerequisites & Libraries
 
-- Node 10+
+- Node 12+
 - [Yarn](https://yarnpkg.com/)
 - [Electron](https://electronjs.org/)
 - [TypeScript](https://www.typescriptlang.org/)
 - [React](https://reactjs.org/)
-- [Redux](http://redux.js.org/)
+- [Tailwind CSS](https://tailwindcss.com/)
 
 ### Installation
 
@@ -37,7 +37,7 @@ To watch for changes(`webpack`) in the `src` directory:
 
     yarn run watch
 
-To run the actual **electron app**:
+To run the **electron app**:
 
     yarn start
 

src/components/Sidebar.tsx

@@ -1,11 +1,14 @@
 import React, { useCallback, useContext, useMemo } from 'react';
-import { shell } from 'electron';
+import { shell, ipcRenderer } from 'electron';
 import * as Octicons from '@primer/octicons-react';
 import { useHistory } from 'react-router-dom';
 
 import { AppContext } from '../context/App';
 import { Constants } from '../utils/constants';
+import { IconCog } from '../icons/Cog';
+import { IconRefresh } from '../icons/Refresh';
 import { Logo } from '../components/Logo';
+import { IconQuit } from '../icons/Quit';
 
 export const Sidebar: React.FC = () => {
   const history = useHistory();
@@ -17,6 +20,10 @@ export const Sidebar: React.FC = () => {
     shell.openExternal(`https://github.com/${Constants.REPO_SLUG}`);
   }, []);
 
+  const quitApp = useCallback(() => {
+    ipcRenderer.send('app-quit');
+  }, []);
+
   const notificationsCount = useMemo(() => {
     return notifications.reduce(
       (memo, account) => memo + account.notifications.length,
@@ -51,25 +58,35 @@ export const Sidebar: React.FC = () => {
               onClick={fetchNotifications}
               aria-label="Refresh Notifications"
             >
-              <Octicons.SyncIcon size={16} />
+              <IconRefresh className="w-3.5 h-3.5" />
             </button>
 
             <button
               className={footerButtonClasses}
               onClick={() => history.push('/settings')}
               aria-label="Settings"
             >
-              <Octicons.GearIcon size={16} />
+              <IconCog className="w-4 h-4" />
             </button>
           </>
         )}
 
+        {!isLoggedIn && (
+          <button
+            className={footerButtonClasses}
+            onClick={quitApp}
+            aria-label="Quit App"
+          >
+            <IconQuit className="w-3.5 h-3.5" />
+          </button>
+        )}
+
         <div
           className={footerButtonClasses}
           onClick={onOpenBrowser}
           aria-label="View project on GitHub"
         >
-          <Octicons.MarkGithubIcon size={14} />
+          <Octicons.MarkGithubIcon size={15} />
         </div>
       </div>
     </div>

src/components/__snapshots__/Sidebar.test.tsx.snap

@@ -81,6 +81,37 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
   <div
     className="py-4 px-3"
   >
+    <button
+      aria-label="Quit App"
+      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
+      onClick={[Function]}
+    >
+      <svg
+        aria-hidden="true"
+        aria-labelledby="iconQuitId"
+        className="w-3.5 h-3.5"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title
+          id="iconQuitId"
+        >
+          Quit Application
+        </title>
+        <g>
+          <path
+            d="M272 0a23.94 23.94 0 0124 24v240a23.94 23.94 0 01-24 24h-32a23.94 23.94 0 01-24-24V24a23.94 23.94 0 0124-24z"
+            fill="currentColor"
+            opacity={0.4}
+          />
+          <path
+            d="M504 256c0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4A248 248 0 01111.8 54.2a24.07 24.07 0 0135 7.7L162.6 90a24 24 0 01-6.6 31 168 168 0 00100 303c91.6 0 168.6-74.2 168-169.1a168.07 168.07 0 00-68.1-134 23.86 23.86 0 01-6.5-30.9l15.8-28.1a24 24 0 0134.8-7.8A247.51 247.51 0 01504 256z"
+            fill="currentColor"
+          />
+        </g>
+      </svg>
+    </button>
     <div
       aria-label="View project on GitHub"
       className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
@@ -95,7 +126,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           }
         }
         fill="currentColor"
-        height={14}
+        height={15}
         role="img"
         style={
           Object {
@@ -105,7 +136,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           }
         }
         viewBox="0 0 16 16"
-        width={14}
+        width={15}
       />
     </div>
   </div>
@@ -193,6 +224,37 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
   <div
     className="py-4 px-3"
   >
+    <button
+      aria-label="Quit App"
+      className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
+      onClick={[Function]}
+    >
+      <svg
+        aria-hidden="true"
+        aria-labelledby="iconQuitId"
+        className="w-3.5 h-3.5"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title
+          id="iconQuitId"
+        >
+          Quit Application
+        </title>
+        <g>
+          <path
+            d="M272 0a23.94 23.94 0 0124 24v240a23.94 23.94 0 01-24 24h-32a23.94 23.94 0 01-24-24V24a23.94 23.94 0 0124-24z"
+            fill="currentColor"
+            opacity={0.4}
+          />
+          <path
+            d="M504 256c0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4A248 248 0 01111.8 54.2a24.07 24.07 0 0135 7.7L162.6 90a24 24 0 01-6.6 31 168 168 0 00100 303c91.6 0 168.6-74.2 168-169.1a168.07 168.07 0 00-68.1-134 23.86 23.86 0 01-6.5-30.9l15.8-28.1a24 24 0 0134.8-7.8A247.51 247.51 0 01504 256z"
+            fill="currentColor"
+          />
+        </g>
+      </svg>
+    </button>
     <div
       aria-label="View project on GitHub"
       className="flex justify-evenly items-center bg-transparent border-0 w-full text-sm text-white my-1 py-2 cursor-pointer hover:text-gray-500 focus:outline-none"
@@ -207,7 +269,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           }
         }
         fill="currentColor"
-        height={14}
+        height={15}
         role="img"
         style={
           Object {
@@ -217,7 +279,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           }
         }
         viewBox="0 0 16 16"
-        width={14}
+        width={15}
       />
     </div>
   </div>

src/icons/Cog.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export const IconCog = ({ className = '' }: { className?: string }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <g className="prefix__fa-group">
+        <path
+          className="prefix__fa-secondary"
+          fill="currentColor"
+          d="M487.75 315.6l-42.6-24.6a192.62 192.62 0 000-70.2l42.6-24.6a12.11 12.11 0 005.5-14 249.2 249.2 0 00-54.7-94.6 12 12 0 00-14.8-2.3l-42.6 24.6a188.83 188.83 0 00-60.8-35.1V25.7A12 12 0 00311 14a251.43 251.43 0 00-109.2 0 12 12 0 00-9.4 11.7v49.2a194.59 194.59 0 00-60.8 35.1L89.05 85.4a11.88 11.88 0 00-14.8 2.3 247.66 247.66 0 00-54.7 94.6 12 12 0 005.5 14l42.6 24.6a192.62 192.62 0 000 70.2l-42.6 24.6a12.08 12.08 0 00-5.5 14 249 249 0 0054.7 94.6 12 12 0 0014.8 2.3l42.6-24.6a188.54 188.54 0 0060.8 35.1v49.2a12 12 0 009.4 11.7 251.43 251.43 0 00109.2 0 12 12 0 009.4-11.7v-49.2a194.7 194.7 0 0060.8-35.1l42.6 24.6a11.89 11.89 0 0014.8-2.3 247.52 247.52 0 0054.7-94.6 12.36 12.36 0 00-5.6-14.1zm-231.4 36.2a95.9 95.9 0 1195.9-95.9 95.89 95.89 0 01-95.9 95.9z"
+          opacity={0.4}
+        />
+        <path
+          className="prefix__fa-primary"
+          fill="currentColor"
+          d="M256.35 319.8a63.9 63.9 0 1163.9-63.9 63.9 63.9 0 01-63.9 63.9z"
+        />
+      </g>
+    </svg>
+  );
+};

src/icons/Refresh.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export const IconRefresh = ({ className = '' }: { className?: string }) => {
+  return (
+    <svg
+      aria-hidden="true"
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+    >
+      <g className="prefix__fa-group">
+        <path
+          className="prefix__fa-secondary"
+          fill="currentColor"
+          d="M0 500V299.67a12 12 0 0112-12h200.33a12 12 0 0112 12v47.41a12 12 0 01-12.57 12l-101.87-4.88a176.07 176.07 0 00317.25-56.94 12 12 0 0111.67-9.26h49.09a12 12 0 0111.8 14.18C478.07 417.08 377.19 504 256 504a247.43 247.43 0 01-188.76-87.17l4.13 82.57a12 12 0 01-12 12.6H12a12 12 0 01-12-12z"
+          opacity={0.4}
+        />
+        <path
+          className="prefix__fa-primary"
+          fill="currentColor"
+          d="M12.3 209.82C33.93 94.92 134.81 8 256 8a247.4 247.4 0 01188.9 87.34l-4-82.77A12 12 0 01452.92 0h47.41a12 12 0 0112 12v200.33a12 12 0 01-12 12H300a12 12 0 01-12-12v-47.41a12 12 0 0112.57-12l101.53 4.88a176.07 176.07 0 00-317.24 56.94A12 12 0 0173.19 224H24.1a12 12 0 01-11.8-14.18z"
+        />
+      </g>
+    </svg>
+  );
+};

src/routes/Settings.tsx

@@ -1,6 +1,5 @@
-const { ipcRenderer, remote } = require('electron');
-
 import React, { useCallback, useContext } from 'react';
+import { ipcRenderer, remote } from 'electron';
 import { useHistory } from 'react-router-dom';
 import { ArrowLeftIcon } from '@primer/octicons-react';