Merge branch 'main' of github.com:calblueprint/shanti-project into or…

…der_hist_final
calblueprint · Mar 19, 2024 · 0186b09 · 0186b09
2 parents 4b68f93 + 1e473b2
commit 0186b09
Show file tree

Hide file tree

Showing 20 changed files with 308 additions and 199 deletions.
diff --git a/src/api/supabase/queries/button_queries.ts b/src/api/supabase/queries/button_queries.ts
@@ -0,0 +1,17 @@
+import { StorefrontButtons } from '../../../schema/schema';
+import supabase from '../createClient';
+
+export async function fetchButtonCategories(): Promise<StorefrontButtons[]> {
+  const { data: buttons, error } = await supabase
+    .from('storefront_buttons')
+    .select('*');
+  if (error) {
+    throw new Error(`Error fetching buttons: ${error.message}`);
+  }
+
+  return buttons;
+}
+
+export async function fetchButton() {
+  return 0;
+}
diff --git a/src/api/supabase/queries/product_queries.ts b/src/api/supabase/queries/product_queries.ts
@@ -110,6 +110,7 @@ export async function filterUserProducts(
     .select('*')
     .eq('prescribed', true)
     .eq('category', productType);
+
   if (error) {
     throw new Error(`Error fetching products: ${error.message}`);
   }

diff --git a/src/app/[productId]/page.tsx b/src/app/[productId]/page.tsx
@@ -10,8 +10,9 @@ import {
   TextContainer,
   DescriptionContainer,
   ToastPopUP,
+  Fullscreen,
 } from './styles';
-import { GlobalStyle } from '../../styles/components';
+
 import NavBar from '../../components/NavBarFolder/NavBar';
 import { Product } from '../../schema/schema';
 import Buttons from './Buttons';
@@ -39,8 +40,7 @@ export default function ItemDisplay({
   }, [params.productId]);
 
   return (
-    <main>
-      <GlobalStyle />
+    <Fullscreen>
       <NavBar />
       <ToastPopUP
         position="top-right"
@@ -68,6 +68,6 @@ export default function ItemDisplay({
           <p>{Item?.description}</p>
         </TextContainer>
       </DescriptionContainer>
-    </main>
+    </Fullscreen>
   );
 }
diff --git a/src/app/[productId]/styles.ts b/src/app/[productId]/styles.ts
@@ -85,3 +85,8 @@ export const ToastPopUP = styled(ToastContainer)`
   z-index: 100;
   transform: translatey(130px);
 `;
+
+export const Fullscreen = styled.div`
+  width: 100%;
+  height: 100%;
+`;
diff --git a/src/app/favorites/page.tsx b/src/app/favorites/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Body2 } from '@/styles/fonts';
+import { Body1Bold, Body2 } from '@/styles/fonts';
 import BackButton from '../../components/BackButton/BackButton';
 
 import {
@@ -20,6 +20,7 @@ import {
   HeartIcon,
   TransparentButton,
   ViewItem,
+  Fullscreen,
 } from './styles';
 
 import { Product } from '../../schema/schema';
@@ -43,9 +44,8 @@ export default function FavoritesPage() {
   }
 
   return (
-    <div>
+    <Fullscreen>
       <NavBar />
-
       <OutterBox>
         <BackButton destination="./profileScreen" />
         <h1>Favorites</h1>
@@ -59,11 +59,8 @@ export default function FavoritesPage() {
               />
 
               <ProductNameDiv>
-                <p>
-                  {favorite.name}
-                  <br />
-                  Product ID: {favorite.id}
-                </p>
+                <Body1Bold>{favorite.name}</Body1Bold>
+                <Body2>Category: {favorite.category}</Body2>
                 <ViewItem onClick={() => router.push(`/${favorite.id}`)}>
                   <Body2>View Item</Body2>
                 </ViewItem>
@@ -78,6 +75,6 @@ export default function FavoritesPage() {
           ))}
         </OutterFavoriteDiv>
       </OutterBox>
-    </div>
+    </Fullscreen>
   );
 }
diff --git a/src/app/favorites/styles.ts b/src/app/favorites/styles.ts
@@ -7,7 +7,7 @@ import NavBar from '../../components/NavBarFolder/NavBar';
 export const FavoriteDiv = styled.div`
   display: flex;
   flex-direction: row;
-  align-items: start;
+  align-items: center;
   justify-content: space-around;
   width: 100%;
   margin-bottom: 50px;
@@ -22,7 +22,7 @@ export const OutterFavoriteDiv = styled.div`
   background: var(--White, #fff);
   box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.2);
   width: 800px;
-  height: 700px;
+  height: 650px;
   overflow: scroll;
   margin-top: 10px;
 `;
@@ -39,8 +39,8 @@ export const BackDiv = styled.button`
 `;
 
 export const OutterBox = styled.div`
-  width: 900px;
-  margin-left: 500px;
+  width: 800px;
+  height: 100%;
 `;
 
 export const Backtext = styled.p`
@@ -85,3 +85,11 @@ export const ViewItem = styled.button`
   line-height: normal;
   border-radius: 14px;
 `;
+
+export const Fullscreen = styled.div`
+  width: 100vw;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -82,7 +82,7 @@
 html,
 body {
   max-width: 100vw;
-  overflow-x: hidden;
+  height: 100%;
 }
 
 body {

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import supabase from '@/api/supabase/createClient';
+import { Body1, Heading1 } from '@/styles/fonts';
 import LoginForm from '../../components/LoginFormFolder/LoginForm';
 
 import {
@@ -40,52 +41,48 @@ export default function App() {
   };
 
   return (
-    <main>
-      <Fullscreen>
-        <Image
-          src="/images/ShantiLogo.png"
-          alt="logo pic"
-          width={125}
-          height={65}
-          style={{
-            top: '30px',
-            left: '30px',
-            position: 'absolute',
-          }}
-        />
+    <Fullscreen>
+      <Image
+        src="/images/ShantiLogo.png"
+        alt="logo pic"
+        width={125}
+        height={65}
+        style={{
+          top: '30px',
+          left: '30px',
+          position: 'absolute',
+        }}
+      />
+      <LoginBox>
+        <LoginContent>
+          <WelcomeSign>
+            <Heading1>Welcome</Heading1>
+          </WelcomeSign>
 
-        <LoginBox>
-          <LoginContent>
-            <WelcomeSign>Welcome</WelcomeSign>
-
-            <LoginForm
-              isError={isError}
-              changeUserName={setEmail}
-              changePassword={setPassword}
-              showPassword={showPassword}
+          <LoginForm
+            isError={isError}
+            changeUserName={setEmail}
+            changePassword={setPassword}
+            showPassword={showPassword}
+          />
+          {showPassword ? (
+            <EyeIcon
+              onClick={() => setShowPassword(false)}
+              style={{ cursor: 'pointer' }}
+            />
+          ) : (
+            <EyeOffIcon
+              onClick={() => setShowPassword(true)}
+              style={{ cursor: 'pointer' }}
             />
-            {showPassword ? (
-              <EyeIcon
-                onClick={() => setShowPassword(false)}
-                style={{ cursor: 'pointer' }}
-              />
-            ) : (
-              <EyeOffIcon
-                onClick={() => setShowPassword(true)}
-                style={{ cursor: 'pointer' }}
-              />
-            )}
+          )}
 
-            {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
-            <Button style={{ cursor: 'pointer' }} onClick={handleLogin}>
-              Log In
-            </Button>
-            {/* <Button type="button" onClick={() => handleSignUp(email, password)}>
-              Sign up
-            </Button> */}
-          </LoginContent>
-        </LoginBox>
-      </Fullscreen>
-    </main>
+          {errorMessage && <ErrorMessage>{errorMessage}</ErrorMessage>}
+          <Button style={{ cursor: 'pointer' }} onClick={handleLogin}>
+            <Body1>Log In</Body1>
+          </Button>
+        </LoginContent>
+      </LoginBox>
+    </Fullscreen>
   );
 }
diff --git a/src/app/login/styles.ts b/src/app/login/styles.ts
@@ -12,8 +12,9 @@ export const LoginBox = styled.div`
 
   width: 500px;
   height: 420px;
-
-  border: 1px solid #b3b3b3;
+  border: 1px solid ${COLORS.neutralGrey};
+  justify-self: center;
+  align-self: center;
 `;
 
 export const LoginContent = styled.div`
@@ -22,31 +23,20 @@ export const LoginContent = styled.div`
   align-self: center;
   justify-self: center;
   margin-top: 30px;
-  text-color: black;
+  text-color: ${COLORS.black};
 `;
 
 export const Button = styled.button`
   color: ${COLORS.white};
-  text-align: center;
-  font-size: 17px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
   width: 420px;
   height: 40px;
   border-radius: 8px;
   background: ${COLORS.navy};
   border: transparent;
-  z-index: 1;
 `;
 
 export const WelcomeSign = styled.div`
   color: ${COLORS.navy};
-  font-size: 40px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
-  padding-bottom: 10px;
 `;
 
 export const FormHeaders = styled.p`
@@ -77,26 +67,24 @@ export const EyeOffIcon = styled(EyeOff)`
   stroke-width: 1.5;
   width: 20px;
   height: 20px;
-  color: black;
-  margin: 20px 20px 20px 20px;
+  color: ${COLORS.black};
+  margin: 20px;
   transform: translateY(-250%) translateX(1800%);
 `;
 
 export const EyeIcon = styled(Eye)`
   stroke-width: 1.5;
   width: 20px;
   height: 20px;
-  color: black;
-  margin: 20px 20px 20px 20px;
+  color: ${COLORS.black};
+  margin: 20px;
   transform: translateY(-250%) translateX(1800%);
 `;
 
 export const Fullscreen = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: 100%;
-  height: 870px;
+  height: 100%;
+  display: grid;
 `;
 
 export const InputField = styled.div`