refactor: update non-connected user avatar (#967)

Fixes #964
open-sauced · Mar 7, 2023 · 51bf664 · 51bf664
1 parent 5ae0e56
commit 51bf664
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 4 deletions.
diff --git a/components/atoms/Avatar/avatar.tsx b/components/atoms/Avatar/avatar.tsx
@@ -12,6 +12,7 @@ interface AvatarProps {
   hasBorder?: boolean;
   isCircle?: boolean;
   isCached?: boolean;
+  initialsClassName?: string;
 }
 
 const avatarLoader = () => {
@@ -37,7 +38,16 @@ const Avatar = (props: AvatarProps): JSX.Element => {
 
 export default Avatar;
 
-const CustomAvatar = ({ className, avatarURL, initials, alt, size, hasBorder, isCircle }: AvatarProps): JSX.Element => {
+const CustomAvatar = ({
+  className,
+  avatarURL,
+  initials,
+  alt,
+  size,
+  hasBorder,
+  isCircle,
+  initialsClassName
+}: AvatarProps): JSX.Element => {
   return (
     <div
       className={`inline-flex ${
@@ -58,7 +68,7 @@ const CustomAvatar = ({ className, avatarURL, initials, alt, size, hasBorder, is
         />
       ) : (
         <div
-          className={`flex items-center justify-center font-bold leading-none text-slate-50 mb-0.25 text-${size}`}
+          className={`${initialsClassName} flex items-center justify-center font-bold leading-none text-slate-50 mb-0.25 `}
           style={{ width: size, height: size }}
         >
           {initials}

diff --git a/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx b/components/molecules/ContributorProfileHeader/contributor-profile-header.tsx
@@ -21,10 +21,26 @@ const ContributorProfileHeader = ({ avatarUrl, githubName, isConnected }: Contri
 
       <div className="container mx-auto px-2 md:px-16  flex flex-row items-end justify-between py-6">
         <div className="translate-y-[65px] hidden md:inline-flex">
-          <Avatar className="" hasBorder avatarURL={avatarUrl} size={184} isCircle />
+          <Avatar
+            initialsClassName="text-[100px] -translate-y-2.5  leading-none"
+            initials={githubName?.charAt(0)}
+            className=""
+            hasBorder
+            avatarURL={isConnected ? avatarUrl : ""}
+            size={184}
+            isCircle
+          />
         </div>
         <div className="translate-y-[125px] md:hidden ">
-          <Avatar className="" hasBorder avatarURL={avatarUrl} size={120} isCircle />
+          <Avatar
+            initialsClassName="text-[70px] -translate-y-1 leading-none"
+            initials={githubName?.charAt(0)}
+            className=""
+            hasBorder
+            avatarURL={isConnected ? avatarUrl : ""}
+            size={120}
+            isCircle
+          />
         </div>
         {isConnected && (
           <div className="flex md:translate-y-0 translate-y-28 gap-3 flex-col md:flex-row items-center">