WIP

src/Home.module.css

@@ -0,0 +1,99 @@
+.content {
+  display: grid;
+  grid-template-columns: minmax(200px, 320px) 3fr;
+  gap: 20px;
+  margin: 0 20px;
+  flex: 1;
+}
+
+.roomsSidebar {
+  padding: 12px;
+  background-color: rgba(33,38,44,.9);
+  border-radius: 8px;
+}
+
+.roomsSidebar h5 {
+  color: rgb(142, 153, 164);
+  font-size: 13px;
+  margin: 0 0 8px 0;    
+}
+
+.roomList {
+  
+}
+
+.roomListItem {
+  margin-bottom: 4px;
+  padding: 4px;
+  display: flex;
+  cursor: pointer;
+  text-decoration: none;
+  color: white;
+  align-items: center;
+}
+
+.roomListItem:hover {
+  background-color: rgba(141, 151, 165, 0.2);
+  border-radius: 8px;
+  color: white;
+}
+
+.roomAvatar {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 32px;
+}
+
+.roomAvatar > * {
+  position: absolute;
+  left: 0;
+  color: #fff;
+  text-align: center;
+  pointer-events: none;
+  font-weight: 400;
+}
+
+.roomAvatar span {
+  font-size: 20.8px;
+  width: 32px;
+  line-height: 32px;
+}
+
+.roomName {
+  margin-left: 8px;
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.center {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.createRoomContainer {
+  color: #232f32;
+  border-radius: 8px;
+  padding: 25px 60px;
+  width: 400px;
+  background-color: white;
+}
+
+.createRoomContainer h2 {
+  margin: 0 0 20px 0;
+}
+
+.userName {
+  font-weight: 600;
+  margin-right: 8px;
+}
+
+.signOutButton {
+  background: transparent;
+  border: none;
+  color: rgb(255, 75, 85);
+  cursor: pointer;
+  font-weight: 600;
+}