diff --git a/.mailmap b/.mailmap new file mode 100644 index 00000000..0b198a47 --- /dev/null +++ b/.mailmap @@ -0,0 +1 @@ +rinpatch \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 99f601a5..cef6d401 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,17 +5,116 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [Unreleased] ### Added -- New option to optimize timeline rendering to make the site more responsive (enabled by default) +- Added a quick settings to timeline header for easier access +- Added option to mark posts as sensitive by default +- Added quick filters for notifications -## [Unreleased patch] + +## [2.3.0] - 2021-03-01 +### Fixed +- Button to remove uploaded media in post status form is now properly placed and sized. +- Fixed shoutbox not working in mobile layout +- Fixed missing highlighted border in expanded conversations again +- Fixed some UI jumpiness when opening images particularly in chat view +- Fixed chat unread badge looking weird +- Fixed punycode names not working properly +- Fixed notifications crashing on an invalid notification + +### Changed +- Display 'people voted' instead of 'votes' for multi-choice polls +- Changed the "Timelines" link in side panel to toggle show all timeline options inside the panel +- Renamed "Timeline" to "Home Timeline" to be more clear +- Optimized chat to not get horrible performance after keeping the same chat open for a long time +- When opening emoji picker or react picker, it automatically focuses the search field +- Language picker now uses native language names + +### Added +- Added reason field for registration when approval is required +- Group staff members by role in the About page + + +## [2.2.3] - 2021-01-18 +### Added +- Added Report button to status ellipsis menu for easier reporting + +### Fixed +- Follows/Followers tabs on user profiles now display the content properly. +- Handle punycode in screen names +- Fixed local dev mode having non-functional websockets in some cases +- Show notices for websocket events (errors, abnormal closures, reconnections) +- Fix not being able to re-enable websocket until page refresh +- Fix annoying issue where timeline might have few posts when streaming is enabled + +### Changed +- Don't filter own posts when they hit your wordfilter + + +## [2.2.2] - 2020-12-22 +### Added +- Mouseover titles for emojis in reaction picker +- Support to input emoji into the search box in reaction picker +- Added some missing unicode emoji +- Added the upload limit to the Features panel in the About page +- Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore + +### Fixed +- Fixed the occasional bug where screen would scroll 1px when typing into a reply form +- Fixed timeline errors locking timelines +- Fixed missing highlighted border in expanded conversations +- Fixed custom emoji not working in profile field names +- Fixed pinned statuses not appearing in user profiles +- Fixed some elements not being keyboard navigation friendly +- Fixed error handling when updating various profile images +- Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session +- Fixed custom emoji not showing in poll options before voting +- Fixed link color not applied to instance name in topbar + +### Changed +- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers +- Made reply/fav/repeat etc buttons easier to hit +- Adjusted timeline menu clickable area to match the visible button +- Moved external source link from status heading to the ellipsis menu +- Disabled horizontal textarea resize +- Wallpaper is now top-aligned, horizontally centered. + + +## [2.2.1] - 2020-11-11 +### Fixed +- Fixed regression in react popup alignment and overflowing + + +## [2.2.0] - 2020-11-06 +### Added +- New option to optimize timeline rendering to make the site more responsive (enabled by default) +- New instance option `logoLeft` to move logo to the left side in desktop nav bar +- Import/export a muted users +- Proper handling of deletes when using websocket streaming +- Added optimistic chat message sending, so you can start writing next message before the previous one has been sent +- Added a small red badge to the favicon when there's unread notifications +- Added the NSFW alert to link previews + +### Fixed +- Fixed clicking NSFW hider through status popover +- Fixed chat-view back button being hard to click +- Fixed fresh chat notifications being cleared immediately while leaving the chat view and not having time to actually see the messages +- Fixed multiple regressions in CSS styles +- Fixed multiple issues with input fields when using CJK font as default +- Fixed search field in navbar infringing into logo in some cases +- Fixed not being able to load the chat history in vertical screens when the message list doesn't take the full height of the scrollable container on the first fetch. + +### Changed +- Clicking immediately when timeline shifts is now blocked to prevent misclicks +- Icons changed from fontello (FontAwesome 4 + others) to FontAwesome 5 due to problems with fontello. +- Some icons changed for better accessibility (lock, globe) +- Logo is now clickable +- Changed default logo to SVG version + + +## [2.1.2] - 2020-09-17 ### Fixed - Fixed chats list not updating its order when new messages come in - Fixed chat messages sometimes getting lost when you receive a message at the same time -- Fixed clicking NSFW hider through status popover -### Added -- Import/export a muted users -- Proper handling of deletes when using websocket streaming ## [2.1.1] - 2020-09-08 ### Changed @@ -142,8 +241,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Ability to change user's email - About page - Added remote user redirect -- Bookmarks + ### Changed - changed the way fading effects for user profile/long statuses works, now uses css-mask instead of gradient background hacks which weren't exactly compatible with semi-transparent themes + ### Fixed - improved hotkey behavior on autocomplete popup diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index ef40333c..d987eff1 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -3,7 +3,6 @@ var config = require('../config') var utils = require('./utils') var projectRoot = path.resolve(__dirname, '../') var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin') -var FontelloPlugin = require("fontello-webpack-plugin") var env = process.env.NODE_ENV // check env & config/index.js to decide weither to enable CSS Sourcemaps for the @@ -94,15 +93,6 @@ module.exports = { new ServiceWorkerWebpackPlugin({ entry: path.join(__dirname, '..', 'src/sw.js'), filename: 'sw-pleroma.js' - }), - new FontelloPlugin({ - config: require('../static/fontello.json'), - host: 'https://fontello.com', - name: 'fontello', - output: { - css: 'static/[name].' + now + '.css', // [hash] is not supported. Use the current timestamp instead for versioning. - font: 'static/font/[name].' + now + '.[ext]' - } }) ] } diff --git a/config/index.js b/config/index.js index ccec4196..7cb87c3b 100644 --- a/config/index.js +++ b/config/index.js @@ -3,6 +3,11 @@ const path = require('path') let settings = {} try { settings = require('./local.json') + if (settings.target && settings.target.endsWith('/')) { + // replacing trailing slash since it can conflict with some apis + // and that's how actual BE reports its url + settings.target = settings.target.replace(/\/$/, '') + } console.log('Using local dev server settings (/config/local.json):') console.log(JSON.stringify(settings, null, 2)) } catch (e) { diff --git a/index.html b/index.html index 1ff944d9..ba072eda 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,6 @@ - Pleroma diff --git a/package.json b/package.json index 75d9ee56..8dbf2503 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,10 @@ "dependencies": { "@babel/runtime": "^7.7.6", "@chenfengyuan/vue-qrcode": "^1.0.0", + "@fortawesome/fontawesome-svg-core": "^1.2.32", + "@fortawesome/free-regular-svg-icons": "^5.15.1", + "@fortawesome/free-solid-svg-icons": "^5.15.1", + "@fortawesome/vue-fontawesome": "^2.0.0", "body-scroll-lock": "^2.6.4", "chromatism": "^3.0.0", "cropperjs": "^1.4.3", @@ -27,9 +31,9 @@ "parse-link-header": "^1.0.1", "phoenix": "^1.3.0", "portal-vue": "^2.1.4", + "punycode.js": "^2.1.0", "v-click-outside": "^2.1.1", "vue": "^2.6.11", - "vue-chat-scroll": "^1.2.1", "vue-i18n": "^7.3.2", "vue-router": "^3.0.1", "vue-template-compiler": "^2.6.11", @@ -51,7 +55,7 @@ "babel-plugin-lodash": "^3.3.4", "chai": "^3.5.0", "chalk": "^1.1.3", - "chromedriver": "^2.21.2", + "chromedriver": "^87.0.1", "connect-history-api-fallback": "^1.1.0", "cross-spawn": "^4.0.2", "css-loader": "^0.28.0", @@ -68,7 +72,6 @@ "eventsource-polyfill": "^0.9.6", "express": "^4.13.3", "file-loader": "^3.0.1", - "fontello-webpack-plugin": "https://github.com/w3geo/fontello-webpack-plugin.git#6149eac8f2672ab6da089e8802fbfcac98487186", "function-bind": "^1.0.2", "html-webpack-plugin": "^3.0.0", "http-proxy-middleware": "^0.17.2", @@ -99,7 +102,7 @@ "selenium-server": "2.53.1", "semver": "^5.3.0", "serviceworker-webpack-plugin": "^1.0.0", - "shelljs": "^0.7.4", + "shelljs": "^0.8.4", "sinon": "^2.1.0", "sinon-chai": "^2.8.0", "stylelint": "^13.6.1", diff --git a/src/App.js b/src/App.js index ded772fa..1ca029b6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,6 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' -import SearchBar from './components/search_bar/search_bar.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' @@ -11,10 +10,12 @@ import MediaModal from './components/media_modal/media_modal.vue' import SideDrawer from './components/side_drawer/side_drawer.vue' import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue' import MobileNav from './components/mobile_nav/mobile_nav.vue' +import DesktopNav from './components/desktop_nav/desktop_nav.vue' import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue' import PostStatusModal from './components/post_status_modal/post_status_modal.vue' import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue' import { windowWidth, windowHeight } from './services/window_utils/window_utils' +import { mapGetters } from 'vuex' export default { name: 'app', @@ -22,7 +23,6 @@ export default { UserPanel, NavPanel, Notifications, - SearchBar, InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, @@ -31,21 +31,14 @@ export default { SideDrawer, MobilePostStatusButton, MobileNav, + DesktopNav, SettingsModal, UserReportingModal, PostStatusModal, GlobalNoticeList }, data: () => ({ - mobileActivePanel: 'timeline', - searchBarHidden: true, - supportsMask: window.CSS && window.CSS.supports && ( - window.CSS.supports('mask-size', 'contain') || - window.CSS.supports('-webkit-mask-size', 'contain') || - window.CSS.supports('-moz-mask-size', 'contain') || - window.CSS.supports('-ms-mask-size', 'contain') || - window.CSS.supports('-o-mask-size', 'contain') - ) + mobileActivePanel: 'timeline' }), created () { // Load the locale from the storage @@ -58,44 +51,21 @@ export default { }, computed: { currentUser () { return this.$store.state.users.currentUser }, - background () { - return this.currentUser.background_image || this.$store.state.instance.background + userBackground () { return this.currentUser.background_image }, + instanceBackground () { + return this.mergedConfig.hideInstanceWallpaper + ? null + : this.$store.state.instance.background }, - enableMask () { return this.supportsMask && this.$store.state.instance.logoMask }, - logoStyle () { - return { - 'visibility': this.enableMask ? 'hidden' : 'visible' - } - }, - logoMaskStyle () { - return this.enableMask ? { - 'mask-image': `url(${this.$store.state.instance.logo})` - } : { - 'background-color': this.enableMask ? '' : 'transparent' - } - }, - logoBgStyle () { - return Object.assign({ - 'margin': `${this.$store.state.instance.logoMargin} 0`, - opacity: this.searchBarHidden ? 1 : 0 - }, this.enableMask ? {} : { - 'background-color': this.enableMask ? '' : 'transparent' - }) - }, - logo () { return this.$store.state.instance.logo }, + background () { return this.userBackground || this.instanceBackground }, bgStyle () { - return { - 'background-image': `url(${this.background})` + if (this.background) { + return { + '--body-background-image': `url(${this.background})` + } } }, - bgAppStyle () { - return { - '--body-background-image': `url(${this.background})` - } - }, - sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, - hideSitename () { return this.$store.state.instance.hideSitename }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel && @@ -109,22 +79,10 @@ export default { return { 'order': this.$store.state.instance.sidebarRight ? 99 : 0 } - } + }, + ...mapGetters(['mergedConfig']) }, methods: { - scrollToTop () { - window.scrollTo(0, 0) - }, - logout () { - this.$router.replace('/main/public') - this.$store.dispatch('logout') - }, - onSearchBarToggled (hidden) { - this.searchBarHidden = hidden - }, - openSettingsModal () { - this.$store.dispatch('openSettingsModal') - }, updateMobileState () { const mobileLayout = windowWidth() <= 800 const layoutHeight = windowHeight() diff --git a/src/App.scss b/src/App.scss index e1e1bdd0..f860c16d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -14,7 +14,9 @@ right: -20px; background-size: cover; background-repeat: no-repeat; - background-position: 0 50%; + background-color: var(--wallpaper); + background-image: var(--body-background-image); + background-position: 50% 50px; } i[class^='icon-'] { @@ -33,6 +35,7 @@ h4 { max-width: 980px; align-content: flex-start; } + .underlay { background-color: rgba(0,0,0,0.15); background-color: var(--underlay, rgba(0,0,0,0.15)); @@ -69,7 +72,7 @@ a { color: var(--link, $fallback--link); } -button { +.button-default { user-select: none; color: $fallback--text; color: var(--btnText, $fallback--text); @@ -85,7 +88,8 @@ button { font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); - i[class*=icon-] { + i[class*=icon-], + .svg-inline--fa { color: $fallback--text; color: var(--btnText, $fallback--text); } @@ -106,6 +110,8 @@ button { color: var(--btnPressedText, $fallback--text); background-color: $fallback--fg; background-color: var(--btnPressed, $fallback--fg); + + svg, i { color: $fallback--text; color: var(--btnPressedText, $fallback--text); @@ -118,6 +124,8 @@ button { color: var(--btnDisabledText, $fallback--text); background-color: $fallback--fg; background-color: var(--btnDisabled, $fallback--fg); + + svg, i { color: $fallback--text; color: var(--btnDisabledText, $fallback--text); @@ -131,6 +139,8 @@ button { background-color: var(--btnToggled, $fallback--fg); box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset; box-shadow: var(--buttonPressedShadow); + + svg, i { color: $fallback--text; color: var(--btnToggledText, $fallback--text); @@ -146,6 +156,37 @@ button { } } +.button-unstyled { + background: none; + border: none; + outline: none; + display: inline; + text-align: initial; + font-size: 100%; + font-family: inherit; + padding: 0; + line-height: unset; + cursor: pointer; + box-sizing: content-box; + color: inherit; + + &.-link { + color: $fallback--link; + color: var(--link, $fallback--link); + } + + &.-fullwidth { + width: 100%; + } + + &.-hover-highlight { + &:hover svg { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } +} + input, textarea, .select, .input { &.unstyled { @@ -185,7 +226,7 @@ input, textarea, .select, .input { opacity: 0.5; } - .icon-down-open { + .select-down-icon { position: absolute; top: 0; bottom: 0; @@ -300,6 +341,10 @@ input, textarea, .select, .input { box-sizing: border-box; } } + + &.resize-height { + resize: vertical; + } } option { @@ -318,7 +363,7 @@ option { } } -i[class*=icon-] { +i[class*=icon-], .svg-inline--fa { color: $fallback--icon; color: var(--icon, $fallback--icon); } @@ -356,117 +401,10 @@ i[class*=icon-] { padding: 0 10px 0 10px; } -.item { - flex: 1; - line-height: 50px; - height: 50px; - overflow: hidden; - display: flex; - flex-wrap: wrap; - - .nav-icon { - margin-left: 0.4em; - } - - &.right { - justify-content: flex-end; - } -} - .auto-size { flex: 1 } -.nav-bar { - padding: 0; - width: 100%; - align-items: center; - position: fixed; - height: 50px; - box-sizing: border-box; - - button { - &, i[class*=icon-] { - color: $fallback--text; - color: var(--btnTopBarText, $fallback--text); - } - - &:active { - background-color: $fallback--fg; - background-color: var(--btnPressedTopBar, $fallback--fg); - color: $fallback--text; - color: var(--btnPressedTopBarText, $fallback--text); - } - - &:disabled { - color: $fallback--text; - color: var(--btnDisabledTopBarText, $fallback--text); - } - - &.toggled { - color: $fallback--text; - color: var(--btnToggledTopBarText, $fallback--text); - background-color: $fallback--fg; - background-color: var(--btnToggledTopBar, $fallback--fg) - } - } - - - .logo { - display: flex; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - - align-items: stretch; - justify-content: center; - flex: 0 0 auto; - z-index: -1; - transition: opacity; - transition-timing-function: ease-out; - transition-duration: 100ms; - - .mask { - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - background-color: $fallback--fg; - background-color: var(--topBarText, $fallback--fg); - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - - img { - height: 100%; - object-fit: contain; - display: block; - flex: 0; - } - } - - .inner-nav { - position: relative; - margin: auto; - box-sizing: border-box; - padding-left: 10px; - padding-right: 10px; - display: flex; - align-items: center; - flex-basis: 970px; - height: 50px; - - a, a i { - color: $fallback--link; - color: var(--topBarLink, $fallback--link); - } - } -} - main-router { flex: 1; } @@ -546,6 +484,7 @@ main-router { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } + .faint-link { color: $fallback--faint; color: var(--faintLink, $fallback--faint); @@ -557,11 +496,8 @@ main-router { overflow-x: hidden; } - button { - flex-shrink: 0; - } - - button, .alert { + .button-default, + .alert { // height: 100%; line-height: 21px; min-height: 0; @@ -572,8 +508,11 @@ main-router { align-self: stretch; } - button { - &, i[class*=icon-] { + .button-default { + flex-shrink: 0; + + &, + i[class*=icon-] { color: $fallback--text; color: var(--btnPanelText, $fallback--text); } @@ -596,7 +535,8 @@ main-router { } } - a { + a, + .-link { color: $fallback--link; color: var(--panelLink, $fallback--link) } @@ -611,15 +551,15 @@ main-router { border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); - .faint { color: $fallback--faint; color: var(--panelFaint, $fallback--faint); } - a { + a, + .-link { color: $fallback--link; - color: var(--panelLink, $fallback--link) + color: var(--panelLink, $fallback--link); } } @@ -646,6 +586,7 @@ nav { color: var(--faint, $fallback--faint); box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: var(--topBarShadow); + box-sizing: border-box; } .fade-enter-active, .fade-leave-active { @@ -707,19 +648,24 @@ nav { flex-grow: 0; } } + .badge { + box-sizing: border-box; display: inline-block; border-radius: 99px; - min-width: 22px; - max-width: 22px; - min-height: 22px; - max-height: 22px; - font-size: 15px; - line-height: 22px; - text-align: center; + max-width: 10em; + min-width: 1.7em; + height: 1.3em; + padding: 0.15em 0.15em; vertical-align: middle; + font-weight: normal; + font-style: normal; + font-size: 0.9em; + line-height: 1; + text-align: center; white-space: nowrap; - padding: 0; + overflow: hidden; + text-overflow: ellipsis; &.badge-notification { background-color: $fallback--cRed; @@ -760,6 +706,15 @@ nav { color: var(--alertWarningPanelText, $fallback--text); } } + + &.success { + background-color: var(--alertSuccess, $fallback--alertWarning); + color: var(--alertSuccessText, $fallback--text); + + .panel-heading & { + color: var(--alertSuccessPanelText, $fallback--text); + } + } } .faint { @@ -776,16 +731,6 @@ nav { } } -@media all and (min-width: 800px) { - .logo { - opacity: 1 !important; - } -} - -.item.right { - text-align: right; -} - .visibility-notice { padding: .5em; border: 1px solid $fallback--faint; @@ -807,8 +752,16 @@ nav { } } -.button-icon { - font-size: 1.2em; +.fa-scale-110 { + &.svg-inline--fa { + font-size: 1.1em; + } +} + +.fa-old-padding { + &.svg-inline--fa { + padding: 0 0.3em; + } } @keyframes shakeError { @@ -898,7 +851,7 @@ nav { } } -.btn.btn-default { +.btn.button-default { min-height: 28px; } @@ -930,27 +883,16 @@ nav { background-color: var(--panel, $fallback--fg); } -.unread-chat-count { - font-size: 0.9em; - font-weight: bolder; - font-style: normal; - position: absolute; - right: 0.6rem; - padding: 0 0.3em; - min-width: 1.3rem; - min-height: 1.3rem; - max-height: 1.3rem; - line-height: 1.3rem; - max-width: 10em; - overflow: hidden; - text-overflow: ellipsis; -} - .chat-layout { // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens). overflow: hidden; height: 100%; + // Get rid of scrollbar on body as scrolling happens on different element + body { + overflow: hidden; + } + // Ensures the fixed position of the mobile browser bars on scroll up / down events. // Prevents the mobile browser bars from overlapping or hiding the message posting form. @media all and (max-width: 800px) { diff --git a/src/App.vue b/src/App.vue index 0276c6a6..1a166778 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,82 +1,14 @@ diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js index be4a7c89..bb380f87 100644 --- a/src/components/chat_message/chat_message.js +++ b/src/components/chat_message/chat_message.js @@ -7,6 +7,16 @@ import LinkPreview from '../link-preview/link-preview.vue' import StatusContent from '../status_content/status_content.vue' import ChatMessageDate from '../chat_message_date/chat_message_date.vue' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faTimes, + faEllipsisH +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faTimes, + faEllipsisH +) const ChatMessage = { name: 'ChatMessage', diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss index 7d4ff60c..e4351d3b 100644 --- a/src/components/chat_message/chat_message.scss +++ b/src/components/chat_message/chat_message.scss @@ -24,16 +24,13 @@ } } - .icon-ellipsis { + .menu-icon { cursor: pointer; &:hover, .extra-button-popover.open & { color: $fallback--text; color: var(--text, $fallback--text); } - - border-radius: $fallback--chatMessageRadius; - border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius); } .popover { @@ -101,6 +98,19 @@ } } + .pending { + .status-content.media-body, .created-at { + color: var(--faint); + } + } + + .error { + .status-content.media-body, .created-at { + color: $fallback--cRed; + color: var(--badgeNotification, $fallback--cRed); + } + } + .incoming { a { color: var(--chatMessageIncomingLink, $fallback--link); diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue index e923d694..0777f880 100644 --- a/src/components/chat_message/chat_message.vue +++ b/src/components/chat_message/chat_message.vue @@ -32,7 +32,7 @@ >
diff --git a/src/components/chat_message_date/chat_message_date.vue b/src/components/chat_message_date/chat_message_date.vue index 79c346b6..98349b75 100644 --- a/src/components/chat_message_date/chat_message_date.vue +++ b/src/components/chat_message_date/chat_message_date.vue @@ -5,6 +5,8 @@ + + diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue index 97aee243..3b5aec14 100644 --- a/src/components/domain_mute_card/domain_mute_card.vue +++ b/src/components/domain_mute_card/domain_mute_card.vue @@ -6,7 +6,7 @@ {{ $t('domain_mute_card.unmute') }}