Update snap install warning per designs and fix for popover component (#13844)

* updated snap install warning per designs, hotfix for popover component to remove box styles from it's scss file and introduce them as default props

* small fix

ui/components/app/flask/snap-install-warning/index.scss

@@ -7,10 +7,6 @@
     gap: 0 16px;
   }
 
-  &__content {
-    padding: 0 16px 24px;
-  }
-
   &__footer {
     display: flex;
     flex-flow: row;

ui/components/app/flask/snap-install-warning/snap-install-warning.js

@@ -43,21 +43,22 @@ export default function SnapInstallWarning({ onCancel, onSubmit, snapName }) {
       className="snap-install-warning"
       title={t('areYouSure')}
       footer={<SnapInstallWarningFooter />}
+      headerProps={{ padding: [6, 6, 0] }}
+      contentProps={{ padding: [0, 6, 4] }}
+      footerProps={{ padding: [4, 6] }}
     >
-      <div className="snap-install-warning__content">
-        <Typography variant={TYPOGRAPHY.H6} boxProps={{ paddingBottom: 4 }}>
-          {t('snapInstallWarningCheck')}
-        </Typography>
-        <div className="checkbox-label">
-          <CheckBox
-            checked={isConfirmed}
-            id="warning-accept"
-            onClick={onCheckboxClicked}
-          />
-          <label htmlFor="warning-accept">
-            {t('snapInstallWarningKeyAccess', [snapName])}
-          </label>
-        </div>
+      <Typography variant={TYPOGRAPHY.H6} boxProps={{ paddingBottom: 4 }}>
+        {t('snapInstallWarningCheck')}
+      </Typography>
+      <div className="checkbox-label">
+        <CheckBox
+          checked={isConfirmed}
+          id="warning-accept"
+          onClick={onCheckboxClicked}
+        />
+        <label htmlFor="warning-accept">
+          {t('snapInstallWarningKeyAccess', [snapName])}
+        </label>
       </div>
     </Popover>
   );

ui/components/ui/popover/index.scss

@@ -21,12 +21,7 @@
   }
 
   &-header {
-    display: flex;
-    padding: 24px 16px 16px;
-    flex-direction: column;
-    background: white;
     position: relative;
-    border-radius: 10px;
 
     &__title {
       display: flex;
@@ -78,13 +73,8 @@
   &-content {
     overflow-y: auto;
     position: relative;
-    display: flex;
     flex: 1;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
     align-content: stretch;
-    border-radius: 10px;
   }
 
   &-container {
@@ -100,11 +90,7 @@
   }
 
   &-footer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
     border-top: 1px solid #d2d8dd;
-    padding: 16px 24px 24px;
 
     > :only-child {
       margin: 0 auto;

ui/components/ui/popover/popover.component.js

@@ -4,6 +4,33 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Box from '../box';
+import {
+  ALIGN_ITEMS,
+  FLEX_DIRECTION,
+  JUSTIFY_CONTENT,
+} from '../../../helpers/constants/design-system';
+
+const defaultHeaderProps = {
+  padding: [6, 4, 4],
+  display: 'flex',
+  flexDirection: FLEX_DIRECTION.COLUMN,
+  backgroundColor: 'white',
+  borderRadius: 'xl',
+};
+
+const defaultContentProps = {
+  display: 'flex',
+  flexDirection: FLEX_DIRECTION.COLUMN,
+  justifyContent: JUSTIFY_CONTENT.FLEX_START,
+  alignItems: ALIGN_ITEMS.STRETCH,
+  borderRadius: 'xl',
+};
+
+const defaultFooterProps = {
+  display: 'flex',
+  justifyContent: JUSTIFY_CONTENT.SPACE_BETWEEN,
+  padding: [4, 6, 6],
+};
 
 const Popover = ({
   title,
@@ -19,15 +46,18 @@ const Popover = ({
   CustomBackground,
   popoverRef,
   centerTitle,
-  headerProps = {},
-  contentProps = {},
-  footerProps = {},
+  headerProps = defaultHeaderProps,
+  contentProps = defaultContentProps,
+  footerProps = defaultFooterProps,
 }) => {
   const t = useI18nContext();
   const showHeader = title || onBack || subtitle || onClose;
   const Header = () => {
     return (
-      <Box {...headerProps} className="popover-header">
+      <Box
+        {...{ ...defaultHeaderProps, ...headerProps }}
+        className="popover-header"
+      >
         <div
           className={classnames(
             'popover-header__title',
@@ -76,7 +106,7 @@ const Popover = ({
         {children ? (
           <Box
             className={classnames('popover-content', contentClassName)}
-            {...contentProps}
+            {...{ ...defaultContentProps, ...contentProps }}
           >
             {children}
           </Box>
@@ -84,7 +114,7 @@ const Popover = ({
         {footer ? (
           <Box
             className={classnames('popover-footer', footerClassName)}
-            {...footerProps}
+            {...{ ...defaultFooterProps, ...footerProps }}
           >
             {footer}
           </Box>