Some fixings. In style: 1) Improved visualitzation in desktop env 2) added media queries for wide desktop devices (up to 1800px) 3) Visualitzation of a link on the footer fixed. Typos: 1) Error on settings form.

Author: hectormoba

README.md

@@ -1,5 +1,24 @@
-## About this project
+# Flow app
 
 This is not a pomodoro app. We want to do a timer that follows a different approach. Be focus and just leave time flows.
 
-Of course, we will update this readme with some information while we're working on and pushing updates.
+## About this project
+
+This is a simple portfolio project. Don't use it in a production environment like it is.
+
+This app follows a [Frontend Mentor's design](https://www.frontendmentor.io/challenges/pomodoro-app-KBFnycJ6G) but with a different functionalities.
+
+## How it works
+
+Contrary to a pomodoro timer, in this timer we want you to work as much as you can. You won't have a shorty interval follow it of a much shorter interval of free time. You will be able to decide how much you want to work and you will had time for relaxing acordently.
+
+Some things that you would should know before use it:
+
+- You have a predifined intervals of time of 50min, 1.30h or 2.20h.
+- You can use a short breaks if you need it. But, be careful! You have a limited quantity of them and when you would had used, you won't be able to stop the clock until the time reaches the end.
+- You can choose how long the short breaks are. Between 1 to 5 minuts long. Rememeber: it's a short break!
+- When time reaches the end, we assign automatically 30% of this time as a free time.
+
+### Demo
+
+You can see this code running in [this site](https://tangerine-starlight-433510.netlify.app/).

components/footer/Footer.js

@@ -6,7 +6,7 @@ export default function Footer(){
     <footer className={styles.footer}>
      <div className={styles.options_wrapper}>
        <Link href="/settings">
-        <a>Settings</a>
+        <a className={styles.footer__link}>Settings</a>
        </Link>
        <p>Make it with Next.js</p>
      </div>

components/footer/footer.module.scss

@@ -12,3 +12,8 @@
   padding: $m-spacing 0;
   text-align: center;
 }
+
+.footer__link {
+  text-decoration: none;
+  color: $font-color;
+}

components/settingsForm/SettingForm.js

@@ -39,7 +39,7 @@ export default function SettingsFrom(props){
     totalTime = "1 hour and 30 minutes ";
     shortBrakeCount = "3";
   } else if (form.time === "130") {
-    totalTime = "1 hour and 30 minutes ";
+    totalTime = "2 hour and 10 minutes ";
     shortBrakeCount = "4";
   }
 

components/settingsForm/settingsForm.module.scss

@@ -3,6 +3,13 @@
   box-sizing: border-box;
   border-radius: 8px;
   background-color: $font-color;
+  @media (min-width: $desktop) {
+    padding: $m-spacing;
+    max-width: 45vw;
+  }
+  @media (min-width: $wide-desktop-width) {
+    max-width: 35vw;
+  }
 }
 
 .nav-bar {

components/timer/timer.module.scss

@@ -9,6 +9,10 @@
   justify-content: center;
   align-items: center;
   padding: $xl-spacing 0;
+  @media (min-width: $desktop) {
+    max-width: 90%;
+    padding: $xl-spacing $m-spacing;
+  }
 }
 
 .timer__svg {

styles/_variables.scss

@@ -9,6 +9,7 @@ $input-size: 30px;
 $mobile-width: 300px;
 $tablet-width: 600px;
 $desktop-width: 1140px;
+$wide-desktop-width: 1850px;
 
 /* width for screen size */
 

styles/main.scss

@@ -34,9 +34,16 @@
 
 .modal_main {
   color: $main-bg;
+  box-sizing: border-box;
   position: absolute;
   z-index: 1;
   padding: 20px;
+  @media (min-width: $desktop) {
+    min-width: 100vw;
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+  }
 }
 
 .section_main {