From bb1279408053104e561de1eacff47b5deb8d9e39 Mon Sep 17 00:00:00 2001
From: Flavio Silva <55815265+201flaviosilva@users.noreply.github.com>
Date: Mon, 15 May 2023 15:29:24 +0100
Subject: [PATCH 1/2] styles: responsive task list #13

---
 src/components/Main/styled.ts |  1 +
 src/components/Task/styled.ts |  6 ++++++
 src/pages/Home/styled.ts      | 36 +++++++++++++++++++++++++++++++++--
 src/types/enums.ts            |  1 +
 4 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/Main/styled.ts b/src/components/Main/styled.ts
index c21271f..c84f486 100644
--- a/src/components/Main/styled.ts
+++ b/src/components/Main/styled.ts
@@ -3,4 +3,5 @@ import styled from "styled-components";
 export const StyledMain = styled.main`
   flex: 1;
   padding: 4px;
+  overflow-y: hidden;
 `;
diff --git a/src/components/Task/styled.ts b/src/components/Task/styled.ts
index 46f0450..24532bf 100644
--- a/src/components/Task/styled.ts
+++ b/src/components/Task/styled.ts
@@ -29,6 +29,12 @@ export const Wrapper = styled.li`
       color: white;
     }
   }
+
+  @media only screen and (max-width: 425px) {
+    & {
+      padding: 2px 4px;
+    }
+  }
 `;
 
 interface DivProps {
diff --git a/src/pages/Home/styled.ts b/src/pages/Home/styled.ts
index 3e44361..4c5ead1 100644
--- a/src/pages/Home/styled.ts
+++ b/src/pages/Home/styled.ts
@@ -4,6 +4,7 @@ import { BaseColorsNames } from "../../types/customTypes";
 
 export const Wrapper = styled.div`
   position: relative;
+  max-height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -36,7 +37,18 @@ export const ActionsButtonsStyles = {
     border: 1px solid;
     border-radius: 4px;
 
+    background-color: #242424;
     transition: gap ${TRANSACTION_TIME} ease-out;
+    z-index: 1;
+
+    @media only screen and (max-width: 1024px) {
+      & {
+        top: auto;
+        bottom: 0;
+        padding: 0;
+        max-width: 64px;
+      }
+    }
   `,
 
   Toggle: styled.button`
@@ -69,6 +81,12 @@ export const ActionsButtonsStyles = {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 4px;
+
+    @media only screen and (max-width: 1024px) {
+      & {
+        grid-template-columns: 1fr;
+      }
+    }
   `,
 
   Button: styled.button`
@@ -83,6 +101,18 @@ export const CreateTask = {
     width: 50%;
     align-items: center;
     gap: 8px;
+
+    @media only screen and (max-width: 768px) {
+      & {
+        width: 75%;
+      }
+    }
+
+    @media only screen and (max-width: 425px) {
+      & {
+        width: 90%;
+      }
+    }
   `,
 
   Input: styled.input`
@@ -137,9 +167,11 @@ export const StyledList = styled.div`
     }
   }
 
-  @media only screen and (max-width: 600px) {
+  @media only screen and (max-width: 425px) {
     & {
-      width: 90%;
+      width: 100%;
+      padding: 4px 8px;
+      margin-bottom: 32px;
     }
   }
 
diff --git a/src/types/enums.ts b/src/types/enums.ts
index aff564b..fe351ba 100644
--- a/src/types/enums.ts
+++ b/src/types/enums.ts
@@ -16,6 +16,7 @@ export enum DEFAULT_USERS_IDS {
   GUEST = "G",
 }
 
+// Styles // TODO: Update to Theme Styles
 // Some of the color are from https://getbootstrap.com/docs/4.0/utilities/colors/
 export enum BaseColors {
   primary = "",

From 591fb7809ebd354507f28a3568cd185e94cce5a0 Mon Sep 17 00:00:00 2001
From: Flavio Silva <55815265+201flaviosilva@users.noreply.github.com>
Date: Mon, 15 May 2023 15:45:00 +0100
Subject: [PATCH 2/2] styles: styled header component #13

---
 src/components/Header/styled.ts | 8 ++++++++
 src/components/Main/styled.ts   | 1 +
 src/pages/Home/styled.ts        | 3 +--
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/styled.ts b/src/components/Header/styled.ts
index 29fe8a9..6709a41 100644
--- a/src/components/Header/styled.ts
+++ b/src/components/Header/styled.ts
@@ -6,6 +6,14 @@ export const StyledHeader = styled.header`
   justify-content: space-between;
   padding: 8px;
   background-color: var(--lt-color-gray-900);
+
+  @media only screen and (max-width: 768px) {
+    & {
+      padding: 4px 0;
+      width: 100%;
+      flex-direction: column;
+    }
+  }
 `;
 
 export const SearchWrapper = styled.div`
diff --git a/src/components/Main/styled.ts b/src/components/Main/styled.ts
index c84f486..991f155 100644
--- a/src/components/Main/styled.ts
+++ b/src/components/Main/styled.ts
@@ -1,6 +1,7 @@
 import styled from "styled-components";
 
 export const StyledMain = styled.main`
+  position: relative;
   flex: 1;
   padding: 4px;
   overflow-y: hidden;
diff --git a/src/pages/Home/styled.ts b/src/pages/Home/styled.ts
index 4c5ead1..745964a 100644
--- a/src/pages/Home/styled.ts
+++ b/src/pages/Home/styled.ts
@@ -3,7 +3,6 @@ import { BaseColors } from "../../types";
 import { BaseColorsNames } from "../../types/customTypes";
 
 export const Wrapper = styled.div`
-  position: relative;
   max-height: 100%;
   display: flex;
   flex-direction: column;
@@ -20,7 +19,7 @@ interface ActionButtonsSectionProps {
 const TRANSACTION_TIME = "0.5s";
 export const ActionsButtonsStyles = {
   Wrapper: styled.aside<ActionButtonsOpenToggleProps>`
-    position: absolute;
+    position: absolute; // Relative to the StyledMain component
     top: 0;
     left: 0;