Added contact search function

css/dist/main.css

@@ -1,4 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap");
 *,
 ::before,
 ::after {
@@ -40,8 +39,14 @@ body[data-theme=dark] {
   --foreground-color: 20, 20, 20;
   --lightness: 60%;
 }
+body[data-theme=dark] .page {
+  background: rgba(var(--foreground-color), 0.9);
+}
+body[data-theme=dark] #contacts, body[data-theme=dark] #mails {
+  background: rgba(var(--foreground-color), 0.5);
+}
 body[data-theme=dark] .initial {
-  background: rgba(var(--text-color), 0.1);
+  background: rgba(var(--text-color), 0.1) !important;
   color: rgba(var(--text-color), 1) !important;
   box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
 }
@@ -83,6 +88,7 @@ textarea {
   width: 100%;
   padding: 1rem;
   font-size: 1rem;
+  color: rgba(var(--text-color), 1);
 }
 textarea:focus {
   outline: none;
@@ -248,6 +254,7 @@ sm-button[variant=primary] .icon {
 .logo-section h4 {
   font-weight: 500;
   line-height: 1;
+  font-size: 1rem;
 }
 .logo-section h5 {
   color: rgba(var(--text-color), 0.7);
@@ -729,6 +736,24 @@ sm-button[variant=primary] .icon {
   display: none;
 }
 
+#contacts header {
+  position: relative;
+  gap: 1rem;
+  padding-bottom: 0;
+}
+#contacts header sm-input {
+  margin: 0;
+  width: 100%;
+}
+#contacts header .icon {
+  stroke: rgba(var(--text-color), 0.5);
+  height: 1rem;
+  width: 1rem;
+}
+#contacts header sm-input::part(input) {
+  padding: 0.4rem 1rem;
+}
+
 #contacts, #mails {
   position: relative;
   grid-template-rows: max-content 1fr;
@@ -821,7 +846,7 @@ sm-button[variant=primary] .icon {
 }
 #chat .sent {
   margin-left: auto;
-  background: rgba(var(--text-color), 0.06);
+  background: hsla(var(--hue), var(--saturation), var(--lightness), 0.1);
   border-radius: 0.6rem 0 0.6rem 0.6rem;
 }
 #chat .received {
@@ -1161,6 +1186,7 @@ sm-tab-header {
 
   .contact sm-menu {
     opacity: 0;
+    transition: opacity 0.3s;
   }
 
   .contact:hover sm-menu,

css/main.scss

@@ -1,4 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');
 *,
 ::before,
 ::after{
@@ -35,8 +34,14 @@ body[data-theme='dark']{
     --text-color-light: 170, 170, 170;
     --foreground-color: 20, 20, 20;
     --lightness: 60%;
+    .page{
+        background: rgba(var(--foreground-color), 0.9);
+    }
+    #contacts, #mails{
+        background: rgba(var(--foreground-color), 0.5);
+    }
     .initial{
-        background: rgba(var(--text-color), 0.1);
+        background: rgba(var(--text-color), 0.1) !important;
         color: rgba(var(--text-color), 1) !important;
         box-shadow: 0 0.1rem 0.1rem #00000016, 0 0.1rem 0.3rem #00000040;
     }
@@ -71,6 +76,7 @@ textarea{
     width: 100%;
     padding: 1rem;
     font-size: 1rem;
+    color: rgba(var(--text-color), 1);
     &:focus{
         outline: none;
         box-shadow: 0 0 0 0.1rem var(--accent-color);
@@ -210,6 +216,7 @@ sm-button[variant="primary"]{
     h4{
         font-weight: 500;
         line-height: 1;
+        font-size: 1rem;
     }
     h5{
         color: rgba(var(--text-color), 0.7);
@@ -422,7 +429,8 @@ sm-button[variant="primary"]{
     display: grid;
     gap: 0 1rem;
     grid-template-columns: auto 1fr auto;
-    grid-template-areas: 'dp . menu' 'dp . menu';
+    grid-template-areas: 'dp . menu'
+                         'dp . menu';
     padding: 0.8rem 1.5rem;
     &:focus{
         background: rgba(var(--text-color), 0.06);
@@ -679,6 +687,23 @@ sm-button[variant="primary"]{
         display: none;
     }
 }
+#contacts header{
+    position: relative;
+    gap: 1rem;
+    padding-bottom: 0;
+    sm-input{
+        margin: 0;
+        width: 100%;
+    }
+    .icon{
+        stroke: rgba(var(--text-color), 0.5);
+        height: 1rem;
+        width: 1rem;
+    }
+    sm-input::part(input){
+        padding: 0.4rem 1rem;
+    }
+}
 #contacts, #mails{
     position: relative;
     grid-template-rows: max-content 1fr;
@@ -769,7 +794,7 @@ sm-button[variant="primary"]{
     }
     .sent{
         margin-left: auto;
-        background: rgba(var(--text-color), 0.06);
+        background: hsla(var(--hue), var(--saturation), var(--lightness), 0.1);
         border-radius: 0.6rem 0 0.6rem 0.6rem;
     }
     .received{
@@ -1092,6 +1117,7 @@ sm-tab-header{
     }
     .contact sm-menu{
         opacity: 0;
+        transition: opacity 0.3s;
     }
     .contact:hover sm-menu,
     sm-menu:focus-within{