ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-05-31 14:11:58 +05:30
Code Issues Packages Projects Releases Wiki Activity

Replace classnames with clsx

Browse Source
This commit is contained in:
SleepWalker
2019-12-07 21:43:08 +02:00
parent d226fb2974
commit c638c1566e
29 changed files with 73 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/components/accounts/AccountSwitcher.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import classNames from 'classnames'; import clsx from 'clsx';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import loader from 'app/services/loader'; import loader from 'app/services/loader';
@ -62,7 +62,7 @@ export class AccountSwitcher extends React.Component<Props> {
return ( return (
<div <div
className={classNames( className={clsx(
styles.accountSwitcher, styles.accountSwitcher,
styles[`${skin}AccountSwitcher`], styles[`${skin}AccountSwitcher`],
)} )}
@ -70,7 +70,7 @@ export class AccountSwitcher extends React.Component<Props> {
{highlightActiveAccount ? ( {highlightActiveAccount ? (
<div className={styles.item}> <div className={styles.item}>
<div <div
className={classNames( className={clsx(
styles.accountIcon, styles.accountIcon,
styles.activeAccountIcon, styles.activeAccountIcon,
styles.accountIcon1, styles.accountIcon1,
@ -81,10 +81,7 @@ export class AccountSwitcher extends React.Component<Props> {
{activeAccount.username} {activeAccount.username}
</div> </div>
<div <div
className={classNames( className={clsx(styles.accountEmail, styles.activeAccountEmail)}
styles.accountEmail,
styles.activeAccountEmail,
)}
> >
{activeAccount.email} {activeAccount.email}
</div> </div>
@ -112,12 +109,12 @@ export class AccountSwitcher extends React.Component<Props> {
) : null} ) : null}
{available.map((account, index) => ( {available.map((account, index) => (
<div <div
className={classNames(styles.item, styles.accountSwitchItem)} className={clsx(styles.item, styles.accountSwitchItem)}
key={account.id} key={account.id}
onClick={this.onSwitch(account)} onClick={this.onSwitch(account)}
> >
<div <div
className={classNames( className={clsx(
styles.accountIcon, styles.accountIcon,
styles[ styles[
`accountIcon${(index % 7) + (highlightActiveAccount ? 2 : 1)}` `accountIcon${(index % 7) + (highlightActiveAccount ? 2 : 1)}`

4
packages/app/components/contact/ContactForm.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import classNames from 'classnames'; import clsx from 'clsx';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import { import {
Input, Input,
@ -69,7 +69,7 @@ export class ContactForm extends React.Component<
<Message {...messages.title} /> <Message {...messages.title} />
</h2> </h2>
<span <span
className={classNames(icons.close, popupStyles.close)} className={clsx(icons.close, popupStyles.close)}
onClick={onClose} onClick={onClose}
/> />
</div> </div>

4
packages/app/components/dev/apps/ApplicationsIndex.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import { Helmet } from 'react-helmet'; import { Helmet } from 'react-helmet';
import { LinkButton } from 'app/components/ui/form'; import { LinkButton } from 'app/components/ui/form';
@ -109,7 +109,7 @@ function Loader({ noApps }: { noApps: boolean }) {
/> />
<div <div
className={classNames(styles.noAppsContainer, { className={clsx(styles.noAppsContainer, {
[styles.noAppsAnimating]: noApps, [styles.noAppsAnimating]: noApps,
})} })}
> >

4
packages/app/components/dev/apps/list/ApplicationItem.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import classNames from 'classnames'; import clsx from 'clsx';
import { SKIN_LIGHT, COLOR_BLACK, COLOR_RED } from 'app/components/ui'; import { SKIN_LIGHT, COLOR_BLACK, COLOR_RED } from 'app/components/ui';
import { Input, Button } from 'app/components/ui/form'; import { Input, Button } from 'app/components/ui/form';
import { OauthAppResponse } from 'app/services/api/oauth'; import { OauthAppResponse } from 'app/services/api/oauth';
@ -63,7 +63,7 @@ export default class ApplicationItem extends React.Component<
return ( return (
<div <div
className={classNames(styles.appItemContainer, { className={clsx(styles.appItemContainer, {
[styles.appExpanded]: expand, [styles.appExpanded]: expand,
})} })}
data-e2e="appItem" data-e2e="appItem"

6
packages/app/components/languageSwitcher/LanguageList.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { TransitionMotion, spring, presets } from 'react-motion'; import { TransitionMotion, spring, presets } from 'react-motion';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import classNames from 'classnames'; import clsx from 'clsx';
import LocaleItem from './LocaleItem'; import LocaleItem from './LocaleItem';
import messages from './languageSwitcher.intl.json'; import messages from './languageSwitcher.intl.json';
@ -38,7 +38,7 @@ export default class LanguageList extends React.Component<{
{items => ( {items => (
<div className={styles.languagesList}> <div className={styles.languagesList}>
<div <div
className={classNames(styles.emptyLanguagesListWrapper, { className={clsx(styles.emptyLanguagesListWrapper, {
[styles.emptyLanguagesListVisible]: isListEmpty, [styles.emptyLanguagesListVisible]: isListEmpty,
})} })}
style={{ style={{
@ -69,7 +69,7 @@ export default class LanguageList extends React.Component<{
<div <div
key={locale} key={locale}
style={style} style={style}
className={classNames(styles.languageItem, { className={clsx(styles.languageItem, {
[styles.activeLanguageItem]: locale === selectedLocale, [styles.activeLanguageItem]: locale === selectedLocale,
[styles.firstLanguageItem]: locale === firstLocale, [styles.firstLanguageItem]: locale === firstLocale,
})} })}

6
packages/app/components/languageSwitcher/LanguageSwitcher.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { FormattedMessage as Message, injectIntl, IntlShape } from 'react-intl'; import { FormattedMessage as Message, injectIntl, IntlShape } from 'react-intl';
import classNames from 'classnames'; import clsx from 'clsx';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { changeLang } from 'app/components/user/actions'; import { changeLang } from 'app/components/user/actions';
import LANGS from 'app/i18n'; import LANGS from 'app/i18n';
@ -69,7 +69,7 @@ class LanguageSwitcher extends React.Component<
<Message {...messages.siteLanguage} /> <Message {...messages.siteLanguage} />
</h2> </h2>
<span <span
className={classNames(icons.close, popupStyles.close)} className={clsx(icons.close, popupStyles.close)}
onClick={onClose} onClick={onClose}
/> />
</div> </div>
@ -77,7 +77,7 @@ class LanguageSwitcher extends React.Component<
<div className={styles.languageSwitcherBody}> <div className={styles.languageSwitcherBody}>
<div className={styles.searchBox}> <div className={styles.searchBox}>
<input <input
className={classNames( className={clsx(
formStyles.lightTextField, formStyles.lightTextField,
formStyles.greenTextField, formStyles.greenTextField,
)} )}

4
packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { localeFlags } from 'app/components/i18n'; import { localeFlags } from 'app/components/i18n';
import LANGS from 'app/i18n'; import LANGS from 'app/i18n';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -24,7 +24,7 @@ function LanguageLink({
return ( return (
<span <span
className={classNames(styles.languageLink, { className={clsx(styles.languageLink, {
[styles.mark]: userLang !== interfaceLocale, [styles.mark]: userLang !== interfaceLocale,
})} })}
onClick={showLanguageSwitcherPopup} onClick={showLanguageSwitcherPopup}

6
packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import classNames from 'classnames'; import clsx from 'clsx';
import profileForm from '../../profileForm.scss'; import profileForm from '../../profileForm.scss';
import messages from '../MultiFactorAuth.intl.json'; import messages from '../MultiFactorAuth.intl.json';
@ -33,12 +33,12 @@ export default class Instructions extends React.Component<{}, State> {
<div className={profileForm.formRow}> <div className={profileForm.formRow}>
<div <div
className={classNames(styles.instructionContainer, { className={clsx(styles.instructionContainer, {
[styles.instructionActive]: !!activeOs, [styles.instructionActive]: !!activeOs,
})} })}
> >
<div <div
className={classNames(styles.osList, { className={clsx(styles.osList, {
[styles.androidActive]: activeOs === 'android', [styles.androidActive]: activeOs === 'android',
[styles.appleActive]: activeOs === 'ios', [styles.appleActive]: activeOs === 'ios',
[styles.windowsActive]: activeOs === 'windows', [styles.windowsActive]: activeOs === 'windows',

4
packages/app/components/profile/multiFactorAuth/instructions/OsTile.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import styles from './instructions.scss'; import styles from './instructions.scss';
@ -15,7 +15,7 @@ export default function OsInstruction({
onClick: (event: React.MouseEvent<any>) => void; onClick: (event: React.MouseEvent<any>) => void;
}) { }) {
return ( return (
<div className={classNames(styles.osTile, className)} onClick={onClick}> <div className={clsx(styles.osTile, className)} onClick={onClick}>
<img className={styles.osLogo} src={logo} alt={label} /> <img className={styles.osLogo} src={logo} alt={label} />
<div className={styles.osName}>{label}</div> <div className={styles.osName}>{label}</div>
</div> </div>

9
packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import { ImageLoader } from 'app/components/ui/loader'; import { ImageLoader } from 'app/components/ui/loader';
import profileForm from 'app/components/profile/profileForm.scss'; import profileForm from 'app/components/profile/profileForm.scss';
@ -31,12 +31,7 @@ export default function KeyForm({
</div> </div>
<div className={profileForm.formRow}> <div className={profileForm.formRow}>
<p <p className={clsx(styles.manualDescription, profileForm.description)}>
className={classNames(
styles.manualDescription,
profileForm.description,
)}
>
<span className={styles.or}> <span className={styles.or}>
<Message {...messages.or} /> <Message {...messages.or} />
</span> </span>

4
packages/app/components/profile/passwordRequestForm/PasswordRequestForm.js
View File

@ -3,7 +3,7 @@ import React, { Component } from 'react';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import classNames from 'classnames'; import clsx from 'clsx';
import { Form, Button, Input, FormModel } from 'app/components/ui/form'; import { Form, Button, Input, FormModel } from 'app/components/ui/form';
import popupStyles from 'app/components/ui/popup/popup.scss'; import popupStyles from 'app/components/ui/popup/popup.scss';
@ -32,7 +32,7 @@ export default class PasswordRequestForm extends Component {
</h2> </h2>
</div> </div>
<div className={classNames(popupStyles.body, styles.body)}> <div className={clsx(popupStyles.body, styles.body)}>
<span className={styles.lockIcon} /> <span className={styles.lockIcon} />
<div className={styles.description}> <div className={styles.description}>

4
packages/app/components/ui/Panel.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { omit } from 'app/functions'; import { omit } from 'app/functions';
import styles from './panel.scss'; import styles from './panel.scss';
@ -89,7 +89,7 @@ export class PanelBodyHeader extends React.Component<
close = <span className={styles.close} onClick={this.onClose} />; close = <span className={styles.close} onClick={this.onClose} />;
} }
const className = classNames(styles[`${type}BodyHeader`], { const className = clsx(styles[`${type}BodyHeader`], {
[styles.isClosed]: this.state.isClosed, [styles.isClosed]: this.state.isClosed,
}); });

4
packages/app/components/ui/form/Button.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import buttons from 'app/components/ui/buttons.scss'; import buttons from 'app/components/ui/buttons.scss';
import { COLOR_GREEN } from 'app/components/ui'; import { COLOR_GREEN } from 'app/components/ui';
import { MessageDescriptor } from 'react-intl'; import { MessageDescriptor } from 'react-intl';
@ -35,7 +35,7 @@ export default class Button extends FormComponent<
return ( return (
<ComponentProp <ComponentProp
className={classNames( className={clsx(
buttons[color], buttons[color],
{ {
[buttons.loading]: loading, [buttons.loading]: loading,

4
packages/app/components/ui/form/Captcha.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { CaptchaID } from 'app/services/captcha'; import { CaptchaID } from 'app/services/captcha';
import { Skin } from 'app/components/ui'; import { Skin } from 'app/components/ui';
import captcha from 'app/services/captcha'; import captcha from 'app/services/captcha';
@ -58,7 +58,7 @@ export default class Captcha extends FormInputComponent<
<div <div
ref={this.elRef} ref={this.elRef}
className={classNames(styles.captcha, styles[`${skin}Captcha`])} className={clsx(styles.captcha, styles[`${skin}Captcha`])}
/> />
{this.renderError()} {this.renderError()}

4
packages/app/components/ui/form/Checkbox.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { MessageDescriptor } from 'react-intl'; import { MessageDescriptor } from 'react-intl';
import classNames from 'classnames'; import clsx from 'clsx';
import { SKIN_DARK, COLOR_GREEN, Color, Skin } from 'app/components/ui'; import { SKIN_DARK, COLOR_GREEN, Color, Skin } from 'app/components/ui';
import { omit } from 'app/functions'; import { omit } from 'app/functions';
@ -29,7 +29,7 @@ export default class Checkbox extends FormInputComponent<{
return ( return (
<div <div
className={classNames( className={clsx(
styles[`${color}MarkableRow`], styles[`${color}MarkableRow`],
styles[`${skin}MarkableRow`], styles[`${skin}MarkableRow`],
)} )}

4
packages/app/components/ui/form/Dropdown.js
View File

@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import classNames from 'classnames'; import clsx from 'clsx';
import { omit } from 'app/functions'; import { omit } from 'app/functions';
import { colors, COLOR_GREEN } from 'app/components/ui'; import { colors, COLOR_GREEN } from 'app/components/ui';
@ -62,7 +62,7 @@ export default class Dropdown extends FormInputComponent {
return ( return (
<div> <div>
<div <div
className={classNames(styles[color], { className={clsx(styles[color], {
[styles.block]: block, [styles.block]: block,
[styles.opened]: isActive, [styles.opened]: isActive,
})} })}

4
packages/app/components/ui/form/Form.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import logger from 'app/services/logger'; import logger from 'app/services/logger';
import FormModel from './FormModel'; import FormModel from './FormModel';
@ -81,7 +81,7 @@ export default class Form extends React.Component<Props, State> {
return ( return (
<form <form
className={classNames(styles.form, { className={clsx(styles.form, {
[styles.isFormLoading]: isLoading, [styles.isFormLoading]: isLoading,
[styles.formTouched]: this.state.isTouched, [styles.formTouched]: this.state.isTouched,
})} })}

10
packages/app/components/ui/form/Input.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { MessageDescriptor } from 'react-intl'; import { MessageDescriptor } from 'react-intl';
import classNames from 'classnames'; import clsx from 'clsx';
import { uniqueId, omit } from 'app/functions'; import { uniqueId, omit } from 'app/functions';
import copy from 'app/services/copy'; import copy from 'app/services/copy';
import icons from 'app/components/ui/icons.scss'; import icons from 'app/components/ui/icons.scss';
@ -96,15 +96,13 @@ export default class Input extends FormInputComponent<
if (iconType) { if (iconType) {
baseClass = styles.formIconRow; baseClass = styles.formIconRow;
icon = ( icon = <span className={clsx(styles.textFieldIcon, icons[iconType])} />;
<span className={classNames(styles.textFieldIcon, icons[iconType])} />
);
} }
if (showCopyIcon) { if (showCopyIcon) {
copyIcon = ( copyIcon = (
<div <div
className={classNames(styles.copyIcon, { className={clsx(styles.copyIcon, {
[icons.clipboard]: !wasCopied, [icons.clipboard]: !wasCopied,
[icons.checkmark]: wasCopied, [icons.checkmark]: wasCopied,
[styles.copyCheckmark]: wasCopied, [styles.copyCheckmark]: wasCopied,
@ -120,7 +118,7 @@ export default class Input extends FormInputComponent<
<div className={styles.textFieldContainer}> <div className={styles.textFieldContainer}>
<input <input
ref={this.elRef} ref={this.elRef}
className={classNames( className={clsx(
styles[`${skin}TextField`], styles[`${skin}TextField`],
styles[`${color}TextField`], styles[`${color}TextField`],
{ {

4
packages/app/components/ui/form/Radio.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { MessageDescriptor } from 'react-intl'; import { MessageDescriptor } from 'react-intl';
import classNames from 'classnames'; import clsx from 'clsx';
import { SKIN_DARK, COLOR_GREEN } from 'app/components/ui'; import { SKIN_DARK, COLOR_GREEN } from 'app/components/ui';
import { omit } from 'app/functions'; import { omit } from 'app/functions';
import { Color, Skin } from 'app/components/ui'; import { Color, Skin } from 'app/components/ui';
@ -32,7 +32,7 @@ export default class Radio extends FormInputComponent<
return ( return (
<div <div
className={classNames( className={clsx(
styles[`${color}MarkableRow`], styles[`${color}MarkableRow`],
styles[`${skin}MarkableRow`], styles[`${skin}MarkableRow`],
)} )}

4
packages/app/components/ui/form/TextArea.tsx
View File

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { MessageDescriptor } from 'react-intl'; import { MessageDescriptor } from 'react-intl';
import TextareaAutosize from 'react-textarea-autosize'; import TextareaAutosize from 'react-textarea-autosize';
import classNames from 'classnames'; import clsx from 'clsx';
import { uniqueId, omit } from 'app/functions'; import { uniqueId, omit } from 'app/functions';
import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui'; import { SKIN_DARK, COLOR_GREEN, Skin, Color } from 'app/components/ui';
@ -73,7 +73,7 @@ export default class TextArea extends FormInputComponent<
<div className={styles.textAreaContainer}> <div className={styles.textAreaContainer}>
<TextareaAutosize <TextareaAutosize
inputRef={this.elRef} inputRef={this.elRef}
className={classNames( className={clsx(
styles.textArea, styles.textArea,
styles[`${skin}TextField`], styles[`${skin}TextField`],
styles[`${color}TextField`], styles[`${color}TextField`],

9
packages/app/components/ui/loader/ComponentLoader.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { Skin } from 'app/components/ui'; import { Skin } from 'app/components/ui';
import styles from './componentLoader.scss'; import styles from './componentLoader.scss';
@ -7,15 +7,12 @@ import styles from './componentLoader.scss';
function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) { function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
return ( return (
<div <div
className={classNames( className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`])}
styles.componentLoader,
styles[`${skin}ComponentLoader`],
)}
> >
<div className={styles.spins}> <div className={styles.spins}>
{new Array(5).fill(0).map((_, index) => ( {new Array(5).fill(0).map((_, index) => (
<div <div
className={classNames(styles.spin, styles[`spin${index}`])} className={clsx(styles.spin, styles[`spin${index}`])}
key={index} key={index}
/> />
))} ))}

4
packages/app/components/ui/loader/ImageLoader.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { ComponentLoader } from 'app/components/ui/loader'; import { ComponentLoader } from 'app/components/ui/loader';
import { SKIN_LIGHT } from 'app/components/ui'; import { SKIN_LIGHT } from 'app/components/ui';
@ -59,7 +59,7 @@ export default class ImageLoader extends React.Component<
)} )}
<div <div
className={classNames(styles.image, { className={clsx(styles.image, {
[styles.imageLoaded]: !isLoading, [styles.imageLoaded]: !isLoading,
})} })}
> >

2
packages/app/components/ui/popup/PopupStack.tsx
View File

@ -35,7 +35,7 @@ export class PopupStack extends React.Component<{
return ( return (
<CSSTransition <CSSTransition
key={index} key={index}
classNames={{ clsx={{
enter: styles.trEnter, enter: styles.trEnter,
enterActive: styles.trEnterActive, enterActive: styles.trEnterActive,
exit: styles.trExit, exit: styles.trExit,

6
packages/app/components/ui/stepper/Stepper.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { Color, COLOR_GREEN } from 'app/components/ui'; import { Color, COLOR_GREEN } from 'app/components/ui';
import styles from './stepper.scss'; import styles from './stepper.scss';
@ -14,10 +14,10 @@ export default function Stepper({
color?: Color; color?: Color;
}) { }) {
return ( return (
<div className={classNames(styles.steps, styles[`${color}Steps`])}> <div className={clsx(styles.steps, styles[`${color}Steps`])}>
{new Array(totalSteps).fill(0).map((_, step) => ( {new Array(totalSteps).fill(0).map((_, step) => (
<div <div
className={classNames(styles.step, { className={clsx(styles.step, {
[styles.activeStep]: step <= activeStep, [styles.activeStep]: step <= activeStep,
})} })}
key={step} key={step}

11
packages/app/components/userbar/LoggedInPanel.tsx
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import clsx from 'clsx';
import { AccountSwitcher } from 'app/components/accounts'; import { AccountSwitcher } from 'app/components/accounts';
import styles from './loggedInPanel.scss'; import styles from './loggedInPanel.scss';
@ -40,12 +40,9 @@ export default class LoggedInPanel extends React.Component<
const { isAccountSwitcherActive } = this.state; const { isAccountSwitcherActive } = this.state;
return ( return (
<div <div ref={el => (this.el = el)} className={clsx(styles.loggedInPanel)}>
ref={el => (this.el = el)}
className={classNames(styles.loggedInPanel)}
>
<div <div
className={classNames(styles.activeAccount, { className={clsx(styles.activeAccount, {
[styles.activeAccountExpanded]: isAccountSwitcherActive, [styles.activeAccountExpanded]: isAccountSwitcherActive,
})} })}
> >
@ -58,7 +55,7 @@ export default class LoggedInPanel extends React.Component<
<span className={styles.expandIcon} /> <span className={styles.expandIcon} />
</button> </button>
<div className={classNames(styles.accountSwitcherContainer)}> <div className={clsx(styles.accountSwitcherContainer)}>
<AccountSwitcher <AccountSwitcher
skin="light" skin="light"
onAfterAction={this.onToggleAccountSwitcher} onAfterAction={this.onToggleAccountSwitcher}

2
packages/app/package.json
View File

@ -7,7 +7,7 @@
"@hot-loader/react-dom": "^16.11.0", "@hot-loader/react-dom": "^16.11.0",
"@types/react-redux": "^7.1.5", "@types/react-redux": "^7.1.5",
"@types/react-router-dom": "^5.1.3", "@types/react-router-dom": "^5.1.3",
"classnames": "^2.2.6", "clsx": "^1.0.4",
"copy-to-clipboard": "^3.0.8", "copy-to-clipboard": "^3.0.8",
"debounce": "^1.0.0", "debounce": "^1.0.0",
"flag-icon-css": "^3.4.5", "flag-icon-css": "^3.4.5",

4
packages/app/pages/root/RootPage.tsx
View File

@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom';
import { FormattedMessage as Message } from 'react-intl'; import { FormattedMessage as Message } from 'react-intl';
import { Route, Link, Switch } from 'react-router-dom'; import { Route, Link, Switch } from 'react-router-dom';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import classNames from 'classnames'; import clsx from 'clsx';
import AuthPage from 'app/pages/auth/AuthPage'; import AuthPage from 'app/pages/auth/AuthPage';
import ProfilePage from 'app/pages/profile/ProfilePage'; import ProfilePage from 'app/pages/profile/ProfilePage';
import RulesPage from 'app/pages/rules/RulesPage'; import RulesPage from 'app/pages/rules/RulesPage';
@ -65,7 +65,7 @@ class RootPage extends Component<{
<div <div
id="view-port" id="view-port"
className={classNames(styles.viewPort, { className={clsx(styles.viewPort, {
[styles.isPopupActive]: isPopupActive, [styles.isPopupActive]: isPopupActive,
})} })}
> >

6
packages/app/pages/rules/RulesPage.tsx
View File

@ -10,7 +10,7 @@ import messages from './RulesPage.intl.json';
const projectName = <Message {...appInfo.appName} />; const projectName = <Message {...appInfo.appName} />;
import classNames from 'classnames'; import clsx from 'clsx';
const rules = [ const rules = [
{ {
@ -105,7 +105,7 @@ export default class RulesPage extends Component<{
{rules.map((block, sectionIndex) => ( {rules.map((block, sectionIndex) => (
<div className={styles.rulesSection} key={sectionIndex}> <div className={styles.rulesSection} key={sectionIndex}>
<h2 <h2
className={classNames(styles.rulesSectionTitle, { className={clsx(styles.rulesSectionTitle, {
[styles.target]: [styles.target]:
RulesPage.getTitleHash(sectionIndex) === hash, RulesPage.getTitleHash(sectionIndex) === hash,
})} })}
@ -125,7 +125,7 @@ export default class RulesPage extends Component<{
<ol className={styles.rulesList}> <ol className={styles.rulesList}>
{block.items.map((item, ruleIndex) => ( {block.items.map((item, ruleIndex) => (
<li <li
className={classNames(styles.rulesItem, { className={clsx(styles.rulesItem, {
[styles.target]: [styles.target]:
RulesPage.getRuleHash(sectionIndex, ruleIndex) === RulesPage.getRuleHash(sectionIndex, ruleIndex) ===
hash, hash,

10
yarn.lock
View File

@ -2963,11 +2963,6 @@ class-utils@^0.3.5:
isobject "^3.0.0" isobject "^3.0.0"
static-extend "^0.1.1" static-extend "^0.1.1"
classnames@^2.2.6:
version "2.2.6"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
clean-css@4.1.x: clean-css@4.1.x:
version "4.1.11" version "4.1.11"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.11.tgz#2ecdf145aba38f54740f26cefd0ff3e03e125d6a"
@ -3062,6 +3057,11 @@ clone-deep@^4.0.1:
kind-of "^6.0.2" kind-of "^6.0.2"
shallow-clone "^3.0.0" shallow-clone "^3.0.0"
clsx@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.0.4.tgz#0c0171f6d5cb2fe83848463c15fcc26b4df8c2ec"
integrity sha512-1mQ557MIZTrL/140j+JVdRM6e31/OA4vTYxXgqIIZlndyfjHpyawKZia1Im05Vp9BWmImkcNrNtFYQMyFcgJDg==
co@^4.6.0: co@^4.6.0:
version "4.6.0" version "4.6.0"
resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184" resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"