🎨 Isolate infra and ui components

The src/base.rs is still to be reworked.

src/ui/components/chats_window/chats_window.scss

@@ -0,0 +1,94 @@
+@import "../../_base.scss"
+
+.chats-window {
+	height: 100%;
+	width: 100%;
+
+	$horizontal-padding-margin: calc((2*100%)/1980);
+
+	.tabs {
+		height: 2%;
+		width: 100%;
+
+		display: flex;
+		flex-flow: row;
+		overflow-x: scroll;
+
+		&::-webkit-scrollbar {
+			height: 0px;
+		}
+
+		.tab {
+			height: 100%;
+			flex-grow: 1;
+			padding: 0 $horizontal-padding-margin;
+
+			display: flex;
+
+			button {
+				height: 100%;
+				width: 100%;
+
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+
+				$clamped-horizontal-padding-margin: clamp(5px, $horizontal-padding-margin, $horizontal-padding-margin);
+				margin: 0 $clamped-horizontal-padding-margin;
+				padding: 0 $clamped-horizontal-padding-margin;
+
+				white-space: nowrap;
+
+				background-color: #EFF9F9;
+				border: $border-style;
+
+				$radius: calc((6*100%)/1980);
+				$clamped-radius: clamp(6px, $radius, $radius);
+				border-radius: $clamped-radius $clamped-radius 0 0;
+
+				font-size: $font-size;
+
+				img {
+					height: $icon-size;
+					aspect-ratio: 1;
+				}
+			}
+		}
+	}
+
+	.chat {
+		height: 98%;
+		width: 100%;
+
+		background-color: #ECF6F9;
+
+		.header {
+			height: 7%;
+
+			border: $border-style;
+			
+			.info {
+				height: 45%;
+				display: flex;
+				flex-direction: column;
+
+				padding-left: 2%;
+
+				background: linear-gradient(180deg, #BFE3EB, #DEFBFE);
+
+				font-size: $font-size;
+
+				.room-name {
+					margin: 0;
+					margin-top: 1%;
+					font-weight: bold;
+				}
+
+				.room-topic {
+					margin: 0;
+					color: darkgrey;
+				}
+			}
+		}
+	}
+}