feat(menu): Add pip to profiles without images (#168)

* feat(menu): Add pip to profiles without images * refactor: Configurable pip
pancakeswap · Feb 4, 2021 · b39c2e2 · b39c2e2
1 parent 617d570
commit b39c2e2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/src/__tests__/widgets/menu.test.tsx b/src/__tests__/widgets/menu.test.tsx
@@ -45,10 +45,10 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-ezrdKe hLsexG"
+        class="sc-bYEvPH cNGsRF"
       >
         <nav
-          class="sc-bYEvPH egOsQO"
+          class="sc-kLgntA jnPcoJ"
         >
           <div
             class="sc-gsTCUz dwpdGQ"
@@ -199,7 +199,7 @@ it("renders correctly", () => {
           </div>
         </nav>
         <div
-          class="sc-kLgntA lhzNyF"
+          class="sc-iktFzd dABFdo"
         >
           <div
             class="sc-hHftDr kbPZub"
@@ -565,12 +565,12 @@ it("renders correctly", () => {
             </div>
           </div>
           <div
-            class="sc-iktFzd dZNXlz"
+            class="sc-jJEJSO csWmhS"
           >
             body
           </div>
           <div
-            class="sc-bdfBwQ sc-jJEJSO bQcnNj eSqTXn"
+            class="sc-bdfBwQ sc-hiSbYr bQcnNj klxusr"
             role="presentation"
           />
         </div>

diff --git a/src/widgets/Menu/Avatar.tsx b/src/widgets/Menu/Avatar.tsx
@@ -10,14 +10,26 @@ interface AvatarProps {
 
 const StyledAvatar = styled.div`
   margin-left: 8px;
+  position: relative;
 
   img {
     border-radius: 50%;
   }
 `;
 
+const Pip = styled.div`
+  background-color: ${({ theme }) => theme.colors.failure};
+  border-radius: 50%;
+  pointer-events: none;
+  height: 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 8px;
+`;
+
 const Avatar: React.FC<AvatarProps> = ({ profile }) => {
-  const { username = "Bunny", image, profileLink, noProfileLink } = profile;
+  const { username = "Bunny", image, profileLink, noProfileLink, showPip = false } = profile;
   const link = profile.username ? profileLink : noProfileLink;
   const isExternal = link.startsWith("http");
   const ariaLabel = "Link to profile";
@@ -33,6 +45,7 @@ const Avatar: React.FC<AvatarProps> = ({ profile }) => {
         <a href={link} aria-label={ariaLabel}>
           {icon}
         </a>
+        {showPip && <Pip />}
       </StyledAvatar>
     );
   }
@@ -42,6 +55,7 @@ const Avatar: React.FC<AvatarProps> = ({ profile }) => {
       <Link to={link} aria-label={ariaLabel}>
         {icon}
       </Link>
+      {showPip && <Pip />}
     </StyledAvatar>
   );
 };

diff --git a/src/widgets/Menu/types.ts b/src/widgets/Menu/types.ts
@@ -10,6 +10,7 @@ export interface Profile {
   image?: string;
   profileLink: string;
   noProfileLink: string;
+  showPip?: boolean;
 }
 
 export interface PushedProps {