From e795c29b3f9684ab07db14f2f2221b6c15efb699 Mon Sep 17 00:00:00 2001
From: Hassan Malik <41640681+hmalik88@users.noreply.github.com>
Date: Mon, 7 Mar 2022 10:32:09 -0500
Subject: [PATCH] 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
---
.../app/flask/snap-install-warning/index.scss | 4 --
.../snap-install-warning.js | 29 ++++++-------
ui/components/ui/popover/index.scss | 14 -------
ui/components/ui/popover/popover.component.js | 42 ++++++++++++++++---
4 files changed, 51 insertions(+), 38 deletions(-)
diff --git a/ui/components/app/flask/snap-install-warning/index.scss b/ui/components/app/flask/snap-install-warning/index.scss
index 2f9830668..53f5ed74b 100644
--- a/ui/components/app/flask/snap-install-warning/index.scss
+++ b/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;
diff --git a/ui/components/app/flask/snap-install-warning/snap-install-warning.js b/ui/components/app/flask/snap-install-warning/snap-install-warning.js
index 1b90ec38d..942ee2c25 100644
--- a/ui/components/app/flask/snap-install-warning/snap-install-warning.js
+++ b/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={}
+ headerProps={{ padding: [6, 6, 0] }}
+ contentProps={{ padding: [0, 6, 4] }}
+ footerProps={{ padding: [4, 6] }}
>
-
-
- {t('snapInstallWarningCheck')}
-
-
-
-
-
+
+ {t('snapInstallWarningCheck')}
+
+
+
+
);
diff --git a/ui/components/ui/popover/index.scss b/ui/components/ui/popover/index.scss
index f048a171c..9e0142075 100644
--- a/ui/components/ui/popover/index.scss
+++ b/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;
diff --git a/ui/components/ui/popover/popover.component.js b/ui/components/ui/popover/popover.component.js
index 09424163e..2cdaee0d5 100644
--- a/ui/components/ui/popover/popover.component.js
+++ b/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 (
-
+
{children}
@@ -84,7 +114,7 @@ const Popover = ({
{footer ? (
{footer}