diff --git a/src/_variables.scss b/src/_variables.scss
new file mode 100644
index 000000000..751fc9a46
--- /dev/null
+++ b/src/_variables.scss
@@ -0,0 +1,36 @@
+$main-color: #f58d2c;
+$main-background: white;
+$darkened-background: whitesmoke;
+
+$fallback--bg: #121a24;
+$fallback--fg: #182230;
+$fallback--faint: rgb(185 185 186 / 50%);
+$fallback--text: #b9b9ba;
+$fallback--link: #d8a070;
+$fallback--icon: #666;
+$fallback--lightBg: rgb(21 30 42);
+$fallback--lightText: #b9b9ba;
+$fallback--border: #222;
+$fallback--cRed: #f00;
+$fallback--cBlue: #0095ff;
+$fallback--cGreen: #0fa00f;
+$fallback--cOrange: orange;
+
+$fallback--alertError: rgb(211 16 20 / 50%);
+$fallback--alertWarning: rgb(111 111 20 / 50%);
+
+$fallback--panelRadius: 10px;
+$fallback--checkboxRadius: 2px;
+$fallback--btnRadius: 4px;
+$fallback--inputRadius: 4px;
+$fallback--tooltipRadius: 5px;
+$fallback--avatarRadius: 4px;
+$fallback--avatarAltRadius: 10px;
+$fallback--attachmentRadius: 10px;
+$fallback--chatMessageRadius: 10px;
+
+$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
+ 0 1px 0 0 rgb(255 255 255 / 20%) inset,
+ 0 -1px 0 0 rgb(0 0 0 / 20%) inset;
+
+$status-margin: 0.75em;
diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png
deleted file mode 120000
index a7f6191f6..000000000
--- a/src/assets/pleromatan_apology.png
+++ /dev/null
@@ -1 +0,0 @@
-../../static/pleromatan_apology.png
\ No newline at end of file
diff --git a/src/assets/pleromatan_apology.png b/src/assets/pleromatan_apology.png
new file mode 100644
index 000000000..36ad7aeb8
Binary files /dev/null and b/src/assets/pleromatan_apology.png differ
diff --git a/src/assets/pleromatan_apology_fox.png b/src/assets/pleromatan_apology_fox.png
deleted file mode 120000
index b3db4af3f..000000000
--- a/src/assets/pleromatan_apology_fox.png
+++ /dev/null
@@ -1 +0,0 @@
-../../static/pleromatan_apology_fox.png
\ No newline at end of file
diff --git a/src/assets/pleromatan_apology_fox.png b/src/assets/pleromatan_apology_fox.png
new file mode 100644
index 000000000..17f87694c
Binary files /dev/null and b/src/assets/pleromatan_apology_fox.png differ
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 9a6964d15..84fea9543 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -13,7 +13,8 @@ import VBodyScrollLock from 'src/directives/body_scroll_lock'
import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { applyConfig } from '../services/style_setter/style_setter.js'
+import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
+import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
import FaviconService from '../services/favicon_service/favicon_service.js'
import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
@@ -122,7 +123,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
store.dispatch('setInstanceOption', { name, value: config[name] })
}
- copyInstanceOption('theme')
copyInstanceOption('nsfwCensorImage')
copyInstanceOption('background')
copyInstanceOption('hidePostStats')
@@ -160,6 +160,8 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
copyInstanceOption('showFeaturesPanel')
copyInstanceOption('hideSitename')
copyInstanceOption('sidebarRight')
+
+ return store.dispatch('setTheme', config.theme)
}
const getTOS = async ({ store }) => {
@@ -253,14 +255,12 @@ const getNodeInfo = async ({ store }) => {
store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
- store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
- store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
const uploadLimits = metadata.uploadLimits
store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
@@ -327,10 +327,17 @@ const setConfig = async ({ store }) => {
}
const checkOAuthToken = async ({ store }) => {
- if (store.getters.getUserToken()) {
- return store.dispatch('loginUser', store.getters.getUserToken())
- }
- return Promise.resolve()
+ // eslint-disable-next-line no-async-promise-executor
+ return new Promise(async (resolve, reject) => {
+ if (store.getters.getUserToken()) {
+ try {
+ await store.dispatch('loginUser', store.getters.getUserToken())
+ } catch (e) {
+ console.error(e)
+ }
+ }
+ resolve()
+ })
}
const afterStoreSetup = async ({ store, i18n }) => {
@@ -346,26 +353,34 @@ const afterStoreSetup = async ({ store, i18n }) => {
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
store.dispatch('setInstanceOption', { name: 'server', value: server })
- document.querySelector('#status').textContent = i18n.global.t('splash.settings')
await setConfig({ store })
- document.querySelector('#status').textContent = i18n.global.t('splash.theme')
- try {
- await store.dispatch('setTheme').catch((e) => { console.error('Error setting theme', e) })
- } catch (e) {
- return Promise.reject(e)
+
+ const { customTheme, customThemeSource } = store.state.config
+ const { theme } = store.state.instance
+ const customThemePresent = customThemeSource || customTheme
+
+ if (customThemePresent) {
+ if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
+ applyTheme(customThemeSource)
+ } else {
+ applyTheme(customTheme)
+ }
+ } else if (theme) {
+ // do nothing, it will load asynchronously
+ } else {
+ console.error('Failed to load any theme!')
}
- applyConfig(store.state.config, i18n.global)
+ applyConfig(store.state.config)
// Now we can try getting the server settings and logging in
// Most of these are preloaded into the index.html so blocking is minimized
- document.querySelector('#status').textContent = i18n.global.t('splash.instance')
await Promise.all([
checkOAuthToken({ store }),
getInstancePanel({ store }),
getNodeInfo({ store }),
getInstanceConfig({ store })
- ]).catch(e => Promise.reject(e))
+ ])
// Start fetching things that don't need to block the UI
store.dispatch('fetchMutes')
@@ -399,9 +414,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
// remove after vue 3.3
app.config.unwrapInjectedRef = true
- document.querySelector('#status').textContent = i18n.global.t('splash.almost')
app.mount('#app')
+
return app
}
diff --git a/src/boot/routes.js b/src/boot/routes.js
index f87b2ec85..2dc900e7e 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -25,9 +25,6 @@ import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
import ListsEdit from 'components/lists_edit/lists_edit.vue'
import NavPanel from 'src/components/nav_panel/nav_panel.vue'
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
-import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
-import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
-import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
export default (store) => {
const validateAuthenticatedRoute = (to, from, next) => {
@@ -54,7 +51,6 @@ export default (store) => {
{ name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
{ name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
- { name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
{
name: 'remote-user-profile-acct',
path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
@@ -88,11 +84,7 @@ export default (store) => {
{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
{ name: 'lists-new', path: '/lists/new', component: ListsEdit },
- { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
- { name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
- { name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
- { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
- { name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
+ { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
]
if (store.state.instance.pleromaChatMessagesAvailable) {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 9a7c6824a..ce19291a1 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -11,14 +11,14 @@
diff --git a/src/components/border.style.js b/src/components/border.style.js
deleted file mode 100644
index a87ee9c87..000000000
--- a/src/components/border.style.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
- name: 'Border',
- selector: '/*border*/',
- virtual: true,
- defaultRules: [
- {
- directives: {
- textColor: '$mod(--parent, 10)',
- textAuto: 'no-auto'
- }
- }
- ]
-}
diff --git a/src/components/button.style.js b/src/components/button.style.js
deleted file mode 100644
index 1423d5c78..000000000
--- a/src/components/button.style.js
+++ /dev/null
@@ -1,112 +0,0 @@
-export default {
- name: 'Button', // Name of the component
- selector: '.button-default', // CSS selector/prefix
- // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
- // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
- states: {
- // States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
- // All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
- // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
- // normal: '' // normal state is implicitly added, it is always included
- toggled: '.toggled',
- pressed: ':active',
- hover: ':hover:not(:disabled)',
- focused: ':focus-within',
- disabled: ':disabled'
- },
- // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
- variants: {
- // Variants save on computation time since adding new variant just adds one more "set".
- // normal: '', // you can override normal variant, it will be appenended to the main class
- danger: '.danger'
- // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
- // This (currently) is further multipled by number of places where component can exist.
- },
- // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
- validInnerComponents: [
- 'Text',
- 'Icon'
- ],
- // Default rules, used as "default theme", essentially.
- defaultRules: [
- {
- component: 'Root',
- directives: {
- '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
- '--defaultButtonShadow': 'shadow | 0 0 2 #000000',
- '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2), $borderSide(#000000, bottom, 0.2)',
- '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
- }
- },
- {
- // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
- // like within it
- directives: {
- background: '--fg',
- shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
- roundness: 3
- }
- },
- {
- state: ['hover'],
- directives: {
- shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
- }
- },
- {
- state: ['pressed'],
- directives: {
- shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
- }
- },
- {
- state: ['hover', 'pressed'],
- directives: {
- shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
- }
- },
- {
- state: ['toggled'],
- directives: {
- background: '--inheritedBackground,-14.2',
- shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
- }
- },
- {
- state: ['toggled', 'hover'],
- directives: {
- background: '--inheritedBackground,-14.2',
- shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
- }
- },
- {
- state: ['disabled'],
- directives: {
- background: '$blend(--inheritedBackground, 0.25, --parent)',
- shadow: ['--defaultButtonBevel']
- }
- },
- {
- component: 'Text',
- parent: {
- component: 'Button',
- state: ['disabled']
- },
- directives: {
- textOpacity: 0.25,
- textOpacityMode: 'blend'
- }
- },
- {
- component: 'Icon',
- parent: {
- component: 'Button',
- state: ['disabled']
- },
- directives: {
- textOpacity: 0.25,
- textOpacityMode: 'blend'
- }
- }
- ]
-}
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
deleted file mode 100644
index 65b5c57bf..000000000
--- a/src/components/button_unstyled.style.js
+++ /dev/null
@@ -1,96 +0,0 @@
-export default {
- name: 'ButtonUnstyled',
- selector: '.button-unstyled',
- states: {
- toggled: '.toggled',
- disabled: ':disabled',
- hover: ':hover:not(:disabled)',
- focused: ':focus-within'
- },
- validInnerComponents: [
- 'Text',
- 'Icon',
- 'Badge'
- ],
- defaultRules: [
- {
- directives: {
- background: '#ffffff',
- opacity: 0,
- shadow: []
- }
- },
- {
- component: 'Icon',
- parent: {
- component: 'ButtonUnstyled',
- state: ['hover']
- },
- directives: {
- textColor: '--parent--text'
- }
- },
- {
- component: 'Icon',
- parent: {
- component: 'ButtonUnstyled',
- state: ['toggled']
- },
- directives: {
- textColor: '--parent--text'
- }
- },
- {
- component: 'Icon',
- parent: {
- component: 'ButtonUnstyled',
- state: ['toggled', 'hover']
- },
- directives: {
- textColor: '--parent--text'
- }
- },
- {
- component: 'Icon',
- parent: {
- component: 'ButtonUnstyled',
- state: ['toggled', 'focused']
- },
- directives: {
- textColor: '--parent--text'
- }
- },
- {
- component: 'Icon',
- parent: {
- component: 'ButtonUnstyled',
- state: ['toggled', 'focused', 'hover']
- },
- directives: {
- textColor: '--parent--text'
- }
- },
- {
- component: 'Text',
- parent: {
- component: 'ButtonUnstyled',
- state: ['disabled']
- },
- directives: {
- textOpacity: 0.25,
- textOpacityMode: 'blend'
- }
- },
- {
- component: 'Icon',
- parent: {
- component: 'ButtonUnstyled',
- state: ['disabled']
- },
- directives: {
- textOpacity: 0.25,
- textOpacityMode: 'blend'
- }
- }
- ]
-}
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 8af710ae1..43e7a5e44 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -11,15 +11,15 @@
.chat-view-body {
box-sizing: border-box;
+ background-color: var(--chatBg, $fallback--bg);
display: flex;
flex-direction: column;
width: 100%;
overflow: visible;
min-height: calc(100vh - var(--navbar-height));
margin: 0;
- border-radius: var(--roundness);
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
+ border-radius: 10px 10px 0 0;
+ border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
&::after {
border-radius: 0;
@@ -37,6 +37,8 @@
.footer {
position: sticky;
bottom: 0;
+ background-color: $fallback--bg;
+ background-color: var(--bg, $fallback--bg);
z-index: 1;
}
@@ -59,6 +61,8 @@
position: absolute;
right: 1.3em;
top: -3.2em;
+ background-color: $fallback--fg;
+ background-color: var(--btn, $fallback--fg);
display: flex;
justify-content: center;
align-items: center;
@@ -75,6 +79,12 @@
visibility: visible;
}
+ i {
+ font-size: 1em;
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ }
+
.unread-message-count {
font-size: 0.8em;
left: 50%;
diff --git a/src/components/chat/chat.style.js b/src/components/chat/chat.style.js
deleted file mode 100644
index 9ae2b7d71..000000000
--- a/src/components/chat/chat.style.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
- name: 'Chat',
- selector: '.chat-message-list',
- validInnerComponents: [
- 'Text',
- 'Link',
- 'Icon',
- 'Avatar',
- 'ChatMessage'
- ],
- defaultRules: [
- {
- directives: {
- background: '--bg',
- blur: '5px'
- }
- }
- ]
-}
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 6efe576b8..b1e5468c8 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -26,7 +26,7 @@
@@ -61,7 +61,7 @@
{{ newMessageCount }}
@@ -95,5 +95,6 @@
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index b33ea67ec..27a475edf 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -45,6 +45,8 @@
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 9711b41d6..3a84672bd 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -1,6 +1,8 @@
.chat-list-item {
display: flex;
flex-direction: row;
+ padding: 0.75em;
+ height: 5em;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
@@ -9,6 +11,11 @@
outline: none;
}
+ &:hover {
+ background-color: var(--selectedPost, $fallback--lightBg);
+ box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
+ }
+
.chat-list-item-left {
margin-right: 1em;
}
@@ -22,7 +29,7 @@
.heading {
width: 100%;
- display: flex;
+ display: inline-flex;
justify-content: space-between;
line-height: 1em;
}
@@ -40,17 +47,18 @@
}
.chat-preview {
- display: flex;
+ display: inline-flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0.35em 0;
- color: var(--textFaint);
+ color: $fallback--text;
+ color: var(--faint, $fallback--text);
width: 100%;
}
a {
- color: var(--linkFaint);
+ color: var(--faintLink, $fallback--link);
text-decoration: none;
pointer-events: none;
}
@@ -65,6 +73,11 @@
}
}
+ .Avatar {
+ border-radius: $fallback--avatarAltRadius;
+ border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+ }
+
.chat-preview-body {
--emoji-size: 1.4em;
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 0f9d5c5fa..69ad609bb 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -36,7 +36,7 @@
/>
{{ chat.unread }}
@@ -48,5 +48,6 @@
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index f7254ea35..fd5b7aa45 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -1,3 +1,5 @@
+@import "../../variables";
+
.chat-message-wrapper {
&.hovered-message-chain {
.animated.Avatar {
@@ -25,6 +27,12 @@
.menu-icon {
cursor: pointer;
+
+ &:hover,
+ .extra-button-popover.open & {
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ }
}
.popover {
@@ -53,12 +61,10 @@
}
.status {
- background-color: var(--background);
- color: var(--text);
- border-radius: var(--roundness);
+ border-radius: $fallback--chatMessageRadius;
+ border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
display: flex;
padding: 0.75em;
- border: 1px solid var(--border);
}
.created-at {
@@ -91,7 +97,8 @@
.error {
.status-content.media-body,
.created-at {
- color: var(--badgeNotification);
+ color: $fallback--cRed;
+ color: var(--badgeNotification, $fallback--cRed);
}
}
@@ -110,6 +117,16 @@
align-content: end;
justify-content: flex-end;
+ a {
+ color: var(--chatMessageOutgoingLink, $fallback--link);
+ }
+
+ .status {
+ color: var(--chatMessageOutgoingText, $fallback--text);
+ background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
+ border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
+ }
+
.chat-message-inner {
align-items: flex-end;
}
@@ -120,6 +137,22 @@
}
.incoming {
+ a {
+ color: var(--chatMessageIncomingLink, $fallback--link);
+ }
+
+ .status {
+ color: var(--chatMessageIncomingText, $fallback--text);
+ background-color: var(--chatMessageIncomingBg, $fallback--bg);
+ border: 1px solid var(--chatMessageIncomingBorder, --border);
+ }
+
+ .created-at {
+ a {
+ color: var(--chatMessageIncomingText, $fallback--text);
+ }
+ }
+
.chat-message-menu {
left: 0.4rem;
}
@@ -143,5 +176,6 @@
margin: 1.4em 0;
font-size: 0.9em;
user-select: none;
- color: var(--textFaint);
+ color: $fallback--text;
+ color: var(--faintedText, $fallback--text);
}
diff --git a/src/components/chat_message/chat_message.style.js b/src/components/chat_message/chat_message.style.js
deleted file mode 100644
index 9b57ad371..000000000
--- a/src/components/chat_message/chat_message.style.js
+++ /dev/null
@@ -1,30 +0,0 @@
-export default {
- name: 'ChatMessage',
- selector: '.chat-message',
- variants: {
- outgoing: '.outgoing'
- },
- validInnerComponents: [
- 'Text',
- 'Icon',
- 'Border',
- 'Button',
- 'RichContent',
- 'Attachment',
- 'PollGraph'
- ],
- defaultRules: [
- {
- directives: {
- background: '--bg, 2',
- backgroundNoCssColor: 'yes'
- }
- },
- {
- variant: 'outgoing',
- directives: {
- background: '--bg, 5'
- }
- }
- ]
-}
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 166889d71..381574c32 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -53,7 +53,7 @@
- 
-