From 15eaf62995723a97efc5b457b1dc1334b0d27679 Mon Sep 17 00:00:00 2001 From: James Wyndham Date: Fri, 16 Feb 2024 16:33:55 +0800 Subject: [PATCH] added stylings --- Backend/README.md | 2 +- Frontend/app/(admin)/blogs/page.tsx | 37 +++++++------- Frontend/app/(admin)/contact/page.tsx | 11 ++-- Frontend/app/(admin)/pricing/page.tsx | 51 ++++++++++--------- Frontend/app/layout.tsx | 5 +- Frontend/components/BlogCard.tsx | 2 +- Frontend/components/Header.tsx | 2 +- Frontend/components/Logo.tsx | 7 ++- Frontend/components/Navigation.tsx | 2 +- Frontend/components/Utilities/Background.tsx | 23 +++++++++ Frontend/package-lock.json | 30 +++++++++++ Frontend/package.json | 1 + Frontend/sections/AccountContent.tsx | 8 +-- .../FormLeftDescriptionRightContactUs.tsx | 14 ++--- .../sections/Hero/SquaredBackgroundHero.tsx | 2 +- .../Hero/WaitingListWithImageHero.tsx | 22 ++++---- Frontend/tailwind.config.ts | 11 ++++ Frontend/utils/colors.ts | 0 18 files changed, 153 insertions(+), 77 deletions(-) create mode 100644 Frontend/components/Utilities/Background.tsx create mode 100644 Frontend/utils/colors.ts diff --git a/Backend/README.md b/Backend/README.md index 152d55c..93d32fa 100644 --- a/Backend/README.md +++ b/Backend/README.md @@ -1,4 +1,4 @@ -# Fast Pocket - React + PocketBase Boiler Plate +# FastPocket - React + PocketBase Boiler Plate The all-in-one starter kit for high-performance SaaS applications. That don't want a vendor buy in when it comes to backend and frontend. This is a front end agnostic template that you can use 100% with any SaaS application. If there are any issues please feel free to reach out to me on X - [@meinbiz](https://twitter.com/meinbiz) diff --git a/Frontend/app/(admin)/blogs/page.tsx b/Frontend/app/(admin)/blogs/page.tsx index dac99a4..caf09c0 100644 --- a/Frontend/app/(admin)/blogs/page.tsx +++ b/Frontend/app/(admin)/blogs/page.tsx @@ -2,6 +2,7 @@ import PageHeader from "@/sections/PageHeader"; import BlogCard from "@/components/BlogCard"; import getPostMetadata from "@/utils/getPostMetaData"; import React from "react"; +import Background from "@/components/Utilities/Background"; export default function BlogsPage() { const postMetadata = getPostMetadata(); @@ -15,24 +16,26 @@ export default function BlogsPage() { role="main" className="h-full flex-grow flex flex-col bg-white dark:bg-black" > - {/* Page sections */} - - {" "} -

- Join us for the journey as we make great food. Learn and grow - together -

- - } - /> -
-
- {postPreviews} + + {/* Page sections */} + + {" "} +

+ Join us for the journey as we make great food. Learn and grow + together +

+ + } + /> +
+
+ {postPreviews} +
-
+ ); } diff --git a/Frontend/app/(admin)/contact/page.tsx b/Frontend/app/(admin)/contact/page.tsx index 6368c50..3e3aafd 100644 --- a/Frontend/app/(admin)/contact/page.tsx +++ b/Frontend/app/(admin)/contact/page.tsx @@ -1,4 +1,5 @@ import Footer from "@/components/Footer"; +import Background from "@/components/Utilities/Background"; import Spacer from "@/components/Utilities/Spacer"; import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs"; import React from "react"; @@ -6,10 +7,12 @@ import React from "react"; const page = () => { return (
- - -
- + + + +
+ +
); }; diff --git a/Frontend/app/(admin)/pricing/page.tsx b/Frontend/app/(admin)/pricing/page.tsx index e33cadf..74cf3e4 100644 --- a/Frontend/app/(admin)/pricing/page.tsx +++ b/Frontend/app/(admin)/pricing/page.tsx @@ -10,6 +10,7 @@ import Newsletter from "@/sections/Newsletter/Newsletter"; import { createCheckoutSession, isAuthenticated } from "@/app/(auth)/actions"; import { toast } from "react-toastify"; import { useRouter } from "next/navigation"; +import Background from "@/components/Utilities/Background"; export default function PricingPage() { const [isAnnual, setIsAnnual] = useState(false); @@ -31,31 +32,33 @@ export default function PricingPage() { role="main" className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-white dark:bg-black" > - - {" "} -

- Are you ready for fresh South West produce to be delivered to your - door? -

- - } - /> -
- -
-
-
- {products.map((x, i) => ( - - ))} + + + {" "} +

+ Are you ready for fresh South West produce to be delivered to + your door? +

+ + } + /> +
+
-
- +
+
+ {products.map((x, i) => ( + + ))} +
+
+ + ); } diff --git a/Frontend/app/layout.tsx b/Frontend/app/layout.tsx index a7116cb..8a0d054 100644 --- a/Frontend/app/layout.tsx +++ b/Frontend/app/layout.tsx @@ -22,9 +22,8 @@ const arimo = Arimo({ }); export const metadata: Metadata = { - title: "Sign365", - description: - "Sign365 is your window into freedom from paper work. Get the paper work to do itself", + title: "FastPocket", + description: "FastPocket", }; export default async function RootLayout({ diff --git a/Frontend/components/BlogCard.tsx b/Frontend/components/BlogCard.tsx index 5685e2f..692d562 100644 --- a/Frontend/components/BlogCard.tsx +++ b/Frontend/components/BlogCard.tsx @@ -9,7 +9,7 @@ function BlogCard({ title, slug, subtitle, image }: PostMetadata) { <>
logout()} - className={`btn-sm cursor-pointer py-5 w-24 text-primary-content ml-3 bg-error hover:bg-error/70`} + className={`btn-sm cursor-pointer py-5 w-24 text-white ml-3 bg-error hover:bg-error/70`} > Logout diff --git a/Frontend/components/Logo.tsx b/Frontend/components/Logo.tsx index e863152..bf1f45a 100644 --- a/Frontend/components/Logo.tsx +++ b/Frontend/components/Logo.tsx @@ -1,7 +1,6 @@ import React from "react"; -import logo from "@/images/icon.svg"; -import Image from "next/image"; import Icon from "./icon"; +import Link from "next/link"; interface LogoProps { label?: string; @@ -10,7 +9,7 @@ interface LogoProps { function Logo({ label, className }: LogoProps) { return ( - )} - + ); } diff --git a/Frontend/components/Navigation.tsx b/Frontend/components/Navigation.tsx index d57ad9b..2edd8d9 100644 --- a/Frontend/components/Navigation.tsx +++ b/Frontend/components/Navigation.tsx @@ -70,7 +70,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
-
    +
      {/* Sidebar content here */}
      {/* Logo */} diff --git a/Frontend/components/Utilities/Background.tsx b/Frontend/components/Utilities/Background.tsx new file mode 100644 index 0000000..e669d6d --- /dev/null +++ b/Frontend/components/Utilities/Background.tsx @@ -0,0 +1,23 @@ +"use client"; +import React, { ReactNode } from "react"; + +const Background = ({ children }: { children: ReactNode }) => { + const isDarkMode = (() => + typeof window !== "undefined" && + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches)(); + return ( +
      + {children} +
      + ); +}; + +export default Background; diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json index dac8e00..99519e8 100644 --- a/Frontend/package-lock.json +++ b/Frontend/package-lock.json @@ -16,6 +16,7 @@ "@vidstack/react": "^1.9.8", "aos": "^2.3.4", "autoprefixer": "10.4.15", + "colorcolor": "^3.0.1", "crypto-js": "^4.2.0", "daisyui": "^3.5.1", "eslint": "8.47.0", @@ -2415,6 +2416,14 @@ "simple-swizzle": "^0.2.2" } }, + "node_modules/colorcolor": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/colorcolor/-/colorcolor-3.0.1.tgz", + "integrity": "sha512-DIGQgRENjBP+MTI5Ua9teyZs2E7+ismYFxVN1vb3It1u+7G93aZzmDsUeRgxyoSKIsAz9PzEa7mHCCc6bChfJw==", + "dependencies": { + "css-color-names": "^1.0.1" + } + }, "node_modules/colord": { "version": "2.9.3", "license": "MIT" @@ -2461,6 +2470,14 @@ "node": ">=4" } }, + "node_modules/css-color-names": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz", + "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==", + "engines": { + "node": "*" + } + }, "node_modules/css-selector-tokenizer": { "version": "0.8.0", "license": "MIT", @@ -7771,6 +7788,14 @@ "simple-swizzle": "^0.2.2" } }, + "colorcolor": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/colorcolor/-/colorcolor-3.0.1.tgz", + "integrity": "sha512-DIGQgRENjBP+MTI5Ua9teyZs2E7+ismYFxVN1vb3It1u+7G93aZzmDsUeRgxyoSKIsAz9PzEa7mHCCc6bChfJw==", + "requires": { + "css-color-names": "^1.0.1" + } + }, "colord": { "version": "2.9.3" }, @@ -7803,6 +7828,11 @@ "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", "peer": true }, + "css-color-names": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz", + "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==" + }, "css-selector-tokenizer": { "version": "0.8.0", "requires": { diff --git a/Frontend/package.json b/Frontend/package.json index e2bb481..63c2a27 100644 --- a/Frontend/package.json +++ b/Frontend/package.json @@ -17,6 +17,7 @@ "@vidstack/react": "^1.9.8", "aos": "^2.3.4", "autoprefixer": "10.4.15", + "colorcolor": "^3.0.1", "crypto-js": "^4.2.0", "daisyui": "^3.5.1", "eslint": "8.47.0", diff --git a/Frontend/sections/AccountContent.tsx b/Frontend/sections/AccountContent.tsx index 212e249..2f96a13 100644 --- a/Frontend/sections/AccountContent.tsx +++ b/Frontend/sections/AccountContent.tsx @@ -150,10 +150,10 @@ function AccountContent({ user }: ManageSubscriptionProps) { {subscription ? ( <> -

      +

      {subscription?.product?.name}

      -

      +

      {subscription.product?.description}

      diff --git a/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx b/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx index e7de1c9..895e1a0 100644 --- a/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx +++ b/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx @@ -7,17 +7,17 @@ const FormLeftDescriptionRightContactUs = () => {
      -

      +

      Contact us

      -

      +

      We'd love to talk about how we can help you.

      {/* Card */} -
      -

      +
      +

      Fill in the form

      @@ -105,7 +105,7 @@ const FormLeftDescriptionRightContactUs = () => {
      -

      +

      We'll get back to you in 1-2 business days.

      @@ -135,7 +135,7 @@ const FormLeftDescriptionRightContactUs = () => {

      Knowledgebase

      -

      +

      We're here to help with any questions or code.

      {

      Contact us by email

      -

      +

      If you wish to write us an email instead please use

      {

      Start your journey with{" "} - Fast Pocket + FastPocket

      Hand-picked professionals and expertly crafted components, diff --git a/Frontend/sections/Hero/WaitingListWithImageHero.tsx b/Frontend/sections/Hero/WaitingListWithImageHero.tsx index 19f4f72..2e9e07c 100644 --- a/Frontend/sections/Hero/WaitingListWithImageHero.tsx +++ b/Frontend/sections/Hero/WaitingListWithImageHero.tsx @@ -3,21 +3,25 @@ import Icon from "@/components/icon"; import React from "react"; const WaitingListWithImageHero = () => { + const isDarkMode = () => + window.matchMedia && + window.matchMedia("(prefers-color-scheme: dark)").matches; return (

      -

      +

      Bethel Farms

      -

      +

      Get notified when we launch

      @@ -33,12 +37,12 @@ const WaitingListWithImageHero = () => {
      {
      {