use grommet size instead of px

openfun · Apr 5, 2022 · 79310f6 · 79310f6
1 parent 16240c1
commit 79310f6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/src/frontend/components/ViewersList/components/ViewersListHeader/index.tsx b/src/frontend/components/ViewersList/components/ViewersListHeader/index.tsx
@@ -24,12 +24,12 @@ export const ViewersListHeader = ({
           size: 'xsmall',
         }}
         pad={{
-          horizontal: '12px',
+          horizontal: 'small',
           vertical: '2px',
         }}
         round="14px"
       >
-        <StyledTextHeader color="blue-active" size="10px" weight="normal">
+        <StyledTextHeader color="blue-active" size="0.625rem" weight="normal">
           {text}
         </StyledTextHeader>
       </Box>

diff --git a/src/frontend/components/ViewersList/components/ViewersListItemContainer/index.tsx b/src/frontend/components/ViewersList/components/ViewersListItemContainer/index.tsx
@@ -18,8 +18,8 @@ export const ViewersListItemContainer = ({
     align="center"
     justify="between"
     direction="row"
-    gap="10px"
-    pad={{ horizontal: '20px', vertical: '4px' }}
+    gap="small"
+    pad={{ horizontal: 'medium', vertical: 'xsmall' }}
   >
     {children}
   </StyledItemContainer>

diff --git a/src/frontend/components/ViewersList/index.tsx b/src/frontend/components/ViewersList/index.tsx
@@ -87,12 +87,12 @@ export const ViewersList = ({ isInstructor, video }: ViewersListProps) => {
         horizontal: 'hidden',
         vertical: 'auto',
       }}
-      pad={{ bottom: '20px', top: '30px' }}
+      pad={{ bottom: 'medium', top: '30px' }}
     >
       {isInstructor && video.participants_asking_to_join.length !== 0 && (
         <React.Fragment>
           <ViewersListHeader
-            margin={{ left: '20px', bottom: '6px' }}
+            margin={{ left: 'medium', bottom: 'xsmall' }}
             text={intl.formatMessage(messages.demands)}
           />
           <List
@@ -109,7 +109,7 @@ export const ViewersList = ({ isInstructor, video }: ViewersListProps) => {
                   isInstructor={item.isInstructor}
                   name={item.name}
                 />
-                <Box direction="row" align="center" gap="10px">
+                <Box direction="row" align="center" gap="small">
                   <Button
                     icon={<AddCircle color="red-active" size="20px" />}
                     onClick={() => converse.rejectParticipantToJoin(item)}
@@ -132,7 +132,7 @@ export const ViewersList = ({ isInstructor, video }: ViewersListProps) => {
       {participantsOnStage.length !== 0 && (
         <React.Fragment>
           <ViewersListHeader
-            margin={{ left: '20px', bottom: '6px' }}
+            margin={{ left: 'medium', bottom: 'xsmall' }}
             text={intl.formatMessage(messages.onStage)}
           />
           <List border={false} data={participantsOnStage} pad="none">
@@ -156,7 +156,7 @@ export const ViewersList = ({ isInstructor, video }: ViewersListProps) => {
       {participantsNotOnStageAndNotAsking.length !== 0 && (
         <React.Fragment>
           <ViewersListHeader
-            margin={{ left: '20px', bottom: '6px' }}
+            margin={{ left: 'medium', bottom: 'xsmall' }}
             text={intl.formatMessage(messages.otherViewers)}
           />
           <List