chore: Public Profile styling & schema changes

Author: wzrdx

src/components/account/profile/EditPublicProfile.tsx

@@ -5,16 +5,12 @@ import { buildPublicProfileSchema } from '@schemas/profile';
 import InputWithLabel from '@shared/InputWithLabel';
 import Label from '@shared/Label';
 import StyledInput from '@shared/StyledInput';
-import { PublicProfileInfo } from '@typedefs/general';
+import { BRANDING_PLATFORM_NAMES, PublicProfileInfo } from '@typedefs/general';
 import { useMemo, useState } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import z from 'zod';
 
-const PLATFORM_NAMES = {
-    Linkedin: 'LinkedIn',
-};
-
 export default function EditPublicProfile({
     profileInfo,
     brandingPlatforms,
@@ -99,7 +95,7 @@ export default function EditPublicProfile({
                                     render={({ field, fieldState }) => {
                                         return (
                                             <StyledInput
-                                                placeholder={PLATFORM_NAMES[platform] ?? platform}
+                                                placeholder={BRANDING_PLATFORM_NAMES[platform] ?? platform}
                                                 value={field.value ?? ''}
                                                 onChange={(e) => {
                                                     const value = e.target.value;

src/components/account/profile/PublicProfile.tsx

@@ -6,7 +6,7 @@ import { DetailsCard } from '@shared/cards/DetailsCard';
 import ProfileRow from '@shared/ProfileRow';
 import { useQuery } from '@tanstack/react-query';
 import { EthAddress } from '@typedefs/blockchain';
-import { PublicProfileInfo } from '@typedefs/general';
+import { BRANDING_PLATFORM_NAMES, PublicProfileInfo } from '@typedefs/general';
 import clsx from 'clsx';
 import { useEffect, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
@@ -119,20 +119,20 @@ export default function PublicProfile() {
                     <div className="center-all">
                         <div className="center-all h-[84px] w-[84px]">
                             {!address ? (
-                                <Skeleton className="h-full w-full rounded-full" />
+                                <Skeleton className="h-full w-full rounded-[37.5%]" />
                             ) : imageError ? (
                                 // Placeholder user icon when no image exists
-                                <div className="center-all h-full w-full rounded-full bg-slate-200 text-6xl text-white">
+                                <div className="center-all h-full w-full rounded-[37.5%] bg-slate-200 text-6xl text-white">
                                     <HiUser />
                                 </div>
                             ) : (
-                                <div className="center-all relative h-full w-full overflow-hidden rounded-full">
-                                    <Skeleton className="absolute h-full w-full rounded-full" />
+                                <div className="center-all relative h-full w-full overflow-hidden rounded-[37.5%]">
+                                    <Skeleton className="absolute h-full w-full rounded-[37.5%]" />
 
                                     <img
                                         src={profileImageUrl}
                                         alt="Profile"
-                                        className={clsx('z-10 h-full w-full rounded-full object-cover object-center', {
+                                        className={clsx('z-10 h-full w-full rounded-[37.5%] object-cover object-center', {
                                             'opacity-0': isImageLoading,
                                         })}
                                         onLoad={() => setImageLoading(false)}
@@ -233,7 +233,13 @@ export default function PublicProfile() {
                                                 <div className="text-slate-500">—</div>
                                             );
 
-                                        return <ProfileRow key={platform} label={platform} value={displayValue} />;
+                                        return (
+                                            <ProfileRow
+                                                key={platform}
+                                                label={BRANDING_PLATFORM_NAMES[platform] ?? platform}
+                                                value={displayValue}
+                                            />
+                                        );
                                     })}
                                 </div>
                             </DetailsCard>

src/schemas/profile.ts

@@ -10,7 +10,7 @@ export const buildPublicProfileSchema = (brandingPlatforms: string[]) => {
 
     return z.object({
         name: getStringSchema(3, 32),
-        description: getOptionalStringWithSpacesSchema(0, 512),
+        description: getOptionalStringWithSpacesSchema(0, 80),
         links: z.object(shape),
     });
 };

src/shared/ProfileRow.tsx

@@ -2,7 +2,10 @@ export default function ProfileRow({ label, value }: { label: string; value: Rea
     return (
         <div className="compact flex flex-col gap-0.5 sm:h-6 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
             <div className="text-slate-500">{label}</div>
-            <div>{value}</div>
+
+            <div className="max-w-[360px]">
+                <div className="overflow-hidden text-ellipsis whitespace-nowrap">{value}</div>
+            </div>
         </div>
     );
 }

src/typedefs/general.ts

@@ -1,5 +1,9 @@
 import { EthAddress } from './blockchain';
 
+export const BRANDING_PLATFORM_NAMES = {
+    Linkedin: 'LinkedIn',
+};
+
 type BillingInfo = {
     companyName: string;
     billingEmail: string;