file drawer styling

Author: dewanshDT

client/styles/components/_sidebar.scss

@@ -4,7 +4,7 @@
 }
 
 .sidebar__header {
-  padding: #{10 / $base-font-size}rem #{12 / $base-font-size}rem;
+  padding: #{8 / $base-font-size}rem #{12 / $base-font-size}rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -54,15 +54,24 @@
 .sidebar__root-item {
   position: relative;
   overflow-y: auto;
+  padding-top: #{6 / $base-font-size}rem;
   flex: 1 1 auto;
-  @include themify() {
-    border-top: 1px solid map-get($theme-map, 'ide-border-color');
+  @media (min-width: 770px) {
+    @include themify() {
+      border-top: 1px solid map-get($theme-map, 'ide-border-color');
+    }
   }
   .sidebar--contracted & {
     border: none;
   }
 }
 
+.file-item__children {
+  display: flex;
+  flex-direction: column;
+  gap: #{4 / $base-font-size}rem;
+}
+
 .sidebar__file-item {
   font-size: #{12 / $base-font-size}rem;
   cursor: pointer;
@@ -78,6 +87,11 @@
 
 .sidebar__file-item--folder {
   z-index: 1;
+  display: flex;
+  align-items: center;
+  > button {
+    padding-left: #{1 / $base-font-size}rem;
+  }
 }
 
 // to indent each row in the file tree
@@ -136,7 +150,7 @@
   padding: #{4 / $base-font-size}rem 0;
   padding-right: #{25 / $base-font-size}rem;
   font-family: Inconsolata, monospace;
-  font-size: #{14 / $base-font-size}rem;
+  font-size: #{15 / $base-font-size}rem;
   overflow: hidden;
   .sidebar__file-item--editing & {
     display: none;
@@ -275,8 +289,9 @@
 }
 
 .sidebar__file-item-icon {
-  padding: #{4 / $base-font-size}rem 0;
   margin-right: #{5 / $base-font-size}rem;
+  display: flex;
+  align-items: center;
   & path {
     @include themify() {
       fill: getThemifyVariable('secondary-text-color');