Add card for organisation (#16)

* WIP: add ui card for organisation * fix UI list org page * feat add verified icon * fix text field border * wrap component into link
rarimo · Jan 11, 2024 · b2cb9e2 · b2cb9e2
1 parent 8973b57
commit b2cb9e2
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 7 deletions.
diff --git a/src/common/PageListFilters.tsx b/src/common/PageListFilters.tsx
@@ -30,9 +30,12 @@ export default function PageListFilters({ tabs, onSearchInput, actionBar, ...res
               <UiIcon componentName='search' />
             </InputAdornment>
           ),
+          // TODO: change color
+          sx: { borderRadius: 25, borderColor: theme => theme.palette.grey[300] },
         }}
         placeholder={t('page-list-filters.search-input-placeholder')}
         onChange={e => handleSearchInput(e.target.value)}
+        size={'small'}
       />
 
       <Stack flex={1}>{actionBar}</Stack>

diff --git a/src/enums/icons.ts b/src/enums/icons.ts
@@ -7,6 +7,7 @@ import { default as ErrorOutlineIcon } from '@mui/icons-material/ErrorOutline'
 import { default as InfoIcon } from '@mui/icons-material/Info'
 import { default as KeyboardArrowDownOutlinedIcon } from '@mui/icons-material/KeyboardArrowDownOutlined'
 import { default as Search } from '@mui/icons-material/Search'
+import { default as Verified } from '@mui/icons-material/Verified'
 import { default as WarningAmberIcon } from '@mui/icons-material/WarningAmber'
 import { default as Work } from '@mui/icons-material/Work'
 
@@ -28,4 +29,5 @@ export const ICON_COMPONENTS = {
   search: Search,
   add: Add,
   addPhotoAlternativeOutlined: AddPhotoAlternateOutlined,
+  verified: Verified,
 }
diff --git a/src/layouts/MainLayout.tsx b/src/layouts/MainLayout.tsx
@@ -8,7 +8,9 @@ const MainLayout = () => {
     <Stack direction='row' px={4} py={5} spacing={4} height='calc(100 * var(--vh, 1vh))'>
       <AppNavbar />
       <Stack
+        overflow='hidden auto'
         width='100%'
+        height='100%'
         borderRadius={4}
         px={8}
         py={6}

diff --git a/src/pages/Orgs/pages/OrgsList/components/List.tsx b/src/pages/Orgs/pages/OrgsList/components/List.tsx
@@ -1,9 +1,11 @@
-import { Stack, StackProps } from '@mui/material'
+import { Grid, Stack, StackProps } from '@mui/material'
 import { useCallback } from 'react'
 
 import { loadOrgs, Organization, type OrgsRequestFiltersMap } from '@/api'
 import { useLoading } from '@/hooks'
 
+import ListCard from './ListCard'
+
 interface Props extends StackProps {
   filter: OrgsRequestFiltersMap
 }
@@ -32,7 +34,13 @@ export default function List({ filter, ...rest }: Props) {
       ) : isEmpty ? (
         <></>
       ) : (
-        orgList.map(org => <div key={org.id}>{org.domain}</div>)
+        <Grid container spacing={6}>
+          {orgList.map(org => (
+            <Grid key={org.id} item xs={4}>
+              <ListCard org={org} />
+            </Grid>
+          ))}
+        </Grid>
       )}
     </Stack>
   )

diff --git a/src/pages/Orgs/pages/OrgsList/components/ListCard.tsx b/src/pages/Orgs/pages/OrgsList/components/ListCard.tsx
@@ -0,0 +1,68 @@
+import { Avatar, Card, CardProps, Grid, Stack, Typography, useTheme } from '@mui/material'
+import { generatePath, NavLink } from 'react-router-dom'
+
+import { Organization, OrgsStatuses } from '@/api'
+import { RoutePaths } from '@/enums'
+import { UiIcon } from '@/ui'
+
+interface Props extends CardProps {
+  org: Organization
+}
+
+export default function ListCard({ org, ...rest }: Props) {
+  const { palette } = useTheme()
+
+  return (
+    <NavLink to={generatePath(RoutePaths.OrgsId, { id: org.id })}>
+      <Card
+        {...rest}
+        // TODO: change color
+        sx={{ py: 5, px: 6, borderRadius: 3, borderColor: palette.grey[300], ...rest.sx }}
+        variant='outlined'
+      >
+        <Avatar src={org.metadata.logoUrl} sx={{ width: 64, height: 64 }} />
+        <Stack direction={'row'} alignItems={'center'} mt={5}>
+          <Typography color={palette.text.primary} variant={'h6'} fontWeight={500}>
+            {org.metadata.name}
+          </Typography>
+          {org.status.value === OrgsStatuses.Verified && (
+            <UiIcon
+              componentName={'verified'}
+              sx={{ ml: 1, color: palette.success.light }}
+              size={4}
+            />
+          )}
+        </Stack>
+        <Typography color={palette.text.secondary} variant={'body2'} my={3}>
+          {org.metadata.description}
+        </Typography>
+
+        <Grid
+          container
+          mt={5}
+          pt={5}
+          borderTop={1}
+          // TODO: change color
+          borderColor={palette.grey[300]}
+        >
+          <Grid item xs={7}>
+            <Typography variant={'body3'} as={'p'} color={palette.text.secondary}>
+              {'Associated people'}
+            </Typography>
+            <Typography mt={2} color={palette.text.primary} variant={'overline'}>
+              {org.members_count}
+            </Typography>
+          </Grid>
+          <Grid item xs={5}>
+            <Typography variant={'body3'} as={'p'} color={palette.text.secondary}>
+              {'Credentials'}
+            </Typography>
+            <Typography mt={2} color={palette.text.primary} variant={'overline'}>
+              {org.issued_claims_count}
+            </Typography>
+          </Grid>
+        </Grid>
+      </Card>
+    </NavLink>
+  )
+}
diff --git a/src/pages/Orgs/pages/OrgsList/components/index.ts b/src/pages/Orgs/pages/OrgsList/components/index.ts
@@ -1 +1,2 @@
 export { default as List } from './List'
+export { default as ListCard } from './ListCard'
diff --git a/src/pages/Orgs/pages/OrgsList/index.tsx b/src/pages/Orgs/pages/OrgsList/index.tsx
@@ -17,7 +17,7 @@ export default function OrgsList() {
 
   const [filter, setFilter] = useState<OrgsRequestFiltersMap>({})
 
-  const routes = useNestedRoutes(RoutePaths.Orgs, [
+  const routes = useNestedRoutes(RoutePaths.OrgsList, [
     {
       index: true,
       element: <Navigate replace to={RoutePaths.OrgsListAll} />,

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -30,6 +30,7 @@ $txt-font-size-subtitle1: to-rem(24);
 $txt-font-size-subtitle2: to-rem(20);
 $txt-font-size-body1: to-rem(20);
 $txt-font-size-body2: to-rem(16);
+$txt-font-size-body3: to-rem(10);
 $txt-font-size-button: to-rem(16);
 $txt-font-size-caption: to-rem(14);
 $txt-font-size-overline: to-rem(14);
@@ -44,6 +45,7 @@ $txt-font-line-height-subtitle1: 1.25;
 $txt-font-line-height-subtitle2: 1.2;
 $txt-font-line-height-body1: 1.3;
 $txt-font-line-height-body2: 1.25;
+$txt-font-line-height-body3: 1.2;
 $txt-font-line-height-button: 1.25;
 $txt-font-line-height-caption: 1.28;
 $txt-font-line-height-overline: 1.16;
@@ -58,6 +60,7 @@ $txt-font-letter-spacing-subtitle1: to-rem(0.1);
 $txt-font-letter-spacing-subtitle2: to-rem(0.1);
 $txt-font-letter-spacing-body1: to-rem(0.15);
 $txt-font-letter-spacing-body2: to-rem(0.15);
+$txt-font-letter-spacing-body3: to-rem(0.4);
 $txt-font-letter-spacing-button: 0;
 $txt-font-letter-spacing-caption: to-rem(0.1);
 $txt-font-letter-spacing-overline: to-rem(1);
@@ -72,6 +75,7 @@ $txt-font-weight-subtitle1: $txt-font-weight-medium;
 $txt-font-weight-subtitle2: $txt-font-weight-medium;
 $txt-font-weight-body1: $txt-font-weight-regular;
 $txt-font-weight-body2: $txt-font-weight-regular;
+$txt-font-weight-body3: $txt-font-weight-bold;
 $txt-font-weight-button: $txt-font-weight-medium;
 $txt-font-weight-caption: $txt-font-weight-medium;
 $txt-font-weight-overline: $txt-font-weight-semi-bold;

diff --git a/src/theme/theme.module.scss b/src/theme/theme.module.scss
@@ -26,6 +26,7 @@
   txtFontSizeSubtitle2: $txt-font-size-subtitle2;
   txtFontSizeBody1: $txt-font-size-body1;
   txtFontSizeBody2: $txt-font-size-body2;
+  txtFontSizeBody3: $txt-font-size-body3;
   txtFontSizeButton: $txt-font-size-button;
   txtFontSizeCaption: $txt-font-size-caption;
   txtFontSizeOverline: $txt-font-size-overline;
@@ -40,6 +41,7 @@
   txtFontLineHeightSubtitle2: $txt-font-line-height-subtitle2;
   txtFontLineHeightBody1: $txt-font-line-height-body1;
   txtFontLineHeightBody2: $txt-font-line-height-body2;
+  txtFontLineHeightBody3: $txt-font-line-height-body3;
   txtFontLineHeightButton: $txt-font-line-height-button;
   txtFontLineHeightCaption: $txt-font-line-height-caption;
   txtFontLineHeightOverline: $txt-font-line-height-overline;
@@ -54,6 +56,7 @@
   txtFontLetterSpacingSubtitle2: $txt-font-letter-spacing-subtitle2;
   txtFontLetterSpacingBody1: $txt-font-letter-spacing-body1;
   txtFontLetterSpacingBody2: $txt-font-letter-spacing-body2;
+  txtFontLetterSpacingBody3: $txt-font-letter-spacing-body3;
   txtFontLetterSpacingButton: $txt-font-letter-spacing-button;
   txtFontLetterSpacingCaption: $txt-font-letter-spacing-caption;
   txtFontLetterSpacingOverline: $txt-font-letter-spacing-overline;
@@ -68,6 +71,7 @@
   txtFontWeightSubtitle2: $txt-font-weight-subtitle2;
   txtFontWeightBody1: $txt-font-weight-body1;
   txtFontWeightBody2: $txt-font-weight-body2;
+  txtFontWeightBody3: $txt-font-weight-body3;
   txtFontWeightButton: $txt-font-weight-button;
   txtFontWeightCaption: $txt-font-weight-caption;
   txtFontWeightOverline: $txt-font-weight-overline;

diff --git a/src/theme/typography.ts b/src/theme/typography.ts
@@ -1,9 +1,9 @@
 // eslint-disable-next-line no-restricted-imports
-import { TypographyOptions } from '@mui/material/styles/createTypography'
 
 import { TYPOGRAPHY } from '@/theme/variables'
+import { ExtendedTypographyOptions } from '@/types'
 
-export const typographyTheme: TypographyOptions = {
+export const typographyTheme: ExtendedTypographyOptions = {
   htmlFontSize: 16,
 
   fontFamily: TYPOGRAPHY.txtFontFamily,
@@ -84,6 +84,14 @@ export const typographyTheme: TypographyOptions = {
     lineHeight: TYPOGRAPHY.txtFontLineHeightBody2,
     letterSpacing: TYPOGRAPHY.txtFontLetterSpacingBody2,
   },
+  body3: {
+    fontFamily: TYPOGRAPHY.txtFontFamily,
+    fontWeight: TYPOGRAPHY.txtFontWeightBody3,
+    fontSize: TYPOGRAPHY.txtFontSizeBody3,
+    lineHeight: TYPOGRAPHY.txtFontLineHeightBody3,
+    letterSpacing: TYPOGRAPHY.txtFontLetterSpacingBody3,
+    textTransform: 'uppercase',
+  },
   button: {
     fontFamily: TYPOGRAPHY.txtFontFamily,
     fontWeight: TYPOGRAPHY.txtFontWeightButton,

diff --git a/src/types/theme.ts b/src/types/theme.ts
@@ -1,11 +1,23 @@
 import { Theme } from '@mui/material/styles'
+import { TypographyOptions } from '@mui/material/styles/createTypography'
+import React from 'react'
 
 import { FontWeight } from '@/enums'
 
 import { ColorString } from './base'
 
 export type BaseTheme = Omit<Theme, 'components'>
 
+export interface ExtendedTypographyOptions extends TypographyOptions {
+  body3: React.CSSProperties
+}
+
+declare module '@mui/material/Typography/Typography' {
+  interface TypographyPropsVariantOverrides {
+    body3: true
+  }
+}
+
 export type Typography = {
   txtFontFamily: string
 
@@ -26,6 +38,7 @@ export type Typography = {
   txtFontSizeSubtitle2: string
   txtFontSizeBody1: string
   txtFontSizeBody2: string
+  txtFontSizeBody3: string
   txtFontSizeButton: string
   txtFontSizeCaption: string
   txtFontSizeOverline: string
@@ -40,6 +53,7 @@ export type Typography = {
   txtFontLineHeightSubtitle2: number
   txtFontLineHeightBody1: number
   txtFontLineHeightBody2: number
+  txtFontLineHeightBody3: number
   txtFontLineHeightButton: number
   txtFontLineHeightCaption: number
   txtFontLineHeightOverline: number
@@ -54,6 +68,7 @@ export type Typography = {
   txtFontLetterSpacingSubtitle2: string | number
   txtFontLetterSpacingBody1: string | number
   txtFontLetterSpacingBody2: string | number
+  txtFontLetterSpacingBody3: string | number
   txtFontLetterSpacingButton: string | number
   txtFontLetterSpacingCaption: string | number
   txtFontLetterSpacingOverline: string | number
@@ -68,6 +83,7 @@ export type Typography = {
   txtFontWeightSubtitle2: number
   txtFontWeightBody1: number
   txtFontWeightBody2: number
+  txtFontWeightBody3: number
   txtFontWeightButton: number
   txtFontWeightCaption: number
   txtFontWeightOverline: number

diff --git a/src/ui/UiNavTabs.tsx b/src/ui/UiNavTabs.tsx
@@ -55,7 +55,8 @@ export default function UiNavTabs({ tabs, ...rest }: Props) {
       justifyContent='center'
       alignItems='center'
       sx={theme => ({
-        background: theme.palette.text.secondary,
+        // TODO: change color
+        background: theme.palette.grey.A200,
         borderRadius: 25,
         overflow: 'hidden',
       })}

diff --git a/src/ui/UiSwitch.tsx b/src/ui/UiSwitch.tsx
@@ -7,7 +7,18 @@ interface Props extends SwitchProps {
 
 const UiSwitch = forwardRef(({ label, ...rest }: Props, ref) => {
   return label ? (
-    <FormControlLabel inputRef={ref} control={<Switch {...rest} />} label={label} />
+    <FormControlLabel
+      inputRef={ref}
+      control={<Switch {...rest} />}
+      label={label}
+      sx={{
+        border: '1px solid',
+        // TODO: change color
+        borderColor: theme => theme.palette.grey.A200,
+        borderRadius: '100px',
+        pr: 4,
+      }}
+    />
   ) : (
     <Switch {...rest} inputRef={ref} />
   )
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { default as List } from './List'
		export { default as ListCard } from './ListCard'