styling

calblueprint · Apr 3, 2024 · 200b252 · 200b252
1 parent 1e473b2
commit 200b252
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/src/app/storefront/page.tsx b/src/app/storefront/page.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import Storefront from './storefrontItems';
 
 import Footer from '../../components/FooterFolder/Footer';
-import { ShopAllText, Fullscreen } from './styles';
+import { ShopAllText, Fullscreen, StorefrontBox } from './styles';
 import { fetchUserProducts } from '../../api/supabase/queries/product_queries';
 import { Product } from '../../schema/schema';
 
@@ -40,7 +40,9 @@ export default function App() {
       />
 
       <ShopAllText>Shop {CategoryWord}</ShopAllText>
+      <StorefrontBox>
       <Storefront products={FilteredProducts} />
+      </StorefrontBox>
       <Footer />
     </Fullscreen>
   );

diff --git a/src/app/storefront/styles.ts b/src/app/storefront/styles.ts
@@ -92,18 +92,23 @@ export const ItemButtons = styled.button`
 `;
 
 export const StorefrontWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: space-evenly;
-  padding: 30px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 295px);
+  grid-gap: 2%;
+  padding-top: 20px;
+  justify-content: center;
+  padding-bottom: 150px;
 `;
 
 export const StorefrontItem = styled.div`
   width: calc(25% - 40px);
   margin-bottom: 50px;
 `;
 
+export const StorefrontBox = styled.div`
+  margin: auto;
+`;
+
 export const ShopAllText = styled.h1`
   padding-top: 80px;
   padding-bottom: 38px;

diff --git a/src/components/BackButton/styles.ts b/src/components/BackButton/styles.ts
@@ -10,7 +10,7 @@ export const BackDiv = styled.button`
   color: ${COLORS.black};
   background-color: transparent;
   border: transparent;
-  margin-left: 0px;
+  margin-left: 2%;
   margin-top: 55px;
   gap: 5px;
 `;