Fix home page styling

src/react-components/home/HomePage.js

@@ -9,7 +9,7 @@ import MediaTiles from "../media-tiles";
 import { CreateRoomButton } from "../input/CreateRoomButton";
 import { PWAButton } from "../input/PWAButton";
 import { useFeaturedRooms } from "./useFeaturedRooms";
-import styles from "../../assets/stylesheets/index.scss";
+import styles from "./HomePage.scss";
 import mediaBrowserStyles from "../../assets/stylesheets/media-browser.scss";
 import discordLogoSmall from "../../assets/images/discord-logo-small.png";
 import { AuthContext } from "../auth/AuthContext";
@@ -43,7 +43,7 @@ export function HomePage() {
   const canCreateRooms = !configs.feature("disable_room_creation") || auth.isAdmin;
 
   return (
-    <Page>
+    <Page className={styles.homePage}>
       <div className={styles.heroContent} style={{ backgroundImage: configs.image("home_background", true) }}>
         <div className={styles.heroPanel}>
           <div className={styles.container}>

src/assets/stylesheets/index.scss → src/react-components/home/HomePage.scss

@@ -1,5 +1,9 @@
-@import 'root-vars';
-@import 'shared';
+@import '../../assets/stylesheets/root-vars';
+@import '../../assets/stylesheets/shared';
+
+:local(.home-page) {
+  flex: 1;
+}
 
 :local(.video-container) {
   position: absolute;

src/react-components/input/Button.scss

@@ -0,0 +1,31 @@
+
+@import '../../assets/stylesheets/root-vars';
+@import '../../assets/stylesheets/shared';
+
+:local(.primary-button) {
+  @extend %big-action-button;
+}
+
+:local(.cta-button) {
+  font-size: 14pt;
+  width: 19em;
+  margin-right: 1em;
+
+  @media (max-width: 380px) {
+    width: 18em;
+  }
+}
+
+:local(.secondary-button) {
+  @extend %action-button-secondary;
+  display: flex;
+  flex-direction: row;
+  width: 250px;
+  margin-top: 18px;
+  margin-bottom: 18px;
+  padding-right: 20px;
+
+  i {
+    margin-right: 16px;
+  }
+}

src/react-components/input/CreateRoomButton.js

@@ -2,7 +2,7 @@ import React from "react";
 import classNames from "classnames";
 import { FormattedMessage } from "react-intl";
 import { createAndRedirectToNewHub } from "../../utils/phoenix-utils";
-import styles from "../../assets/stylesheets/index.scss";
+import styles from "./Button.scss";
 
 export function CreateRoomButton() {
   return (

src/react-components/input/PWAButton.js

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { FormattedMessage } from "react-intl";
 import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import styles from "../../assets/stylesheets/index.scss";
+import styles from "./Button.scss";
 import checkIsMobile from "../../utils/is-mobile";
 
 const isMobile = checkIsMobile();

src/react-components/layout/Page.js

@@ -4,16 +4,17 @@ import "./Page.scss";
 import { Header } from "./Header";
 import { Footer } from "./Footer";
 
-export function Page({ children }) {
+export function Page({ children, className }) {
   return (
     <>
       <Header />
-      <main>{children}</main>
+      <main className={className}>{children}</main>
       <Footer />
     </>
   );
 }
 
 Page.propTypes = {
+  className: PropTypes.string,
   children: PropTypes.node
 };