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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,7 @@ class BoostModal extends ImmutablePureComponent {
onClose={onClose}
>
<div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
<div className={[_s._, _s.px15, _s.py10, _s.mt5].join(' ')}>
<StatusContainer
contextType='boost-modal'
id={status.get('id')}
@@ -48,11 +48,11 @@ class BoostModal extends ImmutablePureComponent {
/>
</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'>
{intl.formatMessage(messages.combo)}
</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}>
<Text color='inherit' className={_s.px15}>
{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)}
>
<div className={[_s.default, _s.pb10].join(' ')}>
<div className={[_s._, _s.pb10].join(' ')}>
<SettingSwitch
prefix='community_timeline'
settings={settings}
@@ -44,7 +44,7 @@ class CommunityTimelineSettingsModal extends ImmutablePureComponent {
<Button
backgroundColor='brand'
color='white'
className={_s.justifyContentCenter}
className={_s.jcCenter}
onClick={this.handleSaveAndClose}
>
<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
return (
<div className={_s.width330PX}>
<div className={_s.w330PX}>
<Block>
<div className={[_s.default, _s.px15, _s.py15].join(' ')}>
<div className={[_s.default, _s.px15, _s.py15].join(' ')}>
<div className={[_s._, _s.px15, _s.py15].join(' ')}>
<div className={[_s._, _s.px15, _s.py15].join(' ')}>
<Heading size='h1' isCentered>
{title}
</Heading>
<div className={[_s.default, _s.mt10].join(' ')}>
<div className={[_s._, _s.mt10].join(' ')}>
<Text align='center' color='secondary'>
{message}
</Text>
<div className={[_s.default, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
<div className={[_s._, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
<Button
backgroundColor='tertiary'
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)}
>
<div className={[_s.default, _s.mb15].join(' ')}>
<div className={[_s._, _s.mb15].join(' ')}>
<Text align='center' color='secondary' size='medium'>
{intl.formatMessage(messages.message)}
</Text>
</div>
<div className={[_s.default, _s.mb15].join(' ')}>
<div className={[_s._, _s.mb15].join(' ')}>
<Text weight='bold' size='small' color='secondary'>
Font Size
</Text>
<div className={[_s.default, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<span className={[_s.default, _s.text, _s.colorPrimary].join(' ')} style={{fontSize: '12px'}}>
<div className={[_s._, _s.radiusSmall, _s.mt10, _s.py15, _s.px15, _s.bgTertiary].join(' ')}>
<div className={[_s._, _s.flexRow, _s.aiCenter].join(' ')}>
<span className={[_s._, _s.text, _s.cPrimary].join(' ')} style={{fontSize: '12px'}}>
Aa
</span>
<input
@@ -75,18 +75,18 @@ class DisplayOptionsModal extends ImmutablePureComponent {
onChange={this.handleOnFontSizeChange}
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
</span>
</div>
</div>
</div>
<div className={[_s.default, _s.mb15].join(' ')}>
<div className={[_s._, _s.mb15].join(' ')}>
<Text weight='bold' size='small' color='secondary'>
Rounded
</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
prefix='displayOptions'
settings={displayOptionsSettings}
@@ -105,11 +105,11 @@ class DisplayOptionsModal extends ImmutablePureComponent {
</div>
</div>
<div className={[_s.default, _s.mb10].join(' ')}>
<div className={[_s._, _s.mb10].join(' ')}>
<Text weight='bold' size='small' color='secondary'>
Theme
</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
title='Light'
@@ -186,9 +186,9 @@ class ThemeBlock extends React.PureComponent {
const id = `theme-${value}`
return (
<label className={[_s.default, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
<label className={[_s._, _s.px10, _s.flexGrow1].join(' ')} htmlFor={id}>
<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}
>
<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')
return (
<div style={{ width: '440px' }} className={[_s.default, _s.modal].join(' ')}>
<div style={{ width: '440px' }} className={[_s._, _s.modal].join(' ')}>
<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
backgroundColor='none'
title={intl.formatMessage(messages.close)}
className={[_s.mrAuto, _s.width60PX, _s.pl0].join(' ')}
className={[_s.mrAuto, _s.w60PX, _s.pl0].join(' ')}
onClick={this.handleOnClose}
color='secondary'
icon='close'
@@ -132,14 +132,14 @@ class EditProfileModal extends ImmutablePureComponent {
</Heading>
<Button
title={intl.formatMessage(messages.save)}
className={[_s.mlAuto, _s.width60PX].join(' ')}
className={[_s.mlAuto, _s.w60PX].join(' ')}
onClick={this.handleOnSave}
>
{intl.formatMessage(messages.save)}
</Button>
</div>
<div className={[_s.default, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.alignItemsCenter].join(' ')}>
<div className={[_s._, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
<div className={[_s._, _s.w100PC, _s.aiCenter].join(' ')}>
<FileInput
width='440px'
height='180px'
@@ -147,7 +147,7 @@ class EditProfileModal extends ImmutablePureComponent {
onChange={this.handleCoverPhotoChange}
file={headerSrc}
/>
<div className={[_s.default, _s.mtNeg50PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<div className={[_s._, _s.mtNeg50PX, _s.aiCenter, _s.jcCenter].join(' ')}>
<FileInput
width='132px'
height='132px'
@@ -157,7 +157,7 @@ class EditProfileModal extends ImmutablePureComponent {
onChange={this.handleProfilePhotoChange}
/>
</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 &&
<React.Fragment>
@@ -182,7 +182,7 @@ class EditProfileModal extends ImmutablePureComponent {
<Divider isInvisible />
<div className={[_s.default, _s.px10].join(' ')}>
<div className={[_s._, _s.px10].join(' ')}>
<Switch
label='Private account'
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)}
onClose={onClose}
>
<div className={_s.default}>
<div className={_s._}>
<Text className={_s.my10}>
{intl.formatMessage(messages.instructions)}
</Text>
<div className={[_s.default, _s.mb10].join(' ')}>
<div className={[_s._, _s.mb10].join(' ')}>
<Input
readOnly
type='text'
@@ -76,9 +76,9 @@ class EmbedModal extends ImmutablePureComponent {
{intl.formatMessage(messages.preview)}
</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
className={[_s.default, _s.width100PC, _s.height100PC, _s.z2].join(' ')}
className={[_s._, _s.w100PC, _s.h100PC, _s.z2].join(' ')}
frameBorder='0'
ref={this.setIframeRef}
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 (
<div style={{ width: '560px' }}>
<Block>
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
<div className={[_s.default, _s.flexGrow1, _s.mr5].join(' ')}>
<div className={[_s._, _s.flexRow, _s.aiCenter, _s.jcCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.h53PX, _s.px15].join(' ')}>
<div className={[_s._, _s.flexGrow1, _s.mr5].join(' ')}>
<Input
onChange={this.onChange}
value={searchText}
@@ -74,7 +74,7 @@ class GifPickerModal extends React.PureComponent {
iconSize='10px'
/>
</div>
<div className={[_s.default, _s.heightMin50VH, _s.heightMax80VH, _s.overflowYScroll].join(' ')}>
<div className={[_s._, _s.minH50VH, _s.maxH80VH, _s.overflowYScroll].join(' ')}>
{
error &&
<ColumnIndicator type='error' />
@@ -86,7 +86,7 @@ class GifPickerModal extends React.PureComponent {
{
(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 &&
<GifCategoriesCollection categories={categories} handleSelectCategory={this.handleSelectCategory} />
@@ -119,13 +119,13 @@ class GifResultsCollectionColumn extends React.PureComponent {
const { results } = this.props
return (
<div className={[_s.default, _s.flexNormal].join(' ')}>
<div className={[_s._, _s.flexNormal].join(' ')}>
{
results.map((result, i) => (
<button
key={`gif-result-item-${i}`}
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
height={result.media[0].tinygif.dims[1]}
@@ -155,7 +155,7 @@ class GifResultsCollection extends React.PureComponent {
const columnIndex = 10
return (
<div className={[_s.default, _s.height100PC, _s.flexRow, _s.width100PC].join(' ')}>
<div className={[_s._, _s.h100PC, _s.flexRow, _s.w100PC].join(' ')}>
<GifResultsCollectionColumn
results={results.slice(0, columnIndex)}
handleSelectGifResult={handleSelectGifResult}
@@ -187,20 +187,20 @@ class GifCategoriesCollection extends React.PureComponent {
const { categories } = this.props
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) => (
<button
key={`gif-category-${i}`}
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
height={150}
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'>
{category.searchterm}
</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)}
</Text>
<div className={[_s.default, _s.my10].join(' ')}>
<div className={[_s._, _s.my10].join(' ')}>
<Text>• Schedule Posts</Text>
<Text>• Get Verified</Text>
<Text>• Create Groups</Text>
@@ -34,8 +34,8 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
color='white'
icon='pro'
href='https://pro.gab.com'
className={_s.justifyContentCenter}
iconClassName={[_s.mr5, _s.colorWhite].join(' ')}
className={_s.jcCenter}
iconClassName={[_s.mr5, _s.cWhite].join(' ')}
>
<Text color='inherit' weight='bold' align='center'>
{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}
>
<div className={[_s.default, _s.pb10].join(' ')}>
<div className={[_s._, _s.pb10].join(' ')}>
<SettingSwitch
prefix='community_timeline'
settings={settings}
@@ -41,7 +41,7 @@ class HashtagTimelineSettingsModal extends ImmutablePureComponent {
<Button
backgroundColor='brand'
color='white'
className={_s.justifyContentCenter}
className={_s.jcCenter}
onClick={this.handleSaveAndClose}
>
<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}
>
<div className={[_s.default, _s.pb10].join(' ')}>
<div className={[_s._, _s.pb10].join(' ')}>
{
/*
<SettingSwitch
@@ -75,7 +75,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
<Button
backgroundColor='brand'
color='white'
className={_s.justifyContentCenter}
className={_s.jcCenter}
onClick={this.handleSaveAndClose}
>
<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)}
onClose={onClose}
>
<div className={[_s.default, _s.flexRow].join(' ')}>
<div className={[_s._, _s.flexRow].join(' ')}>
<table>
<thead>
<tr>

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

@@ -42,12 +42,12 @@ class ListAddUserModal extends ImmutablePureComponent {
title={title}
onClose={onClose}
>
<div className={[_s.default, _s.boxShadowNone].join(' ')}>
<div className={[_s._, _s.boxShadowNone].join(' ')}>
<div>
{
lists && lists.map((list) => {
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(' ')}>
{list.get('title')}
</Text>

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

@@ -26,7 +26,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
onClose={onClose}
>
<div className={[_s.default, _s.pb10].join(' ')}>
<div className={[_s._, _s.pb10].join(' ')}>
<SettingSwitch
prefix='list_timeline'
settings={settings}
@@ -71,7 +71,7 @@ class ListTimelineSettingsModal extends ImmutablePureComponent {
<Button
backgroundColor='brand'
color='white'
className={_s.justifyContentCenter}
className={_s.jcCenter}
onClick={this.handleSaveAndClose}
>
<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'
const LoadingModal = () => (
<div className={_s.width330PX}>
<div className={_s.w330PX}>
<Block>
<div className={[_s.default, _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].join(' ')}>
<div className={[_s._, _s.px15, _s.py15, _s.mt15, _s.mb15, _s.aiCenter, _s.jcCenter].join(' ')}>
<ColumnIndicator type='loading' />
</div>
</div>

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

@@ -173,14 +173,14 @@ class MediaModal extends ImmutablePureComponent {
}
const navigationClasses = CX({
default: 1,
_: 1,
displayNone: navigationHidden,
})
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
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'
onClick={onClose}
>
@@ -254,8 +254,8 @@ class MediaModal extends ImmutablePureComponent {
{
media.size > 1 &&
<div className={[_s.default, _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.posAbs, _s.bottom0, _s.mb15].join(' ')}>
<div className={[_s._, _s.saveAreaInsetMB, _s.bgBlackOpaque, _s.circle, _s.py10, _s.px15].join(' ')}>
<Pagination
count={media.size}
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 containerClasses = CX({
default: 1,
_: 1,
z4: 1,
height100PC: visible,
width100PC: visible,
h100PC: visible,
w100PC: visible,
displayNone: !visible,
})
const dialogClasses = CX({
default: 1,
_: 1,
posFixed: 1,
alignItemsCenter: 1,
justifyContentCenter: !isXS || isCenteredXS,
justifyContentEnd: isXS && !isCenteredXS,
aiCenter: 1,
jcCenter: !isXS || isCenteredXS,
jcEnd: isXS && !isCenteredXS,
z4: 1,
width100PC: 1,
height100PC: 1,
w100PC: 1,
h100PC: 1,
top0: 1,
rightAuto: 1,
bottomAuto: 1,
@@ -138,7 +138,7 @@ class ModalBase extends React.PureComponent {
<React.Fragment>
<div
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
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
const childrenContainerClasses = cx({
default: 1,
heightMax80VH: 1,
_: 1,
maxH80VH: 1,
overflowYScroll: 1,
px15: !noPadding,
py10: !noPadding,
})
return (
<div style={{width: `${width}px`}} className={[_s.default, _s.modal].join(' ')}>
<div style={{width: `${width}px`}} className={[_s._, _s.modal].join(' ')}>
<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'>
{title}
</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 title = (
<span className={[_s.default, _s.flexRow, _s.justifyContentCenter, _s.alignItemsCenter].join(' ')}>
<span className={[_s.default, _s.mr2].join(' ')}>
<span className={[_s._, _s.flexRow, _s.jcCenter, _s.aiCenter].join(' ')}>
<span className={[_s._, _s.mr2].join(' ')}>
Upgrade to Gab
</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>
)
@@ -46,23 +46,23 @@ class ProUpgradeModal extends ImmutablePureComponent {
{intl.formatMessage(messages.benefits)}
</Text>
<div className={[_s.default, _s.my10].join(' ')}>
<div className={[_s._, _s.my10].join(' ')}>
<Image
src={`/headers/pro-features-${imgSuffix}.png`}
width='100%'
height='auto'
fit='cover'
className={[_s.heightMax340PX, _s.heightMin200PX].join(' ')}
className={[_s.maxH340PX, _s.minH200PX].join(' ')}
/>
</div>
<div className={[_s.default, _s.flexRow, _s.py10].join(' ')}>
<div className={[_s._, _s.flexRow, _s.py10].join(' ')}>
<Button
isOutline
color='brand'
backgroundColor='none'
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'>
{intl.formatMessage(messages.learnMore)}
@@ -70,12 +70,12 @@ class ProUpgradeModal extends ImmutablePureComponent {
</Button>
<Button
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'>
{intl.formatMessage(messages.upgrade)}
</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>
</div>

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

@@ -63,12 +63,12 @@ class ReportModal extends ImmutablePureComponent {
>
<ResponsiveClassesComponent
classNames={[_s.default, _s.flexRow].join(' ')}
classNamesSmall={[_s.default, _s.flexColumnReverse].join(' ')}
classNames={[_s._, _s.flexRow].join(' ')}
classNamesSmall={[_s._, _s.flexColumnReverse].join(' ')}
>
<ResponsiveClassesComponent
classNames={[_s.default, _s.width50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
classNamesSmall={[_s.default, _s.width100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
classNames={[_s._, _s.w50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}
classNamesSmall={[_s._, _s.w100PC, _s.py10, _s.px15, _s.borderTop1PX, _s.borderColorSecondary].join(' ')}
>
<Text color='secondary' size='small'>
{intl.formatMessage(messages.hint)}
@@ -95,10 +95,10 @@ class ReportModal extends ImmutablePureComponent {
</ResponsiveClassesComponent>
<ResponsiveClassesComponent
classNames={[_s.default, _s.width50PC, _s.heightMax80VH].join(' ')}
classNamesSmall={[_s.default, _s.width100PC, _s.height260PX].join(' ')}
classNames={[_s._, _s.w50PC, _s.maxH80VH].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 => (
<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}
onClose={onClose}
>
<div className={[_s.default]}>
<div className={[_s._]}>
{
revisions.map((revision, i) => {
const isFirst = i === 0
const isLast = i === revisions.size - 1
const containerClasses = cx({
default: 1,
_: 1,
pt5: 1,
pb10: 1,
mt5: !isFirst,
@@ -49,12 +49,12 @@ class StatusRevisionsModal extends ImmutablePureComponent {
return (
<div key={`status-revision-${i}`} className={containerClasses}>
<div className={[_s.default, _s.pb5].join(' ')}>
<div className={[_s._, _s.pb5].join(' ')}>
<Text size='medium'>
{revision.get('text')}
</Text>
</div>
<div className={[_s.default]}>
<div className={[_s._]}>
<Text size='small' color='secondary'>
Edited on <RelativeTimestamp timestamp={revision.get('created_at')} />
</Text>

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

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