From c638c1566ecd026c5db30810e7409d73d5182433 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sat, 7 Dec 2019 21:43:08 +0200
Subject: [PATCH] Replace classnames with clsx

---
 .../app/components/accounts/AccountSwitcher.tsx   | 15 ++++++---------
 packages/app/components/contact/ContactForm.tsx   |  4 ++--
 .../app/components/dev/apps/ApplicationsIndex.tsx |  4 ++--
 .../components/dev/apps/list/ApplicationItem.tsx  |  4 ++--
 .../components/languageSwitcher/LanguageList.tsx  |  6 +++---
 .../languageSwitcher/LanguageSwitcher.tsx         |  6 +++---
 .../changeLanguageLink/ChangeLanguageLink.tsx     |  4 ++--
 .../multiFactorAuth/instructions/Instructions.tsx |  6 +++---
 .../multiFactorAuth/instructions/OsTile.tsx       |  4 ++--
 .../profile/multiFactorAuth/keyForm/KeyForm.tsx   |  9 ++-------
 .../passwordRequestForm/PasswordRequestForm.js    |  4 ++--
 packages/app/components/ui/Panel.tsx              |  4 ++--
 packages/app/components/ui/form/Button.tsx        |  4 ++--
 packages/app/components/ui/form/Captcha.tsx       |  4 ++--
 packages/app/components/ui/form/Checkbox.tsx      |  4 ++--
 packages/app/components/ui/form/Dropdown.js       |  4 ++--
 packages/app/components/ui/form/Form.tsx          |  4 ++--
 packages/app/components/ui/form/Input.tsx         | 10 ++++------
 packages/app/components/ui/form/Radio.tsx         |  4 ++--
 packages/app/components/ui/form/TextArea.tsx      |  4 ++--
 .../app/components/ui/loader/ComponentLoader.tsx  |  9 +++------
 packages/app/components/ui/loader/ImageLoader.tsx |  4 ++--
 packages/app/components/ui/popup/PopupStack.tsx   |  2 +-
 packages/app/components/ui/stepper/Stepper.tsx    |  6 +++---
 packages/app/components/userbar/LoggedInPanel.tsx | 11 ++++-------
 packages/app/package.json                         |  2 +-
 packages/app/pages/root/RootPage.tsx              |  4 ++--
 packages/app/pages/rules/RulesPage.tsx            |  6 +++---
 yarn.lock                                         | 10 +++++-----
 29 files changed, 73 insertions(+), 89 deletions(-)

diff --git a/packages/app/components/accounts/AccountSwitcher.tsx b/packages/app/components/accounts/AccountSwitcher.tsx
index 0fb3945..dffd6cd 100644
--- a/packages/app/components/accounts/AccountSwitcher.tsx
+++ b/packages/app/components/accounts/AccountSwitcher.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import loader from 'app/services/loader';
@@ -62,7 +62,7 @@ export class AccountSwitcher extends React.Component<Props> {
 
     return (
       <div
-        className={classNames(
+        className={clsx(
           styles.accountSwitcher,
           styles[`${skin}AccountSwitcher`],
         )}
@@ -70,7 +70,7 @@ export class AccountSwitcher extends React.Component<Props> {
         {highlightActiveAccount ? (
           <div className={styles.item}>
             <div
-              className={classNames(
+              className={clsx(
                 styles.accountIcon,
                 styles.activeAccountIcon,
                 styles.accountIcon1,
@@ -81,10 +81,7 @@ export class AccountSwitcher extends React.Component<Props> {
                 {activeAccount.username}
               </div>
               <div
-                className={classNames(
-                  styles.accountEmail,
-                  styles.activeAccountEmail,
-                )}
+                className={clsx(styles.accountEmail, styles.activeAccountEmail)}
               >
                 {activeAccount.email}
               </div>
@@ -112,12 +109,12 @@ export class AccountSwitcher extends React.Component<Props> {
         ) : null}
         {available.map((account, index) => (
           <div
-            className={classNames(styles.item, styles.accountSwitchItem)}
+            className={clsx(styles.item, styles.accountSwitchItem)}
             key={account.id}
             onClick={this.onSwitch(account)}
           >
             <div
-              className={classNames(
+              className={clsx(
                 styles.accountIcon,
                 styles[
                   `accountIcon${(index % 7) + (highlightActiveAccount ? 2 : 1)}`
diff --git a/packages/app/components/contact/ContactForm.tsx b/packages/app/components/contact/ContactForm.tsx
index 40fa216..21d2ee3 100644
--- a/packages/app/components/contact/ContactForm.tsx
+++ b/packages/app/components/contact/ContactForm.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
 import {
   Input,
@@ -69,7 +69,7 @@ export class ContactForm extends React.Component<
               <Message {...messages.title} />
             </h2>
             <span
-              className={classNames(icons.close, popupStyles.close)}
+              className={clsx(icons.close, popupStyles.close)}
               onClick={onClose}
             />
           </div>
diff --git a/packages/app/components/dev/apps/ApplicationsIndex.tsx b/packages/app/components/dev/apps/ApplicationsIndex.tsx
index 355200b..3b3ebbf 100644
--- a/packages/app/components/dev/apps/ApplicationsIndex.tsx
+++ b/packages/app/components/dev/apps/ApplicationsIndex.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { LinkButton } from 'app/components/ui/form';
@@ -109,7 +109,7 @@ function Loader({ noApps }: { noApps: boolean }) {
       />
 
       <div
-        className={classNames(styles.noAppsContainer, {
+        className={clsx(styles.noAppsContainer, {
           [styles.noAppsAnimating]: noApps,
         })}
       >
diff --git a/packages/app/components/dev/apps/list/ApplicationItem.tsx b/packages/app/components/dev/apps/list/ApplicationItem.tsx
index d8de7e6..38f935a 100644
--- a/packages/app/components/dev/apps/list/ApplicationItem.tsx
+++ b/packages/app/components/dev/apps/list/ApplicationItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
 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 { Input, Button } from 'app/components/ui/form';
 import { OauthAppResponse } from 'app/services/api/oauth';
@@ -63,7 +63,7 @@ export default class ApplicationItem extends React.Component<
 
     return (
       <div
-        className={classNames(styles.appItemContainer, {
+        className={clsx(styles.appItemContainer, {
           [styles.appExpanded]: expand,
         })}
         data-e2e="appItem"
diff --git a/packages/app/components/languageSwitcher/LanguageList.tsx b/packages/app/components/languageSwitcher/LanguageList.tsx
index 5d1bfff..1a4044d 100644
--- a/packages/app/components/languageSwitcher/LanguageList.tsx
+++ b/packages/app/components/languageSwitcher/LanguageList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { TransitionMotion, spring, presets } from 'react-motion';
 import { FormattedMessage as Message } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import LocaleItem from './LocaleItem';
 import messages from './languageSwitcher.intl.json';
@@ -38,7 +38,7 @@ export default class LanguageList extends React.Component<{
         {items => (
           <div className={styles.languagesList}>
             <div
-              className={classNames(styles.emptyLanguagesListWrapper, {
+              className={clsx(styles.emptyLanguagesListWrapper, {
                 [styles.emptyLanguagesListVisible]: isListEmpty,
               })}
               style={{
@@ -69,7 +69,7 @@ export default class LanguageList extends React.Component<{
               <div
                 key={locale}
                 style={style}
-                className={classNames(styles.languageItem, {
+                className={clsx(styles.languageItem, {
                   [styles.activeLanguageItem]: locale === selectedLocale,
                   [styles.firstLanguageItem]: locale === firstLocale,
                 })}
diff --git a/packages/app/components/languageSwitcher/LanguageSwitcher.tsx b/packages/app/components/languageSwitcher/LanguageSwitcher.tsx
index b73a5af..fb0b65a 100644
--- a/packages/app/components/languageSwitcher/LanguageSwitcher.tsx
+++ b/packages/app/components/languageSwitcher/LanguageSwitcher.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage as Message, injectIntl, IntlShape } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { connect } from 'react-redux';
 import { changeLang } from 'app/components/user/actions';
 import LANGS from 'app/i18n';
@@ -69,7 +69,7 @@ class LanguageSwitcher extends React.Component<
               <Message {...messages.siteLanguage} />
             </h2>
             <span
-              className={classNames(icons.close, popupStyles.close)}
+              className={clsx(icons.close, popupStyles.close)}
               onClick={onClose}
             />
           </div>
@@ -77,7 +77,7 @@ class LanguageSwitcher extends React.Component<
           <div className={styles.languageSwitcherBody}>
             <div className={styles.searchBox}>
               <input
-                className={classNames(
+                className={clsx(
                   formStyles.lightTextField,
                   formStyles.greenTextField,
                 )}
diff --git a/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx b/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
index 3a1281d..bc198b9 100644
--- a/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
+++ b/packages/app/components/languageSwitcher/changeLanguageLink/ChangeLanguageLink.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { localeFlags } from 'app/components/i18n';
 import LANGS from 'app/i18n';
 import { connect } from 'react-redux';
@@ -24,7 +24,7 @@ function LanguageLink({
 
   return (
     <span
-      className={classNames(styles.languageLink, {
+      className={clsx(styles.languageLink, {
         [styles.mark]: userLang !== interfaceLocale,
       })}
       onClick={showLanguageSwitcherPopup}
diff --git a/packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx b/packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx
index b950402..9862688 100644
--- a/packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx
+++ b/packages/app/components/profile/multiFactorAuth/instructions/Instructions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage as Message } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import profileForm from '../../profileForm.scss';
 import messages from '../MultiFactorAuth.intl.json';
@@ -33,12 +33,12 @@ export default class Instructions extends React.Component<{}, State> {
 
         <div className={profileForm.formRow}>
           <div
-            className={classNames(styles.instructionContainer, {
+            className={clsx(styles.instructionContainer, {
               [styles.instructionActive]: !!activeOs,
             })}
           >
             <div
-              className={classNames(styles.osList, {
+              className={clsx(styles.osList, {
                 [styles.androidActive]: activeOs === 'android',
                 [styles.appleActive]: activeOs === 'ios',
                 [styles.windowsActive]: activeOs === 'windows',
diff --git a/packages/app/components/profile/multiFactorAuth/instructions/OsTile.tsx b/packages/app/components/profile/multiFactorAuth/instructions/OsTile.tsx
index 8bdfcc1..ae42b82 100644
--- a/packages/app/components/profile/multiFactorAuth/instructions/OsTile.tsx
+++ b/packages/app/components/profile/multiFactorAuth/instructions/OsTile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import styles from './instructions.scss';
 
@@ -15,7 +15,7 @@ export default function OsInstruction({
   onClick: (event: React.MouseEvent<any>) => void;
 }) {
   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} />
       <div className={styles.osName}>{label}</div>
     </div>
diff --git a/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx b/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx
index a0da4c1..9e29977 100644
--- a/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx
+++ b/packages/app/components/profile/multiFactorAuth/keyForm/KeyForm.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { FormattedMessage as Message } from 'react-intl';
 import { ImageLoader } from 'app/components/ui/loader';
 import profileForm from 'app/components/profile/profileForm.scss';
@@ -31,12 +31,7 @@ export default function KeyForm({
       </div>
 
       <div className={profileForm.formRow}>
-        <p
-          className={classNames(
-            styles.manualDescription,
-            profileForm.description,
-          )}
-        >
+        <p className={clsx(styles.manualDescription, profileForm.description)}>
           <span className={styles.or}>
             <Message {...messages.or} />
           </span>
diff --git a/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.js b/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.js
index d3c97b7..cc7cc1c 100644
--- a/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.js
+++ b/packages/app/components/profile/passwordRequestForm/PasswordRequestForm.js
@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 
 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 popupStyles from 'app/components/ui/popup/popup.scss';
@@ -32,7 +32,7 @@ export default class PasswordRequestForm extends Component {
               </h2>
             </div>
 
-            <div className={classNames(popupStyles.body, styles.body)}>
+            <div className={clsx(popupStyles.body, styles.body)}>
               <span className={styles.lockIcon} />
 
               <div className={styles.description}>
diff --git a/packages/app/components/ui/Panel.tsx b/packages/app/components/ui/Panel.tsx
index 9b371cc..619f5d5 100644
--- a/packages/app/components/ui/Panel.tsx
+++ b/packages/app/components/ui/Panel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { omit } from 'app/functions';
 
 import styles from './panel.scss';
@@ -89,7 +89,7 @@ export class PanelBodyHeader extends React.Component<
       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,
     });
 
diff --git a/packages/app/components/ui/form/Button.tsx b/packages/app/components/ui/form/Button.tsx
index 0ebdcef..ffff214 100644
--- a/packages/app/components/ui/form/Button.tsx
+++ b/packages/app/components/ui/form/Button.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import buttons from 'app/components/ui/buttons.scss';
 import { COLOR_GREEN } from 'app/components/ui';
 import { MessageDescriptor } from 'react-intl';
@@ -35,7 +35,7 @@ export default class Button extends FormComponent<
 
     return (
       <ComponentProp
-        className={classNames(
+        className={clsx(
           buttons[color],
           {
             [buttons.loading]: loading,
diff --git a/packages/app/components/ui/form/Captcha.tsx b/packages/app/components/ui/form/Captcha.tsx
index b2d8a52..4b6afc7 100644
--- a/packages/app/components/ui/form/Captcha.tsx
+++ b/packages/app/components/ui/form/Captcha.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { CaptchaID } from 'app/services/captcha';
 import { Skin } from 'app/components/ui';
 import captcha from 'app/services/captcha';
@@ -58,7 +58,7 @@ export default class Captcha extends FormInputComponent<
 
         <div
           ref={this.elRef}
-          className={classNames(styles.captcha, styles[`${skin}Captcha`])}
+          className={clsx(styles.captcha, styles[`${skin}Captcha`])}
         />
 
         {this.renderError()}
diff --git a/packages/app/components/ui/form/Checkbox.tsx b/packages/app/components/ui/form/Checkbox.tsx
index ec29bd8..4930e6c 100644
--- a/packages/app/components/ui/form/Checkbox.tsx
+++ b/packages/app/components/ui/form/Checkbox.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 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 { omit } from 'app/functions';
 
@@ -29,7 +29,7 @@ export default class Checkbox extends FormInputComponent<{
 
     return (
       <div
-        className={classNames(
+        className={clsx(
           styles[`${color}MarkableRow`],
           styles[`${skin}MarkableRow`],
         )}
diff --git a/packages/app/components/ui/form/Dropdown.js b/packages/app/components/ui/form/Dropdown.js
index 2de01fc..e98291d 100644
--- a/packages/app/components/ui/form/Dropdown.js
+++ b/packages/app/components/ui/form/Dropdown.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 import { omit } from 'app/functions';
 import { colors, COLOR_GREEN } from 'app/components/ui';
@@ -62,7 +62,7 @@ export default class Dropdown extends FormInputComponent {
     return (
       <div>
         <div
-          className={classNames(styles[color], {
+          className={clsx(styles[color], {
             [styles.block]: block,
             [styles.opened]: isActive,
           })}
diff --git a/packages/app/components/ui/form/Form.tsx b/packages/app/components/ui/form/Form.tsx
index 8a15b79..39db38b 100644
--- a/packages/app/components/ui/form/Form.tsx
+++ b/packages/app/components/ui/form/Form.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import logger from 'app/services/logger';
 
 import FormModel from './FormModel';
@@ -81,7 +81,7 @@ export default class Form extends React.Component<Props, State> {
 
     return (
       <form
-        className={classNames(styles.form, {
+        className={clsx(styles.form, {
           [styles.isFormLoading]: isLoading,
           [styles.formTouched]: this.state.isTouched,
         })}
diff --git a/packages/app/components/ui/form/Input.tsx b/packages/app/components/ui/form/Input.tsx
index 1bb6c10..94cb3b7 100644
--- a/packages/app/components/ui/form/Input.tsx
+++ b/packages/app/components/ui/form/Input.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MessageDescriptor } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { uniqueId, omit } from 'app/functions';
 import copy from 'app/services/copy';
 import icons from 'app/components/ui/icons.scss';
@@ -96,15 +96,13 @@ export default class Input extends FormInputComponent<
 
     if (iconType) {
       baseClass = styles.formIconRow;
-      icon = (
-        <span className={classNames(styles.textFieldIcon, icons[iconType])} />
-      );
+      icon = <span className={clsx(styles.textFieldIcon, icons[iconType])} />;
     }
 
     if (showCopyIcon) {
       copyIcon = (
         <div
-          className={classNames(styles.copyIcon, {
+          className={clsx(styles.copyIcon, {
             [icons.clipboard]: !wasCopied,
             [icons.checkmark]: wasCopied,
             [styles.copyCheckmark]: wasCopied,
@@ -120,7 +118,7 @@ export default class Input extends FormInputComponent<
         <div className={styles.textFieldContainer}>
           <input
             ref={this.elRef}
-            className={classNames(
+            className={clsx(
               styles[`${skin}TextField`],
               styles[`${color}TextField`],
               {
diff --git a/packages/app/components/ui/form/Radio.tsx b/packages/app/components/ui/form/Radio.tsx
index 02b8a18..218467e 100644
--- a/packages/app/components/ui/form/Radio.tsx
+++ b/packages/app/components/ui/form/Radio.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { MessageDescriptor } from 'react-intl';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { SKIN_DARK, COLOR_GREEN } from 'app/components/ui';
 import { omit } from 'app/functions';
 import { Color, Skin } from 'app/components/ui';
@@ -32,7 +32,7 @@ export default class Radio extends FormInputComponent<
 
     return (
       <div
-        className={classNames(
+        className={clsx(
           styles[`${color}MarkableRow`],
           styles[`${skin}MarkableRow`],
         )}
diff --git a/packages/app/components/ui/form/TextArea.tsx b/packages/app/components/ui/form/TextArea.tsx
index 2518233..e7e5a66 100644
--- a/packages/app/components/ui/form/TextArea.tsx
+++ b/packages/app/components/ui/form/TextArea.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { MessageDescriptor } from 'react-intl';
 import TextareaAutosize from 'react-textarea-autosize';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { uniqueId, omit } from 'app/functions';
 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}>
           <TextareaAutosize
             inputRef={this.elRef}
-            className={classNames(
+            className={clsx(
               styles.textArea,
               styles[`${skin}TextField`],
               styles[`${color}TextField`],
diff --git a/packages/app/components/ui/loader/ComponentLoader.tsx b/packages/app/components/ui/loader/ComponentLoader.tsx
index 794ab72..65afb45 100644
--- a/packages/app/components/ui/loader/ComponentLoader.tsx
+++ b/packages/app/components/ui/loader/ComponentLoader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Skin } from 'app/components/ui';
 
 import styles from './componentLoader.scss';
@@ -7,15 +7,12 @@ import styles from './componentLoader.scss';
 function ComponentLoader({ skin = 'dark' }: { skin?: Skin }) {
   return (
     <div
-      className={classNames(
-        styles.componentLoader,
-        styles[`${skin}ComponentLoader`],
-      )}
+      className={clsx(styles.componentLoader, styles[`${skin}ComponentLoader`])}
     >
       <div className={styles.spins}>
         {new Array(5).fill(0).map((_, index) => (
           <div
-            className={classNames(styles.spin, styles[`spin${index}`])}
+            className={clsx(styles.spin, styles[`spin${index}`])}
             key={index}
           />
         ))}
diff --git a/packages/app/components/ui/loader/ImageLoader.tsx b/packages/app/components/ui/loader/ImageLoader.tsx
index a4e2719..d0eee58 100644
--- a/packages/app/components/ui/loader/ImageLoader.tsx
+++ b/packages/app/components/ui/loader/ImageLoader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { ComponentLoader } from 'app/components/ui/loader';
 import { SKIN_LIGHT } from 'app/components/ui';
 
@@ -59,7 +59,7 @@ export default class ImageLoader extends React.Component<
         )}
 
         <div
-          className={classNames(styles.image, {
+          className={clsx(styles.image, {
             [styles.imageLoaded]: !isLoading,
           })}
         >
diff --git a/packages/app/components/ui/popup/PopupStack.tsx b/packages/app/components/ui/popup/PopupStack.tsx
index b3a57ec..c63d935 100644
--- a/packages/app/components/ui/popup/PopupStack.tsx
+++ b/packages/app/components/ui/popup/PopupStack.tsx
@@ -35,7 +35,7 @@ export class PopupStack extends React.Component<{
           return (
             <CSSTransition
               key={index}
-              classNames={{
+              clsx={{
                 enter: styles.trEnter,
                 enterActive: styles.trEnterActive,
                 exit: styles.trExit,
diff --git a/packages/app/components/ui/stepper/Stepper.tsx b/packages/app/components/ui/stepper/Stepper.tsx
index facda57..f0c88d1 100644
--- a/packages/app/components/ui/stepper/Stepper.tsx
+++ b/packages/app/components/ui/stepper/Stepper.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { Color, COLOR_GREEN } from 'app/components/ui';
 
 import styles from './stepper.scss';
@@ -14,10 +14,10 @@ export default function Stepper({
   color?: Color;
 }) {
   return (
-    <div className={classNames(styles.steps, styles[`${color}Steps`])}>
+    <div className={clsx(styles.steps, styles[`${color}Steps`])}>
       {new Array(totalSteps).fill(0).map((_, step) => (
         <div
-          className={classNames(styles.step, {
+          className={clsx(styles.step, {
             [styles.activeStep]: step <= activeStep,
           })}
           key={step}
diff --git a/packages/app/components/userbar/LoggedInPanel.tsx b/packages/app/components/userbar/LoggedInPanel.tsx
index 4d1356c..3468678 100644
--- a/packages/app/components/userbar/LoggedInPanel.tsx
+++ b/packages/app/components/userbar/LoggedInPanel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { AccountSwitcher } from 'app/components/accounts';
 
 import styles from './loggedInPanel.scss';
@@ -40,12 +40,9 @@ export default class LoggedInPanel extends React.Component<
     const { isAccountSwitcherActive } = this.state;
 
     return (
-      <div
-        ref={el => (this.el = el)}
-        className={classNames(styles.loggedInPanel)}
-      >
+      <div ref={el => (this.el = el)} className={clsx(styles.loggedInPanel)}>
         <div
-          className={classNames(styles.activeAccount, {
+          className={clsx(styles.activeAccount, {
             [styles.activeAccountExpanded]: isAccountSwitcherActive,
           })}
         >
@@ -58,7 +55,7 @@ export default class LoggedInPanel extends React.Component<
             <span className={styles.expandIcon} />
           </button>
 
-          <div className={classNames(styles.accountSwitcherContainer)}>
+          <div className={clsx(styles.accountSwitcherContainer)}>
             <AccountSwitcher
               skin="light"
               onAfterAction={this.onToggleAccountSwitcher}
diff --git a/packages/app/package.json b/packages/app/package.json
index 07c5c67..cd35e22 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -7,7 +7,7 @@
     "@hot-loader/react-dom": "^16.11.0",
     "@types/react-redux": "^7.1.5",
     "@types/react-router-dom": "^5.1.3",
-    "classnames": "^2.2.6",
+    "clsx": "^1.0.4",
     "copy-to-clipboard": "^3.0.8",
     "debounce": "^1.0.0",
     "flag-icon-css": "^3.4.5",
diff --git a/packages/app/pages/root/RootPage.tsx b/packages/app/pages/root/RootPage.tsx
index ef4de14..0ac3257 100644
--- a/packages/app/pages/root/RootPage.tsx
+++ b/packages/app/pages/root/RootPage.tsx
@@ -5,7 +5,7 @@ import { withRouter } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import { Route, Link, Switch } from 'react-router-dom';
 import Helmet from 'react-helmet';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import AuthPage from 'app/pages/auth/AuthPage';
 import ProfilePage from 'app/pages/profile/ProfilePage';
 import RulesPage from 'app/pages/rules/RulesPage';
@@ -65,7 +65,7 @@ class RootPage extends Component<{
 
         <div
           id="view-port"
-          className={classNames(styles.viewPort, {
+          className={clsx(styles.viewPort, {
             [styles.isPopupActive]: isPopupActive,
           })}
         >
diff --git a/packages/app/pages/rules/RulesPage.tsx b/packages/app/pages/rules/RulesPage.tsx
index e3b4b3c..60b1844 100644
--- a/packages/app/pages/rules/RulesPage.tsx
+++ b/packages/app/pages/rules/RulesPage.tsx
@@ -10,7 +10,7 @@ import messages from './RulesPage.intl.json';
 
 const projectName = <Message {...appInfo.appName} />;
 
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 const rules = [
   {
@@ -105,7 +105,7 @@ export default class RulesPage extends Component<{
           {rules.map((block, sectionIndex) => (
             <div className={styles.rulesSection} key={sectionIndex}>
               <h2
-                className={classNames(styles.rulesSectionTitle, {
+                className={clsx(styles.rulesSectionTitle, {
                   [styles.target]:
                     RulesPage.getTitleHash(sectionIndex) === hash,
                 })}
@@ -125,7 +125,7 @@ export default class RulesPage extends Component<{
                 <ol className={styles.rulesList}>
                   {block.items.map((item, ruleIndex) => (
                     <li
-                      className={classNames(styles.rulesItem, {
+                      className={clsx(styles.rulesItem, {
                         [styles.target]:
                           RulesPage.getRuleHash(sectionIndex, ruleIndex) ===
                           hash,
diff --git a/yarn.lock b/yarn.lock
index f7f21ec..b15b8ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2963,11 +2963,6 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     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:
   version "4.1.11"
   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"
     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:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"