From c0dc64f0a096eef47c1c1ff597bcdf5f8993897c Mon Sep 17 00:00:00 2001
From: esvyridov <eugene.svyridov@gmail.com>
Date: Fri, 20 Aug 2021 19:47:16 +0200
Subject: [PATCH] Update user profile UI: move loading and error to center

---
 frontend/app/components/profile/profile.module.css | 8 +++++++-
 frontend/app/components/profile/profile.spec.tsx   | 2 +-
 frontend/app/components/profile/profile.tsx        | 4 ++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/profile/profile.module.css b/frontend/app/components/profile/profile.module.css
index 45796a7d..b2d4c9d0 100644
--- a/frontend/app/components/profile/profile.module.css
+++ b/frontend/app/components/profile/profile.module.css
@@ -67,6 +67,12 @@
   padding: 0 16px 16px;
 }
 
+.errorContent {
+  align-self: center;
+  text-align: center;
+  margin: auto;
+}
+
 .error {
   font-size: 14px;
   margin: 0 0 4px;
@@ -168,7 +174,7 @@
 }
 
 .preloader {
-  margin: 0 auto;
+  margin: auto;
   color: var(--color13);
 }
 
diff --git a/frontend/app/components/profile/profile.spec.tsx b/frontend/app/components/profile/profile.spec.tsx
index f6fea318..65f82979 100644
--- a/frontend/app/components/profile/profile.spec.tsx
+++ b/frontend/app/components/profile/profile.spec.tsx
@@ -61,7 +61,7 @@ describe('<Profile />', () => {
     expect(queryByRole('heading', { name: /recent comments/i })).not.toBeInTheDocument();
   });
 
-  it('should render without comments', async () => {
+  it('should render user without comments', async () => {
     jest.spyOn(pq, 'parseQuery').mockImplementation(() => ({ ...userParamsStub }));
     const getUserComments = jest.spyOn(api, 'getUserComments').mockImplementation(async () => ({ comments: [] }));
 
diff --git a/frontend/app/components/profile/profile.tsx b/frontend/app/components/profile/profile.tsx
index 53396c78..ef27c353 100644
--- a/frontend/app/components/profile/profile.tsx
+++ b/frontend/app/components/profile/profile.tsx
@@ -173,14 +173,14 @@ export function Profile() {
         </header>
         <section className={clsx('profile-content', styles.content)}>
           {error && (
-            <>
+            <div className={styles.errorContent}>
               <p className={clsx('profile-error', styles.error)}>
                 <FormattedMessage id="errors.0" defaultMessage="Something went wrong. Please try again a bit later." />
               </p>
               <Button kind="link" size="sm" onClick={handleClickRetryCommentsRequest}>
                 <FormattedMessage id="retry" defaultMessage="Retry" />
               </Button>
-            </>
+            </div>
           )}
           {isCommentsLoading && <Preloader className={styles.preloader} />}
           {comments !== null && commentsJSX}