From 53a951fb65a755edf25dc460556fb7c842d2a4bc Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Wed, 19 Aug 2020 16:14:13 -0400
Subject: [PATCH] tabs and markdown styling

---
 app/src/components/v-tabs/v-tab/v-tab.vue |  3 +--
 app/src/components/v-tabs/v-tabs.vue      |  6 +++---
 app/src/interfaces/markdown/markdown.vue  | 21 ++++++++++++++-------
 app/src/lang/en-US/index.json             |  1 +
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/app/src/components/v-tabs/v-tab/v-tab.vue b/app/src/components/v-tabs/v-tab/v-tab.vue
index 007ff60dac..3739675188 100644
--- a/app/src/components/v-tabs/v-tab/v-tab.vue
+++ b/app/src/components/v-tabs/v-tab/v-tab.vue
@@ -52,8 +52,7 @@ body {
 .v-tab.horizontal {
 	color: var(--v-tab-color);
 	font-weight: 500;
-	font-size: 12px;
-	text-transform: uppercase;
+	font-size: 14px;
 	background-color: var(--v-tab-background-color);
 
 	&.active {
diff --git a/app/src/components/v-tabs/v-tabs.vue b/app/src/components/v-tabs/v-tabs.vue
index 8769001755..b7f65f5d26 100644
--- a/app/src/components/v-tabs/v-tabs.vue
+++ b/app/src/components/v-tabs/v-tabs.vue
@@ -76,14 +76,14 @@ body {
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		height: 44px;
-		padding: 12px 20px;
+		height: 38px;
+		padding: 8px 20px;
 		cursor: pointer;
 	}
 
 	.slider {
 		position: absolute;
-		bottom: 0;
+		bottom: -2px;
 		left: calc(100% / var(--_v-tabs-items) * var(--_v-tabs-selected));
 		width: calc(100% / var(--_v-tabs-items));
 		height: 2px;
diff --git a/app/src/interfaces/markdown/markdown.vue b/app/src/interfaces/markdown/markdown.vue
index 244522851a..a8b140b6ec 100644
--- a/app/src/interfaces/markdown/markdown.vue
+++ b/app/src/interfaces/markdown/markdown.vue
@@ -7,7 +7,7 @@
 					{{ $t('edit') }}
 				</v-tab>
 				<v-tab>
-					<v-icon name="visibility" left />
+					<v-icon name="visibility" outline left />
 					{{ $t('preview') }}
 				</v-tab>
 			</v-tabs>
@@ -65,16 +65,25 @@ export default defineComponent({
 	--v-textarea-min-height: var(--input-height-tall);
 	--v-textarea-max-height: 400px;
 
+	--v-tab-color: var(--foreground-normal);
+	--v-tab-background-color: var(--background-subdued);
+	--v-tab-color-active: var(--foreground-normal);
+	--v-tab-background-color-active: var(--background-subdued);
+
 	display: flex;
 	flex-wrap: wrap;
 
 	.toolbar {
 		width: 100%;
+		height: 42px;
 		border: var(--border-width) solid var(--border-normal);
+		border-radius: var(--border-radius) var(--border-radius) 0 0;
+		background-color: var(--background-subdued);
 	}
 
 	.v-textarea {
 		height: unset;
+		min-height: var(--input-height-tall);
 		border-radius: var(--border-radius) 0 0 var(--border-radius);
 	}
 
@@ -109,15 +118,17 @@ export default defineComponent({
 
 	::v-deep {
 		.preview {
-			font-weight: 400;
+			font-weight: 500;
 			font-size: 14px;
-			line-height: 1.6;
 			& > *:first-child {
 				margin-top: 0;
 			}
 			& > *:last-child {
 				margin-bottom: 0;
 			}
+			a {
+				text-decoration: underline;
+			}
 			h1,
 			h2,
 			h3,
@@ -221,10 +232,6 @@ export default defineComponent({
 				margin-top: 0;
 				padding-top: 0;
 			}
-			& > h1:first-child + h2 {
-				margin-top: 0;
-				padding-top: 0;
-			}
 			& > h3:first-child,
 			& > h4:first-child,
 			& > h5:first-child,
diff --git a/app/src/lang/en-US/index.json b/app/src/lang/en-US/index.json
index 4de1021ee9..afdbfce6aa 100644
--- a/app/src/lang/en-US/index.json
+++ b/app/src/lang/en-US/index.json
@@ -418,6 +418,7 @@
 
 	"select_an_item": "Select an item...",
 	"edit": "Edit",
+	"preview": "Preview",
 
 	"enabled": "Enabled",