diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index d1b1a1aabaea3655b38a99aa4b5ecb75581d81eb..8e5d56296e6a40c29a1d195af377b652408b05e2 100644 --- a/src/components/alerts/alert.css +++ b/src/components/alerts/alert.css @@ -72,6 +72,7 @@ .alert-connection-button { min-height: 2rem; + width: 6.5rem; padding: 0.55rem 0.9rem; border-radius: 0.35rem; background: #FF8C1A; @@ -81,8 +82,9 @@ border: none; cursor: pointer; display: flex; + justify-content: center; align-items: center; - align-self: center; + align-self: stretch; outline-style:none; } @@ -93,3 +95,9 @@ [dir="rtl"] .alert-connection-button { margin-left: 13px; } + +/* prevent last button in list from too much margin to edge of alert */ +.alert-buttons > :last-child { + margin-left: 0; + margin-right: 0; +} diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index 6a4a3f67b71ed60b09540a5bd5fcc44738f2ec70..db86bd4b8d6dd263ffe3a3b26f27bda62714200e 100644 --- a/src/components/alerts/alert.jsx +++ b/src/components/alerts/alert.jsx @@ -9,7 +9,6 @@ import Spinner from '../spinner/spinner.jsx'; import {AlertLevels} from '../../lib/alerts/index.jsx'; import styles from './alert.css'; -import spinnerStyles from '../spinner/spinner.css'; const closeButtonColors = { [AlertLevels.SUCCESS]: CloseButton.COLOR_GREEN, @@ -35,20 +34,22 @@ const AlertComponent = ({ className={classNames(styles.alert, styles[level])} > {/* TODO: implement Rtl handling */} - <div className={styles.iconSection}> - {iconSpinner && ( - <Spinner - className={styles.alertSpinner} - level={level} - /> - )} - {iconURL && ( - <img - className={styles.alertIcon} - src={iconURL} - /> - )} - </div> + {(iconSpinner || iconURL) && ( + <div className={styles.iconSection}> + {iconSpinner && ( + <Spinner + className={styles.alertSpinner} + level={level} + /> + )} + {iconURL && ( + <img + className={styles.alertIcon} + src={iconURL} + /> + )} + </div> + )} <div className={styles.alertMessage}> {extensionName ? ( <FormattedMessage diff --git a/src/components/alerts/alerts.css b/src/components/alerts/alerts.css index bc95736be4befc67f061cac0e630e952fc5dff42..3b7cf5221a813058e20205224da0f23fec8d40b6 100644 --- a/src/components/alerts/alerts.css +++ b/src/components/alerts/alerts.css @@ -1,4 +1,4 @@ .alerts-inner-container { min-width: 200px; - max-width: 448px; + max-width: 548px; } diff --git a/src/components/spinner/spinner.css b/src/components/spinner/spinner.css index effa1ef8b593732f274e09026de311f4d5229c31..3abc8ffbbea117d723b8abe36a98ac5cdb36aa9b 100644 --- a/src/components/spinner/spinner.css +++ b/src/components/spinner/spinner.css @@ -9,6 +9,7 @@ border-width: .1875rem; border-style: solid; border-color: $ui-white-transparent; + box-sizing: content-box; } .spinner::before, .spinner::after {