made CSS changes

src/components/Chatbox.css

@@ -26,6 +26,7 @@ ion-textarea {
 .send-button {
   align-self: center;
   margin: 0 2px 0 5px;
+  --box-shadow: 0 3px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .message-input {

src/components/Messages.css

@@ -7,7 +7,7 @@
 .message-grid {
   margin-right: 0;
   height: 100%;
-  user-select: auto;
+  user-select: text;
 }
 
 .right-align {

src/components/OnlineList.css

@@ -1,6 +1,7 @@
 .online-button {
   margin: 0 4px 0 0;
   align-self: center;
+  --box-shadow: 0 3px 2px -1px rgba(0, 0, 0, 0.2), 0 2px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
 .popover-list {

src/components/RoomHeader.css

@@ -1,6 +1,6 @@
 .title {
   text-align: left;
-  max-width: 100px;
+  max-width: 110px;
   padding-left: 15px;
   padding-right: 15px;
   color: var(--ion-color-primary);

src/components/RoomHeader.tsx

@@ -52,7 +52,7 @@ const RoomHeader: React.FC<RoomHeaderProps> = ({ roomId, userId, ownerId, videoI
             type="url"
             inputmode="search"
             class="input-bar"
-            placeholder="Upload new video by URL"
+            placeholder="Upload video by URL"
             onIonChange={(e) => setVideoUrl(e.detail.value!)}
             value={videoUrl}
             onSubmit={onSubmit}

src/pages/Home.tsx

@@ -21,7 +21,7 @@ const Home: React.FC = () => {
     const roomRef = db.collection('rooms').doc(roomId.id);
     await roomRef.collection('playlist').add({
       createdAt: timestamp,
-      url: 'https://www.youtube.com/watch?v=ksHOjnopT_U',
+      url: 'https://www.youtube.com/watch?v=XEfDYMngJeE',
     });
 
     await roomRef.collection('states').add({

src/services/utilities.ts

@@ -1,24 +1,34 @@
 const adjectives = [
-  'Adamant',
+  'Abaft',
-  'Instinctive',
   'Actually',
-  'Husky',
+  'Adamant',
+  'Adorable',
+  'Anxious',
   'Bent',
-  'Fascinated',
+  'Bright',
-  'Sexual',
-  'Mute',
-  'Silent',
   'Coherent',
+  'Curious',
+  'Diligent',
+  'Earthy',
+  'Fascinated',
+  'Foreign',
+  'Hateful',
+  'Husky',
+  'Instinctive',
+  'Jagged',
   'Juvenile',
+  'Military',
+  'Mute',
   'Naughty',
-  'Foreign',
+  'Neat',
-  'Earthy',
+  'Nifty',
-  'Diligent',
+  'Parallel',
-  'Anxious',
-  'Adorable',
   'Quack',
-  'Unequal',
+  'Roomy',
+  'Sedate',
   'Sharp',
+  'Silent',
+  'Unequal',
 ];
 
 const animals = [
@@ -59,7 +69,7 @@ const animals = [
 // };
 
 export const generateAnonName = (): string => {
-  const adj: string = adjectives[Math.floor(Math.random() * 20)];
+  const adj: string = adjectives[Math.floor(Math.random() * 30)];
   const animal: string = animals[Math.floor(Math.random() * 20)];
   return adj + ' ' + animal;
 };