diff --git a/package-lock.json b/package-lock.json index 13f3f19..19672d5 100644 --- 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", diff --git a/package.json b/package.json index 09a48a5..0689256 100644 --- 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": { diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index fc50cfd..3ea0f06 100644 --- 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; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index 56e25ed..cbd93e2 100644 --- 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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/public/sass_styles/_aboutThis.scss b/public/sass_styles/_aboutThis.scss new file mode 100644 index 0000000..0420766 --- /dev/null +++ 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; + } + } + } + } +} \ No newline at end of file diff --git a/public/sass_styles/_goDownArrow.scss b/public/sass_styles/_goDownArrow.scss index fd6d0aa..b18f540 100644 --- 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; diff --git a/public/sass_styles/_styleSelector.scss b/public/sass_styles/_styleSelector.scss index 2627c6f..bb71d2f 100644 --- 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/ -} \ No newline at end of file + transition: 0.2s ease-in-out; +} + + .style-selector-show { + opacity: 100%; + } + + .style-selector-hidden { + opacity: 0%; + } \ No newline at end of file diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss index 54f2bcd..53ef802 100644 --- 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; diff --git a/src/App.js b/src/App.js index a1c054f..83cddd9 100644 --- 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() {
- + ); } diff --git a/src/components/AboutThis.jsx b/src/components/AboutThis.jsx new file mode 100644 index 0000000..a9f2a05 --- /dev/null +++ b/src/components/AboutThis.jsx @@ -0,0 +1,36 @@ +import React from 'react' + +const AboutThis = () => { + return ( +
+
+

About us this

+

Credits

+
+
+
    +
  • +

    + Why did you make this application? +

    +

    + Because I wanted a pomodoro function that syncs with Clockify, which is a service that I use a lot to track my work. +

    +
    • +
+
    +
  • +

    + Credit 1 +

    +

    + 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! +

    +
    • +
+
+
+ ) +} + +export default AboutThis diff --git a/src/components/GoDownArrow.jsx b/src/components/GoDownArrow.jsx index 55fece4..ace1c94 100644 --- 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 (
- +
) } diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx index ab77ce5..eb08a79 100644 --- 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 ( -
-
-
{minutes}
-
:
-
{seconds}
+ <> +
+
+
{minutes}
+
:
+
{seconds}
+
+ +
+

+ Style +

+

+ {style} +

+
+ +
-
-

- Style -

-

- {style} -

-
+ + + - -
) } diff --git a/src/components/StyleSelectionChildren.jsx b/src/components/StyleSelectionChildren.jsx new file mode 100644 index 0000000..e78645c --- /dev/null +++ b/src/components/StyleSelectionChildren.jsx @@ -0,0 +1,18 @@ +import React from 'react' + +const StyleSelectionChildren = (props) => { + return ( +
+ + + + + +
+ ) +} + +export default StyleSelectionChildren diff --git a/src/components/StyleSelector.jsx b/src/components/StyleSelector.jsx index d176b70..631ae4a 100644 --- 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 ( -
+

Select Style

- -
- - - - - -
- -
- - - - - -
- -
- - - - - -
- -
- - - - - + +
+ + + +
)