diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 43a2bf8..fc50cfd 100644 --- a/public/css_styles/styles.css +++ b/public/css_styles/styles.css @@ -1,12 +1,3 @@ -html, body { - margin: 0; - padding: 0; -} - -body { - height: 100%; -} - .header-main-page { background-color: #62D2A2; display: flex; @@ -19,6 +10,7 @@ body { color: #ffffff; font-size: 7vh; font-family: "Raleway", sans-serif; + font-weight: 700; margin: 0; padding: 0; user-select: none; @@ -27,6 +19,7 @@ body { color: rgba(255, 255, 255, 0.75); font-size: 2vh; font-family: "Raleway", sans-serif; + font-weight: 700; margin: 0; padding: 0; user-select: none; @@ -85,4 +78,138 @@ body { border-radius: 24px; } +.main-pomodoro { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 68vh; +} +.main-pomodoro .timer { + display: flex; + justify-content: center; + font-family: "Rambla", sans-serif; + font-weight: bold; + font-size: 130pt; + color: #1FAB89; +} +.main-pomodoro .style-display { + display: flex; + align-items: center; + flex-direction: column; + font-family: "Rambla", sans-serif; +} +.main-pomodoro .style-display h4 { + font-size: 24pt; + margin: 0; + padding: 0; + color: #1FAB89; +} +.main-pomodoro .style-display h3 { + font-size: 30pt; + margin: 0; + padding: 0; + color: #1FAB89; + cursor: pointer; + user-select: none; +} +.main-pomodoro .start-pomodoro { + background: none; + border: none; + width: 8vw; + font-family: "Raleway", sans-serif; + font-weight: 700; + margin-top: 6vh; + width: 30vw; + height: 8vh; + background: #1FAB89; + border-radius: 24px; + font-size: 5vh; + color: white; +} + +.style-selector { + width: calc(20vw - 1px); + padding-left: 3vw; + padding-bottom: 12vh; + position: absolute; + top: 29vh; + left: 77vw; + box-shadow: 1px 6px 15px #00000020; + z-index: 50; +} +.style-selector h2 { + font-family: "Rambla", sans-serif; + color: #1FAB89; + font-size: 30pt; + text-align: center; + margin-top: 1vh; + margin-bottom: 3vh; +} +.style-selector .style-container { + display: flex; + height: 10vh; + align-items: center; +} +.style-selector .style-container label { + display: flex; + flex-direction: column; + justify-content: center; +} +.style-selector .style-container label .title { + font-family: "Rambla", sans-serif; + font-size: 13pt; +} +.style-selector .style-container label .times { + font-family: "Rambla", sans-serif; + color: #1FAB89; + font-size: 13pt; +} +.style-selector input { + width: 65px; + opacity: 0; +} +.style-selector .checkbox__input { + display: grid; + grid-template-areas: "checkbox"; +} +.style-selector .checkbox__input > * { + grid-area: checkbox; +} +.style-selector .checkbox_control { + display: inline-grid; + width: 45px; + height: 45px; + border: 3px solid #62D2A2; + border-radius: 0.25em; + border-radius: 100%; + transition: ease-in-out 0.2s; +} +.style-selector .checkbox__input input:checked + .checkbox_control { + background-color: #9DF3C4; +} + +.go-down { + height: 7vh; + width: 100vw; + display: flex; + justify-content: center; +} +.go-down svg { + height: 6vh; +} +.go-down svg path { + fill: #aaaaaa; +} + +html, body { + margin: 0; + padding: 0; +} + +body { + height: 100%; + background-color: #ffffff; +} + /*# sourceMappingURL=styles.css.map */ diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index 95292af..56e25ed 100644 --- a/public/css_styles/styles.css.map +++ b/public/css_styles/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass_styles/styles.scss","../sass_styles/_header.scss","../sass_styles/_banner-login.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;;;ACLJ;EACI,kBDgCS;EC9BT;EACA;EACA;EACA;EAEA;;AAEA;EACI;EAEA;EDJJ;EAQA;EACA;EACA;;ACDA;EACI;EAEA;EDZJ;EAQA;EACA;EACA;;ACMI;EACI;;AAGA;AAAA;AAAA;AAAA;AAAA;EAKI;EACA;EACA;;AAKA;EACI;EACA;;;AC5CpB;EACI;EACA;EFYA;EERA;EACA;EACA;EAEA;EAEA;;AAGA;EFSA;EACA;;AENA;EAEI;EAEA;EACA;;AAEA;EFGJ;EACA;EACA;EEFQ;EACA;EACA;EAEA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA","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"],"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 diff --git a/public/img/down-arrow.svg b/public/img/down-arrow.svg new file mode 100644 index 0000000..54f4e4e --- /dev/null +++ b/public/img/down-arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/sass_styles/_goDownArrow.scss b/public/sass_styles/_goDownArrow.scss new file mode 100644 index 0000000..fd6d0aa --- /dev/null +++ b/public/sass_styles/_goDownArrow.scss @@ -0,0 +1,15 @@ +.go-down { + height: 7vh; + width: 100vw; + + display: flex; + justify-content: center; + + svg { + height: 6vh; + path { + fill: rgb(170, 170, 170); + // CREDITS TO https://stackoverflow.com/a/49627345 + } + } +} \ No newline at end of file diff --git a/public/sass_styles/_mainPomodoro.scss b/public/sass_styles/_mainPomodoro.scss new file mode 100644 index 0000000..2e872f7 --- /dev/null +++ b/public/sass_styles/_mainPomodoro.scss @@ -0,0 +1,64 @@ +.main-pomodoro { + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + height: 68vh; + + .timer { + + display: flex; + justify-content: center; + + @include bodyFont; + font-weight: bold; + font-size: 130pt; + + color: $second-color; + } + + .style-display { + + display: flex; + align-items: center; + flex-direction: column; + + @include bodyFont; + + h4 { + font-size: 24pt; + + @include normalizeBody; + + color: $second-color; + } + + h3 { + font-size: 30pt; + + @include normalizeBody; + + color: $second-color; + + cursor: pointer; + user-select: none; + } + } + + .start-pomodoro { + @include normalizeButton; + @include titleFont; + + margin-top: 6vh; + width: 30vw; + height: 8vh; + + background: $second-color; + border-radius: 24px; + + font-size: 5vh; + color: white; + } +} \ No newline at end of file diff --git a/public/sass_styles/_styleSelector.scss b/public/sass_styles/_styleSelector.scss new file mode 100644 index 0000000..2627c6f --- /dev/null +++ b/public/sass_styles/_styleSelector.scss @@ -0,0 +1,87 @@ +.style-selector{ + + width: calc(20vw - 1px); + padding-left: 3vw; + padding-bottom: 12vh; + + position: absolute; + + top: 29vh; + left: 77vw; + + box-shadow: 1px 6px 15px #00000020; + + z-index: 50; + + + h2 { + @include bodyFont; + color: $second-color; + font-size: 30pt; + text-align: center; + + margin-top: 1vh; + margin-bottom: 3vh; + } + + + + .style-container{ + display: flex; + height: 10vh; + align-items: center; + + 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; + } + } + + + .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 { + + background-color: $light-color; + } + + // CREDITS TO https://moderncss.dev/pure-css-custom-checkbox-style/ +} \ No newline at end of file diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss index c9a7335..54f2bcd 100644 --- a/public/sass_styles/styles.scss +++ b/public/sass_styles/styles.scss @@ -1,14 +1,8 @@ -html, body { - margin: 0; - padding: 0; -} -body { - height: 100%; -} @mixin titleFont { font-family: 'Raleway', sans-serif; + font-weight: 700; } @mixin bodyFont { @@ -32,10 +26,25 @@ body { width: 8vw; } +$background-color: #ffffff; + $main-color: #62D2A2; $second-color: #1FAB89; $light-color: #9DF3C4; $lightest-color: #D7FBE8; @import 'header'; -@import 'banner-login'; \ No newline at end of file +@import 'banner-login'; +@import 'mainPomodoro'; +@import 'styleSelector'; +@import 'goDownArrow'; + +html, body { + margin: 0; + padding: 0; +} + +body { + height: 100%; + background-color: $background-color; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index a8e9164..a1c054f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,8 @@ 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 ( @@ -8,6 +10,8 @@ function App() {
+ + ); } diff --git a/src/components/GoDownArrow.jsx b/src/components/GoDownArrow.jsx new file mode 100644 index 0000000..55fece4 --- /dev/null +++ b/src/components/GoDownArrow.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const GoDownArrow = () => { + return ( +
+ +
+ ) +} + +export default GoDownArrow diff --git a/src/components/MainPomodoro.jsx b/src/components/MainPomodoro.jsx index 55dd6dd..ab77ce5 100644 --- a/src/components/MainPomodoro.jsx +++ b/src/components/MainPomodoro.jsx @@ -1,9 +1,30 @@ -import React from 'react' +import React, {useState} from 'react' const MainPomodoro = () => { + + const [minutes, setMinutes] = useState('61') + const [seconds, setSeconds] = useState('60') + + const [style, setStyle] = useState('Regular') + return (
- +
+
{minutes}
+
:
+
{seconds}
+
+ +
+

+ Style +

+

+ {style} +

+
+ +
) } diff --git a/src/components/StyleSelector.jsx b/src/components/StyleSelector.jsx new file mode 100644 index 0000000..d176b70 --- /dev/null +++ b/src/components/StyleSelector.jsx @@ -0,0 +1,55 @@ +import React from 'react' + +const StyleSelector = () => { + return ( +
+

Select Style

+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+
+ ) +} + +export default StyleSelector