Skip to content

Commit

Permalink
Update Partners page styles
Browse files Browse the repository at this point in the history
  • Loading branch information
ani-kalpachka committed Mar 16, 2024
1 parent 0fdf118 commit b075f58
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 20 deletions.
2 changes: 1 addition & 1 deletion src/components/admin/partners/Partners.styled.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import theme from '../../../common/theme'
export const SectionTitle = styled(Typography)(() => ({
fontSize: theme.typography.pxToRem(24),
textAlign: 'center',
paddingBottom: theme.spacing(11.5),
paddingBottom: theme.spacing(5),
}))

export const StyledGrid = styled(Grid)(() => ({
Expand Down
52 changes: 33 additions & 19 deletions src/components/admin/partners/PartnersContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import useMobile from '../../../common/hooks/useMobile'
import { organizations, partners, mainPartners } from './helpers/partnersData'
import { SectionTitle, StyledGrid } from './Partners.styled'
import PartnersSlider from './PartnersSlider'
import theme from 'common/theme'

const PartnersContent = () => {
const LOGO_WIDTH = 181
Expand All @@ -18,9 +19,9 @@ const PartnersContent = () => {
return (
<>
<Container maxWidth="lg">
<Grid container alignItems={'center'}>
<Grid container sx={{ display: 'flex', justifyContent: 'center' }}>
{partners.map((partner) => (
<StyledGrid item xs={12} md={4} paddingTop={8} key={partner.name}>
<StyledGrid item xs={12} md={4} paddingTop={8} paddingBottom={5} key={partner.name}>
<SectionTitle>{t(partner.title)}</SectionTitle>
<ExternalLink href={partner.website}>
<Image
Expand All @@ -40,23 +41,36 @@ const PartnersContent = () => {
<SectionTitle>{t(el.title)}</SectionTitle>
</Grid>

{el.items.map((partner, index) => (
<StyledGrid
key={partner}
item
xs={12}
md={4}
paddingTop={index > 0 && mobile ? 4 : 0}>
<ExternalLink href={el.websites[index]}>
<Image
alt="logo"
src={`/img/partners/${partner}.svg`}
width={LOGO_WIDTH}
height={LOGO_HEIGHT}
/>
</ExternalLink>
</StyledGrid>
))}
<Grid
sx={{
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(2),
paddingBottom: theme.spacing(5),

[theme.breakpoints.up('md')]: {
justifyContent: 'space-between',
flexDirection: 'row',
gap: theme.spacing(6),
},

[theme.breakpoints.up('lg')]: {
gap: theme.spacing(12),
},
}}>
{el.items.map((partner, index) => (
<StyledGrid key={partner} item xs={12} paddingTop={index > 0 && mobile ? 4 : 0}>
<ExternalLink href={el.websites[index]}>
<Image
alt="logo"
src={`/img/partners/${partner}.svg`}
width={LOGO_WIDTH}
height={LOGO_HEIGHT}
/>
</ExternalLink>
</StyledGrid>
))}
</Grid>
</Fragment>
))}
</Grid>
Expand Down

0 comments on commit b075f58

Please sign in to comment.