Added contact search function

assets/new conversation.svg

@@ -1,8 +1,8 @@
-<svg viewBox="0 0 512 512">
-<title>new conversation</title>
-<path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/>
-<ellipse cx="423.3" cy="342.48" rx="84.7" ry="84.7"/>
-<path d="M423.3,261.78a80.7,80.7,0,1,1-80.71,80.7,80.79,80.79,0,0,1,80.71-80.7m0-8a88.7,88.7,0,1,0,88.7,88.7,88.71,88.71,0,0,0-88.7-88.7Z"/>
-<line  x1="423.3" y1="306.34" x2="423.3" y2="379.64"/>
-<line x1="459.95" y1="342.99" x2="386.65" y2="342.99"/>
+<svg viewBox="0 0 512 512">
+<title>new conversation</title>
+<path d="M304.11,403.5H101.42a51,51,0,0,1-51-51v-191L6.87,84.82H424.36a51,51,0,0,1,51,51v86.72"/>
+<ellipse cx="423.3" cy="342.48" rx="84.7" ry="84.7"/>
+<path d="M423.3,261.78a80.7,80.7,0,1,1-80.71,80.7,80.79,80.79,0,0,1,80.71-80.7m0-8a88.7,88.7,0,1,0,88.7,88.7,88.71,88.71,0,0,0-88.7-88.7Z"/>
+<line  x1="423.3" y1="306.34" x2="423.3" y2="379.64"/>
+<line x1="459.95" y1="342.99" x2="386.65" y2="342.99"/>
 </svg>

assets/no-mails.svg

@@ -1,4 +1,4 @@
-<svg viewBox="0 0 512 512">
-<path d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z"/>
-<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66"/>
+<svg viewBox="0 0 512 512">
+<path d="M227,26.16,20.5,177.56a49,49,0,0,0-20,39.53V446.35a49,49,0,0,0,49,49h413a49,49,0,0,0,49-49h0V217.09a49,49,0,0,0-20-39.53L285,26.16A49,49,0,0,0,227,26.16Z"/>
+<path d="M71,250.29l166.31,86.88a39,39,0,0,0,36.22,0L441,249.66"/>
 </svg>

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,