update contributors image for unauth users and fix styles (#7354)

* update contributors image for unauth users and fix styles * resolve pr comments
alkem-io · Dec 19, 2024 · cdf70f6 · cdf70f6
1 parent f67cc0c
commit cdf70f6
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 36 deletions.
diff --git a/public/contributors/users-grayed.png b/public/contributors/users-grayed.png
diff --git a/src/domain/communication/discussion/pages/ForumPage.tsx b/src/domain/communication/discussion/pages/ForumPage.tsx
@@ -31,7 +31,7 @@ import TopLevelPageBreadcrumbs from '@/main/topLevelPages/topLevelPageBreadcrumb
 import { BlockTitle } from '@/core/ui/typography';
 
 const ALL_CATEGORIES = DiscussionCategoryExtEnum.All;
-const FORUM_GRAYED_OUT_IMAGE = '/forum/forum-grayed.png';
+const grayedOutForumImgSrc = '/forum/forum-grayed.png';
 
 const useSubscriptionToForum = UseSubscriptionToSubEntity<
   PlatformDiscussionsQuery['platform']['forum'],
@@ -149,18 +149,14 @@ export const ForumPage = ({ dialog }: { dialog?: 'new' }) => {
       >
         {!loading && !isAuthenticated ? (
           <ImageBackdrop
-            src={FORUM_GRAYED_OUT_IMAGE}
+            src={grayedOutForumImgSrc}
             backdropMessage={'login'}
             blockName={'all-contributing-users'}
             imageSx={{ filter: 'blur(2px)' }}
             messageSx={theme => ({
               [theme.breakpoints.up('sm')]: {
                 fontWeight: 'bold',
               },
-              [theme.breakpoints.up('lg')]: {
-                marginTop: theme.spacing(10),
-                marginBottom: theme.spacing(-10),
-              },
             })}
           />
         ) : (

diff --git a/src/domain/community/user/ContributorsView.tsx b/src/domain/community/user/ContributorsView.tsx
@@ -27,7 +27,7 @@ import { useColumns } from '@/core/ui/grid/GridContext';
 import GridProvider from '@/core/ui/grid/GridProvider';
 import { Identifiable } from '@/core/utils/Identifiable';
 
-const USERS_GRAYED_OUT_IMAGE = '/contributors/users-grayed.png';
+const grayedOutUsersImgSrc = '/contributors/users-grayed.png';
 export const ITEMS_PER_PAGE = 32;
 
 const userToContributorCard = (user: UserContributorFragment): ContributorCardSquareProps => {
@@ -155,17 +155,13 @@ const ContributorsView = ({
         {!showUsers && (
           <Grid item>
             <ImageBackdrop
-              src={USERS_GRAYED_OUT_IMAGE}
-              backdropMessage={'login'}
-              blockName={'all-contributing-users'}
+              src={grayedOutUsersImgSrc}
+              backdropMessage="login"
+              blockName="all-contributing-users"
               messageSx={theme => ({
                 [theme.breakpoints.up('sm')]: {
                   fontWeight: 'bold',
                 },
-                [theme.breakpoints.up('lg')]: {
-                  marginTop: theme.spacing(10),
-                  marginBottom: theme.spacing(-10),
-                },
               })}
             />
           </Grid>

diff --git a/src/domain/shared/components/Backdrops/ImageBackdrop.tsx b/src/domain/shared/components/Backdrops/ImageBackdrop.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import useNavigate from '@/core/routing/useNavigate';
 import { BackdropProps } from './BackdropWithMessage';
@@ -11,33 +11,47 @@ const Root = styled(Box)(() => ({
   overflow: 'hidden',
 }));
 
-const Background = styled(ImageFadeIn)(() => ({
+const Background = styled(ImageFadeIn)(({ theme }) => ({
+  display: 'grid',
+  placeContent: 'center',
+
   width: '100%',
   height: '100%',
+  objectFit: 'cover',
+
+  [theme.breakpoints.up('sm')]: {
+    width: '100%',
+  },
+
+  [theme.breakpoints.down('sm')]: {
+    height: 160,
+  },
 }));
 
-const Message = styled(Box)(() => ({
+const Message = styled(Box)(({ theme }) => ({
   position: 'absolute',
-  top: 0,
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  flexWrap: 'wrap',
-  textAlign: 'center',
-  alignItems: 'center',
+  inset: 0,
+
+  display: 'grid',
+  placeContent: 'center',
+
+  [theme.breakpoints.down('sm')]: {
+    padding: theme.spacing(0.5),
+  },
 }));
 
 const ButtonsWrapper = styled(Box)(({ theme }) => ({
-  flexBasis: '100%',
   textAlign: 'center',
   '& > button': {
-    marginLeft: theme.spacing(2),
-    marginRight: theme.spacing(2),
-  },
-}));
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+    marginTop: theme.spacing(1),
 
-const FlexSpacer = styled(Box)(() => ({
-  flexBasis: '50%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(2),
+      marginRight: theme.spacing(2),
+    },
+  },
 }));
 
 interface ImageBackdropProps extends BackdropProps {
@@ -65,23 +79,23 @@ const ImageBackdrop: FC<ImageBackdropProps> = ({
       {show && (
         <Root>
           <Background src={src} sx={imageSx} />
+
           {children}
+
           <Message>
-            <FlexSpacer />
             <Typography variant="h5" sx={messageSx} width="100%" textAlign="center">
-              {t(`components.backdrop.${backdropMessage}` as const, {
-                blockName: t(`common.blocks.${blockName}` as const),
-              })}
+              {t(`components.backdrop.${backdropMessage}`, { blockName: t(`common.blocks.${blockName}`) })}
             </Typography>
+
             <ButtonsWrapper>
               <Button variant={'contained'} onClick={() => navigate(_AUTH_LOGIN_PATH, { replace: true })}>
                 {t('authentication.sign-in')}
               </Button>
+
               <Button variant={'contained'} onClick={() => navigate(AUTH_SIGN_UP_PATH, { replace: true })}>
                 {t('authentication.sign-up')}
               </Button>
             </ButtonsWrapper>
-            <FlexSpacer />
           </Message>
         </Root>
       )}