Add logo and minor UI improvements

src/components/Common/Empty/Empty.tsx

@@ -16,13 +16,17 @@ interface EmptyProps {
 }
 
 export const Empty: FC<EmptyProps> = ({ iconSize = "lg", button, text = "Nothing to display", subText = "" }) => (
-    <div className="col-span-full flex h-full w-full flex-col items-center justify-center gap-2 px-10 py-16 opacity-50">
+    <div className="col-span-full flex h-full w-full flex-col items-center justify-center gap-2 py-16 opacity-50 md:px-10">
         <LayersIcon
-            className={clsx({ "text-base-300 mb-3": true, "h-52 w-52": iconSize === "lg", "h-24 w-24": iconSize === "sm" })}
+            className={clsx({
+                "text-base-300 mb-3 aspect-square": true,
+                "h-1/2 w-1/2 lg:h-2/5 lg:w-2/5": iconSize === "lg",
+                "h-1/3 w-1/3 lg:h-1/5 lg:w-1/5": iconSize === "sm",
+            })}
             strokeWidth={2}
         />
-        <h6 className="text-center text-2xl font-bold">{text}</h6>
-        <p className="max-w-sm text-center text-base">{subText}</p>
+        <h6 className={clsx("text-center font-bold", iconSize === "lg" ? "text-2xl" : "text-xl")}>{text}</h6>
+        <p className={clsx("max-w-sm text-center ", iconSize === "lg" ? "text-base" : "text-sm")}>{subText}</p>
         {button && (
             <>
                 {button.loading ? (

src/components/Common/Logo/Logo.tsx

@@ -0,0 +1,16 @@
+import { clsx } from "clsx";
+import { FC } from "react";
+import { displayFont, standardFont } from "@/app/fonts";
+
+interface Props {
+    fontsize?: "text-xl" | "text-2xl" | "text-3xl";
+}
+
+export const Logo: FC<Props> = ({ fontsize = "text-xl" }) => {
+    return (
+        <span className={clsx("normal-case", displayFont.className, fontsize)}>
+            Targa<span className={clsx("font-normal", standardFont.className)}>bay</span>
+            <span className="text-accent">.</span>
+        </span>
+    );
+};

src/components/Common/Logo/index.ts

@@ -0,0 +1 @@
+export { Logo } from "./Logo";

src/components/Common/index.ts

@@ -9,3 +9,4 @@ export { Modal, ModalFooter } from "./Modal";
 export { ContextMenu, ContextMenuLoading } from "./ContextMenu";
 export type { ContextMenuItemProp } from "./ContextMenu";
 export { LinkWithLocale } from "./LinkWithLocale";
+export { Logo } from "./Logo";

src/components/DashboardProfile/ProfileDetails.tsx

@@ -80,7 +80,7 @@ export const ProfileDetails: FC<Props> = ({ profile, session, loading }) => {
                         <div className="flex flex-col gap-2">
                             <DetailsItem loading={loading} title="City" value={profile?.address?.city ?? "-"} />
                             <DetailsItem loading={loading} title="State" value={profile?.address?.state ?? "-"} />
-                            <DetailsItem loading={loading} title="Postal Code" value={profile?.address?.postalCode?.toString() ?? "-"} />
+                            <DetailsItem loading={loading} title="Postal Code" value={profile?.address?.postalCode ?? "-"} />
                             <DetailsItem loading={loading} title="Country" value={profile?.address?.country ?? "-"} />
                         </div>
                     </div>

src/components/Footer/Footer.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { useParams, usePathname } from "next/navigation";
 import { FC } from "react";
+import { LinkWithLocale, Logo } from "../Common";
 
 // todo: add a faq page
 // how do i post an advert?
@@ -23,23 +24,11 @@ export const Footer: FC = () => {
     return (
         <div className={isLandingPage ? "bg-hero" : "bg-neutral"}>
             <footer className="container mx-auto grid grid-cols-2 gap-8 p-10 text-sm text-neutral-content md:grid-cols-4 md:gap-4">
-                <div className="col-span-2 flex w-full flex-col items-center justify-center gap-3 md:items-start">
-                    <svg
-                        className="fill-current"
-                        clipRule="evenodd"
-                        fillRule="evenodd"
-                        height="50"
-                        viewBox="0 0 24 24"
-                        width="50"
-                        xmlns="http://www.w3.org/2000/svg"
-                    >
-                        <path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path>
-                    </svg>
-                    <p className="w-full text-center md:text-left">
-                        Car Sale Ltd.
-                        <br />
-                        Providing reliable tech since 1992
-                    </p>
+                <div className="col-span-2 flex w-full flex-col items-center justify-center gap-1 md:items-start">
+                    <LinkWithLocale href="/">
+                        <Logo fontsize="text-3xl" />
+                    </LinkWithLocale>
+                    <p className="w-full text-center text-sm font-light opacity-90 md:text-left">Connecting Car Enthusiasts since 2023</p>
                 </div>
                 <div className="flex flex-col items-start gap-1 text-left opacity-90 md:items-end md:text-right">
                     <div className="footer-title">Company</div>

src/components/FormElements/Input/Input.tsx

@@ -29,9 +29,13 @@ export interface Props extends Omit<ControllerProps, "label" | "labelClassNames"
 const InputWrap = ({ children, inputPrefix, inputSuffix }: { children: ReactNode; inputPrefix?: ReactNode; inputSuffix?: ReactNode }) => {
     return (
         <div className="join join-horizontal w-full">
-            {inputPrefix && <span className="join-item flex items-center bg-base-200 px-3 py-1">{inputPrefix}</span>}
+            {inputPrefix && (
+                <span className="join-item flex items-center border-[1px] border-r-0 border-base-300 bg-base-200 px-3 py-1">{inputPrefix}</span>
+            )}
             {children}
-            {inputSuffix && <span className="join-item flex items-center bg-base-200 px-3 py-1">{inputSuffix}</span>}
+            {inputSuffix && (
+                <span className="join-item flex items-center border-[1px] border-l-0 border-base-300 bg-base-200 px-3 py-1">{inputSuffix}</span>
+            )}
         </div>
     );
 };

src/components/Forms/Listings/CreateListingForm.tsx

@@ -31,7 +31,7 @@ export const CreateListingForm = (props: Props) => {
             location: {
                 city: profile?.address?.city || "",
                 state: profile?.address?.state || "",
-                postalCode: profile?.address?.postalCode || 0,
+                postalCode: profile?.address?.postalCode || "",
                 country: profile?.address?.country || "LK",
             },
         },
@@ -43,7 +43,7 @@ export const CreateListingForm = (props: Props) => {
             location: {
                 city: profile?.address?.city || "",
                 state: profile?.address?.state || "",
-                postalCode: profile?.address?.postalCode || 0,
+                postalCode: profile?.address?.postalCode || "",
                 country: profile?.address?.country || "LK",
             },
         });

src/components/Forms/Profile/EditProfileForm.tsx

@@ -29,7 +29,7 @@ export const EditProfileForm: FC<Props> = (props) => {
                 city: userData?.address?.city || "",
                 state: userData?.address?.state || "",
                 country: userData?.address?.country || "LK",
-                postalCode: userData?.address?.postalCode,
+                postalCode: userData?.address?.postalCode || "",
             },
             isDealership: userData.isDealership,
             phoneNumber: userData.phone,

src/components/ListingsCarousel/ListingsCarousel.tsx

@@ -70,9 +70,9 @@ export const ListingsCarousel = (props: Props) => {
                                 >
                                     <LinkWithLocale
                                         className={clsx({
-                                            "card flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 overflow-hidden  bg-opacity-50 p-5  shadow  transition duration-300 zoom-inner-image hover:bg-opacity-80 hover:shadow-lg md:p-10":
+                                            "card flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 overflow-hidden  bg-opacity-70 p-5  shadow  transition duration-300 zoom-inner-image hover:bg-opacity-95 hover:shadow-lg md:p-10":
                                                 true,
-                                            "bg-neutral text-white opacity-95 hover:text-accent": tinted,
+                                            "bg-neutral text-white opacity-95 hover:text-secondary": tinted,
                                             "bg-base-200 text-base-content  hover:text-neutral": !tinted,
                                         })}
                                         href={viewMore.link}

src/components/Modals/ProfileUpdateModal.tsx

@@ -28,7 +28,7 @@ export const ProfileUpdateModal = (props: Props) => {
                 city: userData?.address?.city || "",
                 state: userData?.address?.state || "",
                 country: userData?.address?.country || "LK",
-                postalCode: userData?.address?.postalCode,
+                postalCode: userData?.address?.postalCode || "",
             },
             isDealership: userData.isDealership,
             phoneNumber: userData.phone,

src/components/Modals/WelcomeModal.tsx

@@ -20,7 +20,7 @@ export const WelcomeModal = () => {
 
     return (
         <>
-            <Modal cancelable={false} onVisibleChange={() => {}} title="Welcome to car sale" visible={modalVisible}>
+            <Modal cancelable={false} onVisibleChange={() => {}} title="Welcome to Targabay" visible={modalVisible}>
                 <form className="grid gap-1">
                     <div>
                         We&#39;re dedicated to making your vehicle buying and selling experience smooth and enjoyable. Here&#39;s what you can do:

src/components/NavBar/NavBarClient.tsx

@@ -3,7 +3,7 @@ import { Claims } from "@auth0/nextjs-auth0/edge";
 import { clsx } from "clsx";
 import dynamic from "next/dynamic";
 import { useParams, usePathname } from "next/navigation";
-import { LinkWithLocale } from "@/components/Common";
+import { LinkWithLocale, Logo } from "@/components/Common";
 import { ListingUser } from "@/utils/types";
 import { NavBarAuth } from "./NavBarAuth";
 import { PostAddLink, SearchLink } from "./NavBarButtons";
@@ -40,11 +40,14 @@ export const NavBarClient = ({
                     )}
                 >
                     <LinkWithLocale className="ml-0 sm:ml-1 md:ml-2" href="/">
-                        <button className="btn btn-ghost px-0 text-xl normal-case">Car Sale</button>
+                        <button className="btn btn-ghost hidden px-0 min-[355px]:block">
+                            <Logo />
+                        </button>
                     </LinkWithLocale>
-                    <div className="flex flex-row items-center gap-0 pr-0 sm:gap-2 sm:pr-2 lg:gap-4">
+                    <div className="flex flex-row items-center gap-0.5 pr-0 sm:gap-2 sm:pr-2 lg:gap-4">
                         <SearchLink />
                         <PostAddLink />
+                        <button className="btn btn-square btn-neutral btn-sm">🇦🇲</button>
                         <NavBarAuth loading={loading} notificationCount={notificationCount} userClaims={userClaims} />
                     </div>
                 </div>

src/utils/schemas.ts

@@ -20,7 +20,7 @@ const BooleanStringSchema = z.union([
         .transform((value) => value === "true"),
 ]);
 
-const phoneRegex = new RegExp(/^\+[0-9]{1,15}$/);
+const phoneRegex = new RegExp(/^[0-9]{7,14}$/);
 
 const removeCommas = (input: string) => input.replace(/,/g, "");
 
@@ -57,7 +57,7 @@ export const LocationSchema = z.object({
     city: z.string().min(1, "City is required"),
     state: z.string().min(1, "State is required"),
     country: z.string().min(1, "Country is required").default("LK"),
-    postalCode: getNumericSchema("Postal code needs to be a positive number"),
+    postalCode: z.string().min(1, "Postal code is required"),
 });
 
 export const VehicleImageSchema = z.object({
@@ -95,7 +95,7 @@ export const VehicleSchema = z.object({
     type: z.nativeEnum(VehicleTypes, { invalid_type_error: "Invalid Vehicle Type" }),
     brand: z.string().min(1, "Brand is required"),
     model: z.string().min(1, "Model is required"),
-    trim: z.string().min(1, "Trim is required"), // todo: remove server side validation and make this optional!
+    trim: z.string().optional(),
     yearOfManufacture: YearSchema,
     yearOfRegistration: YearSchema,
     millage: getNumericSchema("Mileage needs to be a positive number"),
@@ -233,7 +233,7 @@ export const UpdateProfileSchema = z.object({
         city: z.string().min(1, "City is required"),
         state: z.string().min(1, "State is required"),
         country: z.string().min(1, "Country is required").default("LK"),
-        postalCode: getNumericSchema("Postal code needs to be a positive number"),
+        postalCode: z.string().min(1, "Postal code is required"),
     }),
     phoneNumber: z.string().min(1, "Contact number is required").regex(phoneRegex, "Invalid phone number"),
 });

src/utils/types.ts

@@ -59,7 +59,7 @@ export type ListingUser = {
     address: null | {
         city?: string;
         country?: string;
-        postalCode?: number;
+        postalCode?: string;
         state?: string;
     };
     email: string;