diff --git a/app/soapbox/containers/soapbox.js b/app/soapbox/containers/soapbox.js
index 1b4a6ab3c..878f78b3c 100644
--- a/app/soapbox/containers/soapbox.js
+++ b/app/soapbox/containers/soapbox.js
@@ -70,11 +70,6 @@ class SoapboxMount extends React.PureComponent {
dispatch: PropTypes.func,
};
- getThemeChunk = theme => {
- const cssChunks = JSON.parse(document.getElementById('css-chunks').innerHTML);
- return cssChunks.filter(chunk => chunk.startsWith(theme))[0];
- };
-
componentDidMount() {
this.props.dispatch(generateTheme('#bb0000', 'light'));
}
@@ -106,7 +101,6 @@ class SoapboxMount extends React.PureComponent {
<>
- {theme && }
{themeCss && }
diff --git a/app/soapbox/reducers/theme.js b/app/soapbox/reducers/theme.js
index 233aa74b3..81b9912b1 100644
--- a/app/soapbox/reducers/theme.js
+++ b/app/soapbox/reducers/theme.js
@@ -10,13 +10,13 @@ const initialState = ImmutableMap();
const modes = ImmutableMap({
light: ImmutableMap({
'primary-text-color': '#000000',
- 'primary-text-color-faint': 'rgba(0, 0, 0, 0.7)',
+ 'primary-text-color-faint': 'rgba(0, 0, 0, 0.6)',
'background-color': '#f2f2f2',
'foreground-color': '#ffffff',
}),
dark: ImmutableMap({
'primary-text-color': '#ffffff',
- 'primary-text-color-faint': 'rgba(255, 255, 255, 0.7)',
+ 'primary-text-color-faint': 'rgba(255, 255, 255, 0.6)',
'background-color': '#333333',
'foreground-color': '#222222',
}),
diff --git a/app/styles/soapbox/components.scss b/app/styles/soapbox/components.scss
index 811464208..a8cd66b90 100644
--- a/app/styles/soapbox/components.scss
+++ b/app/styles/soapbox/components.scss
@@ -1949,7 +1949,7 @@ a.account__display-name {
&:hover,
&:focus,
&:active {
- background: lighten($ui-base-color, 11%);
+ background: var(--brand-color-faint);
}
&:focus {
@@ -1991,7 +1991,7 @@ a.account__display-name {
.column-subheading {
background: var(--brand-color-med);
- color: $dark-text-color;
+ color: var(--primary-text-color-faint);
padding: 8px 20px;
font-size: 12px;
font-weight: 500;
@@ -2081,7 +2081,7 @@ a.account__display-name {
color: var(--primary-text-color-faint);
background: transparent;
border: 0;
- border-bottom: 2px solid $ui-primary-color;
+ border-bottom: 2px solid var(--brand-color);
box-sizing: border-box;
display: block;
font-family: inherit;
@@ -2446,6 +2446,7 @@ a.status-card.compact:hover {
&.grouped {
margin: 6px;
+ color: var(--primary-text-color-faint);
}
&.active {
@@ -2547,7 +2548,7 @@ a.status-card.compact:hover {
}
.column-header__collapsible-inner {
- background: #3f3f3f;
+ background: var(--background-color);
padding: 15px;
}
@@ -4684,6 +4685,7 @@ noscript {
}
.wtf-panel {
+ @include light-theme-shadow;
display: flex;
width: 100%;
border-radius: 10px;
diff --git a/app/styles/soapbox/components/user-panel.scss b/app/styles/soapbox/components/user-panel.scss
index 6ec6aefda..5a4b4861a 100644
--- a/app/styles/soapbox/components/user-panel.scss
+++ b/app/styles/soapbox/components/user-panel.scss
@@ -38,6 +38,7 @@
&__meta {
display: block;
padding: 6px 20px 17px;
+ opacity: 0.6;
}
&__account {