refactor: cleanup component ProfilePicture (#7136)

* refactor: cleanup component `ProfilePicture` * chore: rename to `UserAvatar` * refactor: rename useravatar to profileavatar * refactor: rename profileavatar to profilepicture --------- Co-authored-by: Begoña Alvarez <[email protected]>
iotaledger · Aug 19, 2023 · be2c429 · be2c429
1 parent 9d6c771
commit be2c429
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 47 deletions.
diff --git a/packages/desktop/views/dashboard/Sidebar.svelte b/packages/desktop/views/dashboard/Sidebar.svelte
@@ -8,7 +8,7 @@
     import { isRecentDate } from '@core/utils'
     import { ISidebarTab } from '@desktop/routers'
     import features from '@features/features'
-    import { Icon, Modal, NotificationBadge, ProfileActionsModal, ProfilePicture } from '@ui'
+    import { Icon, Modal, NotificationBadge, ProfileActionsModal, ProfilePicture, Size } from '@ui'
 
     let profileModal: Modal
 
@@ -115,7 +115,7 @@
                 class="w-10 h-10 relative flex items-center justify-center rounded-full bg-{profileColor}-500 leading-100"
                 on:click={profileModal?.open}
             >
-                <ProfilePicture profile={$activeProfile} size="medium" />
+                <ProfilePicture profile={$activeProfile} size={Size.Medium} />
                 {#if !$shouldOpenProfileModal && (!isBackupSafe || !$appVersionDetails.upToDate)}
                     <NotificationBadge />
                 {/if}

diff --git a/packages/shared/components/Profile.svelte b/packages/shared/components/Profile.svelte
@@ -6,6 +6,7 @@
         Icon,
         NetworkIconBadge,
         ProfilePicture,
+        Size,
         StrongholdBadge,
         Text,
         TextType,
@@ -28,7 +29,7 @@
             disabled={!onClick}
             class="relative mb-3 {onClick ? 'cursor-pointer' : 'cursor-default'}"
         >
-            <ProfilePicture {profile} size="large" />
+            <ProfilePicture {profile} size={Size.Large} />
             {#if !updateRequired}
                 <NetworkIconBadge networkId={profile?.network?.id} tooltipText={profile?.network?.name} />
             {:else}

diff --git a/packages/shared/components/ProfilePicture.svelte b/packages/shared/components/ProfilePicture.svelte
@@ -2,64 +2,63 @@
     import { getIconColorFromString } from '@core/account/utils'
     import { IPersistedProfile } from '@core/profile'
     import { getInitials } from '@core/utils'
-    import { NftMedia, Text } from '@ui'
-    import { FontWeight } from './enums'
+    import { NftMedia, Text, FontWeight, Size } from '@ui'
 
     export let profile: IPersistedProfile
-    export let size: 'large' | 'medium' | 'small' = 'large'
-    export let backgroundColor: string | undefined = undefined
+    export let size: Size.Large | Size.Medium | Size.Small = Size.Large
+    export let backgroundColor: string = getIconColorFromString(profile?.name, {
+        shades: ['500'],
+        colorsToExclude: ['gray'],
+    })
 
-    let height: number
-    let width: number
-    let fontSize: number
     let lineHeight: string
-    $: {
-        switch (size) {
-            case 'large':
-                height = 18
-                width = 18
-                fontSize = 18
-                lineHeight = '160'
-                break
-            case 'medium':
-                height = 10
-                width = 10
-                fontSize = 13
-                lineHeight = '110'
-                break
-            case 'small':
-                height = 8
-                width = 8
-                fontSize = 11
-                lineHeight = '110'
-                break
-            default:
-                break
-        }
+    let fontSize: number
+
+    $: lineHeight = LINE_HEIGHTS[size]
+    $: fontSize = FONT_SIZES[size]
+
+    const FONT_SIZES: { [key in Size]: number } = {
+        [Size.Large]: 18,
+        [Size.Medium]: 13,
+        [Size.Small]: 11,
     }
 
-    $: backgroundColor =
-        backgroundColor || getIconColorFromString(profile?.name, { shades: ['500'], colorsToExclude: ['gray'] })
+    const LINE_HEIGHTS: { [key in Size]: string } = {
+        [Size.Large]: '160',
+        [Size.Medium]: '110',
+        [Size.Small]: '110',
+    }
 </script>
 
 <profile-picture
-    class="rounded-full font-bold text-center flex items-center justify-center overflow-hidden
-        h-{height} w-{width}
-        {backgroundColor ? 'icon-bg' : 'bg-blue-500'}
-    "
-    style={backgroundColor ? `--icon-bg-color: ${backgroundColor}` : ''}
+    class="rounded-full font-bold text-center flex items-center justify-center icon-bg overflow-hidden {size}"
+    style:--icon-bg-color={backgroundColor}
 >
     {#if profile?.pfp}
-        <NftMedia nft={profile.pfp} classes="rounded-full object-cover h-{height} w-{width}" />
+        <nft-wrapper>
+            <NftMedia nft={profile.pfp} classes="w-full h-full rounded-full object-cover" />
+        </nft-wrapper>
     {:else if profile?.name}
-        <Text {fontSize} {lineHeight} fontWeight={FontWeight.bold} classes="text-white"
-            >{getInitials(profile.name, 3)}</Text
-        >
+        <Text {fontSize} {lineHeight} fontWeight={FontWeight.bold} classes="text-white">
+            {getInitials(profile.name, 3)}
+        </Text>
     {/if}
 </profile-picture>
 
 <style lang="scss">
-    .icon-bg {
+    profile-picture {
         background-color: var(--icon-bg-color);
+        &.small,
+        &.small nft-wrapper {
+            @apply h-8 w-8;
+        }
+        &.medium,
+        &.medium nft-wrapper {
+            @apply h-10 w-10;
+        }
+        &.large,
+        &.large nft-wrapper {
+            @apply h-18 w-18;
+        }
     }
 </style>
diff --git a/packages/shared/components/enums/index.ts b/packages/shared/components/enums/index.ts
@@ -14,4 +14,5 @@ export * from './position.enum'
 export * from './tab.enum'
 export * from './text-hint-variant.enum'
 export * from './text-type.enum'
+export * from './size.enum'
 export * from './tooltip-type.enum'
diff --git a/packages/shared/components/enums/size.enum.ts b/packages/shared/components/enums/size.enum.ts
@@ -0,0 +1,5 @@
+export enum Size {
+    Small = 'small',
+    Medium = 'medium',
+    Large = 'large',
+}
diff --git a/packages/shared/components/index.js b/packages/shared/components/index.js
@@ -10,8 +10,8 @@ export { default as BalanceSummarySection } from './BalanceSummarySection.svelte
 export { default as BasicActivityDetails } from './BasicActivityDetails.svelte'
 export { default as BoxedIcon } from './BoxedIcon.svelte'
 export { default as Button } from './Button.svelte'
-export { default as ColoredCircle } from './ColoredCircle.svelte'
 export { default as ColorPicker } from './ColorPicker.svelte'
+export { default as ColoredCircle } from './ColoredCircle.svelte'
 export { default as ConsolidationActivityDetails } from './ConsolidationActivityDetails.svelte'
 export { default as DateInputButton } from './DateInputButton.svelte'
 export { default as Error } from './Error.svelte'

diff --git a/packages/shared/components/modals/ProfileActions.svelte b/packages/shared/components/modals/ProfileActions.svelte
@@ -17,6 +17,7 @@
         Text,
         TextType,
         Toggle,
+        Size,
         BoxedIcon,
     } from '@ui'
     import { fade } from 'svelte/transition'
@@ -87,7 +88,7 @@
 >
     <profile-modal-content class="flex flex-col" in:fade={{ duration: 100 }}>
         <div class="flex flex-row flex-nowrap items-center space-x-3 p-3">
-            <ProfilePicture profile={$activeProfile} size="small" />
+            <ProfilePicture profile={$activeProfile} size={Size.Small} />
             <div class="flex flex-row items-center space-x-2">
                 <Text>{profileName}</Text>
                 {#if $activeProfile?.isDeveloperProfile}