diff --git a/package.json b/package.json index d173aba..afa9ee8 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,6 @@ "react-hook-form": "^7.43.7", "react-icons": "^4.8.0", "react-loading-skeleton": "^3.2.0", - "react-responsive": "^9.0.2", "react-router-dom": "^6.9.0", "react-scripts": "5.0.1", "react-spinners": "^0.13.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2643f81..9bae3ab 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,7 +26,6 @@ specifiers: react-hook-form: ^7.43.7 react-icons: ^4.8.0 react-loading-skeleton: ^3.2.0 - react-responsive: ^9.0.2 react-router-dom: ^6.9.0 react-scripts: 5.0.1 react-spinners: ^0.13.8 @@ -59,7 +58,6 @@ dependencies: react-hook-form: 7.43.7_react@18.2.0 react-icons: 4.8.0_react@18.2.0 react-loading-skeleton: 3.2.0_react@18.2.0 - react-responsive: 9.0.2_react@18.2.0 react-router-dom: 6.9.0_biqbaboplfbrettd7655fr4n2y react-scripts: 5.0.1_j5ip3o3v6sktjzl5cxtjyfbuo4 react-spinners: 0.13.8_biqbaboplfbrettd7655fr4n2y @@ -4360,10 +4358,6 @@ packages: semver: 7.3.8 webpack: 5.76.2 - /css-mediaquery/0.1.2: - resolution: {integrity: sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==} - dev: false - /css-minimizer-webpack-plugin/3.4.1_webpack@5.76.2: resolution: {integrity: sha512-1u6D71zeIfgngN2XNRJefc/hY7Ybsxd74Jm4qngIXyUEk7fss3VUzuHxLAq/R8NAba4QU9OUSaMZlbpRc7bM4Q==} engines: {node: '>= 12.13.0'} @@ -6130,10 +6124,6 @@ packages: resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==} engines: {node: '>=10.17.0'} - /hyphenate-style-name/1.0.4: - resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==} - dev: false - /iconv-lite/0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -7437,12 +7427,6 @@ packages: object-visit: 1.0.1 dev: true - /matchmediaquery/0.3.1: - resolution: {integrity: sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==} - dependencies: - css-mediaquery: 0.1.2 - dev: false - /mdn-data/2.0.14: resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==} @@ -8967,19 +8951,6 @@ packages: resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==} engines: {node: '>=0.10.0'} - /react-responsive/9.0.2_react@18.2.0: - resolution: {integrity: sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==} - engines: {node: '>=0.10'} - peerDependencies: - react: '>=16.8.0' - dependencies: - hyphenate-style-name: 1.0.4 - matchmediaquery: 0.3.1 - prop-types: 15.8.1 - react: 18.2.0 - shallow-equal: 1.2.1 - dev: false - /react-router-dom/6.9.0_biqbaboplfbrettd7655fr4n2y: resolution: {integrity: sha512-/seUAPY01VAuwkGyVBPCn1OXfVbaWGGu4QN9uj0kCPcTyNYgL1ldZpxZUpRU7BLheKQI4Twtl/OW2nHRF1u26Q==} engines: {node: '>=14'} @@ -9604,10 +9575,6 @@ packages: kind-of: 6.0.3 dev: true - /shallow-equal/1.2.1: - resolution: {integrity: sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==} - dev: false - /shallowequal/1.1.0: resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} dev: false diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 7b4556c..19cb6eb 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; export default styled.div` - background-color: var(--background); + background-color: var(--tertiary); color: var(--text); `; diff --git a/src/contexts/Auth.tsx b/src/contexts/Auth.tsx index bf9e14a..68ab6a6 100644 --- a/src/contexts/Auth.tsx +++ b/src/contexts/Auth.tsx @@ -2,8 +2,8 @@ import React from "react"; interface AuthContextType { user: any; - signin: () => void; - signout: () => void; + login: () => void; + logout: () => void; } export const AuthContext = React.createContext(null!); @@ -11,15 +11,15 @@ export const AuthContext = React.createContext(null!); export function AuthProvider({ children }: { children: React.ReactNode }) { let [user, setUser] = React.useState(null); - let signin = () => { + let login = () => { setUser("test"); }; - let signout = () => { + let logout = () => { setUser(null); }; - let value = { user, signin, signout }; + let value = { user, login, logout }; return {children}; } diff --git a/src/contexts/Theme.tsx b/src/contexts/Theme.tsx index d3e8c3b..245d676 100644 --- a/src/contexts/Theme.tsx +++ b/src/contexts/Theme.tsx @@ -2,7 +2,16 @@ import { observer } from "mobx-react-lite"; import { createGlobalStyle } from "styled-components"; import { useAppStore } from "../stores/AppStore"; -export type ThemeVariables = "primary" | "secondary" | "background" | "text"; +export type ThemeVariables = + | "brandPrimary" + | "brandSecondary" + | "primary" + | "primaryAlt" + | "secondary" + | "tertiary" + | "text" + | "textMuted" + | "inputBackground"; export type Overrides = { [variable in ThemeVariables]: string; @@ -14,16 +23,26 @@ export type Theme = Overrides & { export const ThemePresets: Record = { light: { - primary: "#FF5F00", - secondary: "#FF3D00", - background: "#e9e2e1", + brandPrimary: "#FF5F00", + brandSecondary: "#FF3D00", + primary: "#ede8e7", + primaryAlt: "", + secondary: "#ebe5e4", + tertiary: "#e9e2e1", text: "#000000", + textMuted: "#232120", + inputBackground: "#757575", }, dark: { - primary: "#FF5F00", - secondary: "#FF3D00", - background: "#141212", + brandPrimary: "#FF5F00", + brandSecondary: "#FF3D00", + primary: "#232120", + primaryAlt: "#312e2d", + secondary: "#1b1918", + tertiary: "#141212", text: "#e9e2e1", + textMuted: "#85898f", + inputBackground: "#121212", }, }; diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 1a24a2c..c7eea4b 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -1,7 +1,161 @@ +import styled from "styled-components"; import Container from "../components/Container"; +const Wrapper = styled(Container)` + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: var(--secondary); +`; + +const LoginBox = styled(Container)` + background-color: var(--primaryAlt); + padding: 32px; + font-size: 18px; + color: var(--textMuted); + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + @media (max-width: 480px) { + width: 100%; + height: 100%; + } + + @media (min-width: 480px) { + width: 480px; + border-radius: 18px; + } +`; + +const HeaderContainer = styled.div` + width: 100%; +`; + +const Header = styled.h1` + font-weight: 600; + margin-bottom: 8px; + font-size: 24px; + color: var(--text); +`; + +const SubHeader = styled.h2` + color: var(--textMuted); + font-weight: 400; + font-size: 16px; +`; + +const FormContainer = styled.div` + width: 100%; +`; + +const InputContainer = styled.h1<{ marginBottom: boolean }>` + margin-bottom: ${(props) => (props.marginBottom ? "20px" : "0")}; + display: flex; + flex-direction: column; + align-items: flex-start; +`; + +const InputLabel = styled.label` + color: #b1b5bc; + margin-bottom: 8px; + font-size: 14px; + font-weight: 700; +`; + +const InputWrapper = styled.div` + width: 100%; + display: flex; +`; + +const Input = styled.input` + border: none; + outline: none; + background: var(--secondary); + padding: 10px; + font-size: 16px; + flex: 1; + border-radius: 12px; + color: var(--text); + margin: 0; +`; + +const PasswordResetLink = styled.a` + margin-bottom: 20px; + margin-top: 4px; + padding: 2px 0; + font-size: 14px; + display: flex; + text-decoration: none; +`; + +const Button = styled.button` + background: var(--brandPrimary); + color: var(--text); + font-size: 16px; + margin-bottom: 8px; + width: 100%; + min-width: 130px; + min-height: 44px; + border-radius: 8px; + border: none; +`; + +const RegisterContainer = styled.div` + margin-top: 4px; + text-align: initial; +`; + +const RegisterLabel = styled.label` + font-size: 14px; +`; + +const RegisterLink = styled.a` + font-size: 14px; + text-decoration: none; + + @media (max-width: 480px) { + display: inline-block; + } +`; + function LoginPage() { - return LoginPage; + return ( + + + +
Welcome Back!
+ We're so excited to see you again! + + + + + Email + + + + + + + Password + + + + + + Forgot your password? + + + + Don't have an account?  + Sign Up + + + + + ); } export default LoginPage; diff --git a/src/pages/NotFound.tsx b/src/pages/NotFound.tsx index 63369be..e1b2a85 100644 --- a/src/pages/NotFound.tsx +++ b/src/pages/NotFound.tsx @@ -1,7 +1,12 @@ import Container from "../components/Container"; +import Text from "../components/Text"; function NotFoundPage() { - return NotFound; + return ( + + NotFound + + ); } export default NotFoundPage;