calblueprint · EthanAuyeung · Oct 4, 2023 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,8 @@
     "eslint-config-next": "13.5.2",
     "next": "13.5.2",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "styled-components": "^6.0.8"
   },
   "devDependencies": {
     "@calblueprint/eslint-config-react": "^0.0.3",
@@ -34,6 +35,7 @@
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "file-loader": "^6.2.0",
     "prettier": "^2.8.8",
     "typescript": "^4.9.5"
   }

diff --git a/src/api/supabase/queries /createClient.ts b/src/api/supabase/queries /createClient.ts
@@ -17,4 +17,4 @@ const supabase = createClient(
   process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
 );
 
-export default supabase;
+export default supabase;
diff --git a/src/app/components/InputFields.tsx b/src/app/components/InputFields.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { FormHeaders, Input } from '../screens/loginScreen/styles';
+
+export default function InputFields(props: {
+  text: string;
+  placeholder: string;
+}) {
+  const { text, placeholder } = props;
+  return (
+    <main>
+      <div id="userInfo">
+        <FormHeaders>{text}</FormHeaders>
+        <Input type="text" placeholder={placeholder} />
+      </div>
+    </main>
+  );
+}
diff --git a/src/app/components/LoginForm.tsx b/src/app/components/LoginForm.tsx
@@ -0,0 +1,12 @@
+'use client';
+
+import InputFields from './InputFields';
+
+export default function LoginForm() {
+  return (
+    <div>
+      <InputFields text="Email address" placeholder="[email protected]" />
+      <InputFields text="Password" placeholder="************" />
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,22 +1,22 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import './globals.css';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
   title: 'Shanti Project',
   description: 'Application Created by Blueprint',
-}
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/src/app/login.tsx b/src/app/login.tsx
@@ -1,5 +1,3 @@
 export default function Home() {
-  return (
-   <h1> yo </h1> 
-  )
+  return <h1> yo </h1>;
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import LoginForm from './components/LoginForm';
+import {
+  GlobalStyle,
+  Fullscreen,
+  LoginBox,
+  LoginContent,
+  WelcomeSign,
+  Button,
+} from './screens/loginScreen/styles';
+
+export default function App() {
+  return (
+    <main>
+      <GlobalStyle />
+      <Fullscreen>
+        <LoginBox>
+          <LoginContent>
+            <WelcomeSign>Welcome</WelcomeSign>
+            <LoginForm />
+            <Button>Log In</Button>
+          </LoginContent>
+        </LoginBox>
+      </Fullscreen>
+    </main>
+  );
+}
diff --git a/src/app/screens/login /loginPage.tsx b/src/app/screens/login /loginPage.tsx
diff --git a/src/app/screens/loginScreen/page.tsx b/src/app/screens/loginScreen/page.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import LoginForm from '../../components/LoginForm';
+
+import {
+  GlobalStyle,
+  Fullscreen,
+  Img,
+  LoginBox,
+  LoginContent,
+  WelcomeSign,
+  Button,
+} from './styles';
+
+export default function App() {
+  return (
+    <main>
+      <GlobalStyle />
+      <Fullscreen>
+        <Img />
+        <LoginBox>
+          <LoginContent>
+            <WelcomeSign>Welcome</WelcomeSign>
+            <LoginForm />
+            <Button>Log In</Button>
+          </LoginContent>
+        </LoginBox>
+      </Fullscreen>
+    </main>
+  );
+}
diff --git a/src/app/screens/loginScreen/shantiLogo.png b/src/app/screens/loginScreen/shantiLogo.png
diff --git a/src/app/screens/loginScreen/styles.ts b/src/app/screens/loginScreen/styles.ts
@@ -0,0 +1,79 @@
+import styled, { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  body {
+    background:white;
+  }
+`;
+export const LoginBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+  height: 420px;
+  margin-left: 450px;
+  margin-top: 80px;
+  border: 1px solid #b3b3b3;
+`;
+
+export const LoginContent = styled.div`
+  margin-left: 40px;
+  margin-top: 30px;
+`;
+
+export const Button = styled.button`
+  margin-top: 40px;
+  color: #fff;
+  text-align: center;
+  font-family: Inter;
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  width: 420px;
+  height: 40px;
+  border-radius: 8px;
+  background: #000;
+  border: transparent;
+`;
+
+export const WelcomeSign = styled.div`
+  color: #000;
+  font-family: Inter;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  margin-bottom: 30px;
+`;
+
+export const Input = styled.input`
+  background: #d9d9d9;
+  border: transparent;
+  width: 420px;
+  height: 40px;
+  padding-left: 10px;
+`;
+
+export const FormHeaders = styled.p`
+  color: #000;
+  font-family: Inter;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  margin-top: 20px;
+  margin-bottom: 10px;
+`;
+
+export const Fullscreen = styled.div`
+  width: 100 %;
+  height: 100 %;
+`;
+export const Img = styled.div`
+  background-color: yellow;
+  align-self: flex - start;
+  justify-self: flex - start;
+  height: 50px;
+  width: 110px;
+  margin: 20px;
+`;
diff --git a/src/app/screens/profile /profileScreen.tsx b/src/app/screens/profile /profileScreen.tsx
@@ -1,7 +1,7 @@
 export default function Profile() {
-    return (
-      <main>
-        <div>Profile</div>
-      </main>
-    );
-  }
+  return (
+    <main>
+      <div>Profile</div>
+    </main>
+  );
+}
diff --git a/src/app/screens/storefront/storefrontScreen.tsx b/src/app/screens/storefront/storefrontScreen.tsx
@@ -1,7 +1,7 @@
 export default function Storefront() {
-    return (
-      <main>
-        <div>storefront</div>
-      </main>
-    );
-  }
+  return (
+    <main>
+      <div>storefront</div>
+    </main>
+  );
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -38,4 +38,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}