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,10 +103,25 @@ const Home: React.FC = () => {
         ) : (
           <IonGrid class="home-grid">
             <IonRow>
-              <IonCol size="12" class="first-step-col">
+              <IonCol size="12" sizeLg="6" class="intro-col">
-                Step 1:
+                <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>
+              <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">
@@ -119,7 +134,7 @@ const Home: React.FC = () => {
                 </IonRow>
                 <IonRow>
                   <IonCol size="12" class="share-col">
-                Share the link with friends!
+                    Share the link.
                   </IonCol>
                 </IonRow>
                 <IonRow>
@@ -151,6 +166,8 @@ const Home: React.FC = () => {
                     {valid ? <></> : showError()}
                   </IonCol>
                 </IonRow>
+              </IonCol>
+            </IonRow>
           </IonGrid>
         )}
       </IonContent>

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;
+  font-weight: normal;
-  src: url('../assets/OpenSans-SemiBold.ttf');
+  src: url('../assets/Quicksand-VariableFont_wght.ttf');
 }
 
 @font-face {