From 09267959ab9628ec3faac1256acd8d713610f21e Mon Sep 17 00:00:00 2001 From: Robert Long Date: Fri, 8 Jan 2021 13:35:12 -0800 Subject: [PATCH 1/6] Landing Page Redesign WIP --- src/assets/locales/ja.json | 2 +- src/assets/locales/pt.json | 2 +- src/assets/locales/ru.json | 2 +- src/assets/locales/zh.json | 2 +- src/assets/stylesheets/ui-root.scss | 1 - src/index.html | 2 +- src/index.js | 1 - src/react-components/home/Button.scss | 6 +- src/react-components/home/CreateRoomButton.js | 6 +- src/react-components/home/HomePage.js | 98 +++++------- src/react-components/home/HomePage.scss | 86 +++++------ src/react-components/home/PWAButton.js | 13 +- src/react-components/input/Button.js | 10 +- src/react-components/input/Button.scss | 14 ++ src/react-components/layout/Container.js | 22 +++ src/react-components/layout/Container.scss | 27 ++++ src/react-components/layout/Footer.js | 124 ++++++++------- src/react-components/layout/Footer.scss | 82 +++++----- src/react-components/layout/Header.js | 141 +++++++++--------- src/react-components/layout/Header.scss | 37 +++-- src/react-components/layout/Page.js | 9 ++ src/react-components/layout/Page.scss | 32 +--- src/react-components/layout/PageContainer.js | 3 + src/react-components/styles/theme.scss | 1 + 24 files changed, 391 insertions(+), 332 deletions(-) create mode 100644 src/react-components/layout/Container.js create mode 100644 src/react-components/layout/Container.scss diff --git a/src/assets/locales/ja.json b/src/assets/locales/ja.json index 0478e328a0..64f5b2e210 100644 --- a/src/assets/locales/ja.json +++ b/src/assets/locales/ja.json @@ -43,7 +43,7 @@ "header.sign-out": "サインアウト", "header.signed-in-as": "ログインしました {email}", "header.source": "ソース", - "home-page.add-to-discord": "Discordに {appName} Bot を追加する", + "home-page.add-to-discord": "Discordに {appName} Bot を追加する", "home-page.have-code": "ルームコードをお持ちですか？", "hubs-cloud-page.get-started": "クイックスタートガイド", "hubs-cloud-page.hero-button.enterprise": "Get Hubs Cloud Enterprise", diff --git a/src/assets/locales/pt.json b/src/assets/locales/pt.json index 47789280fe..f1366ce0c3 100644 --- a/src/assets/locales/pt.json +++ b/src/assets/locales/pt.json @@ -42,7 +42,7 @@ "header.sign-in": "Entrar", "header.sign-out": "Sair", "header.signed-in-as": "Entrou como {email}", - "home-page.add-to-discord": "Adicionar o Bot {appName} ao Discord", + "home-page.add-to-discord": "Adicionar o Bot {appName} ao Discord", "home-page.have-code": "Tém um código de sala?", "hubs-cloud-page.get-started": "Guia rápido", "hubs-cloud-page.hero-button.enterprise": "Adquira o Hubs Cloud Enterprise", diff --git a/src/assets/locales/ru.json b/src/assets/locales/ru.json index b56518ade1..ca9e666619 100644 --- a/src/assets/locales/ru.json +++ b/src/assets/locales/ru.json @@ -46,7 +46,7 @@ "header.sign-out": "Выйти из системы", "header.signed-in-as": "Учётная запись {email}", "header.source": "Источник", - "home-page.add-to-discord": "Добавить бот {appName} в Discord", + "home-page.add-to-discord": "Добавить бот {appName} в Discord", "home-page.have-code": "У вас есть код комнаты?", "hubs-cloud-page.get-started": "Руководство для быстрого старта", "hubs-cloud-page.hero-button.enterprise": "Настроить корпоративный Hubs Cloud", diff --git a/src/assets/locales/zh.json b/src/assets/locales/zh.json index 3901ed6423..9297b03d17 100644 --- a/src/assets/locales/zh.json +++ b/src/assets/locales/zh.json @@ -46,7 +46,7 @@ "header.sign-out": "退出", "header.signed-in-as": "登录为 {email}", "header.source": "来源", - "home-page.add-to-discord": "添加 {appName} 自动程序 到Discord", + "home-page.add-to-discord": "添加 {appName} 自动程序 到Discord", "home-page.have-code": "持有房间号?", "hubs-cloud-page.get-started": "快速开始指南", "hubs-cloud-page.hero-button.enterprise": "获得企业 Hubs Cloud", diff --git a/src/assets/stylesheets/ui-root.scss b/src/assets/stylesheets/ui-root.scss index fa2aaafb83..637591ae3e 100644 --- a/src/assets/stylesheets/ui-root.scss +++ b/src/assets/stylesheets/ui-root.scss @@ -144,7 +144,6 @@ body.vr-mode { span { font-size: 22px; font-weight: bold; - font-family: 'Open Sans', sans-serif; } @media(min-width: 501px) { width: 90px; diff --git a/src/index.html b/src/index.html index 8a35b5dcae..27dda01445 100644 --- a/src/index.html +++ b/src/index.html @@ -12,7 +12,7 @@ - + diff --git a/src/index.js b/src/index.js index a9199de3ef..114ef37273 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,6 @@ import registerTelemetry from "./telemetry"; import Store from "./storage/store"; import "./utils/theme"; import { HomePage } from "./react-components/home/HomePage"; -import "./assets/stylesheets/globals.scss"; import { AuthContextProvider } from "./react-components/auth/AuthContext"; registerTelemetry("/home", "Hubs Home Page"); diff --git a/src/react-components/home/Button.scss b/src/react-components/home/Button.scss index 7538b88639..ea08dc4541 100644 --- a/src/react-components/home/Button.scss +++ b/src/react-components/home/Button.scss @@ -1,9 +1,8 @@ -@import '../../assets/stylesheets/root-vars'; -@import '../../assets/stylesheets/shared'; +@use "../styles/theme.scss"; :local(.primary-button) { - @extend %big-action-button; + } :local(.cta-button) { @@ -17,7 +16,6 @@ } :local(.secondary-button) { - @extend %action-button-secondary; display: flex; flex-direction: row; width: 250px; diff --git a/src/react-components/home/CreateRoomButton.js b/src/react-components/home/CreateRoomButton.js index e9ecf24722..88631318a4 100644 --- a/src/react-components/home/CreateRoomButton.js +++ b/src/react-components/home/CreateRoomButton.js @@ -1,13 +1,13 @@ import React from "react"; import { FormattedMessage } from "react-intl"; import { createAndRedirectToNewHub } from "../../utils/phoenix-utils"; -import { Button } from "./Button"; +import { Button } from "../input/Button"; export function CreateRoomButton() { return ( + ); } diff --git a/src/react-components/home/HomePage.scss b/src/react-components/home/HomePage.scss index 5975e30d44..89a275cb0b 100644 --- a/src/react-components/home/HomePage.scss +++ b/src/react-components/home/HomePage.scss @@ -1,4 +1,4 @@ -@import '../../assets/stylesheets/shared'; +@use "../styles/theme.scss"; :local(.home-page) { flex: 1; @@ -6,7 +6,8 @@ padding: 1.5em; flex-direction: column; align-items: center; - @media (min-width: $breakpoint-lg) { + + @media (min-width: theme.$breakpoint-lg) { align-items: center; justify-content: flex-start; } @@ -16,6 +17,16 @@ } } +:local(.hero) { + display: flex; +} + +:local(.hero-image-container) { + img { + border-radius: 16px; + } +} + :local(.app-info) { display: flex; flex-direction: column; @@ -28,23 +39,18 @@ :local(.app-description) { white-space: pre-wrap; align-self: auto; - font-size: 14pt; + font-size: theme.$font-size-2xl; + font-weight: theme.$font-weight-medium; text-align: center; margin: 0.5em 0; margin-bottom: 1em; - - @media (min-width: $breakpoint-lg) { - font-size: 18pt; - align-self: flex-start; - text-align: start; - } } :local(.logo-container) { max-width: 250px; align-self: auto; - @media (min-width: $breakpoint-lg) { + @media (min-width: theme.$breakpoint-lg) { align-self: flex-start; } @@ -71,43 +77,29 @@ background-color: var(--home-media-panel-background-color); } -:local(.secondary-links) { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - font-weight: bold; - color: var(--home-header-link-color); - - & > * { - display: flex; - align-items: center; - margin-top: 8px; - } - - img { - width: 24px; - height: 24px; - } - - a { - color: var(--home-header-link-color); - margin-right: 4px; - margin-left: 2px; - } -} - :local(.features) { + width: 100%; display: flex; - padding: 1em; + justify-content: space-between; background-color: var(--home-media-panel-background-color); - margin-bottom: 2em; + margin-bottom: 24px; & > * { - margin: 0 2em; - @media(min-width: $breakpoint-lg) { + margin-bottom: 24px; + + &:last-child { + margin-bottom: 0; + } + + @media(min-width: theme.$breakpoint-lg) { + margin-right: 24px; + margin-bottom: 0; flex-direction: row; - max-width: 310px; + max-width: 364px; + + &:last-child { + margin-right: 0; + } } } @@ -125,18 +117,20 @@ :local(.col-lg) { flex-direction: column; - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { flex-direction: row; } } -:local(.center) { - justify-content: center; - text-align: center; +:local(.card) { + background-color: theme.$recessed-bg; + border-radius: 16px; + font-weight: theme.$font-weight-medium; + padding-bottom: 32px !important; } :local(.center-lg) { - @media(max-width: $breakpoint-lg) { + @media(max-width: theme.$breakpoint-lg) { text-align: center; align-items: center; } diff --git a/src/react-components/home/PWAButton.js b/src/react-components/home/PWAButton.js index 64988294ef..13a9b4c758 100644 --- a/src/react-components/home/PWAButton.js +++ b/src/react-components/home/PWAButton.js @@ -1,8 +1,7 @@ import React from "react"; import { FormattedMessage } from "react-intl"; -import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Button } from "./Button"; +import { ReactComponent as AddIcon } from "../icons/Add.svg"; +import { IconButton } from "../input/IconButton"; import checkIsMobile from "../../utils/is-mobile"; import { useInstallPWA } from "./useInstallPWA"; @@ -14,16 +13,14 @@ export function PWAButton() { return ( <> {pwaAvailable && ( - + )} ); diff --git a/src/react-components/input/Button.js b/src/react-components/input/Button.js index e3b17d2e83..cbd1bcdfb4 100644 --- a/src/react-components/input/Button.js +++ b/src/react-components/input/Button.js @@ -8,13 +8,19 @@ import { FormattedMessage } from "react-intl"; export const presets = ["transparent", "basic", "accept", "cancel", "red", "orange", "green", "blue", "purple"]; export const Button = memo( - forwardRef(({ as, sm, preset, className, children, ...rest }, ref) => { + forwardRef(({ as, sm, lg, xl, preset, className, children, ...rest }, ref) => { const ButtonComponent = as; const buttonProps = ButtonComponent === "button" ? { type: "button" } : {}; return ( + {children} + + ); +} + +Container.defaultProps = { + as: "section" +}; + +Container.propTypes = { + as: PropTypes.elementType, + children: PropTypes.node, + className: PropTypes.string +}; diff --git a/src/react-components/layout/Container.scss b/src/react-components/layout/Container.scss new file mode 100644 index 0000000000..bdaa18ac47 --- /dev/null +++ b/src/react-components/layout/Container.scss @@ -0,0 +1,27 @@ +@use "../styles/theme.scss"; + +:local(.container) { + display: flex; + margin: auto; + max-width: 100%; + + @media(min-width: theme.$breakpoint-sm) { + max-width: 540px; + } + + @media(min-width: theme.$breakpoint-md) { + max-width: 720px; + } + + @media(min-width: theme.$breakpoint-lg) { + max-width: 960px; + } + + @media(min-width: theme.$breakpoint-xl) { + max-width: 1140px; + } + + @media(min-width: theme.$breakpoint-xxl) { + max-width: 1140px; + } +} \ No newline at end of file diff --git a/src/react-components/layout/Footer.js b/src/react-components/layout/Footer.js index 0e42432f96..6dbbb0f684 100644 --- a/src/react-components/layout/Footer.js +++ b/src/react-components/layout/Footer.js @@ -2,6 +2,8 @@ import React from "react"; import PropTypes from "prop-types"; import { FormattedMessage } from "react-intl"; import styles from "./Footer.scss"; +import discordLogoUrl from "../../assets/images/discord-logo-small.png"; +import { Container } from "./Container"; export function Footer({ hidePoweredBy, @@ -11,60 +13,78 @@ export function Footer({ showPrivacy, privacyUrl, showCompanyLogo, - companyLogoUrl + companyLogoUrl, + showDiscordBotLink, + appName }) { return (
-
- {!hidePoweredBy && ( - ( - - {chunks} - - ) - }} - /> - )} -
- + + +
); } @@ -77,5 +97,7 @@ Footer.propTypes = { showPrivacy: PropTypes.bool, privacyUrl: PropTypes.string, showCompanyLogo: PropTypes.bool, - companyLogoUrl: PropTypes.string + companyLogoUrl: PropTypes.string, + showDiscordBotLink: PropTypes.bool, + appName: PropTypes.string }; diff --git a/src/react-components/layout/Footer.scss b/src/react-components/layout/Footer.scss index 77be0dcc42..e46bcd7502 100644 --- a/src/react-components/layout/Footer.scss +++ b/src/react-components/layout/Footer.scss @@ -1,33 +1,17 @@ -@import '../../assets/stylesheets/shared'; +@use "../styles/theme.scss"; footer { display: block; - background-color: var(--home-footer-background-color); - - @media(min-width: $breakpoint-lg) { - display: flex; - flex-direction: row; - margin-top: auto; - justify-content: space-between; - padding: 1em 0; - align-items: center; - background-color: transparent; - } - - :local(.powered-by) { - text-align: center; - align-self: flex-end; - color: var(--home-footer-text-color); - display: flex; - justify-content: center; - flex-direction: column; - } + background-color: theme.$recessed-bg; + font-size: theme.$font-size-md; + padding: 20px; nav { - margin-bottom: 20px; - - @media(min-width: $breakpoint-lg) { - margin-bottom: 0; + display: flex; + + @media(min-width: theme.$breakpoint-lg) { + justify-content: flex-end; + flex-direction: row; } ul { @@ -37,33 +21,55 @@ footer { list-style: none; flex-direction: column; align-items: center; - - @media(min-width: $breakpoint-lg) { - justify-content: flex-end; - flex-direction: row; - } } a { - color: var(--home-footer-link-color); + color: theme.$black; font-weight: bold; } li { padding-top: 20px; - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { padding-top: 0; margin-right: 20px; } } + } +} - :local(.company-logo) { - height: 49px; +:local(.container) { + @media(min-width: theme.$breakpoint-lg) { + height: 80px; + min-height: 80px; + padding: 0; + } +} - @media(min-width: $breakpoint-lg) { - margin-left: 18px; - } - } +:local(.powered-by) { + text-align: center; + color: theme.$black; + display: flex; + justify-content: center; + flex-direction: column; + + @media(min-width: theme.$breakpoint-lg) { + margin-left: 20px; } } + +:local(.company-logo) { + height: 49px; + + @media(min-width: theme.$breakpoint-lg) { + margin-left: 18px; + } +} + +:local(.discord-logo) { + height: 24px; + width: 24px; + display: inline; + margin-right: 4px; +} diff --git a/src/react-components/layout/Header.js b/src/react-components/layout/Header.js index df8528a704..9e87569ff8 100644 --- a/src/react-components/layout/Header.js +++ b/src/react-components/layout/Header.js @@ -5,8 +5,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCog } from "@fortawesome/free-solid-svg-icons/faCog"; import maskEmail from "../../utils/mask-email"; import styles from "./Header.scss"; +import { Container } from "./Container"; export function Header({ + appLogo, showCloud, enableSpoke, editorName, @@ -22,84 +24,87 @@ export function Header({ }) { return (
- -
- {isSignedIn ? ( -
- - - {" "} - - +
+ ) : ( + + -
- ) : ( - - - - )} - + )} + +
); } Header.propTypes = { + appLogo: PropTypes.string, showCloud: PropTypes.bool, enableSpoke: PropTypes.bool, editorName: PropTypes.string, diff --git a/src/react-components/layout/Header.scss b/src/react-components/layout/Header.scss index dde901b542..887177b479 100644 --- a/src/react-components/layout/Header.scss +++ b/src/react-components/layout/Header.scss @@ -1,18 +1,17 @@ -@import '../../assets/stylesheets/shared'; +@use "../styles/theme.scss"; header { display: block; + padding: 20px; - @media(min-width: $breakpoint-lg) { - display: flex; - flex-direction: row; + @media(min-width: theme.$breakpoint-lg) { height: 65px; min-height: 65px; - padding: 0 1.75em; + padding: 0; } a { - color: var(--home-header-link-color); + color: theme.$black; font-weight: bold; text-decoration: none; white-space: nowrap; @@ -22,21 +21,22 @@ header { display: flex; flex-direction: column; - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { flex-direction: row; } li { padding-top: 20px; - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { padding-top: 0; } } a { margin: 0 16px; - font-size: 1.4em; + font-size: theme.$font-size-md; + color: theme.$black; } ul { @@ -47,28 +47,35 @@ header { flex-direction: column; align-items: center; - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { justify-content: flex-end; flex-direction: row; } } } + :local(.home-link) { + img { + height: 32px; + } + } + :local(.sign-in) { display: flex; flex-direction: column; align-items: center; padding-top: 20px; + + a { + color: theme.$blue; + font-size: theme.$font-size-md; + } - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { flex-direction: row; justify-content: flex-end; flex: 1; padding-top: 0; } - - a { - text-decoration: underline; - } } } diff --git a/src/react-components/layout/Page.js b/src/react-components/layout/Page.js index f4f4224992..6d272f4dcc 100644 --- a/src/react-components/layout/Page.js +++ b/src/react-components/layout/Page.js @@ -5,6 +5,7 @@ import { Header } from "./Header"; import { Footer } from "./Footer"; export function Page({ + appLogo, showCloud, enableSpoke, editorName, @@ -25,12 +26,15 @@ export function Page({ privacyUrl, showCompanyLogo, companyLogoUrl, + showDiscordBotLink, + appName, children, ...rest }) { return ( <>
); } Page.propTypes = { + appLogo: PropTypes.string, showCloud: PropTypes.bool, enableSpoke: PropTypes.bool, editorName: PropTypes.string, @@ -80,5 +87,7 @@ Page.propTypes = { privacyUrl: PropTypes.string, showCompanyLogo: PropTypes.bool, companyLogoUrl: PropTypes.string, + showDiscordBotLink: PropTypes.bool, + appName: PropTypes.string, children: PropTypes.node }; diff --git a/src/react-components/layout/Page.scss b/src/react-components/layout/Page.scss index 3914fe0306..e3cfe881dd 100644 --- a/src/react-components/layout/Page.scss +++ b/src/react-components/layout/Page.scss @@ -1,6 +1,4 @@ -@import '../../assets/stylesheets/root-vars'; -@import '../../assets/stylesheets/shared'; -@import '../../assets/stylesheets/loader'; +@use "../styles/theme.scss"; * { box-sizing: border-box; @@ -12,7 +10,6 @@ html, body, :global(#root), :global(#ui-root), :global(.home-root) { } body { - @extend %default-font; background: var(--home-background-color); color: var(--home-text-color); } @@ -35,34 +32,9 @@ main { order: -1; flex: 1; - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { order: 0; display: flex; flex-direction: column; } - - section { - margin: auto; - max-width: 100%; - - @media(min-width: $breakpoint-sm) { - max-width: 540px; - } - - @media(min-width: $breakpoint-md) { - max-width: 720px; - } - - @media(min-width: $breakpoint-lg) { - max-width: 960px; - } - - @media(min-width: $breakpoint-xl) { - max-width: 1140px; - } - - @media(min-width: $breakpoint-xxl) { - max-width: 1410px; - } - } } diff --git a/src/react-components/layout/PageContainer.js b/src/react-components/layout/PageContainer.js index ee4ca9833a..b383717f4c 100644 --- a/src/react-components/layout/PageContainer.js +++ b/src/react-components/layout/PageContainer.js @@ -9,6 +9,7 @@ export function PageContainer({ children, ...rest }) { return ( {children} diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss index 2ede603c2f..21754274d8 100644 --- a/src/react-components/styles/theme.scss +++ b/src/react-components/styles/theme.scss @@ -61,6 +61,7 @@ $font-size-sm: 12px; $font-size-md: 14px; $font-size-lg: 20px; $font-size-xl: 24px; +$font-size-2xl: 28px; $font-weight-regular: 400; $font-weight-medium: 500; From c6da808107c6e6f0342f1beba3c21195419a90d4 Mon Sep 17 00:00:00 2001 From: Robert Long Date: Fri, 8 Jan 2021 16:14:51 -0800 Subject: [PATCH 2/6] Polish styling for static pages --- src/assets/stylesheets/cloud.scss | 71 ++++++++-------- src/assets/stylesheets/shared.scss | 4 +- src/assets/stylesheets/support.scss | 2 +- src/assets/stylesheets/whats-new.scss | 60 ++++---------- src/avatar.html | 2 +- src/cloud.html | 2 +- src/cloud.js | 22 ++--- src/discord.html | 2 +- src/index.html | 2 +- src/link.html | 2 +- src/react-components/home/CreateRoomButton.js | 6 +- src/react-components/home/HomePage.js | 58 ++++++------- src/react-components/home/HomePage.scss | 60 ++++++++------ src/react-components/home/PWAButton.js | 5 +- src/react-components/home/PWAButton.scss | 13 +++ src/react-components/layout/Center.scss | 1 + src/react-components/layout/Footer.scss | 24 ++++-- src/react-components/layout/Header.js | 2 +- src/react-components/layout/Header.scss | 57 ++++++++----- src/react-components/layout/PageContainer.js | 3 + src/react-components/modal/Modal.scss | 1 - src/react-components/styles/global.scss | 2 +- src/scene.html | 2 +- src/signin.html | 2 +- src/signin.js | 3 +- src/verify.html | 2 +- src/verify.js | 3 +- src/whats-new.html | 2 +- src/whats-new.js | 82 +++++++++++-------- 29 files changed, 268 insertions(+), 229 deletions(-) create mode 100644 src/react-components/home/PWAButton.scss diff --git a/src/assets/stylesheets/cloud.scss b/src/assets/stylesheets/cloud.scss index da50fd05fb..84f37a6ebb 100644 --- a/src/assets/stylesheets/cloud.scss +++ b/src/assets/stylesheets/cloud.scss @@ -1,8 +1,7 @@ -@import 'root-vars'; -@import 'shared'; +@use "../../react-components/styles/theme.scss"; :local(.hero) { - background-color: #F3F3F3; + background-color: theme.$recessed-bg; & > section { display: flex; @@ -17,20 +16,20 @@ height: 240px; width: 100%; - @media(min-width: $breakpoint-sm) { + @media(min-width: theme.$breakpoint-sm) { height: 300px; } - @media(min-width: $breakpoint-md) { + @media(min-width: theme.$breakpoint-md) { height: 360px; } - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { height: 100%; } } - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { margin-right: 40px; } } @@ -38,34 +37,12 @@ :local(.hero-content) { flex: 10; - :local(.primary-button) { - margin-top: 20px; - - @media(min-width: $breakpoint-lg) { - margin-top: 0; - } - } -} - -:local(.get-started) { - margin-top: 20px; - - a { - color: var(--home-text-color); + & > * { + margin-bottom: theme.$spacing-md; } -} -:local(.primary-button) { - @extend %action-button; - height: 64px; - border-radius: 4px; - background-color: $action-color; - font-size: 1.2em; - max-width: 300px; - - @media(min-width: $breakpoint-md) { - font-size: 1em; - height: 56px; + & > :last-child { + margin-bottom: 0; } } @@ -74,19 +51,29 @@ padding: 5px; & > * { - margin: 5px; + margin: theme.$spacing-md; + } + + :local(.center) { + & > * { + margin-bottom: theme.$spacing-md; + } + + & > :last-child { + margin-bottom: 0; + } } } // Utility Classes :local(.hide-lg-down) { - @media(max-width: $breakpoint-lg) { + @media(max-width: theme.$breakpoint-lg) { display: none; } } :local(.hide-lg-up) { - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { display: none; } } @@ -94,23 +81,29 @@ :local(.row) { display: flex; justify-content: space-evenly !important; + + & > * { + margin: theme.$spacing-sm; + } } :local(.col-lg) { flex-direction: column; - @media(min-width: $breakpoint-lg) { + @media(min-width: theme.$breakpoint-lg) { flex-direction: row; } } :local(.center) { - justify-content: center; + display: flex; + flex-direction: column; + align-items: center; text-align: center; } :local(.center-lg) { - @media(max-width: $breakpoint-lg) { + @media(max-width: theme.$breakpoint-lg) { text-align: center; align-items: center; } diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss index c199ea6f83..48d5d2416f 100644 --- a/src/assets/stylesheets/shared.scss +++ b/src/assets/stylesheets/shared.scss @@ -28,11 +28,11 @@ $breakpoint-xxl: 1600px; // Extra Large Desktops } %default-font { - font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } %glass-text { - font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: var(--panel-text-color); } diff --git a/src/assets/stylesheets/support.scss b/src/assets/stylesheets/support.scss index d33506cf02..cb548f7746 100644 --- a/src/assets/stylesheets/support.scss +++ b/src/assets/stylesheets/support.scss @@ -1,5 +1,5 @@ :local(.support-main) { - font-family: 'Open Sans', sans-serif; + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; z-index: 10000; position: absolute; width: 100%; diff --git a/src/assets/stylesheets/whats-new.scss b/src/assets/stylesheets/whats-new.scss index 5fa1fe0e36..464d922c83 100644 --- a/src/assets/stylesheets/whats-new.scss +++ b/src/assets/stylesheets/whats-new.scss @@ -1,58 +1,25 @@ -@import 'shared'; -@import 'loader'; - -body { - margin: 0; - padding: 0; - @extend %default-font; -} - -html, body, #ui-root, .container { - height: 100%; -} -#ui-root > div { - display: flex; - flex-direction: column; -} -.container { - display: flex; - flex-direction: column; -} - -.header { - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; -} -.logo { - height: 3em; - margin-left: 1.5em; - vertical-align: middle; -} +@use "../../react-components/styles/theme.scss"; .main { - background: linear-gradient(to bottom, #ecfaff 0, white 30em); display: flex; justify-content: center; flex: 1; + + h1 { + font-size: theme.$font-size-xl; + text-align: center; + margin-bottom: 20px; + } } .content { padding: 1em; - width: 45em; + width: 100%; + max-width: 45em; display: flex; flex-direction: column; } -.loader-wrap { - align-self: center; -} - -h1 { - text-align: center; -} - .note-header { display: flex; @media (max-width: 768px) { @@ -63,10 +30,11 @@ h1 { margin: 0; } .title a:link, .title a:active .title a:hover, .title a:visited { - color: var(--home-text-color); + color: theme.$black; } .title { flex: 1; + margin-bottom: 16px; @media (max-width: 768px) { align-self: flex-start; } @@ -82,8 +50,14 @@ h1 { .body { margin-left: 120px; + + p { + margin-bottom: 16px; + } + @media (max-width: 768px) { margin-left: 0; } + img { width: 100%; } } diff --git a/src/avatar.html b/src/avatar.html index 68296d3ba0..7ec816df42 100644 --- a/src/avatar.html +++ b/src/avatar.html @@ -9,7 +9,7 @@ Avatar - +