From 200940c094d40b0be01b118a5de30bf1921e0035 Mon Sep 17 00:00:00 2001 From: Hugo Morales Infante Date: Sat, 26 Apr 2025 22:31:33 -0700 Subject: [PATCH 1/3] slight changes --- app/(pages)/(app)/products/page.module.scss | 2 +- app/(pages)/(app)/products/page.tsx | 7 +++++-- app/(pages)/_globals/fonts.ts | 9 +++++++-- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/app/(pages)/(app)/products/page.module.scss b/app/(pages)/(app)/products/page.module.scss index 609b93a..2ef86f8 100644 --- a/app/(pages)/(app)/products/page.module.scss +++ b/app/(pages)/(app)/products/page.module.scss @@ -6,4 +6,4 @@ display: flex; flex-direction: column; gap: var(--spacer); -} \ No newline at end of file +} diff --git a/app/(pages)/(app)/products/page.tsx b/app/(pages)/(app)/products/page.tsx index d9631b7..a1990e3 100644 --- a/app/(pages)/(app)/products/page.tsx +++ b/app/(pages)/(app)/products/page.tsx @@ -56,10 +56,13 @@ const products = [ export default function Products() { return (
-

Products

+
+

Product Listings

+
+ Add
+
+
-
); diff --git a/app/(pages)/_globals/fonts.ts b/app/(pages)/_globals/fonts.ts index f169136..2968f15 100644 --- a/app/(pages)/_globals/fonts.ts +++ b/app/(pages)/_globals/fonts.ts @@ -1,4 +1,4 @@ -import { Inter, Montserrat } from 'next/font/google'; +import { Inter, Montserrat, Manrope } from 'next/font/google'; const inter = Inter({ subsets: ['latin'], @@ -10,7 +10,12 @@ const montserrat = Montserrat({ variable: '--font-montserrat', }); -const fonts = [inter, montserrat]; +const manrope = Manrope({ + subsets: ['latin'], + variable: '--font-manrope', +}); + +const fonts = [inter, montserrat, manrope]; const font_variables = fonts.map((font) => font.variable); const font_string = font_variables.join(' '); From 76d2ef48957e674c13fa30f7e61ec9b171198815 Mon Sep 17 00:00:00 2001 From: Hugo Morales Infante Date: Mon, 28 Apr 2025 19:50:35 -0700 Subject: [PATCH 2/3] product listing page --- .../ProductList/ProductList.module.scss | 4 +- app/(pages)/(app)/products/page.module.scss | 161 ++++++++++++++++++ app/(pages)/(app)/products/page.tsx | 37 +++- app/(pages)/layout.tsx | 10 +- 4 files changed, 196 insertions(+), 16 deletions(-) diff --git a/app/(pages)/(app)/products/_components/ProductList/ProductList.module.scss b/app/(pages)/(app)/products/_components/ProductList/ProductList.module.scss index 9c2798e..4ccfae6 100644 --- a/app/(pages)/(app)/products/_components/ProductList/ProductList.module.scss +++ b/app/(pages)/(app)/products/_components/ProductList/ProductList.module.scss @@ -1,8 +1,8 @@ .productList { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(5, 1fr); gap: var(--spacer); padding: var(--small-spacer); - width: 50%; // temporarily set to 50% for demo + width: 100%; // temporarily set to 50% for demo margin-left: 0; } \ No newline at end of file diff --git a/app/(pages)/(app)/products/page.module.scss b/app/(pages)/(app)/products/page.module.scss index 2ef86f8..f7d31d9 100644 --- a/app/(pages)/(app)/products/page.module.scss +++ b/app/(pages)/(app)/products/page.module.scss @@ -1,9 +1,170 @@ .generalcontainer{ + display: flex; + flex-direction: column; padding: var(--spacer); + margin-top: 2%; + margin-right: 5%; + margin-left: 5%; + gap: 15px; + background-color: #F6F6F6; } .main { display: flex; flex-direction: column; + background-color: #F6F6F6; gap: var(--spacer); + height:max-content; +} + +.topbar{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-top: 2%; + margin-bottom: 2%; +} + +.addbutton{ + background-color: #3A2779; + color: white; + border-radius: 5px; + width: 10%; + padding-top: 15px; + padding-bottom: 15px; + padding-right: 20px; + padding-left: 20px; + height: 100%; + text-align: center; + transition: 300ms; +} + +.addbutton:hover{ + background-color: #ededed; + color: #3A2779; + transition: 300ms; + +} + +.searchbar{ + border-radius: 20px; + border: 0; + background-color: white; + color: #454545; + padding-left: 3%; + padding-top: 0.75%; + padding-bottom: 0.75%; + width: 85%; +} + +.rowbaropposite{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + margin-top: 1%; + margin-bottom: 1%; +} + +.pagenav{ + display: flex; + flex-direction: row; + background-color: rgb(255, 255, 255); + border-radius: 25%; + color: #454545; + padding-top: 0.5%; + padding-bottom: 0.5%; + width: 10%; + justify-content: space-between; +} + +.circlebutton{ + border-radius: 100%; + background-color:#f7f4ff; + height: 100%; + padding-left: 8%; + padding-right: 8%; + padding-top: 4%; + padding-bottom: 4%; + color: #271953; +} + +.circlebutton:hover{ + background-color: rgb(134, 128, 155); + color: white; + transition: 300ms; +} + +.rowbar{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: start; + margin-top: 1%; + margin-bottom: 1%; +} + +.genbutton{ + background-color: white; + color: #454545; + border-radius: 5px; + padding-top: 15px; + padding-bottom: 15px; + width: 8%; + height: 100%; + text-align: center; + transition: 300ms; + margin-right: 1%; +} + +.genbutton:hover{ + background-color: #3A2779; + color: white; + transition: 300ms; + +} + +.listingarea{ + background-color: white; + height: 100%; + padding-top: 25px; + padding-bottom: 25px; + padding-right: 25px; + padding-left: 25px; + width: 100%; + border-radius: 15px; + border-style: solid; + border-width: 1px; + border-color: #454545; + justify-content: center; + align-items: center; + // text-align: center; } + +.centerbar{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.addlistingbutton{ + background-color: #3A2779; + color: white; + border-radius: 10px; + width: 15%; + padding-top: 15px; + padding-bottom: 15px; + padding-right: 20px; + padding-left: 20px; + height: 100%; + text-align: center; + transition: 300ms; +} + +.addlistingbutton:hover{ + background-color: #F6F6F6; + color: rgb(46, 46, 46); + transition: 300ms; +} \ No newline at end of file diff --git a/app/(pages)/(app)/products/page.tsx b/app/(pages)/(app)/products/page.tsx index a1990e3..0211b31 100644 --- a/app/(pages)/(app)/products/page.tsx +++ b/app/(pages)/(app)/products/page.tsx @@ -56,13 +56,40 @@ const products = [ export default function Products() { return (
-
+

Product Listings

-
+ Add
+
+ Add
- -
- +
+ +
+
<
+
>
+
+
+
+
All
+
Active
+
Draft
+
Archived
+
+
+ {products.length == 0 ? ( +
+
List A Product
+
+ ) : ( +
+ + +
+ )}
); diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx index db487d7..0fc3906 100644 --- a/app/(pages)/layout.tsx +++ b/app/(pages)/layout.tsx @@ -5,10 +5,6 @@ import '@globals/styles/globals.scss'; import fonts from '@globals/fonts'; import metadata from '@globals/metadata.json'; -import navLinks from '@data/navLinks.json'; -import Navbar from '@components/Navbar/Navbar'; -import Footer from './_components/Footer/Footer'; - export { metadata }; export default function RootLayout({ @@ -18,11 +14,7 @@ export default function RootLayout({ }) { return ( - - - {children} -
- + {children} ); } From 9d1aecb5a7df3d39b7ff68727e4243b6a152a937 Mon Sep 17 00:00:00 2001 From: Hugo Morales Infante Date: Mon, 5 May 2025 20:16:12 -0700 Subject: [PATCH 3/3] styles kinda finished --- app/(pages)/(app)/products/page.module.scss | 28 +++++++++++++-------- app/(pages)/(app)/products/page.tsx | 5 ++-- app/(pages)/_globals/styles/globals.scss | 1 - app/(pages)/layout.tsx | 4 +-- 4 files changed, 21 insertions(+), 17 deletions(-) diff --git a/app/(pages)/(app)/products/page.module.scss b/app/(pages)/(app)/products/page.module.scss index f7d31d9..ed03e09 100644 --- a/app/(pages)/(app)/products/page.module.scss +++ b/app/(pages)/(app)/products/page.module.scss @@ -1,12 +1,12 @@ .generalcontainer{ display: flex; flex-direction: column; - padding: var(--spacer); - margin-top: 2%; - margin-right: 5%; - margin-left: 5%; + padding: 3%; + padding-left: 5%; + padding-right: 5%; gap: 15px; background-color: #F6F6F6; + font-family: var(--font-manrope); } .main { @@ -22,8 +22,8 @@ flex-direction: row; align-items: center; justify-content: space-between; - margin-top: 2%; margin-bottom: 2%; + font-family: var(--font-manrope); } .addbutton{ @@ -64,22 +64,27 @@ align-items: center; justify-content: space-between; margin-top: 1%; - margin-bottom: 1%; } .pagenav{ + border-radius: 50px; display: flex; flex-direction: row; background-color: rgb(255, 255, 255); - border-radius: 25%; color: #454545; - padding-top: 0.5%; - padding-bottom: 0.5%; + padding-top: 0.25%; + padding-bottom: 0.25%; + padding-right: 0.2%; + padding-left: 0.2%; width: 10%; justify-content: space-between; + text-align: center; + align-items: center; } .circlebutton{ + display: flex; + flex-direction: row; border-radius: 100%; background-color:#f7f4ff; height: 100%; @@ -88,12 +93,13 @@ padding-top: 4%; padding-bottom: 4%; color: #271953; + transition: 150ms; } .circlebutton:hover{ background-color: rgb(134, 128, 155); color: white; - transition: 300ms; + transition: 150ms; } .rowbar{ @@ -108,7 +114,7 @@ .genbutton{ background-color: white; color: #454545; - border-radius: 5px; + border-radius: 15px; padding-top: 15px; padding-bottom: 15px; width: 8%; diff --git a/app/(pages)/(app)/products/page.tsx b/app/(pages)/(app)/products/page.tsx index 0211b31..da5769b 100644 --- a/app/(pages)/(app)/products/page.tsx +++ b/app/(pages)/(app)/products/page.tsx @@ -1,6 +1,6 @@ +'use client'; import styles from './page.module.scss'; import ProductList from './_components/ProductList/ProductList'; -import SearchFilters from './_components/SearchFilters/SearchFilters'; const products = [ { @@ -69,7 +69,7 @@ export default function Products() { placeholder="Search Listings" >
-
<
+
<
0 out of 0
>
@@ -86,7 +86,6 @@ export default function Products() {
) : (
-
)} diff --git a/app/(pages)/_globals/styles/globals.scss b/app/(pages)/_globals/styles/globals.scss index 0e7b7bb..c52c5dd 100644 --- a/app/(pages)/_globals/styles/globals.scss +++ b/app/(pages)/_globals/styles/globals.scss @@ -8,7 +8,6 @@ box-sizing: border-box; padding: 0; margin: 0; - font-family: var(--font-inter); color: var(--text-dark); } diff --git a/app/(pages)/layout.tsx b/app/(pages)/layout.tsx index 0fc3906..2897e4a 100644 --- a/app/(pages)/layout.tsx +++ b/app/(pages)/layout.tsx @@ -2,7 +2,7 @@ import '@globals/styles/colors.scss'; import '@globals/styles/spacers.scss'; import '@globals/styles/variables.scss'; import '@globals/styles/globals.scss'; -import fonts from '@globals/fonts'; +import font_string from '@globals/fonts'; import metadata from '@globals/metadata.json'; export { metadata }; @@ -14,7 +14,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); }