feat: minor sidebar ui tweaks and improved input elm (#1164)

Author: bajrangCoder

src/components/sidebar/style.scss

@@ -4,7 +4,7 @@ body.no-animation {
   }
 }
 
-.page-replacement~#sidebar {
+.page-replacement ~ #sidebar {
   opacity: 0;
 }
 
@@ -24,7 +24,7 @@ body.no-animation {
   overflow: hidden;
   box-sizing: border-box;
 
-  &+.mask {
+  & + .mask {
     z-index: 108;
   }
 
@@ -55,19 +55,22 @@ body.no-animation {
   }
 
   .apps {
-    width: 40px;
-    min-width: 40px;
+    width: 45px;
+    min-width: 45px;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.2);
     overflow: auto;
+    padding: 10px 0;
 
     .icon {
-      height: 40px;
-      width: 40px;
+      height: 35px;
+      width: 35px;
       color: currentColor;
       font-size: 1em;
-      border-radius: 0;
+      border-radius: 12px;
       opacity: 0.5;
+      transition: all 0.2s ease;
+      margin: 0 auto;
 
       &.active {
         opacity: 1;
@@ -83,7 +86,7 @@ body.no-animation {
     width: 100%;
     height: 100%;
 
-    >.list {
+    > .list {
       width: 100%;
       max-width: 100%;
       max-height: 100%;
@@ -101,7 +104,7 @@ body.no-animation {
 
         &.notice {
           &::before {
-            content: '\2022';
+            content: "\2022";
             color: rgb(212, 250, 150);
             display: flex;
             align-items: center;
@@ -118,26 +121,26 @@ body.no-animation {
         font-size: 1em;
       }
 
-      >ul {
+      > ul {
         overflow: auto;
         width: 100%;
         max-width: 100%;
         max-height: calc(100% - 30px);
         height: calc(100% - 30px);
 
         .tile:active {
-          >*:nth-child(2) {
+          > *:nth-child(2) {
             color: rgb(255, 215, 0);
           }
         }
 
         li {
-          >*:nth-child(2) {
+          > *:nth-child(2) {
             color: currentColor;
           }
 
           &.active {
-            >*:nth-child(2) {
+            > *:nth-child(2) {
               color: rgb(255, 215, 0);
             }
           }
@@ -159,18 +162,24 @@ body.no-animation {
   input {
     color: rgb(255, 255, 255);
     color: var(--primary-text-color);
-    border: solid 1px currentColor;
-    border-radius: 4px;
+    border: solid 1px color-mix(in srgb, var(--border-color) 70%, transparent);
+    border-radius: 8px;
     height: 30px;
     width: 90%;
-    padding: 0 5px;
+    padding: 0 12px;
     text-indent: 0;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
     background: transparent;
+    transition: all 0.2s ease;
 
     &:focus {
-      border-color: rgb(255, 215, 0) !important;
-      border-color: var(--accent-color) !important;
+      border-color: var(--border-color) !important;
+      background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
+      box-shadow: 0 0 0 2px var(---box-shadow-color);
+    }
+
+    &::placeholder {
+      opacity: 0.5;
     }
   }
 
@@ -200,4 +209,4 @@ body.no-animation {
       font-weight: 600;
     }
   }
-}
+}

src/sidebarApps/extensions/index.js

@@ -27,12 +27,12 @@ let isLoading = false;
 
 const $header = (
 	<div className="header">
-		<span className="title">
-			{strings["plugins"]}
+		<div className="title">
+			<span>{strings["plugins"]}</span>
 			<button className="icon-button" onclick={filterPlugins}>
 				<span className="icon tune"></span>
 			</button>
-		</span>
+		</div>
 		<input
 			oninput={searchPlugin}
 			type="search"

src/sidebarApps/extensions/style.scss

@@ -6,10 +6,12 @@
     justify-content: space-between;
     align-items: center;
     .title {
-      font-size: 18px;
-      font-weight: bold;
+      font-size: 1.125rem;
+      font-weight: 600;
       display: flex;
+      justify-content: space-between;
       align-items: center;
+      width: 100%;
       .icon-button {
         background: none;
         border: none;