From e45dd6c2b179747036728df2950acb78e629c5aa Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 2 Aug 2022 03:12:28 +0300
Subject: [PATCH] more padding + margin edits

---
 src/assets/css/global.scss                  |  5 +++--
 src/components/FolderView/FolderItem.vue    |  2 +-
 src/components/FolderView/FolderList.vue    |  7 +++----
 src/components/RightSideBar/SearchInput.vue | 12 +++++++-----
 src/components/nav/Search.vue               |  4 ++++
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index 93d13c2..ca25aca 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -72,13 +72,13 @@ a {
 }
 
 input[type="search"] {
-  height: 2.25rem;
+  height: 2.25rem !important;
 }
 
 .l-container {
   display: grid;
   grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: 2.5rem 1fr 4rem;
+  grid-template-rows: max-content 1fr max-content;
   grid-template-areas:
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
@@ -95,6 +95,7 @@ input[type="search"] {
 #tabs {
   grid-area: tabs;
   height: 3.5rem;
+  margin-top: -$small;
 }
 
 #acontent {
diff --git a/src/components/FolderView/FolderItem.vue b/src/components/FolderView/FolderItem.vue
index 8ca2b6d..141db6f 100644
--- a/src/components/FolderView/FolderItem.vue
+++ b/src/components/FolderView/FolderItem.vue
@@ -31,7 +31,7 @@ defineProps<{
   grid-template-columns: max-content 1fr;
   padding-right: 1rem;
   align-items: center;
-  background-color: $gray4;
+  background-color: $gray3;
   transition: all 0.2s ease;
   border-radius: 0.75rem;
 
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index ed03615..d97449a 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="f-container rounded">
-    <div id="f-items">
+    <div id="f-items" class="rounded">
       <FolderItem
         v-for="folder in folders"
         :key="JSON.stringify(folder)"
@@ -24,9 +24,8 @@ defineProps<{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: $medium;
-  border-bottom: 1px solid $gray3;
-  padding: 1rem 0;
-  padding-top: 0;
+  padding: $small;
   margin-bottom: 1rem;
+  background-color: $gray5;
 }
 </style>
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 2fe5e7a..9f526f1 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/src/components/RightSideBar/SearchInput.vue
@@ -7,7 +7,7 @@
         class="rounded"
         v-model="search.query"
         placeholder="Search your library"
-        type="text"
+        type="search"
         @focus="focusThis()"
         @blur="unfocusThis()"
       />
@@ -33,8 +33,9 @@ function unfocusThis() {
 <style lang="scss">
 #gsearch-input {
   display: flex;
-  margin-bottom: $small;
-  
+  height: max-content;
+  // margin-bottom: $smaller;
+
   @include tablet-landscape {
     display: none;
   }
@@ -44,11 +45,12 @@ function unfocusThis() {
     border-radius: 0.4rem;
     position: relative;
     display: flex;
-    gap: $small;
+    background-color: $red;
     background-color: $gray4;
 
     .icon {
-      width: 2rem;
+      width: 2.25rem;
+      aspect-ratio: 1;
       background-image: url("../../assets/icons/search.svg");
       background-size: 1.5rem;
       margin-left: $smaller;
diff --git a/src/components/nav/Search.vue b/src/components/nav/Search.vue
index 7640bbb..62e9665 100644
--- a/src/components/nav/Search.vue
+++ b/src/components/nav/Search.vue
@@ -14,9 +14,13 @@
 
 <style lang="scss">
 #nav-search {
+  // border: solid 1px $gray2;
+
   form {
     display: flex;
     gap: $small;
+    padding: 0;
+    margin: 0;
 
     input[type="search"] {
       background-color: $gray5;