New looks 💅

public/css_styles/styles.css

@@ -2,9 +2,9 @@
   background-color: #62D2A2;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
   height: 17vh;
+  padding: 0vh 1vw;
   box-sizing: border-box;
 }
 .header-main-page a {
@@ -19,31 +19,6 @@
   padding: 0;
   user-select: none;
 }
-.header-main-page h3 {
-  color: rgba(255, 255, 255, 0.75);
-  font-size: 1vw;
-  font-family: "Raleway", sans-serif;
-  font-weight: 700;
-  margin: 0;
-  padding: 0;
-  user-select: none;
-}
-.header-main-page h3 .selectable {
-  user-select: all;
-}
-.header-main-page h3 .selectable a,
-.header-main-page h3 .selectable a:link,
-.header-main-page h3 .selectable a:visited,
-.header-main-page h3 .selectable a:hover,
-.header-main-page h3 .selectable a:active {
-  color: inherit;
-  text-decoration: inherit;
-  font-weight: inherit;
-}
-.header-main-page h3 .selectable a::selection {
-  background-color: #ffe83d;
-  color: #000000;
-}
 .header-main-page .konami-code {
   font-family: "Raleway", sans-serif;
   font-weight: 700;
@@ -54,6 +29,7 @@
   .header-main-page {
     height: auto;
     padding: 3vw 0px;
+    align-items: center;
   }
   .header-main-page h1 {
     font-size: 26pt;
@@ -667,6 +643,7 @@ html, body {
 
 .dark-mode {
   position: absolute;
+  top: 1.7vh;
   left: calc(100% - 5vw);
 }
 .dark-mode #dark-mode_toogle-switch {
@@ -736,7 +713,7 @@ html, body {
 }
 
 .account-container {
-  height: 100%;
+  height: 69vh;
 }
 .account-container #message {
   padding-left: 5vw;
@@ -882,7 +859,8 @@ html, body {
   width: 3vw;
   height: 3vw;
   position: absolute;
-  left: 5vw;
+  top: 10.5vh;
+  left: 87vw;
   background-color: #1FAB89;
   display: flex;
   justify-content: center;
@@ -902,7 +880,8 @@ html, body {
   width: 7vw;
   height: 3vw;
   position: absolute;
-  left: 10vw;
+  top: 10.5vh;
+  left: 91vw;
   background-color: #1FAB89;
   display: flex;
   justify-content: center;

public/sass_styles/_account.scss

@@ -4,7 +4,7 @@ html, body {
 
 .account-container {
 
-    height: 100%;
+    height: 69vh; //xd
 
     #message {
         padding-left: 5vw;

public/sass_styles/_dark-mode_toogle-switch.scss

@@ -1,6 +1,8 @@
 .dark-mode {
 
     position: absolute;
+
+    top: 1.7vh;
     left: calc(100% - 5vw);
     
     #dark-mode_toogle-switch {

public/sass_styles/_goToAccount.scss

@@ -4,8 +4,9 @@
     height: 3vw;
 
     position: absolute;
-
+    
-    left: 5vw;
+    top: 10.5vh;
+    left: 87vw;
 
     background-color: $second-color;
 
@@ -33,7 +34,8 @@
 
     position: absolute;
 
-    left: 10vw;
+    top: 10.5vh;
+    left: 91vw;
 
     background-color: $second-color;
 

public/sass_styles/_header.scss

@@ -4,10 +4,12 @@
 
     display: flex;
     flex-direction: column;
-    align-items: center;
+    // align-items: center;
     justify-content: center;
 
     height: 17vh;
+    padding: 0vh 1vw;
+
     box-sizing: border-box;
 
     a {
@@ -21,38 +23,6 @@
         @include titleFont();
         @include normalizeTitle();
     }
-    
-    h3 {
-        color: rgba(255, 255, 255, 0.75);
-
-        font-size: 1vw;
-
-        @include titleFont();
-        @include normalizeTitle();
-
-        .selectable {
-            user-select: all;
-    
-    
-            a,
-            a:link,
-            a:visited,
-            a:hover,
-            a:active {
-                color: inherit;
-                text-decoration: inherit;
-                font-weight: inherit;
-    
-            }
-    
-            a {
-                &::selection {
-                    background-color:#ffe83d;
-                    color: #000000
-                }
-            }
-        }
-    }
 
     .konami-code {
         @include titleFont();
@@ -65,17 +35,20 @@
 
 
  @media (max-width: 991.98px) {
-     .header-main-page {
+    .header-main-page {
-        height: auto;
+    height: auto;
-        padding: 3vw 0px;
+    padding: 3vw 0px;
-        h1 {
-            font-size: 26pt;
-        }
 
-        h3 {
+    align-items: center;
-            font-size: 13pt;
+    
-        }
+    h1 {
-     }
+        font-size: 26pt;
+    }
+
+    h3 {
+        font-size: 13pt;
+    }
+    }
  }
 
  .header-main-page.dark-mode-component {

src/components/Header.jsx

@@ -6,8 +6,9 @@ const Header = (props) => {
 
     return (
         <header className={props.darkMode ? 'header-main-page dark-mode-component' : 'header-main-page'} >
-            <a href="/"><h1>Pomodoro Timer</h1></a>
+            <a href="/">
-            <h3>Made By <span className="selectable"><a target="_blank" href="https://porfolio-franp.netlify.app" rel="noreferrer">Francisco Pessano</a></span></h3>
+                <h1>Clockify Pomodoro Timer</h1>
+            </a>
             <DarkMode
                 darkMode={props.darkMode} 
                 setDarkmode={props.setDarkmode}
@@ -15,7 +16,7 @@ const Header = (props) => {
             <GoToAccount
                 signIn={props.signIn}
                 darkMode={props.darkMode} 
-                />
+            />
             <div className="konami-code">
                 {props.KonamiCodeActive ? 'Konami Code ON' : null}
             </div>