From 5aa24f95fc06eda3ac1dab60d651ca61ed33f794 Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Wed, 16 Jun 2021 09:04:45 +0300
Subject: [PATCH] fix more comments button

---
 .../app/components/root/__show-more/root__show-more.css     | 6 ------
 frontend/app/components/root/index.ts                       | 1 -
 frontend/app/components/root/root.module.css                | 5 +++++
 frontend/app/components/root/root.tsx                       | 6 ++++--
 4 files changed, 9 insertions(+), 9 deletions(-)
 delete mode 100644 frontend/app/components/root/__show-more/root__show-more.css
 create mode 100644 frontend/app/components/root/root.module.css

diff --git a/frontend/app/components/root/__show-more/root__show-more.css b/frontend/app/components/root/__show-more/root__show-more.css
deleted file mode 100644
index b077c3b1..00000000
--- a/frontend/app/components/root/__show-more/root__show-more.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root__show-more {
-  display: block;
-  width: 300px;
-  max-width: 100%;
-  margin: 20px auto;
-}
diff --git a/frontend/app/components/root/index.ts b/frontend/app/components/root/index.ts
index c848b7a2..0e32f021 100644
--- a/frontend/app/components/root/index.ts
+++ b/frontend/app/components/root/index.ts
@@ -5,7 +5,6 @@ import './__input/root__input.css';
 import './__preloader/root__preloader.css';
 import './__pinned-comment/root__pinned-comment.css';
 import './__pinned-comments/root__pinned-comments.css';
-import './__show-more/root__show-more.css';
 import './__thread/root__thread.css';
 import './__threads/root__threads.css';
 
diff --git a/frontend/app/components/root/root.module.css b/frontend/app/components/root/root.module.css
new file mode 100644
index 00000000..21bf3a09
--- /dev/null
+++ b/frontend/app/components/root/root.module.css
@@ -0,0 +1,5 @@
+.moreComments {
+  display: block;
+  max-width: 320px;
+  margin: 20px auto;
+}
diff --git a/frontend/app/components/root/root.tsx b/frontend/app/components/root/root.tsx
index 1a017fdb..6d3d107b 100644
--- a/frontend/app/components/root/root.tsx
+++ b/frontend/app/components/root/root.tsx
@@ -30,7 +30,6 @@ import { fetchComments, updateSorting, addComment, updateComment, unsetCommentMo
 import { setCommentsReadOnlyState } from 'store/post-info/actions';
 import { setTheme } from 'store/theme/actions';
 
-import { Button } from 'components/button';
 import { Preloader } from 'components/preloader';
 import { Settings } from 'components/settings';
 import { AuthPanel } from 'components/auth-panel';
@@ -44,6 +43,9 @@ import { postMessageToParent, parseMessage } from 'utils/postMessage';
 import { useActions } from 'hooks/useAction';
 import { setCollapse } from 'store/thread/actions';
 import { logout } from 'components/auth/auth.api';
+import { Button } from 'components/auth/components/button';
+
+import styles from './Root.module.css';
 
 const mapStateToProps = (state: StoreState) => ({
   sort: state.comments.sort,
@@ -304,7 +306,7 @@ export class Root extends Component<Props, State> {
                   ))}
 
                   {commentsShown < this.props.topComments.length && IS_MOBILE && (
-                    <Button kind="primary" size="middle" mix="root__show-more" onClick={this.showMore}>
+                    <Button className={clsx('more-comments', styles.moreComments)} onClick={this.showMore}>
                       <FormattedMessage id="root.show-more" defaultMessage="Show more" />
                     </Button>
                   )}