bug fix: verified label overlaps with text (#7415)

alkem-io · Jan 10, 2025 · 19234de · 19234de
1 parent afe2800
commit 19234de
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 27 deletions.
diff --git a/src/domain/community/contributor/organization/OrganizationVerifiedStatus.tsx b/src/domain/community/contributor/organization/OrganizationVerifiedStatus.tsx
@@ -1,39 +1,26 @@
 import { Tooltip } from '@mui/material';
-import createStyles from '@mui/styles/createStyles';
-import makeStyles from '@mui/styles/makeStyles';
-import { Help } from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import WrapperTypography from '@/core/ui/typography/deprecated/WrapperTypography';
+import { BlockTitle } from '@/core/ui/typography';
+import { BeenhereOutlined } from '@mui/icons-material';
 
 type VerifiedStatusProps = {
   verified: boolean;
   to?: string;
   helpText?: string;
 };
 
-const useStyles = makeStyles(theme =>
-  createStyles({
-    icon: {
-      marginLeft: theme.spacing(1),
-    },
-  })
-);
-
 export const OrganizationVerifiedStatus = ({ verified, helpText }: VerifiedStatusProps) => {
   const { t } = useTranslation();
-  const styles = useStyles();
-
-  const color = verified ? 'success' : 'warning';
 
   return (
-    <WrapperTypography weight="bold" color={color}>
-      {verified ? t('common.verified-status.verified') : t('common.verified-status.not-verified')}
+    <BlockTitle sx={{ display: 'flex', alignItems: 'center', columnGap: 0.5 }}>
       {helpText && verified && (
         <Tooltip title={helpText} arrow placement="right">
-          <Help color="primary" className={styles.icon} />
+          <BeenhereOutlined fontSize="small" color="primary" />
         </Tooltip>
       )}
-    </WrapperTypography>
+      {verified ? t('common.verified-status.verified') : t('common.verified-status.not-verified')}
+    </BlockTitle>
   );
 };
 

diff --git a/src/domain/community/profile/views/ProfileView/OrganizationProfileView.tsx b/src/domain/community/profile/views/ProfileView/OrganizationProfileView.tsx
@@ -6,6 +6,7 @@ import OrganizationVerifiedStatus from '@/domain/community/contributor/organizat
 import { Location } from '@/core/apollo/generated/graphql-schema';
 import { BlockTitle } from '@/core/ui/typography';
 import PageContentBlock from '@/core/ui/content/PageContentBlock';
+import Gutters from '@/core/ui/grid/Gutters';
 
 export interface OrganizationProfileViewEntity {
   displayName: string;
@@ -27,8 +28,8 @@ type OrganizationProfileViewProps = {
 
 const VerifiedBadge = styled(Box)(({ theme }) => ({
   position: 'absolute',
-  right: theme.spacing(3),
-  top: theme.spacing(3),
+  right: theme.spacing(0),
+  top: theme.spacing(0),
 }));
 
 export const OrganizationProfileView = ({ entity }: OrganizationProfileViewProps) => {
@@ -38,24 +39,24 @@ export const OrganizationProfileView = ({ entity }: OrganizationProfileViewProps
     <PageContentBlock>
       <CardContent sx={{ position: 'relative' }}>
         <VerifiedBadge>
-          {entity.verified !== undefined && (
+          {entity?.verified !== undefined && (
             <OrganizationVerifiedStatus
               verified={entity.verified}
               helpText={t('pages.organization.verified-status.help')}
             />
           )}
         </VerifiedBadge>
-        <Grid container spacing={2} direction="column">
-          <Grid item>
+        <Grid container spacing={3.5} direction="column">
+          <Gutters>
             <ProfileDetail title={t('components.profile.fields.bio.title')} value={entity.bio} />
-          </Grid>
+          </Gutters>
           {entity.tagsets
             ?.filter(t => t.tags.length > 0)
             .map((tagset, i) => (
-              <Grid item key={i}>
+              <Gutters key={i}>
                 <BlockTitle>{tagset.name}</BlockTitle>
                 <TagsComponent tags={tagset.tags} count={5} />
-              </Grid>
+              </Gutters>
             ))}
 
           {entity.links && entity.links.length ? (