Added hide to style selector and more modularizated the code

2025-10-12 23:52:30 +00:00 · 2021-09-19 00:41:18 -03:00
parent e8e826d7ff
commit 7d558fd54c
14 changed files with 321 additions and 128 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
        "react-dom": "^17.0.2",
        "react-router-dom": "^5.3.0",
        "react-scripts": "4.0.3",
+        "react-scroll": "^1.8.4",
        "web-vitals": "^1.1.2"
      }
    },
@@ -13284,6 +13285,11 @@
        "lodash._reinterpolate": "^3.0.0"
      }
    },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
    "node_modules/lodash.truncate": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -16789,6 +16795,19 @@
        "semver": "bin/semver"
      }
    },
+    "node_modules/react-scroll": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.4.tgz",
+      "integrity": "sha512-J9rFqmdzularCXJoK2vleHVg2//y9Fs6zh7K13x7Yz3Y1kHPfQ/TTq029L09q1Gr5/5JjFLBOB2Sa3yYIqyTyQ==",
+      "dependencies": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^15.5.4 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0"
+      }
+    },
    "node_modules/read-pkg": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -31882,6 +31901,11 @@
        "lodash._reinterpolate": "^3.0.0"
      }
    },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
    "lodash.truncate": {
      "version": "4.4.2",
      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
@@ -34669,6 +34693,15 @@
        }
      }
    },
+    "react-scroll": {
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.4.tgz",
+      "integrity": "sha512-J9rFqmdzularCXJoK2vleHVg2//y9Fs6zh7K13x7Yz3Y1kHPfQ/TTq029L09q1Gr5/5JjFLBOB2Sa3yYIqyTyQ==",
+      "requires": {
+        "lodash.throttle": "^4.1.1",
+        "prop-types": "^15.7.2"
+      }
+    },
    "read-pkg": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "react-scripts": "4.0.3",
+    "react-scroll": "^1.8.4",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
--- a/public/css_styles/styles.css
+++ b/public/css_styles/styles.css
@@ -134,49 +134,51 @@
  padding-bottom: 12vh;
  position: absolute;
  top: 29vh;
-  left: 77vw;
+  left: 75vw;
  box-shadow: 1px 6px 15px #00000020;
  z-index: 50;
+  transition: 0.2s ease-in-out;
 }
 .style-selector h2 {
  font-family: "Rambla", sans-serif;
  color: #1FAB89;
  font-size: 30pt;
  text-align: center;
+  margin-left: -3vw;
  margin-top: 1vh;
  margin-bottom: 3vh;
 }
-.style-selector .style-container {
+.style-selector .style-selection-container .style-container {
  display: flex;
  height: 10vh;
  align-items: center;
 }
-.style-selector .style-container label {
+.style-selector .style-selection-container .style-container label {
  display: flex;
  flex-direction: column;
  justify-content: center;
 }
-.style-selector .style-container label .title {
+.style-selector .style-selection-container .style-container label .title {
  font-family: "Rambla", sans-serif;
  font-size: 13pt;
 }
-.style-selector .style-container label .times {
+.style-selector .style-selection-container .style-container label .times {
  font-family: "Rambla", sans-serif;
  color: #1FAB89;
  font-size: 13pt;
 }
-.style-selector input {
+.style-selector .style-selection-container input {
  width: 65px;
  opacity: 0;
 }
-.style-selector .checkbox__input {
+.style-selector .style-selection-container .checkbox__input {
  display: grid;
  grid-template-areas: "checkbox";
 }
-.style-selector .checkbox__input > * {
+.style-selector .style-selection-container .checkbox__input > * {
  grid-area: checkbox;
 }
-.style-selector .checkbox_control {
+.style-selector .style-selection-container .checkbox_control {
  display: inline-grid;
  width: 45px;
  height: 45px;
@@ -185,15 +187,24 @@
  border-radius: 100%;
  transition: ease-in-out 0.2s;
 }
-.style-selector .checkbox__input input:checked + .checkbox_control {
+.style-selector .style-selection-container .checkbox__input input:checked + .checkbox_control {
  background-color: #9DF3C4;
 }

+.style-selector-show {
+  opacity: 100%;
+}
+
+.style-selector-hidden {
+  opacity: 0%;
+}
+
 .go-down {
  height: 7vh;
-  width: 100vw;
+  width: 100%;
  display: flex;
  justify-content: center;
+  cursor: pointer;
 }
 .go-down svg {
  height: 6vh;
@@ -202,6 +213,50 @@
  fill: #aaaaaa;
 }

+#about-this {
+  height: 95vh;
+  padding: 0px 3vw;
+  padding-top: 5vh;
+}
+#about-this .titles {
+  display: flex;
+}
+#about-this .titles h3 {
+  width: 50%;
+  font-family: "Raleway", sans-serif;
+  font-weight: 700;
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  font-size: 22pt;
+}
+#about-this .titles h3 .line-through {
+  text-decoration: line-through;
+  text-decoration-thickness: 5px;
+  text-decoration-color: #73b7ff;
+}
+#about-this .information {
+  display: flex;
+}
+#about-this .information ul {
+  width: 50%;
+}
+#about-this .information ul li h4 {
+  margin: 0;
+  padding: 0;
+  user-select: none;
+  font-family: "Rambla", sans-serif;
+  font-size: 18pt;
+}
+#about-this .information ul li p {
+  margin: 0;
+  padding: 0;
+  font-family: "Rambla", sans-serif;
+  font-size: 13pt;
+  margin-left: 2vw;
+  margin-top: 1vh;
+}
+
 html, body {
  margin: 0;
  padding: 0;
--- a/public/css_styles/styles.css.map
+++ b/public/css_styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss"],"names":[],"mappings":"AACA;EACI,kBC4BS;ED1BT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFaO;;AEVX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFHG;;AEMP;EACI;EFpBR;EACA;EEuBQ,OFXG;EEaH;EACA;;AAIR;EF1BA;EACA;EACA;EAtBA;EACA;EEiDI;EACA;EACA;EAEA,YF1BO;EE2BP;EAEA;EACA;;;AC7DR;EAEI;EACA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;;AAGA;EHRA;EGUI,OHaO;EGZP;EACA;EAEA;EACA;;AAKJ;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEA;EH9BR;EGgCY;;AAGJ;EHnCR;EGqCY,OHdD;EGeC;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBHlDM;;;AIhCd;EACI;EACA;EAEA;EACA;;AAEA;EACI;;AACA;EACI;;;AJ+BZ;EACI;EACA;;;AAGJ;EACI;EACA,kBApBe","file":"styles.css"}
+{"version":3,"sourceRoot":"","sources":["../sass_styles/_header.scss","../sass_styles/styles.scss","../sass_styles/_banner-login.scss","../sass_styles/_mainPomodoro.scss","../sass_styles/_styleSelector.scss","../sass_styles/_goDownArrow.scss","../sass_styles/_aboutThis.scss"],"names":[],"mappings":"AACA;EACI,kBC4BS;ED1BT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;ECXJ;EACA;EAQA;EACA;EACA;;ADKA;EACI;EAEA;ECnBJ;EACA;EAQA;EACA;EACA;;ADYI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AE5CpB;EACI;EACA;EDMA;ECFA;EACA;EACA;EAEA;EAEA;;AAGA;EDGA;EACA;;ACAA;EAEI;EAEA;EACA;;AAEA;EDHJ;EACA;EACA;ECIQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;;AC5CZ;EAEI;EACA;EACA;EACA;EAEA;;AAEA;EAEI;EACA;EFJJ;EEOI;EACA;EAEA,OFaO;;AEVX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFHG;;AEMP;EACI;EFpBR;EACA;EEuBQ,OFXG;EEaH;EACA;;AAIR;EF1BA;EACA;EACA;EAtBA;EACA;EEiDI;EACA;EACA;EAEA,YF1BO;EE2BP;EAEA;EACA;;;AC7DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHaO;EGZP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHpBL;EGqBK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBHxDE;;;AGiEN;EACI;;;AAGJ;EACI;;;ACtGZ;EACI;EACA;EAEA;EACA;EAEA;;AAEA;EACI;;AACA;EACI;;;ACZZ;EACI;EAEA;EACA;;AAEA;EAEI;;AAEA;EACI;ELRR;EACA;EAQA;EACA;EACA;EKEQ;;AAEA;EACI;EACA;EACA;;AAKZ;EAEI;;AAEA;EACI;;AAGI;ELtBZ;EACA;EACA;EANA;EK6BgB;;AAGJ;ELtBZ;EACA;EAXA;EKmCgB;EACA;EACA;;;ALHpB;EACI;EACA;;;AAGJ;EACI;EACA,kBArBe","file":"styles.css"}
--- a/public/sass_styles/_aboutThis.scss
+++ b/public/sass_styles/_aboutThis.scss
@@ -0,0 +1,51 @@
+#about-this {
+    height: 95vh;
+
+    padding: 0px 3vw;
+    padding-top: 5vh;
+
+    .titles {
+        
+        display: flex;
+
+        h3 {
+            width: 50%;
+
+            @include titleFont;
+            @include normalizeTitle;
+
+            font-size: 22pt;
+
+            .line-through {
+                text-decoration: line-through;
+                text-decoration-thickness: 5px;
+                text-decoration-color: #73b7ff; 
+            }
+        }
+    }
+
+    .information {
+
+        display: flex;
+
+        ul {
+            width: 50%;
+
+            li {
+                h4 {
+                    @include normalizeTitle;
+                    @include bodyFont;
+                    font-size: 18pt;
+                }
+
+                p {
+                    @include normalizeBody;
+                    @include bodyFont;
+                    font-size: 13pt;
+                    margin-left: 2vw;
+                    margin-top: 1vh;
+                }
+            }
+        }
+    }
+}
--- a/public/sass_styles/_goDownArrow.scss
+++ b/public/sass_styles/_goDownArrow.scss
@@ -1,9 +1,11 @@
 .go-down {
    height: 7vh;
-    width: 100vw;
+    width: 100%;
    
    display: flex;
    justify-content: center;
+
+    cursor: pointer;
    
    svg {
        height: 6vh;
--- a/public/sass_styles/_styleSelector.scss
+++ b/public/sass_styles/_styleSelector.scss
@@ -1,87 +1,104 @@
 .style-selector{

    width: calc(20vw - 1px);
+    
    padding-left: 3vw;
    padding-bottom: 12vh;
    
    position: absolute;
-
+    
    top: 29vh;
-    left: 77vw;
-
+    left: 75vw;
+    
    box-shadow: 1px 6px 15px #00000020;

    z-index: 50;

-
    h2 {
        @include bodyFont;
        color: $second-color;
        font-size: 30pt;
        text-align: center;

+        margin-left: -3vw;
+        
+
+        
        margin-top: 1vh;
        margin-bottom: 3vh;
    }

-    
-    
-    .style-container{
-        display: flex;
-        height: 10vh;
-        align-items: center;
+    .style-selection-container {
        
-        label {
+        
+        .style-container{
            display: flex;
-            flex-direction: column;
-            justify-content: center;
+            height: 10vh;

-            .title {
-                @include bodyFont;
-                font-size: 13pt;
-            }
+            align-items: center;
            
-            .times {
-                @include bodyFont;
-                color: $second-color;
-                font-size: 13pt;
+            label {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;

+                .title {
+                    @include bodyFont;
+                    font-size: 13pt;
+                }
+                
+                .times {
+                    @include bodyFont;
+                    color: $second-color;
+                    font-size: 13pt;
+
+                }
            }
        }
-    }
-    
-    input {
-        width: 65px;
-        opacity: 0;
-    }
-    
-    .checkbox__input {
-        display: grid;
-        grid-template-areas: "checkbox";
-    
-        > * {
-            grid-area: checkbox;
+        
+        input {
+            width: 65px;
+            opacity: 0;
        }
-    }
-    
-    
-    .checkbox_control {
-        display: inline-grid;
        
-        width: 45px;
-        height: 45px;
-    
-        border: 3px solid $main-color;
-        border-radius: 0.25em;
-        border-radius: 100%;
+        .checkbox__input {
+            display: grid;
+            grid-template-areas: "checkbox";
+        
+            > * {
+                grid-area: checkbox;
+            }
+        }
+        
+        
+        .checkbox_control {
+            display: inline-grid;
+            
+            width: 45px;
+            height: 45px;
+        
+            border: 3px solid $main-color;
+            border-radius: 0.25em;
+            border-radius: 100%;

-        transition: ease-in-out 0.2s ;
-    }
-    
-    .checkbox__input input:checked + .checkbox_control {
+            transition: ease-in-out 0.2s ;
+        }
        
-        background-color: $light-color;
+        .checkbox__input input:checked + .checkbox_control {
+            
+            background-color: $light-color;
+        }
+
+        // CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
    }

-    // CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/
-}
+    transition: 0.2s ease-in-out;
+}
+
+        .style-selector-show {
+            opacity: 100%;
+        }
+
+        .style-selector-hidden {
+            opacity: 0%;
+        }
--- a/public/sass_styles/styles.scss
+++ b/public/sass_styles/styles.scss
@@ -38,6 +38,7 @@ $lightest-color: #D7FBE8;
@import 'mainPomodoro';
@import 'styleSelector';
@import 'goDownArrow';
+@import 'aboutThis';

 html, body { 
    margin: 0;
--- a/src/App.js
+++ b/src/App.js
@@ -1,8 +1,8 @@
+import AboutThis from "./components/AboutThis";
 import BannerLogin from "./components/BannerLogin";
 import GoDownArrow from "./components/GoDownArrow";
 import Header from "./components/Header";
 import MainPomodoro from "./components/MainPomodoro";
-import StyleSelector from "./components/StyleSelector";

 function App() {
  return (
@@ -10,8 +10,8 @@ function App() {
      <Header />
      <BannerLogin />
      <MainPomodoro />
-      <StyleSelector />
      <GoDownArrow />
+      <AboutThis />
    </>
  );
 }
--- a/src/components/AboutThis.jsx
+++ b/src/components/AboutThis.jsx
@@ -0,0 +1,36 @@
+import React from 'react'
+
+const AboutThis = () => {
+    return (
+        <div id="about-this">
+            <div className="titles">
+                <h3>About<span className="line-through"> us </span>this</h3>
+                <h3>Credits</h3>
+            </div>
+            <div className="information">
+                <ul>
+                    <li>
+                        <h4>
+                            Why did you make this application?
+                        </h4>
+                        <p>
+                            Because I wanted a pomodoro function that syncs with Clockify, which is a service that I use a lot to track my work.
+                        </p>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <h4>
+                            Credit 1
+                        </h4>
+                        <p>
+                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure suscipit totam magni, maiores facere quisquam est sapiente eligendi saepe repellendus quam blanditiis magnam ipsa doloribus facilis. Expedita eos corrupti dolor!
+                        </p>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default AboutThis
--- a/src/components/GoDownArrow.jsx
+++ b/src/components/GoDownArrow.jsx
@@ -1,9 +1,10 @@
 import React from 'react'
+import { Link, animateScroll as scroll } from "react-scroll";

 const GoDownArrow = () => {
    return (
        <div className="go-down">
-            <a href="#"><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></a>
+            <Link to="about-this" smooth={true}><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></Link>
        </div>
    )
 }
--- a/src/components/MainPomodoro.jsx
+++ b/src/components/MainPomodoro.jsx
@@ -1,4 +1,5 @@
 import React, {useState} from 'react'
+import StyleSelector from './StyleSelector'

 const MainPomodoro = () => {

@@ -6,26 +7,39 @@ const MainPomodoro = () => {
    const [seconds, setSeconds] = useState('60')

    const [style, setStyle] = useState('Regular')
+    const [displayHidden, setDisplayHidden] = useState(true)
+
+    const showStyles = () => {
+        console.log('Styles Deployed')
+
+        setDisplayHidden(!displayHidden)
+    }

    return (
-        <div className="main-pomodoro">
-            <div className="timer">
-                <div className="minutes">{minutes}</div>
-                <div className="separator">:</div>
-                <div className="seconds">{seconds}</div>
+        <>
+            <div className="main-pomodoro">
+                <div className="timer">
+                    <div className="minutes">{minutes}</div>
+                    <div className="separator">:</div>
+                    <div className="seconds">{seconds}</div>
+                </div>
+
+                <div className="style-display">
+                    <h4>
+                        Style
+                    </h4>
+                    <h3 onClick={showStyles}>
+                        {style}
+                    </h3>
+                </div>
+
+                <button class="start-pomodoro">START</button>
            </div>

-            <div className="style-display">
-                <h4>
-                    Style
-                </h4>
-                <h3>
-                    {style}
-                </h3>
-            </div>
+            <StyleSelector displayHidden={displayHidden}/>
+        </>
+        

-            <button class="start-pomodoro">START</button>
-        </div>
    )
 }

--- a/src/components/StyleSelectionChildren.jsx
+++ b/src/components/StyleSelectionChildren.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+
+const StyleSelectionChildren = (props) => {
+    return (
+        <div className="style-container">
+            <span class="checkbox__input">
+                <input id={`input-${props.number}`} type="checkbox"></input>
+                <span className="checkbox_control"></span>
+            </span>
+            <label for={`input-${props.number}`}>
+                <span className="title">{props.title}</span>
+                <span className="times">{props.times}</span>
+            </label>
+        </div>
+    )
+}
+
+export default StyleSelectionChildren
--- a/src/components/StyleSelector.jsx
+++ b/src/components/StyleSelector.jsx
@@ -1,52 +1,16 @@
 import React from 'react'
+import StyleSelectionChildren from './StyleSelectionChildren'

-const StyleSelector = () => {
+const StyleSelector = (props) => {
    return (
-        <div className="style-selector">
+        <div className={`style-selector ${props.displayHidden ? 'style-selector-hidden': 'style-selector-show'}`} >
            <h2>Select Style</h2>
-
-            <div className="style-container">
-                <span class="checkbox__input">
-                    <input id="input-1" type="checkbox"></input>
-                    <span className="checkbox_control"></span>
-                </span>
-                <label for="input-1">
-                    <span className="title">Title</span>
-                    <span className="times">Times|Times</span>
-                </label>
-            </div>
-
-            <div className="style-container">
-                <span class="checkbox__input">
-                    <input id="input-2" type="checkbox"></input>
-                    <span className="checkbox_control"></span>
-                </span>
-                <label for="input-2">
-                    <span className="title">Title</span>
-                    <span className="times">Times|Times</span>
-                </label>
-            </div>
-
-            <div className="style-container">
-                <span class="checkbox__input">
-                    <input id="input-3" type="checkbox"></input>
-                    <span className="checkbox_control"></span>
-                </span>
-                <label for="input-3">
-                    <span className="title">Title</span>
-                    <span className="times">Times|Times</span>
-                </label>
-            </div>
-
-            <div className="style-container">
-                <span class="checkbox__input">
-                    <input id="input-4" type="checkbox"></input>
-                    <span className="checkbox_control"></span>
-                </span>
-                <label for="input-4">
-                    <span className="title">Title</span>
-                    <span className="times">Times|Times</span>
-                </label>
+        
+            <div className="style-selection-container">
+                <StyleSelectionChildren number={1} title={"Title 1"} times={"Times|Times"}/>
+                <StyleSelectionChildren number={2} title={"Title 2"} times={"Times|Times"}/>
+                <StyleSelectionChildren number={3} title={"Title 3"} times={"Times|Times"}/>
+                <StyleSelectionChildren number={4} title={"Title 4"} times={"Times|Times"}/>
            </div>
        </div>
    )