login page

2024-11-25 03:32:54 +01:00 · 2023-03-23 16:15:03 -04:00 · 2023-03-23 16:15:03 -04:00 · 6dc3c61317
commit 6dc3c61317
parent 6f5dad1e7b
7 changed files with 193 additions and 49 deletions
--- 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",
--- 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
--- 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);
 `;
--- 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<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>;
 }
--- 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<string, Theme> = {
  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",
  },
 };

--- 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 <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;
--- 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 <Container>NotFound</Container>;
+  return (
+    <Container>
+      <Text>NotFound</Text>
+    </Container>
+  );
 }

 export default NotFoundPage;