From 0ef775e9b9d5de3a49ff07d7e5fb85b85be4b170 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Oct 2023 19:08:11 +0200
Subject: [PATCH] feat(editor): improve overall styling

---
 src/components/input/editor/EditorToolbar.vue | 67 ++++++++++---------
 src/components/input/editor/TipTap.vue        | 26 ++++---
 2 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/src/components/input/editor/EditorToolbar.vue b/src/components/input/editor/EditorToolbar.vue
index 2d8fe6a8c..275ea63ca 100644
--- a/src/components/input/editor/EditorToolbar.vue
+++ b/src/components/input/editor/EditorToolbar.vue
@@ -7,7 +7,10 @@
 				:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
 				v-tooltip="$t('input.editor.heading1')"
 			>
-				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>1
+				<span class="icon">
+					<icon :icon="['fa', 'fa-header']"/>
+					<span class="icon__lower-text">1</span>
+				</span>
 			</BaseButton>
 			<BaseButton
 				class="editor-toolbar__button"
@@ -15,7 +18,10 @@
 				:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
 				v-tooltip="$t('input.editor.heading2')"
 			>
-				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>2
+				<span class="icon">
+					<icon :icon="['fa', 'fa-header']"/>
+					<span class="icon__lower-text">2</span>
+				</span>
 			</BaseButton>
 			<BaseButton
 				class="editor-toolbar__button"
@@ -23,7 +29,10 @@
 				:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
 				v-tooltip="$t('input.editor.heading3')"
 			>
-				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>3
+				<span class="icon">
+					<icon :icon="['fa', 'fa-header']"/>
+					<span class="icon__lower-text">3</span>
+				</span>
 			</BaseButton>
 		</div>
 
@@ -375,51 +384,47 @@ function setLink() {
 
 <style lang="scss" scoped>
 .editor-toolbar {
-	background: var(--grey-50);
+	background: var(--white);
 	border: 1px solid var(--grey-200);
-	border-bottom: none;
-	// position: relative;
 	user-select: none;
-	padding: 9px 10px;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
+	padding: .5rem;
+	border-radius: $radius;
 	display: flex;
 	flex-wrap: wrap;
 
 	> * + * {
-		// .editor-toolbar i.separator {
-		border--left-color: var(--grey-200) !important;
-		// }
-		// .editor-toolbar i.separator {
-		// display: inline-block;
-		// width: 0;
 		border-left: 1px solid var(--grey-200);
-		// border-right: 1px solid #fff;
-		// color: transparent;
-		// text-indent: -10px;
 		margin-left: 6px;
 		padding-left: 6px;
-		// }
 	}
 }
 
 .editor-toolbar__button {
-	color: var(--grey-700);
-	min-width: 30px;
-	height: 30px;
-	border-radius: 3px;
+	min-width: 2rem;
+	height: 2rem;
+	border-radius: $radius;
 	border: 1px solid transparent;
+	color: var(--grey-700);
+	transition: all $transition;
+	background: transparent;
+	margin-right: .25rem;
 
 	&:hover {
-		background: var(--grey-200);
-		border-color: var(--grey-300);
+		background: var(--grey-100);
+		border-color: var(--grey-200);
+	}
+	
+	.icon {
+		position: relative;
+		
+		.icon__lower-text {
+			font-size: .75rem;
+			position: absolute;
+			bottom: -3px;
+			right: -2px;
+			font-weight: bold;
+		}
 	}
-}
-
-.editor-toolbar__pseudo-icon {
-	padding: 0 .5rem;
-	font-weight: bold;
-	vertical-align: top;
 }
 
 .editor-toolbar__table-buttons {
diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue
index 88f020df8..422e143d4 100644
--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@@ -404,20 +404,30 @@ function handleImagePaste(event) {
 <style lang="scss">
 .tiptap__editor {
 	min-height: 10rem;
-}
-
-.tiptap p.is-empty::before {
-	content: attr(data-placeholder);
-	color: var(--grey-400);
-	pointer-events: none;
-	height: 0;
-	float: left;
+	transition: box-shadow $transition;
+	border-radius: $radius;
+	
+	&:focus-within, &:focus {
+		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
+		
+		.tiptap p.is-empty::before {
+			content: attr(data-placeholder);
+			color: var(--grey-400);
+			pointer-events: none;
+			height: 0;
+			float: left;
+		}
+	}
 }
 
 // Basic editor styles
 .ProseMirror {
 	padding: .5rem;
 
+	&:focus-within, &:focus {
+		box-shadow: none;
+	}
+
 	> * + * {
 		margin-top: 0.75em;
 	}