From 132141a5cc27d5abea9bb1c96cea02c8d84bfe86 Mon Sep 17 00:00:00 2001
From: Thomas Hammon <hammonthomas@gmail.com>
Date: Wed, 25 Sep 2024 15:17:48 -0500
Subject: [PATCH 1/6] added method conferance banner

---
 public/images/icons/exit-cross.png       | Bin 0 -> 278 bytes
 src/components/Banner/banner.jsx         |  35 +++++++++++
 src/components/Banner/banner.module.scss |  77 +++++++++++++++++++++++
 src/components/Layout.tsx                |   4 ++
 styles/base/typography.scss              |   1 +
 5 files changed, 117 insertions(+)
 create mode 100644 public/images/icons/exit-cross.png
 create mode 100644 src/components/Banner/banner.jsx
 create mode 100644 src/components/Banner/banner.module.scss

diff --git a/public/images/icons/exit-cross.png b/public/images/icons/exit-cross.png
new file mode 100644
index 0000000000000000000000000000000000000000..442f6a7dd93bf98ffd5318af39ed160c0859e91f
GIT binary patch
literal 278
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{%TJb$B+ufy8#Dz4;k>-u(M^{*VPC*9dm$X
zgJ5K1pajE8p+~;f47_DaJ2)O~dw=irzRl;aF`jnHEMLBM?YCKaQHigM&&=HM@x^Yr
zCqZh5I@2CR_bl9Sb>Wt+{k}`Y@($m6Z<DFUvg^avL`Oa0KOZmNk$t9AvnZC&VAh67
z9{citP25@Ea^Oksy*-;+PjA}u^44|UU=P-5TxH)rO*v_mcW=QRjZFKQ$&(Y=P9I{o
Yn&%Yv^6#x3KxZ>}y85}Sb4q9e0Q@6x8UO$Q

literal 0
HcmV?d00001

diff --git a/src/components/Banner/banner.jsx b/src/components/Banner/banner.jsx
new file mode 100644
index 0000000..4639a0f
--- /dev/null
+++ b/src/components/Banner/banner.jsx
@@ -0,0 +1,35 @@
+import React from "react";
+import styles from './banner.module.scss';
+
+
+export default function Banner(){
+
+    const [displayBanner, setDisplayBanner] = React.useState(true)
+
+    const display = displayBanner ? styles.banner : styles.hidden;
+
+    function toggleBanner(){
+        setDisplayBanner(prevState => !prevState)
+    }
+
+    return (
+            <div className={display}>
+                <div>
+                    <h3 className={styles.textBold}>Method Conference</h3>
+                </div>
+                <div className={styles.textArea}>
+                    <p className={styles.textBold}>Join us for a full day of code & learning.</p>
+                    <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
+                </div>
+                <div className={styles.container}>
+                    <a href="https://www.methodconf.com/2024/" target="_blank">
+                        <button className={styles.button}>BUY TICKETS</button>
+                    </a>
+                    <button className={styles.exitButton} onClick={toggleBanner}>
+                        <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner"/>
+                    </button>
+                </div>
+            </div>
+        ) 
+        
+}
\ No newline at end of file
diff --git a/src/components/Banner/banner.module.scss b/src/components/Banner/banner.module.scss
new file mode 100644
index 0000000..feaada9
--- /dev/null
+++ b/src/components/Banner/banner.module.scss
@@ -0,0 +1,77 @@
+@import '@/styles/utils/all';
+
+.container{
+    display: flex;
+    justify-content: space-between;
+
+    width: 12em;
+}
+
+.hidden {
+    display: none;
+}
+
+.banner {
+    display: flex;
+    
+    height: 120px;
+    width: 98%;
+
+    margin: .5em;
+    padding: 0em 2em;
+
+    border-radius: 1em;
+    background-color: #E9F5FF;
+    
+
+    justify-content: space-between;
+    align-items: center;
+
+    text-align: center;
+}
+
+.textArea{
+    margin: 0em 1em;
+}
+
+.textBold{
+    font-family: "Source Sans 3", sans-serif;
+    font-size: 1.5em;
+    font-weight: bold;
+    color: #0094FF;
+}
+
+.text{
+    font-family: "Source Sans 3", sans-serif;
+    font-size: 1.5em;
+    color: #0094FF;
+}
+
+.button{
+    border: none;
+
+    padding: 1rem 2rem;
+
+    background-color: #0094FF;
+    color: #FFFFFF;
+
+    min-width: 150px;
+}
+
+.exit{
+    height: 1em;
+}
+
+.exitButton{
+    border: none;
+    background-color: #E9F5FF;
+}
+
+@media (max-width:600px) {
+    .banner{
+        flex-direction: column;
+        justify-content: space-around;
+        
+        height: 20vh;
+    }
+}
\ No newline at end of file
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ea533ff..1fc9178 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,5 +1,7 @@
+import React from 'react';
 import { Footer } from '@/components/Footer/Footer';
 import { Navbar } from '@/components/Navbar/Navbar';
+import Banner from '@/components/Banner/banner.jsx'
 import styles from './layout.module.scss';
 
 interface ILayout {
@@ -7,10 +9,12 @@ interface ILayout {
 }
 
 export function Layout({ children }: ILayout): JSX.Element {
+
     return (
         <div className={styles.pageContainer}>
             <div className={styles.contentWrapper}>
                 <Navbar />
+                <Banner />
                 {children}
             </div>
             <Footer />
diff --git a/styles/base/typography.scss b/styles/base/typography.scss
index fb6a8a7..dade1cc 100644
--- a/styles/base/typography.scss
+++ b/styles/base/typography.scss
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
 @import '@/styles/utils/all';
 
 html {

From 9cdab00ea106b9d3e029114eb3443f24f42ca295 Mon Sep 17 00:00:00 2001
From: Thomas Hammon <hammonthomas@gmail.com>
Date: Wed, 25 Sep 2024 15:22:58 -0500
Subject: [PATCH 2/6] method conference banner, now linted

---
 src/components/Banner/banner.jsx | 49 +++++++++++++++-----------------
 src/components/Layout.tsx        |  3 +-
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/components/Banner/banner.jsx b/src/components/Banner/banner.jsx
index 4639a0f..2e826cc 100644
--- a/src/components/Banner/banner.jsx
+++ b/src/components/Banner/banner.jsx
@@ -1,35 +1,32 @@
-import React from "react";
+import React from 'react';
 import styles from './banner.module.scss';
 
-
-export default function Banner(){
-
-    const [displayBanner, setDisplayBanner] = React.useState(true)
+export default function Banner() {
+    const [displayBanner, setDisplayBanner] = React.useState(true);
 
     const display = displayBanner ? styles.banner : styles.hidden;
 
-    function toggleBanner(){
-        setDisplayBanner(prevState => !prevState)
+    function toggleBanner() {
+        setDisplayBanner((prevState) => !prevState);
     }
 
     return (
-            <div className={display}>
-                <div>
-                    <h3 className={styles.textBold}>Method Conference</h3>
-                </div>
-                <div className={styles.textArea}>
-                    <p className={styles.textBold}>Join us for a full day of code & learning.</p>
-                    <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
-                </div>
-                <div className={styles.container}>
-                    <a href="https://www.methodconf.com/2024/" target="_blank">
-                        <button className={styles.button}>BUY TICKETS</button>
-                    </a>
-                    <button className={styles.exitButton} onClick={toggleBanner}>
-                        <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner"/>
-                    </button>
-                </div>
+        <div className={display}>
+            <div>
+                <h3 className={styles.textBold}>Method Conference</h3>
+            </div>
+            <div className={styles.textArea}>
+                <p className={styles.textBold}>Join us for a full day of code & learning.</p>
+                <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
+            </div>
+            <div className={styles.container}>
+                <a href="https://www.methodconf.com/2024/" target="_blank">
+                    <button className={styles.button}>BUY TICKETS</button>
+                </a>
+                <button className={styles.exitButton} onClick={toggleBanner}>
+                    <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner" />
+                </button>
             </div>
-        ) 
-        
-}
\ No newline at end of file
+        </div>
+    );
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 1fc9178..acbbd62 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Footer } from '@/components/Footer/Footer';
 import { Navbar } from '@/components/Navbar/Navbar';
-import Banner from '@/components/Banner/banner.jsx'
+import Banner from '@/components/Banner/banner.jsx';
 import styles from './layout.module.scss';
 
 interface ILayout {
@@ -9,7 +9,6 @@ interface ILayout {
 }
 
 export function Layout({ children }: ILayout): JSX.Element {
-
     return (
         <div className={styles.pageContainer}>
             <div className={styles.contentWrapper}>

From 803202cdf73cb5ae8dc4be36c162c6d6d8a6425b Mon Sep 17 00:00:00 2001
From: Thomas Hammon <hammonthomas@gmail.com>
Date: Wed, 25 Sep 2024 15:29:49 -0500
Subject: [PATCH 3/6] Banner for the method conf. Ran lint, used --fix, and
 then solved remaining erros

---
 src/components/Banner/banner.jsx | 2 +-
 src/components/Layout.tsx        | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Banner/banner.jsx b/src/components/Banner/banner.jsx
index 2e826cc..f7eaa5d 100644
--- a/src/components/Banner/banner.jsx
+++ b/src/components/Banner/banner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './banner.module.scss';
 
-export default function Banner() {
+export function Banner() {
     const [displayBanner, setDisplayBanner] = React.useState(true);
 
     const display = displayBanner ? styles.banner : styles.hidden;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index acbbd62..e33f2cb 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
+import { Banner } from '@/components/Banner/banner.jsx';
 import { Footer } from '@/components/Footer/Footer';
 import { Navbar } from '@/components/Navbar/Navbar';
-import Banner from '@/components/Banner/banner.jsx';
 import styles from './layout.module.scss';
 
 interface ILayout {

From 74a1f723b9418e66afad706dbf3a5c4e6b91bc81 Mon Sep 17 00:00:00 2001
From: Thomas Hammon <hammonthomas@gmail.com>
Date: Fri, 27 Sep 2024 14:05:57 -0500
Subject: [PATCH 4/6] fixed various small bugs

---
 src/components/Banner/banner.jsx         | 54 ++++++++++++++----------
 src/components/Banner/banner.module.scss | 11 ++++-
 styles/base/typography.scss              |  1 -
 3 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/src/components/Banner/banner.jsx b/src/components/Banner/banner.jsx
index f7eaa5d..23aeee9 100644
--- a/src/components/Banner/banner.jsx
+++ b/src/components/Banner/banner.jsx
@@ -1,32 +1,40 @@
-import React from 'react';
+import { useState, useRef } from 'react';
 import styles from './banner.module.scss';
 
 export function Banner() {
-    const [displayBanner, setDisplayBanner] = React.useState(true);
+    const [displayBanner, setDisplayBanner] = useState(true);
+
+    function toggleBanner(){
+        setDisplayBanner((prevState) => !prevState)
+    }
 
     const display = displayBanner ? styles.banner : styles.hidden;
 
-    function toggleBanner() {
-        setDisplayBanner((prevState) => !prevState);
-    }
 
-    return (
-        <div className={display}>
-            <div>
-                <h3 className={styles.textBold}>Method Conference</h3>
-            </div>
-            <div className={styles.textArea}>
-                <p className={styles.textBold}>Join us for a full day of code & learning.</p>
-                <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
+    return (<div className={display}>
+                <div>
+                    <h3 className={styles.textBold}>Method Conference</h3>
+                </div>
+                <div className={styles.textArea}>
+                    <p className={styles.textBold}>Join us for a full day of code & learning.</p>
+                    <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
+                </div>
+                <div className={styles.container}>
+                    <a href="https://www.methodconf.com/2024/" target="_blank" className={styles.anchor}>
+                        <button className={styles.button}>BUY TICKETS</button>
+                    </a>
+                    <button className={styles.exitButton} onClick={toggleBanner}>
+                        {/* eslint-disable */}
+                        <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner" />
+                        {/* eslint-enable */}
+                        {/* We disabled this for linting because we don't have an icon 
+                        system for this site yet, and this component is temporary. They can
+                        be removed when the icon systems are integrated.*/}
+                    </button>
+                </div>
             </div>
-            <div className={styles.container}>
-                <a href="https://www.methodconf.com/2024/" target="_blank">
-                    <button className={styles.button}>BUY TICKETS</button>
-                </a>
-                <button className={styles.exitButton} onClick={toggleBanner}>
-                    <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner" />
-                </button>
-            </div>
-        </div>
-    );
+    )
+  
+
+
 }
diff --git a/src/components/Banner/banner.module.scss b/src/components/Banner/banner.module.scss
index feaada9..8f74a2a 100644
--- a/src/components/Banner/banner.module.scss
+++ b/src/components/Banner/banner.module.scss
@@ -35,14 +35,14 @@
 }
 
 .textBold{
-    font-family: "Source Sans 3", sans-serif;
+    font-family: sans-serif;
     font-size: 1.5em;
     font-weight: bold;
     color: #0094FF;
 }
 
 .text{
-    font-family: "Source Sans 3", sans-serif;
+    font-family: sans-serif;
     font-size: 1.5em;
     color: #0094FF;
 }
@@ -58,6 +58,10 @@
     min-width: 150px;
 }
 
+.anchor :hover{
+    cursor: pointer;
+}
+
 .exit{
     height: 1em;
 }
@@ -67,6 +71,9 @@
     background-color: #E9F5FF;
 }
 
+.exitButton :hover{
+    cursor: pointer;
+}
 @media (max-width:600px) {
     .banner{
         flex-direction: column;
diff --git a/styles/base/typography.scss b/styles/base/typography.scss
index dade1cc..fb6a8a7 100644
--- a/styles/base/typography.scss
+++ b/styles/base/typography.scss
@@ -1,6 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
 @import '@/styles/utils/all';
 
 html {

From 8682d450ae0070cb54566430b8e45e962cced62a Mon Sep 17 00:00:00 2001
From: Thomas Hammon <hammonthomas@gmail.com>
Date: Fri, 27 Sep 2024 14:12:29 -0500
Subject: [PATCH 5/6] ran linting

---
 src/components/Banner/banner.jsx | 47 +++++++++++++++-----------------
 1 file changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/Banner/banner.jsx b/src/components/Banner/banner.jsx
index 23aeee9..f903b18 100644
--- a/src/components/Banner/banner.jsx
+++ b/src/components/Banner/banner.jsx
@@ -1,40 +1,37 @@
-import { useState, useRef } from 'react';
 import styles from './banner.module.scss';
+import { useState } from 'react';
 
 export function Banner() {
     const [displayBanner, setDisplayBanner] = useState(true);
 
-    function toggleBanner(){
-        setDisplayBanner((prevState) => !prevState)
+    function toggleBanner() {
+        setDisplayBanner((prevState) => !prevState);
     }
 
     const display = displayBanner ? styles.banner : styles.hidden;
 
-
-    return (<div className={display}>
-                <div>
-                    <h3 className={styles.textBold}>Method Conference</h3>
-                </div>
-                <div className={styles.textArea}>
-                    <p className={styles.textBold}>Join us for a full day of code & learning.</p>
-                    <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
-                </div>
-                <div className={styles.container}>
-                    <a href="https://www.methodconf.com/2024/" target="_blank" className={styles.anchor}>
-                        <button className={styles.button}>BUY TICKETS</button>
-                    </a>
-                    <button className={styles.exitButton} onClick={toggleBanner}>
-                        {/* eslint-disable */}
+    return (
+        <div className={display}>
+            <div>
+                <h3 className={styles.textBold}>Method Conference</h3>
+            </div>
+            <div className={styles.textArea}>
+                <p className={styles.textBold}>Join us for a full day of code & learning.</p>
+                <p className={styles.text}>Saturday, October 12, 2024, @ eFactory</p>
+            </div>
+            <div className={styles.container}>
+                <a href="https://www.methodconf.com/2024/" target="_blank" className={styles.anchor}>
+                    <button className={styles.button}>BUY TICKETS</button>
+                </a>
+                <button className={styles.exitButton} onClick={toggleBanner}>
+                    {/* eslint-disable */}
                         <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner" />
                         {/* eslint-enable */}
-                        {/* We disabled this for linting because we don't have an icon 
+                    {/* We disabled this for linting because we don't have an icon 
                         system for this site yet, and this component is temporary. They can
                         be removed when the icon systems are integrated.*/}
-                    </button>
-                </div>
+                </button>
             </div>
-    )
-  
-
-
+        </div>
+    );
 }

From 3414492265f3304a9efbfa987babd6e3e778d4e3 Mon Sep 17 00:00:00 2001
From: Thomas Hammon <hammonthomas@gmail.com>
Date: Tue, 1 Oct 2024 18:32:55 -0500
Subject: [PATCH 6/6] added variable to local storage to prevent rerenders upon
 browser refresh

---
 src/components/Banner/banner.jsx | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/Banner/banner.jsx b/src/components/Banner/banner.jsx
index f903b18..9dfebdf 100644
--- a/src/components/Banner/banner.jsx
+++ b/src/components/Banner/banner.jsx
@@ -1,12 +1,24 @@
+import { useEffect, useState } from 'react';
 import styles from './banner.module.scss';
-import { useState } from 'react';
 
 export function Banner() {
-    const [displayBanner, setDisplayBanner] = useState(true);
+    const [displayBanner, setDisplayBanner] = useState(null);
 
-    function toggleBanner() {
-        setDisplayBanner((prevState) => !prevState);
-    }
+    useEffect(() => {
+        const stateCondition = localStorage.getItem('displayBanner');
+        console.log('localStorage = ' + localStorage.getItem('displayBanner'));
+        if (stateCondition === 'false') {
+            setDisplayBanner(false);
+        } else {
+            setDisplayBanner(true);
+        }
+        console.log('stateCondition =' + stateCondition);
+    }, []);
+
+    const hideBanner = () => {
+        localStorage.setItem('displayBanner', 'false');
+        setDisplayBanner(false);
+    };
 
     const display = displayBanner ? styles.banner : styles.hidden;
 
@@ -23,7 +35,7 @@ export function Banner() {
                 <a href="https://www.methodconf.com/2024/" target="_blank" className={styles.anchor}>
                     <button className={styles.button}>BUY TICKETS</button>
                 </a>
-                <button className={styles.exitButton} onClick={toggleBanner}>
+                <button className={styles.exitButton} onClick={hideBanner}>
                     {/* eslint-disable */}
                         <img src="/images/icons/exit-cross.png" className={styles.exit} alt="close banner" />
                         {/* eslint-enable */}