[CANCELLED], make a button for display the history of pomodoros and rests

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;

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"}
+{"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"}

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

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);
+        }
+    }
+
+    
+}

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;

src/components/Header.jsx

@@ -1,6 +1,8 @@
-import React from 'react'
+import React, {useState} from 'react'
+import HeaderButton from './HeaderButton'
 
 const Header = () => {
+    //<HeaderButton/>
     return (
         <header className="header-main-page">
             <h1>Pomodoro Timer</h1>