wip

libs/pages/layout/src/lib/ui/menu-account/menu-account.tsx

@@ -20,11 +20,11 @@ export function MenuAccount(props: MenuAccountProps) {
         name={IconAwesomeEnum.CHECK}
         className={`mr-4 ${currentOrganization.id === organization.id ? 'text-success-500' : 'opacity-0'}`}
       />
-      <span className="w-8 h-8 p-1 rounded-sm flex items-center justify-center mr-3">
+      <span className="w-8 h-8 rounded-sm flex items-center justify-center mr-3">
         {organization.logo_url ? (
-          <img src={organization.logo_url} alt="" />
+          <img className="p-1" src={organization.logo_url} alt="" />
         ) : (
-          <span className="w-full h-full font-medium text-xxs text-text-400 bg-element-light-lighter-200 flex items-center justify-center uppercase">
+          <span className="w-full h-full font-medium text-xs text-text-400 bg-element-light-lighter-400 flex items-center justify-center uppercase rounded-sm">
             {organization.name.charAt(0)}
           </span>
         )}
@@ -92,7 +92,7 @@ export function MenuAccount(props: MenuAccountProps) {
   return (
     <Menu
       trigger={
-        <div className="cursor-pointer">
+        <div className="cursor-pointer select-none">
           <Avatar
             size={40}
             firstName={user?.first_name || ''}

libs/pages/layout/src/lib/ui/navigation/navigation.tsx

@@ -129,7 +129,7 @@ export function Navigation() {
         </div>
       </div>
 
-      <div className="flex w-16 h-16 mb-2 items-center justify-center border-t dark:border-element-light-darker-100 border-element-light-lighter-400">
+      <div className="flex w-16 h-16 mb-5 items-center justify-center border-t dark:border-element-light-darker-100 border-element-light-lighter-400">
         <MenuAccountFeature />
       </div>
     </div>

libs/pages/settings/src/lib/feature/page-organization-danger-zone-feature/page-organization-danger-zone-feature.tsx

@@ -25,10 +25,9 @@ export function PageOrganizationDangerZoneFeature() {
 
     dispatch(deleteOrganization({ organizationId }))
       .unwrap()
-      .then(() => {
-        setLoading(false)
-        navigate('/')
-      })
+      .then(() => navigate('/'))
+      .catch((error) => console.error(error))
+      .finally(() => setLoading(false))
   }
 
   return (

libs/pages/settings/src/lib/feature/page-organization-general-feature/page-organization-general-feature.tsx

@@ -34,11 +34,11 @@ export function PageOrganizationGeneralFeature() {
 
   useEffect(() => {
     methods.reset({
-      logo_url: organization?.logo_url || '',
       name: organization?.name || '',
-      description: organization?.description || '',
-      website_url: organization?.website_url || '',
-      admin_emails: organization?.admin_emails,
+      logo_url: organization?.logo_url || null,
+      description: organization?.description || null,
+      website_url: organization?.website_url || null,
+      admin_emails: organization?.admin_emails || null,
     })
   }, [
     methods,

libs/shared/ui/src/lib/components/avatar/avatar.spec.tsx

@@ -41,4 +41,25 @@ describe('Avatar', () => {
 
     expect(icon).toBeTruthy()
   })
+
+  it('should have an avatar logo with img', () => {
+    props.logoUrl = 'https://qovery.com/image'
+
+    render(<Avatar {...props} />)
+
+    const logo = screen.getByTestId('avatar-logo')
+
+    expect(logo.querySelector('img'))
+  })
+
+  it('should have an avatar logo with placeholder', () => {
+    props.logoText = 'Orga'
+
+    render(<Avatar {...props} />)
+
+    const logo = screen.getByTestId('avatar-logo')
+
+    expect(logo.querySelector('span'))
+    expect(logo.textContent).toBe('Orga')
+  })
 })

libs/shared/ui/src/lib/components/avatar/avatar.tsx

@@ -69,7 +69,7 @@ export function Avatar(props: AvatarProps) {
           {logoUrl ? (
             <img src={logoUrl} alt="Logo Organization" />
           ) : (
-            <span className="w-full h-full text-xxs text-text-400 bg-element-light-lighter-200 border border-element-light-lighter-100 rounded-full flex items-center justify-center uppercase">
+            <span className="w-full h-full text-xxs text-text-400 bg-element-light-lighter-300 border border-element-light-lighter-100 rounded-full flex items-center justify-center uppercase">
               {logoText}
             </span>
           )}

libs/shared/ui/src/lib/components/layouts/breadcrumb/breadcrumb.tsx

@@ -143,7 +143,7 @@ export function BreadcrumbMemo(props: BreadcrumbProps) {
 
   const squareContent = (text: string | undefined, margin = 'mr-2 mt-0.5') => (
     <div
-      className={`w-4 h-4.5 flex items-center justify-center text-xs text-text-400 text-center bg-element-light-lighter-400 rounded-sm font-bold ${margin}`}
+      className={`w-4 h-4.5 flex items-center justify-center text-xs text-text-400 text-center bg-element-light-lighter-400 rounded-sm font-bold uppercase ${margin}`}
     >
       {text}
     </div>

libs/shared/utils/src/lib/tools/refacto-payload.ts

@@ -145,8 +145,7 @@ export function refactoOrganizationPayload(organization: Partial<Organization>)
   const organizationRequestPayload: OrganizationEditRequest = {
     name: organization.name || '',
     description: organization.description,
-    icon_url: organization.icon_url,
-    logo_url: organization.logo_url,
+    logo_url: organization.logo_url || null,
     website_url: organization.website_url,
     admin_emails: organization.admin_emails,
   }