feat: Migrate to TailwindCSS (gitify-app#452)

* chore: Setup TailwindCSS

* feat: Migrate all styles to TailwindCSS

* chore: Remove styled-components dependency

* chore: Convert nprogress bar component to use hooks

* chore: Fix Tests

* chore: Don't change the message/emoji on every request

* chore: Purge config for tailwind

Author: manosim

.nvmrc

@@ -1 +1 @@
-10.17.0
+12.20.0

index.html

@@ -13,4 +13,51 @@
   </body>
 
   <script src="./build/js/app.js"></script>
+
+  <style>
+    html,
+    body {
+      height: 100%;
+      -webkit-user-select: none;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+        'Helvetica Neue', sans-serif;
+      margin: 0;
+      cursor: default;
+    }
+
+    #gitify {
+      height: 100%;
+    }
+
+    .notification-exit {
+      transform: translate3d(0px, 0, 0);
+      opacity: 1;
+      transition-duration: 250ms;
+      transition-timing-function: cubic-bezier(0.175, 0.665, 0.32, 1), linear;
+    }
+
+    .notification-exit.notification-exit-active {
+      transform: translate3d(350px, 0, 0);
+      opacity: 0;
+    }
+
+    #nprogress {
+      pointer-events: none;
+    }
+
+    #nprogress .bar {
+      position: fixed;
+      top: 0;
+      left: 50px;
+      z-index: 1031;
+      background: #203354;
+
+      width: 100%;
+      height: 2px;
+    }
+  </style>
 </html>

package.json

@@ -107,13 +107,15 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^11.1.0",
+    "autoprefixer": "^10.1.0",
     "axios": "=0.21.0",
     "date-fns": "^2.16.1",
     "electron-updater": "^4.3.5",
     "final-form": "^4.19.1",
     "lodash": "^4.17.20",
     "menubar": "^9.0.1",
     "nprogress": "=0.2.0",
+    "postcss": "^8.2.1",
     "react": "=16.13.1",
     "react-dom": "=16.13.1",
     "react-emojione": "=5.0.1",
@@ -128,7 +130,7 @@
     "redux-storage-decorator-filter": "=1.1.8",
     "redux-storage-engine-localstorage": "=1.1.4",
     "redux-thunk": "=2.3.0",
-    "styled-components": "^5.0.1",
+    "tailwindcss": "^2.0.2",
     "ts-loader": "^8.0.11",
     "typescript": "^4.1.2"
   },
@@ -141,14 +143,17 @@
     "@types/react-redux": "^7.1.7",
     "@types/react-transition-group": "^4.2.4",
     "@types/styled-components": "^5.0.1",
+    "css-loader": "^5.0.1",
     "electron": "^11.0.2",
     "electron-builder": "^22.9.1",
     "electron-notarize": "^1.0.0",
     "jest": "^26.6.3",
     "nock": "^12.0.3",
+    "postcss-loader": "^4.1.0",
     "prettier": "=2.2.0",
     "react-test-renderer": "=16.13.1",
     "redux-mock-store": "=1.5.4",
+    "style-loader": "^2.0.0",
     "ts-jest": "^26.4.4",
     "webpack": "^5.6.0",
     "webpack-cli": "^4.2.0",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/js/app.tsx

@@ -6,15 +6,10 @@ import {
   Switch,
 } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import styled, {
-  ThemeProvider,
-  createGlobalStyle,
-  DefaultTheme,
-} from 'styled-components';
 
 import configureStore from './store/configureStore';
 import Loading from './components/loading';
-import Sidebar, { SIDEBAR_WIDTH } from './components/sidebar';
+import Sidebar from './components/sidebar';
 
 import EnterpriseLoginRoute from './routes/enterprise-login';
 import LoginRoute from './routes/login';
@@ -46,100 +41,22 @@ export const PrivateRoute = ({ component: Component, ...rest }) => {
   );
 };
 
-const theme: DefaultTheme = {
-  borderRadius: '3px',
-
-  primary: '#203354',
-  success: '#2CC966',
-  info: '#8BA9C6',
-  warning: '#FCAA67',
-  danger: '#B7524F',
-
-  grayLighter: '#f9fafa',
-  grayLight: '#eceeef',
-  grayDarker: '#3d3f41',
-  grayDark: '#55595C',
-
-  primaryDark: '#071A3B',
-};
-
-const GlobalStyle = createGlobalStyle`
-  html,
-  body {
-    height: 100%;
-    -webkit-user-select: none;
-  }
-
-  body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-      'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-      sans-serif;
-    margin: 0;
-    cursor: default;
-  }
-
-  #gitify {
-    height: 100%;
-  }
-
-  button {
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  #nprogress {
-    pointer-events: none;
-  
-    .bar {
-      position: fixed;
-      top: 0;
-      left: ${SIDEBAR_WIDTH};
-      z-index: 1031;
-      background: ${(props) => props.theme.primary};
-  
-      width: 100%;
-      height: 2px;
-    }
-  }
-
-  .notification-exit {
-    transform: translate3d(0px, 0, 0);
-    opacity: 1;
-    transition-duration: 250ms;
-    transition-timing-function: cubic-bezier(0.175, 0.665, 0.32, 1), linear;
-  
-    &.notification-exit-active {
-      transform: translate3d(350px, 0, 0);
-      opacity: 0;
-    }
-  }
-`;
-
-const Wrapper = styled.div`
-  height: 100%;
-  padding-left: ${SIDEBAR_WIDTH};
-`;
-
 export const App = () => {
   return (
     <Provider store={store}>
-      <ThemeProvider theme={theme}>
-        <Router>
-          <GlobalStyle />
-          <Wrapper>
-            <Loading />
-            <Sidebar />
-
-            <Switch>
-              <PrivateRoute path="/" exact component={NotificationsRoute} />
-              <PrivateRoute path="/settings" exact component={SettingsRoute} />
-              <Route path="/login" component={LoginRoute} />
-              <Route path="/enterpriselogin" component={EnterpriseLoginRoute} />
-            </Switch>
-          </Wrapper>
-        </Router>
-      </ThemeProvider>
+      <Router>
+        <div className="flex flex-col pl-14 h-full">
+          <Loading />
+          <Sidebar />
+
+          <Switch>
+            <PrivateRoute path="/" exact component={NotificationsRoute} />
+            <PrivateRoute path="/settings" exact component={SettingsRoute} />
+            <Route path="/login" component={LoginRoute} />
+            <Route path="/enterpriselogin" component={EnterpriseLoginRoute} />
+          </Switch>
+        </div>
+      </Router>
     </Provider>
   );
 };

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="sc-AxjAm hCwqHM"
+  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 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="sc-AxjAm hCwqHM"
+  className="flex flex-1 items-center justify-between py-2 px-4 bg-gray-300 text-sm"
 >
   github.com
   <svg

src/js/components/__snapshots__/all-read.test.tsx.snap

@@ -2,20 +2,18 @@
 
 exports[`components/all-read.tsx should render itself & its children 1`] = `
 <div
-  className="sc-AxjAm bVUrJb"
+  className="flex flex-1 flex-col justify-center items-center p-4"
 >
-  <div
-    className="sc-AxirZ joxCwg"
+  <h1
+    className="text-5xl mb-5"
   >
     😉
-  </div>
+  </h1>
   <h2
-    className="sc-AxiKw dlazZW"
+    className="font-semibold text-xl mb-2 text-semibold"
   />
-  <h4
-    className="sc-AxhCb jUqlrV"
-  >
+  <div>
     No new notifications.
-  </h4>
+  </div>
 </div>
 `;

src/js/components/__snapshots__/notification.test.tsx.snap

@@ -2,10 +2,10 @@
 
 exports[`components/notification.js should render itself & its children 1`] = `
 <div
-  className="sc-AxjAm esvKhw"
+  className="flex space-x-2 p-2 bg-white hover:bg-gray-100 border-b border-gray-100"
 >
   <div
-    className="sc-AxhUy cNkvzS"
+    className="flex justify-center items-center w-8"
   >
     <svg
       aria-hidden="false"
@@ -17,7 +17,7 @@ exports[`components/notification.js should render itself & its children 1`] = `
         }
       }
       fill="currentColor"
-      height={20}
+      height={18}
       role="img"
       style={
         Object {
@@ -27,21 +27,21 @@ exports[`components/notification.js should render itself & its children 1`] = `
         }
       }
       viewBox="0 0 16 16"
-      width={20}
+      width={18}
     />
   </div>
   <div
-    className="sc-AxirZ ibrlFv"
+    className="flex-1 overflow-hidden"
     onClick={[Function]}
     role="main"
   >
-    <h6
-      className="sc-AxiKw fXbfXY"
+    <div
+      className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden"
     >
       I am a robot and this is a test!
-    </h6>
+    </div>
     <div
-      className="sc-AxhCb fqclhB"
+      className="text-xs text-capitalize"
     >
       <span
         title="You're watching the repository."
@@ -52,14 +52,14 @@ exports[`components/notification.js should render itself & its children 1`] = `
        
       in over 3 years
       <button
-        className="sc-AxheI hMkKFy"
+        className="border-0 bg-none float-right"
         onClick={[Function]}
         title="Unsubscribe"
       >
         <svg
           aria-hidden="false"
           aria-label="Unsubscribe"
-          className="octicon"
+          className="hover:text-red-500"
           dangerouslySetInnerHTML={
             Object {
               "__html": "<path fill-rule=\\"evenodd\\" d=\\"M8 2.75a.75.75 0 00-1.238-.57L3.472 5H1.75A1.75 1.75 0 000 6.75v2.5C0 10.216.784 11 1.75 11h1.723l3.289 2.82A.75.75 0 008 13.25V2.75zM4.238 6.32L6.5 4.38v7.24L4.238 9.68a.75.75 0 00-.488-.18h-2a.25.25 0 01-.25-.25v-2.5a.25.25 0 01.25-.25h2a.75.75 0 00.488-.18zm7.042-1.1a.75.75 0 10-1.06 1.06L11.94 8l-1.72 1.72a.75.75 0 101.06 1.06L13 9.06l1.72 1.72a.75.75 0 101.06-1.06L14.06 8l1.72-1.72a.75.75 0 00-1.06-1.06L13 6.94l-1.72-1.72z\\"></path>",
@@ -82,17 +82,17 @@ exports[`components/notification.js should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    className="sc-AxhUy cNkvzS"
+    className="flex justify-center items-center w-8"
   >
     <button
-      className="sc-AxgMl beGRRX"
+      className="focus:outline-none"
       onClick={[Function]}
       title="Mark as Read"
     >
       <svg
         aria-hidden="false"
         aria-label="Mark as Read"
-        className="octicon"
+        className="hover:text-green-500"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<path fill-rule=\\"evenodd\\" d=\\"M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z\\"></path>",

src/js/components/__snapshots__/oops.test.tsx.snap

@@ -2,22 +2,20 @@
 
 exports[`components/oops.tsx should render itself & its children 1`] = `
 <div
-  className="sc-AxjAm bVUrJb"
+  className="flex flex-1 flex-col justify-center items-center p-4"
 >
-  <div
-    className="sc-AxirZ joxCwg"
+  <h1
+    className="text-5xl mb-5"
   >
     😔
-  </div>
+  </h1>
   <h2
-    className="sc-AxiKw dlazZW"
+    className="font-semibold text-xl mb-2 text-semibold"
   >
     Something went wrong.
   </h2>
-  <h4
-    className="sc-AxhCb jUqlrV"
-  >
+  <div>
     Couldn't get your notifications.
-  </h4>
+  </div>
 </div>
 `;