random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
mgabdev 2020-04-25 13:00:51 -04:00
parent 01c8041a6a
commit 763694b5ab
49 changed files with 356 additions and 794 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/gabsocial/assets/loading_icon.js
View File

@ -13,7 +13,7 @@ const LoadingIcon = ({
> >
<g transform='translate(82,50)'> <g transform='translate(82,50)'>
<g transform='rotate(0)'> <g transform='rotate(0)'>
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='1' transform='scale(1.03405 1.03405)'> <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='1' transform='scale(1.03405 1.03405)'>
<animateTransform attributeName='transform' type='scale' begin='-1.0294117647058822s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform> <animateTransform attributeName='transform' type='scale' begin='-1.0294117647058822s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-1.0294117647058822s'></animate> <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-1.0294117647058822s'></animate>
</circle> </circle>
@ -21,7 +21,7 @@ const LoadingIcon = ({
</g> </g>
<g transform='translate(72.62741699796952,72.62741699796952)'> <g transform='translate(72.62741699796952,72.62741699796952)'>
<g transform='rotate(45)'> <g transform='rotate(45)'>
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.875' transform='scale(1.09655 1.09655)'> <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.875' transform='scale(1.09655 1.09655)'>
<animateTransform attributeName='transform' type='scale' begin='-0.8823529411764705s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform> <animateTransform attributeName='transform' type='scale' begin='-0.8823529411764705s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.8823529411764705s'></animate> <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.8823529411764705s'></animate>
</circle> </circle>
@ -29,7 +29,7 @@ const LoadingIcon = ({
</g> </g>
<g transform='translate(50,82)'> <g transform='translate(50,82)'>
<g transform='rotate(90)'> <g transform='rotate(90)'>
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.75' transform='scale(1.15905 1.15905)'> <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.75' transform='scale(1.15905 1.15905)'>
<animateTransform attributeName='transform' type='scale' begin='-0.7352941176470588s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform> <animateTransform attributeName='transform' type='scale' begin='-0.7352941176470588s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.7352941176470588s'></animate> <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.7352941176470588s'></animate>
</circle> </circle>
@ -37,7 +37,7 @@ const LoadingIcon = ({
</g> </g>
<g transform='translate(27.37258300203048,72.62741699796952)'> <g transform='translate(27.37258300203048,72.62741699796952)'>
<g transform='rotate(135)'> <g transform='rotate(135)'>
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.625' transform='scale(1.22155 1.22155)'> <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.625' transform='scale(1.22155 1.22155)'>
<animateTransform attributeName='transform' type='scale' begin='-0.588235294117647s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform> <animateTransform attributeName='transform' type='scale' begin='-0.588235294117647s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.588235294117647s'></animate> <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.588235294117647s'></animate>
</circle> </circle>
@ -45,7 +45,7 @@ const LoadingIcon = ({
</g> </g>
<g transform='translate(18,50)'> <g transform='translate(18,50)'>
<g transform='rotate(180)'> <g transform='rotate(180)'>
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.5' transform='scale(1.28405 1.28405)'> <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.5' transform='scale(1.28405 1.28405)'>
<animateTransform attributeName='transform' type='scale' begin='-0.4411764705882352s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform> <animateTransform attributeName='transform' type='scale' begin='-0.4411764705882352s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.4411764705882352s'></animate> <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.4411764705882352s'></animate>
</circle> </circle>
@ -53,7 +53,7 @@ const LoadingIcon = ({
</g> </g>
<g transform='translate(27.372583002030474,27.37258300203048)'> <g transform='translate(27.372583002030474,27.37258300203048)'>
<g transform='rotate(225)'> <g transform='rotate(225)'>
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.375' transform='scale(1.34655 1.34655)'> <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.375' transform='scale(1.34655 1.34655)'>
<animateTransform attributeName='transform' type='scale' begin='-0.2941176470588235s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform> <animateTransform attributeName='transform' type='scale' begin='-0.2941176470588235s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.2941176470588235s'></animate> <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.2941176470588235s'></animate>
</circle> </circle>
@ -61,7 +61,7 @@ const LoadingIcon = ({
</g> </g>
<g transform='translate(50,18)'> <g transform='translate(50,18)'>
<g transform='rotate(270)'> <g transform='rotate(270)'>
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.25' transform='scale(1.40905 1.40905)'> <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.25' transform='scale(1.40905 1.40905)'>
<animateTransform attributeName='transform' type='scale' begin='-0.14705882352941174s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform> <animateTransform attributeName='transform' type='scale' begin='-0.14705882352941174s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.14705882352941174s'></animate> <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.14705882352941174s'></animate>
</circle> </circle>
@ -69,7 +69,7 @@ const LoadingIcon = ({
</g> </g>
<g transform='translate(72.62741699796952,27.372583002030474)'> <g transform='translate(72.62741699796952,27.372583002030474)'>
<g transform='rotate(315)'> <g transform='rotate(315)'>
<circle cx='0' cy='0' r='6' fill='#30ce7d' fillOpacity='0.125' transform='scale(1.47155 1.47155)'> <circle cx='0' cy='0' r='6' className={_s.fillColorSecondary} fillOpacity='0.125' transform='scale(1.47155 1.47155)'>
<animateTransform attributeName='transform' type='scale' begin='0s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform> <animateTransform attributeName='transform' type='scale' begin='0s' values='1.5 1.5;1 1' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite'></animateTransform>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='0s'></animate> <animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='0s'></animate>
</circle> </circle>

3
app/javascript/gabsocial/base_polyfills.js
View File

@ -8,6 +8,9 @@ import assign from 'object-assign';
import values from 'object.values'; import values from 'object.values';
import isNaN from 'is-nan'; import isNaN from 'is-nan';
import { decode as decodeBase64 } from './utils/base64'; import { decode as decodeBase64 } from './utils/base64';
import cssVars from 'css-vars-ponyfill';
cssVars()
if (!Array.prototype.includes) { if (!Array.prototype.includes) {
includes.shim(); includes.shim();

2
app/javascript/gabsocial/components/account.js
View File

@ -151,7 +151,7 @@ class Account extends ImmutablePureComponent {
) )
return ( return (
<div className={[_s.default, _s.px15, _s.py5, _s.backgroundSubtle_onHover, _s.mb5].join(' ')}> <div className={[_s.default, _s.px15, _s.py5, _s.backgroundColorSubtle_onHover, _s.mb5].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<NavLink <NavLink

2
app/javascript/gabsocial/components/autosuggest_textbox.js
View File

@ -234,7 +234,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
displayBlock: 1, displayBlock: 1,
outlineNone: 1, outlineNone: 1,
backgroundColorPrimary: !small, backgroundColorPrimary: !small,
backgroundSubtle: small, backgroundColorSubtle: small,
py15: !small, py15: !small,
py10: small, py10: small,
fontSize16PX: !small, fontSize16PX: !small,

6
app/javascript/gabsocial/components/button.js
View File

@ -140,8 +140,8 @@ export default class Button extends PureComponent {
backgroundColorBlack: backgroundColor === COLORS.black, backgroundColorBlack: backgroundColor === COLORS.black,
backgroundColorBrand: backgroundColor === COLORS.brand, backgroundColorBrand: backgroundColor === COLORS.brand,
backgroundTransparent: backgroundColor === COLORS.none, backgroundTransparent: backgroundColor === COLORS.none,
backgroundSubtle2: backgroundColor === COLORS.tertiary, backgroundColorSubtle2: backgroundColor === COLORS.tertiary,
backgroundSubtle: backgroundColor === COLORS.secondary, backgroundColorSubtle: backgroundColor === COLORS.secondary,
backgroundColorDanger: backgroundColor === COLORS.danger, backgroundColorDanger: backgroundColor === COLORS.danger,
colorPrimary: !!children && color === COLORS.primary, colorPrimary: !!children && color === COLORS.primary,
@ -164,7 +164,7 @@ export default class Button extends PureComponent {
underline_onHover: underlineOnHover, underline_onHover: underlineOnHover,
backgroundSubtle2Dark_onHover: backgroundColor === COLORS.tertiary || backgroundColor === COLORS.secondary, backgroundColorSubtle2Dark_onHover: backgroundColor === COLORS.tertiary || backgroundColor === COLORS.secondary,
backgroundColorBlackOpaque_onHover: backgroundColor === COLORS.black, backgroundColorBlackOpaque_onHover: backgroundColor === COLORS.black,
backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand, backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
backgroundColorDangerDark_onHover: backgroundColor === COLORS.danger, backgroundColorDangerDark_onHover: backgroundColor === COLORS.danger,

4
app/javascript/gabsocial/components/comment.js
View File

@ -61,7 +61,7 @@ class Comment extends ImmutablePureComponent {
</NavLink> </NavLink>
<div className={[_s.default, _s.flexNormal].join(' ')}> <div className={[_s.default, _s.flexNormal].join(' ')}>
<div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.backgroundSubtle].join(' ')}> <div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.backgroundColorSubtle].join(' ')}>
<CommentHeader status={status} /> <CommentHeader status={status} />
<StatusContent <StatusContent
status={status} status={status}
@ -103,7 +103,7 @@ class CommentButton extends PureComponent {
radiusSmall radiusSmall
backgroundColor='none' backgroundColor='none'
color='tertiary' color='tertiary'
className={[_s.px5, _s.backgroundSubtle_onHover, _s.py2, _s.mr5].join(' ')} className={[_s.px5, _s.backgroundColorSubtle_onHover, _s.py2, _s.mr5].join(' ')}
onClick={onClick} onClick={onClick}
> >
<Text size='extraSmall' color='inherit' weight='bold'> <Text size='extraSmall' color='inherit' weight='bold'>

2
app/javascript/gabsocial/components/display_name.js
View File

@ -180,7 +180,7 @@ class DisplayName extends ImmutablePureComponent {
size='extraSmall' size='extraSmall'
isBadge isBadge
color='tertiary' color='tertiary'
className={[_s.backgroundSubtle2, _s.py2].join(' ')} className={[_s.backgroundColorSubtle2, _s.py2].join(' ')}
> >
{relationshipLabel} {relationshipLabel}
</Text> </Text>

2
app/javascript/gabsocial/components/divider.js
View File

@ -21,7 +21,7 @@ export default class Divider extends PureComponent {
const classes = cx({ const classes = cx({
default: 1, default: 1,
borderBottom1PX: !isInvisible, borderBottom1PX: !isInvisible,
borderColorSecondary2: !isInvisible, borderColorSecondary: !isInvisible,
width100PC: 1, width100PC: 1,
mb15: !isSmall, mb15: !isSmall,
my10: isSmall || isInvisible, my10: isSmall || isInvisible,

9
app/javascript/gabsocial/components/group_collection_item.js
View File

@ -60,13 +60,14 @@ class GroupCollectionItem extends ImmutablePureComponent {
noUnderline: 1, noUnderline: 1,
overflowHidden: 1, overflowHidden: 1,
borderColorSecondary: 1, borderColorSecondary: 1,
boxShadowBlock: 1,
radiusSmall: 1, radiusSmall: 1,
border1PX: 1, borderTop1PX: 1,
mb10: 1, mb10: 1,
ml5: 1, ml5: 1,
mr5: 1, mr5: 1,
backgroundColorPrimary: 1, backgroundColorPrimary: 1,
backgroundSubtle_onHover: isMember, backgroundColorSubtle_onHover: isMember,
}) })
return ( return (
@ -86,7 +87,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
{ {
!coverSrc && (isMember || isAdmin) && !coverSrc && (isMember || isAdmin) &&
<div className={[_s.default, _s.height40PX, _s.backgroundSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} /> <div className={[_s.default, _s.height40PX, _s.backgroundColorSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
} }
{ {
@ -122,7 +123,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
{group.get('title')} {group.get('title')}
</Text> </Text>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.my5].join(' ')}> <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.mt5, _s.mb5].join(' ')}>
<Text color='secondary' size='small'> <Text color='secondary' size='small'>
{shortNumberFormat(group.get('member_count'))} {shortNumberFormat(group.get('member_count'))}
&nbsp; &nbsp;

2
app/javascript/gabsocial/components/group_list_item.js
View File

@ -57,7 +57,7 @@ class GroupListItem extends ImmutablePureComponent {
default: 1, default: 1,
noUnderline: 1, noUnderline: 1,
overflowHidden: 1, overflowHidden: 1,
backgroundSubtle_onHover: 1, backgroundColorSubtle_onHover: 1,
borderColorSecondary: 1, borderColorSecondary: 1,
radiusSmall: !slim, radiusSmall: !slim,
mt5: !slim, mt5: !slim,

2
app/javascript/gabsocial/components/hashtag_item.js
View File

@ -23,7 +23,7 @@ export default class HashtagItem extends ImmutablePureComponent {
return ( return (
<NavLink <NavLink
to={`/tags/${hashtag.get('name')}`} to={`/tags/${hashtag.get('name')}`}
className={[_s.default, _s.noUnderline, _s.backgroundSubtle_onHover, _s.px15, _s.py5].join(' ')} className={[_s.default, _s.noUnderline, _s.backgroundColorSubtle_onHover, _s.px15, _s.py5].join(' ')}
> >
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<div> <div>

2
app/javascript/gabsocial/components/image.js
View File

@ -50,7 +50,7 @@ export default class Image extends PureComponent {
const classes = cx(className, { const classes = cx(className, {
default: 1, default: 1,
objectFitCover: !!src && fit === 'cover', objectFitCover: !!src && fit === 'cover',
backgroundSubtle2: 1, backgroundColorSubtle2: 1,
}) })
//If error and not our own image //If error and not our own image

4
app/javascript/gabsocial/components/input.js
View File

@ -54,7 +54,7 @@ export default class Input extends PureComponent {
py10: !small, py10: !small,
py5: small, py5: small,
backgroundTransparent: !readOnly, backgroundTransparent: !readOnly,
backgroundSubtle2: readOnly, backgroundColorSubtle2: readOnly,
colorSecondary: readOnly, colorSecondary: readOnly,
fontSize15PX: !small, fontSize15PX: !small,
fontSize13PX: small, fontSize13PX: small,
@ -91,7 +91,7 @@ export default class Input extends PureComponent {
<div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}> <div className={[_s.default, _s.backgroundColorPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
{ {
!!prependIcon && !!prependIcon &&
<Icon id={prependIcon} size='16px' className={[_s.ml15, _s.mr5].join(' ')} /> <Icon id={prependIcon} size='16px' className={[_s.fillColorPrimary, _s.ml15, _s.mr5].join(' ')} />
} }
<input <input

2
app/javascript/gabsocial/components/link_footer.js
View File

@ -112,7 +112,7 @@ class LinkFooter extends PureComponent {
href={linkFooterItem.to} href={linkFooterItem.to}
data-method={linkFooterItem.logout ? 'delete' : null} data-method={linkFooterItem.logout ? 'delete' : null}
onClick={linkFooterItem.onClick || null} onClick={linkFooterItem.onClick || null}
className={[_s.my5, _s.pr15].join(' ')} className={[_s.mt5, _s.mb5, _s.pr15].join(' ')}
> >
<Text size='small' color='tertiary'> <Text size='small' color='tertiary'>
{linkFooterItem.text} {linkFooterItem.text}

4
app/javascript/gabsocial/components/list_item.js
View File

@ -45,7 +45,7 @@ export default class ListItem extends PureComponent {
flexRow: 1, flexRow: 1,
alignItemsCenter: 1, alignItemsCenter: 1,
width100PC: 1, width100PC: 1,
backgroundSubtle_onHover: 1, backgroundColorSubtle_onHover: 1,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,
borderBottom1PX: !isLast, borderBottom1PX: !isLast,
}) })
@ -53,7 +53,7 @@ export default class ListItem extends PureComponent {
const iconClasses = cx({ const iconClasses = cx({
mr10: !large, mr10: !large,
mr15: large, mr15: large,
fillColorBlack: 1, fillColorPrimary: 1,
}) })
const textSize = small ? 'small' : large ? 'medium' : 'normal' const textSize = small ? 'small' : large ? 'medium' : 'normal'

2
app/javascript/gabsocial/components/media_gallery.js
View File

@ -216,7 +216,7 @@ class Item extends ImmutablePureComponent {
playsInline playsInline
/> />
<div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}> <div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.backgroundColorBlackOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}>
<Text size='extraSmall' color='white' weight='medium'>GIF</Text> <Text size='extraSmall' color='white' weight='medium'>GIF</Text>
</div> </div>
</div> </div>

6
app/javascript/gabsocial/components/media_item.js
View File

@ -91,8 +91,8 @@ export default class MediaItem extends ImmutablePureComponent {
height100PC: 1, height100PC: 1,
overflowHidden: 1, overflowHidden: 1,
border1PX: 1, border1PX: 1,
borderColorSecondary: !small, borderColorPrimary: !small,
borderColorWhite: small, borderColorPrimary: small,
}) })
return ( return (
@ -137,7 +137,7 @@ export default class MediaItem extends ImmutablePureComponent {
{ {
!!badge && !!badge &&
<div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.backgroundColorOpaque, _s.px5, _s.py5, _s.mr5, _s.my5, _s.bottom0, _s.right0].join(' ')}> <div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.backgroundColorBlackOpaque, _s.px5, _s.py5, _s.mr5, _s.mt5, _s.mb5, _s.bottom0, _s.right0].join(' ')}>
<Text size='extraSmall' color='white'> <Text size='extraSmall' color='white'>
{badge} {badge}
</Text> </Text>

2
app/javascript/gabsocial/components/modal/embed_modal.js
View File

@ -89,7 +89,7 @@ class EmbedModal extends ImmutablePureComponent {
{intl.formatMessage(messages.preview)} {intl.formatMessage(messages.preview)}
</Text> </Text>
<div className={[_s.default, _s.width100PC, _s.backgroundSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s.default, _s.width100PC, _s.backgroundColorSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<iframe <iframe
className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')} className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
frameBorder='0' frameBorder='0'

2
app/javascript/gabsocial/components/modal/modal_base.js
View File

@ -137,7 +137,7 @@ class ModalBase extends PureComponent {
<Fragment> <Fragment>
<div <div
role='presentation' role='presentation'
className={[_s.default, _s.backgroundColorOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} className={[_s.default, _s.backgroundColorBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
/> />
<div <div
ref={this.setDialog} ref={this.setDialog}

4
app/javascript/gabsocial/components/notification.js
View File

@ -84,11 +84,11 @@ class Notification extends ImmutablePureComponent {
} }
return ( return (
<div className={[_s.default, _s.px10, _s.cursorPointer, _s.backgroundSubtle_onHover].join(' ')}> <div className={[_s.default, _s.px10, _s.cursorPointer, _s.backgroundColorSubtle_onHover].join(' ')}>
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}> <div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}> <div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
<Icon id={icon} size='20px' className={_s.mt5} /> <Icon id={icon} size='20px' className={[_s.fillColorPrimary, _s.mt5].join(' ')} />
<div className={[_s.default, _s.ml15, _s.flexNormal].join(' ')}> <div className={[_s.default, _s.ml15, _s.flexNormal].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s.default, _s.flexRow].join(' ')}>

2
app/javascript/gabsocial/components/panel/panel_layout.js
View File

@ -87,7 +87,7 @@ export default class PanelLayout extends PureComponent {
backgroundColor='none' backgroundColor='none'
to={footerButtonTo} to={footerButtonTo}
onClick={footerButtonAction} onClick={footerButtonAction}
className={[_s.px15, _s.py15, _s.backgroundSubtle_onHover].join(' ')} className={[_s.px15, _s.py15, _s.backgroundColorSubtle_onHover].join(' ')}
> >
<Text color='brand' size='medium'> <Text color='brand' size='medium'>
{footerButtonTitle} {footerButtonTitle}

2
app/javascript/gabsocial/components/panel/user_panel.js
View File

@ -106,7 +106,7 @@ class UserPanel extends ImmutablePureComponent {
className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')} className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
to={`/${acct}`} to={`/${acct}`}
> >
<div className={[_s.default, _s.mtNeg32PX, _s.circle, _s.borderColorWhite, _s.border6PX].join(' ')}> <div className={[_s.default, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}>
<Avatar account={account} size={62} noHover /> <Avatar account={account} size={62} noHover />
</div> </div>
<div className={[_s.default, _s.ml15].join(' ')}> <div className={[_s.default, _s.ml15].join(' ')}>

9
app/javascript/gabsocial/components/poll.js
View File

@ -92,7 +92,7 @@ class Poll extends ImmutablePureComponent {
left0: 1, left0: 1,
radiusSmall: 1, radiusSmall: 1,
height100PC: 1, height100PC: 1,
backgroundSubtle2: !leading, backgroundColorSubtle2: !leading,
backgroundColorBrandLight: leading, backgroundColorBrandLight: leading,
}) })
@ -107,11 +107,11 @@ class Poll extends ImmutablePureComponent {
py10: showResults, py10: showResults,
mb10: 1, mb10: 1,
border1PX: !showResults, border1PX: !showResults,
borderColorSecondary: !showResults, fillColorSecondary: !showResults,
circle: !showResults, circle: !showResults,
cursorPointer: !showResults, cursorPointer: !showResults,
backgroundSubtle_onHover: !showResults, backgroundColorSubtle_onHover: !showResults,
backgroundSubtle: !showResults && active, backgroundColorSubtle: !showResults && active,
}) })
const textContainerClasses = cx({ const textContainerClasses = cx({
@ -156,6 +156,7 @@ class Poll extends ImmutablePureComponent {
} }
{ {
/* : todo : */
!showResults && <span className={inputClasses} /> !showResults && <span className={inputClasses} />
} }

2
app/javascript/gabsocial/components/popover/popover_base.js
View File

@ -134,7 +134,7 @@ class PopoverBase extends ImmutablePureComponent {
referenceElement={targetRef} referenceElement={targetRef}
> >
{({ ref, style, placement, arrowProps }) => ( {({ ref, style, placement, arrowProps }) => (
<div ref={ref} style={style} data-placement={placement} className={[_s.my5, _s.boxShadow2].join(' ')}> <div ref={ref} style={style} data-placement={placement} className={[_s.mt5, _s.mb5, _s.boxShadowPopover].join(' ')}>
<div ref={arrowProps.ref} style={arrowProps.style} /> <div ref={arrowProps.ref} style={arrowProps.style} />
<div ref={innerRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}> <div ref={innerRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
{children} {children}

2
app/javascript/gabsocial/components/popover/status_visibility_popover.js
View File

@ -90,7 +90,7 @@ class StatusVisibilityDropdown extends PureComponent {
cursorPointer: 1, cursorPointer: 1,
borderBottom1PX: !isLast, borderBottom1PX: !isLast,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,
backgroundSubtle_onHover: !isActive, backgroundColorSubtle_onHover: !isActive,
backgroundColorBrand: isActive, backgroundColorBrand: isActive,
}) })

2
app/javascript/gabsocial/components/profile_header.js
View File

@ -131,7 +131,7 @@ class ProfileHeader extends ImmutablePureComponent {
</div> </div>
} }
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary, _s.width100PC].join(' ')}> <div className={[_s.default, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}> <div className={[_s.default, _s.flexRow, _s.pr15, _s.pl25, _s.mb5].join(' ')}>
<div className={avatarContainerClasses}> <div className={avatarContainerClasses}>

4
app/javascript/gabsocial/components/progress_bar.js
View File

@ -26,8 +26,8 @@ export default class ProgressBar extends PureComponent {
const containerClassName = cx({ const containerClassName = cx({
default: 1, default: 1,
backgroundPanel: !small, backgroundColorLoading: !small,
backgroundSubtle2: small, backgroundColorSubtle2: small,
noUnderline: 1, noUnderline: 1,
circle: 1, circle: 1,
overflowHidden: 1, overflowHidden: 1,

2
app/javascript/gabsocial/components/rich_text_editor_bar.js
View File

@ -179,7 +179,7 @@ class StyleButton extends PureComponent {
px10: 1, px10: 1,
mr5: 1, mr5: 1,
noSelect: 1, noSelect: 1,
backgroundSubtle2Dark_onHover: 1, backgroundColorSubtle2Dark_onHover: 1,
backgroundColorBrandLight: active, backgroundColorBrandLight: active,
// py10: !small, // py10: !small,
// py5: small, // py5: small,

2
app/javascript/gabsocial/components/sensitive_media_item.js
View File

@ -35,7 +35,7 @@ class SensitiveMediaItem extends PureComponent {
onClick={onClick} onClick={onClick}
color='tertiary' color='tertiary'
backgroundColor='none' backgroundColor='none'
className={_s.backgroundSubtle2Dark_onHover} className={_s.backgroundColorSubtle2Dark_onHover}
> >
<Text color='inherit' weight='bold' size='medium'> <Text color='inherit' weight='bold' size='medium'>
{intl.formatMessage(messages.view)} {intl.formatMessage(messages.view)}

2
app/javascript/gabsocial/components/sidebar_section_item.js
View File

@ -83,7 +83,7 @@ export default class SidebarSectionItem extends PureComponent {
}) })
const iconClasses = cx({ const iconClasses = cx({
fillColorBlack: 1, fillColorPrimary: 1,
}) })
const countClasses = cx({ const countClasses = cx({

2
app/javascript/gabsocial/components/status.js
View File

@ -465,7 +465,7 @@ class Status extends ImmutablePureComponent {
pb10: isChild && status.get('media_attachments').size === 0, pb10: isChild && status.get('media_attachments').size === 0,
pb5: isChild && status.get('media_attachments').size > 1, pb5: isChild && status.get('media_attachments').size > 1,
cursorPointer: isChild, cursorPointer: isChild,
backgroundSubtle_onHover: isChild, backgroundColorSubtle_onHover: isChild,
}) })
return ( return (

1
app/javascript/gabsocial/components/status_action_bar.js
View File

@ -112,6 +112,7 @@ class StatusActionBar extends ImmutablePureComponent {
fontWeightNormal: 1, fontWeightNormal: 1,
noUnderline: 1, noUnderline: 1,
underline_onHover: 1, underline_onHover: 1,
backgroundTransparent: 1,
mr10: 1, mr10: 1,
py5: 1, py5: 1,
}) })

2
app/javascript/gabsocial/components/status_action_bar_item.js
View File

@ -34,7 +34,7 @@ export default class StatusActionBarItem extends PureComponent {
justifyContentCenter: 1, justifyContentCenter: 1,
alignItemsCenter: 1, alignItemsCenter: 1,
px10: 1, px10: 1,
backgroundSubtle_onHover: !disabled, backgroundColorSubtle_onHover: !disabled,
}) })
const color = active ? 'brand' : 'secondary' const color = active ? 'brand' : 'secondary'

8
app/javascript/gabsocial/components/status_card.js
View File

@ -159,7 +159,7 @@ export default class Card extends ImmutablePureComponent {
const description = ( const description = (
<div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}> <div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
{title} {title}
<p className={[_s.default, _s.displayFlex, _s.text, _s.my5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}> <p className={[_s.default, _s.displayFlex, _s.text, _s.mt5, _s.mb5, _s.overflowWrapBreakWord, _s.colorSecondary, _s.fontSize13PX, _s.fontWeightNormal].join(' ')}>
{trim(card.get('description') || '', maxDescription)} {trim(card.get('description') || '', maxDescription)}
</p> </p>
<span className={[_s.default, _s.mtAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}> <span className={[_s.default, _s.mtAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fontSize13PX].join(' ')}>
@ -189,7 +189,7 @@ export default class Card extends ImmutablePureComponent {
return ( return (
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}> <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
<div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')}> <div className={[_s.default, _s.overflowHidden, _s.width100PC, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s.default, _s.width100PC].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}> <div className={[_s.default, _s.width100PC, _s.pt5625PC].join(' ')}>
{ !!embed && embed} { !!embed && embed}
@ -197,7 +197,7 @@ export default class Card extends ImmutablePureComponent {
{ !embed && { !embed &&
<div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<button <button
className={[_s.default, _s.cursorPointer, _s.backgroundColorOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')} className={[_s.default, _s.cursorPointer, _s.backgroundColorBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
onClick={this.handleEmbedClick} onClick={this.handleEmbedClick}
> >
<Icon id={iconVariant} size='22px' className={[_s.fillColorWhite].join(' ')} /> <Icon id={iconVariant} size='22px' className={[_s.fillColorWhite].join(' ')} />
@ -228,7 +228,7 @@ export default class Card extends ImmutablePureComponent {
<div className={[_s.default, _s.width100PC, _s.px10].join(' ')}> <div className={[_s.default, _s.width100PC, _s.px10].join(' ')}>
<a <a
href={card.get('url')} href={card.get('url')}
className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.backgroundSubtle_onHover, _s.borderColorSecondary2, _s.border1PX, _s.radiusSmall].join(' ')} className={[_s.default, _s.cursorPointer, _s.flexRow, _s.overflowHidden, _s.noUnderline, _s.width100PC, _s.backgroundColorSubtle_onHover, _s.borderColorSecondary, _s.border1PX, _s.radiusSmall].join(' ')}
rel='noopener noreferrer' rel='noopener noreferrer'
ref={this.setRef} ref={this.setRef}
> >

2
app/javascript/gabsocial/components/status_content.js
View File

@ -254,7 +254,7 @@ class StatusContent extends ImmutablePureComponent {
<div className={spoilerContainerClasses}> <div className={spoilerContainerClasses}>
<div className={[_s.default, _s.flexRow, _s.mr5].join(' ')}> <div className={[_s.default, _s.flexRow, _s.mr5].join(' ')}>
<Icon id='warning' size='14px' className={[_s.fillColorBlack, _s.mt2, _s.mr5].join(' ')}/> <Icon id='warning' size='14px' className={[_s.fillColorPrimary, _s.mt2, _s.mr5].join(' ')}/>
<div <div
className={_s.statusContent} className={_s.statusContent}
dangerouslySetInnerHTML={spoilerContent} dangerouslySetInnerHTML={spoilerContent}

2
app/javascript/gabsocial/components/switch.js
View File

@ -46,7 +46,7 @@ export default class Switch extends PureComponent {
width20PX: 1, width20PX: 1,
circle: 1, circle: 1,
posAbs: 1, posAbs: 1,
backgroundSubtle2: !checked, backgroundColorSubtle2: !checked,
backgroundColorPrimary: checked, backgroundColorPrimary: checked,
left0: !checked, left0: !checked,
right0: checked, right0: checked,

2
app/javascript/gabsocial/components/tab_bar_item.js
View File

@ -89,7 +89,7 @@ class TabBarItem extends PureComponent {
radiusSmall: 1, radiusSmall: 1,
px10: !isLarge, px10: !isLarge,
px15: isLarge, px15: isLarge,
backgroundSubtle2Dark_onHover: !active, backgroundColorSubtle2Dark_onHover: !active,
}) })
const textOptions = { const textOptions = {

2
app/javascript/gabsocial/components/timeline_compose_block.js
View File

@ -53,7 +53,7 @@ class TimelineComposeBlock extends ImmutablePureComponent {
return ( return (
<section className={[_s.default, _s.mb15].join(' ')}> <section className={[_s.default, _s.mb15].join(' ')}>
<Block> <Block>
<div className={[_s.default, _s.backgroundSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.alignItemsCenter, _s.flexRow].join(' ')}> <div className={[_s.default, _s.backgroundColorSubtle, _s.borderTop1PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15, _s.py2, _s.alignItemsCenter, _s.flexRow].join(' ')}>
<div className={_s.mr10}> <div className={_s.mr10}>
<Avatar account={account} size={20} noHover /> <Avatar account={account} size={20} noHover />
</div> </div>

2
app/javascript/gabsocial/components/trends_item.js
View File

@ -62,7 +62,7 @@ export default class TrendingItem extends PureComponent {
pb5: 1, pb5: 1,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,
borderBottom1PX: !isLast, borderBottom1PX: !isLast,
backgroundSubtle_onHover: 1, backgroundColorSubtle_onHover: 1,
}) })
const subtitleClasses = cx({ const subtitleClasses = cx({

10
app/javascript/gabsocial/components/video.js
View File

@ -461,7 +461,7 @@ class Video extends PureComponent {
px10: 1, px10: 1,
py10: 1, py10: 1,
backgroundColorBrand: 1, backgroundColorBrand: 1,
marginLeftNeg5PX: 1, mlNeg5PX: 1,
z3: 1, z3: 1,
boxShadow1: 1, boxShadow1: 1,
opacity0: !dragging, opacity0: !dragging,
@ -479,7 +479,7 @@ class Video extends PureComponent {
const volumeControlClasses = cx({ const volumeControlClasses = cx({
default: 1, default: 1,
posAbs: 1, posAbs: 1,
backgroundColorOpaque: 1, backgroundColorBlackOpaque: 1,
videoPlayerVolume: 1, videoPlayerVolume: 1,
height122PX: 1, height122PX: 1,
circle: 1, circle: 1,
@ -562,7 +562,7 @@ class Video extends PureComponent {
}} }}
/> />
<span <span
className={[_s.default, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.marginBottomNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')} className={[_s.default, _s.cursorPointer, _s.posAbs, _s.circle, _s.px5, _s.boxShadow1, _s.mbNeg5PX, _s.py5, _s.backgroundColorPrimary, _s.z3].join(' ')}
tabIndex='0' tabIndex='0'
style={{ style={{
marginLeft: '7px', marginLeft: '7px',
@ -579,8 +579,8 @@ class Video extends PureComponent {
ref={this.setSeekRef} ref={this.setSeekRef}
> >
<div className={[progressClasses, _s.backgroundPanel, _s.width100PC].join(' ')} /> <div className={[progressClasses, _s.backgroundColorLoading, _s.width100PC].join(' ')} />
<div className={[progressClasses, _s.backgroundSubtle].join(' ')} style={{ width: `${buffer}%` }} /> <div className={[progressClasses, _s.backgroundColorSubtle].join(' ')} style={{ width: `${buffer}%` }} />
<div className={[progressClasses, _s.backgroundColorBrand].join(' ')} style={{ width: `${progress}%` }} /> <div className={[progressClasses, _s.backgroundColorBrand].join(' ')} style={{ width: `${progress}%` }} />
<span <span

2
app/javascript/gabsocial/features/compose/components/compose_extra_button.js
View File

@ -27,7 +27,7 @@ export default class ComposeExtraButton extends PureComponent {
} = this.props } = this.props
const btnClasses = cx({ const btnClasses = cx({
backgroundSubtle_onHover: !active, backgroundColorSubtle_onHover: !active,
backgroundColorBrandLight: active, backgroundColorBrandLight: active,
py10: !small, py10: !small,
px10: !small, px10: !small,

2
app/javascript/gabsocial/features/compose/components/compose_form.js
View File

@ -257,7 +257,7 @@ class ComposeForm extends ImmutablePureComponent {
alignItemsEnd: shouldCondense, alignItemsEnd: shouldCondense,
flexRow: shouldCondense, flexRow: shouldCondense,
radiusSmall: shouldCondense, radiusSmall: shouldCondense,
backgroundSubtle: shouldCondense, backgroundColorSubtle: shouldCondense,
px5: shouldCondense, px5: shouldCondense,
}) })

3
app/javascript/gabsocial/features/compose/components/media_upload_item.js
View File

@ -121,7 +121,8 @@ class Upload extends ImmutablePureComponent {
right0: 1, right0: 1,
bottom0: 1, bottom0: 1,
left0: 1, left0: 1,
my5: 1, mt5: 1,
mb5: 1,
ml5: 1, ml5: 1,
mr5: 1, mr5: 1,
displayNone: !active, displayNone: !active,

4
app/javascript/gabsocial/layouts/layout.js
View File

@ -45,11 +45,11 @@ export default class Layout extends PureComponent {
</Responsive> </Responsive>
} }
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}> <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
{ {
!noHeader && !noHeader &&
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}> <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}> <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}> <div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader <ColumnHeader

4
app/javascript/gabsocial/layouts/search_layout.js
View File

@ -42,9 +42,9 @@ export default class SearchLayout extends PureComponent {
<Sidebar /> <Sidebar />
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}> <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}> <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}> <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width645PX].join(' ')}> <div className={[_s.default, _s.width645PX].join(' ')}>
<ColumnHeader <ColumnHeader

4
app/javascript/gabsocial/layouts/settings_layout.js
View File

@ -18,9 +18,9 @@ export default class SettingsLayout extends PureComponent {
<Sidebar /> <Sidebar />
<main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary2, _s.borderLeft1PX].join(' ')}> <main role='main' className={[_s.default, _s.flexShrink1, _s.flexGrow1, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary2, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}> <div className={[_s.default, _s.height53PX, _s.borderBottom1PX, _s.borderColorSecondary, _s.backgroundColorSecondary3, _s.z3, _s.top0, _s.posFixed].join(' ')}>
<div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}> <div className={[_s.default, _s.height53PX, _s.pl15, _s.width1015PX, _s.flexRow, _s.justifyContentSpaceBetween].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s.default, _s.width100PC].join(' ')}>
<ColumnHeader <ColumnHeader

985
app/javascript/styles/global.css
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -86,6 +86,7 @@
"cron": "^1.8.2", "cron": "^1.8.2",
"cross-env": "^5.1.4", "cross-env": "^5.1.4",
"css-loader": "^2.1.1", "css-loader": "^2.1.1",
"css-vars-ponyfill": "^2.2.1",
"cssnano": "^4.1.10", "cssnano": "^4.1.10",
"detect-passive-events": "^1.0.2", "detect-passive-events": "^1.0.2",
"dotenv": "^8.0.0", "dotenv": "^8.0.0",

5
yarn.lock
View File

@ -2792,6 +2792,11 @@ css-tree@1.0.0-alpha.39:
mdn-data "2.0.6" mdn-data "2.0.6"
source-map "^0.6.1" source-map "^0.6.1"
css-vars-ponyfill@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/css-vars-ponyfill/-/css-vars-ponyfill-2.2.1.tgz#c97dcfb3efc93b479661af58afa04cb0ef5b97e6"
integrity sha512-bFdKEQbCtwoDl4/iPaqjGDMZRgnVn6k7c6XUlOrW+OzMIweWV6b5YbajR99dUiAsB1WpfbGGiiE9T1cnSh2pgA==
css-what@2.1: css-what@2.1:
version "2.1.3" version "2.1.3"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"