🎨 Isolate infra and ui components

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

src/ui/components/chats_window/conversation.scss

@@ -0,0 +1,113 @@
+@import "../../_base.scss"
+
+.conversation {
+	$padding-top: 2%;
+			
+	height: calc(93% - $padding-top);
+
+	padding-left: 2%;
+	padding-top: $padding-top;
+
+	display: grid;
+	grid-template-columns: 75% 25%;
+	grid-template-rows: 70% 1% 29%;
+	cursor: pointer;
+
+	.holder {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		grid-column: 1;
+		grid-row: 2;
+				
+		color: darkgrey;
+	}
+			
+	.room-events {
+		display: flex;
+		flex-flow: column;
+		justify-content: flex-start;
+
+		border: $border-style;
+		background-color: #FFFFFF;
+
+		ul {
+			margin: 0;
+			padding-left: 0;
+		}
+
+		li {
+			list-style-type: none;
+		}
+		
+		.room-event {
+			display: flex;
+			flex-flow: column;
+			justify-content: space-between;
+
+			padding-top: 1%;
+
+			font-size: $font-size;
+
+			.title {
+				margin: 0;
+			}
+
+			.content {
+				margin: 0;
+				padding-left: 2%;
+			}
+		}
+	}
+
+	%selector-container {
+		aspect-ratio: 1;
+		
+		grid-column: 2;
+		
+		display: grid;
+		grid-template-columns: 10% 15% 50% 15% 10%;
+		grid-template-rows: 80% 20%;
+
+		.avatar-selector {
+			grid-column-start: 1;
+			grid-column-end: 6;
+			aspect-ratio: 1;
+		}
+
+		.webcam {
+			grid-column: 2;
+			grid-row: 2;
+			
+			aspect-ratio: 1;
+		}
+
+		.arrow-icon {
+			grid-column: 4;
+			grid-row: 2;
+			
+			svg {
+				path:last-child {
+					fill: black;
+				}
+			}
+		}
+	}
+
+	.other-avatar-selector-container {
+		@extend %selector-container;
+
+		grid-row: 1;
+	}
+			
+	.my-avatar-selector-container {
+		@extend %selector-container;
+				
+		grid-row: 3;
+	}
+			
+	.edit-section {
+		grid-row: 3;
+	}
+}