From 696cdd90fdcf8f2ca1a4059b39ec3fbebe7101f2 Mon Sep 17 00:00:00 2001
From: Satyajit Sahoo <satyajit.happy@gmail.com>
Date: Sun, 4 Dec 2016 04:39:21 +0530
Subject: [PATCH] docs: tweak styling

---
 docs/pages/Getting Started.md   |  6 +++---
 docs/templates/App.js           |  2 +-
 docs/templates/ComponentDocs.js |  7 ++++---
 docs/templates/Home.js          |  2 +-
 docs/templates/Markdown.js      | 25 ++++++++++++++++++-------
 docs/templates/Page.js          | 22 ++++++++++++++++------
 6 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/docs/pages/Getting Started.md b/docs/pages/Getting Started.md
index fda0998..4348dc9 100644
--- a/docs/pages/Getting Started.md	
+++ b/docs/pages/Getting Started.md	
@@ -14,7 +14,7 @@ After installation, you'll need to link [react-native-vector-icons](https://gith
 
 ## Usage
 
-Wrap your root component in `Provider` from `react-native-paper`. It's a good idea to wrap the component which is passed to `AppRegsitry.registerComponent`.
+Wrap your root component in `Provider` from `react-native-paper`. It's a good idea to wrap the component which is passed to `AppRegistry.registerComponent`.
 
 Example:
 
@@ -29,7 +29,7 @@ function Main() {
     <PaperProvider>
       <App />
     </PaperProvider>
-  )
+  );
 }
 
 AppRegistry.registerComponent('main', () => Main);
@@ -66,6 +66,6 @@ function Main() {
     <PaperProvider theme={theme}>
       <App />
     </PaperProvider>
-  )
+  );
 }
 ```
diff --git a/docs/templates/App.js b/docs/templates/App.js
index 1128baa..f84b232 100644
--- a/docs/templates/App.js
+++ b/docs/templates/App.js
@@ -19,7 +19,7 @@ insertGlobal(`
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     margin: 0;
     padding: 0;
-    color: #333;
+    color: #000;
     lineHeight: 1.5;
   }
   code {
diff --git a/docs/templates/ComponentDocs.js b/docs/templates/ComponentDocs.js
index 30d1ec2..226d363 100644
--- a/docs/templates/ComponentDocs.js
+++ b/docs/templates/ComponentDocs.js
@@ -36,7 +36,7 @@ const propRequired = style({
   left: -24,
   fontSize: '22px',
   lineHeight: 1.5,
-  color: '#aaa',
+  color: '#C1C2CA',
 
   '&:hover:after': {
     content: 'attr(data-hint)',
@@ -48,18 +48,19 @@ const propRequired = style({
     padding: '2px 8px',
     fontSize: '12px',
     color: '#fff',
-    background: '#333',
+    background: '#262939',
     zIndex: 10,
   },
 });
 
 const propLabel = style({
-  backgroundColor: '#f0f0f0',
+  backgroundColor: '#F3F3F7',
   borderRadius: '3px',
   padding: '4px 8px',
   margin: '4px 16px 4px 0',
   textDecoration: 'none',
   whiteSpace: 'nowrap',
+  border: '1px solid rgba(0, 0, 0, .04)',
 });
 
 const propDetails = style({
diff --git a/docs/templates/Home.js b/docs/templates/Home.js
index 3e3cfcc..2e7c68c 100644
--- a/docs/templates/Home.js
+++ b/docs/templates/Home.js
@@ -7,7 +7,7 @@ const wrapper = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  height: '100vh',
+  height: '100%',
   padding: '24px 48px',
 });
 
diff --git a/docs/templates/Markdown.js b/docs/templates/Markdown.js
index 61e67ef..2875a1c 100644
--- a/docs/templates/Markdown.js
+++ b/docs/templates/Markdown.js
@@ -8,14 +8,25 @@ import { style } from 'glamor';
 const markdown = style({
   '& pre': {
     whitespace: 'nowrap',
-    backgroundColor: '#f0f0f0',
+    backgroundColor: '#F3F3F7',
     borderRadius: '3px',
-    padding: '8px 12px',
+    padding: '12px 16px',
     overflowX: 'auto',
+    border: '1px solid rgba(0, 0, 0, .04)',
   },
 
   '& code': {
+    fontWeight: 'bold',
     fontSize: '.9em',
+    backgroundColor: '#F3F3F7',
+    padding: '0 4px',
+    borderRadius: '3px',
+    border: '1px solid rgba(0, 0, 0, .04)',
+  },
+
+  '& pre code': {
+    fontWeight: 'normal',
+    border: 0,
   },
 
   '& .hljs-comment': {
@@ -23,23 +34,23 @@ const markdown = style({
   },
 
   '& .hljs-keyword': {
-    color: '#F26129',
+    color: '#E91E63',
   },
 
   '& .hljs-string, & .hljs-value, & .hljs-inheritance, & .hljs-header, & .hljs-class, & .hljs-attr': {
-    color: '#86B326',
+    color: '#4CAF50',
   },
 
   '& .hljs-function .hljs-title': {
-    color: '#F59D19',
+    color: '#FF5722',
   },
 
   '& .hljs-number, & .hljs-preprocessor, & .hljs-built_in, & .hljs-literal, & .hljs-params, & .hljs-constant': {
-    color: '#A37ACC',
+    color: '#9C27B0',
   },
 
   '& .hljs-variable, & .hljs-attr, & .hljs-tag, & .hljs-regexp, & .hljs-doctype, & .hljs-id, & .hljs-class, & .hljs-pseudo, & .hljs-tag .hljs-name, & .hljs-built_in': {
-    color: '#41A6D9',
+    color: '#3F51B5',
   },
 });
 
diff --git a/docs/templates/Page.js b/docs/templates/Page.js
index a8c917d..7233435 100644
--- a/docs/templates/Page.js
+++ b/docs/templates/Page.js
@@ -6,7 +6,7 @@ import Link from './Link';
 
 const wrapper = style({
   display: 'flex',
-  height: '100vh',
+  height: '100%',
   flexDirection: 'column',
 
   '@media(min-width: 640px)': {
@@ -16,7 +16,7 @@ const wrapper = style({
 
 const sidebar = style({
   padding: '24px',
-  backgroundColor: '#f0f0f0',
+  backgroundColor: '#262939',
   display: 'none',
 
   '@media(min-width: 640px)': {
@@ -43,6 +43,11 @@ const menuButton = style({
   '&:checked ~ nav': {
     display: 'block',
   },
+
+  '&:checked ~ label': {
+    color: '#fff',
+    opacity: 0.64,
+  },
 });
 
 const menuIcon = style({
@@ -61,24 +66,29 @@ const menuIcon = style({
 
 const separator = style({
   border: 0,
-  backgroundColor: '#ddd',
+  backgroundColor: '#fff',
   height: '1px',
   margin: '8px 0',
+  opacity: 0.04,
 });
 
 const link = style({
   display: 'block',
   padding: '4px 0',
   textDecoration: 'none',
-  opacity: 0.32,
+  opacity: 0.16,
 
   ':hover': {
-    opacity: 1,
+    opacity: 0.64,
+  },
+
+  '& code': {
+    color: '#fff',
   },
 });
 
 const active = style({
-  opacity: 1,
+  opacity: 0.64,
 });
 
 export default function Page({ name, pages, components, children }: any) {