Replace classnames with clsx

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

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,