diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css index 87c0ca4c7022a2e0a5d43ca0afcc33b9a14b110c..2f5b8bd6c526d190b81248988df26e5241c2fa48 100644 --- a/src/components/alerts/alert.css +++ b/src/components/alerts/alert.css @@ -7,7 +7,7 @@ display: flex; flex-direction: row; overflow: hidden; - align-items: left; + justify-content: space-between; border-radius: $space; padding: $space; margin-bottom: 7px; @@ -37,13 +37,17 @@ font-weight: bold; font-size: .75rem; line-height: 14px; - width: 100%; display: flex; align-items: center; padding-left: .5rem; padding-right: .5rem; } +.alert-buttons { + display: flex; + flex-direction: row; +} + .alert-close-button { outline-style:none; } diff --git a/src/components/alerts/alert.jsx b/src/components/alerts/alert.jsx index 64b931171afe61ffaec61b410f3bdfcf917567ba..4b6bdf493e3a87be40f65f0476d8dfced4ce99bc 100644 --- a/src/components/alerts/alert.jsx +++ b/src/components/alerts/alert.jsx @@ -57,54 +57,56 @@ const AlertComponent = ({ /> ) : content} </div> - {showSaveNow && ( - <button - className={styles.alertConnectionButton} - onClick={onSaveNow} - > - <FormattedMessage - defaultMessage="Try Again" // TODO control wrapping in css - description="Button to try saving again" - id="gui.alerts.tryAgain" - /> - </button> - )} - {showDownload && ( - <button - className={styles.alertConnectionButton} - onClick={onDownload} - > - <FormattedMessage - defaultMessage="Download" - description="Button to download project locally" - id="gui.alerts.download" - /> - </button> - )} - {showReconnect && ( - <button - className={styles.alertConnectionButton} - onClick={onReconnect} - > - <FormattedMessage - defaultMessage="Reconnect" - description="Button to reconnect the device" - id="gui.connection.reconnect" - /> - </button> - )} - {closeButton && ( - <Box - className={styles.alertCloseButtonContainer} - > - <CloseButton - className={classNames(styles.alertCloseButton)} - color={closeButtonColors[level]} - size={CloseButton.SIZE_LARGE} - onClick={onCloseAlert} - /> - </Box> - )} + <div className={styles.alertButtons}> + {showSaveNow && ( + <button + className={styles.alertConnectionButton} + onClick={onSaveNow} + > + <FormattedMessage + defaultMessage="Try Again" + description="Button to try saving again" + id="gui.alerts.tryAgain" + /> + </button> + )} + {showDownload && ( + <button + className={styles.alertConnectionButton} + onClick={onDownload} + > + <FormattedMessage + defaultMessage="Download" + description="Button to download project locally" + id="gui.alerts.download" + /> + </button> + )} + {showReconnect && ( + <button + className={styles.alertConnectionButton} + onClick={onReconnect} + > + <FormattedMessage + defaultMessage="Reconnect" + description="Button to reconnect the device" + id="gui.connection.reconnect" + /> + </button> + )} + {closeButton && ( + <Box + className={styles.alertCloseButtonContainer} + > + <CloseButton + className={classNames(styles.alertCloseButton)} + color={closeButtonColors[level]} + size={CloseButton.SIZE_LARGE} + onClick={onCloseAlert} + /> + </Box> + )} + </div> </Box> );