File Explorer style tweaks

components/apps/FileExplorer/StyledAddressBar.ts

@@ -7,7 +7,7 @@ const StyledAddressBar = styled.div`
   border: 1px solid rgb(83, 83, 83);
   display: flex;
   height: ${({ theme }) => theme.sizes.fileExplorer.navInputHeight}px;
-  margin: 7px 12px 6px 5px;
+  margin: 6px 12px 5px 5px;
   padding: 0 22px 2px 25px;
   position: relative;
   width: 100%;
@@ -20,7 +20,7 @@ const StyledAddressBar = styled.div`
     font-size: 12px;
     font-weight: 400;
     height: ${({ theme }) => theme.sizes.fileExplorer.navInputHeight - 2}px;
-    padding-bottom: 1px;
+    padding-bottom: 2px;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: calc(100% - 2px);
@@ -29,7 +29,7 @@ const StyledAddressBar = styled.div`
   img {
     left: 2px;
     position: absolute;
-    top: 3px;
+    top: 1px;
   }
 
   .refresh {

components/apps/FileExplorer/StyledFileExplorer.ts

@@ -1,14 +1,17 @@
 import styled from "styled-components";
 import StyledLoading from "components/system/Files/FileManager/StyledLoading";
-import StyledFileManager from "components/system/Files/Views/Icon/StyledFileManager";
+import StyledIconFileManager from "components/system/Files/Views/Icon/StyledFileManager";
 
 const StyledFileExplorer = styled.div`
-  ${StyledFileManager} {
+  ${StyledIconFileManager} {
     column-gap: 2px;
     height: ${({ theme }) =>
       `calc(100% - ${theme.sizes.fileExplorer.navBarHeight} - ${theme.sizes.fileExplorer.statusBarHeight})`};
-    padding-left: 5px;
-    padding-right: 5px;
+    padding: 6px;
+
+    figcaption {
+      padding: 1px 0 2px;
+    }
   }
 
   ${StyledLoading} {

components/apps/FileExplorer/StyledNavigation.ts

@@ -7,7 +7,7 @@ const StyledNavigation = styled.nav`
 
   button {
     height: 16px;
-    margin: 11px 9px;
+    margin: 9px 9px 10px;
     width: 16px;
 
     svg {

components/apps/FileExplorer/StyledSearch.ts

@@ -4,7 +4,7 @@ const StyledSearch = styled.div`
   border: 1px solid rgb(83, 83, 83);
   display: flex;
   height: ${({ theme }) => theme.sizes.fileExplorer.navInputHeight}px;
-  margin: 7px 12px 6px 0;
+  margin: 6px 12px 6px 0;
   max-width: 148px;
   overflow: hidden;
   padding: 0;
@@ -23,7 +23,7 @@ const StyledSearch = styled.div`
     font-size: 12px;
     font-weight: 400;
     height: ${({ theme }) => theme.sizes.fileExplorer.navInputHeight - 2}px;
-    padding-bottom: 1px;
+    padding-bottom: 2px;
     padding-left: 8px;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -33,6 +33,12 @@ const StyledSearch = styled.div`
       filter: invert(1);
       padding-right: 4px;
     }
+
+    &:focus {
+      &::placeholder {
+        color: transparent;
+      }
+    }
   }
 
   input:placeholder-shown ~ svg {

contexts/process/directory.ts

@@ -88,7 +88,7 @@ const directory: Processes = {
     backgroundColor: "#202020",
     defaultSize: {
       height: 260,
-      width: 405,
+      width: 407,
     },
     icon: FOLDER_ICON,
     title: "File Explorer",

styles/defaultTheme/sizes.ts

@@ -18,8 +18,8 @@ const sizes = {
     renameWidth: 75,
   },
   fileExplorer: {
-    navBarHeight: "38px",
-    navInputHeight: 24,
+    navBarHeight: "35px",
+    navInputHeight: 22,
     statusBarHeight: "23px",
   },
   fileManager: {