- adding icons to buttons

- styling modals for dark mode

src/components/landing/Hero.js

@@ -1,6 +1,7 @@
 import React, { useContext } from "react";
 import { useStaticQuery, graphql } from "gatsby";
 import GatsbyImage from "gatsby-image";
+import { FaGithub } from "react-icons/fa";
 import ThemeContext from "../../contexts/ThemeContext";
 import ModalContext from "../../contexts/ModalContext";
 import UserContext from "../../contexts/UserContext";
@@ -54,7 +55,8 @@ const Hero = () => {
           <Button
             outline
             className="ml-8"
-            title="Source Code"
+            title="GitHub"
+            icon={FaGithub}
             onClick={toggleDarkMode}
           />
         </div>

src/components/shared/Button.js

@@ -3,23 +3,23 @@ import classNames from "classnames";
 import Loader from "react-loader-spinner";
 import styles from "./Button.module.css";
 
-const Button = ({ title, isLoading, onClick, outline, className }) => {
+const Button = ({ icon, title, isLoading, onClick, outline, className }) => {
+  const Icon = icon;
   const classes = classNames(styles.container, className, {
     [styles.outline]: outline,
   });
 
-  const handleKeyDown = (e) => {
-    console.log(e.key);
-  };
+  const handleKeyDown = () => {};
 
   return (
     <div
       tabIndex="0"
       role="button"
-      onClick={isLoading ? undefined : onClick}
       className={classes}
       onKeyDown={handleKeyDown}
+      onClick={isLoading ? undefined : onClick}
     >
+      {icon && <Icon size="14" className="mr-2" />}
       {isLoading ? (
         <Loader type="ThreeDots" color="#FFF" height={18} width={28} />
       ) : (

src/components/shared/Button.module.css

@@ -1,6 +1,6 @@
 .container {
   padding: 6px 24px;
-  @apply cursor-pointer inline-flex rounded font-semibold bg-primary border border-primary text-inverse;
+  @apply flex items-center cursor-pointer inline-flex rounded font-semibold bg-primary border border-primary text-inverse;
 }
 
 .container:hover {

src/contexts/ThemeContext.js

@@ -11,7 +11,7 @@ const COLOR_CONFIG = {
     "--color-primary": "#f5f5f5",
     "--color-primary-dark": "#eee",
     "--color-inverse": "#212121",
-    "--color-inverse-dark": "#121212",
+    "--color-inverse-dark": "#181818",
   },
 };
 

src/modals/AuthModal.js

@@ -21,8 +21,8 @@ const AuthModal = () => {
 
   const loggedInAction = (
     <Fragment>
-      <Button className="mr-6" title="Go to App" onClick={handleGoToApp} />
-      <Button title="Logout" onClick={logout} />
+      <Button className="mr-6" title="Logout" onClick={logout} />
+      <Button title="Go to App" onClick={handleGoToApp} />
     </Fragment>
   );
 

src/modals/BaseModal.module.css

@@ -4,7 +4,7 @@
 
 .modal {
   width: min(600px, calc(100vw - 100px));
-  @apply p-8 rounded bg-white outline-none;
+  @apply p-8 rounded bg-inverse text-primary outline-none;
 }
 
 .modal .title {

src/styles/colors.css

@@ -0,0 +1,6 @@
+:root {
+  --color-primary: #444;
+  --color-primary-dark: #333;
+  --color-inverse: #fff;
+  --color-inverse-dark: #f5f5f5;
+}

src/styles/global.css

@@ -2,6 +2,10 @@
 @import "~react-toastify/dist/ReactToastify.css";
 @import "./toastify.css";
 
+:root {
+  @apply transition-colors duration-200 ease-in-out;
+}
+
 html,
 body {
   font-size: 12px;