fixed some styles

Author: bennobuilder

docusaurus.config.js

@@ -2,7 +2,7 @@ const githubOrgUrl = "https://github.com/agile-ts";
 const domain = "https://agile-ts.org";
 
 const customFields = {
-  copyright: `Created with 💜 in Germany     |    Copyright © ${new Date().getFullYear()} BennoDev`,
+  copyright: `Created with 💜 in Germany     |    Copyright © ${new Date().getFullYear()} <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/DevBenno">BennoDev</a>`,
   description: "AgileTs is a spacy, fast, simple State Management Framework",
   domain,
   githubOrgUrl,
@@ -112,6 +112,7 @@ const config = {
       ],
     },
     footer: {
+      copyright: customFields.copyright,
       style: "dark",
       links: [
         {

src/components/buttons/GithubButton/index.tsx

@@ -4,7 +4,7 @@ import { useHistory } from "react-router-dom";
 import styles from "./styles.module.css";
 import clsx from "clsx";
 
-export type Props = { to: string; className: string };
+export type Props = { to: string; className?: string };
 
 const GithubButton: React.FC<Props> = (props) => {
   const { to, className } = props;
@@ -22,7 +22,7 @@ const GithubButton: React.FC<Props> = (props) => {
       }}
     >
       <FaGithub className={styles.GithubIcon} />
-      <div>GITHUB</div>
+      <div className={styles.Text}>GITHUB</div>
     </button>
   );
 };

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

@@ -21,9 +21,13 @@
 }
 
 .ButtonContainer:hover {
-   background-color: var(--ifm-color-surface-2);
- }
+  background-color: var(--ifm-color-surface-2);
+}
 
 .GithubIcon {
-  margin-right: 5px;
+  margin-right: 10px;
+}
+
+.Text {
+  margin-top: 3px;
 }

src/components/buttons/PrimaryButton/index.tsx

@@ -3,7 +3,7 @@ import { useHistory } from "react-router-dom";
 import styles from "./styles.module.css";
 import clsx from "clsx";
 
-export type Props = { to: string; className: string };
+export type Props = { to: string; className?: string };
 
 const PrimaryButton: React.FC<Props> = (props) => {
   const { to, children, className } = props;

src/components/CodeSandBoxEmbed.tsx renamed to src/components/other/CodeSandBoxEmbed/index.tsx

@@ -1,13 +1,14 @@
 import React from "react";
-import styled from "styled-components";
+import styles from "./styles.module.css";
 
 export type Props = { uri: string };
 
 const CodeSandBoxEmbed: React.FC<Props> = (props) => {
   const { uri } = props;
 
   return (
-    <Embed
+    <iframe
+      className={styles.Embed}
       src={`https://codesandbox.io/embed/${uri}?fontsize=14&hidenavigation=0&theme=light&view=preview`}
       title={"Code Sandbox"}
       allow={
@@ -20,13 +21,4 @@ const CodeSandBoxEmbed: React.FC<Props> = (props) => {
   );
 };
 
-const Embed = styled.iframe`
-  width: 100%;
-  height: 500px;
-  border: 0;
-  border-radius: 4px;
-  overflow: hidden;
-  border-color: var(--ifm-color-primary);
-`;
-
 export default CodeSandBoxEmbed;

src/components/other/CodeSandBoxEmbed/styles.module.css

@@ -0,0 +1,8 @@
+.Embed {
+  width: 100%;
+  height: 500px;
+  border: 0;
+  border-radius: 4px;
+  overflow: hidden;
+  border-color: var(--ifm-color-primary);
+}

src/components/other/HeaderTyper/index.tsx

@@ -43,7 +43,9 @@ const HeaderTyper: React.FC<Props> = (props) => {
     <div className={styles.Container}>
       <div className={styles.Text}>{text}</div>
       <div
-        className={clsx(styles.Cursor, !isTyping ? styles.Cursor_Blink : "")}
+        className={clsx(styles.Cursor, {
+          [styles.Cursor_Blink]: !isTyping,
+        })}
       />
     </div>
   );

src/components/other/HeaderTyper/styles.module.css

@@ -1,64 +1,67 @@
 .Container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    height: 5rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  height: 5rem;
 }
 
 .Text {
-    color: var(--ifm-navbar-link-color);
-    font-size: 4rem;
-    font-weight: bold;
+  color: var(--ifm-navbar-link-color);
+  font-size: 4rem;
+  font-weight: bold;
 }
 
 .Cursor {
-    background-color: var(--ifm-navbar-link-active-color);
-    margin-left: 10px;
-    margin-top: 10px;
+  background-color: var(--ifm-navbar-link-active-color);
+  margin-left: 10px;
+  margin-top: 10px;
 
-    width: 0.6rem;
-    height: 4rem;
+  width: 0.6rem;
+  height: 4rem;
 }
 
 .Cursor_Blink {
-    -webkit-animation: blink 0.8s infinite;
+  -webkit-animation: blink 0.8s infinite;
 }
 
 @-webkit-keyframes blink {
-    0% {
-        background: transparent;
-    }
-    50% {
-        background: var(--ifm-navbar-link-active-color);
-    }
-    100% {
-        background: transparent;
-    }
+  0% {
+    background: transparent;
+  }
+  50% {
+    background: var(--ifm-navbar-link-active-color);
+  }
+  100% {
+    background: transparent;
+  }
 }
 
 @keyframes blink {
-    0% {
-        background: transparent;
-    }
-    50% {
-        background: var(--ifm-navbar-link-active-color);
-    }
-    100% {
-        background: transparent;
-    }
+  0% {
+    background: transparent;
+  }
+  50% {
+    background: var(--ifm-navbar-link-active-color);
+  }
+  100% {
+    background: transparent;
+  }
 }
 
-
 @media (max-width: 768px) {
-    .Text {
-        font-size: 2rem;
-    }
+  .Container {
+    height: 2rem;
+  }
+
+  .Text {
+    font-size: 2rem;
+  }
 
-    .Cursor {
-        height: 2rem;
-        width: 0.3rem;
-        margin-left: 5px;
-        margin-top: 5px;
-    }
+  .Cursor {
+    height: 2rem;
+    width: 0.3rem;
+    margin-left: 5px;
+    margin-top: 5px;
+  }
 }