Feature/update user profile

client/app/[locale]/auth/sign-in/page.tsx

@@ -4,15 +4,18 @@ import { getI18n } from "@/utils/services/internationalization/server"
 
 import { siteConfig } from "@/config/site"
 import CommonPageLayout from "@/components/layouts/common"
+import NotAuthOnlyWrapper from "@/components/wrappers/not-auth-only/not-auth-only"
 
 export const metadata = siteConfig.page.signIn.metadata
 
 const SignInPage = async () => {
   const t = await getI18n()
   return (
-    <CommonPageLayout title={t("page.sign_in")}>
-      <SignInPageTemplate />
-    </CommonPageLayout>
+    <NotAuthOnlyWrapper>
+      <CommonPageLayout title={t("page.sign_in")} titlePosition="middle">
+        <SignInPageTemplate />
+      </CommonPageLayout>
+    </NotAuthOnlyWrapper>
   )
 }
 export default SignInPage

client/app/[locale]/auth/sign-up/page.tsx

@@ -4,15 +4,18 @@ import { getI18n } from "@/utils/services/internationalization/server"
 
 import { siteConfig } from "@/config/site"
 import CommonPageLayout from "@/components/layouts/common"
+import NotAuthOnlyWrapper from "@/components/wrappers/not-auth-only/not-auth-only"
 
 export const metadata = siteConfig.page.signUp.metadata
 
 const SignUpPage = async () => {
   const t = await getI18n()
   return (
-    <CommonPageLayout title={t("page.sign_up")}>
-      <SignUpPageTemplate />
-    </CommonPageLayout>
+    <NotAuthOnlyWrapper>
+      <CommonPageLayout title={t("page.sign_up")} titlePosition="middle">
+        <SignUpPageTemplate />
+      </CommonPageLayout>
+    </NotAuthOnlyWrapper>
   )
 }
 

client/app/[locale]/profile/edit/page.tsx

@@ -21,7 +21,7 @@ const EditProfilePage = async () => {
   const t = await getI18n()
   return (
     <AuthenticatedPageWrapper>
-      <CommonPageLayout title={t("page.edit_profile")} titlePosition="middle">
+      <CommonPageLayout title={t("page.edit_profile")}>
         <EditProfileTemplate
           cityList={cityList}
           countryList={countryList}

client/components/customized-ui/avatars/base.tsx

@@ -7,7 +7,7 @@ interface IBaseAvatar {
   url?: string
   alt: string | null
   fallBack: string | null
-  size?: "large" | "medium"
+  size?: "large" | "medium" | "veryLarge"
   className?: string
 }
 const BaseAvatar: React.FunctionComponent<IBaseAvatar> = ({
@@ -23,6 +23,7 @@ const BaseAvatar: React.FunctionComponent<IBaseAvatar> = ({
         size === "large" && "h-24 w-24 text-2xl",
 
         size === "medium" && "h-12 w-12 text-2xl",
+        size === "veryLarge" && "h-44 w-44 text-3xl",
         className
       )}
     >

client/components/customized-ui/badges/referee/referee.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { useI18n } from "@/utils/services/internationalization/client"
+
+const RefereeBadge = () => {
+  const t = useI18n()
+  return (
+    <div className="py flex items-center justify-center rounded-lg bg-teal-400 px-3 text-white">
+      {t("user.type.referee")}
+    </div>
+  )
+}
+
+export default RefereeBadge

client/components/customized-ui/badges/referrer/referrer.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import { useI18n } from "@/utils/services/internationalization/client"
+
+const ReferrerBadge = () => {
+  const t = useI18n()
+  return (
+    <div className="py flex shrink-0 items-center justify-center rounded-lg bg-orange-400 px-3 text-white">
+      {t("user.type.referrer")}
+    </div>
+  )
+}
+
+export default ReferrerBadge

client/components/customized-ui/bars/search.tsx

@@ -145,9 +145,7 @@ const SearchBar: React.FunctionComponent<ISearchSearchBarProps> = ({
       <div
         className={cn(
           "flex w-full flex-row md:mt-4",
-          bottomLeftSection
-            ? "justify-center md:justify-between "
-            : "justify-end"
+          bottomLeftSection ? "justify-between " : "justify-end"
         )}
       >
         {bottomLeftSection}

client/components/customized-ui/buttons/contact.tsx

@@ -5,6 +5,7 @@ import { useI18n } from "@/utils/services/internationalization/client"
 
 import { EMessageType } from "@/types/common/message-type"
 import { EReferralType } from "@/types/common/referral-type"
+import { cn } from "@/lib/utils"
 import useUserStore from "@/hooks/state/user/store"
 import { Button } from "@/components/ui/button"
 import { Icons } from "@/components/icons"
@@ -15,13 +16,17 @@ interface IContactButtonProps {
   messageType: EMessageType
   postUuid?: string | null
   receiverType?: EReferralType
+  buttonClassName?: string
+  showIcon?: boolean
 }
 const ContactButton: React.FunctionComponent<IContactButtonProps> = ({
   username,
   toUuid,
   messageType,
   postUuid,
   receiverType,
+  buttonClassName,
+  showIcon = false,
 }) => {
   const t = useI18n()
   const [isContactFormOpen, setIsContactFormOpen] = useState(false)
@@ -39,11 +44,12 @@ const ContactButton: React.FunctionComponent<IContactButtonProps> = ({
   return (
     <>
       <Button
-        className="flex w-full flex-row gap-1"
+        variant={"theme"}
+        className={cn("flex w-full flex-row gap-1", buttonClassName)}
         onClick={handleContactClick}
       >
-        <Icons.mail className="mr-1 h-4 w-4" />
-        <p> {t("general.contact")}</p>
+        {showIcon && <Icons.coffee size={16} />}
+        <p>Coffee Chat</p>
       </Button>
 
       <ContactDialog

client/components/customized-ui/footer/nav.tsx

@@ -12,7 +12,16 @@ import { Icons } from "@/components/icons"
 const NavFooter = () => {
   const t = useI18n()
   const pathname = usePathname()
-  const noShowFooter = pathname.includes(siteConfig.page.chat.href)
+
+  const hideFooterPageList = [
+    siteConfig.page.chat.href,
+    siteConfig.page.profile.href,
+    siteConfig.page.editProfile.href,
+  ]
+
+  const noShowFooter = hideFooterPageList.some((path) =>
+    pathname.includes(path)
+  )
   return (
     <footer
       className={cn(

client/components/customized-ui/form/check-box.tsx

@@ -16,13 +16,17 @@ interface ICheckBoxProps {
   name: string
   label: string
   description?: string
+  checkBoxClassName?: string
+  labelClassName?: string
 }
 
 const FormCheckBox: React.FunctionComponent<ICheckBoxProps> = ({
   control,
   name,
   label,
   description,
+  checkBoxClassName,
+  labelClassName,
 }) => {
   return (
     <FormField
@@ -31,10 +35,14 @@ const FormCheckBox: React.FunctionComponent<ICheckBoxProps> = ({
       render={({ field }) => (
         <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4 shadow">
           <FormControl>
-            <Checkbox checked={field.value} onCheckedChange={field.onChange} />
+            <Checkbox
+              checked={field.value}
+              onCheckedChange={field.onChange}
+              className={checkBoxClassName}
+            />
           </FormControl>
           <div className="space-y-1 leading-none">
-            <FormLabel>{label}</FormLabel>
+            <FormLabel className={labelClassName}>{label}</FormLabel>
             {description && <FormDescription>{description}</FormDescription>}
           </div>
           <FormMessage />

client/components/customized-ui/form/select.tsx

@@ -18,9 +18,10 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { IFormTextInputProps } from "@/components/customized-ui/form/input"
+import { ISelectOption } from "@/components/customized-ui/selects/base"
 
 interface IFormSelectProps extends IFormTextInputProps {
-  options: { value: string; label: string }[]
+  options: ISelectOption[]
   defaultValue?: string
   isDisabled?: boolean
   triggerClassName?: string