Update Avatar's border prop

codecov · Jul 4, 2024 · 5ea665c · 5ea665c
1 parent 8f3be9f
commit 5ea665c
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 20 deletions.
diff --git a/src/layouts/Header/components/UserDropdown/UserDropdown.tsx b/src/layouts/Header/components/UserDropdown/UserDropdown.tsx
@@ -104,7 +104,7 @@ function UserDropdown() {
         type="button"
         {...getToggleButtonProps()}
       >
-        <Avatar user={currentUser?.user} darkBordered />
+        <Avatar user={currentUser?.user} border="dark" />
         <span
           aria-hidden="true"
           className={cn('transition-transform', {

diff --git a/src/layouts/OldHeader/Dropdown.tsx b/src/layouts/OldHeader/Dropdown.tsx
@@ -105,7 +105,7 @@ function Dropdown({ currentUser }: { currentUser: CurrentUser }) {
         type="button"
         {...getToggleButtonProps()}
       >
-        <Avatar user={currentUser.user} lightBordered />
+        <Avatar user={currentUser.user} border="light" />
         <span
           aria-hidden="true"
           className={cs('transition-transform', {

diff --git a/src/pages/OwnerPage/Header/Header.jsx b/src/pages/OwnerPage/Header/Header.jsx
@@ -21,7 +21,7 @@ function Header() {
 
   return (
     <div className="flex items-center">
-      <Avatar user={ownerData} lightBordered />
+      <Avatar user={ownerData} border="light" />
       <h2 className="mx-2 text-xl font-semibold">{ownerData?.username}</h2>
     </div>
   )

diff --git a/src/pages/PullRequestPage/PullCoverage/routes/CommitsTab/CommitsTable/Title/Title.tsx b/src/pages/PullRequestPage/PullCoverage/routes/CommitsTab/CommitsTable/Title/Title.tsx
@@ -37,7 +37,7 @@ const Title = ({
 
   return (
     <div className="flex flex-1 flex-row items-center gap-4 lg:w-auto">
-      <Avatar user={user} lightBordered />
+      <Avatar user={user} border="light" />
       <div className="flex flex-col">
         {/* @ts-ignore */}
         <A to={{ pageName: 'commit', options: { commit: commitid, flags } }}>

diff --git a/src/pages/RepoPage/CommitsTab/CommitsTable/Title/Title.tsx b/src/pages/RepoPage/CommitsTab/CommitsTable/Title/Title.tsx
@@ -37,7 +37,7 @@ const Title = ({
 
   return (
     <div className="flex flex-1 flex-row items-center gap-4 lg:w-auto">
-      <Avatar user={user} lightBordered />
+      <Avatar user={user} border="light" />
       <div className="flex flex-col">
         {/* @ts-ignore */}
         <A to={{ pageName: 'commit', options: { commit: commitid, flags } }}>

diff --git a/src/pages/RepoPage/PullsTab/PullsTable/Title/Title.tsx b/src/pages/RepoPage/PullsTab/PullsTable/Title/Title.tsx
@@ -34,7 +34,7 @@ const Title: React.FC<TitleProps> = ({
   return (
     <div className="flex w-96 flex-row lg:w-auto">
       <span className="mr-5 flex items-center">
-        <Avatar user={user} lightBordered />
+        <Avatar user={user} border="light" />
       </span>
       <div className="flex w-5/6 flex-col lg:w-auto">
         {/* @ts-expect-error - disable because of non-ts component and type mismatch */}

diff --git a/src/ui/Avatar/Avatar.jsx b/src/ui/Avatar/Avatar.jsx
@@ -5,16 +5,15 @@ import { cn } from 'shared/utils/cn'
 
 import AvatarSVG from './AvatarSVG'
 
-let baseClasses = 'rounded-full h-6 w-6 flex items-center justify-center'
-let lightBorderedClasses = 'border-ds-gray-secondary border-2'
-let darkBorderedClasses = 'border-ds-gray-octonary border-2'
+const baseClasses = 'rounded-full h-6 w-6 flex items-center justify-center'
+const borderClasses = {
+  none: '',
+  light: 'border-ds-gray-secondary border-2',
+  dark: 'border-ds-gray-octonary border-2',
+}
 
-function Avatar({ user, lightBordered, darkBordered, ariaLabel }) {
-  const classes = cn(
-    baseClasses,
-    lightBordered ? lightBorderedClasses : '',
-    darkBordered ? darkBorderedClasses : ''
-  )
+function Avatar({ user, border = 'none', ariaLabel }) {
+  const classes = cn(baseClasses, borderClasses[border])
 
   const { src, error, isLoading } = useImage({
     src: user?.avatarUrl,
@@ -41,8 +40,7 @@ Avatar.propTypes = {
     username: PropTypes.string.isRequired,
     avatarUrl: PropTypes.string,
   }),
-  lightBordered: PropTypes.bool,
-  darkBordered: PropTypes.bool,
+  border: PropTypes.oneOf(['light', 'dark', 'none']),
   ariaLabel: PropTypes.string,
 }
 

diff --git a/src/ui/ContextSwitcher/ContextSwitcher.jsx b/src/ui/ContextSwitcher/ContextSwitcher.jsx
@@ -53,7 +53,7 @@ function ContextItem({ context, defaultOrgUsername, setToggle, owner }) {
           mutate({ username: orgUsername })
         }}
       >
-        <Avatar user={contextOwner} lightBordered />
+        <Avatar user={contextOwner} border="light" />
         <div className={cs('mx-1', { 'font-semibold': owner === orgUsername })}>
           {orgUsername}
         </div>
@@ -146,7 +146,7 @@ function ContextSwitcher({
         aria-expanded={toggle}
         onClick={() => setToggle((toggle) => !toggle)}
       >
-        <Avatar user={activeContext} lightBordered />
+        <Avatar user={activeContext} border="light" />
         <p className="ml-1">{activeContext?.username}</p>
         <span
           aria-hidden="true"

diff --git a/src/ui/List/List.stories.jsx b/src/ui/List/List.stories.jsx
@@ -39,7 +39,7 @@ const getListItems = () => {
     name: org.username,
     value: (
       <div className="flex items-center py-2">
-        <Avatar user={org} lightBordered />
+        <Avatar user={org} border="light" />
         <div className="mx-2 text-base">{org.username}</div>
       </div>
     ),