made various styling changes

src/components/Frame.css

@@ -6,6 +6,10 @@
   margin: 0;
 }
 
+.frame-segment {
+  background: none;
+}
+
 ion-segment-button {
   --indicator-transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
   max-height: 40px;
@@ -13,4 +17,5 @@ ion-segment-button {
 
 ion-fab-button {
   --background: var(--ion-color-secondary-shade);
+  --background-activated: var(--ion-color-secondary);
 }

src/components/Frame.tsx

@@ -19,7 +19,7 @@ const Frame: React.FC<FrameProps> = ({ ownerId, roomId, userId, userList, joinTi
 
   return (
     <IonCard class="frame-card">
-      <IonSegment value={pane}>
+      <IonSegment value={pane} class="frame-segment">
         <IonSegmentButton value="chat" onClick={() => setPane('chat')}>
           <IonIcon icon={chatboxOutline}></IonIcon>
         </IonSegmentButton>

src/components/Messages.css

@@ -1,6 +1,6 @@
 .message-content {
   overflow-y: auto;
-  height: calc(100% - 160px);
+  height: calc(100% - 162px);
 }
 
 .message-grid {
@@ -47,10 +47,6 @@
   padding-top: 5px;
 }
 
-ion-footer ion-toolbar:last-of-type {
-  padding-bottom: 10px;
-}
-
 .message-input {
   width: 100%;
   height: 100%;

src/components/Messages.tsx

@@ -1,14 +1,4 @@
-import {
-  IonCol,
-  IonContent,
-  IonFabButton,
-  IonFooter,
-  IonGrid,
-  IonIcon,
-  IonInput,
-  IonRow,
-  IonToolbar,
-} from '@ionic/react';
+import { IonCol, IonContent, IonFabButton, IonGrid, IonIcon, IonInput, IonRow, IonToolbar } from '@ionic/react';
 import { sendOutline } from 'ionicons/icons';
 import React, { useEffect, useRef, useState } from 'react';
 import { db, rtdb } from '../services/firebase';
@@ -220,22 +210,22 @@ const Messages: React.FC<MessagesProps> = ({ pane, ownerId, roomId, userId, user
           )}
         </IonGrid>
       </IonContent>
-      <IonFooter style={{ display: pane === 'chat' ? null : 'none' }}>
-        <IonToolbar class="message-toolbar">
-          <IonInput
-            onIonChange={(e) => setMessage(e.detail.value!)}
-            onKeyDown={(e) => onEnter(e)}
-            value={message}
-            placeholder="Send message"
-            enterkeyhint="send"
-            autocorrect="on"
-            class="message-input"
-          ></IonInput>
-          <IonFabButton slot="end" size="small" onClick={sendMessage} class="send-button">
-            <IonIcon icon={sendOutline}></IonIcon>
-          </IonFabButton>
-        </IonToolbar>
-      </IonFooter>
+      <IonToolbar class="message-toolbar" style={{ display: pane === 'chat' ? null : 'none' }}>
+        <IonInput
+          onIonChange={(e) => setMessage(e.detail.value!)}
+          onKeyDown={(e) => onEnter(e)}
+          value={message}
+          placeholder="Send message"
+          enterkeyhint="send"
+          autocorrect="on"
+          autocapitalize="on"
+          spellcheck={true}
+          class="message-input"
+        ></IonInput>
+        <IonFabButton slot="end" size="small" onClick={sendMessage} class="send-button">
+          <IonIcon icon={sendOutline}></IonIcon>
+        </IonFabButton>
+      </IonToolbar>
     </>
   );
 };

src/components/OnlineList.css

@@ -1,5 +1,5 @@
 .online-content {
-  height: calc(100% - 160px + 56px);
+  height: calc(100% - 162px + 52px);
 }
 
 .online-header {

src/pages/Home.css

@@ -1,6 +1,8 @@
 .create-room {
   width: 50%;
   --background: var(--ion-color-secondary-shade);
+  --background-activated: var(--ion-color-secondary);
+  --background-focused: var(--ion-color-secondary);
 }
 
 .home-content {

src/theme/variables.css

@@ -63,7 +63,7 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-medium-shade: #86888f;
   --ion-color-medium-tint: #a2a4ab;
 
-  --ion-color-light: #2c323d;
+  --ion-color-light: #2f3846;
   --ion-color-light-rgb: 34, 36, 40;
   --ion-color-light-contrast: #ffffff;
   --ion-color-light-contrast-rgb: 255, 255, 255;
@@ -79,7 +79,7 @@ http://ionicframework.com/docs/theming/ */
    */
 
 .ios body {
-  --ion-background-color: #2c323d;
+  --ion-background-color: #2f3846;
   --ion-background-color-rgb: 0, 0, 0;
 
   --ion-text-color: #ffffff;
@@ -105,15 +105,15 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-step-900: #e6e6e6;
   --ion-color-step-950: #f2f2f2;
 
-  --ion-toolbar-background: #2c323d;
+  --ion-toolbar-background: #2f3846;
 
-  --ion-item-background: #2c323d;
+  --ion-item-background: #2f3846;
 
-  --ion-card-background: #2c323d;
+  --ion-card-background: #2f3846;
 }
 
 .md body {
-  --ion-background-color: #2c323d;
+  --ion-background-color: #2f3846;
   --ion-background-color-rgb: 18, 18, 18;
 
   --ion-text-color: #ffffff;
@@ -141,13 +141,13 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-step-900: #e7e7e7;
   --ion-color-step-950: #f3f3f3;
 
-  --ion-item-background: #2c323d;
+  --ion-item-background: #2f3846;
 
-  --ion-toolbar-background: #2c323d;
+  --ion-toolbar-background: #2f3846;
 
-  --ion-tab-bar-background: #2c323d;
+  --ion-tab-bar-background: #2f3846;
 
-  --ion-card-background: #2c323d;
+  --ion-card-background: #2f3846;
 }
 
 @font-face {