refactor(v2): minor styling improvements (#4167)

* refactor(v2): minor styling improvements * Fixes
facebook · Feb 4, 2021 · dbfa256 · dbfa256
1 parent d63a77d
commit dbfa256
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   }