🎨 Reorganize the contacts_window widgets + add first interactions with homeserver

src/components/contacts_window/contacts_window.scss

@@ -0,0 +1,84 @@
+@import "../../_base.scss";
+
+.contactsWindow {
+    width: 100%;
+    height: 100%;
+
+    background-color: #ECF6F9;
+    font-family: "Tahoma", sans-serif;
+
+    border: thin solid #707070;
+    border-radius: 8px;
+    box-shadow: 0 0 5px #00000050;
+
+
+    .header {
+        height: 10%;
+        width: 100%;
+
+		.titleBar {
+			height: 60%;
+			width: 100%;
+			background:
+				linear-gradient(180deg, #7DC5E3, #3883A3);
+		}
+
+		.userInfo {
+			height: 40%;
+			width: 100%;
+			background:
+				linear-gradient(180deg, #00658B, #0077A6);
+		}
+	}
+
+	.contactsNav {
+        height: calc(31/1080*100%);
+        background:
+           linear-gradient(180deg, #00658B, #0077A6);
+
+		.inner {
+			margin-left: 1%;
+			margin-right: 1%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+
+			.flexRightAeroButton {
+				@extend .aeroButton;
+
+				margin-left: auto;
+			}
+		}
+	}
+
+    .search {
+        height: calc(38/1080*100%);
+        width: 100%;
+
+        border-bottom: thin solid #e2eaf3;
+
+		.inner {
+			height: 100%;
+			width: 98%;
+			padding-left: 1%;
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+
+			.searchInput {
+				height: calc(23/38*100%);
+				width: 100%;
+				margin-right: 1%;
+				border: thin solid #c7c7c7;
+				box-shadow: inset 0 0 calc(3/1080*100%) #0000002a;
+				font-size: 8pt;
+
+				padding-left: 1%;
+			}
+		}
+	}
+
+    .footer {
+        height: 10%;
+	}
+}