diff --git a/src/common/StreamingServerWarning/StreamingServerWarning.js b/src/common/StreamingServerWarning/StreamingServerWarning.js index f095ce1d1..f95b65978 100644 --- a/src/common/StreamingServerWarning/StreamingServerWarning.js +++ b/src/common/StreamingServerWarning/StreamingServerWarning.js @@ -51,11 +51,16 @@ const StreamingServerWarning = ({ className }) => { return (
{ t('SETTINGS_SERVER_UNAVAILABLE') }
+ + + -
); diff --git a/src/common/StreamingServerWarning/styles.less b/src/common/StreamingServerWarning/styles.less index cabb73bdf..85f86dc9b 100644 --- a/src/common/StreamingServerWarning/styles.less +++ b/src/common/StreamingServerWarning/styles.less @@ -6,7 +6,7 @@ display: flex; flex-direction: row; align-items: center; - padding: 0.5rem 1rem; + padding: 1rem; background-color: @color-accent5-dark3; .warning-statement { @@ -19,10 +19,11 @@ .warning-button { flex: none; - max-width: 8rem; + margin-left: 1rem; + color: @color-surface-light5-90; - &:not(:last-child) { - margin-right: 1rem; + &:first-child { + margin-left: 0; } &:hover { @@ -37,4 +38,23 @@ color: @color-surface-light5-90; } } -} \ No newline at end of file + + .warning-button:hover { + text-decoration: underline; + } +} + +@media only screen and (max-width: 500px) { + .warning-container { + display: block; + height: auto !important; + text-align: center; + .warning-statement { + margin-bottom: 0.5rem; + margin-right: 0; + } + .warning-button { + display: inline-block; + } + } +}