✨ Add first static (no reactivity, static data) implementation of ChatsWindow

src/components/chats_window/chats_window.scss

@@ -0,0 +1,231 @@
+@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;
+				}
+			}
+
+			.navbar {
+				height: 55%;
+				padding-left: 2%;
+				padding-right: 2%;
+
+				background: linear-gradient(180deg, #A9D3E0, #F0F9FA);
+
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+
+				button {
+					@extend .aeroButton;
+					padding-right: 2%;
+				}
+
+				.flex-right-aero-button {
+					margin-left: auto;
+				}
+
+				.flex-last-button {
+					margin: 0;
+				}
+			}
+		}
+
+		.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;
+			}
+		}
+	}
+}