From 811e2bd67b9852dd25637f763ae8e6876c89368d Mon Sep 17 00:00:00 2001
From: Ben Wheeler <wheeler.benjamin@gmail.com>
Date: Thu, 13 Dec 2018 12:14:05 -0500
Subject: [PATCH] fixed alert formatting when in gui standalone; made alert
button sizing more flexible and smart
---
src/components/alerts/alert.css | 10 +++++++++-
src/components/alerts/alert.jsx | 31 +++++++++++++++---------------
src/components/alerts/alerts.css | 2 +-
src/components/spinner/spinner.css | 1 +
4 files changed, 27 insertions(+), 17 deletions(-)
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index d1b1a1aab..8e5d56296 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 6a4a3f67b..db86bd4b8 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 bc95736be..3b7cf5221 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 effa1ef8b..3abc8ffbb 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 {
--
GitLab