updated to newer Checkbox (#20242)

* updated to newer Checkbox

* removed commented code

* Adjusting styles removing deprecated code

* alignment update

---------

Co-authored-by: georgewrmarshall <george.marshall@consensys.net>
Co-authored-by: Garrett Bear <gwhisten@gmail.com>

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.js

@@ -3,20 +3,17 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import { useTransactionEventFragment } from '../../../../hooks/useTransactionEventFragment';
 import { EditGasModes } from '../../../../../shared/constants/gas';
-import Box from '../../../ui/box';
-import CheckBox from '../../../ui/check-box';
+
 import {
   Display,
   FlexDirection,
-  TextColor,
-  TextVariant,
 } from '../../../../helpers/constants/design-system';
 import { getAdvancedGasFeeValues } from '../../../../selectors';
 import { setAdvancedGasFee } from '../../../../store/actions';
 import { useGasFeeContext } from '../../../../contexts/gasFee';
 import { useAdvancedGasFeePopoverContext } from '../context';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { Text } from '../../../component-library';
+import { Checkbox, Box } from '../../../component-library';
 
 const AdvancedGasFeeDefaults = () => {
   const t = useI18nContext();
@@ -77,27 +74,22 @@ const AdvancedGasFeeDefaults = () => {
       marginTop={4}
       marginLeft={2}
       marginRight={2}
+      paddingTop={4}
+      paddingBottom={4}
       className="advanced-gas-fee-defaults"
     >
-      <label className="advanced-gas-fee-defaults__label">
-        <CheckBox
-          checked={isDefaultSettingsSelected}
-          className="advanced-gas-fee-defaults__checkbox"
-          onClick={handleUpdateDefaultSettings}
-          disabled={gasErrors.maxFeePerGas || gasErrors.maxPriorityFeePerGas}
-        />
-        <Text
-          variant={TextVariant.bodySm}
-          as="h6"
-          color={TextColor.textAlternative}
-        >
-          {isDefaultSettingsSelected
+      <Checkbox
+        isChecked={isDefaultSettingsSelected}
+        onChange={handleUpdateDefaultSettings}
+        isDisabled={gasErrors.maxFeePerGas || gasErrors.maxPriorityFeePerGas}
+        label={
+          isDefaultSettingsSelected
             ? t('advancedGasFeeDefaultOptOut')
             : t('advancedGasFeeDefaultOptIn', [
                 <strong key="default-value-change">{t('newValues')}</strong>,
-              ])}
-        </Text>
-      </label>
+              ])
+        }
+      />
     </Box>
   );
 };

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/advanced-gas-fee-defaults.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import mockEstimates from '../../../../../test/data/mock-estimates.json';
+import mockState from '../../../../../test/data/mock-state.json';
+import configureStore from '../../../../store/store';
+import { AdvancedGasFeePopoverContextProvider } from '../context';
+import { GasFeeContextProvider } from '../../../../contexts/gasFee';
+import { GasEstimateTypes } from '../../../../../shared/constants/gas';
+import AdvancedGasFeeDefaults from './advanced-gas-fee-defaults';
+
+const store = configureStore({
+  ...mockState,
+  metamask: {
+    ...mockState.metamask,
+    accounts: {
+      [mockState.metamask.selectedAddress]: {
+        address: mockState.metamask.selectedAddress,
+        balance: '0x1F4',
+      },
+    },
+    featureFlags: { advancedInlineGas: true },
+    gasFeeEstimates: mockEstimates[GasEstimateTypes.feeMarket].gasFeeEstimates,
+  },
+});
+
+export default {
+  title: 'Components/App/AdvancedGasFeePopover/AdvancedGasFeeDefaults',
+  decorators: [
+    (story) => (
+      <Provider store={store}>
+        <GasFeeContextProvider
+          transaction={{
+            userFeeLevel: 'medium',
+          }}
+        >
+          <AdvancedGasFeePopoverContextProvider>
+            {story()}
+          </AdvancedGasFeePopoverContextProvider>
+        </GasFeeContextProvider>
+      </Provider>
+    ),
+  ],
+};
+
+export const DefaultStory = () => <AdvancedGasFeeDefaults />;
+
+DefaultStory.storyName = 'Default';

ui/components/app/advanced-gas-fee-popover/advanced-gas-fee-defaults/index.scss

@@ -1,13 +1,3 @@
 .advanced-gas-fee-defaults {
   border-top: 1px solid var(--color-border-muted);
-  padding-top: 16px;
-
-  & &__checkbox {
-    font-size: $font-size-h4;
-    margin: 0 8px;
-  }
-
-  &__label {
-    display: flex;
-  }
 }