Add Install Link to Server Warning

This needs translations updated from: https://github.com/Stremio/stremio-web/pull/375
This commit is contained in:
Alexandru Branza 2023-05-31 11:35:43 +03:00
parent 5af601c0f9
commit 81d4339f2d
2 changed files with 32 additions and 7 deletions

View file

@ -51,11 +51,16 @@ const StreamingServerWarning = ({ className }) => {
return (
<div className={classnames(className, styles['warning-container'])}>
<div className={styles['warning-statement']}>{ t('SETTINGS_SERVER_UNAVAILABLE') }</div>
<a href="https://www.stremio.com/download-service" target="_blank">
<Button className={styles['warning-button']} title={t('SERVICE_INSTALL')} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('SERVICE_INSTALL') }</div>
</Button>
</a>
<Button className={styles['warning-button']} title={t('WARNING_STREAMING_SERVER_LATER')} onClick={onLaterClick} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('WARNING_STREAMING_SERVER_LATER') }</div>
</Button>
<Button className={styles['warning-button']} title={t('WARNING_STREAMING_SERVER_DISMISS')} onClick={onDismissClick} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('WARNING_STREAMING_SERVER_DISMISS') }</div>
<Button className={styles['warning-button']} title={t('DONT_SHOW_AGAIN')} onClick={onDismissClick} tabIndex={-1}>
<div className={styles['warning-label']}>{ t('DONT_SHOW_AGAIN') }</div>
</Button>
</div>
);

View file

@ -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;
}
}
}
.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;
}
}
}