changed homepage styling

src/components/Frame.tsx

@@ -1,5 +1,5 @@
 import { IonCard, IonIcon, IonSegment, IonSegmentButton } from '@ionic/react';
-import { chatboxOutline, informationCircleOutline, peopleOutline } from 'ionicons/icons';
+import { chatboxOutline, cogOutline, peopleOutline } from 'ionicons/icons';
 import React, { useState } from 'react';
 import './Frame.css';
 import Messages from './Messages';
@@ -27,7 +27,7 @@ const Frame: React.FC<FrameProps> = ({ ownerId, roomId, userId, userList, joinTi
           <IonIcon icon={peopleOutline}></IonIcon>
         </IonSegmentButton>
         <IonSegmentButton value="settings" onClick={() => setPane('settings')}>
-          <IonIcon icon={informationCircleOutline}></IonIcon>
+          <IonIcon icon={cogOutline}></IonIcon>
         </IonSegmentButton>
       </IonSegment>
 

src/components/Player/GetExtension.tsx

@@ -8,7 +8,11 @@ const GetExtension: React.FC = () => {
   return (
     <IonContent class="extension-content">
       <IonListHeader>Browser extension installation is required.</IonListHeader>
-      <IonRouterLink href="https://chrome.google.com/webstore/search/TurtleTv" target="_blank" class="ext-link">
+      <IonRouterLink
+        href="https://chrome.google.com/webstore/detail/turtle/impnlaffkhninicciominkpmacjebogd"
+        target="_blank"
+        class="ext-link"
+      >
         <IonImg src={chrome} alt="Get the extension for Chrome" class="chrome-ext-img"></IonImg>
       </IonRouterLink>
       <IonRouterLink href="https://addons.mozilla.org/en-US/firefox/addon/turtletv/" target="_blank" class="ext-link">

src/pages/Home.css

@@ -5,12 +5,30 @@
   --background-focused: var(--ion-color-secondary);
 }
 
+.intro-col {
+  color: var(--ion-color-primary);
+}
+
+.intro-header {
+  font-size: 36px;
+  margin-top: 40px;
+}
+
+.support-col {
+  margin-top: 30px;
+}
+
+.request-col {
+  margin-top: 30px;
+}
+
 .home-content {
   --background: var(--ion-color-light-shade);
 }
 
 .home-grid {
-  max-width: 500px;
+  font-family: 'custom-head';
+  max-width: 800px;
   font-size: 26px;
   color: var(--ion-color-secondary);
   text-align: center;
@@ -27,7 +45,7 @@ ion-title {
 }
 
 .first-step-col {
-  margin-top: 15%;
+  margin-top: 30px;
 }
 
 .create-col {
@@ -46,6 +64,7 @@ ion-title {
 
 .paste-col {
   padding: 0;
+  margin-bottom: 50px;
 }
 
 .paste-toolbar {

src/pages/Home.tsx

@@ -103,52 +103,69 @@ const Home: React.FC = () => {
         ) : (
           <IonGrid class="home-grid">
             <IonRow>
-              <IonCol size="12" class="first-step-col">
-                Step 1:
+              <IonCol size="12" sizeLg="6" class="intro-col">
+                <IonRow>
+                  <IonCol class="intro-header">Watch videos online with friends!</IonCol>
+                </IonRow>
+                <IonRow>
+                  <IonCol class="support-col">-- YouTube -- Netflix -- Facebook Watch -- Vimeo -- Streamable</IonCol>
+                </IonRow>
+                <IonRow>
+                  <IonCol class="request-col">
+                    <a href="https://discord.gg/NEw3Msu" target="_blank">
+                      Request more options
+                    </a>
+                  </IonCol>
+                </IonRow>
               </IonCol>
-            </IonRow>
-            <IonRow>
-              <IonCol size="12" class="create-col">
-                <IonButton onClick={createRoom} class="create-room">
-                  Create Room
-                </IonButton>
-              </IonCol>
-            </IonRow>
-            <IonRow>
-              <IonCol size="12">Step 2:</IonCol>
-            </IonRow>
-            <IonRow>
-              <IonCol size="12" class="share-col">
-                Share the link with friends!
-              </IonCol>
-            </IonRow>
-            <IonRow>
-              <IonCol size="12">OR</IonCol>
-            </IonRow>
-            <IonRow>
-              <IonCol size="12" class="join-col">
-                Join a room:
-              </IonCol>
-            </IonRow>
-            <IonRow>
-              <IonCol size="12" class="paste-col">
-                <IonToolbar class="paste-toolbar">
-                  <IonInput
-                    onIonChange={(e) => setRoomLink(e.detail.value!)}
-                    placeholder="Paste room link"
-                    class="paste-input"
-                  ></IonInput>
-                  <IonFabButton
-                    slot="end"
-                    size="small"
-                    disabled={roomLink === ''}
-                    onClick={joinRoom}
-                    class="paste-button"
-                  >
-                    <IonIcon icon={enterOutline}></IonIcon>
-                  </IonFabButton>
-                </IonToolbar>
-                {valid ? <></> : showError()}
+              <IonCol size="12" sizeLg="6">
+                <IonRow>
+                  <IonCol class="first-step-col">Step 1:</IonCol>
+                </IonRow>
+                <IonRow>
+                  <IonCol size="12" class="create-col">
+                    <IonButton onClick={createRoom} class="create-room">
+                      Create Room
+                    </IonButton>
+                  </IonCol>
+                </IonRow>
+                <IonRow>
+                  <IonCol size="12">Step 2:</IonCol>
+                </IonRow>
+                <IonRow>
+                  <IonCol size="12" class="share-col">
+                    Share the link.
+                  </IonCol>
+                </IonRow>
+                <IonRow>
+                  <IonCol size="12">OR</IonCol>
+                </IonRow>
+                <IonRow>
+                  <IonCol size="12" class="join-col">
+                    Join a room:
+                  </IonCol>
+                </IonRow>
+                <IonRow>
+                  <IonCol size="12" class="paste-col">
+                    <IonToolbar class="paste-toolbar">
+                      <IonInput
+                        onIonChange={(e) => setRoomLink(e.detail.value!)}
+                        placeholder="Paste room link"
+                        class="paste-input"
+                      ></IonInput>
+                      <IonFabButton
+                        slot="end"
+                        size="small"
+                        disabled={roomLink === ''}
+                        onClick={joinRoom}
+                        class="paste-button"
+                      >
+                        <IonIcon icon={enterOutline}></IonIcon>
+                      </IonFabButton>
+                    </IonToolbar>
+                    {valid ? <></> : showError()}
+                  </IonCol>
+                </IonRow>
               </IonCol>
             </IonRow>
           </IonGrid>

src/theme/variables.css

@@ -158,10 +158,10 @@ http://ionicframework.com/docs/theming/ */
 }
 
 @font-face {
-  font-family: 'custom';
+  font-family: 'custom-head';
   font-style: normal;
-  font-weight: bold;
-  src: url('../assets/OpenSans-SemiBold.ttf');
+  font-weight: normal;
+  src: url('../assets/Quicksand-VariableFont_wght.ttf');
 }
 
 @font-face {