diff --git a/src/assets/Quicksand-VariableFont_wght.ttf b/src/assets/Quicksand-VariableFont_wght.ttf new file mode 100644 index 0000000..887908a Binary files /dev/null and b/src/assets/Quicksand-VariableFont_wght.ttf differ diff --git a/src/components/Frame.tsx b/src/components/Frame.tsx index 649eb93..93c3973 100644 --- a/src/components/Frame.tsx +++ b/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 = ({ ownerId, roomId, userId, userList, joinTi setPane('settings')}> - + diff --git a/src/components/Player/GetExtension.tsx b/src/components/Player/GetExtension.tsx index aba8f98..fa64088 100644 --- a/src/components/Player/GetExtension.tsx +++ b/src/components/Player/GetExtension.tsx @@ -8,7 +8,11 @@ const GetExtension: React.FC = () => { return ( Browser extension installation is required. - + diff --git a/src/pages/Home.css b/src/pages/Home.css index b3e941a..e70fb79 100644 --- a/src/pages/Home.css +++ b/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 { diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index ae3c754..cfd33c2 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -103,52 +103,69 @@ const Home: React.FC = () => { ) : ( - - Step 1: + + + Watch videos online with friends! + + + -- YouTube -- Netflix -- Facebook Watch -- Vimeo -- Streamable + + + + + Request more options + + + - - - - - Create Room - - - - - Step 2: - - - - - - OR - - - - Join a room: - - - - - - setRoomLink(e.detail.value!)} - placeholder="Paste room link" - class="paste-input" - > - - - - - {valid ? <> : showError()} + + + Step 1: + + + + + Create Room + + + + + Step 2: + + + + + + OR + + + + Join a room: + + + + + + setRoomLink(e.detail.value!)} + placeholder="Paste room link" + class="paste-input" + > + + + + + {valid ? <> : showError()} + + diff --git a/src/theme/variables.css b/src/theme/variables.css index 624c01f..54aa43a 100644 --- a/src/theme/variables.css +++ b/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 {