login page

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",

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

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);
 `;

src/contexts/Auth.tsx

@@ -2,8 +2,8 @@ import React from "react";
 
 interface AuthContextType {
   user: any;
-  signin: () => void;
+  login: () => void;
-  signout: () => void;
+  logout: () => void;
 }
 
 export const AuthContext = React.createContext<AuthContextType>(null!);
@@ -11,15 +11,15 @@ export const AuthContext = React.createContext<AuthContextType>(null!);
 export function AuthProvider({ children }: { children: React.ReactNode }) {
   let [user, setUser] = React.useState<any>(null);
 
-  let signin = () => {
+  let login = () => {
     setUser("test");
   };
 
-  let signout = () => {
+  let logout = () => {
     setUser(null);
   };
 
-  let value = { user, signin, signout };
+  let value = { user, login, logout };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }

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<string, Theme> = {
   light: {
-    primary: "#FF5F00",
+    brandPrimary: "#FF5F00",
-    secondary: "#FF3D00",
+    brandSecondary: "#FF3D00",
-    background: "#e9e2e1",
+    primary: "#ede8e7",
+    primaryAlt: "",
+    secondary: "#ebe5e4",
+    tertiary: "#e9e2e1",
     text: "#000000",
+    textMuted: "#232120",
+    inputBackground: "#757575",
   },
   dark: {
-    primary: "#FF5F00",
+    brandPrimary: "#FF5F00",
-    secondary: "#FF3D00",
+    brandSecondary: "#FF3D00",
-    background: "#141212",
+    primary: "#232120",
+    primaryAlt: "#312e2d",
+    secondary: "#1b1918",
+    tertiary: "#141212",
     text: "#e9e2e1",
+    textMuted: "#85898f",
+    inputBackground: "#121212",
   },
 };
 

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 <Container>LoginPage</Container>;
+  return (
+    <Wrapper>
+      <LoginBox>
+        <HeaderContainer>
+          <Header>Welcome Back!</Header>
+          <SubHeader>We're so excited to see you again!</SubHeader>
+        </HeaderContainer>
+
+        <FormContainer>
+          <InputContainer marginBottom={true} style={{ marginTop: 0 }}>
+            <InputLabel>Email</InputLabel>
+            <InputWrapper>
+              <Input />
+            </InputWrapper>
+          </InputContainer>
+
+          <InputContainer marginBottom={false}>
+            <InputLabel>Password</InputLabel>
+            <InputWrapper>
+              <Input />
+            </InputWrapper>
+          </InputContainer>
+
+          <PasswordResetLink href="#">Forgot your password?</PasswordResetLink>
+          <Button>Log In</Button>
+
+          <RegisterContainer>
+            <RegisterLabel>Don't have an account?&nbsp;</RegisterLabel>
+            <RegisterLink href="#">Sign Up</RegisterLink>
+          </RegisterContainer>
+        </FormContainer>
+      </LoginBox>
+    </Wrapper>
+  );
 }
 
 export default LoginPage;

src/pages/NotFound.tsx

@@ -1,7 +1,12 @@
 import Container from "../components/Container";
+import Text from "../components/Text";
 
 function NotFoundPage() {
-  return <Container>NotFound</Container>;
+  return (
+    <Container>
+      <Text>NotFound</Text>
+    </Container>
+  );
 }
 
 export default NotFoundPage;