add responsive styling to avatar

zooniverse · Jun 6, 2024 · 8ba217e · 8ba217e
1 parent 7b355e8
commit 8ba217e
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/packages/lib-user/src/components/UserHome/components/Dashboard/Dashboard.js b/packages/lib-user/src/components/UserHome/components/Dashboard/Dashboard.js
@@ -1,6 +1,7 @@
-import { Box, Image } from 'grommet'
+import { Box, Image, ResponsiveContext } from 'grommet'
 import styled from 'styled-components'
 import { shape, string } from 'prop-types'
+import { useContext } from 'react'
 
 const Relative = styled(Box)`
   position: relative;
@@ -11,19 +12,32 @@ const StyledAvatar = styled(Image)`
   height: 128px;
   object-fit: cover;
   border-radius: 50%;
-  border: solid white 5px;
+  border: solid white 6px;
   position: absolute;
-  top: 206px;
+  top: 203px;
+
+  // For Grommet breakpoint small
+  @media (width < 769px) {
+    width: 80px;
+    height: 80px;
+    top: 137px;
+  }
 `
 
 export default function Dashboard({ authUser, profileBannerSrc = '' }) {
+  const size = useContext(ResponsiveContext)
+
   return (
     <Relative
       fill
       align='center'
-      height={{ min: '270px', max: '270px' }}
+      height={
+        size !== 'small'
+          ? { min: '270px', max: '270px' }
+          : { min: '180px', max: '180px' }
+      }
       background={{ image: `url(${profileBannerSrc})`, color: 'neutral-1' }}
-      round={{ size: '16px', corner: 'top' }}
+      round={size !== 'small' ? { size: '16px', corner: 'top' } : false}
     >
       <StyledAvatar
         alt='User avatar'