From 184e426d27330213988237229ef40e385f652c21 Mon Sep 17 00:00:00 2001
From: Ben Waples <bwaples@specterops.io>
Date: Tue, 3 Sep 2024 10:26:14 -0700
Subject: [PATCH] BED-4746: button alignment on early access page (#825)

* fix: button alignment on early access page

* fix: button width, extra margin without icon
---
 .../EarlyAccessFeatures/EarlyAccessFeatures.tsx     | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx b/cmd/ui/src/views/EarlyAccessFeatures/EarlyAccessFeatures.tsx
index 054c4d51a3..e03367f42b 100644
--- 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>