From 83efa22a7f1f26690b55d447fc5fcb7052f6a4a8 Mon Sep 17 00:00:00 2001
From: Sneha Singh <snehasingh7395@gmail.com>
Date: Thu, 31 Oct 2024 04:39:22 +0530
Subject: [PATCH 1/3] enhanced dark mode for sort by and search

Signed-off-by: Sneha Singh <snehasingh7395@gmail.com>
---
 pages/catalog/index.html | 44 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/pages/catalog/index.html b/pages/catalog/index.html
index b5b990de2d..1b6d9ebcb7 100644
--- a/pages/catalog/index.html
+++ b/pages/catalog/index.html
@@ -32,6 +32,28 @@
      display: none;
     }
   }
+  
+.dark-mode #sort {
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid var(--color-primary-extra-dark); 
+    border-radius: 5px;
+    background-color: var(--color-primary-medium-dark); 
+    color: var(--color-secondary-light); 
+    appearance: none;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M7 10l5 5 5-5z"/></svg>');
+    background-repeat: no-repeat;
+    background-position: right 10px top 50%;
+    margin-right: 10px;
+}
+
+
+@media (max-width: 506px) {
+    .dark-mode #sort {
+        display: none;
+    }
+}
+
   #search {
     width: 30%;
     flex-grow: 1;
@@ -41,6 +63,28 @@
     box-sizing: border-box;
     top: 0;
   }
+  
+  
+.dark-mode #search,
+.dark-mode input[type="text"] {
+    background-color: var(--color-primary-medium-dark); /* Dark background color */
+    color: var(--color-secondary-light); /* Light text color */
+    border: 1px solid var(--color-primary-extra-dark); /* Subtle border color */
+    border-radius: 5px;
+}
+
+.dark-mode #search::placeholder,
+.dark-mode input[type="text"]::placeholder {
+    color: var(--color-grey-light); /* Light placeholder text */
+}
+
+/* Focused State */
+.dark-mode #search:focus,
+.dark-mode input[type="text"]:focus {
+    outline: none;
+    box-shadow: 0 0 5px var(--color-secondary-light); /* Subtle glow on focus */
+}
+
   .row {
     margin: 10px;
   }

From ef287dee49184e6ba5e60d177467d917f994def0 Mon Sep 17 00:00:00 2001
From: Sneha Singh <snehasingh7395@gmail.com>
Date: Thu, 31 Oct 2024 19:54:20 +0530
Subject: [PATCH 2/3] implemented two column layout in the footer for mobile
 view

Signed-off-by: Sneha Singh <snehasingh7395@gmail.com>
---
 _sass/footer.scss | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/_sass/footer.scss b/_sass/footer.scss
index 0f9dff2615..1b580d5b4b 100644
--- a/_sass/footer.scss
+++ b/_sass/footer.scss
@@ -3,10 +3,27 @@
   margin: 10px 20px;
   padding: 0;
 
+}
+@media screen and (max-width: 450px) {
+  margin: 5px 10px; // Reduce margins for mobile
+  width: auto; // Let the grid control the width
+  
+  h2 {
+    font-size: 1rem; // Smaller heading for mobile
+    margin: 10px 0;
+  }
+
+  li {
+    font-size: 0.9rem; // Slightly smaller text for mobile
+    margin: 5px 0;
+  }
+}
+
+
   @media #{$tablet} {
     -webkit-flex: 0 0 fit-content;
     flex: 0 0 fit-content;
-  }
+  
 
   li {
     list-style: none;

From 93aae2c4a3bcd3529a954a72f7f1d335e30eff4c Mon Sep 17 00:00:00 2001
From: Sneha Singh <snehasingh7395@gmail.com>
Date: Thu, 31 Oct 2024 20:09:41 +0530
Subject: [PATCH 3/3] Revert "enhanced dark mode for sort by and search"

This reverts commit 83efa22a7f1f26690b55d447fc5fcb7052f6a4a8.
---
 pages/catalog/index.html | 44 ----------------------------------------
 1 file changed, 44 deletions(-)

diff --git a/pages/catalog/index.html b/pages/catalog/index.html
index 1b6d9ebcb7..b5b990de2d 100644
--- a/pages/catalog/index.html
+++ b/pages/catalog/index.html
@@ -32,28 +32,6 @@
      display: none;
     }
   }
-  
-.dark-mode #sort {
-    padding: 10px;
-    font-size: 16px;
-    border: 1px solid var(--color-primary-extra-dark); 
-    border-radius: 5px;
-    background-color: var(--color-primary-medium-dark); 
-    color: var(--color-secondary-light); 
-    appearance: none;
-    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M7 10l5 5 5-5z"/></svg>');
-    background-repeat: no-repeat;
-    background-position: right 10px top 50%;
-    margin-right: 10px;
-}
-
-
-@media (max-width: 506px) {
-    .dark-mode #sort {
-        display: none;
-    }
-}
-
   #search {
     width: 30%;
     flex-grow: 1;
@@ -63,28 +41,6 @@
     box-sizing: border-box;
     top: 0;
   }
-  
-  
-.dark-mode #search,
-.dark-mode input[type="text"] {
-    background-color: var(--color-primary-medium-dark); /* Dark background color */
-    color: var(--color-secondary-light); /* Light text color */
-    border: 1px solid var(--color-primary-extra-dark); /* Subtle border color */
-    border-radius: 5px;
-}
-
-.dark-mode #search::placeholder,
-.dark-mode input[type="text"]::placeholder {
-    color: var(--color-grey-light); /* Light placeholder text */
-}
-
-/* Focused State */
-.dark-mode #search:focus,
-.dark-mode input[type="text"]:focus {
-    outline: none;
-    box-shadow: 0 0 5px var(--color-secondary-light); /* Subtle glow on focus */
-}
-
   .row {
     margin: 10px;
   }