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

Progress

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='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>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-1.0294117647058822s'></animate>
</circle>
@ -21,7 +21,7 @@ const LoadingIcon = ({
</g>
<g transform='translate(72.62741699796952,72.62741699796952)'>
<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>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.8823529411764705s'></animate>
</circle>
@ -29,7 +29,7 @@ const LoadingIcon = ({
</g>
<g transform='translate(50,82)'>
<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>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.7352941176470588s'></animate>
</circle>
@ -37,7 +37,7 @@ const LoadingIcon = ({
</g>
<g transform='translate(27.37258300203048,72.62741699796952)'>
<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>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.588235294117647s'></animate>
</circle>
@ -45,7 +45,7 @@ const LoadingIcon = ({
</g>
<g transform='translate(18,50)'>
<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>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.4411764705882352s'></animate>
</circle>
@ -53,7 +53,7 @@ const LoadingIcon = ({
</g>
<g transform='translate(27.372583002030474,27.37258300203048)'>
<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>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.2941176470588235s'></animate>
</circle>
@ -61,7 +61,7 @@ const LoadingIcon = ({
</g>
<g transform='translate(50,18)'>
<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>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='-0.14705882352941174s'></animate>
</circle>
@ -69,7 +69,7 @@ const LoadingIcon = ({
</g>
<g transform='translate(72.62741699796952,27.372583002030474)'>
<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>
<animate attributeName='fill-opacity' keyTimes='0;1' dur='1.176470588235294s' repeatCount='indefinite' values='1;0' begin='0s'></animate>
</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 isNaN from 'is-nan';
import { decode as decodeBase64 } from './utils/base64';
import cssVars from 'css-vars-ponyfill';
cssVars()
if (!Array.prototype.includes) {
includes.shim();

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

@ -151,7 +151,7 @@ class Account extends ImmutablePureComponent {
)
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(' ')}>
<NavLink

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

@ -234,7 +234,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
displayBlock: 1,
outlineNone: 1,
backgroundColorPrimary: !small,
backgroundSubtle: small,
backgroundColorSubtle: small,
py15: !small,
py10: 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,
backgroundColorBrand: backgroundColor === COLORS.brand,
backgroundTransparent: backgroundColor === COLORS.none,
backgroundSubtle2: backgroundColor === COLORS.tertiary,
backgroundSubtle: backgroundColor === COLORS.secondary,
backgroundColorSubtle2: backgroundColor === COLORS.tertiary,
backgroundColorSubtle: backgroundColor === COLORS.secondary,
backgroundColorDanger: backgroundColor === COLORS.danger,
colorPrimary: !!children && color === COLORS.primary,
@ -164,7 +164,7 @@ export default class Button extends PureComponent {
underline_onHover: underlineOnHover,
backgroundSubtle2Dark_onHover: backgroundColor === COLORS.tertiary || backgroundColor === COLORS.secondary,
backgroundColorSubtle2Dark_onHover: backgroundColor === COLORS.tertiary || backgroundColor === COLORS.secondary,
backgroundColorBlackOpaque_onHover: backgroundColor === COLORS.black,
backgroundColorBrandDark_onHover: backgroundColor === COLORS.brand,
backgroundColorDangerDark_onHover: backgroundColor === COLORS.danger,

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

@ -61,7 +61,7 @@ class Comment extends ImmutablePureComponent {
</NavLink>
<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} />
<StatusContent
status={status}
@ -103,7 +103,7 @@ class CommentButton extends PureComponent {
radiusSmall
backgroundColor='none'
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}
>
<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'
isBadge
color='tertiary'
className={[_s.backgroundSubtle2, _s.py2].join(' ')}
className={[_s.backgroundColorSubtle2, _s.py2].join(' ')}
>
{relationshipLabel}
</Text>

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

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

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

@ -60,13 +60,14 @@ class GroupCollectionItem extends ImmutablePureComponent {
noUnderline: 1,
overflowHidden: 1,
borderColorSecondary: 1,
boxShadowBlock: 1,
radiusSmall: 1,
border1PX: 1,
borderTop1PX: 1,
mb10: 1,
ml5: 1,
mr5: 1,
backgroundColorPrimary: 1,
backgroundSubtle_onHover: isMember,
backgroundColorSubtle_onHover: isMember,
})
return (
@ -86,7 +87,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
{
!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')}
</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'>
{shortNumberFormat(group.get('member_count'))}
&nbsp;

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

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

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

@ -23,7 +23,7 @@ export default class HashtagItem extends ImmutablePureComponent {
return (
<NavLink
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>

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

@ -50,7 +50,7 @@ export default class Image extends PureComponent {
const classes = cx(className, {
default: 1,
objectFitCover: !!src && fit === 'cover',
backgroundSubtle2: 1,
backgroundColorSubtle2: 1,
})
//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,
py5: small,
backgroundTransparent: !readOnly,
backgroundSubtle2: readOnly,
backgroundColorSubtle2: readOnly,
colorSecondary: readOnly,
fontSize15PX: !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(' ')}>
{
!!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

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

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

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

@ -45,7 +45,7 @@ export default class ListItem extends PureComponent {
flexRow: 1,
alignItemsCenter: 1,
width100PC: 1,
backgroundSubtle_onHover: 1,
backgroundColorSubtle_onHover: 1,
borderColorSecondary: !isLast,
borderBottom1PX: !isLast,
})
@ -53,7 +53,7 @@ export default class ListItem extends PureComponent {
const iconClasses = cx({
mr10: !large,
mr15: large,
fillColorBlack: 1,
fillColorPrimary: 1,
})
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
/>
<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>
</div>
</div>

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

@ -91,8 +91,8 @@ export default class MediaItem extends ImmutablePureComponent {
height100PC: 1,
overflowHidden: 1,
border1PX: 1,
borderColorSecondary: !small,
borderColorWhite: small,
borderColorPrimary: !small,
borderColorPrimary: small,
})
return (
@ -137,7 +137,7 @@ export default class MediaItem extends ImmutablePureComponent {
{
!!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'>
{badge}
</Text>

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

@ -89,7 +89,7 @@ class EmbedModal extends ImmutablePureComponent {
{intl.formatMessage(messages.preview)}
</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
className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
frameBorder='0'

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

@ -137,7 +137,7 @@ class ModalBase extends PureComponent {
<Fragment>
<div
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
ref={this.setDialog}

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

@ -84,11 +84,11 @@ class Notification extends ImmutablePureComponent {
}
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.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.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'
to={footerButtonTo}
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'>
{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(' ')}
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 />
</div>
<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,
radiusSmall: 1,
height100PC: 1,
backgroundSubtle2: !leading,
backgroundColorSubtle2: !leading,
backgroundColorBrandLight: leading,
})
@ -107,11 +107,11 @@ class Poll extends ImmutablePureComponent {
py10: showResults,
mb10: 1,
border1PX: !showResults,
borderColorSecondary: !showResults,
fillColorSecondary: !showResults,
circle: !showResults,
cursorPointer: !showResults,
backgroundSubtle_onHover: !showResults,
backgroundSubtle: !showResults && active,
backgroundColorSubtle_onHover: !showResults,
backgroundColorSubtle: !showResults && active,
})
const textContainerClasses = cx({
@ -156,6 +156,7 @@ class Poll extends ImmutablePureComponent {
}
{
/* : todo : */
!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}
>
{({ 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={innerRef} data-popover='true' onKeyDown={this.handleKeyDown} className={containerClasses}>
{children}

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

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

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

@ -131,7 +131,7 @@ class ProfileHeader extends ImmutablePureComponent {
</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={avatarContainerClasses}>

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

@ -26,8 +26,8 @@ export default class ProgressBar extends PureComponent {
const containerClassName = cx({
default: 1,
backgroundPanel: !small,
backgroundSubtle2: small,
backgroundColorLoading: !small,
backgroundColorSubtle2: small,
noUnderline: 1,
circle: 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,
mr5: 1,
noSelect: 1,
backgroundSubtle2Dark_onHover: 1,
backgroundColorSubtle2Dark_onHover: 1,
backgroundColorBrandLight: active,
// py10: !small,
// py5: small,

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

@ -35,7 +35,7 @@ class SensitiveMediaItem extends PureComponent {
onClick={onClick}
color='tertiary'
backgroundColor='none'
className={_s.backgroundSubtle2Dark_onHover}
className={_s.backgroundColorSubtle2Dark_onHover}
>
<Text color='inherit' weight='bold' size='medium'>
{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({
fillColorBlack: 1,
fillColorPrimary: 1,
})
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,
pb5: isChild && status.get('media_attachments').size > 1,
cursorPointer: isChild,
backgroundSubtle_onHover: isChild,
backgroundColorSubtle_onHover: isChild,
})
return (

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

@ -112,6 +112,7 @@ class StatusActionBar extends ImmutablePureComponent {
fontWeightNormal: 1,
noUnderline: 1,
underline_onHover: 1,
backgroundTransparent: 1,
mr10: 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,
alignItemsCenter: 1,
px10: 1,
backgroundSubtle_onHover: !disabled,
backgroundColorSubtle_onHover: !disabled,
})
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 = (
<div className={[_s.default, _s.flexNormal, _s.px10, _s.py10, _s.borderColorSecondary, _s.borderLeft1PX].join(' ')}>
{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)}
</p>
<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 (
<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, _s.pt5625PC].join(' ')}>
{ !!embed && embed}
@ -197,7 +197,7 @@ export default class Card extends ImmutablePureComponent {
{ !embed &&
<div className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.left0, _s.bottom0, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<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}
>
<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(' ')}>
<a
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'
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={[_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
className={_s.statusContent}
dangerouslySetInnerHTML={spoilerContent}

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

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

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

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

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

@ -53,7 +53,7 @@ class TimelineComposeBlock extends ImmutablePureComponent {
return (
<section className={[_s.default, _s.mb15].join(' ')}>
<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}>
<Avatar account={account} size={20} noHover />
</div>

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

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

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

@ -461,7 +461,7 @@ class Video extends PureComponent {
px10: 1,
py10: 1,
backgroundColorBrand: 1,
marginLeftNeg5PX: 1,
mlNeg5PX: 1,
z3: 1,
boxShadow1: 1,
opacity0: !dragging,
@ -479,7 +479,7 @@ class Video extends PureComponent {
const volumeControlClasses = cx({
default: 1,
posAbs: 1,
backgroundColorOpaque: 1,
backgroundColorBlackOpaque: 1,
videoPlayerVolume: 1,
height122PX: 1,
circle: 1,
@ -562,7 +562,7 @@ class Video extends PureComponent {
}}
/>
<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'
style={{
marginLeft: '7px',
@ -579,8 +579,8 @@ class Video extends PureComponent {
ref={this.setSeekRef}
>
<div className={[progressClasses, _s.backgroundPanel, _s.width100PC].join(' ')} />
<div className={[progressClasses, _s.backgroundSubtle].join(' ')} style={{ width: `${buffer}%` }} />
<div className={[progressClasses, _s.backgroundColorLoading, _s.width100PC].join(' ')} />
<div className={[progressClasses, _s.backgroundColorSubtle].join(' ')} style={{ width: `${buffer}%` }} />
<div className={[progressClasses, _s.backgroundColorBrand].join(' ')} style={{ width: `${progress}%` }} />
<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
const btnClasses = cx({
backgroundSubtle_onHover: !active,
backgroundColorSubtle_onHover: !active,
backgroundColorBrandLight: active,
py10: !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,
flexRow: shouldCondense,
radiusSmall: shouldCondense,
backgroundSubtle: shouldCondense,
backgroundColorSubtle: 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,
bottom0: 1,
left0: 1,
my5: 1,
mt5: 1,
mb5: 1,
ml5: 1,
mr5: 1,
displayNone: !active,

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

@ -45,11 +45,11 @@ export default class Layout extends PureComponent {
</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 &&
<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.width645PX].join(' ')}>
<ColumnHeader

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

@ -42,9 +42,9 @@ export default class SearchLayout extends PureComponent {
<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.width645PX].join(' ')}>
<ColumnHeader

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

@ -18,9 +18,9 @@ export default class SettingsLayout extends PureComponent {
<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.width100PC].join(' ')}>
<ColumnHeader

983
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",
"cross-env": "^5.1.4",
"css-loader": "^2.1.1",
"css-vars-ponyfill": "^2.2.1",
"cssnano": "^4.1.10",
"detect-passive-events": "^1.0.2",
"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"
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:
version "2.1.3"
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"