Merge branch 'develop' of https://code.gab.com/gab/social/gab-social into develop

This commit is contained in:
robcolbert 2019-07-03 13:29:38 -04:00
commit 21bed9d36f
19 changed files with 14046 additions and 66 deletions

View File

@ -202,7 +202,7 @@ class StatusActionBar extends ImmutablePureComponent {
menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick }); menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
} else { } else {
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick }); menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick }); //menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick }); menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick }); menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });

View File

@ -163,7 +163,7 @@ class ActionBar extends React.PureComponent {
menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick }); menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
} else { } else {
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick }); menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick }); //menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick });
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick }); menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick }); menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });

View File

@ -32,7 +32,7 @@ class UserPanel extends ImmutablePureComponent {
<div className='user-panel__profile'> <div className='user-panel__profile'>
<Link to={`/${account.get('acct')}`} title={acct}> <Link to={`/${account.get('acct')}`} title={acct}>
<Avatar account={account} size={88} /> <Avatar account={account} />
</Link> </Link>
</div> </div>

View File

@ -49,7 +49,7 @@
@include font-size(12); @include font-size(12);
@include line-height(14); @include line-height(14);
@include font-weight(normal); @include font-weight(normal);
color: $gab-background-info; color: $gab-secondary-text;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
h4 { h4 {
color: #fff; color: #fff;

View File

@ -87,7 +87,7 @@
span { span {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: $gab-background-info; color: $gab-secondary-text;
font-weight: 400; font-weight: 400;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -175,7 +175,7 @@
.nothing-here { .nothing-here {
background: $ui-base-color; background: $ui-base-color;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
color: $gab-background-info; color: $gab-secondary-text;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;

View File

@ -47,7 +47,7 @@ $content-width: 840px;
a { a {
display: block; display: block;
padding: 15px; padding: 15px;
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
transition-property: color, background-color; transition-property: color, background-color;
@ -137,7 +137,7 @@ $content-width: 840px;
text-transform: uppercase; text-transform: uppercase;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: $gab-background-info; color: $gab-secondary-text;
padding-bottom: 8px; padding-bottom: 8px;
margin-bottom: 8px; margin-bottom: 8px;
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
@ -167,7 +167,7 @@ $content-width: 840px;
.directory__tag h4 { .directory__tag h4 {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
color: $gab-background-info; color: $gab-secondary-text;
text-transform: none; text-transform: none;
padding-bottom: 0; padding-bottom: 0;
margin-bottom: 0; margin-bottom: 0;
@ -177,11 +177,11 @@ $content-width: 840px;
& > p { & > p {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $gab-background-info; color: $gab-secondary-text;
margin-bottom: 20px; margin-bottom: 20px;
strong { strong {
color: $gab-background-info; color: $gab-secondary-text;
font-weight: 500; font-weight: 500;
@each $lang in $cjk-langs { @each $lang in $cjk-langs {
@ -206,7 +206,7 @@ $content-width: 840px;
} }
.muted-hint { .muted-hint {
color: $gab-background-info; color: $gab-secondary-text;
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -285,16 +285,16 @@ $content-width: 840px;
a { a {
display: inline-block; display: inline-block;
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
border-bottom: 2px solid $gab-background-info; border-bottom: 2px solid $gab-secondary-text;
&:hover { &:hover {
color: $primary-text-color; color: $primary-text-color;
border-bottom: 2px solid lighten($gab-background-info, 5%); border-bottom: 2px solid lighten($gab-secondary-text, 5%);
} }
&.selected { &.selected {

View File

@ -17,15 +17,18 @@ html {
body { body {
@include font-size(16); @include font-size(16);
@include line-height(19); @include line-height(19);
color: white;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-feature-settings: "kern"; font-feature-settings: "kern";
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
color: white;
background: $gab-background-base; background: $gab-background-base;
&.theme-gabsocial-light {background: $gab-background-base-light;} &.theme-gabsocial-light {
color: $gab-default-text-light;
background: $gab-background-base-light;
}
&.system-font { &.system-font {
// system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+) // system-ui => standard property (Chrome/Android WebView 56+, Opera 43+, Safari 11+)

View File

@ -111,7 +111,7 @@
.icon-button { .icon-button {
display: inline-block; display: inline-block;
padding: 0; padding: 0;
color: $gab-background-info; color: $gab-secondary-text;
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -144,7 +144,7 @@
} }
&.inverted { &.inverted {
color: $gab-background-info; color: $gab-secondary-text;
&:hover, &:hover,
&:active, &:active,
@ -179,7 +179,7 @@
} }
.text-icon-button { .text-icon-button {
color: $gab-background-info; color: $gab-secondary-text;
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
@ -301,7 +301,7 @@
.reply-indicator { .reply-indicator {
border-radius: 4px; border-radius: 4px;
margin-bottom: 10px; margin-bottom: 10px;
background: $ui-primary-color; background: $gab-background-base-light;
padding: 10px; padding: 10px;
min-height: 23px; min-height: 23px;
overflow-y: auto; overflow-y: auto;
@ -772,7 +772,7 @@
} }
.reply-indicator__content { .reply-indicator__content {
color: $inverted-text-color; color: $gab-default-text-light;
font-size: 14px; font-size: 14px;
a { a {
@ -1124,7 +1124,7 @@ a.account__display-name {
margin: 0 10px 0 68px; margin: 0 10px 0 68px;
padding: 8px 0 0; padding: 8px 0 0;
cursor: default; cursor: default;
color: $gab-background-info; color: $gab-secondary-text;
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 22px;
position: relative; position: relative;
@ -2042,14 +2042,14 @@ a.account__display-name {
margin-bottom: 20px; margin-bottom: 20px;
a { a {
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: underline; text-decoration: underline;
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: $gab-background-info; color: $gab-secondary-text;
&:hover, &:hover,
&:focus, &:focus,
@ -2473,7 +2473,7 @@ a.status-card.compact:hover {
background: $gab-background-container; background: $gab-background-container;
body.theme-gabsocial-light & { body.theme-gabsocial-light & {
background: $gab-background-container-light; background: $gab-background-container-light;
color: $gab-active-border; color: $gab-default-text-light;
} }
flex: 0 0 auto; flex: 0 0 auto;
@ -2533,7 +2533,7 @@ a.status-card.compact:hover {
color: #fff; color: #fff;
background: $gab-background-container; background: $gab-background-container;
body.theme-gabsocial-light & { body.theme-gabsocial-light & {
color: $gab-active-border; color: $gab-default-text-light;
background: $gab-background-container-light; background: $gab-background-container-light;
} }
&:hover {color: lighten($darker-text-color, 7%);} &:hover {color: lighten($darker-text-color, 7%);}
@ -3043,7 +3043,7 @@ a.status-card.compact:hover {
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px; border-radius: 4px;
margin-top: 5px; margin-top: 5px;
z-index: 2; z-index: 20000;
.emoji-mart-scroll { .emoji-mart-scroll {
transition: opacity 200ms ease; transition: opacity 200ms ease;
@ -4827,7 +4827,7 @@ noscript {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 24px; line-height: 24px;
color: $primary-text-color; color: $gab-background-base-light;
text-align: center; text-align: center;
} }
} }
@ -4898,6 +4898,7 @@ noscript {
font-size: 20px !important; font-size: 20px !important;
line-height: 1.25; line-height: 1.25;
color: #ffffff; color: #ffffff;
body.theme-gabsocial-light & {color: $gab-default-text-light;}
font-weight: 600 !important; font-weight: 600 !important;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

View File

@ -186,7 +186,7 @@
transition: opacity .1s ease; transition: opacity .1s ease;
.icon-button { .icon-button {
flex: 0 1 auto; flex: 0 1 auto;
color: $gab-background-info; color: $gab-secondary-text;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
padding: 10px; padding: 10px;
@ -212,8 +212,8 @@
background: rgba(0,0,0,0.3); background: rgba(0,0,0,0.3);
box-sizing: border-box; box-sizing: border-box;
background: transparent; background: transparent;
color: $gab-background-info; color: $gab-secondary-text;
border: 1px solid $gab-background-info; border: 1px solid $gab-secondary-text;
outline: none; outline: none;
padding: 10px; padding: 10px;
margin: 0; margin: 0;
@ -223,7 +223,7 @@
font-weight: 500; font-weight: 500;
&:focus {color: #fff;} &:focus {color: #fff;}
&::placeholder { &::placeholder {
color: $gab-background-info; color: $gab-secondary-text;
} }
} }
&.active {opacity: 1;} &.active {opacity: 1;}
@ -267,7 +267,7 @@
font-family: $font-sans-serif, sans-serif; font-family: $font-sans-serif, sans-serif;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: $gab-background-info; color: $gab-secondary-text;
&.character-counter--over {color: $warning-red;} &.character-counter--over {color: $warning-red;}
} }
} }

View File

@ -8,7 +8,7 @@
@include font-size(13); @include font-size(13);
@include line-height(26); @include line-height(26);
@include font-weight(normal); @include font-weight(normal);
color: $gab-background-info; color: $gab-secondary-text;
box-shadow: 0 0 6px 0 rgba(0,0,0,0.5); box-shadow: 0 0 6px 0 rgba(0,0,0,0.5);
&.left {transform-origin: 100% 50%;} &.left {transform-origin: 100% 50%;}
&.top {transform-origin: 50% 100%;} &.top {transform-origin: 50% 100%;}
@ -57,7 +57,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-transform: capitalize; text-transform: capitalize;
color: $gab-background-info; color: $gab-secondary-text;
&:focus, &:focus,
&:hover, &:hover,
&:active { &:active {

View File

@ -310,8 +310,8 @@
max-width: 90vw; max-width: 90vw;
border-radius: 4px; border-radius: 4px;
border: 1px solid $gab-placeholder-accent; border: 1px solid $gab-placeholder-accent;
color: $gab-background-info; color: $gab-secondary-text;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
background: $gab-background-container; background: $gab-background-container;
.status__display-name { .status__display-name {
display: block; display: block;
@ -432,8 +432,8 @@
.status__content, .status__content,
.status__content p { .status__content p {
color: $gab-background-info; color: $gab-secondary-text;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
} }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
@ -520,7 +520,7 @@
align-items: center; align-items: center;
padding: 13px 10px 12px; padding: 13px 10px 12px;
@inclide font-size(14); @inclide font-size(14);
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: none; text-decoration: none;
&, &,
button {transition: none;} button {transition: none;}

View File

@ -184,7 +184,7 @@
background-position: center -130px; background-position: center -130px;
&.active { &.active {
height: 38px; height: 38px;
border-bottom: 4px solid $gab-active-border; border-bottom: 4px solid $gab-default-text-light;
background-position: center 11px; background-position: center 11px;
} }
} }

View File

@ -57,7 +57,7 @@
font-weight: bold; font-weight: bold;
line-height: 24px; line-height: 24px;
color: #fff; color: #fff;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
} }
&:hover & { &:hover & {
@ -70,7 +70,7 @@
display: block; display: block;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: $gab-background-info; color: $gab-secondary-text;
text-decoration: none !important; text-decoration: none !important;
} }
} }
@ -102,7 +102,7 @@
display: block; display: block;
width: 100%; width: 100%;
color: #fff; color: #fff;
body.theme-gabsocial-light & {color: $gab-active-border;} body.theme-gabsocial-light & {color: $gab-default-text-light;}
font-size: 20px; font-size: 20px;
font-weight: 800; font-weight: 800;
line-height: 24px; line-height: 24px;
@ -111,7 +111,7 @@
&__label { &__label {
display: block; display: block;
width: 100%; width: 100%;
color: $gab-background-info; color: $gab-secondary-text;
font-size: 12px; font-size: 12px;
line-height: 14px; line-height: 14px;
} }

View File

@ -48,7 +48,7 @@
&__label { &__label {
font-size: 14px; font-size: 14px;
color: $gab-background-info; color: $gab-secondary-text;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
} }

View File

@ -95,7 +95,7 @@ code {
} }
.hint { .hint {
color: $gab-background-info; color: $gab-secondary-text;
a { a {
color: $highlight-text-color; color: $highlight-text-color;
@ -116,7 +116,7 @@ code {
p.hint { p.hint {
margin-bottom: 15px; margin-bottom: 15px;
color: $gab-background-info; color: $gab-secondary-text;
&.subtle-hint { &.subtle-hint {
text-align: center; text-align: center;

View File

@ -109,7 +109,7 @@ a.table-action-link {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
padding: 0 10px; padding: 0 10px;
color: $gab-background-info; color: $gab-secondary-text;
font-weight: 500; font-weight: 500;
&:hover { &:hover {

View File

@ -4,36 +4,29 @@
////////// GAB SPECIFIC VARIABLE STACK ////////// ////////// GAB SPECIFIC VARIABLE STACK //////////
// NOTE - will eventually create a systematic approach of setting color variables to easily change instance themes
// STATIC COLORS
$gab-brand-default: #21cf7a; $gab-brand-default: #21cf7a;
$gab-alert-red: #cc6643; $gab-alert-red: #cc6643;
$gab-secondary-text: #999;
$gab-text-highlight: $gab-brand-default;
// THEMES // THEME COLORS
// default theme (dark) // default theme (dark)
$gab-background-base: #333; $gab-background-base: #333;
$gab-background-container: #222; $gab-background-container: #222;
$gab-text-highlight: $gab-brand-default;
$gab-bright-highlight: #b2f1d5;
$gab-placeholder-accent: #666; $gab-placeholder-accent: #666;
// NOTE - needs better descriptive names since these are also used for light theme in different ways
$gab-background-info: #999;
$gab-active-border: #6c6c6c;
// light theme // light theme
$gab-background-base-light: #f2f3f6; $gab-background-base-light: #f2f3f6;
$gab-background-container-light: #fff; $gab-background-container-light: #fff;
$gab-text-highlight-light: $gab-brand-default; $gab-default-text-light: #6c6c6c;
// THEME MIXINS // THEME MIXINS
@mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);} @mixin light-theme-shadow() {box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);}
// BREAKPOINT SETS // BREAKPOINT SETS
// navigation breakpoints - by default show all elements and link names along with icons // navigation breakpoints - by default show all elements and link names along with icons
// turns navigation links into icon-only buttons // turns navigation links into icon-only buttons
$nav-breakpoint-1: 850px; $nav-breakpoint-1: 850px;
@ -85,7 +78,7 @@ $ui-highlight-color: $classic-highlight-color !default;
// Variables for texts // Variables for texts
$primary-text-color: $white !default; $primary-text-color: $white !default;
$darker-text-color: $gab-background-info !default; $darker-text-color: $gab-secondary-text !default;
$dark-text-color: $ui-base-lighter-color !default; $dark-text-color: $ui-base-lighter-color !default;
$secondary-text-color: $ui-secondary-color !default; $secondary-text-color: $ui-secondary-color !default;
$highlight-text-color: $ui-highlight-color !default; $highlight-text-color: $ui-highlight-color !default;

View File

@ -16,7 +16,7 @@ if (process.env.VAGRANT) {
module.exports = merge(sharedConfig, { module.exports = merge(sharedConfig, {
mode: 'development', mode: 'development',
cache: true, cache: true,
devtool: 'cheap-module-eval-source-map', devtool: 'source-map',
stats: { stats: {
errorDetails: true, errorDetails: true,

13983
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff