Minor UI improvements

TODO.md

@@ -49,3 +49,5 @@
 -   [] contact us section?
 -   [] make auth0 run fully on edge
 
+> SEO Todo list
+-   [] https://webmasters.stackexchange.com/questions/104987/how-to-change-which-image-from-website-is-shown-in-google-search-result

src/app/[locale]/(landingPage)/layout.tsx

@@ -23,7 +23,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             </div>
             <Image
                 alt="cover-image"
-                className="absolute inset-x-0 bottom-0 m-auto hidden w-full opacity-30 md:block md:w-10/12 lg:w-11/12 xl:max-w-7xl"
+                className="absolute inset-x-0 bottom-0 m-auto w-full opacity-20 md:w-10/12 md:opacity-30 lg:w-11/12 xl:max-w-7xl"
                 height={450}
                 priority={false}
                 src="/images/cover-image.webp"

src/components/ListingsCarousel/ListingsCarousel.tsx

@@ -64,20 +64,20 @@ export const ListingsCarousel = (props: Props) => {
                                 <div
                                     key="view-more"
                                     className={clsx(
-                                        "rounded-box relative aspect-video w-[calc(75%)] min-w-0 flex-none shadow duration-300  hover:shadow-lg sm:w-[calc(60%)] md:w-[calc(45%)] lg:w-[calc(38%)] xl:w-[calc(29%)] 2xl:w-[calc(23%)]",
+                                        "rounded-box relative w-[calc(75%)] min-w-0 flex-none shadow  duration-300 hover:shadow-lg sm:w-[calc(60%)] md:w-[calc(45%)] lg:w-[calc(38%)] xl:w-[calc(29%)] 2xl:w-[calc(23%)]",
                                         tinted && "hover:shadow-neutral",
                                     )}
                                 >
                                     <LinkWithLocale
                                         className={clsx({
-                                            "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":
+                                            "card flex h-full w-full cursor-pointer flex-col items-center justify-center gap-3 overflow-hidden  bg-opacity-70 p-7 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-secondary": tinted,
                                             "bg-base-200 text-base-content  hover:text-neutral": !tinted,
                                         })}
                                         href={viewMore.link}
                                     >
-                                        <div className="text-2xl font-bold opacity-80 ">{viewMore.title}</div>
+                                        <div className="text-center text-2xl font-bold opacity-80 ">{viewMore.title}</div>
                                         <div className="text-center text-sm opacity-50">{viewMore.subTitle}</div>
                                     </LinkWithLocale>
                                 </div>

src/components/Modals/CountrySelectModal.tsx

@@ -12,12 +12,13 @@ import { AutocompleteController } from "../FormElements/AutoComplete";
 
 interface Props {
     currentLocale: string;
+    onNewCountrySelect: (country: string) => void;
     setVisible: (visible: boolean) => void;
     visible: boolean;
 }
 
 export const CountrySelectModal = (props: Props) => {
-    const { currentLocale, setVisible, visible } = props;
+    const { currentLocale, onNewCountrySelect, setVisible, visible } = props;
     const router = useRouter();
     const currentCountry = COUNTRIES[currentLocale]?.[0];
 
@@ -44,6 +45,9 @@ export const CountrySelectModal = (props: Props) => {
         router.replace(`/${pathWithNewLocale}${window.location.search}`);
         toast.success(`Successfully switched to country ${country}`);
         setVisible(false);
+        if (locale) {
+            onNewCountrySelect(locale);
+        }
     };
 
     useEffect(() => {

src/components/NavBar/NavBarClient.tsx

@@ -11,7 +11,11 @@ import { PostAddLink, SearchLink } from "./NavBarButtons";
 const NewUserOnboardModal = dynamic(() => import("@/components/Modals/NewUserOnboardModal").then((mod) => mod.NewUserOnboardModal), { ssr: false });
 
 const NavBarCountryBtn = dynamic(() => import("./NavBarCountryBtn").then((mod) => mod.NavBarCountryBtn), {
-    loading: () => <button className="btn btn-disabled btn-square btn-sm animate-pulse " />,
+    loading: () => (
+        <button className="btn btn-square !btn-neutral btn-sm animate-pulse opacity-70 " disabled>
+            <span className="loading loading-ring loading-xs" />
+        </button>
+    ),
 });
 
 export const NavBarClient = ({

src/components/NavBar/NavBarCountryBtn.tsx

@@ -1,23 +1,29 @@
 import { useParams } from "next/navigation";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { CountrySelectModal } from "@/components/Modals/CountrySelectModal";
 import { COUNTRIES } from "@/utils/countries";
 
 export const NavBarCountryBtn = () => {
     const [CountrySelectModalVisible, setCountrySelectModalVisible] = useState(false);
     const params = useParams();
     const countryFlag = useMemo(() => COUNTRIES[params.locale as string]?.[4], [params.locale]);
+    const [selectedCountry, setSelectedCountry] = useState(params.locale);
+    const loading = params.locale && params.locale !== selectedCountry;
+
+    useEffect(() => setSelectedCountry(params.locale), [params.locale]);
+
     return (
         <>
             <button
-                className="btn btn-square btn-neutral btn-sm opacity-60 hover:opacity-100"
-                disabled={!countryFlag}
+                className="btn btn-square !btn-neutral btn-sm opacity-70 hover:opacity-100"
+                disabled={!countryFlag || !!loading}
                 onClick={() => setCountrySelectModalVisible(true)}
             >
-                {countryFlag}
+                {loading ? <span className="loading loading-ring loading-xs" /> : countryFlag}
             </button>
             <CountrySelectModal
                 currentLocale={params.locale as string}
+                onNewCountrySelect={(locale) => setSelectedCountry(locale)}
                 setVisible={setCountrySelectModalVisible}
                 visible={CountrySelectModalVisible}
             />