Skip to content

Commit

Permalink
fix fonts in partners section
Browse files Browse the repository at this point in the history
  • Loading branch information
aeddaqqa committed Feb 20, 2024
1 parent 535aafa commit 4d6ad68
Showing 9 changed files with 44 additions and 24 deletions.
18 changes: 14 additions & 4 deletions src/components/Partners/BusinessFieldFilter.tsx
Original file line number Diff line number Diff line change
@@ -33,6 +33,8 @@ const BusinessFieldFilter: React.FC<BusinessFieldFilterProps> = ({
padding: '0',
maxWidth: '400px',
borderRadius: '12px',
paddingRight: '0px !important',
width: '50% !important',
color: theme => theme.palette.text.primary,
'.MuiSelect-select ': {
boxSizing: 'border-box',
@@ -43,6 +45,10 @@ const BusinessFieldFilter: React.FC<BusinessFieldFilterProps> = ({
alignItems: 'center',
border: theme => `solid 2px ${theme.palette.card.border}`,
},
'& .MuiPopover-paper ul': {
paddingRight: 'unset !important',
width: '100% !important',
},
'.MuiOutlinedInput-notchedOutline': {
border: 'none !important',
},
@@ -52,7 +58,7 @@ const BusinessFieldFilter: React.FC<BusinessFieldFilterProps> = ({
height: '40px',
},
}}
renderValue={() => <Typography variant="body1">Business fields</Typography>}
renderValue={() => <Typography variant="caption">Business fields</Typography>}
MenuProps={{
PaperProps: {
style: {
@@ -63,13 +69,17 @@ const BusinessFieldFilter: React.FC<BusinessFieldFilterProps> = ({
}}
>
<MenuItem sx={{ display: 'none' }} value={'default'}>
<Typography variant="body1">Business fields</Typography>
<Typography variant="caption">Business fields</Typography>
</MenuItem>
{state.businessField.map((businessField, index) => (
<MenuItem key={index} value={businessField.name}>
<ListItemText
sx={[{ color: !businessField.active ? '#CBD4E2' : '#ffffff' }]}
primary={businessField.name}
sx={[
{
color: !businessField.active ? '#CBD4E2' : '#ffffff',
},
]}
primary={<Typography variant="caption">{businessField.name}</Typography>}
/>
{businessField.active && <Icon path={mdiCheckCircle} size={1} />}
</MenuItem>
3 changes: 3 additions & 0 deletions src/components/Partners/PartnerBusinessFields.tsx
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ const PartnerBusinessFields = ({ business_fields, isPartnerView }: PartnerBusine
sx={{
backgroundColor: 'transparent',
border: '1px solid',
fontSize: '12px',
borderColor: theme => theme.palette.grey['700'],
}}
label={elem.attributes.BusinessField}
@@ -23,6 +24,7 @@ const PartnerBusinessFields = ({ business_fields, isPartnerView }: PartnerBusine
sx={{
backgroundColor: 'transparent',
border: '1px solid',
fontSize: '12px',
borderColor: theme => theme.palette.grey['700'],
}}
label={business_fields.data[0].attributes.BusinessField}
@@ -32,6 +34,7 @@ const PartnerBusinessFields = ({ business_fields, isPartnerView }: PartnerBusine
backgroundColor: 'transparent',
border: '1px solid',
borderColor: theme => theme.palette.grey['700'],
fontSize: '12px',
}}
label={`+${business_fields.data.length - 1}`}
/>
10 changes: 7 additions & 3 deletions src/components/Partners/PartnerCard.tsx
Original file line number Diff line number Diff line change
@@ -69,8 +69,8 @@ const PartnerCard: React.FC<PartnerCardProps> = ({ partner, onClick }) => {
logoBox={logoBox}
/>
)}
<Box sx={{ height: '60px' }}>
{!!companyName && <Typography variant="h3">{companyName}</Typography>}
<Box sx={{ height: 'auto' }}>
{!!companyName && <Typography variant="h5">{companyName}</Typography>}
</Box>
<Box
sx={{
@@ -81,9 +81,13 @@ const PartnerCard: React.FC<PartnerCardProps> = ({ partner, onClick }) => {
>
{!!companyShortDescription && (
<Typography
variant="subtitle2"
variant="caption"
sx={{
color: theme => theme.palette.card.text,
overflow: 'hidden',
display: '-webkit-box',
WebkitBoxOrient: 'vertical',
WebkitLineClamp: 3,
}}
>
{companyShortDescription}
4 changes: 2 additions & 2 deletions src/components/Partners/PartnerFlag.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { Box, Typography } from '@mui/material'
import React from 'react'
import { CircleFlag } from 'react-circle-flags'
import { CountryFlagAttributesType } from '../../@types/partners'

@@ -13,7 +13,7 @@ const PartnerFlag: React.FC<PartnerFlagProps> = ({
return (
<Box sx={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<CircleFlag countryCode={countryIdentifier.toLowerCase()} height="20" />
<Typography variant="body1">{countryName}</Typography>
<Typography variant="caption">{countryName}</Typography>
</Box>
)
}
7 changes: 3 additions & 4 deletions src/components/Partners/SearchInput.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Box, InputAdornment, OutlinedInput } from '@mui/material'
import React, { useCallback } from 'react'
import SearchIcon from '@mui/icons-material/Search'
import { Box, InputAdornment, OutlinedInput } from '@mui/material'
import { debounce } from 'lodash'
import React, { useCallback } from 'react'

const SearchInput = ({ searchByName }) => {
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -25,13 +25,12 @@ const SearchInput = ({ searchByName }) => {
p: '8px 16px',
border: theme => `solid 2px ${theme.palette.card.border}`,
borderRadius: '12px',
fontSize: '15px',
fontSize: '14px',
lineHeight: '24px',
fontWeight: 500,
'.MuiOutlinedInput-notchedOutline': {
border: 'none',
},
// backgroundColor: '#475569',
}}
startAdornment={
<InputAdornment position="start">
2 changes: 2 additions & 0 deletions src/theme/overrides/Select.ts
Original file line number Diff line number Diff line change
@@ -24,6 +24,8 @@ export default function Select(theme: Theme) {
styleOverrides: {
list: {
maxWidth: 'none !important',
width: '100% !important',
paddingRight: '0 !important',
},
},
},
8 changes: 4 additions & 4 deletions src/theme/typography.ts
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ const typography = {
lineHeight: '52px',
letterSpacing: '-1.1%',
fontWeight: '700',
...responsiveFontSizes({ sm: 26, md: 30, lg: 32 }),
...responsiveFontSizes({ sm: 26, md: 30, lg: 40 }),
fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
fontFeatureSettings: '"ss01" on',
},
@@ -67,7 +67,7 @@ const typography = {
lineHeight: '42px',
letterSpacing: '-1.1%',
fontWeight: '700',
...responsiveFontSizes({ sm: 20, md: 24, lg: 24 }),
...responsiveFontSizes({ sm: 20, md: 24, lg: 32 }),
fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
fontFeatureSettings: '"ss01" on',
},
@@ -78,7 +78,7 @@ const typography = {
lineHeight: '36px',
letterSpacing: '-1.1%',
fontWeight: '700',
...responsiveFontSizes({ sm: 19, md: 20, lg: 20 }),
...responsiveFontSizes({ sm: 19, md: 20, lg: 24 }),
fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
fontFeatureSettings: '"ss01" on',
},
@@ -89,7 +89,7 @@ const typography = {
lineHeight: '26px',
letterSpacing: '-1.1%',
fontWeight: '700',
...responsiveFontSizes({ sm: 18, md: 18, lg: 18 }),
...responsiveFontSizes({ sm: 18, md: 18, lg: 20 }),
fontVariantNumeric: 'lining-nums tabular-nums slashed-zero',
fontFeatureSettings: '"ss01" on',
},
14 changes: 8 additions & 6 deletions src/views/partners/Partner.tsx
Original file line number Diff line number Diff line change
@@ -66,8 +66,10 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
flexWrap: 'wrap',
}}
>
<Typography variant="h1">{companyName}</Typography>
{!!isConsortiumMember && (
<Typography variant="h3">{companyName}</Typography>
{/* the badge validator will be added when the api support getting p-chain
address */}
{/* {!!isConsortiumMember && (
<Box
sx={{
background: theme => theme.palette.background.gradient,
@@ -81,18 +83,18 @@ const Partner: React.FC<PartnerProps> = ({ partner, setPartner }) => {
>
<Typography sx={{ color: 'common.white' }}>Validator</Typography>
</Box>
)}
)} */}
</Box>
<Typography variant="body1">{companyShortDescription}</Typography>
<Typography variant="caption">{companyShortDescription}</Typography>
<Box>
<PartnerBusinessFields
business_fields={business_fields}
isPartnerView={true}
/>
</Box>
<Box sx={{ paddingBottom: '1.5rem' }}>
<Typography variant="h3">Description</Typography>
<Typography variant="body1">{companyLongDescription}</Typography>
<Typography variant="subtitle1">Description</Typography>
<Typography variant="body2">{companyLongDescription}</Typography>
</Box>
</Box>
<Box
2 changes: 1 addition & 1 deletion src/views/partners/index.tsx
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ const Partners = () => {
) : (
<>
<PartnersFilter state={state} dispatchPartnersActions={dispatchPartnersActions} />
<Typography variant="h4">{partners.meta.pagination.total} Partners</Typography>
<Typography variant="h5">{partners.meta.pagination.total} Partners</Typography>
<PartnersListWrraper isLoading={isLoading} isFetching={isFetching}>
<ListPartners partners={partners} setPartner={setPartner} />
</PartnersListWrraper>

0 comments on commit 4d6ad68

Please sign in to comment.