From d2e4e60cd579aeb6f5fd1864057aeeac01c1e436 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Wed, 2 Jun 2021 17:19:41 +0300
Subject: [PATCH] refactor(v2): make little better doc details info UI (#4865)

---
 .../src/theme/DocItem/index.tsx               | 24 ++++----
 .../src/theme/DocItem/styles.module.css       |  5 ++
 .../src/theme/LastUpdated/index.tsx           | 59 +++++++++----------
 .../src/theme/LastUpdated/styles.module.css   | 12 ++++
 4 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
index 12553384c8..40d1b9b6a3 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -82,22 +82,20 @@ function DocItem(props: Props): JSX.Element {
               </div>
             </article>
             {(editUrl || lastUpdatedAt || lastUpdatedBy) && (
-              <div className="margin-vert--xl">
-                <div className="row">
-                  <div className="col">
-                    {editUrl && <EditThisPage editUrl={editUrl} />}
-                  </div>
-                  {(lastUpdatedAt || lastUpdatedBy) && (
-                    <LastUpdated
-                      lastUpdatedAt={lastUpdatedAt}
-                      formattedLastUpdatedAt={formattedLastUpdatedAt}
-                      lastUpdatedBy={lastUpdatedBy}
-                    />
-                  )}
+              <div className={clsx('row', styles.docUpdateDetails)}>
+                <div className="col">
+                  {editUrl && <EditThisPage editUrl={editUrl} />}
                 </div>
+                {(lastUpdatedAt || lastUpdatedBy) && (
+                  <LastUpdated
+                    lastUpdatedAt={lastUpdatedAt}
+                    formattedLastUpdatedAt={formattedLastUpdatedAt}
+                    lastUpdatedBy={lastUpdatedBy}
+                  />
+                )}
               </div>
             )}
-            <div className="margin-vert--lg">
+            <div className={styles.docPaginator}>
               <DocPaginator metadata={metadata} />
             </div>
           </div>
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
index 41c2d0c0e0..283d21b71b 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css
@@ -15,6 +15,11 @@
   padding: 0 0.5rem;
 }
 
+.docUpdateDetails,
+.docPaginator {
+  margin-top: 3rem;
+}
+
 @media only screen and (min-width: 997px) {
   .docItemCol {
     max-width: 75% !important;
diff --git a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx
index 210259b9e2..f1ecad4e30 100644
--- a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx
@@ -6,6 +6,7 @@
  */
 
 import React from 'react';
+import clsx from 'clsx';
 import styles from './styles.module.css';
 import Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/LastUpdated';
@@ -58,37 +59,33 @@ export default function LastUpdated({
   lastUpdatedBy,
 }: Props): JSX.Element {
   return (
-    <div className="col text--right">
-      <em>
-        <small>
-          <Translate
-            id="theme.lastUpdated.lastUpdatedAtBy"
-            description="The sentence used to display when a page has been last updated, and by who"
-            values={{
-              atDate:
-                lastUpdatedAt && formattedLastUpdatedAt ? (
-                  <LastUpdatedAtDate
-                    lastUpdatedAt={lastUpdatedAt}
-                    formattedLastUpdatedAt={formattedLastUpdatedAt}
-                  />
-                ) : (
-                  ''
-                ),
-              byUser: lastUpdatedBy ? (
-                <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
-              ) : (
-                ''
-              ),
-            }}>
-            {'Last updated{atDate}{byUser}'}
-          </Translate>
-          {process.env.NODE_ENV === 'development' && (
-            <div>
-              <small> (Simulated during dev for better perf)</small>
-            </div>
-          )}
-        </small>
-      </em>
+    <div className={clsx('col', styles.lastUpdated)}>
+      <Translate
+        id="theme.lastUpdated.lastUpdatedAtBy"
+        description="The sentence used to display when a page has been last updated, and by who"
+        values={{
+          atDate:
+            lastUpdatedAt && formattedLastUpdatedAt ? (
+              <LastUpdatedAtDate
+                lastUpdatedAt={lastUpdatedAt}
+                formattedLastUpdatedAt={formattedLastUpdatedAt}
+              />
+            ) : (
+              ''
+            ),
+          byUser: lastUpdatedBy ? (
+            <LastUpdatedByUser lastUpdatedBy={lastUpdatedBy} />
+          ) : (
+            ''
+          ),
+        }}>
+        {'Last updated{atDate}{byUser}'}
+      </Translate>
+      {process.env.NODE_ENV === 'development' && (
+        <div>
+          <small> (Simulated during dev for better perf)</small>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/LastUpdated/styles.module.css b/packages/docusaurus-theme-classic/src/theme/LastUpdated/styles.module.css
index 10bd9cf128..618a7e8312 100644
--- a/packages/docusaurus-theme-classic/src/theme/LastUpdated/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/LastUpdated/styles.module.css
@@ -5,6 +5,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+.lastUpdated {
+  margin-top: 0.2rem;
+  font-style: italic;
+  font-size: smaller;
+}
+
+@media only screen and (min-width: 997px) {
+  .lastUpdated {
+    text-align: right;
+  }
+}
+
 .lastUpdatedDate {
   font-weight: bold;
 }