Replace classnames with clsx

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,

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

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`],
         )}

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

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

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`],
               {

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`],
         )}

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`],