moony/Gab-Social
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated styles for icons throughout all components

Browse Source 
• Updated:
- styles for icons throughout all components
This commit is contained in:
mgabdev 2020-08-17 11:56:52 -05:00
parent a3670e8fec
commit 92a89e2425
35 changed files with 57 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -158,7 +158,7 @@ class Account extends ImmutablePureComponent {
onClick={dismissAction}
icon='close'
iconSize='8px'
iconClassName={_s.fillSecondary}
iconClassName={_s.colorSecondary}
/>
)

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

@ -53,7 +53,7 @@ export default class BackButton extends PureComponent {
className={classes}
icon={icon || 'angle-left'}
iconSize={iconSize || '24px'}
iconClassName={iconClassName || [_s.mr5, _s.fillPrimary].join(' ')}
iconClassName={iconClassName || [_s.mr5, _s.colorPrimary].join(' ')}
onClick={this.handleBackClick}
/>
)

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

@ -43,7 +43,7 @@ class BundleColumnError extends PureComponent {
<h1 className={[_s.default, _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(' ')}>
<Icon id='logo' className={_s.fillWhite} />
<Icon id='logo' className={_s.colorWhite} />
</Button>
</h1>
@ -53,7 +53,7 @@ class BundleColumnError extends PureComponent {
<div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}>
<Icon id='warning' size='28px' className={[_s.default, _s.fillSecondary, _s.mb15].join(' ')} />
<Icon id='warning' size='28px' className={[_s.default, _s.colorSecondary, _s.mb15].join(' ')} />
<Text size='medium' className={_s.pt15}>
{formatMessage(messages.body)}

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

@ -164,11 +164,11 @@ export default class Button extends PureComponent {
bgSubtle: backgroundColor === COLORS.secondary,
bgDanger: backgroundColor === COLORS.danger,
colorPrimary: !!children && color === COLORS.primary,
colorSecondary: !!children && color === COLORS.secondary,
colorTertiary: !!children && color === COLORS.tertiary,
colorWhite: !!children && color === COLORS.white,
colorBrand: !!children && color === COLORS.brand,
colorPrimary: color === COLORS.primary,
colorSecondary: color === COLORS.secondary,
colorTertiary: color === COLORS.tertiary,
colorWhite: color === COLORS.white,
colorBrand: color === COLORS.brand,
borderColorBrand: color === COLORS.brand && isOutline,
border1PX: isOutline,
@ -190,12 +190,7 @@ export default class Button extends PureComponent {
bgDangerDark_onHover: backgroundColor === COLORS.danger && !isDisabled,
bgBrand_onHover: color === COLORS.brand && isOutline && !isDisabled,
colorWhite_onHover: !!children && color === COLORS.brand && isOutline && !isDisabled,
fillSecondary: !!icon && color === COLORS.secondary,
fillWhite: !!icon && color === COLORS.white,
fillBrand: !!icon && color === COLORS.brand,
fillWhite_onHover: !!icon && color === COLORS.brand && isOutline,
colorWhite_onHover: color === COLORS.brand && isOutline && !isDisabled,
})
const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'

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

@ -81,7 +81,7 @@ class CommentHeader extends ImmutablePureComponent {
<span className={_s.visiblyHidden}>
{intl.formatMessage(messages.original)}
</span>
<Icon id='mic' size='10px' className={_s.fillBrand} />
<Icon id='mic' size='10px' className={_s.colorBrand} />
</div>
}

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

@ -189,7 +189,7 @@ class DisplayName extends ImmutablePureComponent {
/>
{
account.get('locked') &&
<Icon id='lock-filled' size={`${iconSize - 3}px`} className={[_s.fillPrimary, _s.ml5].join(' ')} />
<Icon id='lock-filled' size={`${iconSize - 3}px`} className={[_s.colorPrimary, _s.ml5].join(' ')} />
}
</bdi>
{

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

@ -71,7 +71,7 @@ export default class ErrorBoundary extends PureComponent {
<h1 className={[_s.default, _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(' ')}>
<Icon id='logo' className={_s.fillWhite} />
<Icon id='logo' className={_s.colorWhite} />
</Button>
</h1>
@ -81,7 +81,7 @@ export default class ErrorBoundary extends PureComponent {
<div className={[_s.default, _s.maxWidth640PX, _s.px15, _s.py10].join(' ')}>
<Icon id='warning' size='28px' className={[_s.default, _s.fillSecondary, _s.mb15].join(' ')} />
<Icon id='warning' size='28px' className={[_s.default, _s.colorSecondary, _s.mb15].join(' ')} />
<Text size='medium' className={_s.pt15}>
<FormattedMessage

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

@ -71,8 +71,8 @@ export default class FileInput extends PureComponent {
})
const iconClasses = CX({
fillSecondary: !hovering,
fillWhite: hovering,
colorSecondary: !hovering,
colorWhite: hovering,
})
return (

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

@ -41,7 +41,7 @@ export default class HashtagItem extends ImmutablePureComponent {
title='Remove'
icon='close'
iconSize='8px'
iconClassName={_s.fillSecondary}
iconClassName={_s.colorSecondary}
className={_s.mlAuto}
/>
}

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

@ -92,7 +92,7 @@ export default class Input extends PureComponent {
<div className={[_s.default, _s.flexGrow1, _s.bgPrimary, _s.border1PX, _s.borderColorSecondary, _s.flexRow, _s.circle, _s.alignItemsCenter].join(' ')}>
{
!!prependIcon &&
<Icon id={prependIcon} size='16px' className={[_s.fillPrimary, _s.ml15, _s.mr5].join(' ')} />
<Icon id={prependIcon} size='16px' className={[_s.colorPrimary, _s.ml15, _s.mr5].join(' ')} />
}
{

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

@ -94,7 +94,7 @@ export default class ListItem extends PureComponent {
const iconClasses = cx({
mr10: !large,
mr15: large,
fillPrimary: !!icon,
colorPrimary: !!icon,
circle: !icon && !!image,
})
@ -150,7 +150,7 @@ export default class ListItem extends PureComponent {
<Icon
id={!!actionIcon ? actionIcon : 'angle-right'}
size='10px'
className={[_s.mlAuto, _s.fillSecondary, _s.flexShrink1].join(' ')}
className={[_s.mlAuto, _s.colorSecondary, _s.flexShrink1].join(' ')}
/>
}

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

@ -137,7 +137,7 @@ export default class MediaItem extends ImmutablePureComponent {
<Icon
id='hidden'
size='22px'
className={[_s.fillWhite].join('')}
className={[_s.colorWhite].join('')}
/>
}

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

@ -45,7 +45,7 @@ class HomeTimelineSettingsModal extends ImmutablePureComponent {
icon='pro'
href='https://pro.gab.com'
className={_s.justifyContentCenter}
iconClassName={[_s.mr5, _s.fillWhite].join(' ')}
iconClassName={[_s.mr5, _s.colorWhite].join(' ')}
>
<Text color='inherit' weight='bold' align='center'>
{intl.formatMessage(messages.title)}

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

@ -93,7 +93,7 @@ class ProUpgradeModal extends ImmutablePureComponent {
<Text color='inherit' size='large' weight='bold' align='center'>
{intl.formatMessage(messages.upgrade)}
</Text>
<Icon id='arrow-right' size='20px' className={[_s.fillWhite, _s.ml5].join(' ')} />
<Icon id='arrow-right' size='20px' className={[_s.colorWhite, _s.ml5].join(' ')} />
</Button>
</div>

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

@ -132,7 +132,7 @@ class Notification extends ImmutablePureComponent {
<div className={[_s.default, _s.flexRow, _s.my10, _s.py10, _s.px10].join(' ')}>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<Icon id={icon} size='20px' className={[_s.fillPrimary, _s.minWidth20PX, _s.mt5, _s.mr15].join(' ')} />
<Icon id={icon} size='20px' className={[_s.colorPrimary, _s.minWidth20PX, _s.mt5, _s.mr15].join(' ')} />
</Responsive>
<div className={[_s.default, _s.flexNormal].join(' ')}>

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

@ -90,7 +90,7 @@ class GroupInfoPanel extends ImmutablePureComponent {
<Icon
id={isPrivate ? 'lock-filled' : 'globe'}
size='10px'
className={_s.fillSecondary}
className={_s.colorSecondary}
/>
<span className={_s.ml5}>
{intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)}

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

@ -60,7 +60,7 @@ class ListDetailsPanel extends ImmutablePureComponent {
<Divider isSmall />
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<Icon id='calendar' size='12px' className={_s.fillSecondary} />
<Icon id='calendar' size='12px' className={_s.colorSecondary} />
<Text
size='small'
color='secondary'

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

@ -58,7 +58,7 @@ class ProPanel extends PureComponent {
<Text color='inherit' size='large' weight='bold' align='center'>
Upgrade
</Text>
<Icon id='arrow-right' size='20px' className={[_s.fillWhite, _s.ml5].join(' ')} />
<Icon id='arrow-right' size='20px' className={[_s.colorWhite, _s.ml5].join(' ')} />
</Button>
</div>

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

@ -67,7 +67,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
}
<div className={[_s.default, _s.flexRow, _s.alignItemsCenter].join(' ')}>
<Icon id='calendar' size='12px' className={_s.fillSecondary} />
<Icon id='calendar' size='12px' className={_s.colorSecondary} />
<Text
size='small'
color='secondary'

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

@ -93,7 +93,7 @@ class StatusPromotionPanel extends ImmutablePureComponent {
color='none'
icon='ellipsis'
iconSize='20px'
iconClassName={_s.fillSecondary}
iconClassName={_s.colorSecondary}
className={_s.mlAuto}
onClick={() => {}}
// buttonRef={this.setStatusOptionsButton}

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

@ -102,8 +102,8 @@ class StatusVisibilityDropdown extends PureComponent {
const iconClasses = cx({
ml10: 1,
mt2: 1,
fillPrimary: !isActive,
fillWhite: isActive,
colorPrimary: !isActive,
colorWhite: isActive,
})
return (

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

@ -166,7 +166,7 @@ class StyleButton extends PureComponent {
const blockType = editorState.getCurrentContent().getBlockForKey(selection.getStartKey()).getType()
const active = type === 'block' ? style === blockType : currentStyle.has(style)
const fillColor = active ? 'fillWhite' : 'fillSecondary'
const iconColor = active ? 'colorWhite' : 'colorSecondary'
const btnClasses = cx({
default: 1,
@ -189,7 +189,7 @@ class StyleButton extends PureComponent {
onMouseDown={this.handleOnClick}
title={label}
>
<Icon id={icon} size='12px' className={_s[fillColor]} />
<Icon id={icon} size='12px' className={_s[iconColor]} />
</button>
)
}

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

@ -49,7 +49,7 @@ export default class Select extends ImmutablePureComponent {
<Icon
id='select'
size='14px'
className={[_s.fillSecondary, _s.posAbs, _s.right0, _s.mr10, _s.bottom0, _s.mb15].join(' ')}
className={[_s.colorSecondary, _s.posAbs, _s.right0, _s.mr10, _s.bottom0, _s.mb15].join(' ')}
/>
</div>
)

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

@ -258,7 +258,7 @@ class Sidebar extends ImmutablePureComponent {
key={`action-btn-${i}`}
className={[_s.ml5, _s.px5].join(' ')}
icon={action.icon}
iconClassName={_s.fillPrimary}
iconClassName={_s.colorPrimary}
iconSize='14px'
/>
))

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

@ -104,7 +104,7 @@ export default class SidebarSectionItem extends PureComponent {
<div className={containerClasses}>
{
icon &&
<Icon id={icon} className={_s.fillPrimary} size={iconSize} />
<Icon id={icon} className={_s.colorPrimary} size={iconSize} />
}
{

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

@ -60,7 +60,7 @@ class SortBlock extends PureComponent {
<Text color='inherit' weight='medium' size='small'>
{value}
</Text>
<Icon id='caret-down' size='6px' className={[_s.fillSecondary, _s.ml5].join(' ')} />
<Icon id='caret-down' size='6px' className={[_s.colorSecondary, _s.ml5].join(' ')} />
</Button>
{
@ -81,7 +81,7 @@ class SortBlock extends PureComponent {
<Text color='inherit' weight='medium' size='small'>
{subValue}
</Text>
<Icon id='caret-down' size='6px' className={[_s.fillSecondary, _s.ml5].join(' ')} />
<Icon id='caret-down' size='6px' className={[_s.colorSecondary, _s.ml5].join(' ')} />
</Button>
</Fragment>
}

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

@ -167,7 +167,7 @@ export default class StatusCard extends ImmutablePureComponent {
{trim(card.get('description') || '', maxDescription)}
</p>
<span className={[_s.default, _s.mtAuto, _s.flexRow, _s.alignItemsCenter, _s.colorSecondary, _s.text, _s.displayFlex, _s.textOverflowEllipsis, _s.fs13PX].join(' ')}>
<Icon id='link' size='10px' className={[_s.fillSecondary, _s.mr5].join(' ')} fixedWidth />
<Icon id='link' size='10px' className={[_s.colorSecondary, _s.mr5].join(' ')} fixedWidth />
{provider}
</span>
</div>
@ -214,7 +214,7 @@ export default class StatusCard extends ImmutablePureComponent {
className={[_s.default, _s.cursorPointer, _s.bgBlackOpaque, _s.radiusSmall, _s.py15, _s.px15].join(' ')}
onClick={this.handleEmbedClick}
>
<Icon id={iconVariant} size='22px' className={[_s.fillWhite].join(' ')} />
<Icon id={iconVariant} size='22px' className={[_s.colorWhite].join(' ')} />
</button>
</div>
}
@ -234,7 +234,7 @@ export default class StatusCard extends ImmutablePureComponent {
} else {
embed = (
<div className={[_s.default, _s.py15, _s.px15, _s.width72PX, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
<Icon id='website' size='22px' className={_s.fillSecondary} />
<Icon id='website' size='22px' className={_s.colorSecondary} />
</div>
)
}

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

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

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

@ -143,7 +143,7 @@ class StatusHeader extends ImmutablePureComponent {
color='none'
icon='ellipsis'
iconSize='20px'
iconClassName={_s.fillSecondary}
iconClassName={_s.colorSecondary}
className={_s.mlAuto}
onClick={this.handleOpenStatusOptionsPopover}
buttonRef={this.setStatusOptionsButton}
@ -167,7 +167,7 @@ class StatusHeader extends ImmutablePureComponent {
<DotTextSeperator />
<span title={visibilityText} className={[_s.default, _s.displayInline, _s.ml5].join(' ')}>
<Icon id={visibilityIcon} size='12px' className={[_s.default, _s.fillSecondary].join(' ')} />
<Icon id={visibilityIcon} size='12px' className={[_s.default, _s.colorSecondary].join(' ')} />
</span>
{
@ -177,7 +177,7 @@ class StatusHeader extends ImmutablePureComponent {
<span title={intl.formatMessage(messages.expirationMessage, {
time: timeUntilExpiration,
})} className={[_s.default, _s.displayInline, _s.ml5].join(' ')}>
<Icon id='stopwatch' size='13px' className={[_s.default, _s.fillSecondary].join(' ')} />
<Icon id='stopwatch' size='13px' className={[_s.default, _s.colorSecondary].join(' ')} />
</span>
</Fragment>
}

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

@ -48,7 +48,7 @@ class StatusPrepend extends ImmutablePureComponent {
return (
<div className={[_s.default, _s.width100PC, _s.alignItemsStart, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
<div className={[_s.default, _s.width100PC, _s.flexRow, _s.alignItemsCenter, _s.py5, _s.px15].join(' ')}>
<Icon id={iconId} size='12px' className={[_s.fillSecondary, _s.mr5].join(' ')} />
<Icon id={iconId} size='12px' className={[_s.colorSecondary, _s.mr5].join(' ')} />
{
isRepost && !isComment &&
<div className={[_s.default, _s.flexRow].join(' ')}>

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

@ -641,7 +641,7 @@ class Video extends ImmutablePureComponent {
onClick={this.togglePlay}
className={[_s.default, _s.outlineNone, _s.cursorPointer, _s.alignItemsCenter, _s.justifyContentCenter, _s.posAbs, _s.bgBlackOpaque, _s.circle, _s.height60PX, _s.width60PX].join(' ')}
>
<Icon id='play' size='24px' className={_s.fillWhite} />
<Icon id='play' size='24px' className={_s.colorWhite} />
</button>
</Responsive>
}
@ -743,7 +743,7 @@ class Video extends ImmutablePureComponent {
icon={paused ? 'play' : 'pause'}
title={paused ? 'Play' : 'Pause'}
iconSize='16px'
iconClassName={_s.fillWhite}
iconClassName={_s.colorWhite}
className={_s.pl0}
/>
@ -755,7 +755,7 @@ class Video extends ImmutablePureComponent {
onClick={this.toggleMute}
icon={muted ? 'audio-mute' : 'audio'}
iconSize='24px'
iconClassName={_s.fillWhite}
iconClassName={_s.colorWhite}
className={[_s.px10, _s.mr10].join(' ')}
title='Volume'
onMouseEnter={this.handleMouseEnterAudio}
@ -776,7 +776,7 @@ class Video extends ImmutablePureComponent {
onClick={this.handleOnClickSettings}
icon='cog'
iconSize='20px'
iconClassName={_s.fillWhite}
iconClassName={_s.colorWhite}
className={[_s.px10, _s.pr0].join(' ')}
buttonRef={this.setSettingsBtnRef}
title='Video stats'
@ -791,7 +791,7 @@ class Video extends ImmutablePureComponent {
onClick={this.togglePip}
icon='pip'
iconSize='20px'
iconClassName={_s.fillWhite}
iconClassName={_s.colorWhite}
className={[_s.px10, _s.pr0].join(' ')}
title='Picture in Picture'
/>
@ -805,7 +805,7 @@ class Video extends ImmutablePureComponent {
icon={fullscreen ? 'minimize-fullscreen' : 'fullscreen'}
title={fullscreen ? 'Minimize fullscreen' : 'Fullscreen'}
iconSize='20px'
iconClassName={_s.fillWhite}
iconClassName={_s.colorWhite}
className={[_s.px10, _s.pr0].join(' ')}
/>
</div>

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

@ -45,8 +45,8 @@ export default class ComposeExtraButton extends PureComponent {
})
const iconClasses = cx({
fillSecondary: !active,
fillWhite: active,
colorSecondary: !active,
colorWhite: active,
})
const iconSize = !!small ? '14px' : '16px'

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

@ -229,7 +229,7 @@ class PollFormOption extends ImmutablePureComponent {
className={[_s.ml5, _s.justifyContentCenter].join(' ')}
icon='close'
iconSize='8px'
iconClassName={_s.fillSecondary}
iconClassName={_s.colorSecondary}
disabled={index <= 1}
title={intl.formatMessage(messages.remove_option)}
onClick={this.handleOptionRemove}

2
app/javascript/gabsocial/features/introduction.js
View File

@ -367,7 +367,7 @@ class Introduction extends ImmutablePureComponent {
<Text color='white' className={_s.px5}>{nextTitle}</Text>
</Responsive>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<Icon id='check' size='14px' className={_s.fillWhite} />
<Icon id='check' size='14px' className={_s.colorWhite} />
</Responsive>
</Fragment>
}

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

@ -429,8 +429,8 @@ pre {
.colorWhite { color: var(--color_white); }
.colorWhite_onHover:hover { color: var(--color_white); }
.colorTertiary { color: var(--text_color_tertiary); }
.colorSecondary { color: var(--text_color_secondary); }
.colorTertiary { color: var(--text_color_tertiary); }
.colorBrand { color: var(--color_brand); }
.colorGabPro { color: var(--color_gold); }