added about page, made more CSS styling

package-lock.json

@@ -1482,6 +1482,24 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@iconify/icons-logos": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/@iconify/icons-logos/-/icons-logos-1.0.12.tgz",
+      "integrity": "sha512-VC5hcZ2lw1D15iQX5AukQ0m5r6EmRJ5jg6zoTL+XCRwH1RTdu0jUw6uN35uPTKp7OohAj1eLIjjnZw0WPeBkJg==",
+      "dev": true
+    },
+    "@iconify/icons-simple-icons": {
+      "version": "1.0.47",
+      "resolved": "https://registry.npmjs.org/@iconify/icons-simple-icons/-/icons-simple-icons-1.0.47.tgz",
+      "integrity": "sha512-vsedOkyhSQyDKroetjxHf8vhoraI7tK0/u/5TYD17zZqdOcQoTzE15s/tbs0i3Xz/abEAb3e/X8LviADDI+mLw==",
+      "dev": true
+    },
+    "@iconify/react": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@iconify/react/-/react-1.1.3.tgz",
+      "integrity": "sha512-ReZNJyr89AfED6XZIXkhsJiNv2taT3j1cTo1HVPHMsrKOz6gAYdXtD2kDWF6+GVoFUxpmnO0fMcA6yCyTf6Tow==",
+      "dev": true
+    },
     "@ionic/core": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.3.1.tgz",

package.json

@@ -50,6 +50,8 @@
   },
   "devDependencies": {
     "@capacitor/cli": "2.4.0",
+    "@iconify/icons-simple-icons": "^1.0.47",
+    "@iconify/react": "^1.1.3",
     "@types/firebase": "^3.2.1"
   },
   "description": "An Ionic project"

src/components/About.css

@@ -0,0 +1,21 @@
+.about-grid {
+  margin-top: 50px;
+  max-width: 500px;
+  font-size: 20px;
+  font-style: bold;
+  color: var(--ion-color-secondary);
+  text-align: center;
+}
+
+.externals-row {
+  margin-top: 25px;
+}
+
+.about-icons {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  top: 0;
+  cursor: pointer;
+  color: var(--ion-color-secondary);
+}

src/components/About.tsx

@@ -0,0 +1,40 @@
+import { IonCol, IonGrid, IonIcon, IonRow, IonRouterLink } from '@ionic/react';
+import { logoGithub } from 'ionicons/icons';
+import { Icon } from '@iconify/react';
+import discordIcon from '@iconify/icons-simple-icons/discord';
+
+import React from 'react';
+import './About.css';
+
+type AboutProps = {
+  pane: string;
+};
+
+const About: React.FC<AboutProps> = ({ pane }) => {
+  return (
+    <IonGrid style={{ display: pane === 'about' ? null : 'none' }} class="about-grid">
+      <IonRow>
+        <IonCol>
+          <span>Any feedback is welcome! </span>
+          <span role="img" aria-label="Turtle">
+            🐢🐢
+          </span>
+        </IonCol>
+      </IonRow>
+      <IonRow class="externals-row">
+        <IonCol size="3"></IonCol>
+        <IonCol size="3">
+          <IonRouterLink href="https://github.com/shuang854/Turtle" target="_blank">
+            <IonIcon icon={logoGithub} class="about-icons"></IonIcon>
+          </IonRouterLink>
+        </IonCol>
+        <IonCol size="3">
+          <Icon icon={discordIcon} className="about-icons"></Icon>
+        </IonCol>
+        <IonCol size="3"></IonCol>
+      </IonRow>
+    </IonGrid>
+  );
+};
+
+export default About;

src/components/Frame.css

@@ -10,3 +10,7 @@ ion-segment-button {
   --indicator-transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1);
   max-height: 40px;
 }
+
+ion-fab-button {
+  --background: var(--ion-color-secondary);
+}

src/components/Frame.tsx

@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 import './Frame.css';
 import Messages from './Messages';
 import OnlineList from './OnlineList';
+import About from './About';
 
 type FrameProps = {
   ownerId: string;
@@ -31,6 +32,7 @@ const Frame: React.FC<FrameProps> = ({ ownerId, roomId, userId, userList }) => {
 
       <Messages pane={pane} ownerId={ownerId} roomId={roomId} userId={userId} userList={userList}></Messages>
       <OnlineList pane={pane} userList={userList}></OnlineList>
+      <About pane={pane}></About>
     </IonCard>
   );
 };

src/components/Messages.css

@@ -1,7 +1,6 @@
 .message-content {
   overflow-y: auto;
   height: calc(100% - 160px);
-  padding: 0;
 }
 
 .message-grid {
@@ -19,7 +18,7 @@
   border-radius: 5px;
   margin-bottom: 4px;
   max-width: 70%;
-  background: var(--ion-color-primary);
+  background: var(--ion-color-secondary);
   color: #fff;
 }
 
@@ -28,7 +27,7 @@
   border-radius: 5px;
   margin-bottom: 4px;
   max-width: 70%;
-  background: var(--ion-color-secondary);
+  background: var(--ion-color-primary);
   color: #fff;
 }
 
@@ -41,14 +40,10 @@
   padding-top: 5px;
 }
 
-ion-textarea {
-  border: solid 1px #999;
-}
-
 .message-input {
   width: 100%;
   height: 100%;
-  border: 1px solid #999;
+  border: 1px solid var(--ion-color-secondary);
   border-radius: 5px;
   text-align: left;
 }

src/components/OnlineList.css

@@ -1,16 +1,21 @@
 .online-content {
   height: calc(100% - 160px);
-  padding: 0;
+}
+
+.online-header {
+  color: var(--ion-color-primary);
+  font-size: 20px;
 }
 
 .online-list {
-  padding-top: 2px;
+  padding-top: 0;
+  padding-bottom: 4px;
 }
 
 .online-item {
   --padding-start: 12px;
   --min-height: 0;
-  color: var(--ion-color-primary);
+  color: var(--ion-color-secondary);
 }
 
 .online-label {

src/components/OnlineList.tsx

@@ -1,4 +1,4 @@
-import { IonContent, IonItem, IonLabel, IonList } from '@ionic/react';
+import { IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
 import React from 'react';
 import './OnlineList.css';
 
@@ -10,6 +10,7 @@ type OnlineListProps = {
 const OnlineList: React.FC<OnlineListProps> = ({ pane, userList }) => {
   return (
     <IonContent style={{ display: pane === 'online' ? null : 'none' }} class="online-content">
+      <IonListHeader class="online-header">Online</IonListHeader>
       <IonList class="online-list">
         {Array.from(userList.values()).map((user) => {
           return (

src/components/RoomHeader.tsx

@@ -54,7 +54,7 @@ const RoomHeader: React.FC<RoomHeaderProps> = ({ roomId, userId, ownerId }) => {
             value={videoUrl}
             onSubmit={onSubmit}
           ></IonInput>
-          <IonFabButton slot="end" size="small" onClick={onSubmit}>
+          <IonFabButton disabled={videoUrl === ''} slot="end" size="small" onClick={onSubmit}>
             <IonIcon icon={add}></IonIcon>
           </IonFabButton>
         </>

src/theme/variables.css

@@ -12,12 +12,12 @@ http://ionicframework.com/docs/theming/ */
   --ion-color-primary-tint: #4c8dff;
 
   /** secondary **/
-  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary: #0ec7ab;
-  --ion-color-secondary-rgb: 61, 194, 255;
+  --ion-color-secondary-rgb: 14, 199, 171;
-  --ion-color-secondary-contrast: #ffffff;
+  --ion-color-secondary-contrast: #000000;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
+  --ion-color-secondary-contrast-rgb: 0, 0, 0;
-  --ion-color-secondary-shade: #36abe0;
+  --ion-color-secondary-shade: #0caf96;
-  --ion-color-secondary-tint: #50c8ff;
+  --ion-color-secondary-tint: #26cdb3;
 
   /** tertiary **/
   --ion-color-tertiary: #5260ff;
@@ -113,12 +113,12 @@ http://ionicframework.com/docs/theming/ */
     --ion-color-primary-shade: #3a7be0;
     --ion-color-primary-tint: #5598ff;
 
-    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary: #0ec7ab;
-    --ion-color-secondary-rgb: 80, 200, 255;
+    --ion-color-secondary-rgb: 14, 199, 171;
-    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast: #000000;
-    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-contrast-rgb: 0, 0, 0;
-    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-shade: #0caf96;
-    --ion-color-secondary-tint: #62ceff;
+    --ion-color-secondary-tint: #26cdb3;
 
     --ion-color-tertiary: #6a64ff;
     --ion-color-tertiary-rgb: 106, 100, 255;