diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx index bffd5dc1a..103109699 100644 --- a/packages/web/components/elements/Button.tsx +++ b/packages/web/components/elements/Button.tsx @@ -30,6 +30,28 @@ 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(47, 47, 47, 0.1)', + }, + '@md': { + 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..e1abcd1bc 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,34 @@ 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)',