diff --git a/app/javascript/flavours/glitch/features/home_timeline/components/critical_update_banner.tsx b/app/javascript/flavours/glitch/features/home_timeline/components/critical_update_banner.tsx new file mode 100644 index 0000000000..d0dd2b6acd --- /dev/null +++ b/app/javascript/flavours/glitch/features/home_timeline/components/critical_update_banner.tsx @@ -0,0 +1,26 @@ +import { FormattedMessage } from 'react-intl'; + +export const CriticalUpdateBanner = () => ( +
+
+

+ +

+

+ {' '} + + + +

+
+
+); diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.jsx b/app/javascript/flavours/glitch/features/home_timeline/index.jsx index e17680d8bb..80dae5e4d0 100644 --- a/app/javascript/flavours/glitch/features/home_timeline/index.jsx +++ b/app/javascript/flavours/glitch/features/home_timeline/index.jsx @@ -14,7 +14,7 @@ import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/act import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge'; import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator'; import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container'; -import { me } from 'flavours/glitch/initial_state'; +import { me, criticalUpdatesPending } from 'flavours/glitch/initial_state'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import { expandHomeTimeline } from '../../actions/timelines'; @@ -23,6 +23,7 @@ import ColumnHeader from '../../components/column_header'; import StatusListContainer from '../ui/containers/status_list_container'; import { ColumnSettings } from './components/column_settings'; +import { CriticalUpdateBanner } from './components/critical_update_banner'; import { ExplorePrompt } from './components/explore_prompt'; const messages = defineMessages({ @@ -158,8 +159,9 @@ class HomeTimeline extends PureComponent { const { intl, hasUnread, columnId, multiColumn, tooSlow, hasAnnouncements, unreadAnnouncements, showAnnouncements } = this.props; const pinned = !!columnId; const { signedIn } = this.context.identity; + const banners = []; - let announcementsButton, banner; + let announcementsButton; if (hasAnnouncements) { announcementsButton = ( @@ -174,8 +176,12 @@ class HomeTimeline extends PureComponent { ); } + if (criticalUpdatesPending) { + banners.push(); + } + if (tooSlow) { - banner = ; + banners.push(); } return ( @@ -197,7 +203,7 @@ class HomeTimeline extends PureComponent { {signedIn ? ( } accounts * @property {InitialStateLanguage[]} languages + * @property {boolean=} critical_updates_pending * @property {InitialStateMeta} meta * @property {object} local_settings * @property {number} max_toot_chars @@ -160,6 +161,7 @@ export const useBlurhash = getMeta('use_blurhash'); export const usePendingItems = getMeta('use_pending_items'); export const version = getMeta('version'); export const languages = initialState?.languages; +export const criticalUpdatesPending = initialState?.critical_updates_pending; export const statusPageUrl = getMeta('status_page_url'); export const sso_redirect = getMeta('sso_redirect'); diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss index 7adeaeee01..2f4027b03f 100644 --- a/app/javascript/flavours/glitch/styles/admin.scss +++ b/app/javascript/flavours/glitch/styles/admin.scss @@ -143,6 +143,11 @@ $content-width: 840px; } } + .warning a { + color: $gold-star; + font-weight: 700; + } + .simple-navigation-active-leaf a { color: $primary-text-color; background-color: $ui-highlight-color; diff --git a/app/javascript/flavours/glitch/styles/components/columns.scss b/app/javascript/flavours/glitch/styles/components/columns.scss index 6c97137964..39b9bd291d 100644 --- a/app/javascript/flavours/glitch/styles/components/columns.scss +++ b/app/javascript/flavours/glitch/styles/components/columns.scss @@ -977,7 +977,8 @@ $ui-header-height: 55px; } } -.dismissable-banner { +.dismissable-banner, +.warning-banner { position: relative; margin: 10px; margin-bottom: 5px; @@ -1055,6 +1056,21 @@ $ui-header-height: 55px; } } +.warning-banner { + border: 1px solid $warning-red; + background: rgba($warning-red, 0.15); + + &__message { + h1 { + color: $warning-red; + } + + a { + color: $primary-text-color; + } + } +} + .hashtag-header { border-bottom: 1px solid lighten($ui-base-color, 8%); padding: 15px; diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss index b583d3d8ea..44ef00ba73 100644 --- a/app/javascript/flavours/glitch/styles/tables.scss +++ b/app/javascript/flavours/glitch/styles/tables.scss @@ -12,6 +12,11 @@ border-top: 1px solid $ui-base-color; text-align: start; background: darken($ui-base-color, 4%); + + &.critical { + font-weight: 700; + color: $gold-star; + } } & > thead > tr > th {