- 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 {