From 92a89e2425b9025bc6a6a643675ab236f2feb837 Mon Sep 17 00:00:00 2001 From: mgabdev <> Date: Mon, 17 Aug 2020 11:56:52 -0500 Subject: [PATCH] Updated styles for icons throughout all components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit • Updated: - styles for icons throughout all components --- app/javascript/gabsocial/components/account.js | 2 +- .../gabsocial/components/back_button.js | 2 +- .../gabsocial/components/bundle_column_error.js | 4 ++-- app/javascript/gabsocial/components/button.js | 17 ++++++----------- .../gabsocial/components/comment_header.js | 2 +- .../gabsocial/components/display_name.js | 2 +- .../gabsocial/components/error_boundary.js | 4 ++-- .../gabsocial/components/file_input.js | 4 ++-- .../gabsocial/components/hashtag_item.js | 2 +- app/javascript/gabsocial/components/input.js | 2 +- .../gabsocial/components/list_item.js | 4 ++-- .../gabsocial/components/media_item.js | 2 +- .../modal/group_timeline_settings_modal.js | 2 +- .../components/modal/pro_upgrade_modal.js | 2 +- .../gabsocial/components/notification.js | 2 +- .../components/panel/group_info_panel.js | 2 +- .../components/panel/list_details_panel.js | 2 +- .../gabsocial/components/panel/pro_panel.js | 2 +- .../components/panel/profile_info_panel.js | 2 +- .../components/panel/status_promotion_panel.js | 2 +- .../popover/status_visibility_popover.js | 4 ++-- .../components/rich_text_editor_bar.js | 4 ++-- app/javascript/gabsocial/components/select.js | 2 +- app/javascript/gabsocial/components/sidebar.js | 2 +- .../components/sidebar_section_item.js | 2 +- .../gabsocial/components/sort_block.js | 4 ++-- .../gabsocial/components/status_card.js | 6 +++--- .../gabsocial/components/status_content.js | 2 +- .../gabsocial/components/status_header.js | 6 +++--- .../gabsocial/components/status_prepend.js | 2 +- app/javascript/gabsocial/components/video.js | 12 ++++++------ .../compose/components/compose_extra_button.js | 4 ++-- .../features/compose/components/poll_form.js | 2 +- .../gabsocial/features/introduction.js | 2 +- app/javascript/styles/global.css | 2 +- 35 files changed, 57 insertions(+), 62 deletions(-) diff --git a/app/javascript/gabsocial/components/account.js b/app/javascript/gabsocial/components/account.js index 7d304413..e26597ec 100644 --- a/app/javascript/gabsocial/components/account.js +++ b/app/javascript/gabsocial/components/account.js @@ -158,7 +158,7 @@ class Account extends ImmutablePureComponent { onClick={dismissAction} icon='close' iconSize='8px' - iconClassName={_s.fillSecondary} + iconClassName={_s.colorSecondary} /> ) diff --git a/app/javascript/gabsocial/components/back_button.js b/app/javascript/gabsocial/components/back_button.js index 70bf56dc..a8265aa9 100644 --- a/app/javascript/gabsocial/components/back_button.js +++ b/app/javascript/gabsocial/components/back_button.js @@ -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} /> ) diff --git a/app/javascript/gabsocial/components/bundle_column_error.js b/app/javascript/gabsocial/components/bundle_column_error.js index d3bb8619..597b7602 100644 --- a/app/javascript/gabsocial/components/bundle_column_error.js +++ b/app/javascript/gabsocial/components/bundle_column_error.js @@ -43,7 +43,7 @@ class BundleColumnError extends PureComponent {

@@ -53,7 +53,7 @@ class BundleColumnError extends PureComponent {
- + {formatMessage(messages.body)} diff --git a/app/javascript/gabsocial/components/button.js b/app/javascript/gabsocial/components/button.js index 87d89f41..5edf7f57 100644 --- a/app/javascript/gabsocial/components/button.js +++ b/app/javascript/gabsocial/components/button.js @@ -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' diff --git a/app/javascript/gabsocial/components/comment_header.js b/app/javascript/gabsocial/components/comment_header.js index 196f3b3c..2b39958f 100644 --- a/app/javascript/gabsocial/components/comment_header.js +++ b/app/javascript/gabsocial/components/comment_header.js @@ -81,7 +81,7 @@ class CommentHeader extends ImmutablePureComponent { {intl.formatMessage(messages.original)} - +
} diff --git a/app/javascript/gabsocial/components/display_name.js b/app/javascript/gabsocial/components/display_name.js index b3e67597..d30744fb 100644 --- a/app/javascript/gabsocial/components/display_name.js +++ b/app/javascript/gabsocial/components/display_name.js @@ -189,7 +189,7 @@ class DisplayName extends ImmutablePureComponent { /> { account.get('locked') && - + } { diff --git a/app/javascript/gabsocial/components/error_boundary.js b/app/javascript/gabsocial/components/error_boundary.js index 88d90e03..89205692 100644 --- a/app/javascript/gabsocial/components/error_boundary.js +++ b/app/javascript/gabsocial/components/error_boundary.js @@ -71,7 +71,7 @@ export default class ErrorBoundary extends PureComponent {

@@ -81,7 +81,7 @@ export default class ErrorBoundary extends PureComponent {
- + } diff --git a/app/javascript/gabsocial/components/input.js b/app/javascript/gabsocial/components/input.js index 033b34ce..01661ef3 100644 --- a/app/javascript/gabsocial/components/input.js +++ b/app/javascript/gabsocial/components/input.js @@ -92,7 +92,7 @@ export default class Input extends PureComponent {
{ !!prependIcon && - + } { diff --git a/app/javascript/gabsocial/components/list_item.js b/app/javascript/gabsocial/components/list_item.js index 488da697..61706828 100644 --- a/app/javascript/gabsocial/components/list_item.js +++ b/app/javascript/gabsocial/components/list_item.js @@ -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 { } diff --git a/app/javascript/gabsocial/components/media_item.js b/app/javascript/gabsocial/components/media_item.js index e4cb4d13..c741c296 100644 --- a/app/javascript/gabsocial/components/media_item.js +++ b/app/javascript/gabsocial/components/media_item.js @@ -137,7 +137,7 @@ export default class MediaItem extends ImmutablePureComponent { } diff --git a/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js b/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js index fa1a7ef3..ce60a840 100644 --- a/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js +++ b/app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js @@ -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(' ')} > {intl.formatMessage(messages.title)} diff --git a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js index 3cdf36c0..9ca44e07 100644 --- a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js +++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js @@ -93,7 +93,7 @@ class ProUpgradeModal extends ImmutablePureComponent { {intl.formatMessage(messages.upgrade)} - +
diff --git a/app/javascript/gabsocial/components/notification.js b/app/javascript/gabsocial/components/notification.js index 0ac92824..f2ef4656 100644 --- a/app/javascript/gabsocial/components/notification.js +++ b/app/javascript/gabsocial/components/notification.js @@ -132,7 +132,7 @@ class Notification extends ImmutablePureComponent {
- +
diff --git a/app/javascript/gabsocial/components/panel/group_info_panel.js b/app/javascript/gabsocial/components/panel/group_info_panel.js index 0f02b558..1174a3fd 100644 --- a/app/javascript/gabsocial/components/panel/group_info_panel.js +++ b/app/javascript/gabsocial/components/panel/group_info_panel.js @@ -90,7 +90,7 @@ class GroupInfoPanel extends ImmutablePureComponent { {intl.formatMessage(isPrivate ? messages.privateGroup : messages.publicGroup)} diff --git a/app/javascript/gabsocial/components/panel/list_details_panel.js b/app/javascript/gabsocial/components/panel/list_details_panel.js index 4a5028ce..38258e7f 100644 --- a/app/javascript/gabsocial/components/panel/list_details_panel.js +++ b/app/javascript/gabsocial/components/panel/list_details_panel.js @@ -60,7 +60,7 @@ class ListDetailsPanel extends ImmutablePureComponent {
- + Upgrade - +
diff --git a/app/javascript/gabsocial/components/panel/profile_info_panel.js b/app/javascript/gabsocial/components/panel/profile_info_panel.js index bca56056..5814c82f 100644 --- a/app/javascript/gabsocial/components/panel/profile_info_panel.js +++ b/app/javascript/gabsocial/components/panel/profile_info_panel.js @@ -67,7 +67,7 @@ class ProfileInfoPanel extends ImmutablePureComponent { }
- + {}} // buttonRef={this.setStatusOptionsButton} diff --git a/app/javascript/gabsocial/components/popover/status_visibility_popover.js b/app/javascript/gabsocial/components/popover/status_visibility_popover.js index abf88cd2..9e9d54e2 100644 --- a/app/javascript/gabsocial/components/popover/status_visibility_popover.js +++ b/app/javascript/gabsocial/components/popover/status_visibility_popover.js @@ -102,8 +102,8 @@ class StatusVisibilityDropdown extends PureComponent { const iconClasses = cx({ ml10: 1, mt2: 1, - fillPrimary: !isActive, - fillWhite: isActive, + colorPrimary: !isActive, + colorWhite: isActive, }) return ( diff --git a/app/javascript/gabsocial/components/rich_text_editor_bar.js b/app/javascript/gabsocial/components/rich_text_editor_bar.js index 36f98567..b1a05338 100644 --- a/app/javascript/gabsocial/components/rich_text_editor_bar.js +++ b/app/javascript/gabsocial/components/rich_text_editor_bar.js @@ -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} > - + ) } diff --git a/app/javascript/gabsocial/components/select.js b/app/javascript/gabsocial/components/select.js index 6d48a2a5..b4dffb0b 100644 --- a/app/javascript/gabsocial/components/select.js +++ b/app/javascript/gabsocial/components/select.js @@ -49,7 +49,7 @@ export default class Select extends ImmutablePureComponent {
) diff --git a/app/javascript/gabsocial/components/sidebar.js b/app/javascript/gabsocial/components/sidebar.js index 6f07451a..84835575 100644 --- a/app/javascript/gabsocial/components/sidebar.js +++ b/app/javascript/gabsocial/components/sidebar.js @@ -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' /> )) diff --git a/app/javascript/gabsocial/components/sidebar_section_item.js b/app/javascript/gabsocial/components/sidebar_section_item.js index 9fb52df6..92503870 100644 --- a/app/javascript/gabsocial/components/sidebar_section_item.js +++ b/app/javascript/gabsocial/components/sidebar_section_item.js @@ -104,7 +104,7 @@ export default class SidebarSectionItem extends PureComponent {
{ icon && - + } { diff --git a/app/javascript/gabsocial/components/sort_block.js b/app/javascript/gabsocial/components/sort_block.js index dc7d0119..56da4e31 100644 --- a/app/javascript/gabsocial/components/sort_block.js +++ b/app/javascript/gabsocial/components/sort_block.js @@ -60,7 +60,7 @@ class SortBlock extends PureComponent { {value} - + { @@ -81,7 +81,7 @@ class SortBlock extends PureComponent { {subValue} - + } diff --git a/app/javascript/gabsocial/components/status_card.js b/app/javascript/gabsocial/components/status_card.js index 16097b1f..ab5a4db9 100644 --- a/app/javascript/gabsocial/components/status_card.js +++ b/app/javascript/gabsocial/components/status_card.js @@ -167,7 +167,7 @@ export default class StatusCard extends ImmutablePureComponent { {trim(card.get('description') || '', maxDescription)}

- + {provider}
@@ -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} > - +
} @@ -234,7 +234,7 @@ export default class StatusCard extends ImmutablePureComponent { } else { embed = (
- +
) } diff --git a/app/javascript/gabsocial/components/status_content.js b/app/javascript/gabsocial/components/status_content.js index 29e184b1..1208bcf9 100644 --- a/app/javascript/gabsocial/components/status_content.js +++ b/app/javascript/gabsocial/components/status_content.js @@ -247,7 +247,7 @@ class StatusContent extends ImmutablePureComponent {
- +
- + { @@ -177,7 +177,7 @@ class StatusHeader extends ImmutablePureComponent { - + } diff --git a/app/javascript/gabsocial/components/status_prepend.js b/app/javascript/gabsocial/components/status_prepend.js index 7c10acb4..13c4f6c0 100644 --- a/app/javascript/gabsocial/components/status_prepend.js +++ b/app/javascript/gabsocial/components/status_prepend.js @@ -48,7 +48,7 @@ class StatusPrepend extends ImmutablePureComponent { return (
- + { isRepost && !isComment &&
diff --git a/app/javascript/gabsocial/components/video.js b/app/javascript/gabsocial/components/video.js index dfc207c4..67790be8 100644 --- a/app/javascript/gabsocial/components/video.js +++ b/app/javascript/gabsocial/components/video.js @@ -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(' ')} > - + } @@ -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(' ')} />
diff --git a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js index 131b5f86..e7f45520 100644 --- a/app/javascript/gabsocial/features/compose/components/compose_extra_button.js +++ b/app/javascript/gabsocial/features/compose/components/compose_extra_button.js @@ -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' diff --git a/app/javascript/gabsocial/features/compose/components/poll_form.js b/app/javascript/gabsocial/features/compose/components/poll_form.js index 6b008e5c..f9bf87c7 100644 --- a/app/javascript/gabsocial/features/compose/components/poll_form.js +++ b/app/javascript/gabsocial/features/compose/components/poll_form.js @@ -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} diff --git a/app/javascript/gabsocial/features/introduction.js b/app/javascript/gabsocial/features/introduction.js index be065bf0..4c0ae363 100644 --- a/app/javascript/gabsocial/features/introduction.js +++ b/app/javascript/gabsocial/features/introduction.js @@ -367,7 +367,7 @@ class Introduction extends ImmutablePureComponent { {nextTitle} - + } diff --git a/app/javascript/styles/global.css b/app/javascript/styles/global.css index 2f05d38a..3d126c5e 100644 --- a/app/javascript/styles/global.css +++ b/app/javascript/styles/global.css @@ -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); }