Updated styles for icons throughout all components

• Updated:
- styles for icons throughout all components

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}
       />
     )
 

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}
       />
     )

app/javascript/gabsocial/components/bundle_column_error.js

@@ -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)}

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,
+      colorPrimary: color === COLORS.primary,
-      colorSecondary: !!children && color === COLORS.secondary,
+      colorSecondary: color === COLORS.secondary,
-      colorTertiary: !!children && color === COLORS.tertiary,
+      colorTertiary: color === COLORS.tertiary,
-      colorWhite: !!children && color === COLORS.white,
+      colorWhite: color === COLORS.white,
-      colorBrand: !!children && color === COLORS.brand,
+      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,
+      colorWhite_onHover: 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,
     })
 
     const tagName = !!href ? 'a' : !!to ? 'NavLink' : 'button'

app/javascript/gabsocial/components/comment_header.js

@@ -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>
           }
 

app/javascript/gabsocial/components/display_name.js

@@ -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>
           {

app/javascript/gabsocial/components/error_boundary.js

@@ -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

app/javascript/gabsocial/components/file_input.js

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

app/javascript/gabsocial/components/hashtag_item.js

@@ -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}
             />
           }

app/javascript/gabsocial/components/input.js

@@ -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(' ')} />
           }
 
           {

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 {
           <Icon
             id={!!actionIcon ? actionIcon : 'angle-right'}
             size='10px'
-            className={[_s.mlAuto, _s.fillSecondary, _s.flexShrink1].join(' ')}
+            className={[_s.mlAuto, _s.colorSecondary, _s.flexShrink1].join(' ')}
           />
         }
 

app/javascript/gabsocial/components/media_item.js

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

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(' ')}
         >
           <Text color='inherit' weight='bold' align='center'>
             {intl.formatMessage(messages.title)}

app/javascript/gabsocial/components/modal/pro_upgrade_modal.js

@@ -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>
 

app/javascript/gabsocial/components/notification.js

@@ -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(' ')}>

app/javascript/gabsocial/components/panel/group_info_panel.js

@@ -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)}

app/javascript/gabsocial/components/panel/list_details_panel.js

@@ -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'

app/javascript/gabsocial/components/panel/pro_panel.js

@@ -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>
 

app/javascript/gabsocial/components/panel/profile_info_panel.js

@@ -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'

app/javascript/gabsocial/components/panel/status_promotion_panel.js

@@ -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}

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,
+                colorPrimary: !isActive,
-                fillWhite: isActive,
+                colorWhite: isActive,
               })
 
               return (

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}
       >
-        <Icon id={icon} size='12px' className={_s[fillColor]} />
+        <Icon id={icon} size='12px' className={_s[iconColor]} />
       </button>
     )
   }

app/javascript/gabsocial/components/select.js

@@ -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>
     )

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'
                             />
                           ))

app/javascript/gabsocial/components/sidebar_section_item.js

@@ -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} />
           }
           
           {

app/javascript/gabsocial/components/sort_block.js

@@ -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>
         }

app/javascript/gabsocial/components/status_card.js

@@ -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>
       )
     }

app/javascript/gabsocial/components/status_content.js

@@ -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}

app/javascript/gabsocial/components/status_header.js

@@ -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>
               }

app/javascript/gabsocial/components/status_prepend.js

@@ -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(' ')}>

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(' ')}
               >
-                <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>

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,
+      colorSecondary: !active,
-      fillWhite: active,
+      colorWhite: active,
     })
 
     const iconSize = !!small ? '14px' : '16px'

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}

app/javascript/gabsocial/features/introduction.js

@@ -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>
               }

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); }