BED-4746: button alignment on early access page (#825)

* fix: button alignment on early access page * fix: button width, extra margin without icon
SpecterOps · Sep 3, 2024 · 184e426 · 184e426
1 parent 0e8f825
commit 184e426
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx b/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx
@@ -48,16 +48,19 @@ export const EarlyAccessFeatureToggle: React.FC<{
 
     return (
         <Paper>
-            <Box p={2} display='flex' justifyContent='space-between' flexWrap='wrap' style={{ rowGap: '1rem' }}>
+            <Box sx={{ p: 2, display: 'flex', justifyContent: 'space-between', gap: '1rem' }}>
                 <Box overflow='hidden'>
                     <Typography variant='h6'>{flag.name}</Typography>
                     <Typography variant='body1'>{flag.description}</Typography>
                 </Box>
-                <Box>
-                    <Button disabled={disabled} onClick={handleOnClick}>
+                <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                    {/* TODO: replace style prop with TW classes once TW is added */}
+                    <Button disabled={disabled} onClick={handleOnClick} style={{ width: '132px' }}>
                         <Box display={'flex'} alignItems={'center'}>
-                            {flag.enabled ? <FontAwesomeIcon icon={faCheckCircle} fixedWidth /> : null}
-                            <Typography ml='8px'>{flag.enabled ? 'Enabled' : 'Disabled'}</Typography>
+                            {flag.enabled ? (
+                                <FontAwesomeIcon style={{ marginRight: '8px' }} icon={faCheckCircle} fixedWidth />
+                            ) : null}
+                            <Typography>{flag.enabled ? 'Enabled' : 'Disabled'}</Typography>
                         </Box>
                     </Button>
                 </Box>