diff --git a/public/css_styles/styles.css b/public/css_styles/styles.css index 3ea0f06..9db1a42 100644 --- a/public/css_styles/styles.css +++ b/public/css_styles/styles.css @@ -204,10 +204,11 @@ width: 100%; display: flex; justify-content: center; - cursor: pointer; } .go-down svg { height: 6vh; + width: 6vh; + cursor: pointer; } .go-down svg path { fill: #aaaaaa; @@ -257,6 +258,44 @@ margin-top: 1vh; } +.history-button { + background: none; + border: none; + width: 8vw; + height: 9vh; + width: 9vh; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 6vh; + border-radius: 100%; + background-color: #9DF3C4; +} +.history-button svg { + cursor: pointer; + width: 6vh; + height: 6vh; +} +.history-button svg path { + fill: #aaaaaa; +} +.history-button svg path { + fill: rgba(80, 80, 80, 0.556); +} +.history-button:hover { + animation: spin 0.4s ease-in-out; +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + html, body { margin: 0; padding: 0; diff --git a/public/css_styles/styles.css.map b/public/css_styles/styles.css.map index cbd93e2..96d6e8b 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","../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 +{"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","../sass_styles/_historyButton.scss"],"names":[],"mappings":"AACA;EACI,kBCqCS;EDnCT;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,OFsBO;;AEnBX;EAEI;EACA;EACA;EFjBJ;;AEqBI;EACI;EFZR;EACA;EEeQ,OFMG;;AEHP;EACI;EFpBR;EACA;EEuBQ,OFFG;EEIH;EACA;;AAIR;EF1BA;EACA;EACA;EAtBA;EACA;EEiDI;EACA;EACA;EAEA,YFjBO;EEkBP;EAEA;EACA;;;AC7DR;EAEI;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAgFA;;AA9EA;EHRA;EGUI,OHsBO;EGrBP;EACA;EAEA;EAIA;EACA;;AAMA;EACI;EACA;EAEA;;AAEA;EACI;EACA;EACA;;AAEA;EHpCZ;EGsCgB;;AAGJ;EHzCZ;EG2CgB,OHXL;EGYK;;AAMZ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAKR;EACI;EAEA;EACA;EAEA;EACA;EACA;EAEA;;AAGJ;EAEI,kBH/CE;;;AGwDN;EACI;;;AAGJ;EACI;;;ACtGZ;EACI;EACA;EAEA;EACA;;AAGA;EACI;EACA;EAEA;;AAEA;EACI;;;ACfZ;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;;;AC7CpB;ENuBI;EACA;EACA;EMtBA;EACA;EAEA;EAEA;EACA;EACA;EAEA;EACA;EAEA;EAEA,kBNwBU;;AMtBV;ENUA;EMHI;EACA;;ANIJ;EACI;;AMVA;EACI;;AAQR;EACI;;AAIJ;EACI;IACI;;EAIJ;IACI;;;;ANSZ;EACI;EACA;;;AAGJ;EACI;EACA,kBAtBe","file":"styles.css"} \ No newline at end of file diff --git a/public/img/clock.svg b/public/img/clock.svg new file mode 100644 index 0000000..d78c314 --- /dev/null +++ b/public/img/clock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/sass_styles/_goDownArrow.scss b/public/sass_styles/_goDownArrow.scss index b18f540..bcdb09b 100644 --- a/public/sass_styles/_goDownArrow.scss +++ b/public/sass_styles/_goDownArrow.scss @@ -5,10 +5,13 @@ display: flex; justify-content: center; - cursor: pointer; svg { height: 6vh; + width: 6vh; + + cursor: pointer; + path { fill: rgb(170, 170, 170); // CREDITS TO https://stackoverflow.com/a/49627345 diff --git a/public/sass_styles/_historyButton.scss b/public/sass_styles/_historyButton.scss new file mode 100644 index 0000000..9ba8a72 --- /dev/null +++ b/public/sass_styles/_historyButton.scss @@ -0,0 +1,49 @@ +.history-button { + @include normalizeButton; + + height: 9vh; + width: 9vh; + + padding: 0; + + display: flex; + justify-content: center; + align-items: center; + + position: absolute; + left: 6vh; + + border-radius: 100%; + + background-color: $light-color; + + svg { + @include svgStyle; + + path { + fill: rgba(80, 80, 80, 0.556); + } + + width: 6vh; + height: 6vh; + + } + + &:hover { + animation: spin 0.4s ease-in-out; + +} + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + + + 100% { + transform: rotate(360deg); + } + } + + +} \ No newline at end of file diff --git a/public/sass_styles/styles.scss b/public/sass_styles/styles.scss index 53ef802..e83fc3f 100644 --- a/public/sass_styles/styles.scss +++ b/public/sass_styles/styles.scss @@ -26,6 +26,15 @@ width: 8vw; } +@mixin svgStyle { + cursor: pointer; + + path { + fill: rgb(170, 170, 170); + // CREDITS TO https://stackoverflow.com/a/49627345 + } +} + $background-color: #ffffff; $main-color: #62D2A2; @@ -39,6 +48,7 @@ $lightest-color: #D7FBE8; @import 'styleSelector'; @import 'goDownArrow'; @import 'aboutThis'; +@import 'historyButton'; html, body { margin: 0; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index b4b15ea..3930f7b 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -1,6 +1,8 @@ -import React from 'react' +import React, {useState} from 'react' +import HeaderButton from './HeaderButton' const Header = () => { + // return (

Pomodoro Timer

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