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

Updated all long style names to be more compact

Browse Source 
• Updated:
- all long style names to be more compact
This commit is contained in:
mgabdev 2020-08-18 15:43:06 -05:00
parent e5f4e12b7b
commit d5ad398d53
177 changed files with 1052 additions and 1052 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app/javascript/gabsocial/components/about_sidebar.js
View File

@ -20,21 +20,21 @@ class AboutSidebar extends ImmutablePureComponent {
} = this.props } = this.props
return ( return (
<header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}> <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.width240PX].join(' ')} classNames={[_s._, _s.w240PX].join(' ')}
classNamesXS={[_s.default, _s.width100PC].join(' ')} classNamesXS={[_s._, _s.w100PC].join(' ')}
> >
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')} classNames={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}
classNamesXS={[_s.default, _s.px15].join(' ')} classNamesXS={[_s._, _s.px15].join(' ')}
> >
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')} classNames={[_s._, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}
classNamesXS={[_s.default, _s.alignItemsStart, _s.width100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')} classNamesXS={[_s._, _s.aiStart, _s.w100PC, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
> >
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s._, _s.w100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}> <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
{ {
me && <BackButton icon='arrow-left' toHome /> me && <BackButton icon='arrow-left' toHome />
} }
@ -44,7 +44,7 @@ class AboutSidebar extends ImmutablePureComponent {
</div> </div>
</div> </div>
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}> <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle> <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
{ {
items.map((menuItem, i) => ( items.map((menuItem, i) => (

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

@ -65,7 +65,7 @@ class Account extends ImmutablePureComponent {
isOutline={true} isOutline={true}
color='brand' color='brand'
backgroundColor='none' backgroundColor='none'
className={[_s.px10, _s.flexRow, _s.alignItemsCenter].join(' ')} className={[_s.px10, _s.flexRow, _s.aiCenter].join(' ')}
icon={actionIcon} icon={actionIcon}
iconSize='10px' iconSize='10px'
> >
@ -83,40 +83,40 @@ class Account extends ImmutablePureComponent {
<Button <Button
isNarrow isNarrow
backgroundColor='none' backgroundColor='none'
className={[_s.alignItemsEnd, _s.px5]} className={[_s.aiEnd, _s.px5]}
onClick={dismissAction} onClick={dismissAction}
icon='close' icon='close'
iconSize='8px' iconSize='8px'
iconClassName={_s.colorSecondary} iconClassName={_s.cSecondary}
/> />
) )
const content = { __html: account.get('note_emojified') } const content = { __html: account.get('note_emojified') }
return ( return (
<div className={[_s.default, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}> <div className={[_s._, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsStart].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiStart].join(' ')}>
<NavLink <NavLink
className={[_s.default, _s.noUnderline].join(' ')} className={[_s._, _s.noUnderline].join(' ')}
title={account.get('acct')} title={account.get('acct')}
to={`/${account.get('acct')}`} to={`/${account.get('acct')}`}
> >
<Avatar account={account} size={avatarSize} /> <Avatar account={account} size={avatarSize} />
</NavLink> </NavLink>
<div className={[_s.default, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}> <div className={[_s._, _s.px10, _s.overflowHidden, _s.flexNormal].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<NavLink <NavLink
title={account.get('acct')} title={account.get('acct')}
to={`/${account.get('acct')}`} to={`/${account.get('acct')}`}
className={[_s.default, _s.alignItemsStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')} className={[_s._, _s.aiStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
> >
<DisplayName account={account} isMultiline={compact} /> <DisplayName account={account} isMultiline={compact} />
{!compact && actionButton} {!compact && actionButton}
</NavLink> </NavLink>
<div className={[_s.default].join(' ')}> <div className={[_s._].join(' ')}>
{dismissBtn} {dismissBtn}
{compact && actionButton} {compact && actionButton}
</div> </div>

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

@ -104,7 +104,7 @@ class AccountActionButton extends ImmutablePureComponent {
<Button <Button
{...buttonOptions} {...buttonOptions}
isNarrow isNarrow
className={[_s.justifyContentCenter, _s.alignItemsCenter].join(' ')} className={[_s.jcCenter, _s.aiCenter].join(' ')}
> >
<Text <Text
color='inherit' color='inherit'

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

@ -14,7 +14,7 @@ class AutosuggestAccount extends ImmutablePureComponent {
return ( return (
<div <div
className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')} className={[_s._, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.aiCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
title={account.get('acct')} title={account.get('acct')}
> >
<Avatar account={account} size={26} /> <Avatar account={account} size={26} />

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

@ -22,7 +22,7 @@ class AutosuggestEmoji extends React.PureComponent {
} }
return ( return (
<div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}> <div className={[_s._, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.aiCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<img className='emojione' src={url} alt={emoji.native || emoji.colons} /> <img className='emojione' src={url} alt={emoji.native || emoji.colons} />
<Text className={_s.ml10}> <Text className={_s.ml10}>
{emoji.colons} {emoji.colons}

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

@ -194,32 +194,32 @@ class AutosuggestTextbox extends ImmutablePureComponent {
const { suggestionsHidden } = this.state const { suggestionsHidden } = this.state
const textareaContainerClasses = CX({ const textareaContainerClasses = CX({
default: 1, _: 1,
maxWidth100PC: 1, maxW100PC: 1,
flexGrow1: small, flexGrow1: small,
justifyContentCenter: small, jcCenter: small,
py5: small, py5: small,
}) })
const textareaClasses = CX({ const textareaClasses = CX({
default: 1, _: 1,
font: 1, font: 1,
wrap: 1, wrap: 1,
resizeNone: 1, resizeNone: 1,
bgTransparent: 1, bgTransparent: 1,
outlineNone: 1, outlineNone: 1,
lineHeight125: 1, lineHeight125: 1,
colorPrimary: 1, cPrimary: 1,
width100PC: !small, w100PC: !small,
pt15: !small, pt15: !small,
px15: !small, px15: !small,
px10: small, px10: small,
pb10: !small, pb10: !small,
fs16PX: !small, fs16PX: !small,
fs14PX: small, fs14PX: small,
heightMax200PX: small, maxH200PX: small,
heightMax80VH: !small, maxH80VH: !small,
heightMin80PX: !small, minH80PX: !small,
}) })
return ( return (
@ -272,7 +272,7 @@ class AutosuggestTextbox extends ImmutablePureComponent {
{ {
!small && !suggestionsHidden && !suggestions.isEmpty() && !small && !suggestionsHidden && !suggestions.isEmpty() &&
<div className={[_s.default].join(' ')}> <div className={[_s._].join(' ')}>
{suggestions.map(this.renderSuggestion)} {suggestions.map(this.renderSuggestion)}
</div> </div>
} }

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

@ -89,7 +89,7 @@ class Avatar extends ImmutablePureComponent {
const isPro = !!account ? account.get('is_pro') : false const isPro = !!account ? account.get('is_pro') : false
const alt = !account ? '' : `${account.get('display_name')} ${isPro ? '(PRO)' : ''}`.trim() const alt = !account ? '' : `${account.get('display_name')} ${isPro ? '(PRO)' : ''}`.trim()
const classes = [_s.default, _s.circle, _s.overflowHidden] const classes = [_s._, _s.circle, _s.overflowHidden]
if (isPro) { if (isPro) {
classes.push(_s.boxShadowAvatarPro) classes.push(_s.boxShadowAvatarPro)
} }

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

@ -30,13 +30,13 @@ class BackButton extends React.PureComponent {
} = this.props } = this.props
const classes = CX(className, { const classes = CX(className, {
alignItemsCenter: 1, aiCenter: 1,
bgTransparent: 1, bgTransparent: 1,
mr5: 1, mr5: 1,
cursorPointer: 1, cursorPointer: 1,
outlineNone: 1, outlineNone: 1,
default: 1, _: 1,
justifyContentCenter: 1, jcCenter: 1,
}) })
return ( return (
@ -47,7 +47,7 @@ class BackButton extends React.PureComponent {
className={classes} className={classes}
icon={icon || 'angle-left'} icon={icon || 'angle-left'}
iconSize={iconSize || '24px'} iconSize={iconSize || '24px'}
iconClassName={iconClassName || [_s.mr5, _s.colorPrimary].join(' ')} iconClassName={iconClassName || [_s.mr5, _s.cPrimary].join(' ')}
onClick={this.handleBackClick} onClick={this.handleBackClick}
/> />
) )

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

@ -10,7 +10,7 @@ class Block extends React.PureComponent {
const { children } = this.props const { children } = this.props
return ( return (
<div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}> <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.overflowHidden, _s.radiusSmall].join(' ')}>
{children} {children}
</div> </div>
) )

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

@ -8,8 +8,8 @@ class BlockHeading extends React.PureComponent {
const { title } = this.props const { title } = this.props
return ( return (
<div className={[_s.default, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.px15, _s.py10].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<Heading size='h2'>{title}</Heading> <Heading size='h2'>{title}</Heading>
</div> </div>
</div> </div>

24
app/javascript/gabsocial/components/bundle_column_error.js
View File

@ -24,15 +24,15 @@ class BundleColumnError extends React.PureComponent {
const { intl: { formatMessage } } = this.props const { intl: { formatMessage } } = this.props
return ( return (
<div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.minH100VH, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
<div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} > <div className={[_s._, _s.minH53PX, _s.bgBrand, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}> <div className={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w1255PX].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s._, _s.flexRow].join(' ')}>
<h1 className={[_s.default, _s.mr15].join(' ')}> <h1 className={[_s._, _s.mr15].join(' ')}>
<Button href='/' isText aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}> <Button href='/' isText aria-label='Gab' className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
<Icon id='logo' className={_s.colorWhite} /> <Icon id='logo' className={_s.cWhite} />
</Button> </Button>
</h1> </h1>
@ -40,20 +40,20 @@ class BundleColumnError extends React.PureComponent {
</div> </div>
</div> </div>
<div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
<Icon id='warning' size='28px' className={[_s.default, _s.colorSecondary, _s.mb15].join(' ')} /> <Icon id='warning' size='28px' className={[_s._, _s.cSecondary, _s.mb15].join(' ')} />
<Text size='medium' className={_s.pt15}> <Text size='medium' className={_s.pt15}>
{formatMessage(messages.body)} {formatMessage(messages.body)}
</Text> </Text>
<div className={[_s.default, _s.py10, _s.my10].join(' ')}> <div className={[_s._, _s.py10, _s.my10].join(' ')}>
<Text> <Text>
{APP_NAME} ({version}) {APP_NAME} ({version})
</Text> </Text>
<div className={[_s.default, _s.flexRow, _s.mt10, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.mt10, _s.aiCenter].join(' ')}>
<Button <Button
isText isText
href={source_url} href={source_url}
@ -77,7 +77,7 @@ class BundleColumnError extends React.PureComponent {
<Divider /> <Divider />
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s._, _s.flexRow].join(' ')}>
<Button <Button
icon='repost' icon='repost'
onClick={this.handleRetry} size={64} onClick={this.handleRetry} size={64}

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

@ -109,7 +109,7 @@ class Button extends React.PureComponent {
// Style the component according to props // Style the component according to props
const classes = noClasses ? className : cx(className, { const classes = noClasses ? className : cx(className, {
default: 1, _: 1,
noUnderline: 1, noUnderline: 1,
font: 1, font: 1,
cursorPointer: 1, cursorPointer: 1,
@ -129,11 +129,11 @@ class Button extends React.PureComponent {
bgSubtle: backgroundColor === COLORS.secondary, bgSubtle: backgroundColor === COLORS.secondary,
bgDanger: backgroundColor === COLORS.danger, bgDanger: backgroundColor === COLORS.danger,
colorPrimary: color === COLORS.primary, cPrimary: color === COLORS.primary,
colorSecondary: color === COLORS.secondary, cSecondary: color === COLORS.secondary,
colorTertiary: color === COLORS.tertiary, cTertiary: color === COLORS.tertiary,
colorWhite: color === COLORS.white, cWhite: color === COLORS.white,
colorBrand: color === COLORS.brand, cBrand: color === COLORS.brand,
borderColorBrand: color === COLORS.brand && isOutline, borderColorBrand: color === COLORS.brand && isOutline,
border1PX: isOutline, border1PX: isOutline,
@ -145,7 +145,7 @@ class Button extends React.PureComponent {
py10: !isText && !isNarrow, py10: !isText && !isNarrow,
px15: !isText, px15: !isText,
width100PC: isBlock, w100PC: isBlock,
underline_onHover: underlineOnHover, underline_onHover: underlineOnHover,
@ -155,7 +155,7 @@ class Button extends React.PureComponent {
bgDangerDark_onHover: backgroundColor === COLORS.danger && !isDisabled, bgDangerDark_onHover: backgroundColor === COLORS.danger && !isDisabled,
bgBrand_onHover: color === COLORS.brand && isOutline && !isDisabled, bgBrand_onHover: color === COLORS.brand && isOutline && !isDisabled,
colorWhite_onHover: color === COLORS.brand && isOutline && !isDisabled, cWhite_onHover: color === COLORS.brand && isOutline && !isDisabled,
}) })
const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button' const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'

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

@ -19,7 +19,7 @@ class CharacterCounter extends React.PureComponent {
const dashoffset = circumference * (1 - diff) const dashoffset = circumference * (1 - diff)
return ( return (
<div className={[_s.default, _s.mr10, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.mr10, _s.jcCenter, _s.aiCenter].join(' ')}>
<svg <svg
width={actualRadius * 2} width={actualRadius * 2}
height={actualRadius * 2} height={actualRadius * 2}

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

@ -12,7 +12,7 @@ class ColumnIndicator extends React.PureComponent {
const title = type !== 'error' && !message ? intl.formatMessage(messages[type]) : message const title = type !== 'error' && !message ? intl.formatMessage(messages[type]) : message
return ( return (
<div className={[_s.default, _s.width100PC, _s.justifyContentCenter, _s.alignItemsCenter, _s.py15].join(' ')}> <div className={[_s._, _s.w100PC, _s.jcCenter, _s.aiCenter, _s.py15].join(' ')}>
<Icon id={type} size='30px' /> <Icon id={type} size='30px' />
{ {
type !== 'loading' && type !== 'loading' &&

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

@ -85,7 +85,7 @@ class Comment extends ImmutablePureComponent {
} }
const contentClasses = CX({ const contentClasses = CX({
default: 1, _: 1,
px10: 1, px10: 1,
pt5: 1, pt5: 1,
pb10: 1, pb10: 1,
@ -95,19 +95,19 @@ class Comment extends ImmutablePureComponent {
}) })
return ( return (
<div className={[_s.default, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}> <div className={[_s._, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
<div className={_s.default} style={style}> <div className={_s._} style={style}>
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s._, _s.flexRow].join(' ')}>
<NavLink <NavLink
to={`/${status.getIn(['account', 'acct'])}`} to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])} title={status.getIn(['account', 'acct'])}
className={[_s.default, _s.mr10, _s.pt5].join(' ')} className={[_s._, _s.mr10, _s.pt5].join(' ')}
> >
<Avatar account={status.get('account')} size={32} /> <Avatar account={status.get('account')} size={32} />
</NavLink> </NavLink>
<div className={[_s.default, _s.flexShrink1, _s.maxWidth100PC42PX].join(' ')}> <div className={[_s._, _s.flexShrink1, _s.maxW100PC42PX].join(' ')}>
<div className={contentClasses}> <div className={contentClasses}>
<CommentHeader <CommentHeader
ancestorAccountId={ancestorAccountId} ancestorAccountId={ancestorAccountId}
@ -122,7 +122,7 @@ class Comment extends ImmutablePureComponent {
isComment isComment
collapsable collapsable
/> />
<div className={[_s.default, _s.mt5].join(' ')}> <div className={[_s._, _s.mt5].join(' ')}>
<StatusMedia <StatusMedia
isComment isComment
status={status} status={status}
@ -136,7 +136,7 @@ class Comment extends ImmutablePureComponent {
</div> </div>
</div> </div>
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}> <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
<CommentButton <CommentButton
title={intl.formatMessage(status.get('favourited') ? messages.unlike : messages.like)} title={intl.formatMessage(status.get('favourited') ? messages.unlike : messages.like)}
onClick={this.handleOnFavorite} onClick={this.handleOnFavorite}

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

@ -43,11 +43,11 @@ class CommentHeader extends ImmutablePureComponent {
const myComment = status.getIn(['account', 'id']) === me const myComment = status.getIn(['account', 'id']) === me
return ( return (
<div className={[_s.default, _s.alignItemsStart, _s.py2, _s.maxWidth100PC, _s.flexGrow1].join(' ')}> <div className={[_s._, _s.aiStart, _s.py2, _s.maxW100PC, _s.flexGrow1].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.width100PC, _s.maxWidth100PC, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.flexWrap, _s.overflowHidden, _s.w100PC, _s.maxW100PC, _s.aiCenter].join(' ')}>
<NavLink <NavLink
className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')} className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
to={`/${status.getIn(['account', 'acct'])}`} to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])} title={status.getIn(['account', 'acct'])}
> >
@ -60,11 +60,11 @@ class CommentHeader extends ImmutablePureComponent {
{ {
isOwner && isOwner &&
<div className={[_s.default, _s.alignItemsCenter, _s.ml5].join(' ')}> <div className={[_s._, _s.aiCenter, _s.ml5].join(' ')}>
<span className={_s.visiblyHidden}> <span className={_s.visiblyHidden}>
{intl.formatMessage(messages.original)} {intl.formatMessage(messages.original)}
</span> </span>
<Icon id='mic' size='10px' className={_s.colorBrand} /> <Icon id='mic' size='10px' className={_s.cBrand} />
</div> </div>
} }

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

@ -41,7 +41,7 @@ class CommentList extends ImmutablePureComponent {
</Wrapper> </Wrapper>
{ {
size > 0 && size > max && commentsLimited && size > 0 && size > max && commentsLimited &&
<div className={[_s.default, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.px15, _s.pb5, _s.mb10, _s.aiCenter].join(' ')}>
<Button <Button
isText isText
backgroundColor='none' backgroundColor='none'
@ -52,7 +52,7 @@ class CommentList extends ImmutablePureComponent {
View more comments View more comments
</Text> </Text>
</Button> </Button>
<div className={[_s.default, _s.mlAuto].join(' ')}> <div className={[_s._, _s.mlAuto].join(' ')}>
<Text color='tertiary'> <Text color='tertiary'>
{max} {max}
&nbsp;of&nbsp; &nbsp;of&nbsp;

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

@ -72,7 +72,7 @@ const findWithRegex = (regex, contentBlock, callback) => {
const HighlightedSpan = (props) => { const HighlightedSpan = (props) => {
return ( return (
<span <span
className={_s.colorBrand} className={_s.cBrand}
data-offset-key={props.offsetKey} data-offset-key={props.offsetKey}
> >
{props.children} {props.children}
@ -238,10 +238,10 @@ class Composer extends React.PureComponent {
const { editorState } = this.state const { editorState } = this.state
const editorContainerClasses = cx({ const editorContainerClasses = cx({
default: 1, _: 1,
cursorText: 1, cursorText: 1,
text: 1, text: 1,
colorPrimary: 1, cPrimary: 1,
fs16PX: !small, fs16PX: !small,
fs14PX: small, fs14PX: small,
pt15: !small, pt15: !small,
@ -251,7 +251,7 @@ class Composer extends React.PureComponent {
}) })
return ( return (
<div className={_s.default}> <div className={_s._}>
{ {
!small && isPro && !small && isPro &&

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

@ -80,20 +80,20 @@ class DisplayName extends ImmutablePureComponent {
if (!account) return null if (!account) return null
const containerClassName = CX({ const containerClassName = CX({
default: 1, _: 1,
maxWidth100PC: 1, maxW100PC: 1,
alignItemsCenter: !isMultiline, aiCenter: !isMultiline,
flexRow: !isMultiline, flexRow: !isMultiline,
cursorPointer: !noHover, cursorPointer: !noHover,
alignItemsCenter: isCentered, aiCenter: isCentered,
}) })
const displayNameClasses = CX({ const displayNameClasses = CX({
text: 1, text: 1,
overflowWrapBreakWord: 1, overflowWrapBreakWord: 1,
whiteSpaceNoWrap: 1, whiteSpaceNoWrap: 1,
fontWeightBold: 1, fw600: 1,
colorPrimary: 1, cPrimary: 1,
mr2: 1, mr2: 1,
lineHeight125: !isSmall, lineHeight125: !isSmall,
fs14PX: isSmall, fs14PX: isSmall,
@ -108,8 +108,8 @@ class DisplayName extends ImmutablePureComponent {
flexShrink1: 1, flexShrink1: 1,
overflowWrapBreakWord: 1, overflowWrapBreakWord: 1,
textOverflowEllipsis: 1, textOverflowEllipsis: 1,
colorSecondary: 1, cSecondary: 1,
fontWeightNormal: 1, fw400: 1,
lineHeight15: isMultiline, lineHeight15: isMultiline,
lineHeight125: !isMultiline, lineHeight125: !isMultiline,
ml5: !isMultiline, ml5: !isMultiline,
@ -147,7 +147,7 @@ class DisplayName extends ImmutablePureComponent {
onMouseLeave={noHover ? undefined : this.handleMouseLeave} onMouseLeave={noHover ? undefined : this.handleMouseLeave}
ref={this.setRef} ref={this.setRef}
> >
<span className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.maxWidth100PC].join(' ')}> <span className={[_s._, _s.flexRow, _s.aiCenter, _s.maxW100PC].join(' ')}>
<bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}> <bdi className={[_s.text, _s.whiteSpaceNoWrap, _s.textOverflowEllipsis].join(' ')}>
<strong <strong
className={displayNameClasses} className={displayNameClasses}
@ -155,12 +155,12 @@ class DisplayName extends ImmutablePureComponent {
/> />
{ {
account.get('locked') && account.get('locked') &&
<Icon id='lock-filled' size={`${iconSize - 3}px`} className={[_s.colorPrimary, _s.ml5].join(' ')} /> <Icon id='lock-filled' size={`${iconSize - 3}px`} className={[_s.cPrimary, _s.ml5].join(' ')} />
} }
</bdi> </bdi>
{ {
account.get('is_verified') && account.get('is_verified') &&
<Icon id='verified' size={`${iconSize}px`} className={[_s.ml5, _s.default].join(' ')} /> <Icon id='verified' size={`${iconSize}px`} className={[_s.ml5, _s._].join(' ')} />
} }
</span> </span>
{ {
@ -169,7 +169,7 @@ class DisplayName extends ImmutablePureComponent {
@{account.get('acct')} @{account.get('acct')}
{ {
!noRelationship && !!relationshipLabel && !noRelationship && !!relationshipLabel &&
<span className={[_s.default, _s.ml5, _s.justifyContentCenter].join(' ')}> <span className={[_s._, _s.ml5, _s.jcCenter].join(' ')}>
<Text <Text
size='extraSmall' size='extraSmall'
isBadge isBadge

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

@ -13,10 +13,10 @@ class Divider extends React.PureComponent {
const { isSmall, isInvisible } = this.props const { isSmall, isInvisible } = this.props
const classes = CX({ const classes = CX({
default: 1, _: 1,
borderBottom1PX: !isInvisible, borderBottom1PX: !isInvisible,
borderColorSecondary: !isInvisible, borderColorSecondary: !isInvisible,
width100PC: 1, w100PC: 1,
mb15: !isSmall, mb15: !isSmall,
my10: isSmall || isInvisible, my10: isSmall || isInvisible,
}) })

24
app/javascript/gabsocial/components/error_boundary.js
View File

@ -61,15 +61,15 @@ class ErrorBoundary extends React.PureComponent {
if (!hasError) return this.props.children if (!hasError) return this.props.children
return ( return (
<div className={[_s.default, _s.heightMin100VH, _s.width100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.minH100VH, _s.w100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
<div className={[_s.default, _s.heightMin53PX, _s.bgBrand, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} > <div className={[_s._, _s.minH53PX, _s.bgBrand, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width1255PX].join(' ')}> <div className={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w1255PX].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s._, _s.flexRow].join(' ')}>
<h1 className={[_s.default, _s.mr15].join(' ')}> <h1 className={[_s._, _s.mr15].join(' ')}>
<Button href='/' isText aria-label='Gab' className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}> <Button href='/' isText aria-label='Gab' className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}>
<Icon id='logo' className={_s.colorWhite} /> <Icon id='logo' className={_s.cWhite} />
</Button> </Button>
</h1> </h1>
@ -77,9 +77,9 @@ class ErrorBoundary extends React.PureComponent {
</div> </div>
</div> </div>
<div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.maxW640PX, _s.px15, _s.py10].join(' ')}>
<Icon id='warning' size='28px' className={[_s.default, _s.colorSecondary, _s.mb15].join(' ')} /> <Icon id='warning' size='28px' className={[_s._, _s.cSecondary, _s.mb15].join(' ')} />
<Text size='medium' className={_s.pt15}> <Text size='medium' className={_s.pt15}>
<FormattedMessage <FormattedMessage
@ -95,12 +95,12 @@ class ErrorBoundary extends React.PureComponent {
/> />
</Text> </Text>
<div className={[_s.default, _s.py10, _s.my10].join(' ')}> <div className={[_s._, _s.py10, _s.my10].join(' ')}>
<Text> <Text>
{APP_NAME} ({version}) {APP_NAME} ({version})
</Text> </Text>
<div className={[_s.default, _s.flexRow, _s.mt10, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.mt10, _s.aiCenter].join(' ')}>
<Button <Button
isText isText
href={source_url} href={source_url}
@ -141,7 +141,7 @@ class ErrorBoundary extends React.PureComponent {
<Divider /> <Divider />
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s._, _s.flexRow].join(' ')}>
<Button href='/home'> <Button href='/home'>
<Text align='center' color='inherit'> <Text align='center' color='inherit'>
<FormattedMessage <FormattedMessage

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

@ -31,9 +31,9 @@ class ExtendedVideoPlayer extends React.PureComponent {
const { src, muted, controls, alt } = this.props const { src, muted, controls, alt } = this.props
return ( return (
<div className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
<video <video
className={[_s.default, _s.maxWidth100PC, _s.heightMax100PC].join(' ')} className={[_s._, _s.maxW100PC, _s.maxH100PC].join(' ')}
playsInline playsInline
ref={this.setRef} ref={this.setRef}
src={src} src={src}

16
app/javascript/gabsocial/components/file_input.js
View File

@ -41,10 +41,10 @@ class FileInput extends React.PureComponent {
const { file, hovering } = this.state const { file, hovering } = this.state
const containerClasses = CX(className, { const containerClasses = CX(className, {
default: 1, _: 1,
alignItemsCenter: 1, aiCenter: 1,
cursorPointer: 1, cursorPointer: 1,
justifyContentCenter: 1, jcCenter: 1,
overflowHidden: true, overflowHidden: true,
radiusSmall: isBordered, radiusSmall: isBordered,
px10: isBordered, px10: isBordered,
@ -55,8 +55,8 @@ class FileInput extends React.PureComponent {
}) })
const iconClasses = CX({ const iconClasses = CX({
colorSecondary: !hovering, cSecondary: !hovering,
colorWhite: hovering, cWhite: hovering,
}) })
return ( return (
@ -66,7 +66,7 @@ class FileInput extends React.PureComponent {
> >
{ {
!!title && !!title &&
<div className={[_s.default, _s.mb10, _s.pl15].join(' ')}> <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
<Text size='small' weight='medium' color='secondary'> <Text size='small' weight='medium' color='secondary'>
{title} {title}
</Text> </Text>
@ -83,12 +83,12 @@ class FileInput extends React.PureComponent {
> >
<Image <Image
alt={title || id} alt={title || id}
className={[_s.height100PC, _s.width100PC].join(' ')} className={[_s.h100PC, _s.w100PC].join(' ')}
src={fileType === 'image' ? file : null} src={fileType === 'image' ? file : null}
/> />
{ {
(!file || hovering) && (!file || hovering) &&
<div className={[_s.default, _s.posAbs, _s.cursorPointer, _s.top0, _s.bottom0, _s.left0, _s.right0, _s.alignItemsCenter, _s.justifyContentCenter, _s.bgBlackOpaquest_onHover].join(' ')}> <div className={[_s._, _s.posAbs, _s.cursorPointer, _s.top0, _s.bottom0, _s.left0, _s.right0, _s.aiCenter, _s.jcCenter, _s.bgBlackOpaquest_onHover].join(' ')}>
<Icon id='add-image' size='32px' className={iconClasses} /> <Icon id='add-image' size='32px' className={iconClasses} />
</div> </div>
} }

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

@ -39,7 +39,7 @@ class FloatingActionButton extends React.PureComponent {
<Button <Button
to={isDesktop ? undefined : '/compose'} to={isDesktop ? undefined : '/compose'}
onClick={isDesktop ? onOpenCompose : undefined} onClick={isDesktop ? onOpenCompose : undefined}
className={[_s.py15, _s.height60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.width60PX, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')} className={[_s.py15, _s.h60PX, _s.saveAreaInsetMR, _s.saveAreaInsetMB, _s.w60PX, _s.jcCenter, _s.aiCenter].join(' ')}
title={message} title={message}
aria-label={message} aria-label={message}
icon='pencil' icon='pencil'

18
app/javascript/gabsocial/components/footer_bar.js
View File

@ -57,9 +57,9 @@ class FooterBar extends React.PureComponent {
] ]
return ( return (
<div className={[_s.default, _s.z4, _s.heightMin58PX, _s.width100PC].join(' ')}> <div className={[_s._, _s.z4, _s.minH58PX, _s.w100PC].join(' ')}>
<div className={[_s.default, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.heightMin58PX, _s.width100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}> <div className={[_s._, _s.posFixed, _s.left0, _s.right0, _s.bottom0, _s.minH58PX, _s.w100PC, _s.bgPrimary, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.heightMin58PX, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter, _s.h100PC, _s.minH58PX, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
{ {
buttons.map((props) => { buttons.map((props) => {
if (props.isHidden) return null if (props.isHidden) return null
@ -68,12 +68,12 @@ class FooterBar extends React.PureComponent {
borderTop2PX: 1, borderTop2PX: 1,
borderColorTransparent: !props.active, borderColorTransparent: !props.active,
borderColorBrand: props.active, borderColorBrand: props.active,
height100PC: 1, h100PC: 1,
heightMin58PX: 1, minH58PX: 1,
px15: 1, px15: 1,
flexGrow1: 1, flexGrow1: 1,
alignItemsCenter: 1, aiCenter: 1,
justifyContentCenter: 1, jcCenter: 1,
}) })
const color = props.active ? 'brand' : 'secondary' const color = props.active ? 'brand' : 'secondary'
@ -81,7 +81,7 @@ class FooterBar extends React.PureComponent {
if (props.to === '/notifications' && notificationCount > 0) { if (props.to === '/notifications' && notificationCount > 0) {
childIcon = ( childIcon = (
<div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt5, _s.pl20].join(' ')}> <div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt5, _s.pl20].join(' ')}>
<span className={[_s.bgRed, _s.colorWhite, _s.circle, _s.py2, _s.px2, _s.minWidth14PX, _s.displayBlock].join(' ')} style={{fontSize: '12px'}}> <span className={[_s.bgRed, _s.cWhite, _s.circle, _s.py2, _s.px2, _s.minW14PX, _s.displayBlock].join(' ')} style={{fontSize: '12px'}}>
{notificationCount} {notificationCount}
</span> </span>
</div> </div>
@ -89,7 +89,7 @@ class FooterBar extends React.PureComponent {
} else if (props.to === '/home' && homeItemsQueueCount > 0) { } else if (props.to === '/home' && homeItemsQueueCount > 0) {
childIcon = ( childIcon = (
<div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt2, _s.pl20].join(' ')}> <div className={[_s.posAbs, _s.ml5, _s.top0, _s.pt2, _s.pl20].join(' ')}>
<span className={[_s.colorBrand, _s.circle, _s.py2, _s.px2, _s.minWidth14PX, _s.displayBlock].join(' ')} style={{fontSize: '18px'}}> <span className={[_s.cBrand, _s.circle, _s.py2, _s.px2, _s.minW14PX, _s.displayBlock].join(' ')} style={{fontSize: '18px'}}>
• •
</span> </span>
</div> </div>

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

@ -12,14 +12,14 @@ class Form extends React.PureComponent {
} = this.props } = this.props
return ( return (
<form onSubmit={onSubmit} className={_s.default}> <form onSubmit={onSubmit} className={_s._}>
{ {
!!errorMessage && !!errorMessage &&
<Text color='danger' className={_s.my10}> <Text color='danger' className={_s.my10}>
{errorMessage} {errorMessage}
</Text> </Text>
} }
<div className={_s.default}> <div className={_s._}>
{children} {children}
</div> </div>
</form> </form>

38
app/javascript/gabsocial/components/global_footer.js
View File

@ -11,30 +11,30 @@ export default class GlobalFooter extends React.PureComponent {
render() { render() {
return ( return (
<div className={[_s.default, _s.z4, _s.width100PC].join(' ')}> <div className={[_s._, _s.z4, _s.w100PC].join(' ')}>
<div className={[_s.default, _s.left0, _s.right0, _s.bottom0, _s.width100PC, _s.bgSubtle, _s.borderTop1PX, _s.alignItemsCenter, _s.borderColorSecondary].join(' ')}> <div className={[_s._, _s.left0, _s.right0, _s.bottom0, _s.w100PC, _s.bgSubtle, _s.borderTop1PX, _s.aiCenter, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.mt15, _s.mb15].join(' ')}> <div className={[_s._, _s.mt15, _s.mb15].join(' ')}>
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.width1255PX, _s.flexRow, _s.py15, _s.mt15, _s.mb15].join(' ')} classNames={[_s._, _s.w1255PX, _s.flexRow, _s.py15, _s.mt15, _s.mb15].join(' ')}
classNamesSmall={[_s.default, _s.width1255PX, _s.alignItemsCenter, _s.pt15, _s.px15, _s.mt15].join(' ')} classNamesSmall={[_s._, _s.w1255PX, _s.aiCenter, _s.pt15, _s.px15, _s.mt15].join(' ')}
> >
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.width330PX].join(' ')} classNames={[_s._, _s.w330PX].join(' ')}
classNamesSmall={[_s.default, _s.alignItemsCenter].join(' ')} classNamesSmall={[_s._, _s.aiCenter].join(' ')}
> >
<div className={[_s.default, _s.mb10].join(' ')}> <div className={[_s._, _s.mb10].join(' ')}>
<Icon id='logo' /> <Icon id='logo' />
</div> </div>
<div className={[_s.default, _s.pr15, _s.maxWidth640PX].join(' ')}> <div className={[_s._, _s.pr15, _s.maxW640PX].join(' ')}>
<Text size='medium'>We build Freedom Of Speech Software. We champion free speech, individual liberty and the free flow of information online. All are welcome.</Text> <Text size='medium'>We build Freedom Of Speech Software. We champion free speech, individual liberty and the free flow of information online. All are welcome.</Text>
</div> </div>
</ResponsiveClassesComponent> </ResponsiveClassesComponent>
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')} classNames={[_s._, _s.flexRow, _s.flexGrow1, _s.pl15].join(' ')}
classNamesSmall={[_s.default, _s.py15, _s.width100PC, _s.px15].join(' ')} classNamesSmall={[_s._, _s.py15, _s.w100PC, _s.px15].join(' ')}
> >
<GlobalFooterColumn <GlobalFooterColumn
@ -117,13 +117,13 @@ export default class GlobalFooter extends React.PureComponent {
</ResponsiveClassesComponent> </ResponsiveClassesComponent>
</div> </div>
<div className={[_s.default, _s.alignItemsCenter, _s.bgSecondary, _s.height100PC, _s.heightMin58PX, _s.width100PC, _s.saveAreaInsetPB, _s.justifyContentSpaceAround].join(' ')}> <div className={[_s._, _s.aiCenter, _s.bgSecondary, _s.h100PC, _s.minH58PX, _s.w100PC, _s.saveAreaInsetPB, _s.jcSpaceAround].join(' ')}>
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.width1255PX, _s.flexRow, _s.alignItemsCenter].join(' ')} classNames={[_s._, _s.w1255PX, _s.flexRow, _s.aiCenter].join(' ')}
classNamesXS={[_s.default, _s.width1255PX, _s.alignItemsCenter, _s.px15, _s.pt15].join(' ')} classNamesXS={[_s._, _s.w1255PX, _s.aiCenter, _s.px15, _s.pt15].join(' ')}
> >
<div classNames={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div classNames={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<Text weight='bold'> <Text weight='bold'>
© 2020 © 2020
</Text> </Text>
@ -142,8 +142,8 @@ export default class GlobalFooter extends React.PureComponent {
</div> </div>
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.alignItemsCenter, _s.mlAuto].join(' ')} classNames={[_s._, _s.aiCenter, _s.mlAuto].join(' ')}
classNamesXS={[_s.default, _s.alignItemsCenter, _s.py15].join(' ')} classNamesXS={[_s._, _s.aiCenter, _s.py15].join(' ')}
> >
<Text> <Text>
Made in USA 🇺🇸 Made in USA 🇺🇸
@ -181,8 +181,8 @@ class GlobalFooterColumn extends React.PureComponent {
return ( return (
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.flexNormal].join(' ')} classNames={[_s._, _s.flexNormal].join(' ')}
classNamesSmall={[_s.default, _s.width100PC, _s.alignItemsCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')} classNamesSmall={[_s._, _s.w100PC, _s.aiCenter, _s.mt15, _s.mb5, _s.pt15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
> >
<div className={_s.mb10}> <div className={_s.mb10}>
<Heading size='h3'>{title}</Heading> <Heading size='h3'>{title}</Heading>

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

@ -42,7 +42,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
} }
const navLinkClasses = cx({ const navLinkClasses = cx({
default: 1, _: 1,
noUnderline: 1, noUnderline: 1,
overflowHidden: 1, overflowHidden: 1,
borderColorSecondary: 1, borderColorSecondary: 1,
@ -57,7 +57,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
}) })
return ( return (
<div className={_s.default}> <div className={_s._}>
<NavLink <NavLink
to={`/groups/${group.get('id')}`} to={`/groups/${group.get('id')}`}
className={navLinkClasses} className={navLinkClasses}
@ -67,18 +67,18 @@ class GroupCollectionItem extends ImmutablePureComponent {
<Image <Image
src={coverSrc} src={coverSrc}
alt={group.get('title')} alt={group.get('title')}
className={_s.height158PX} className={_s.h158PX}
/> />
} }
{ {
(!coverSrc || coverMissing) && (isMember || isAdmin) && (!coverSrc || coverMissing) && (isMember || isAdmin) &&
<div className={[_s.default, _s.height40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} /> <div className={[_s._, _s.h40PX, _s.bgSubtle, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
} }
{ {
(isMember || isAdmin) && (isMember || isAdmin) &&
<div className={[_s.default, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}> <div className={[_s._, _s.flexRow, _s.posAbs, _s.top0, _s.right0, _s.pt10, _s.mr10].join(' ')}>
{ {
isMember && isMember &&
<Text <Text
@ -104,12 +104,12 @@ class GroupCollectionItem extends ImmutablePureComponent {
</div> </div>
} }
<div className={[_s.default, _s.px10, _s.my10].join(' ')}> <div className={[_s._, _s.px10, _s.my10].join(' ')}>
<Text color='primary' size='medium' weight='bold'> <Text color='primary' size='medium' weight='bold'>
{group.get('title')} {group.get('title')}
</Text> </Text>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.mt5, _s.mb5].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter, _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;

40
app/javascript/gabsocial/components/group_header.js
View File

@ -97,25 +97,25 @@ class GroupHeader extends ImmutablePureComponent {
// {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />} // {group.get('archived') && <Icon id='lock' title={intl.formatMessage(messages.group_archived)} />}
return ( return (
<div className={[_s.default, _s.z1, _s.width100PC, _s.mb15].join(' ')}> <div className={[_s._, _s.z1, _s.w100PC, _s.mb15].join(' ')}>
<Responsive max={BREAKPOINT_EXTRA_SMALL}> <Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary].join(' ')}> <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s._, _s.w100PC].join(' ')}>
{ {
coverSrc && !coverSrcMissing && coverSrc && !coverSrcMissing &&
<Image className={_s.height200PX} src={coverSrc} alt={title} /> <Image className={_s.h200PX} src={coverSrc} alt={title} />
} }
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s._, _s.w100PC].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.px15, _s.mt10, _s.py10].join(' ')}> <div className={[_s._, _s.w100PC, _s.px15, _s.mt10, _s.py10].join(' ')}>
{children} {children}
</div> </div>
{ {
!!me && !!me &&
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter, _s.mt5, _s.pb15, _s.pt5, _s.height100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}> <div className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter, _s.mt5, _s.pb15, _s.pt5, _s.h100PC, _s.borderBottom1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
{ {
!!actionButtonTitle && !!actionButtonTitle &&
<Button <Button
@ -140,7 +140,7 @@ class GroupHeader extends ImmutablePureComponent {
</div> </div>
} }
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.mt5, _s.pt10, _s.pb5, _s.mb5, _s.px10].join(' ')}> <div className={[_s._, _s.flexRow, _s.h100PC, _s.mt5, _s.pt10, _s.pb5, _s.mb5, _s.px10].join(' ')}>
<Pills pills={tabs} /> <Pills pills={tabs} />
@ -152,20 +152,20 @@ class GroupHeader extends ImmutablePureComponent {
{ /** desktop */} { /** desktop */}
<Responsive min={BREAKPOINT_EXTRA_SMALL}> <Responsive min={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}> <div className={[_s._, _s.boxShadowBlock, _s.bgPrimary, _s.bottomLeftRadiusSmall, _s.bottomRightRadiusSmall].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s._, _s.w100PC].join(' ')}>
{ {
coverSrc && !coverSrcMissing && coverSrc && !coverSrcMissing &&
<Image className={_s.height350PX} src={coverSrc} alt={title} /> <Image className={_s.h350PX} src={coverSrc} alt={title} />
} }
<div className={[_s.default].join(' ')}> <div className={[_s._].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.py10, _s.px10].join(' ')}> <div className={[_s._, _s.flexRow, _s.py10, _s.px10].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s._, _s.w100PC].join(' ')}>
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s._, _s.flexRow].join(' ')}>
<Icon id='group' size='28px' /> <Icon id='group' size='28px' />
<div className={[_s.default, _s.ml7, _s.flexNormal].join(' ')}> <div className={[_s._, _s.ml7, _s.flexNormal].join(' ')}>
<Heading> <Heading>
{title} {title}
</Heading> </Heading>
@ -179,15 +179,15 @@ class GroupHeader extends ImmutablePureComponent {
</div> </div>
</div> </div>
</div> </div>
<div className={[_s.default, _s.height53PX, _s.width100PC].join(' ')}> <div className={[_s._, _s.h53PX, _s.w100PC].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.height100PC, _s.px10].join(' ')}> <div className={[_s._, _s.flexRow, _s.h100PC, _s.px10].join(' ')}>
<TabBar tabs={tabs} isLarge /> <TabBar tabs={tabs} isLarge />
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.height100PC, _s.mlAuto].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter, _s.h100PC, _s.mlAuto].join(' ')}>
{ {
!!me && !!me &&
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
<Button <Button
iconSize='18px' iconSize='18px'
color='brand' color='brand'

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

@ -56,22 +56,22 @@ class GroupListItem extends ImmutablePureComponent {
} }
const containerClasses = CX({ const containerClasses = CX({
default: 1, _: 1,
overflowHidden: 1, overflowHidden: 1,
bgSubtle_onHover: 1, bgSubtle_onHover: 1,
borderColorSecondary: 1, borderColorSecondary: 1,
borderBottom1PX: !isLast, borderBottom1PX: !isLast,
flexRow: 1, flexRow: 1,
py5: 1, py5: 1,
width100PC: 1, w100PC: 1,
}) })
const containerLinkClasses = CX({ const containerLinkClasses = CX({
default: 1, _: 1,
flexRow: 1, flexRow: 1,
noUnderline: 1, noUnderline: 1,
width100PC: 1, w100PC: 1,
maxWidth100PC86PX: isAddable, maxW100PC86PX: isAddable,
}) })
const coverSrc = group.get('cover_image_url') || '' const coverSrc = group.get('cover_image_url') || ''
@ -94,11 +94,11 @@ class GroupListItem extends ImmutablePureComponent {
<Image <Image
src={coverSrc} src={coverSrc}
alt={group.get('title')} alt={group.get('title')}
className={[_s.radiusSmall, _s.height53PX, _s.width84PX, _s.ml15].join(' ')} className={[_s.radiusSmall, _s.h53PX, _s.w84PX, _s.ml15].join(' ')}
/> />
} }
<div className={[_s.default, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}> <div className={[_s._, _s.px10, _s.mt5, _s.flexShrink1].join(' ')}>
<Text color='brand' weight='bold'> <Text color='brand' weight='bold'>
{group.get('title')} {group.get('title')}
</Text> </Text>
@ -113,13 +113,13 @@ class GroupListItem extends ImmutablePureComponent {
</Wrapper> </Wrapper>
{ {
isAddable && isAddable &&
<div className={[_s.default, _s.justifyContentCenter, _s.flexGrow1].join(' ')}> <div className={[_s._, _s.jcCenter, _s.flexGrow1].join(' ')}>
{ {
relationships && relationships &&
<Button <Button
isNarrow isNarrow
color='white' color='white'
className={[_s.px10, _s.width76PX].join(' ')} className={[_s.px10, _s.w76PX].join(' ')}
backgroundColor={addButtonColor} backgroundColor={addButtonColor}
onClick={this.handleOnToggleMembership} onClick={this.handleOnToggleMembership}
onMouseEnter={this.handleOnMouseEnter} onMouseEnter={this.handleOnMouseEnter}

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

@ -19,9 +19,9 @@ class HashtagItem extends ImmutablePureComponent {
return ( return (
<NavLink <NavLink
to={`/tags/${hashtag.get('name')}`} to={`/tags/${hashtag.get('name')}`}
className={[_s.default, _s.noUnderline, _s.bgSubtle_onHover, _s.px15, _s.py5].join(' ')} className={[_s._, _s.noUnderline, _s.bgSubtle_onHover, _s.px15, _s.py5].join(' ')}
> >
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<div> <div>
<Text color='brand' size='medium' weight='bold' className={[_s.py2, _s.lineHeight15].join(' ')}> <Text color='brand' size='medium' weight='bold' className={[_s.py2, _s.lineHeight15].join(' ')}>
#{hashtag.get('name')} #{hashtag.get('name')}
@ -36,7 +36,7 @@ class HashtagItem extends ImmutablePureComponent {
title='Remove' title='Remove'
icon='close' icon='close'
iconSize='8px' iconSize='8px'
iconClassName={_s.colorSecondary} iconClassName={_s.cSecondary}
className={_s.mlAuto} className={_s.mlAuto}
/> />
} }

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

@ -36,12 +36,12 @@ class Heading extends React.PureComponent {
// Each size has it's own custom style // Each size has it's own custom style
const classes = cx({ const classes = cx({
default: 1, _: 1,
text: 1, text: 1,
textAlignCenter: isCentered, textAlignCenter: isCentered,
colorPrimary: [SIZES.h1, SIZES.h2].indexOf(size) > -1, cPrimary: [SIZES.h1, SIZES.h2].indexOf(size) > -1,
colorSecondary: [SIZES.h3, SIZES.h4, SIZES.h5].indexOf(size) > -1, cSecondary: [SIZES.h3, SIZES.h4, SIZES.h5].indexOf(size) > -1,
fs24PX: size === SIZES.h1, fs24PX: size === SIZES.h1,
fs19PX: size === SIZES.h2, fs19PX: size === SIZES.h2,
@ -54,8 +54,8 @@ class Heading extends React.PureComponent {
lineHeight2: size === SIZES.h5, lineHeight2: size === SIZES.h5,
py2: size === SIZES.h5, py2: size === SIZES.h5,
fontWeightMedium: [SIZES.h1, SIZES.h3, SIZES.h5].indexOf(size) > -1, fw500: [SIZES.h1, SIZES.h3, SIZES.h5].indexOf(size) > -1,
fontWeightBold: [SIZES.h2, SIZES.h4].indexOf(size) > -1, fw600: [SIZES.h2, SIZES.h4].indexOf(size) > -1,
}) })
return React.createElement( return React.createElement(

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

@ -28,7 +28,7 @@ class Image extends React.PureComponent {
const { error } = this.state const { error } = this.state
const classes = cx(className, { const classes = cx(className, {
default: 1, _: 1,
objectFitCover: !!src && fit === 'cover', objectFitCover: !!src && fit === 'cover',
bgSecondary: !src, bgSecondary: !src,
}) })

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

@ -142,9 +142,9 @@ class ImageLoader extends React.PureComponent {
// } // }
const className = CX({ const className = CX({
default: 1, _: 1,
width100PC: 1, w100PC: 1,
height100PC: 1, h100PC: 1,
// 'image-loader--loading': loading, // 'image-loader--loading': loading,
// 'image-loader--amorphous': !this.hasSize(), // 'image-loader--amorphous': !this.hasSize(),
}); });
@ -154,7 +154,7 @@ class ImageLoader extends React.PureComponent {
<LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} /> <LoadingBar loading={loading ? 1 : 0} className='loading-bar' style={{ width: this.state.width || width }} />
{loading ? ( {loading ? (
<canvas <canvas
className={[_s.default, _s.objectFitCover].join(' ')} className={[_s._, _s.objectFitCover].join(' ')}
ref={this.setCanvasRef} ref={this.setCanvasRef}
width={width} width={width}
height={height} height={height}

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

@ -34,7 +34,7 @@ class Input extends React.PureComponent {
} = this.props } = this.props
const inputClasses = cx({ const inputClasses = cx({
default: 1, _: 1,
text: 1, text: 1,
outlineNone: 1, outlineNone: 1,
lineHeight125: !small, lineHeight125: !small,
@ -44,8 +44,8 @@ class Input extends React.PureComponent {
py5: small, py5: small,
bgTransparent: !readOnly, bgTransparent: !readOnly,
bgSecondary: readOnly, bgSecondary: readOnly,
colorPrimary: !readOnly, cPrimary: !readOnly,
colorSecondary: readOnly, cSecondary: readOnly,
fs15PX: !small, fs15PX: !small,
fs13PX: small, fs13PX: small,
flexGrow1: 1, flexGrow1: 1,
@ -65,16 +65,16 @@ class Input extends React.PureComponent {
<React.Fragment> <React.Fragment>
{ {
!!title && !hideLabel && !!title && !hideLabel &&
<div className={[_s.default, _s.mb10, _s.pl15].join(' ')}> <div className={[_s._, _s.mb10, _s.pl15].join(' ')}>
<Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'> <Text htmlFor={id} size='small' weight='medium' color='secondary' tagName='label'>
{title} {title}
</Text> </Text>
</div> </div>
} }
<div className={[_s.default, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.aiCenter].join(' ')}>
{ {
!!prependIcon && !!prependIcon &&
<Icon id={prependIcon} size='16px' className={[_s.colorPrimary, _s.ml15, _s.mr5].join(' ')} /> <Icon id={prependIcon} size='16px' className={[_s.cPrimary, _s.ml15, _s.mr5].join(' ')} />
} }
{ {

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

@ -72,14 +72,14 @@ class LinkFooter extends React.PureComponent {
] ]
const containerClasses = CX({ const containerClasses = CX({
default: 1, _: 1,
px10: !noPadding, px10: !noPadding,
mb15: 1, mb15: 1,
}) })
return ( return (
<div className={containerClasses}> <div className={containerClasses}>
<nav aria-label='Footer' role='navigation' className={[_s.default, _s.flexWrap, _s.flexRow].join(' ')}> <nav aria-label='Footer' role='navigation' className={[_s._, _s.flexWrap, _s.flexRow].join(' ')}>
{ {
linkFooterItems.map((linkFooterItem, i) => { linkFooterItems.map((linkFooterItem, i) => {
if (linkFooterItem.requiresUser && !me) return null if (linkFooterItem.requiresUser && !me) return null

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

@ -35,7 +35,7 @@ class ListItem extends React.PureComponent {
if (!title) { if (!title) {
return ( return (
<div className={[_s.default, _s.bgSecondary, _s.width100PC, _s.height4PX].join(' ')} /> <div className={[_s._, _s.bgSecondary, _s.w100PC, _s.h4PX].join(' ')} />
) )
} }
@ -56,7 +56,7 @@ class ListItem extends React.PureComponent {
const showActive = isActive !== undefined const showActive = isActive !== undefined
const containerClasses = cx({ const containerClasses = cx({
default: 1, _: 1,
cursorPointer: 1, cursorPointer: 1,
noUnderline: 1, noUnderline: 1,
px15: !small, px15: !small,
@ -64,8 +64,8 @@ class ListItem extends React.PureComponent {
px10: small, px10: small,
py10: small, py10: small,
flexRow: 1, flexRow: 1,
alignItemsCenter: 1, aiCenter: 1,
width100PC: 1, w100PC: 1,
outlineNone: 1, outlineNone: 1,
bgTransparent: 1, bgTransparent: 1,
bgSubtle_onHover: 1, bgSubtle_onHover: 1,
@ -76,14 +76,14 @@ class ListItem extends React.PureComponent {
const iconClasses = cx({ const iconClasses = cx({
mr10: !large, mr10: !large,
mr15: large, mr15: large,
colorPrimary: !!icon, cPrimary: !!icon,
circle: !icon && !!image, circle: !icon && !!image,
}) })
const textContainerClasses = cx({ const textContainerClasses = cx({
default: 1, _: 1,
pr5: 1, pr5: 1,
maxWidth100PC42PX: !hideArrow || showActive, maxW100PC42PX: !hideArrow || showActive,
}) })
return ( return (
@ -132,7 +132,7 @@ class ListItem extends React.PureComponent {
<Icon <Icon
id={!!actionIcon ? actionIcon : 'angle-right'} id={!!actionIcon ? actionIcon : 'angle-right'}
size='10px' size='10px'
className={[_s.mlAuto, _s.colorSecondary, _s.flexShrink1].join(' ')} className={[_s.mlAuto, _s.cSecondary, _s.flexShrink1].join(' ')}
/> />
} }

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

@ -20,7 +20,7 @@ class LoadMore extends React.PureComponent {
if (!visible || disabled) return null if (!visible || disabled) return null
return ( return (
<div className={[_s.default, _s.py15, _s.px10].join(' ')}> <div className={[_s._, _s.py15, _s.px10].join(' ')}>
<Button <Button
isBlock isBlock
radiusSmall radiusSmall

26
app/javascript/gabsocial/components/logged_out_navigation_bar.js
View File

@ -15,19 +15,19 @@ class LoggedOutNavigationBar extends React.PureComponent {
return ( return (
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')} classNames={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}
classNamesXS={[_s.default, _s.z4, _s.heightMin98PX, _s.width100PC].join(' ')} classNamesXS={[_s._, _s.z4, _s.minH98PX, _s.w100PC].join(' ')}
> >
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} classNames={[_s._, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
classNamesXS={[_s.default, _s.heightMin98PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} classNamesXS={[_s._, _s.minH98PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')}
> >
<div className={[_s.default, _s.width1255PX, _s.flexRow, _s.flexWrap, _s.height100PC].join(' ')}> <div className={[_s._, _s.w1255PX, _s.flexRow, _s.flexWrap, _s.h100PC].join(' ')}>
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.flexRow, _s.flexGrow1, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR].join(' ')} classNames={[_s._, _s.aiCenter, _s.jcCenter, _s.flexRow, _s.flexGrow1, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.width100PC].join(' ')} classNamesXS={[_s._, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}
> >
<Button <Button
@ -41,7 +41,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
{ {
isProfile && isProfile &&
<ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}> <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.flexRow, _s.mr15].join(' ')}> <div className={[_s._, _s.flexRow, _s.mr15].join(' ')}>
<NavigationBarButton title='Home' icon='home' href='/home' /> <NavigationBarButton title='Home' icon='home' href='/home' />
<NavigationBarButton title='Explore' icon='explore' to='/explore' /> <NavigationBarButton title='Explore' icon='explore' to='/explore' />
<NavigationBarButton title='News' icon='news' to='/news' /> <NavigationBarButton title='News' icon='news' to='/news' />
@ -49,15 +49,15 @@ class LoggedOutNavigationBar extends React.PureComponent {
</ResponsiveComponent> </ResponsiveComponent>
} }
<div className={[_s.default, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxWidth640PX].join(' ')}> <div className={[_s._, _s.flexGrow1, _s.pr10, _s.mrAuto, _s.maxW640PX].join(' ')}>
<Search isInNav /> <Search isInNav />
</div> </div>
</ResponsiveClassesComponent> </ResponsiveClassesComponent>
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow, _s.py5, _s.px10, _s.width330PX, _s.mlAuto].join(' ')} classNames={[_s._, _s.flexRow, _s.py5, _s.px10, _s.w330PX, _s.mlAuto].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.pb5, _s.px10, _s.width100PC].join(' ')} classNamesXS={[_s._, _s.flexRow, _s.pb5, _s.px10, _s.w100PC].join(' ')}
> >
<Button <Button
@ -66,7 +66,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
color='white' color='white'
backgroundColor='none' backgroundColor='none'
href='/auth/sign_in' href='/auth/sign_in'
className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter, _s.py7].join(' ')} className={[_s.borderColorWhite, _s.mr5, _s.flexGrow1, _s.aiCenter, _s.jcCenter, _s.py7].join(' ')}
> >
<Text color='inherit' weight='medium' align='center'> <Text color='inherit' weight='medium' align='center'>
Log in Log in
@ -78,7 +78,7 @@ class LoggedOutNavigationBar extends React.PureComponent {
color='brand' color='brand'
backgroundColor='white' backgroundColor='white'
href='/auth/sign_up' href='/auth/sign_up'
className={[_s.justifyContentCenter, _s.alignItemsCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')} className={[_s.jcCenter, _s.aiCenter, _s.ml5, _s.flexGrow1, _s.py7].join(' ')}
> >
<Text color='inherit' weight='bold' align='center'> <Text color='inherit' weight='bold' align='center'>
Sign up Sign up

14
app/javascript/gabsocial/components/logged_out_sidebar.js
View File

@ -65,21 +65,21 @@ class Sidebar extends React.PureComponent {
] ]
return ( return (
<header role='banner' className={[_s.default, _s.flexGrow1, _s.z3, _s.alignItemsEnd].join(' ')}> <header role='banner' className={[_s._, _s.flexGrow1, _s.z3, _s.aiEnd].join(' ')}>
<div className={[_s.default, _s.width240PX].join(' ')}> <div className={[_s._, _s.w240PX].join(' ')}>
<div className={[_s.default, _s.posFixed, _s.heightCalc53PX, _s.bottom0].join(' ')}> <div className={[_s._, _s.posFixed, _s.calcH53PX, _s.bottom0].join(' ')}>
<div className={[_s.default, _s.height100PC, _s.alignItemsStart, _s.width240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}> <div className={[_s._, _s.h100PC, _s.aiStart, _s.w240PX, _s.pr15, _s.py10, _s.noScrollbar, _s.overflowYScroll].join(' ')}>
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s._, _s.w100PC].join(' ')}>
{ {
!!title && !!title &&
<div className={[_s.default, _s.flexRow, _s.px5, _s.pt10].join(' ')}> <div className={[_s._, _s.flexRow, _s.px5, _s.pt10].join(' ')}>
<Heading size='h1'> <Heading size='h1'>
{title} {title}
</Heading> </Heading>
</div> </div>
} }
</div> </div>
<nav aria-label='Primary' role='navigation' className={[_s.default, _s.width100PC, _s.mb15].join(' ')}> <nav aria-label='Primary' role='navigation' className={[_s._, _s.w100PC, _s.mb15].join(' ')}>
<SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle> <SidebarSectionTitle>{intl.formatMessage(messages.menu)}</SidebarSectionTitle>
{ {
menuItems.map((menuItem, i) => { menuItems.map((menuItem, i) => {

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

@ -130,9 +130,9 @@ class Item extends ImmutablePureComponent {
if (attachment.get('type') === 'unknown') { if (attachment.get('type') === 'unknown') {
return ( return (
<div className={[_s.default, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}> <div className={[_s._, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, borderRadius, width: `${width}%` }}>
<a className={[_s.default, _s.heigh100PC, _s.width100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'> <a className={[_s._, _s.heigh100PC, _s.w100PC, _s.cursorPointer].join(' ')} href={attachment.get('remote_url')} target='_blank' rel='noreferrer noopener'>
<canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} /> <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s._, _s.heigh100PC, _s.w100PC].join(' ')} />
</a> </a>
</div> </div>
) )
@ -155,7 +155,7 @@ class Item extends ImmutablePureComponent {
thumbnail = ( thumbnail = (
<a <a
className={[_s.default, _s.overflowHidden, _s.height100PC, _s.width100PC, _s.cursorPointer].join(' ')} className={[_s._, _s.overflowHidden, _s.h100PC, _s.w100PC, _s.cursorPointer].join(' ')}
href={attachment.get('remote_url') || originalUrl} href={attachment.get('remote_url') || originalUrl}
onClick={this.handleClick} onClick={this.handleClick}
target='_blank' target='_blank'
@ -166,7 +166,7 @@ class Item extends ImmutablePureComponent {
src={previewUrl} src={previewUrl}
srcSet={srcSet} srcSet={srcSet}
sizes={sizes} sizes={sizes}
className={[_s.height100PC, _s.width100PC, _s.objectFitCover].join(' ')} className={[_s.h100PC, _s.w100PC, _s.objectFitCover].join(' ')}
alt={attachment.get('description')} alt={attachment.get('description')}
title={attachment.get('description')} title={attachment.get('description')}
style={{ objectPosition: `${x}% ${y}%` }} style={{ objectPosition: `${x}% ${y}%` }}
@ -178,9 +178,9 @@ class Item extends ImmutablePureComponent {
const autoPlay = !isIOS() && autoPlayGif !== false; const autoPlay = !isIOS() && autoPlayGif !== false;
thumbnail = ( thumbnail = (
<div className={[_s.default, _s.overflowHidden, _s.heigh100PC, _s.width100PC].join(' ')}> <div className={[_s._, _s.overflowHidden, _s.heigh100PC, _s.w100PC].join(' ')}>
<video <video
className={[_s.default, _s.cursorPointer, _s.objectFitCover, _s.width100PC, _s.height100PC, _s.z1].join(' ')} className={[_s._, _s.cursorPointer, _s.objectFitCover, _s.w100PC, _s.h100PC, _s.z1].join(' ')}
aria-label={attachment.get('description')} aria-label={attachment.get('description')}
title={attachment.get('description')} title={attachment.get('description')}
role='application' role='application'
@ -196,7 +196,7 @@ class Item extends ImmutablePureComponent {
playsInline playsInline
/> />
<div className={[_s.default, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr10, _s.mb10, _s.bottom0, _s.right0].join(' ')}> <div className={[_s._, _s.posAbs, _s.z2, _s.radiusSmall, _s.bgBlackOpaque, _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>
@ -207,7 +207,7 @@ class Item extends ImmutablePureComponent {
<div className={[_s.defeault, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}> <div className={[_s.defeault, _s.posAbs].join(' ')} key={attachment.get('id')} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
{ {
!visible && !this.state.loaded && !visible && !this.state.loaded &&
<canvas width={32} height={32} ref={this.setCanvasRef} className={[_s.default, _s.heigh100PC, _s.width100PC].join(' ')} /> <canvas width={32} height={32} ref={this.setCanvasRef} className={[_s._, _s.heigh100PC, _s.w100PC].join(' ')} />
} }
{visible && thumbnail} {visible && thumbnail}
</div> </div>
@ -515,7 +515,7 @@ class MediaGallery extends React.PureComponent {
)) ))
const containerClasses = cx({ const containerClasses = cx({
default: 1, _: 1,
displayBlock: 1, displayBlock: 1,
overflowHidden: 1, overflowHidden: 1,
borderColorSecondary: size === 1 && visible, borderColorSecondary: size === 1 && visible,
@ -538,7 +538,7 @@ class MediaGallery extends React.PureComponent {
{ {
visible && visible &&
<div className={[_s.default, _s.displayBlock, _s.width100PC, _s.height100PC, _s.overflowHidden].join(' ')}> <div className={[_s._, _s.displayBlock, _s.w100PC, _s.h100PC, _s.overflowHidden].join(' ')}>
{children} {children}
</div> </div>
} }

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

@ -77,19 +77,19 @@ class MediaItem extends ImmutablePureComponent {
} }
const containerClasses = cx({ const containerClasses = cx({
default: 1, _: 1,
posAbs: 1, posAbs: 1,
top0: 1, top0: 1,
height100PC: 1, h100PC: 1,
width100PC: 1, w100PC: 1,
py2: !isSmall, py2: !isSmall,
px2: !isSmall, px2: !isSmall,
}) })
const linkClasses = cx({ const linkClasses = cx({
default: 1, _: 1,
width100PC: 1, w100PC: 1,
height100PC: 1, h100PC: 1,
overflowHidden: 1, overflowHidden: 1,
border1PX: 1, border1PX: 1,
borderColorPrimary: 1, borderColorPrimary: 1,
@ -98,7 +98,7 @@ class MediaItem extends ImmutablePureComponent {
const statusUrl = `/${account.getIn(['acct'])}/posts/${status.get('id')}`; const statusUrl = `/${account.getIn(['acct'])}/posts/${status.get('id')}`;
return ( return (
<div className={[_s.default, _s.width25PC, _s.pt25PC].join(' ')}> <div className={[_s._, _s.w25PC, _s.pt25PC].join(' ')}>
<div className={containerClasses}> <div className={containerClasses}>
<NavLink <NavLink
to={statusUrl} to={statusUrl}
@ -111,7 +111,7 @@ class MediaItem extends ImmutablePureComponent {
height='100%' height='100%'
width='100%' width='100%'
ref={this.setCanvasRef} ref={this.setCanvasRef}
className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')} className={[_s._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
/> />
} }
@ -127,19 +127,19 @@ class MediaItem extends ImmutablePureComponent {
/> />
} }
<div className={[_s.default, _s.alignItemsCenter, _s.justifyContentCenter, _s.height100PC, _s.width100PC, _s.z3, _s.posAbs].join(' ')}> <div className={[_s._, _s.aiCenter, _s.jcCenter, _s.h100PC, _s.w100PC, _s.z3, _s.posAbs].join(' ')}>
{ {
!visible && !visible &&
<Icon <Icon
id='hidden' id='hidden'
size='22px' size='22px'
className={[_s.colorWhite].join('')} className={[_s.cWhite].join('')}
/> />
} }
{ {
!!badge && !!badge &&
<div className={[_s.default, _s.posAbs, _s.radiusSmall, _s.bgBlackOpaque, _s.px5, _s.py5, _s.mr5, _s.mt5, _s.mb5, _s.bottom0, _s.right0].join(' ')}> <div className={[_s._, _s.posAbs, _s.radiusSmall, _s.bgBlackOpaque, _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>

6
app/javascript/gabsocial/components/modal/boost_modal.js
View File

@ -40,7 +40,7 @@ class BoostModal extends ImmutablePureComponent {
onClose={onClose} onClose={onClose}
> >
<div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}> <div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
<StatusContainer <StatusContainer
contextType='boost-modal' contextType='boost-modal'
id={status.get('id')} id={status.get('id')}
@ -48,11 +48,11 @@ class BoostModal extends ImmutablePureComponent {
/> />
</div> </div>
<div className={[_s.default, _s.justifyContentCenter, _s.px15, _s.mt5, _s.mb15].join(' ')}> <div className={[_s._, _s.jcCenter, _s.px15, _s.mt5, _s.mb15].join(' ')}>
<Text align='center'> <Text align='center'>
{intl.formatMessage(messages.combo)} {intl.formatMessage(messages.combo)}
</Text> </Text>
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.my10, _s.pt15, _s.pb5].join(' ')}> <div className={[_s._, _s.flexRow, _s.jcCenter, _s.my10, _s.pt15, _s.pb5].join(' ')}>
<Button onClick={this.handleRepost} buttonRef={this.setRef}> <Button onClick={this.handleRepost} buttonRef={this.setRef}>
<Text color='inherit' className={_s.px15}> <Text color='inherit' className={_s.px15}>
{intl.formatMessage(buttonText)} {intl.formatMessage(buttonText)}

4
app/javascript/gabsocial/components/modal/community_timeline_settings_modal.js
View File

@ -31,7 +31,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
title={intl.formatMessage(messages.title)} title={intl.formatMessage(messages.title)}
> >
<div className={[_s.default, _s.pb10].join(' ')}> <div className={[_s._, _s.pb10].join(' ')}>
<SettingSwitch <SettingSwitch
prefix='community_timeline' prefix='community_timeline'
settings={settings} settings={settings}
@ -44,7 +44,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
<Button <Button
backgroundColor='brand' backgroundColor='brand'
color='white' color='white'
className={_s.justifyContentCenter} className={_s.jcCenter}
onClick={this.handleSaveAndClose} onClick={this.handleSaveAndClose}
> >
<Text color='inherit' weight='bold' align='center'> <Text color='inherit' weight='bold' align='center'>

10
app/javascript/gabsocial/components/modal/confirmation_modal.js
View File

@ -35,21 +35,21 @@ class ConfirmationModal extends React.PureComponent {
} = this.props } = this.props
return ( return (
<div className={_s.width330PX}> <div className={_s.w330PX}>
<Block> <Block>
<div className={[_s.default, _s.px15, _s.py15].join(' ')}> <div className={[_s._, _s.px15, _s.py15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15].join(' ')}> <div className={[_s._, _s.px15, _s.py15].join(' ')}>
<Heading size='h1' isCentered> <Heading size='h1' isCentered>
{title} {title}
</Heading> </Heading>
<div className={[_s.default, _s.mt10].join(' ')}> <div className={[_s._, _s.mt10].join(' ')}>
<Text align='center' color='secondary'> <Text align='center' color='secondary'>
{message} {message}
</Text> </Text>
<div className={[_s.default, _s.flexRow, _s.mt10, _s.pt10].join(' ')}> <div className={[_s._, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
<Button <Button
backgroundColor='tertiary' backgroundColor='tertiary'
color='primary' color='primary'

24
app/javascript/gabsocial/components/modal/display_options_modal.js
View File

@ -51,19 +51,19 @@ class DisplayOptionsModal extends ImmutablePureComponent {
title={intl.formatMessage(messages.title)} title={intl.formatMessage(messages.title)}
> >
<div className={[_s.default, _s.mb15].join(' ')}> <div className={[_s._, _s.mb15].join(' ')}>
<Text align='center' color='secondary' size='medium'> <Text align='center' color='secondary' size='medium'>
{intl.formatMessage(messages.message)} {intl.formatMessage(messages.message)}
</Text> </Text>
</div> </div>
<div className={[_s.default, _s.mb15].join(' ')}> <div className={[_s._, _s.mb15].join(' ')}>
<Text weight='bold' size='small' color='secondary'> <Text weight='bold' size='small' color='secondary'>
Font Size Font Size
</Text> </Text>
<div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}> <div className={[_s._, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '12px'}}> <span className={[_s._, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '12px'}}>
Aa Aa
</span> </span>
<input <input
@ -75,18 +75,18 @@ class DisplayOptionsModal extends ImmutablePureComponent {
onChange={this.handleOnFontSizeChange} onChange={this.handleOnFontSizeChange}
className={[_s.flexGrow1, _s.outlineNone, _s.ml15, _s.mr15].join(' ')} className={[_s.flexGrow1, _s.outlineNone, _s.ml15, _s.mr15].join(' ')}
/> />
<span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '18px'}}> <span className={[_s._, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '18px'}}>
Aa Aa
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<div className={[_s.default, _s.mb15].join(' ')}> <div className={[_s._, _s.mb15].join(' ')}>
<Text weight='bold' size='small' color='secondary'> <Text weight='bold' size='small' color='secondary'>
Rounded Rounded
</Text> </Text>
<div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}> <div className={[_s._, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
<SettingSwitch <SettingSwitch
prefix='displayOptions' prefix='displayOptions'
settings={displayOptionsSettings} settings={displayOptionsSettings}
@ -105,11 +105,11 @@ class DisplayOptionsModal extends ImmutablePureComponent {
</div> </div>
</div> </div>
<div className={[_s.default, _s.mb10].join(' ')}> <div className={[_s._, _s.mb10].join(' ')}>
<Text weight='bold' size='small' color='secondary'> <Text weight='bold' size='small' color='secondary'>
Theme Theme
</Text> </Text>
<div className={[_s.default, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}> <div className={[_s._, _s.radiusSmall, _s.flexRow, _s.mt10, _s.py10, _s.bgTertiary].join(' ')}>
<ThemeBlock <ThemeBlock
title='Light' title='Light'
@ -186,9 +186,9 @@ class ThemeBlock extends React.PureComponent {
const id = `theme-${value}` const id = `theme-${value}`
return ( return (
<label className={[_s.default, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}> <label className={[_s._, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
<div <div
className={[_s.default, _s.borderBottom6PX, _s.alignItemsCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')} className={[_s._, _s.borderBottom6PX, _s.aiCenter, _s.flexRow, _s.py10, _s.px15, _s.radiusSmall].join(' ')}
style={style} style={style}
> >
<input <input

18
app/javascript/gabsocial/components/modal/edit_profile_modal.js
View File

@ -115,13 +115,13 @@ class EditProfileModal extends ImmutablePureComponent {
const isVerified = account.get('is_verified') const isVerified = account.get('is_verified')
return ( return (
<div style={{ width: '440px' }} className={[_s.default, _s.modal].join(' ')}> <div style={{ width: '440px' }} className={[_s._, _s.modal].join(' ')}>
<Block> <Block>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
<Button <Button
backgroundColor='none' backgroundColor='none'
title={intl.formatMessage(messages.close)} title={intl.formatMessage(messages.close)}
className={[_s.mrAuto, _s.width60PX, _s.pl0].join(' ')} className={[_s.mrAuto, _s.w60PX, _s.pl0].join(' ')}
onClick={this.handleOnClose} onClick={this.handleOnClose}
color='secondary' color='secondary'
icon='close' icon='close'
@ -132,14 +132,14 @@ class EditProfileModal extends ImmutablePureComponent {
</Heading> </Heading>
<Button <Button
title={intl.formatMessage(messages.save)} title={intl.formatMessage(messages.save)}
className={[_s.mlAuto, _s.width60PX].join(' ')} className={[_s.mlAuto, _s.w60PX].join(' ')}
onClick={this.handleOnSave} onClick={this.handleOnSave}
> >
{intl.formatMessage(messages.save)} {intl.formatMessage(messages.save)}
</Button> </Button>
</div> </div>
<div className={[_s.default, _s.heightMax80VH, _s.overflowYScroll].join(' ')}> <div className={[_s._, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.w100PC, _s.aiCenter].join(' ')}>
<FileInput <FileInput
width='440px' width='440px'
height='180px' height='180px'
@ -147,7 +147,7 @@ class EditProfileModal extends ImmutablePureComponent {
onChange={this.handleCoverPhotoChange} onChange={this.handleCoverPhotoChange}
file={headerSrc} file={headerSrc}
/> />
<div className={[_s.default, _s.mtNeg50PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.mtNeg50PX, _s.aiCenter, _s.jcCenter].join(' ')}>
<FileInput <FileInput
width='132px' width='132px'
height='132px' height='132px'
@ -157,7 +157,7 @@ class EditProfileModal extends ImmutablePureComponent {
onChange={this.handleProfilePhotoChange} onChange={this.handleProfilePhotoChange}
/> />
</div> </div>
<div className={[_s.default, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.width100PC].join(' ')}> <div className={[_s._, _s.py5, _s.px15, _s.mt5, _s.mb15, _s.w100PC].join(' ')}>
{ {
!isVerified && !isVerified &&
<React.Fragment> <React.Fragment>
@ -182,7 +182,7 @@ class EditProfileModal extends ImmutablePureComponent {
<Divider isInvisible /> <Divider isInvisible />
<div className={[_s.default, _s.px10].join(' ')}> <div className={[_s._, _s.px10].join(' ')}>
<Switch <Switch
label='Private account' label='Private account'
checked={locked} checked={locked}

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

@ -55,12 +55,12 @@ class EmbedModal extends ImmutablePureComponent {
title={intl.formatMessage(messages.embed)} title={intl.formatMessage(messages.embed)}
onClose={onClose} onClose={onClose}
> >
<div className={_s.default}> <div className={_s._}>
<Text className={_s.my10}> <Text className={_s.my10}>
{intl.formatMessage(messages.instructions)} {intl.formatMessage(messages.instructions)}
</Text> </Text>
<div className={[_s.default, _s.mb10].join(' ')}> <div className={[_s._, _s.mb10].join(' ')}>
<Input <Input
readOnly readOnly
type='text' type='text'
@ -76,9 +76,9 @@ class EmbedModal extends ImmutablePureComponent {
{intl.formatMessage(messages.preview)} {intl.formatMessage(messages.preview)}
</Text> </Text>
<div className={[_s.default, _s.width100PC, _s.bgSubtle, _s.height220PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.w100PC, _s.bgSubtle, _s.h220PX, _s.aiCenter, _s.jcCenter].join(' ')}>
<iframe <iframe
className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')} className={[_s._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
frameBorder='0' frameBorder='0'
ref={this.setIframeRef} ref={this.setIframeRef}
sandbox='allow-same-origin' sandbox='allow-same-origin'

22
app/javascript/gabsocial/components/modal/gif_picker_modal.js
View File

@ -55,8 +55,8 @@ class GifPickerModal extends React.PureComponent {
return ( return (
<div style={{ width: '560px' }}> <div style={{ width: '560px' }}>
<Block> <Block>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
<div className={[_s.default, _s.flexGrow1, _s.mr5].join(' ')}> <div className={[_s._, _s.flexGrow1, _s.mr5].join(' ')}>
<Input <Input
onChange={this.onChange} onChange={this.onChange}
value={searchText} value={searchText}
@ -74,7 +74,7 @@ class GifPickerModal extends React.PureComponent {
iconSize='10px' iconSize='10px'
/> />
</div> </div>
<div className={[_s.default, _s.heightMin50VH, _s.heightMax80VH, _s.overflowYScroll].join(' ')}> <div className={[_s._, _s.minH50VH, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
{ {
error && error &&
<ColumnIndicator type='error' /> <ColumnIndicator type='error' />
@ -86,7 +86,7 @@ class GifPickerModal extends React.PureComponent {
{ {
(results.length > 0 || categories.length > 0) && (results.length > 0 || categories.length > 0) &&
<div className={[_s.default, _s.width100PC, _s.height100PC].join(' ')}> <div className={[_s._, _s.w100PC, _s.h100PC].join(' ')}>
{ {
results.length === 0 && categories.length > 0 && results.length === 0 && categories.length > 0 &&
<GifCategoriesCollection categories={categories} handleSelectCategory={this.handleSelectCategory} /> <GifCategoriesCollection categories={categories} handleSelectCategory={this.handleSelectCategory} />
@ -119,13 +119,13 @@ class GifResultsCollectionColumn extends React.PureComponent {
const { results } = this.props const { results } = this.props
return ( return (
<div className={[_s.default, _s.flexNormal].join(' ')}> <div className={[_s._, _s.flexNormal].join(' ')}>
{ {
results.map((result, i) => ( results.map((result, i) => (
<button <button
key={`gif-result-item-${i}`} key={`gif-result-item-${i}`}
onClick={() => this.onClick(result)} onClick={() => this.onClick(result)}
className={[_s.default, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')} className={[_s._, _s.outlineNone, _s.bgTransparent, _s.cursorPointer, _s.px2, _s.py2].join(' ')}
> >
<Image <Image
height={result.media[0].tinygif.dims[1]} height={result.media[0].tinygif.dims[1]}
@ -155,7 +155,7 @@ class GifResultsCollection extends React.PureComponent {
const columnIndex = 10 const columnIndex = 10
return ( return (
<div className={[_s.default, _s.height100PC, _s.flexRow, _s.width100PC].join(' ')}> <div className={[_s._, _s.h100PC, _s.flexRow, _s.w100PC].join(' ')}>
<GifResultsCollectionColumn <GifResultsCollectionColumn
results={results.slice(0, columnIndex)} results={results.slice(0, columnIndex)}
handleSelectGifResult={handleSelectGifResult} handleSelectGifResult={handleSelectGifResult}
@ -187,20 +187,20 @@ class GifCategoriesCollection extends React.PureComponent {
const { categories } = this.props const { categories } = this.props
return ( return (
<div className={[_s.default, _s.height100PC, _s.width100PC, _s.flexRow, _s.flexWrap].join(' ')}> <div className={[_s._, _s.h100PC, _s.w100PC, _s.flexRow, _s.flexWrap].join(' ')}>
{ {
categories.map((category, i) => ( categories.map((category, i) => (
<button <button
key={`gif-category-${i}`} key={`gif-category-${i}`}
onClick={() => this.onClick(category.searchterm)} onClick={() => this.onClick(category.searchterm)}
className={[_s.default, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.width50PC].join(' ')} className={[_s._, _s.outlineNone, _s.bgTransparent, _s.px2, _s.py2, _s.w50PC].join(' ')}
> >
<div className={[_s.default, _s.cursorPointer].join(' ')}> <div className={[_s._, _s.cursorPointer].join(' ')}>
<Image <Image
height={150} height={150}
src={category.image} src={category.image}
/> />
<div className={[_s.default, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}> <div className={[_s._, _s.posAbs, _s.videoPlayerControlsBackground, _s.right0, _s.bottom0, _s.left0, _s.py10, _s.px10].join(' ')}>
<Text color='white' weight='bold' size='extraLarge'> <Text color='white' weight='bold' size='extraLarge'>
{category.searchterm} {category.searchterm}
</Text> </Text>

6
app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js
View File

@ -20,7 +20,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
{intl.formatMessage(messages.benefits)} {intl.formatMessage(messages.benefits)}
</Text> </Text>
<div className={[_s.default, _s.my10].join(' ')}> <div className={[_s._, _s.my10].join(' ')}>
<Text>• Schedule Posts</Text> <Text>• Schedule Posts</Text>
<Text>• Get Verified</Text> <Text>• Get Verified</Text>
<Text>• Create Groups</Text> <Text>• Create Groups</Text>
@ -34,8 +34,8 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
color='white' color='white'
icon='pro' icon='pro'
href='https://pro.gab.com' href='https://pro.gab.com'
className={_s.justifyContentCenter} className={_s.jcCenter}
iconClassName={[_s.mr5, _s.colorWhite].join(' ')} iconClassName={[_s.mr5, _s.cWhite].join(' ')}
> >
<Text color='inherit' weight='bold' align='center'> <Text color='inherit' weight='bold' align='center'>
{intl.formatMessage(messages.title)} {intl.formatMessage(messages.title)}

4
app/javascript/gabsocial/components/modal/hashtag_timeline_settings_modal.js
View File

@ -28,7 +28,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
onClose={onClose} onClose={onClose}
> >
<div className={[_s.default, _s.pb10].join(' ')}> <div className={[_s._, _s.pb10].join(' ')}>
<SettingSwitch <SettingSwitch
prefix='community_timeline' prefix='community_timeline'
settings={settings} settings={settings}
@ -41,7 +41,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
<Button <Button
backgroundColor='brand' backgroundColor='brand'
color='white' color='white'
className={_s.justifyContentCenter} className={_s.jcCenter}
onClick={this.handleSaveAndClose} onClick={this.handleSaveAndClose}
> >
<Text color='inherit' weight='bold' align='center'> <Text color='inherit' weight='bold' align='center'>

4
app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js
View File

@ -26,7 +26,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
onClose={onClose} onClose={onClose}
> >
<div className={[_s.default, _s.pb10].join(' ')}> <div className={[_s._, _s.pb10].join(' ')}>
{ {
/* /*
<SettingSwitch <SettingSwitch
@ -75,7 +75,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
<Button <Button
backgroundColor='brand' backgroundColor='brand'
color='white' color='white'
className={_s.justifyContentCenter} className={_s.jcCenter}
onClick={this.handleSaveAndClose} onClick={this.handleSaveAndClose}
> >
<Text color='inherit' weight='bold' align='center'> <Text color='inherit' weight='bold' align='center'>

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

@ -16,7 +16,7 @@ class HotkeysModal extends ImmutablePureComponent {
title={intl.formatMessage(messages.heading)} title={intl.formatMessage(messages.heading)}
onClose={onClose} onClose={onClose}
> >
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s._, _s.flexRow].join(' ')}>
<table> <table>
<thead> <thead>
<tr> <tr>

4
app/javascript/gabsocial/components/modal/list_add_user_modal.js
View File

@ -42,12 +42,12 @@ class ListAddUserModal extends ImmutablePureComponent {
title={title} title={title}
onClose={onClose} onClose={onClose}
> >
<div className={[_s.default, _s.boxShadowNone].join(' ')}> <div className={[_s._, _s.boxShadowNone].join(' ')}>
<div> <div>
{ {
lists && lists.map((list) => { lists && lists.map((list) => {
return ( return (
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.py10, _s.px15, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter, _s.py10, _s.px15, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')}>
<Text color='primary' size='large' className={[_s.overflowHidden, _s.flexNormal, _s.pr5, _s.textOverflowEllipsis].join(' ')}> <Text color='primary' size='large' className={[_s.overflowHidden, _s.flexNormal, _s.pr5, _s.textOverflowEllipsis].join(' ')}>
{list.get('title')} {list.get('title')}
</Text> </Text>

4
app/javascript/gabsocial/components/modal/list_timeline_settings_modal.js
View File

@ -26,7 +26,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
onClose={onClose} onClose={onClose}
> >
<div className={[_s.default, _s.pb10].join(' ')}> <div className={[_s._, _s.pb10].join(' ')}>
<SettingSwitch <SettingSwitch
prefix='list_timeline' prefix='list_timeline'
settings={settings} settings={settings}
@ -71,7 +71,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
<Button <Button
backgroundColor='brand' backgroundColor='brand'
color='white' color='white'
className={_s.justifyContentCenter} className={_s.jcCenter}
onClick={this.handleSaveAndClose} onClick={this.handleSaveAndClose}
> >
<Text color='inherit' weight='bold' align='center'> <Text color='inherit' weight='bold' align='center'>

6
app/javascript/gabsocial/components/modal/loading_modal.js
View File

@ -3,10 +3,10 @@ import Block from '../block'
import ColumnIndicator from '../column_indicator' import ColumnIndicator from '../column_indicator'
const LoadingModal = () => ( const LoadingModal = () => (
<div className={_s.width330PX}> <div className={_s.w330PX}>
<Block> <Block>
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}> <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
<ColumnIndicator type='loading' /> <ColumnIndicator type='loading' />
</div> </div>
</div> </div>

10
app/javascript/gabsocial/components/modal/media_modal.js
View File

@ -173,14 +173,14 @@ class MediaModal extends ImmutablePureComponent {
} }
const navigationClasses = CX({ const navigationClasses = CX({
default: 1, _: 1,
displayNone: navigationHidden, displayNone: navigationHidden,
}) })
return ( return (
<div className={[_s.default, _s.width100PC, _s.height100PC, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
<div <div
className={[_s.default, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} className={[_s._, _s.posAbs, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
role='presentation' role='presentation'
onClick={onClose} onClick={onClose}
> >
@ -254,8 +254,8 @@ class MediaModal extends ImmutablePureComponent {
{ {
media.size > 1 && media.size > 1 &&
<div className={[_s.default, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}> <div className={[_s._, _s.posAbs, _s.bottom0, _s.mb15].join(' ')}>
<div className={[_s.default, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}> <div className={[_s._, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
<Pagination <Pagination
count={media.size} count={media.size}
activeIndex={index} activeIndex={index}

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

@ -109,22 +109,22 @@ class ModalBase extends React.PureComponent {
const visible = !!children const visible = !!children
const containerClasses = CX({ const containerClasses = CX({
default: 1, _: 1,
z4: 1, z4: 1,
height100PC: visible, h100PC: visible,
width100PC: visible, w100PC: visible,
displayNone: !visible, displayNone: !visible,
}) })
const dialogClasses = CX({ const dialogClasses = CX({
default: 1, _: 1,
posFixed: 1, posFixed: 1,
alignItemsCenter: 1, aiCenter: 1,
justifyContentCenter: !isXS || isCenteredXS, jcCenter: !isXS || isCenteredXS,
justifyContentEnd: isXS && !isCenteredXS, jcEnd: isXS && !isCenteredXS,
z4: 1, z4: 1,
width100PC: 1, w100PC: 1,
height100PC: 1, h100PC: 1,
top0: 1, top0: 1,
rightAuto: 1, rightAuto: 1,
bottomAuto: 1, bottomAuto: 1,
@ -138,7 +138,7 @@ class ModalBase extends React.PureComponent {
<React.Fragment> <React.Fragment>
<div <div
role='presentation' role='presentation'
className={[_s.default, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')} className={[_s._, _s.bgBlackOpaque, _s.posFixed, _s.z3, _s.top0, _s.right0, _s.bottom0, _s.left0].join(' ')}
/> />
<div <div
ref={this.setDialog} ref={this.setDialog}

8
app/javascript/gabsocial/components/modal/modal_layout.js
View File

@ -26,17 +26,17 @@ class ModalLayout extends React.PureComponent {
} = this.props } = this.props
const childrenContainerClasses = cx({ const childrenContainerClasses = cx({
default: 1, _: 1,
heightMax80VH: 1, maxH80VH: 1,
overflowYScroll: 1, overflowYScroll: 1,
px15: !noPadding, px15: !noPadding,
py10: !noPadding, py10: !noPadding,
}) })
return ( return (
<div style={{width: `${width}px`}} className={[_s.default, _s.modal].join(' ')}> <div style={{width: `${width}px`}} className={[_s._, _s.modal].join(' ')}>
<Block> <Block>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
<Heading size='h2'> <Heading size='h2'>
{title} {title}
</Heading> </Heading>

18
app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
View File

@ -25,11 +25,11 @@ class ProUpgradeModal extends ImmutablePureComponent {
const imgSuffix = (theme === 'light' || !theme) ? 'light' : 'dark' const imgSuffix = (theme === 'light' || !theme) ? 'light' : 'dark'
const title = ( const title = (
<span className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}> <span className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
<span className={[_s.default, _s.mr2].join(' ')}> <span className={[_s._, _s.mr2].join(' ')}>
Upgrade to Gab Upgrade to Gab
</span> </span>
<span className={[_s.bgPro, _s.colorBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span> <span className={[_s.bgPro, _s.cBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
</span> </span>
) )
@ -46,23 +46,23 @@ class ProUpgradeModal extends ImmutablePureComponent {
{intl.formatMessage(messages.benefits)} {intl.formatMessage(messages.benefits)}
</Text> </Text>
<div className={[_s.default, _s.my10].join(' ')}> <div className={[_s._, _s.my10].join(' ')}>
<Image <Image
src={`/headers/pro-features-${imgSuffix}.png`} src={`/headers/pro-features-${imgSuffix}.png`}
width='100%' width='100%'
height='auto' height='auto'
fit='cover' fit='cover'
className={[_s.heightMax340PX, _s.heightMin200PX].join(' ')} className={[_s.maxH340PX, _s.minH200PX].join(' ')}
/> />
</div> </div>
<div className={[_s.default, _s.flexRow, _s.py10].join(' ')}> <div className={[_s._, _s.flexRow, _s.py10].join(' ')}>
<Button <Button
isOutline isOutline
color='brand' color='brand'
backgroundColor='none' backgroundColor='none'
href={URL_GAB_PRO} href={URL_GAB_PRO}
className={[_s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mr10].join(' ')} className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
> >
<Text color='inherit' weight='medium' align='center'> <Text color='inherit' weight='medium' align='center'>
{intl.formatMessage(messages.learnMore)} {intl.formatMessage(messages.learnMore)}
@ -70,12 +70,12 @@ class ProUpgradeModal extends ImmutablePureComponent {
</Button> </Button>
<Button <Button
href={URL_GAB_PRO} href={URL_GAB_PRO}
className={[_s.flexRow, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')} className={[_s.flexRow, _s.flexGrow1, _s.aiCenter, _s.jcCenter].join(' ')}
> >
<Text color='inherit' size='large' weight='bold' align='center'> <Text color='inherit' size='large' weight='bold' align='center'>
{intl.formatMessage(messages.upgrade)} {intl.formatMessage(messages.upgrade)}
</Text> </Text>
<Icon id='arrow-right' size='20px' className={[_s.colorWhite, _s.ml5].join(' ')} /> <Icon id='arrow-right' size='20px' className={[_s.cWhite, _s.ml5].join(' ')} />
</Button> </Button>
</div> </div>

14
app/javascript/gabsocial/components/modal/report_modal.js
View File

@ -63,12 +63,12 @@ class ReportModal extends ImmutablePureComponent {
> >
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow].join(' ')} classNames={[_s._, _s.flexRow].join(' ')}
classNamesSmall={[_s.default, _s.flexColumnReverse].join(' ')} classNamesSmall={[_s._, _s.flexColumnReverse].join(' ')}
> >
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.width50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')} classNames={[_s._, _s.w50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
classNamesSmall={[_s.default, _s.width100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')} classNamesSmall={[_s._, _s.w100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
> >
<Text color='secondary' size='small'> <Text color='secondary' size='small'>
{intl.formatMessage(messages.hint)} {intl.formatMessage(messages.hint)}
@ -95,10 +95,10 @@ class ReportModal extends ImmutablePureComponent {
</ResponsiveClassesComponent> </ResponsiveClassesComponent>
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.width50PC, _s.heightMax80VH].join(' ')} classNames={[_s._, _s.w50PC, _s.maxH80VH].join(' ')}
classNamesSmall={[_s.default, _s.width100PC, _s.height260PX].join(' ')} classNamesSmall={[_s._, _s.w100PC, _s.h260PX].join(' ')}
> >
<div className={[_s.default, _s.height100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}> <div className={[_s._, _s.h100PC, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
{ {
statusIds.map(statusId => ( statusIds.map(statusId => (
<StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} /> <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />

8
app/javascript/gabsocial/components/modal/status_revisions_modal.js
View File

@ -32,14 +32,14 @@ class StatusRevisionsModal extends ImmutablePureComponent {
width={480} width={480}
onClose={onClose} onClose={onClose}
> >
<div className={[_s.default]}> <div className={[_s._]}>
{ {
revisions.map((revision, i) => { revisions.map((revision, i) => {
const isFirst = i === 0 const isFirst = i === 0
const isLast = i === revisions.size - 1 const isLast = i === revisions.size - 1
const containerClasses = cx({ const containerClasses = cx({
default: 1, _: 1,
pt5: 1, pt5: 1,
pb10: 1, pb10: 1,
mt5: !isFirst, mt5: !isFirst,
@ -49,12 +49,12 @@ class StatusRevisionsModal extends ImmutablePureComponent {
return ( return (
<div key={`status-revision-${i}`} className={containerClasses}> <div key={`status-revision-${i}`} className={containerClasses}>
<div className={[_s.default, _s.pb5].join(' ')}> <div className={[_s._, _s.pb5].join(' ')}>
<Text size='medium'> <Text size='medium'>
{revision.get('text')} {revision.get('text')}
</Text> </Text>
</div> </div>
<div className={[_s.default]}> <div className={[_s._]}>
<Text size='small' color='secondary'> <Text size='small' color='secondary'>
Edited on <RelativeTimestamp timestamp={revision.get('created_at')} /> Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
</Text> </Text>

4
app/javascript/gabsocial/components/modal/unauthorized_modal.js
View File

@ -18,8 +18,8 @@ class UnauthorizedModal extends ImmutablePureComponent {
onClose={onClose} onClose={onClose}
width={480} width={480}
> >
<div className={[_s.default, _s.mt15, _s.mb15, _s.px15, _s.pb15].join(' ')}> <div className={[_s._, _s.mt15, _s.mb15, _s.px15, _s.pb15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15].join(' ')}> <div className={[_s._, _s.px15, _s.py15].join(' ')}>
<Text className={[_s.px15, _s.py15, _s.mb15]} size='medium' weight='medium' align='center'> <Text className={[_s.px15, _s.py15, _s.mb15]} size='medium' weight='medium' align='center'>
{intl.formatMessage(messages.text)} {intl.formatMessage(messages.text)}
</Text> </Text>

44
app/javascript/gabsocial/components/navigation_bar.js
View File

@ -45,17 +45,17 @@ class NavigationBar extends ImmutablePureComponent {
} = this.props } = this.props
return ( return (
<div className={[_s.default, _s.z4, _s.heightMin53PX, _s.width100PC].join(' ')}> <div className={[_s._, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>
<div className={[_s.default, _s.heightMin53PX, _s.bgNavigation, _s.alignItemsCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} > <div className={[_s._, _s.minH53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
<div className={[_s.default, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.width1255PX].join(' ')}> <div className={[_s._, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.flexRow, _s.w1255PX].join(' ')}>
{ /** Default */} { /** Default */}
<Responsive min={BREAKPOINT_EXTRA_SMALL}> <Responsive min={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.flexRow].join(' ')}> <div className={[_s._, _s.flexRow].join(' ')}>
<h1 className={[_s.default, _s.mr15].join(' ')}> <h1 className={[_s._, _s.mr15].join(' ')}>
<Button <Button
to='/' to='/'
isText isText
@ -63,7 +63,7 @@ class NavigationBar extends ImmutablePureComponent {
aria-label='Gab' aria-label='Gab'
color='none' color='none'
backgroundColor='none' backgroundColor='none'
className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')} className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
> >
<Icon id='logo' className={_s.fillNavigationBrand} /> <Icon id='logo' className={_s.fillNavigationBrand} />
</Button> </Button>
@ -71,28 +71,28 @@ class NavigationBar extends ImmutablePureComponent {
{ {
!noSearch && !noSearch &&
<div className={[_s.default, _s.width340PX, _s.mr10].join(' ')}> <div className={[_s._, _s.w340PX, _s.mr10].join(' ')}>
<Search isInNav /> <Search isInNav />
</div> </div>
} }
</div> </div>
<div className={[_s.default, _s.mlAuto].join(' ')}> <div className={[_s._, _s.mlAuto].join(' ')}>
{ {
!noActions && !noActions &&
<div className={[_s.default, _s.height53PX, _s.pl15, _s.flexRow, _s.alignItemsCenter, _s.justifyContentSpaceBetween].join(' ')}> <div className={[_s._, _s.h53PX, _s.pl15, _s.flexRow, _s.aiCenter, _s.jcSpaceBetween].join(' ')}>
<NavigationBarButton title='Home' icon='home' to='/home' /> <NavigationBarButton title='Home' icon='home' to='/home' />
<NavigationBarButton title='Explore' icon='explore' to='/explore' /> <NavigationBarButton title='Explore' icon='explore' to='/explore' />
<NavigationBarButton title='News' icon='news' to='/news' /> <NavigationBarButton title='News' icon='news' to='/news' />
<div className={[_s.default, _s.height20PX, _s.width1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} /> <div className={[_s._, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
<NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' /> <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
<NavigationBarButton attrTitle='Settings' icon='cog' href='/settings/preferences' /> <NavigationBarButton attrTitle='Settings' icon='cog' href='/settings/preferences' />
<div className={[_s.default, _s.height20PX, _s.width1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} /> <div className={[_s._, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
{ {
!!account && !!account &&
@ -100,7 +100,7 @@ class NavigationBar extends ImmutablePureComponent {
ref={this.setAvatarNode} ref={this.setAvatarNode}
title={account.get('display_name')} title={account.get('display_name')}
onClick={this.handleOnOpenNavSettingsPopover} onClick={this.handleOnOpenNavSettingsPopover}
className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter, _s.ml15].join(' ')} className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s._, _s.jcCenter, _s.ml15].join(' ')}
> >
<Avatar account={account} size={32} noHover /> <Avatar account={account} size={32} noHover />
</button> </button>
@ -113,13 +113,13 @@ class NavigationBar extends ImmutablePureComponent {
{ /** Mobile */} { /** Mobile */}
<Responsive max={BREAKPOINT_EXTRA_SMALL}> <Responsive max={BREAKPOINT_EXTRA_SMALL}>
<div className={[_s.default, _s.width84PX, _s.alignItemsStart, _s.pl10].join(' ')}> <div className={[_s._, _s.w84PX, _s.aiStart, _s.pl10].join(' ')}>
{ {
!!account && !showBackBtn && !noActions && !!account && !showBackBtn && !noActions &&
<button <button
title={account.get('display_name')} title={account.get('display_name')}
onClick={onOpenSidebar} onClick={onOpenSidebar}
className={[_s.height53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s.default, _s.justifyContentCenter].join(' ')} className={[_s.h53PX, _s.bgTransparent, _s.outlineNone, _s.cursorPointer, _s._, _s.jcCenter].join(' ')}
> >
<Avatar account={account} size={32} noHover /> <Avatar account={account} size={32} noHover />
</button> </button>
@ -127,7 +127,7 @@ class NavigationBar extends ImmutablePureComponent {
{ {
showBackBtn && showBackBtn &&
<BackButton <BackButton
className={_s.height53PX} className={_s.h53PX}
icon='angle-left' icon='angle-left'
iconSize='18px' iconSize='18px'
iconClassName={[_s.mr5, _s.fillNavigation].join(' ')} iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
@ -135,7 +135,7 @@ class NavigationBar extends ImmutablePureComponent {
} }
{ {
noActions && noActions &&
<h1 className={[_s.default, _s.mr15].join(' ')}> <h1 className={[_s._, _s.mr15].join(' ')}>
<Button <Button
to='/' to='/'
isText isText
@ -143,7 +143,7 @@ class NavigationBar extends ImmutablePureComponent {
aria-label='Gab' aria-label='Gab'
color='none' color='none'
backgroundColor='none' backgroundColor='none'
className={[_s.default, _s.justifyContentCenter, _s.noSelect, _s.noUnderline, _s.height53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')} className={[_s._, _s.jcCenter, _s.noSelect, _s.noUnderline, _s.h53PX, _s.cursorPointer, _s.px10, _s.mr15].join(' ')}
> >
<Icon id='logo' className={_s.fillNavigationBrand} /> <Icon id='logo' className={_s.fillNavigationBrand} />
</Button> </Button>
@ -151,7 +151,7 @@ class NavigationBar extends ImmutablePureComponent {
} }
</div> </div>
<div className={[_s.default, _s.height53PX, _s.justifyContentCenter, _s.mlAuto, _s.mrAuto].join(' ')}> <div className={[_s._, _s.h53PX, _s.jcCenter, _s.mlAuto, _s.mrAuto].join(' ')}>
<Heading size='h1'> <Heading size='h1'>
<span className={_s.colorNavigation}> <span className={_s.colorNavigation}>
{title} {title}
@ -159,8 +159,8 @@ class NavigationBar extends ImmutablePureComponent {
</Heading> </Heading>
</div> </div>
<div className={[_s.default, _s.width84PX, _s.pr15].join(' ')}> <div className={[_s._, _s.w84PX, _s.pr15].join(' ')}>
<div className={[_s.default, _s.bgTransparent, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mlAuto].join(' ')}> <div className={[_s._, _s.bgTransparent, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.mlAuto].join(' ')}>
{ {
actions && actions.map((action, i) => ( actions && actions.map((action, i) => (
<Button <Button
@ -170,7 +170,7 @@ class NavigationBar extends ImmutablePureComponent {
to={action.to || undefined} to={action.to || undefined}
onClick={action.onClick ? () => action.onClick() : undefined} onClick={action.onClick ? () => action.onClick() : undefined}
key={`action-btn-${i}`} key={`action-btn-${i}`}
className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')} className={[_s.ml5, _s.h53PX, _s.jcCenter, _s.px5].join(' ')}
icon={action.icon} icon={action.icon}
iconClassName={_s.fillNavigation} iconClassName={_s.fillNavigation}
iconSize='18px' iconSize='18px'
@ -185,7 +185,7 @@ class NavigationBar extends ImmutablePureComponent {
color='primary' color='primary'
to='/search' to='/search'
key={`action-btn-search`} key={`action-btn-search`}
className={[_s.ml5, _s.height53PX, _s.justifyContentCenter, _s.px5].join(' ')} className={[_s.ml5, _s.h53PX, _s.jcCenter, _s.px5].join(' ')}
icon='search' icon='search'
iconClassName={_s.fillNavigation} iconClassName={_s.fillNavigation}
iconSize='18px' iconSize='18px'

12
app/javascript/gabsocial/components/navigation_bar_button.js
View File

@ -19,11 +19,11 @@ class NavigationBarButton extends React.PureComponent {
const active = false const active = false
const classes = CX({ const classes = CX({
default: 1, _: 1,
height53PX: 1, h53PX: 1,
flexRow: 1, flexRow: 1,
alignItemsCenter: 1, aiCenter: 1,
justifyContentCenter: 1, jcCenter: 1,
outlineNone: 1, outlineNone: 1,
cursorPointer: 1, cursorPointer: 1,
bgTransparent: 1, bgTransparent: 1,
@ -31,9 +31,9 @@ class NavigationBarButton extends React.PureComponent {
colorNavigation: 1, colorNavigation: 1,
px10: !!title, px10: !!title,
px5: !title, px5: !title,
colorWhite: !!title, cWhite: !!title,
fs13PX: !!title, fs13PX: !!title,
fontWeightNormal: !!title, fw400: !!title,
}) })
const iconClasses = CX({ const iconClasses = CX({

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

@ -91,7 +91,7 @@ class Notification extends ImmutablePureComponent {
} }
const containerClasses = CX({ const containerClasses = CX({
default: 1, _: 1,
px10: 1, px10: 1,
cursorPointer: 1, cursorPointer: 1,
bgSubtle_onHover: !isUnread, bgSubtle_onHover: !isUnread,
@ -104,15 +104,15 @@ class Notification extends ImmutablePureComponent {
tabIndex='0' tabIndex='0'
aria-label={`${message} ${createdAt}`} aria-label={`${message} ${createdAt}`}
> >
<div className={[_s.default, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}> <div className={[_s._, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}> <div className={[_s._, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
<Responsive min={BREAKPOINT_EXTRA_SMALL}> <Responsive min={BREAKPOINT_EXTRA_SMALL}>
<Icon id={icon} size='20px' className={[_s.colorPrimary, _s.minWidth20PX, _s.mt5, _s.mr15].join(' ')} /> <Icon id={icon} size='20px' className={[_s.cPrimary, _s.minW20PX, _s.mt5, _s.mr15].join(' ')} />
</Responsive> </Responsive>
<div className={[_s.default, _s.flexNormal].join(' ')}> <div className={[_s._, _s.flexNormal].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.flexWrap].join(' ')}> <div className={[_s._, _s.flexRow, _s.flexWrap].join(' ')}>
{ {
accounts && accounts.map((account, i) => ( accounts && accounts.map((account, i) => (
<NavLink <NavLink
@ -125,8 +125,8 @@ class Notification extends ImmutablePureComponent {
)) ))
} }
</div> </div>
<div className={[_s.default, _s.pt5].join(' ')}> <div className={[_s._, _s.pt5].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsEnd].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiEnd].join(' ')}>
<div className={_s.text}> <div className={_s.text}>
{ {
accounts && accounts.slice(0, 1).map((account, i) => ( accounts && accounts.slice(0, 1).map((account, i) => (
@ -151,7 +151,7 @@ class Notification extends ImmutablePureComponent {
</div> </div>
{ {
!!statusId && !!statusId &&
<div className={[_s.default, _s.pt10, _s.mt5].join(' ')}> <div className={[_s._, _s.pt10, _s.mt5].join(' ')}>
<StatusContainer <StatusContainer
contextType='notification' contextType='notification'
id={statusId} id={statusId}

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

@ -23,15 +23,15 @@ class Pagination extends React.PureComponent {
if (isNaN(count)) return if (isNaN(count)) return
return ( return (
<ul className={[_s.default, _s.flexRow, _s.listStyleNone].join(' ')}> <ul className={[_s._, _s.flexRow, _s.listStyleNone].join(' ')}>
{ {
Array.apply(null, { Array.apply(null, {
length: count length: count
}).map((_, i) => { }).map((_, i) => {
const btnClasses = CX({ const btnClasses = CX({
default: 1, _: 1,
width10PX: 1, w10PX: 1,
height10PX: 1, h10PX: 1,
outlineNone: 1, outlineNone: 1,
circle: 1, circle: 1,
cursorPointer: 1, cursorPointer: 1,
@ -43,7 +43,7 @@ class Pagination extends React.PureComponent {
}) })
return ( return (
<li className={[_s.default, _s.px5].join(' ')} key={`pagination-${i}`}> <li className={[_s._, _s.px5].join(' ')} key={`pagination-${i}`}>
<button <button
tabIndex='0' tabIndex='0'
className={btnClasses} className={btnClasses}

12
app/javascript/gabsocial/components/panel/group_info_panel.js
View File

@ -71,7 +71,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
if (noPanel) { if (noPanel) {
return ( return (
<div className={[_s.default].join(' ')}> <div className={[_s._].join(' ')}>
{ {
!!group && !!group &&
<React.Fragment> <React.Fragment>
@ -87,12 +87,12 @@ class GroupInfoPanel extends ImmutablePureComponent {
<Text className={[_s.mt10, _s.py2].join(' ')} color='secondary' size='small' align='center'> <Text className={[_s.mt10, _s.py2].join(' ')} color='secondary' size='small' align='center'>
{group.get('description')} {group.get('description')}
</Text> </Text>
<div className={[_s.default, _s.mt10, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.mt10, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
<Text color='secondary' size='small' align='center'> <Text color='secondary' size='small' align='center'>
<Icon <Icon
id={isPrivate ? 'lock-filled' : 'globe'} id={isPrivate ? 'lock-filled' : 'globe'}
size='10px' size='10px'
className={_s.colorSecondary} className={_s.cSecondary}
/> />
<span className={_s.ml5}> <span className={_s.ml5}>
{intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)} {intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)}
@ -190,7 +190,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
<React.Fragment> <React.Fragment>
<Divider isSmall /> <Divider isSmall />
<GroupInfoPanelRow title={intl.formatMessage(messages.tags)} icon='shop'> <GroupInfoPanelRow title={intl.formatMessage(messages.tags)} icon='shop'>
<div className={[_s.default, _s.flexRow, _s.justifyContentEnd, _s.flexWrap, _s.pl5].join(' ')}> <div className={[_s._, _s.flexRow, _s.jcEnd, _s.flexWrap, _s.pl5].join(' ')}>
{ {
tags.map((tag) => ( tags.map((tag) => (
<div className={[_s.mr5, _s.mb5].join(' ')}> <div className={[_s.mr5, _s.mb5].join(' ')}>
@ -223,8 +223,8 @@ class GroupInfoPanelRow extends React.PureComponent {
const { icon, title } = this.props const { icon, title } = this.props
return ( return (
<div className={[_s.default, _s.flexRow, _s.py2].join(' ')}> <div className={[_s._, _s.flexRow, _s.py2].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.jcCenter].join(' ')}>
<Icon id={icon} size='16px' /> <Icon id={icon} size='16px' />
<Text weight='bold' size='medium' className={_s.ml10}> <Text weight='bold' size='medium' className={_s.ml10}>
{title} {title}

8
app/javascript/gabsocial/components/panel/list_details_panel.js
View File

@ -47,9 +47,9 @@ class ListDetailsPanel extends ImmutablePureComponent {
} }
{ {
title && createdAt && title && createdAt &&
<div className={_s.default}> <div className={_s._}>
<div className={_s.default}> <div className={_s._}>
<Text weight='medium'> <Text weight='medium'>
{title} {title}
</Text> </Text>
@ -57,8 +57,8 @@ class ListDetailsPanel extends ImmutablePureComponent {
<Divider isSmall /> <Divider isSmall />
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<Icon id='calendar' size='12px' className={_s.colorSecondary} /> <Icon id='calendar' size='12px' className={_s.cSecondary} />
<Text <Text
size='small' size='small'
color='secondary' color='secondary'

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

@ -85,7 +85,7 @@ class ListsPanel extends ImmutablePureComponent {
footerButtonTo={count > maxCount ? '/lists' : undefined} footerButtonTo={count > maxCount ? '/lists' : undefined}
noPadding noPadding
> >
<div className={[_s.default, _s.boxShadowNone].join(' ')}> <div className={[_s._, _s.boxShadowNone].join(' ')}>
<List <List
scrollKey='lists_sidebar_panel' scrollKey='lists_sidebar_panel'
items={listItems} items={listItems}

4
app/javascript/gabsocial/components/panel/media_gallery_panel.js
View File

@ -70,7 +70,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined} headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
headerButtonTo={!!account ? `/${account.get('acct')}/media` : undefined} headerButtonTo={!!account ? `/${account.get('acct')}/media` : undefined}
> >
<div className={[_s.default, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}> <div className={[_s._, _s.flexRow, _s.flexWrap, _s.px10, _s.py10].join(' ')}>
{ {
!!account && attachments.size > 0 && !!account && attachments.size > 0 &&
attachments.slice(0, 16).map((attachment, i) => ( attachments.slice(0, 16).map((attachment, i) => (
@ -84,7 +84,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
} }
{ {
!account || (attachments.size === 0 && isLoading) && !account || (attachments.size === 0 && isLoading) &&
<div className={[_s.default, _s.width100PC].join(' ')}> <div className={[_s._, _s.w100PC].join(' ')}>
<MediaGalleryPanelPlaceholder /> <MediaGalleryPanelPlaceholder />
</div> </div>
} }

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

@ -37,18 +37,18 @@ export default class PanelLayout extends React.PureComponent {
} = this.props } = this.props
return ( return (
<aside className={[_s.default, _s.mb15].join(' ')}> <aside className={[_s._, _s.mb15].join(' ')}>
<Block> <Block>
{ {
(title || subtitle) && (title || subtitle) &&
<div className={[_s.default, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.px15, _s.py10].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<Heading size='h2'> <Heading size='h2'>
{title} {title}
</Heading> </Heading>
{ {
(!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) && (!!headerButtonTitle && (!!headerButtonAction || !!headerButtonTo)) &&
<div className={[_s.default, _s.mlAuto].join(' ')}> <div className={[_s._, _s.mlAuto].join(' ')}>
<Button <Button
isText isText
backgroundColor='none' backgroundColor='none'
@ -74,7 +74,7 @@ export default class PanelLayout extends React.PureComponent {
{ {
!noPadding && !noPadding &&
<div className={[_s.default, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.px15, _s.py10].join(' ')}>
{children} {children}
</div> </div>
} }
@ -85,7 +85,7 @@ export default class PanelLayout extends React.PureComponent {
{ {
(!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo || !!footerButtonHref)) && (!!footerButtonTitle && (!!footerButtonAction || !!footerButtonTo || !!footerButtonHref)) &&
<div className={_s.default}> <div className={_s._}>
<Button <Button
isText isText
color='none' color='none'

14
app/javascript/gabsocial/components/panel/pro_panel.js
View File

@ -27,11 +27,11 @@ class ProPanel extends React.PureComponent {
if (isPro) return null if (isPro) return null
const title = ( const title = (
<span className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}> <span className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
<span className={[_s.default, _s.mr2].join(' ')}> <span className={[_s._, _s.mr2].join(' ')}>
Upgrade to Gab Upgrade to Gab
</span> </span>
<span className={[_s.bgPro, _s.colorBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span> <span className={[_s.bgPro, _s.cBlack, _s.radiusSmall, _s.px5, _s.py5].join(' ')}>PRO</span>
</span> </span>
) )
@ -41,13 +41,13 @@ class ProPanel extends React.PureComponent {
subtitle={intl.formatMessage(messages.text)} subtitle={intl.formatMessage(messages.text)}
> >
<div className={[_s.default, _s.flexRow, _s.pb5].join(' ')}> <div className={[_s._, _s.flexRow, _s.pb5].join(' ')}>
<Button <Button
isOutline isOutline
color='brand' color='brand'
backgroundColor='none' backgroundColor='none'
href={URL_GAB_PRO} href={URL_GAB_PRO}
className={[_s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mr10].join(' ')} className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
> >
<Text color='inherit' weight='medium' align='center'> <Text color='inherit' weight='medium' align='center'>
Learn more Learn more
@ -55,12 +55,12 @@ class ProPanel extends React.PureComponent {
</Button> </Button>
<Button <Button
href={URL_GAB_PRO} href={URL_GAB_PRO}
className={[_s.flexRow, _s.flexGrow1, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')} className={[_s.flexRow, _s.flexGrow1, _s.aiCenter, _s.jcCenter].join(' ')}
> >
<Text color='inherit' size='large' weight='bold' align='center'> <Text color='inherit' size='large' weight='bold' align='center'>
Upgrade Upgrade
</Text> </Text>
<Icon id='arrow-right' size='20px' className={[_s.colorWhite, _s.ml5].join(' ')} /> <Icon id='arrow-right' size='20px' className={[_s.cWhite, _s.ml5].join(' ')} />
</Button> </Button>
</div> </div>

12
app/javascript/gabsocial/components/panel/profile_info_panel.js
View File

@ -58,7 +58,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
return ( return (
<Wrapper title={intl.formatMessage(messages.title)}> <Wrapper title={intl.formatMessage(messages.title)}>
<div className={[_s.default].join(' ')}> <div className={[_s._].join(' ')}>
{ {
hasNote && hasNote &&
<React.Fragment> <React.Fragment>
@ -67,8 +67,8 @@ class ProfileInfoPanel extends ImmutablePureComponent {
</React.Fragment> </React.Fragment>
} }
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<Icon id='calendar' size='12px' className={_s.colorSecondary} /> <Icon id='calendar' size='12px' className={_s.cSecondary} />
<Text <Text
size='small' size='small'
color='secondary' color='secondary'
@ -86,7 +86,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
hasBadges && hasBadges &&
<React.Fragment> <React.Fragment>
<Divider isSmall /> <Divider isSmall />
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
{ {
isPro && isPro &&
<div className={[_s.mr5, _s.radiusSmall, _s.bgPro, _s.py2, _s.px5].join(' ')}> <div className={[_s.mr5, _s.radiusSmall, _s.bgPro, _s.py2, _s.px5].join(' ')}>
@ -111,12 +111,12 @@ class ProfileInfoPanel extends ImmutablePureComponent {
{ {
fields.size > 0 && fields.size > 0 &&
<div className={[_s.default]}> <div className={[_s._]}>
{ {
fields.map((pair, i) => ( fields.map((pair, i) => (
<React.Fragment> <React.Fragment>
<Divider isSmall /> <Divider isSmall />
<dl className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')} key={`profile-field-${i}`}> <dl className={[_s._, _s.flexRow, _s.aiCenter].join(' ')} key={`profile-field-${i}`}>
<dt <dt
className={[_s.text, _s.dangerousContent, _s.pr5].join(' ')} className={[_s.text, _s.dangerousContent, _s.pr5].join(' ')}
dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}

4
app/javascript/gabsocial/components/panel/profile_stats_panel.js
View File

@ -46,8 +46,8 @@ class ProfileStatsPanel extends ImmutablePureComponent {
{ {
!!account && !!account &&
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow].join(' ')} classNames={[_s._, _s.flexRow].join(' ')}
classNamesXS={[_s.default, _s.flexRow, _s.mt15, _s.pt10].join(' ')} classNamesXS={[_s._, _s.flexRow, _s.mt15, _s.pt10].join(' ')}
> >
<UserStat <UserStat
title={intl.formatMessage(messages.gabs)} title={intl.formatMessage(messages.gabs)}

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

@ -74,7 +74,7 @@ class ShopPanel extends React.PureComponent {
footerButtonTitle={intl.formatMessage(messages.shop_now)} footerButtonTitle={intl.formatMessage(messages.shop_now)}
footerButtonHref={URL_DISSENTER_SHOP} footerButtonHref={URL_DISSENTER_SHOP}
> >
<div className={[_s.default, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}> <div className={[_s._, _s.flexRow, _s.flexWrap, _s.pl5, _s.pt5].join(' ')}>
{ {
items.map((block, i) => ( items.map((block, i) => (
<ShopItem <ShopItem

18
app/javascript/gabsocial/components/panel/sign_up_log_in_panel.js
View File

@ -28,23 +28,23 @@ class SignUpLogInPanel extends React.PureComponent {
if (me) return null if (me) return null
const containerClasses = CX({ const containerClasses = CX({
default: 1, _: 1,
radiusSmall: 1, radiusSmall: 1,
overflowHidden: 1, overflowHidden: 1,
bgPrimary: 1, bgPrimary: 1,
boxShadowBlock: 1, boxShadowBlock: 1,
py15: 1, py15: 1,
justifyContentCenter: 1, jcCenter: 1,
heigh315PX: !isXS, heigh315PX: !isXS,
height158PX: isXS, h158PX: isXS,
}) })
return ( return (
<aside className={[_s.default, _s.mb15].join(' ')}> <aside className={[_s._, _s.mb15].join(' ')}>
<div className={containerClasses}> <div className={containerClasses}>
<div className={[_s.default]}> <div className={[_s._]}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.px15, _s.py10].join(' ')}>
<div className={[_s.default].join(' ')}> <div className={[_s._].join(' ')}>
<Text color='primary' size='extraExtraLarge' weight='bold' align='center' tag='h2'> <Text color='primary' size='extraExtraLarge' weight='bold' align='center' tag='h2'>
{intl.formatMessage(messages.title)} {intl.formatMessage(messages.title)}
</Text> </Text>
@ -57,8 +57,8 @@ class SignUpLogInPanel extends React.PureComponent {
{ {
!isXS && !isXS &&
<div className={[_s.default, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.px15, _s.py10].join(' ')}>
<div className={[_s.default, _s.pb5].join(' ')}> <div className={[_s._, _s.pb5].join(' ')}>
<Button <Button
isOutline isOutline
color='white' color='white'

4
app/javascript/gabsocial/components/panel/sign_up_panel.js
View File

@ -31,13 +31,13 @@ class SignUpPanel extends React.PureComponent {
title={intl.formatMessage(messages.title)} title={intl.formatMessage(messages.title)}
subtitle={intl.formatMessage(messages.subtitle)} subtitle={intl.formatMessage(messages.subtitle)}
> >
<div className={[_s.default, _s.flexRow, _s.pb5].join(' ')}> <div className={[_s._, _s.flexRow, _s.pb5].join(' ')}>
<Button <Button
isOutline isOutline
color='brand' color='brand'
backgroundColor='none' backgroundColor='none'
href='/auth/sign_in' href='/auth/sign_in'
className={[_s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.mr10].join(' ')} className={[_s.flexRow, _s.aiCenter, _s.jcCenter, _s.mr10].join(' ')}
> >
<Text color='inherit' weight='medium' align='center' className={_s.px10}> <Text color='inherit' weight='medium' align='center' className={_s.px10}>
{intl.formatMessage(messages.login)} {intl.formatMessage(messages.login)}

18
app/javascript/gabsocial/components/panel/status_promotion_panel.js
View File

@ -56,7 +56,7 @@ class StatusPromotionPanel extends ImmutablePureComponent {
const { status } = this.props const { status } = this.props
const containerClasses = CX({ const containerClasses = CX({
default: 1, _: 1,
pb10: !!status ? status.get('media_attachments').size === 0 : false, pb10: !!status ? status.get('media_attachments').size === 0 : false,
}) })
@ -67,23 +67,23 @@ class StatusPromotionPanel extends ImmutablePureComponent {
} }
{ {
!!status && !!status &&
<div className={_s.default}> <div className={_s._}>
<div className={[_s.default, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.px15, _s.py10].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.mt5].join(' ')}> <div className={[_s._, _s.flexRow, _s.mt5].join(' ')}>
<NavLink <NavLink
to={`/${status.getIn(['account', 'acct'])}`} to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])} title={status.getIn(['account', 'acct'])}
className={[_s.default, _s.mr10].join(' ')} className={[_s._, _s.mr10].join(' ')}
> >
<Avatar account={status.get('account')} size={28} /> <Avatar account={status.get('account')} size={28} />
</NavLink> </NavLink>
<div className={[_s.default, _s.alignItemsStart, _s.flexGrow1, _s.mt5].join(' ')}> <div className={[_s._, _s.aiStart, _s.flexGrow1, _s.mt5].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.width100PC, _s.alignItemsStart].join(' ')}> <div className={[_s._, _s.flexRow, _s.w100PC, _s.aiStart].join(' ')}>
<NavLink <NavLink
className={[_s.default, _s.flexRow, _s.alignItemsStart, _s.noUnderline].join(' ')} className={[_s._, _s.flexRow, _s.aiStart, _s.noUnderline].join(' ')}
to={`/${status.getIn(['account', 'acct'])}`} to={`/${status.getIn(['account', 'acct'])}`}
title={status.getIn(['account', 'acct'])} title={status.getIn(['account', 'acct'])}
> >
@ -96,7 +96,7 @@ class StatusPromotionPanel extends ImmutablePureComponent {
color='none' color='none'
icon='ellipsis' icon='ellipsis'
iconSize='20px' iconSize='20px'
iconClassName={_s.colorSecondary} iconClassName={_s.cSecondary}
className={_s.mlAuto} className={_s.mlAuto}
onClick={() => {}} onClick={() => {}}
// buttonRef={this.setStatusOptionsButton} // buttonRef={this.setStatusOptionsButton}

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

@ -91,13 +91,13 @@ class UserPanel extends ImmutablePureComponent {
return ( return (
<PanelLayout noPadding> <PanelLayout noPadding>
<div <div
className={[_s.default, _s.height122PX].join(' ')} className={[_s._, _s.h122PX].join(' ')}
onMouseEnter={this.handleOnMouseEnter} onMouseEnter={this.handleOnMouseEnter}
onMouseLeave={this.handleOnMouseLeave} onMouseLeave={this.handleOnMouseLeave}
> >
<Image <Image
alt={intl.formatMessage(messages.headerPhoto)} alt={intl.formatMessage(messages.headerPhoto)}
className={_s.height122PX} className={_s.h122PX}
src={account.get('header_static')} src={account.get('header_static')}
/> />
<Button <Button
@ -112,18 +112,18 @@ class UserPanel extends ImmutablePureComponent {
</div> </div>
<NavLink <NavLink
className={[_s.default, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')} className={[_s._, _s.flexRow, _s.py10, _s.px15, _s.noUnderline].join(' ')}
to={`/${acct}`} to={`/${acct}`}
> >
<div className={[_s.default, _s.mtNeg32PX, _s.circle, _s.borderColorPrimary, _s.border6PX].join(' ')}> <div className={[_s._, _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._, _s.ml15].join(' ')}>
<DisplayName account={account} isMultiline noRelationship noHover /> <DisplayName account={account} isMultiline noRelationship noHover />
</div> </div>
</NavLink> </NavLink>
<div className={[_s.default, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}> <div className={[_s._, _s.mb15, _s.mt5, _s.flexRow, _s.px15].join(' ')}>
<UserStat <UserStat
to={`/${acct}`} to={`/${acct}`}
title={intl.formatMessage(messages.gabs)} title={intl.formatMessage(messages.gabs)}

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

@ -76,7 +76,7 @@ class VerifiedAccountsPanel extends ImmutablePureComponent {
// footerButtonTitle={intl.formatMessage(messages.show_more)} // footerButtonTitle={intl.formatMessage(messages.show_more)}
// footerButtonTo='/explore' // footerButtonTo='/explore'
> >
<div className={_s.default}> <div className={_s._}>
{ {
suggestions.map(accountId => ( suggestions.map(accountId => (
<Account <Account

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

@ -88,7 +88,7 @@ class WhoToFollowPanel extends ImmutablePureComponent {
footerButtonTitle={intl.formatMessage(messages.show_more)} footerButtonTitle={intl.formatMessage(messages.show_more)}
footerButtonTo='/explore' footerButtonTo='/explore'
> >
<div className={_s.default}> <div className={_s._}>
{ {
arr.map((accountId) => ( arr.map((accountId) => (
<Child <Child

14
app/javascript/gabsocial/components/pill_item.js
View File

@ -46,11 +46,11 @@ class PillItem extends React.PureComponent {
const active = isActive || (to === location.pathname && !location.search) || isCurrent const active = isActive || (to === location.pathname && !location.search) || isCurrent
const containerClasses = CX({ const containerClasses = CX({
default: 1, _: 1,
noUnderline: 1, noUnderline: 1,
text: 1, text: 1,
alignItemsCenter: 1, aiCenter: 1,
justifyContentCenter: 1, jcCenter: 1,
py5: 1, py5: 1,
outlineNone: 1, outlineNone: 1,
cursorPointer: 1, cursorPointer: 1,
@ -63,10 +63,10 @@ class PillItem extends React.PureComponent {
}) })
const textParentClasses = CX({ const textParentClasses = CX({
default: 1, _: 1,
height100PC: 1, h100PC: 1,
alignItemsCenter: 1, aiCenter: 1,
justifyContentCenter: 1, jcCenter: 1,
py2: 1, py2: 1,
px15: 1, px15: 1,
}) })

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

@ -14,8 +14,8 @@ class Pills extends React.PureComponent {
return ( return (
<ResponsiveClassesComponent <ResponsiveClassesComponent
classNames={[_s.default, _s.flexWrap, _s.px5, _s.flexRow].join(' ')} classNames={[_s._, _s.flexWrap, _s.px5, _s.flexRow].join(' ')}
classNamesXS={[_s.default, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')} classNamesXS={[_s._, _s.overflowYHidden, _s.overflowXScroll, _s.noScrollbar, _s.pl10, _s.pr15, _s.flexRow].join(' ')}
> >
{ {
!!pills && !!pills &&

2
app/javascript/gabsocial/components/placeholder/account_placeholder.js
View File

@ -10,7 +10,7 @@ class AccountPlaceholder extends React.PureComponent {
const { isLast, isSmall } = this.props const { isLast, isSmall } = this.props
const classes = CX({ const classes = CX({
default: 1, _: 1,
px15: 1, px15: 1,
py7: 1, py7: 1,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,

2
app/javascript/gabsocial/components/placeholder/comment_placeholder.js
View File

@ -8,7 +8,7 @@ export default class CommentPlaceholder extends React.PureComponent {
render() { render() {
const classes = CX({ const classes = CX({
default: 1, _: 1,
px15: 1, px15: 1,
py10: 1, py10: 1,
}) })

2
app/javascript/gabsocial/components/placeholder/group_list_item_placeholder.js
View File

@ -10,7 +10,7 @@ class GroupListItemPlaceholder extends React.PureComponent {
const { isLast } = this.props const { isLast } = this.props
const classes = CX({ const classes = CX({
default: 1, _: 1,
px15: 1, px15: 1,
py7: 1, py7: 1,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,

4
app/javascript/gabsocial/components/placeholder/list_item_placeholder.js
View File

@ -11,7 +11,7 @@ class ListItemPlaceholder extends React.PureComponent {
const { isLast } = this.props const { isLast } = this.props
const classes = CX({ const classes = CX({
default: 1, _: 1,
px15: 1, px15: 1,
py15: 1, py15: 1,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,
@ -19,7 +19,7 @@ class ListItemPlaceholder extends React.PureComponent {
}) })
const classesXS = CX({ const classesXS = CX({
default: 1, _: 1,
px15: 1, px15: 1,
py7: 1, py7: 1,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,

2
app/javascript/gabsocial/components/placeholder/media_gallery_panel_placeholder.js
View File

@ -6,7 +6,7 @@ export default class MediaGalleryPanelPlaceholder extends React.PureComponent {
render() { render() {
return ( return (
<div className={_s.default}> <div className={_s._}>
<PlaceholderLayout viewBox='0 0 334 164'> <PlaceholderLayout viewBox='0 0 334 164'>
<rect x='0' y='0' rx='4' ry='4' width='76' height='76' /> <rect x='0' y='0' rx='4' ry='4' width='76' height='76' />
<rect x='86' y='0' rx='4' ry='4' width='76' height='76' /> <rect x='86' y='0' rx='4' ry='4' width='76' height='76' />

2
app/javascript/gabsocial/components/placeholder/media_gallery_placeholder.js
View File

@ -6,7 +6,7 @@ export default class MediaGalleryPlaceholder extends React.PureComponent {
render() { render() {
return ( return (
<div className={[_s.default, _s.px5, _s.py5].join(' ')}> <div className={[_s._, _s.px5, _s.py5].join(' ')}>
<PlaceholderLayout viewBox='0 0 400 196'> <PlaceholderLayout viewBox='0 0 400 196'>
<rect x='0' y='0' rx='0' ry='0' width='96' height='96' /> <rect x='0' y='0' rx='0' ry='0' width='96' height='96' />
<rect x='100' y='0' rx='0' ry='0' width='96' height='96' /> <rect x='100' y='0' rx='0' ry='0' width='96' height='96' />

8
app/javascript/gabsocial/components/placeholder/notification_placeholder.js
View File

@ -14,7 +14,7 @@ class NotificationPlaceholder extends React.PureComponent {
const { isLast } = this.props const { isLast } = this.props
const classes = CX({ const classes = CX({
default: 1, _: 1,
px15: 1, px15: 1,
py15: 1, py15: 1,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,
@ -22,7 +22,7 @@ class NotificationPlaceholder extends React.PureComponent {
}) })
const classesXS = CX({ const classesXS = CX({
default: 1, _: 1,
px15: 1, px15: 1,
py15: 1, py15: 1,
borderColorSecondary: !isLast, borderColorSecondary: !isLast,
@ -37,7 +37,7 @@ class NotificationPlaceholder extends React.PureComponent {
<React.Fragment> <React.Fragment>
<ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}> <ResponsiveComponent min={BREAKPOINT_EXTRA_SMALL}>
<div className={classes}> <div className={classes}>
<div className={[_s.default, _s.py2, _s.px2].join(' ')}> <div className={[_s._, _s.py2, _s.px2].join(' ')}>
<PlaceholderLayout viewBox='0 0 400 170'> <PlaceholderLayout viewBox='0 0 400 170'>
<rect x='24' y='34' rx='4' ry='4' width={width2} height='8' /> <rect x='24' y='34' rx='4' ry='4' width={width2} height='8' />
<rect x={left} y='34' rx='4' ry='4' width='12' height='8' /> <rect x={left} y='34' rx='4' ry='4' width='12' height='8' />
@ -61,7 +61,7 @@ class NotificationPlaceholder extends React.PureComponent {
</ResponsiveComponent> </ResponsiveComponent>
<ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}> <ResponsiveComponent max={BREAKPOINT_EXTRA_SMALL}>
<div className={classesXS}> <div className={classesXS}>
<div className={[_s.default, _s.py2, _s.px2].join(' ')}> <div className={[_s._, _s.py2, _s.px2].join(' ')}>
<PlaceholderLayout viewBox='0 0 380 200'> <PlaceholderLayout viewBox='0 0 380 200'>
<circle cx='20' cy='20' r='20' /> <circle cx='20' cy='20' r='20' />
<rect x='0' y='54' rx='5' ry='5' width={width1} height='10' /> <rect x='0' y='54' rx='5' ry='5' width={width1} height='10' />

2
app/javascript/gabsocial/components/placeholder/profile_header_xs_placeholder.js
View File

@ -6,7 +6,7 @@ export default class ProfileHeaderXSPlaceholder extends React.PureComponent {
render() { render() {
return ( return (
<div className={[_s.default, _s.px10, _s.py10].join(' ')}> <div className={[_s._, _s.px10, _s.py10].join(' ')}>
<PlaceholderLayout viewBox='0 0 400 660'> <PlaceholderLayout viewBox='0 0 400 660'>
<rect x='0' y='0' rx='0' ry='0' width='400' height='202' /> <rect x='0' y='0' rx='0' ry='0' width='400' height='202' />
<circle cx='200' cy='200' r='54' /> <circle cx='200' cy='200' r='54' />

2
app/javascript/gabsocial/components/placeholder/profile_info_panel_placeholder.js
View File

@ -6,7 +6,7 @@ export default class ProfileInfoPanelPlaceholder extends React.PureComponent {
render() { render() {
return ( return (
<div className={_s.default}> <div className={_s._}>
<PlaceholderLayout viewBox='0 0 340 108'> <PlaceholderLayout viewBox='0 0 340 108'>
<rect x='0' y='0' rx='4' ry='4' width='330' height='8' /> <rect x='0' y='0' rx='4' ry='4' width='330' height='8' />
<rect x='0' y='18' rx='4' ry='4' width='314' height='8' /> <rect x='0' y='18' rx='4' ry='4' width='314' height='8' />

2
app/javascript/gabsocial/components/placeholder/profile_stats_panel_placeholder.js
View File

@ -6,7 +6,7 @@ export default class ProfileStatsPanelPlaceholder extends React.PureComponent {
render() { render() {
return ( return (
<div className={_s.default}> <div className={_s._}>
<PlaceholderLayout viewBox='0 0 178 20'> <PlaceholderLayout viewBox='0 0 178 20'>
<rect x='2' y='2' rx='4' ry='4' width='24' height='6' /> <rect x='2' y='2' rx='4' ry='4' width='24' height='6' />
<rect x='2' y='12' rx='4' ry='4' width='38' height='6' /> <rect x='2' y='12' rx='4' ry='4' width='38' height='6' />

4
app/javascript/gabsocial/components/placeholder/status_placeholder.js
View File

@ -12,7 +12,7 @@ export default class StatusPlaceholder extends React.PureComponent {
render() { render() {
const containerClasses = CX({ const containerClasses = CX({
default: 1, _: 1,
px15: 1, px15: 1,
mt5: 1, mt5: 1,
mb15: 1, mb15: 1,
@ -23,7 +23,7 @@ export default class StatusPlaceholder extends React.PureComponent {
}) })
const containerClassesXS = CX({ const containerClassesXS = CX({
default: 1, _: 1,
bgPrimary: 1, bgPrimary: 1,
boxShadowBlock: 1, boxShadowBlock: 1,
borderTop1PX: 1, borderTop1PX: 1,

2
app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js
View File

@ -14,7 +14,7 @@ export default class TrendsItemPlaceholder extends React.PureComponent {
const subtitle3Width = getRandomInt(120, 225) const subtitle3Width = getRandomInt(120, 225)
return ( return (
<div className={[_s.default, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}> <div className={[_s._, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}>
<PlaceholderLayout viewBox='0 0 340 138'> <PlaceholderLayout viewBox='0 0 340 138'>
<rect x='0' y='0' rx='3' ry='3' width={title1Width} height='12' /> <rect x='0' y='0' rx='3' ry='3' width={title1Width} height='12' />
<rect x='0' y='23' rx='3' ry='3' width={title2Width} height='12' /> <rect x='0' y='23' rx='3' ry='3' width={title2Width} height='12' />

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

@ -71,12 +71,12 @@ class Poll extends ImmutablePureComponent {
} }
const chartClasses = cx({ const chartClasses = cx({
default: 1, _: 1,
posAbs: 1, posAbs: 1,
top0: 1, top0: 1,
left0: 1, left0: 1,
radiusSmall: 1, radiusSmall: 1,
height100PC: 1, h100PC: 1,
bgSecondary: !leading && !optionHasNoVotes, bgSecondary: !leading && !optionHasNoVotes,
bgTertiary: !leading && optionHasNoVotes, bgTertiary: !leading && optionHasNoVotes,
bgBrandLight: leading, bgBrandLight: leading,
@ -89,7 +89,7 @@ class Poll extends ImmutablePureComponent {
}) })
const listItemClasses = cx({ const listItemClasses = cx({
default: 1, _: 1,
flexRow: 1, flexRow: 1,
py10: showResults, py10: showResults,
mb10: 1, mb10: 1,
@ -102,12 +102,12 @@ class Poll extends ImmutablePureComponent {
}) })
const textContainerClasses = cx({ const textContainerClasses = cx({
default: 1, _: 1,
width100PC: 1, w100PC: 1,
px15: 1, px15: 1,
py10: !showResults, py10: !showResults,
cursorPointer: !showResults, cursorPointer: !showResults,
alignItemsCenter: !showResults, aiCenter: !showResults,
}) })
return ( return (
@ -127,7 +127,7 @@ class Poll extends ImmutablePureComponent {
size='medium' size='medium'
color='primary' color='primary'
weight={(leading && showResults) ? 'bold' : 'normal'} weight={(leading && showResults) ? 'bold' : 'normal'}
className={[_s.displayFlex, _s.flexRow, _s.width100PC, _s.alignItemsCenter].join(' ')} className={[_s.displayFlex, _s.flexRow, _s.w100PC, _s.aiCenter].join(' ')}
> >
{ {
!showResults && !showResults &&
@ -138,7 +138,7 @@ class Poll extends ImmutablePureComponent {
checked={active} checked={active}
onChange={this.handleOptionChange} onChange={this.handleOptionChange}
disabled={disabled} disabled={disabled}
className={[_s.default, _s.mr10].join(' ')} className={[_s._, _s.mr10].join(' ')}
/> />
} }
@ -176,14 +176,14 @@ class Poll extends ImmutablePureComponent {
const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item) const disabled = this.props.disabled || Object.entries(this.state.selected).every(item => !item)
return ( return (
<div className={[_s.default, _s.px15, _s.py10].join(' ')}> <div className={[_s._, _s.px15, _s.py10].join(' ')}>
<ul className={[_s.default, _s.listStyleNone].join(' ')}> <ul className={[_s._, _s.listStyleNone].join(' ')}>
{ {
poll.get('options').map((option, i) => this.renderOption(option, i)) poll.get('options').map((option, i) => this.renderOption(option, i))
} }
</ul> </ul>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}> <div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
{ {
!showResults && me && !showResults && me &&
<Button <Button

4
app/javascript/gabsocial/components/popover/date_picker_popover.js
View File

@ -73,7 +73,7 @@ class DatePickerPopover extends React.PureComponent {
isXS={isXS} isXS={isXS}
onClose={this.handleOnClosePopover} onClose={this.handleOnClosePopover}
> >
<div className={[_s.default, _s.bgSubtle].join(' ')}> <div className={[_s._, _s.bgSubtle].join(' ')}>
<DatePicker <DatePicker
inline inline
target={this} target={this}
@ -102,7 +102,7 @@ class DatePickerPopover extends React.PureComponent {
</div> </div>
{ {
date && date &&
<div className={[_s.default, _s.alignItemsCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}> <div className={[_s._, _s.aiCenter, _s.flexRow, _s.px10, _s.py10, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}>
<Text size='extraSmall' color='secondary'> <Text size='extraSmall' color='secondary'>
<FormattedMessage id='scheduled_for_datetime' defaultMessage='Scheduled for {datetime}' values={{ <FormattedMessage id='scheduled_for_datetime' defaultMessage='Scheduled for {datetime}' values={{
datetime: moment.utc(date).format('lll'), datetime: moment.utc(date).format('lll'),

4
app/javascript/gabsocial/components/popover/error_popover.js
View File

@ -19,8 +19,8 @@ export default class ErrorPopover extends React.PureComponent {
isXS={isXS} isXS={isXS}
onClose={this.props.onClose} onClose={this.props.onClose}
> >
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}> <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
<ColumnIndicator type='error' message='Error loading popover' /> <ColumnIndicator type='error' message='Error loading popover' />
</div> </div>
</div> </div>

4
app/javascript/gabsocial/components/popover/loading_popover.js
View File

@ -19,8 +19,8 @@ export default class LoadingPopover extends React.PureComponent {
isXS={isXS} isXS={isXS}
onClose={this.props.onClose} onClose={this.props.onClose}
> >
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}> <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}> <div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
<ColumnIndicator type='loading' /> <ColumnIndicator type='loading' />
</div> </div>
</div> </div>

Some files were not shown because too many files have changed in this diff Show More