feat: Hello "Dark Mode" (#456)

manosim · web-flow · commit bf4c1905f1f2 · 2020-12-13T19:01:09.000Z
* feat: Hello "Dark Mode"

* chore: Update tests
diff --git a/src/js/components/__snapshots__/account-notifications.test.tsx.snap b/src/js/components/__snapshots__/account-notifications.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/account-notifications.tsx should render itself (github.com with notifications) 1`] = `
 <div
-  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 text-sm"
+  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm"
 >
   github.com
   <svg
@@ -31,7 +31,7 @@ exports[`components/account-notifications.tsx should render itself (github.com w
 
 exports[`components/account-notifications.tsx should render itself (github.com without notifications) 1`] = `
 <div
-  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 text-sm"
+  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm"
 >
   github.com
   <svg
diff --git a/src/js/components/__snapshots__/all-read.test.tsx.snap b/src/js/components/__snapshots__/all-read.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/all-read.tsx should render itself & its children 1`] = `
 <div
-  className="flex flex-1 flex-col justify-center items-center p-4"
+  className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white"
 >
   <h1
     className="text-5xl mb-5"
diff --git a/src/js/components/__snapshots__/notification.test.tsx.snap b/src/js/components/__snapshots__/notification.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/notification.js should render itself & its children 1`] = `
 <div
-  className="flex space-x-2 p-2 bg-white hover:bg-gray-100 border-b border-gray-100"
+  className="flex space-x-2 p-2 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker"
 >
   <div
     className="flex justify-center items-center w-8"
diff --git a/src/js/components/__snapshots__/oops.test.tsx.snap b/src/js/components/__snapshots__/oops.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/oops.tsx should render itself & its children 1`] = `
 <div
-  className="flex flex-1 flex-col justify-center items-center p-4"
+  className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white"
 >
   <h1
     className="text-5xl mb-5"
diff --git a/src/js/components/__snapshots__/repository.test.tsx.snap b/src/js/components/__snapshots__/repository.test.tsx.snap
@@ -3,10 +3,10 @@
 exports[`components/repository.tsx should render itself & its children 1`] = `
 Array [
   <div
-    className="flex flex-1 p-2 bg-gray-100"
+    className="flex flex-1 p-2 bg-gray-100 dark:bg-gray-darker dark:text-white"
   >
     <div
-      className="flex flex-1 p-0.5 items-center mt-0 text-base font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
+      className="flex flex-1 p-0.5 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"
     >
       <img
         className="rounded w-5 h-5 ml-1 mr-3"
diff --git a/src/js/components/__snapshots__/sidebar.test.tsx.snap b/src/js/components/__snapshots__/sidebar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`components/Sidebar.tsx should render itself & its children (logged in) 1`] = `
 <div
-  className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-primary overflow-y-auto	"
+  className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto	"
 >
   <div
     className="flex flex-col flex-1 items-center py-4"
@@ -81,7 +81,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
   <div
     className="py-4 px-3"
   >
-    <div
+    <button
       aria-label="Refresh Notifications"
       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]}
@@ -107,8 +107,8 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         viewBox="0 0 16 16"
         width={16}
       />
-    </div>
-    <div
+    </button>
+    <button
       aria-label="Settings"
       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]}
@@ -134,7 +134,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         viewBox="0 0 16 16"
         width={16}
       />
-    </div>
+    </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"
@@ -168,7 +168,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
 
 exports[`components/Sidebar.tsx should render itself & its children (logged out) 1`] = `
 <div
-  className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-primary overflow-y-auto	"
+  className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto	"
 >
   <div
     className="flex flex-col flex-1 items-center py-4"
diff --git a/src/js/components/account-notifications.tsx b/src/js/components/account-notifications.tsx
@@ -24,7 +24,7 @@ export const AccountNotifications = (props: IProps) => {
   return (
     <>
       {showAccountHostname && (
-        <div className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 text-sm">
+        <div className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm">
           {hostname}
 
           <Chevron size={20} />
diff --git a/src/js/components/all-read.tsx b/src/js/components/all-read.tsx
@@ -22,7 +22,7 @@ export const AllRead = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col justify-center items-center p-4">
+    <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white">
       <h1 className="text-5xl mb-5">{emojify(emoji, { output: 'unicode' })}</h1>
 
       <h2 className="font-semibold text-xl mb-2 text-semibold">
diff --git a/src/js/components/fields/input.tsx b/src/js/components/fields/input.tsx
@@ -32,7 +32,7 @@ export class FieldInput extends React.PureComponent<IProps> {
 
             <input
               type="text"
-              className="appearance-none block w-full bg-gray-100 text-grey-darker border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200"
+              className="appearance-none block w-full bg-gray-100 border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200 focus:outline-none"
               id={input.name}
               placeholder={placeholder}
               {...input}
diff --git a/src/js/components/notification.tsx b/src/js/components/notification.tsx
@@ -57,7 +57,7 @@ export const NotificationItem: React.FC<IProps> = (props) => {
   });
 
   return (
-    <div className="flex space-x-2 p-2 bg-white hover:bg-gray-100 border-b border-gray-100">
+    <div className="flex space-x-2 p-2 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker">
       <div className="flex justify-center items-center w-8">
         <NotificationIcon size={18} aria-label={notification.subject.type} />
       </div>
diff --git a/src/js/components/oops.tsx b/src/js/components/oops.tsx
@@ -13,7 +13,7 @@ export const Oops = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col justify-center items-center p-4">
+    <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white">
       <h1 className="text-5xl mb-5">{emojify(emoji, { output: 'unicode' })}</h1>
 
       <h2 className="font-semibold text-xl mb-2 text-semibold">
diff --git a/src/js/components/repository.tsx b/src/js/components/repository.tsx
@@ -33,8 +33,8 @@ export const RepositoryNotifications: React.FC<IProps> = (props) => {
 
   return (
     <>
-      <div className="flex flex-1 p-2 bg-gray-100">
-        <div className="flex flex-1 p-0.5 items-center mt-0 text-base font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
+      <div className="flex flex-1 p-2 bg-gray-100 dark:bg-gray-darker dark:text-white">
+        <div className="flex flex-1 p-0.5 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
           <img className="rounded w-5 h-5 ml-1 mr-3" src={avatarUrl} />
           <span onClick={openBrowser}>{props.repoName}</span>
         </div>
diff --git a/src/js/components/sidebar.tsx b/src/js/components/sidebar.tsx
@@ -76,7 +76,7 @@ export class Sidebar extends React.Component<IProps> {
       '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';
 
     return (
-      <div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-primary overflow-y-auto	">
+      <div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto	">
         <div className="flex flex-col flex-1 items-center py-4">
           <Logo
             className="w-5 my-3 mx-auto cursor-pointer"
@@ -94,21 +94,21 @@ export class Sidebar extends React.Component<IProps> {
         <div className="py-4 px-3">
           {isEitherLoggedIn && (
             <>
-              <div
+              <button
                 className={footerButtonClasses}
                 onClick={this.refreshNotifications.bind(this)}
                 aria-label="Refresh Notifications"
               >
                 <Octicons.SyncIcon size={16} />
-              </div>
+              </button>
 
-              <div
+              <button
                 className={footerButtonClasses}
                 onClick={this.goToSettings.bind(this)}
                 aria-label="Settings"
               >
                 <Octicons.GearIcon size={16} />
-              </div>
+              </button>
             </>
           )}
 
diff --git a/src/js/components/ui/checkbox.tsx b/src/js/components/ui/checkbox.tsx
@@ -13,12 +13,14 @@ export const FieldCheckbox = (props: IFieldCheckbox) => {
       <label className="inline-flex items-center mt-2">
         <input
           type="checkbox"
-          className="form-checkbox h-5 w-5 text-red-600"
+          className="h-5 w-5"
           checked={props.checked}
           onChange={props.onChange}
         />
 
-        <span className="ml-2 text-gray-700">{props.label}</span>
+        <span className="ml-4 text-gray-700 dark:text-white">
+          {props.label}
+        </span>
       </label>
     </div>
   );
diff --git a/src/js/routes/__snapshots__/enterprise-login.test.tsx.snap b/src/js/routes/__snapshots__/enterprise-login.test.tsx.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`routes/enterprise-login.js renders correctly 1`] = `
-<div>
+<div
+  className="flex-1 bg-white dark:bg-gray-dark dark:text-white"
+>
   <div
     className="flex justify-between items-center mt-4 py-2 mx-8"
   >
@@ -54,7 +56,7 @@ exports[`routes/enterprise-login.js renders correctly 1`] = `
           Hostname
         </label>
         <input
-          className="appearance-none block w-full bg-gray-100 text-grey-darker border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200"
+          className="appearance-none block w-full bg-gray-100 border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200 focus:outline-none"
           id="hostname"
           name="hostname"
           onBlur={[Function]}
@@ -75,7 +77,7 @@ exports[`routes/enterprise-login.js renders correctly 1`] = `
           Client ID
         </label>
         <input
-          className="appearance-none block w-full bg-gray-100 text-grey-darker border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200"
+          className="appearance-none block w-full bg-gray-100 border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200 focus:outline-none"
           id="clientId"
           name="clientId"
           onBlur={[Function]}
@@ -96,7 +98,7 @@ exports[`routes/enterprise-login.js renders correctly 1`] = `
           Client Secret
         </label>
         <input
-          className="appearance-none block w-full bg-gray-100 text-grey-darker border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200"
+          className="appearance-none block w-full bg-gray-100 border border-red rounded py-2 px-4 mb-2 focus:bg-gray-200 focus:outline-none"
           id="clientSecret"
           name="clientSecret"
           onBlur={[Function]}
@@ -108,7 +110,7 @@ exports[`routes/enterprise-login.js renders correctly 1`] = `
         />
       </div>
       <button
-        className="float-right px-4 py-2 mt-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white focus:outline-none"
+        className="float-right px-4 py-2 my-4 bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none"
         disabled={true}
         title="Login Button"
         type="submit"
diff --git a/src/js/routes/__snapshots__/login.test.tsx.snap b/src/js/routes/__snapshots__/login.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`routes/login.tsx should render itself & its children 1`] = `
 <div
-  className="flex flex-1 flex-col justify-center items-center p-4"
+  className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark dark:text-white"
 >
   <svg
     className="w-16 h-16"
@@ -53,11 +53,11 @@ exports[`routes/login.tsx should render itself & its children 1`] = `
   >
     GitHub Notifications 
     <br />
-     in your menu bar.
+     on your menu bar.
   </div>
   <button
     aria-label="Login with GitHub"
-    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center hover:bg-gray-500 hover:text-white focus:outline-none"
+    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
   >
     <span>
@@ -66,7 +66,7 @@ exports[`routes/login.tsx should render itself & its children 1`] = `
   </button>
   <button
     aria-label="Login with GitHub Enterprise"
-    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center hover:bg-gray-500 hover:text-white focus:outline-none"
+    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
   >
     <span>
diff --git a/src/js/routes/__snapshots__/notifications.test.tsx.snap b/src/js/routes/__snapshots__/notifications.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`routes/notifications.ts should render itself & its children (all read n
 exports[`routes/notifications.ts should render itself & its children (error page - oops) 1`] = `<Oops />`;
 
 exports[`routes/notifications.ts should render itself & its children (with notifications) 1`] = `
-Array [
+<div
+  className="flex flex-col flex-1 bg-white dark:bg-gray-dark"
+>
   <AccountNotifications
     hostname="github.com"
     notifications={
@@ -138,7 +140,7 @@ Array [
       ]
     }
     showAccountHostname={true}
-  />,
+  />
   <AccountNotifications
     hostname="github.gitify.io"
     notifications={
@@ -232,6 +234,6 @@ Array [
       ]
     }
     showAccountHostname={true}
-  />,
-]
+  />
+</div>
 `;
diff --git a/src/js/routes/__snapshots__/settings.test.tsx.snap b/src/js/routes/__snapshots__/settings.test.tsx.snap
diff --git a/src/js/routes/enterprise-login.tsx b/src/js/routes/enterprise-login.tsx
diff --git a/src/js/routes/login.tsx b/src/js/routes/login.tsx
diff --git a/src/js/routes/notifications.tsx b/src/js/routes/notifications.tsx
diff --git a/src/js/routes/settings.tsx b/src/js/routes/settings.tsx
diff --git a/tailwind.config.js b/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	exports[`components/all-read.tsx should render itself & its children 1`] = `
`4`	`4`	`<div`
`5`		`- className="flex flex-1 flex-col justify-center items-center p-4"`
	`5`	`+ className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white"`
`6`	`6`	`>`
`7`	`7`	`<h1`
`8`	`8`	`className="text-5xl mb-5"`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	exports[`components/notification.js should render itself & its children 1`] = `
`4`	`4`	`<div`
`5`		`- className="flex space-x-2 p-2 bg-white hover:bg-gray-100 border-b border-gray-100"`
	`5`	`+ className="flex space-x-2 p-2 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker"`
`6`	`6`	`>`
`7`	`7`	`<div`
`8`	`8`	`className="flex justify-center items-center w-8"`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@`
`2`	`2`
`3`	`3`	exports[`components/oops.tsx should render itself & its children 1`] = `
`4`	`4`	`<div`
`5`		`- className="flex flex-1 flex-col justify-center items-center p-4"`
	`5`	`+ className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white"`
`6`	`6`	`>`
`7`	`7`	`<h1`
`8`	`8`	`className="text-5xl mb-5"`
Original file line number	Diff line number	Diff line change
`@@ -3,10 +3,10 @@`
`3`	`3`	exports[`components/repository.tsx should render itself & its children 1`] = `
`4`	`4`	`Array [`
`5`	`5`	`<div`
`6`		`- className="flex flex-1 p-2 bg-gray-100"`
	`6`	`+ className="flex flex-1 p-2 bg-gray-100 dark:bg-gray-darker dark:text-white"`
`7`	`7`	`>`
`8`	`8`	`<div`
`9`		`- className="flex flex-1 p-0.5 items-center mt-0 text-base font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"`
	`9`	`+ className="flex flex-1 p-0.5 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap"`
`10`	`10`	`>`
`11`	`11`	`<img`
`12`	`12`	`className="rounded w-5 h-5 ml-1 mr-3"`