fixed some redundant stuff

components/elements/smallstyledbutton.tsx

@@ -24,7 +24,7 @@ export default function StyledButton(props: any) {
                     transition-duration: 0.2s;
                 }
             `}</style>
-            <a href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
+            <a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
         </div>
     )
 }

components/elements/styledbutton.tsx

@@ -25,7 +25,7 @@ export default function StyledButton(props: any) {
                     transition-duration: 0.2s;
                 }
             `}</style>
-            <a href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
+            <a style={props.style} href={props.href} target={props.target} rel={props.rel}>{props.children}</a>
         </div>
     )
 }

pages/contact.tsx

@@ -9,6 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
 import { faTwitter } from '@fortawesome/free-brands-svg-icons'
 import { faDiscord } from '@fortawesome/free-brands-svg-icons'
+import { faPhoneSlash } from '@fortawesome/free-solid-svg-icons'
 
 export default function Contact() {
     return (
@@ -28,17 +29,13 @@ export default function Contact() {
                         }
                     `}</style>
 
-                    <h2>{"📬 Contact us"}</h2>
+                    <section style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "flex-start", flexDirection: "column", alignItems: "stretch"}}>
-                    <section>
+                        <h2>{"📬 Contact us"}</h2>
-                        <div style={{display: "flex", flexWrap: "wrap", gap: "var(--padding-sm)", justifyContent: "flex-start", flexDirection: "column"}}>
+                        <StyledButton style={{backgroundColor: "var(--theme-color-500)"}} href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Shoot us an email</StyledButton>
-                            <StyledButton href="mailto:contact@dubbelnull.com"><FontAwesomeIcon icon={faEnvelope}></FontAwesomeIcon> Shoot us an email</StyledButton>
+                        <StyledButton style={{backgroundColor: "var(--theme-color-500)"}} href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faDiscord}></FontAwesomeIcon> Message us on our Discord server</StyledButton>
-                            <StyledButton href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faDiscord}></FontAwesomeIcon> Message us on our Discord server</StyledButton>
+                        <StyledButton style={{backgroundColor: "var(--theme-color-500)"}} href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> Send a DM to our Twitter account</StyledButton>
-                            <StyledButton href="https://discord.gg/976Xskh8Dd" rel="noreferrer" target="_blank"><FontAwesomeIcon icon={faTwitter}></FontAwesomeIcon> Send a DM to our Twitter account</StyledButton>
+                        <StyledButton style={{backgroundColor: "var(--danger)"}}><FontAwesomeIcon icon={faPhoneSlash}></FontAwesomeIcon> We have no public phone number</StyledButton>
-                        </div>
+                        <p>{"We typically respond within a few hours during business hours."}</p>
-                        <p>
-                            {"We typically respond within a few hours."}<br/><br/>
-                            {"📵 We don't have a public phone number for contact."}<br/>
-                        </p>
                     </section>          
                     
                 </article>

pages/index.tsx

@@ -130,7 +130,7 @@ export default function Home() {
 
                         <br/>
 
-                        <div className={styles.quote}>
+                        {/* <div className={styles.quote}>
                             <div>
                                 <p>
                                     <FontAwesomeIcon icon={faQuoteLeft} size="1x" style={{color: "darkgray"}} />
@@ -154,7 +154,7 @@ export default function Home() {
                             <div>
                                 <FontAwesomeIcon icon={faQuoteLeft} size="6x" style={{color: "var(--theme-color)"}} />
                             </div>
-                        </div>
+                        </div> */}
                     </section>
 
                     <hr/>

styles/globals.css

@@ -1,18 +1,25 @@
 /* variables */
 :root {
+  /* paddings */
   --padding-sm: 10px;
   --padding: 20px;
   --padding-lg: 50px;
   --padding-xl: 100px;
   --padding-xxl: 200px;
-}
 
-body, body[data-theme="light"] {
+  /* color palette */
   --theme-color: #2463EB;
-  --theme-color-dilluted: rgba(36, 99, 235, 0.1);
   --theme-color-500: rgba(36, 99, 235, 0.5);
+  --theme-color-dilluted: rgba(36, 99, 235, 0.1);
 
+  --warning: rgb(255, 163, 25);
+  --danger: rgb(255, 117, 117);
+
+  /* shadows */
   --box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
+}
+
+body, body[data-theme="light"] {
   
   --background-color: #F3F4F6;
   --background-color-light: #1044b427;
@@ -22,13 +29,7 @@ body, body[data-theme="light"] {
   --text-color: black;
 }
 
-body, body[data-theme="dark"] {
+body, body[data-theme="dark"] {  
-  --theme-color: #2463EB;
-  --theme-color-dilluted: rgba(36, 99, 235, 0.1);
-  --theme-color-500: rgba(36, 99, 235, 0.5);
-
-  --box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
-  
   --background-color: #1F2937;
   --background-color-light: #374151;
   --background-color-dark: #374151;