Updated classNames constant in components that werent using

• Updated:
- classNames constant in components that werent using

app/javascript/gabsocial/components/button.js

@@ -1,12 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { NavLink } from 'react-router-dom'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
 import Icon from './icon'
 
-// Bind CSS Modules global variable `_s` to classNames module
-const cx = classNames.bind(_s)
-
 // Define colors for enumeration for Button component `color`, `backgroundColor` props
 const COLORS = {
   primary: 'primary',
@@ -108,7 +105,7 @@ class Button extends React.PureComponent {
     } = this.props
 
     // Style the component according to props
-    const classes = noClasses ? className : cx(className, {
+    const classes = noClasses ? className : CX(className, {
       d: 1,
       noUnderline: 1,
       font: 1,

app/javascript/gabsocial/components/composer.js

@@ -13,13 +13,11 @@ import {
 import draftToMarkdown from '../features/ui/util/draft_to_markdown'
 import markdownToDraft from '../features/ui/util/markdown_to_draft'
 import { urlRegex } from '../features/ui/util/url_regex'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
 import RichTextEditorBar from './rich_text_editor_bar'
 
 import '!style-loader!css-loader!draft-js/dist/Draft.css'
 
-const cx = classNames.bind(_s)
-
 const markdownOptions = {
   escapeMarkdownCharacters: false,
   preserveNewlines: true,
@@ -237,7 +235,7 @@ class Composer extends React.PureComponent {
     } = this.props
     const { editorState } = this.state
 
-    const editorContainerClasses = cx({
+    const editorContainerClasses = CX({
       d: 1,
       cursorText: 1,
       text: 1,

app/javascript/gabsocial/components/group_collection_item.js

@@ -5,14 +5,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { NavLink } from 'react-router-dom'
 import { defineMessages, injectIntl } from 'react-intl'
-import classNames from 'classnames/bind'
+import { PLACEHOLDER_MISSING_HEADER_SRC, CX } from '../constants'
-import { PLACEHOLDER_MISSING_HEADER_SRC } from '../constants'
 import { shortNumberFormat } from '../utils/numbers'
 import Image from './image'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 class GroupCollectionItem extends ImmutablePureComponent {
 
   render() {
@@ -41,7 +38,7 @@ class GroupCollectionItem extends ImmutablePureComponent {
       )
     }
 
-    const navLinkClasses = cx({
+    const navLinkClasses = CX({
       d: 1,
       noUnderline: 1,
       overflowHidden: 1,

app/javascript/gabsocial/components/heading.js

@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
-
-// Bind CSS Modules global variable `_s` to classNames module
-const cx = classNames.bind(_s)
 
 // Define sizes for enumeration for Heading component `size` prop
 const SIZES = {
@@ -35,7 +32,7 @@ class Heading extends React.PureComponent {
     const { children, size, isCentered } = this.props
 
     // Each size has it's own custom style
-    const classes = cx({
+    const classes = CX({
       d: 1,
       text: 1,
       textAlignCenter: isCentered,

app/javascript/gabsocial/components/image.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
-
-const cx = classNames.bind(_s)
 
 class Image extends React.PureComponent {
 
@@ -27,7 +25,7 @@ class Image extends React.PureComponent {
     } = this.props
     const { error } = this.state
 
-    const classes = cx(className, {
+    const classes = CX(className, {
       d: 1,
       objectFitCover: !!src && fit === 'cover',
       bgSecondary: !src,

app/javascript/gabsocial/components/input.js

@@ -1,12 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
 import Button from './button'
 import Icon from './icon'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 class Input extends React.PureComponent {
 
   handleOnChange = (e) => {
@@ -33,7 +31,7 @@ class Input extends React.PureComponent {
       maxLength,
     } = this.props
 
-    const inputClasses = cx({
+    const inputClasses = CX({
       d: 1,
       text: 1,
       outlineNone: 1,
@@ -55,7 +53,7 @@ class Input extends React.PureComponent {
       pr15: !hasClear,
     })
 
-    const btnClasses = cx({
+    const btnClasses = CX({
       displayNone: !value || value.length === 0,
       px10: 1,
       mr5: 1,

app/javascript/gabsocial/components/list_item.js

@@ -1,13 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
 import Button from './button'
 import Icon from './icon'
 import Image from './image'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 class ListItem extends React.PureComponent {
 
   handleOnClick = (e) => {
@@ -55,7 +53,7 @@ class ListItem extends React.PureComponent {
     const imageSize = large ? '22px' : '18px'
     const showActive = isActive !== undefined
 
-    const containerClasses = cx({
+    const containerClasses = CX({
       d: 1,
       cursorPointer: 1,
       noUnderline: 1,
@@ -73,14 +71,14 @@ class ListItem extends React.PureComponent {
       borderBottom1PX: !isLast,
     })
 
-    const iconClasses = cx({
+    const iconClasses = CX({
       mr10: !large,
       mr15: large,
       cPrimary: !!icon,
       circle: !icon && !!image,
     })
 
-    const textContainerClasses = cx({
+    const textContainerClasses = CX({
       d: 1,
       pr5: 1,
       maxW100PC42PX: !hideArrow || showActive,

app/javascript/gabsocial/components/media_gallery.js

@@ -4,17 +4,15 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { is } from 'immutable';
 import { defineMessages, injectIntl } from 'react-intl';
-import classNames from 'classnames/bind'
 import { decode } from 'blurhash';
-import { autoPlayGif, displayMedia } from '../initial_state';
+import { autoPlayGif, displayMedia } from '../initial_state'
+import { CX } from '../constants'
 import { isIOS } from '../utils/is_mobile';
 import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media_aspect_ratio';
 import Button from './button'
 import SensitiveMediaItem from './sensitive_media_item'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 class Item extends ImmutablePureComponent {
 
   state = {
@@ -514,7 +512,7 @@ class MediaGallery extends React.PureComponent {
       />
     ))
 
-    const containerClasses = cx({
+    const containerClasses = CX({
       d: 1,
       displayBlock: 1,
       overflowHidden: 1,

app/javascript/gabsocial/components/media_item.js

@@ -5,13 +5,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import { NavLink } from 'react-router-dom'
 import { decode } from 'blurhash'
 import { autoPlayGif, displayMedia } from '../initial_state'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
 import Icon from './icon'
 import Image from './image'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 class MediaItem extends ImmutablePureComponent {
 
   state = {
@@ -76,7 +74,7 @@ class MediaItem extends ImmutablePureComponent {
       badge = 'GIF'
     }
 
-    const containerClasses = cx({
+    const containerClasses = CX({
       d: 1,
       posAbs: 1,
       top0: 1,
@@ -86,7 +84,7 @@ class MediaItem extends ImmutablePureComponent {
       px2: !isSmall,
     })
 
-    const linkClasses = cx({
+    const linkClasses = CX({
       d: 1,
       w100PC: 1,
       h100PC: 1,

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

@@ -1,13 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { defineMessages, injectIntl } from 'react-intl'
-import classNames from 'classnames/bind'
+import { CX } from '../../constants'
 import Button from '../button'
 import Block from '../block'
 import Heading from '../heading'
 
-const cx = classNames.bind(_s)
-
 class ModalLayout extends React.PureComponent {
 
   onHandleCloseModal = () => {
@@ -25,7 +23,7 @@ class ModalLayout extends React.PureComponent {
       isXS,
     } = this.props
 
-    const childrenContainerClasses = cx({
+    const childrenContainerClasses = CX({
       d: 1,
       maxH80VH: 1,
       overflowYScroll: 1,

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

@@ -4,14 +4,12 @@ import { connect } from 'react-redux'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import classNames from 'classnames/bind'
+import { CX } from '../../constants'
 import { loadStatusRevisions } from '../../actions/status_revisions'
 import ModalLayout from './modal_layout'
 import RelativeTimestamp from '../relative_timestamp'
 import Text from '../text'
 
-const cx = classNames.bind(_s)
-
 class StatusRevisionsModal extends ImmutablePureComponent {
 
   componentDidMount() {
@@ -38,7 +36,7 @@ class StatusRevisionsModal extends ImmutablePureComponent {
               const isFirst = i === 0
               const isLast = i === revisions.size - 1
 
-              const containerClasses = cx({
+              const containerClasses = CX({
                 d: 1,
                 pt5: 1,
                 pb10: 1,

app/javascript/gabsocial/components/poll.js

@@ -4,20 +4,18 @@ import { connect } from 'react-redux'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
-import classNames from 'classnames/bind'
 import escapeTextContentForBrowser from 'escape-html'
 import spring from 'react-motion/lib/spring'
 import { me } from '../initial_state'
 import Motion from '../features/ui/util/reduced_motion'
 import { vote } from '../actions/polls'
-import emojify from 'gabsocial/components/emoji/emoji'
+import { CX } from '../constants'
+import emojify from './emoji/emoji'
 import RelativeTimestamp from './relative_timestamp'
 import Button from './button'
 import DotTextSeperator from './dot_text_seperator'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 const makeEmojiMap = record => record.get('emojis').reduce((obj, emoji) => {
   obj[`:${emoji.get('shortcode')}:`] = emoji.toJS()
   return obj
@@ -70,7 +68,7 @@ class Poll extends ImmutablePureComponent {
       titleEmojified = emojify(escapeTextContentForBrowser(option.get('title')), emojiMap)
     }
 
-    const chartClasses = cx({
+    const chartClasses = CX({
       d: 1,
       posAbs: 1,
       top0: 1,
@@ -83,12 +81,12 @@ class Poll extends ImmutablePureComponent {
     })
 
     // : todo :
-    const inputClasses = cx('poll__input', {
+    const inputClasses = CX('poll__input', {
       'poll__input--checkbox': multiple,
       'poll__input--active': active,
     })
 
-    const listItemClasses = cx({
+    const listItemClasses = CX({
       d: 1,
       flexRow: 1,
       py10: showResults,
@@ -101,7 +99,7 @@ class Poll extends ImmutablePureComponent {
       bgSubtle: !showResults && active,
     })
 
-    const textContainerClasses = cx({
+    const textContainerClasses = CX({
       d: 1,
       w100PC: 1,
       px15: 1,

app/javascript/gabsocial/components/popover/status_visibility_popover.js

@@ -2,15 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { injectIntl, defineMessages } from 'react-intl'
-import classNames from 'classnames/bind'
 import { changeComposeVisibility } from '../../actions/compose'
 import { closePopover } from '../../actions/popover'
+import { CX } from '../../constants'
 import PopoverLayout from './popover_layout'
 import Icon from '../icon'
 import Text from '../text'
 
-const cx = classNames.bind(_s)
-
 class StatusVisibilityDropdown extends React.PureComponent {
 
   handleChange = (value) => {
@@ -57,7 +55,7 @@ class StatusVisibilityDropdown extends React.PureComponent {
               const isActive = option.value === value
               const isLast = i === options.length - 1
 
-              const containerClasses = cx({
+              const containerClasses = CX({
                 d: 1,
                 flexRow: 1,
                 py10: 1,
@@ -68,7 +66,7 @@ class StatusVisibilityDropdown extends React.PureComponent {
                 bgBrand: isActive,
               })
 
-              const iconClasses = cx({
+              const iconClasses = CX({
                 ml10: 1,
                 mt2: 1,
                 cPrimary: !isActive,

app/javascript/gabsocial/components/rich_text_editor_bar.js

@@ -2,13 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { RichUtils } from 'draft-js'
-import classNames from 'classnames/bind'
 import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
+import { CX } from '../constants'
 import Icon from './icon'
 
-const cx = classNames.bind(_s)
-
 const RTE_ITEMS = [
   {
     label: 'Bold',
@@ -143,7 +141,7 @@ class StyleButton extends React.PureComponent {
     const active = type === 'block' ? style === blockType : currentStyle.has(style)
     const iconColor = active ? 'cWhite' : 'cSecondary'
 
-    const btnClasses = cx({
+    const btnClasses = CX({
       d: 1,
       noUnderline: 1,
       cursorPointer: 1,

app/javascript/gabsocial/components/status_content.js

@@ -3,16 +3,14 @@ import PropTypes from 'prop-types'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { injectIntl, defineMessages } from 'react-intl'
-import classNames from 'classnames/bind'
 import { isRtl } from '../utils/rtl'
+import { CX } from '../constants'
 import Button from './button'
 import Icon from './icon'
 import Text from './text'
 
 const MAX_HEIGHT = 200
 
-const cx = classNames.bind(_s)
-
 class StatusContent extends ImmutablePureComponent {
 
   static contextTypes = {
@@ -191,7 +189,7 @@ class StatusContent extends ImmutablePureComponent {
 
       const toggleText = intl.formatMessage(hidden ? messages.show : messages.hide)
 
-      const spoilerContainerClasses = cx({
+      const spoilerContainerClasses = CX({
         d: 1,
         py10: 1,
         borderBottom1PX: !hidden,
@@ -199,13 +197,13 @@ class StatusContent extends ImmutablePureComponent {
         mb10: !hidden,
       })
 
-      const statusContentClasses = cx({
+      const statusContentClasses = CX({
         statusContent: 1,
         outlineNone: 1,
         displayNone: hidden,
       })
 
-      const containerClasses = cx({
+      const containerClasses = CX({
         statusContent: 1,
         px15: !isComment,
         outlineNone: 1,
@@ -263,12 +261,12 @@ class StatusContent extends ImmutablePureComponent {
     } else if (this.props.onClick) {
       const hasMarginBottom = !!status.get('card') || !!status.get('poll') || status.get('media_attachments').size > 0
 
-      const containerClasses = cx({
+      const containerClasses = CX({
         px15: !isComment,
         mb15: hasMarginBottom,
       })
 
-      const statusContentClasses = cx({
+      const statusContentClasses = CX({
         statusContent: 1,
         outlineNone: 1,
         h215PX: collapsed & !isComment,
@@ -308,7 +306,7 @@ class StatusContent extends ImmutablePureComponent {
       )
     }
 
-    const containerClasses = cx({
+    const containerClasses = CX({
       statusContent: 1,
       outlineNone: 1,
       px15: !isComment,

app/javascript/gabsocial/components/status_header.js

@@ -5,11 +5,11 @@ import { injectIntl, defineMessages } from 'react-intl'
 import { NavLink } from 'react-router-dom'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import classNames from 'classnames/bind'
 import moment from 'moment-mini'
 import { openPopover } from '../actions/popover'
 import { openModal } from '../actions/modal'
 import { me } from '../initial_state'
+import { CX } from '../constants'
 import RelativeTimestamp from './relative_timestamp'
 import DisplayName from './display_name'
 import Text from './text'
@@ -18,8 +18,6 @@ import Icon from './icon'
 import Button from './button'
 import Avatar from './avatar'
 
-const cx = classNames.bind(_s)
-
 class StatusHeader extends ImmutablePureComponent {
 
   handleOpenStatusOptionsPopover = () => {
@@ -43,7 +41,7 @@ class StatusHeader extends ImmutablePureComponent {
 
     const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`
 
-    const containerClasses = cx({
+    const containerClasses = CX({
       d: 1,
       px15: 1,
       py10: !reduced,

app/javascript/gabsocial/components/text.js

@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
-
-// Bind CSS Modules global variable `_s` to classNames module
-const cx = classNames.bind(_s)
 
 // Define colors for enumeration for Text component `color` prop
 const COLORS = {
@@ -70,7 +67,7 @@ class Text extends React.PureComponent {
     } = this.props
 
     // Style the component according to props
-    const classes = cx(className, {
+    const classes = CX(className, {
       d: 1,
       text: 1,
 

app/javascript/gabsocial/components/textarea.js

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames/bind'
+import { CX } from '../constants'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 class Textarea extends React.PureComponent {
 
   handleOnChange = (e) => {
@@ -22,7 +20,7 @@ class Textarea extends React.PureComponent {
       title,
     } = this.props
 
-    const inputClasses = cx({
+    const inputClasses = CX({
       d: 1,
       text: 1,
       outlineNone: 1,

app/javascript/gabsocial/components/timeline_queue_button_header.js

@@ -2,14 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
 import throttle from 'lodash.throttle'
-import classNames from 'classnames/bind'
 import { shortNumberFormat } from '../utils/numbers'
+import { CX } from '../constants'
 import { scrollTo } from '../utils/scroll_to'
 import Button from './button'
 import Text from './text'
 
-const cx = classNames.bind(_s)
-
 class TimelineQueueButtonHeader extends React.PureComponent {
 
   state = {
@@ -78,7 +76,7 @@ class TimelineQueueButtonHeader extends React.PureComponent {
 
     const hasItems = count > 0
 
-    const containerClasses = cx({
+    const containerClasses = CX({
       d: 1,
       pb5: 1,
       posSticky: !hidden,
@@ -87,7 +85,7 @@ class TimelineQueueButtonHeader extends React.PureComponent {
       z3: 1,
     })
 
-    const innerContainerClasses = cx({
+    const innerContainerClasses = CX({
       d: 1,
       displayNone: !hasItems,
       mtNeg26PX: 1,

app/javascript/gabsocial/features/compose/components/compose_extra_button.js

@@ -1,10 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import classNames from 'classnames/bind'
+import { CX } from '../../../constants'
 import Button from '../../../components/button'
 
-const cx = classNames.bind(_s)
-
 class ComposeExtraButton extends React.PureComponent {
 
   render() {
@@ -19,7 +17,7 @@ class ComposeExtraButton extends React.PureComponent {
       buttonRef
     } = this.props
 
-    const btnClasses = cx({
+    const btnClasses = CX({
       d: 1,
       circle: 1,
       noUnderline: 1,
@@ -37,7 +35,7 @@ class ComposeExtraButton extends React.PureComponent {
       mr2: !children,
     })
 
-    const iconClasses = cx({
+    const iconClasses = CX({
       cSecondary: !active,
       cWhite: active,
     })

app/javascript/gabsocial/features/compose/components/media_upload_item.js

@@ -4,16 +4,14 @@ import { connect } from 'react-redux'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { defineMessages, injectIntl } from 'react-intl'
-import classNames from 'classnames/bind'
 import { undoUploadCompose, changeUploadCompose } from '../../../actions/compose'
-import { submitCompose } from '../../../actions/compose';
+import { submitCompose } from '../../../actions/compose'
+import { CX } from '../../../constants'
 import Button from '../../../components/button'
 import Image from '../../../components/image'
 import Input from '../../../components/input'
 import Text from '../../../components/text'
 
-const cx = classNames.bind(_s)
-
 class Upload extends ImmutablePureComponent {
 
   static contextTypes = {
@@ -80,7 +78,7 @@ class Upload extends ImmutablePureComponent {
     const active = this.state.hovered || this.state.focused
     const description = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || ''
 
-    const descriptionContainerClasses = cx({
+    const descriptionContainerClasses = CX({
       d: 1,
       posAbs: 1,
       right0: 1,

app/javascript/gabsocial/features/compose/components/poll_form.js

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import ImmutablePureComponent from 'react-immutable-pure-component'
-import classNames from 'classnames/bind'
 import { defineMessages, injectIntl } from 'react-intl'
 import {
   addPollOption,
@@ -11,13 +10,12 @@ import {
   changePollOption,
   changePollSettings,
 } from '../../../actions/compose'
+import { CX } from '../../../constants'
 import Button from '../../../components/button'
 import Text from '../../../components/text'
 import Select from '../../../components/select'
 import Input from '../../../components/input'
 
-const cx = classNames.bind(_s)
-
 class PollForm extends ImmutablePureComponent {
 
   handleSelectDuration = (e) => {
@@ -136,7 +134,7 @@ class PollFormOption extends ImmutablePureComponent {
   render() {
     const { isPollMultiple, title, index, intl } = this.props
 
-    const toggleClasses = cx({
+    const toggleClasses = CX({
       d: 1,
       px10: 1,
       py10: 1,

app/javascript/gabsocial/features/search.js

@@ -30,9 +30,9 @@ class Search extends ImmutablePureComponent {
     } = this.props
     const { isSmallScreen } = this.state
 
-    if (isLoading) {
+    // if (isLoading) {
       return <ColumnIndicator type='loading' />
-    }
+    // }
 
     if (isError) {
       return (