From dbfa256a7b1e21be29ffd267a05b38d75f9b8200 Mon Sep 17 00:00:00 2001
From: Alexey Pyltsyn <lex61rus@gmail.com>
Date: Thu, 4 Feb 2021 13:53:20 +0300
Subject: [PATCH] refactor(v2): minor styling improvements (#4167)

* refactor(v2): minor styling improvements

* Fixes
---
 .../src/theme/DocPage/styles.module.css       |  2 +-
 .../src/theme/DocSidebar/styles.module.css    |  3 +-
 .../src/theme/Toggle/styles.module.css        |  3 +-
 website/src/pages/index.js                    |  4 +--
 website/src/pages/styles.module.css           | 30 +++++--------------
 5 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
index a5a6755212..27237b5825 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css
@@ -25,7 +25,7 @@
 
   .docSidebarContainerHidden {
     width: 30px;
-    cursor: e-resize;
+    cursor: pointer;
   }
 
   .collapsedDocSidebar {
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
index 33a82edb9f..95f72110c3 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css
@@ -71,6 +71,7 @@
     position: sticky;
     bottom: 0;
     border-radius: 0;
+    border: 1px solid var(--ifm-toc-border-color);
   }
 
   .collapseSidebarButtonIcon {
@@ -80,8 +81,6 @@
 
   html[data-theme='dark'] .collapseSidebarButton {
     background-color: var(--collapse-button-bg-color-dark);
-    border: none;
-    border-left: 1px solid var(--ifm-toc-border-color);
   }
 
   html[data-theme='dark'] .collapseSidebarButton:hover,
diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
index fee4c220d8..176790c480 100644
--- a/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
@@ -104,7 +104,8 @@
   left: 27px;
 }
 
-:global(.react-toggle--focus .react-toggle-thumb) {
+:global(.react-toggle--focus .react-toggle-thumb),
+:global(.react-toggle-thumb:hover) {
   box-shadow: 0px 0px 2px 3px var(--ifm-color-primary);
 }
 
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index e7b72a25be..f72674e4bf 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -106,11 +106,11 @@ function Home() {
               />
             </h1>
             <div className={styles.indexCtas}>
-              <Link className={styles.indexCtasGetStartedButton} to="/docs">
+              <Link className="button button--primary" to="/docs">
                 <Translate>Get Started</Translate>
               </Link>
               <Link
-                className={styles.indexCtaTryNowButton}
+                className="button button--info"
                 to="https://new.docusaurus.io">
                 <Translate>Playground</Translate>
               </Link>
diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css
index 0ec989c63a..1c5fe676ae 100644
--- a/website/src/pages/styles.module.css
+++ b/website/src/pages/styles.module.css
@@ -67,7 +67,6 @@
   color: var(--ifm-color-primary);
 }
 
-
 @keyframes jackInTheBox {
   from {
     opacity: 0;
@@ -98,22 +97,15 @@
 }
 
 .indexCtas {
+  --ifm-button-size-multiplier: 1.6;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   margin-top: 24px;
 }
 
-.indexCtasGetStartedButton {
-  border: 2px solid var(--ifm-color-primary);
-  line-height: 1.2em;
-  text-decoration: none !important;
-  text-transform: uppercase;
-  transition: background 0.3s, color 0.3s;
-  border-radius: 8px;
-  color: #fff;
-  font-size: 24px;
-  font-weight: bold;
-  padding: 18px 36px;
+.indexCtas a:last-of-type {
+  margin: 20px 36px;
 }
 
 .indexCtasGitHubButtonWrapper {
@@ -125,16 +117,6 @@
   overflow: hidden;
 }
 
-.indexCtaTryNowButton {
-  line-height: 1.2em;
-  text-decoration: underline;
-  text-transform: uppercase;
-  transition: background 0.3s, color 0.3s;
-  color: #fff;
-  font-size: 14px;
-  font-weight: bold;
-  margin: 0 36px;
-}
 .indexCtaTryNowButton:hover {
   color: var(--ifm-color-primary);
 }
@@ -164,6 +146,10 @@
     justify-content: center;
   }
 
+  .indexCtas a {
+    margin: 20px 36px;
+  }
+
   .indexCtasGitHubButton {
     display: none;
   }