switch github button to css module

Author: bennobuilder

src/components/buttons/GithubButton.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { FaGithub } from "react-icons/all";
+import { useHistory } from "react-router-dom";
+import styles from "./styles.module.scss";
+
+export type Props = { to: string };
+
+const GithubButton: React.FC<Props> = (props) => {
+  const { to } = props;
+  const history = useHistory();
+
+  return (
+    <button
+      className={styles.buttonContainer}
+      onClick={() => {
+        if (to.startsWith("http")) {
+          window.location.href = to;
+          return;
+        }
+        history.push(to);
+      }}
+      {...props}
+    >
+      <FaGithub className={styles.githubIcon} />
+      <div>GITHUB</div>
+    </button>
+  );
+};
+
+export default GithubButton;

src/components/buttons/GithubButton/index.tsx

@@ -0,0 +1,29 @@
+.buttonContainer {
+  color: var(--ifm-color-on-surface);
+  background-color: var(--ifm-color-surface);
+
+  border-radius: 3px;
+  border: none;
+
+  font-size: 18px;
+  font-weight: bold;
+
+  cursor: pointer;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: 15px 30px;
+  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
+
+  transition: 0.3s ease all;
+
+  &:hover {
+    background-color: var(--ifm-color-surface-2);
+  }
+
+  .githubIcon {
+    margin-right: 5px;
+  }
+}

src/components/buttons/GithubButton/styles.module.scss

@@ -27,8 +27,8 @@ const PrimaryButton: React.FC<Props> = (props) => {
 export default PrimaryButton;
 
 const Button = styled.button`
-  color: ${(props) => props.theme.colors?.on_primary};
-  background-color: ${(props) => props.theme.colors?.primary};
+  color: var(--ifm-color-on-primary);
+  background-color: var(--ifm-color-primary);
   border-radius: 3px;
   border: none;
 
@@ -44,6 +44,6 @@ const Button = styled.button`
   transition: 0.3s ease all;
 
   &:hover {
-    background-color: ${(props) => props.theme.colors?.primary_2};
+    background-color: var(--ifm-color-primary-lighter);
   }
 `;

src/components/buttons/PrimaryButton.tsx

@@ -39,6 +39,10 @@
   // Theme Colors
   // ==============================================================================
 
+  // Primary
+  // See 'General Docusaurs'
+  --ifm-color-on-primary: var(--ifm-color-white);
+
   // Background
   --ifm-color-background: var(--ifm-color-white);
   --ifm-color-background-2: var(--ifm-color-white-dark);
@@ -333,6 +337,10 @@ html[data-theme='dark'] {
   // Theme Colors
   // ==============================================================================
 
+  // Primary
+  // See 'General Docusaurs'
+  --ifm-color-on-primary: var(--ifm-color-black);
+
   // Background
   --ifm-color-background: var(--ifm-color-black);
   --ifm-color-background-2: var(--ifm-color-black-light);

src/css/custom.scss

@@ -1,10 +1,10 @@
 import React from "react";
 import styled from "styled-components";
 import PrimaryButton from "../../../../components/buttons/PrimaryButton";
-import GithubButton from "../../../../components/buttons/GithubButton";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import HeaderTyper from "../../../../components/HeaderTyper";
 import Spacer from "../../../../components/Spacer";
+import GithubButton from "../../../../components/buttons/GithubButton";
 
 const HeaderView: React.FC = () => {
   const { siteConfig } = useDocusaurusContext();

src/pages/LandingPage/components/HeaderView/index.tsx

@@ -6,8 +6,6 @@ import Layout from "@theme/Layout";
 import "react-toastify/dist/ReactToastify.css";
 import HeaderView from "./components/HeaderView";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import GiveItATryView from "./components/GiveItATriyView";
-import Spacer from "../../components/Spacer";
 
 const LandingPage: React.FC = () => {
   const windowSize = useWindowSize();