fixed some typos

Author: bennobuilder

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

@@ -8,7 +8,7 @@
 
 .Text {
   color: var(--ifm-navbar-link-color);
-  font-size: 4rem;
+  font-size: var(--ifm-font-size-64);
   font-weight: bold;
 }
 
@@ -55,7 +55,7 @@
   }
 
   .Text {
-    font-size: 2rem;
+    font-size: var(--ifm-font-size-40);
   }
 
   .Cursor {

src/core/entities/ui/theme/index.ts

@@ -5,6 +5,12 @@ import {
   ThemeInterface,
 } from "../ui.interface";
 
+/*
+  THIS THEME DOESN'T GET USED RIGHT NOW
+  https://github.com/facebook/docusaurus/issues/3236
+  CURRENT THEME IS IN 'custom.scss'
+ */
+
 export const primitiveColors: PrimitiveColorsInterface = {
   black: "#18191a",
   blackLight: "#202026",

src/core/entities/ui/ui.controller.ts

@@ -8,6 +8,7 @@ export const THEME_TYPE = App.createState<ThemeTypes>("light")
   .watch("mutateColor", (value) => {
     THEME.set(theme.themes[value]);
   });
+
 export const THEME = App.createState<ThemeInterface>(
   theme.themes[THEME_TYPE.value]
 ).watch("mutateColor", (value) => {

src/pages/LandingPage/components/HeaderView/styles.module.css

@@ -75,7 +75,7 @@
 
 @media (max-width: 768px) {
   .HeaderTitle {
-    font-size: var(--ifm-font-size-32);
+    font-size: var(--ifm-font-size-40);
   }
 
   .SeparatorRight {

src/theme/Footer/index.tsx

@@ -25,7 +25,7 @@ const Footer = () => {
 
   return (
     <footer className={clsx("footer", styles.Container)}>
-      <div className={styles.Inner}>
+      <div className={styles.InnerContainer}>
         <div className={styles.ContentContainer}>
           {/*Footer Left */}
           <div className={styles.FooterLeft}>
@@ -43,7 +43,7 @@ const Footer = () => {
             <div className={styles.Tagline}>{siteConfig.tagline}</div>
             <GithubButton
               className={styles.GithubButton}
-              to={siteConfig.themeConfig.githubUrl}
+              to={siteConfig.customFields.githubUrl}
             />
           </div>
 

src/theme/Footer/styles.module.css

@@ -6,7 +6,7 @@
   background: var(--ifm-color-background-2);
 }
 
-.Inner {
+.InnerContainer {
   display: flex;
   flex-direction: column;
   flex: 1;

src/theme/Navbar/styles.module.css

@@ -26,35 +26,19 @@
 :global(.navbar-sidebar__brand) {
     display: flex;
     justify-content: space-between;
+    text-align: center;
+    padding-left: 30px;
 }
 
 :global(.navbar__toggle) {
     align-self: center;
 }
 
-@media (max-width: 768px) {
-    :global(.navbar-sidebar__brand) {
-        display: flex;
-        align-items: center;
-        margin-left: 30px;
-        text-align: center;
-    }
-}
-
 @media (max-width: 997px) {
     .displayOnlyInLargeViewport {
         display: none !important;
     }
 
-    :global(.navbar-sidebar__brand) {
-        margin-left: 30px;
-        text-align: center;
-    }
-
-    .icon {
-        margin-top: 10px;
-    }
-
     :global(.navbar__link) {
         --ifm-navbar-item-padding-horizontal: 0.85rem;
     }

src/theme/Playground/index.tsx

@@ -12,6 +12,7 @@ import * as React from "react";
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";
 import clsx from "clsx";
 import styles from "./styles.module.css";
+import Spacer from "../../components/other/Spacer";
 
 function Playground({ children, theme, transformCode, ...props }) {
   return (
@@ -28,6 +29,7 @@ function Playground({ children, theme, transformCode, ...props }) {
         Live Editor
       </div>
       <LiveEditor className={styles.PlaygroundEditor} />
+      <Spacer height={30} />
       <div
         className={clsx(
           styles.PlaygroundHeader,

src/theme/Playground/styles.module.css

@@ -17,7 +17,6 @@
 }
 
 .PlaygroundPreviewHeader {
-    margin-top: 30px;
     background: var(--ifm-color-primary-darker);
     color: var(--ifm-color-content);
 }