From 979372c6c8b1ae3be4ca30a6492c36606a59bbf2 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Mon, 14 Feb 2022 23:41:41 -0800 Subject: [PATCH 1/3] Add a follow us on GitHub button to the login page --- packages/web/components/elements/Button.tsx | 18 ++++++++++++ .../web/components/templates/LoginLayout.tsx | 29 ++++++++++++++++++- .../web/components/tokens/stitches.config.ts | 1 + 3 files changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index bffd5dc1a..257d7813e 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -30,6 +30,24 @@ export const Button = styled('button', { bg: '$omnivoreCtaYellow', p: '10px 12px', }, + ctaLightGray: { + border: 0, + fontSize: '14px', + fontWeight: 500, + fontStyle: 'normal', + fontFamily: 'Inter', + borderRadius: '8px', + cursor: 'pointer', + color: '$omnivoreGray', + p: '10px 12px', + bg: 'rgb(125, 125, 125, 0)', + '&:hover': { + bg: 'rgb(125, 125, 125, 0.1)', + }, + '@xsmDown': { + visibility: 'collapse', + } + }, ctaGray: { border: 0, fontSize: '14px', diff --git a/packages/web/components/templates/LoginLayout.tsx b/packages/web/components/templates/LoginLayout.tsx index a383b09c6..20d01462f 100644 --- a/packages/web/components/templates/LoginLayout.tsx +++ b/packages/web/components/templates/LoginLayout.tsx @@ -1,9 +1,12 @@ -import { Box, MediumBreakpointBox, VStack } from '../elements/LayoutPrimitives' +import { Box, HStack, MediumBreakpointBox, SpanBox, VStack } from '../elements/LayoutPrimitives' import { LoginForm } from './LoginForm' import type { LoginFormProps } from './LoginForm' import Image from 'next/image' import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo' import { theme } from '../tokens/stitches.config' +import Link from 'next/link' +import { Star } from 'phosphor-react' +import { Button } from '../elements/Button' export function LoginLayout(props: LoginFormProps): JSX.Element { return ( @@ -25,9 +28,33 @@ export function LoginLayout(props: LoginFormProps): JSX.Element { alignItems: 'center', '@md': { width: '50%' }, '@xsDown': { height: '48px' }, + justifyContent: 'space-between', + width: '100%', }} > + + + + + ) diff --git a/packages/web/components/tokens/stitches.config.ts b/packages/web/components/tokens/stitches.config.ts index fc4152efe..52e2c1795 100644 --- a/packages/web/components/tokens/stitches.config.ts +++ b/packages/web/components/tokens/stitches.config.ts @@ -159,6 +159,7 @@ export const { styled, css, theme, getCssText, globalCss, keyframes, config } = }, }, media: { + xsmDown: '(max-width: 375px)', smDown: '(max-width: 575px)', mdDown: '(max-width: 768px)', sm: '(min-width: 576px)', From a050e44e4aafc388b2667ee73689a4a447fcde44 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 15 Feb 2022 09:16:59 -0800 Subject: [PATCH 2/3] Use the OctoCat icon instead of the star icon --- packages/web/components/elements/Button.tsx | 6 +++++- packages/web/components/templates/LoginLayout.tsx | 13 +++++++------ 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index 257d7813e..103109699 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -42,11 +42,15 @@ export const Button = styled('button', { p: '10px 12px', bg: 'rgb(125, 125, 125, 0)', '&:hover': { + bg: 'rgb(47, 47, 47, 0.1)', + }, + '@md': { bg: 'rgb(125, 125, 125, 0.1)', }, '@xsmDown': { visibility: 'collapse', - } + }, + }, ctaGray: { border: 0, diff --git a/packages/web/components/templates/LoginLayout.tsx b/packages/web/components/templates/LoginLayout.tsx index 20d01462f..b7bdf065f 100644 --- a/packages/web/components/templates/LoginLayout.tsx +++ b/packages/web/components/templates/LoginLayout.tsx @@ -35,22 +35,23 @@ export function LoginLayout(props: LoginFormProps): JSX.Element { From 40cf918fceaca108db026f402abd15471c221e26 Mon Sep 17 00:00:00 2001 From: Jackson Harper Date: Tue, 15 Feb 2022 09:25:02 -0800 Subject: [PATCH 3/3] Formatting on octocat icon, use noreferrer when opening a tab to GitHub --- packages/web/components/templates/LoginLayout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web/components/templates/LoginLayout.tsx b/packages/web/components/templates/LoginLayout.tsx index b7bdf065f..e1abcd1bc 100644 --- a/packages/web/components/templates/LoginLayout.tsx +++ b/packages/web/components/templates/LoginLayout.tsx @@ -43,13 +43,13 @@ export function LoginLayout(props: LoginFormProps): JSX.Element { lineHeight: '100%', textDecoration: 'none', }}> - +