index.html

@@ -91,7 +91,7 @@
           if (chatRoomTopic) {
             const topic = chatRoomTopic.innerText;
             navigator.clipboard.writeText(topic).then(() => {
-              alert('Topic copied to clipboard!');
+              console.log('Topic copied to clipboard:', topic);
             }).catch(err => {
               console.error('Failed to copy topic:', err);
             });

style.css

@@ -167,10 +167,12 @@ main {
     color: white;
     font-size: 14px;
     border-radius: 5px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
 }
 
 #sidebar button:hover {
     background-color: #5b6eae;
+    transform: scale(1.05);
 }
 
 #remove-room-btn {
@@ -469,3 +471,79 @@ main {
     /* Removed circular border */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
+
+/* Updated Room List Styles */
+#room-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#room-list li {
+    padding: 10px;
+    margin-bottom: 10px;
+    background-color: #3a3f44;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: background-color 0.3s ease;
+}
+
+#room-list li:hover {
+    background-color: #4a5258;
+}
+
+#room-list li span {
+    flex: 1;
+}
+
+#room-list li .edit-icon,
+#room-list li .delete-icon {
+    margin-left: 10px;
+    color: #b0d944;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+#room-list li .edit-icon:hover,
+#room-list li .delete-icon:hover {
+    color: #9ac831;
+}
+
+/* Style for Edit Mode Input Box */
+#room-list li input[type="text"] {
+    background-color: #2e2e2e;
+    border: 1px solid #b0d944;
+    border-radius: 5px;
+    color: #b0d944;
+    padding: 5px;
+    width: calc(100% - 40px); /* Adjusted width to fit inside the list item */
+    margin-right: 10px; /* Added margin to separate from icons */
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+#room-list li input[type="text"]:focus {
+    outline: none;
+    background-color: #3a3a3a;
+}
+
+/* Sidebar Button Style */
+#sidebar button {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    background-color: #7289da;
+    border: none;
+    color: white;
+    font-size: 14px;
+    border-radius: 5px;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+#sidebar button:hover {
+    background-color: #5b6eae;
+    transform: scale(1.05);
+}