added about page, made more CSS styling

5 years ago · 85ac020a5d
parent 9abcfd4015
commit 85ac020a5d
11 changed files with 113 additions and 25 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
--- a/src/components/About.css
+++ b/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);
+}
--- a/src/components/About.tsx
+++ b/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;
--- a/src/components/Frame.css
+++ b/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);
+}
--- a/src/components/Frame.tsx
+++ b/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>
  );
 };
--- a/src/components/Messages.css
+++ b/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;
 }
--- a/src/components/OnlineList.css
+++ b/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 {
--- a/src/components/OnlineList.tsx
+++ b/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 (
--- a/src/components/RoomHeader.tsx
+++ b/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>
        </>
--- a/src/theme/variables.css
+++ b/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-rgb: 61, 194, 255;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #36abe0;
-  --ion-color-secondary-tint: #50c8ff;
+  --ion-color-secondary: #0ec7ab;
+  --ion-color-secondary-rgb: 14, 199, 171;
+  --ion-color-secondary-contrast: #000000;
+  --ion-color-secondary-contrast-rgb: 0, 0, 0;
+  --ion-color-secondary-shade: #0caf96;
+  --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-rgb: 80, 200, 255;
-    --ion-color-secondary-contrast: #ffffff;
-    --ion-color-secondary-contrast-rgb: 255, 255, 255;
-    --ion-color-secondary-shade: #46b0e0;
-    --ion-color-secondary-tint: #62ceff;
+    --ion-color-secondary: #0ec7ab;
+    --ion-color-secondary-rgb: 14, 199, 171;
+    --ion-color-secondary-contrast: #000000;
+    --ion-color-secondary-contrast-rgb: 0, 0, 0;
+    --ion-color-secondary-shade: #0caf96;
+    --ion-color-secondary-tint: #26cdb3;

    --ion-color-tertiary: #6a64ff;
    --ion-color-tertiary-rgb: 106, 100, 255;