From 461678394ece7daa121559057332e577be79cc9f Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Sun, 2 Apr 2023 01:00:40 -0700
Subject: [PATCH] styling

---
 packages/client/src/pages/page-editor/page-editor.vue | 10 ----------
 packages/client/src/pages/page.vue                    |  4 ++--
 packages/client/src/pages/scratchpad.vue              |  2 +-
 packages/client/src/style.scss                        |  4 ++++
 4 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 89af1a63e..185b4347a 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -83,12 +83,6 @@
 
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, provide, watch } from 'vue';
-import 'prismjs';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import 'prismjs/themes/prism-okaidia.css';
-import 'vue-prism-editor/dist/prismeditor.min.css';
 import { v4 as uuid } from 'uuid';
 import XVariable from './page-editor.script-block.vue';
 import XBlocks from './page-editor.blocks.vue';
@@ -357,10 +351,6 @@ function removeEyeCatchingImage() {
 	eyeCatchingImageId = null;
 }
 
-function highlighter(code) {
-	return highlight(code, languages.js, 'javascript');
-}
-
 async function init() {
 	hpml = new HpmlTypeChecker();
 
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index f1a967c4a..26887e4df 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -16,9 +16,9 @@
 							</div>
 							<div class="menu-actions">
 								<button v-tooltip="i18n.ts.copyUrl" @click="copyUrl" class="menu _button"><i class="ph-link-simple ph-bold ph-lg"/></button>
-								<MkA v-tooltip="i18n.ts._pages.viewSource" :to="`/@${username}/pages/${pageName}/view-source`" class="menu _button"><i class="ph-code ph-bold ph-lg"/></MkA>
+								<MkA v-tooltip="i18n.ts._pages.viewSource" :to="`/@${username}/pages/${pageName}/view-source`" class="menu _button" style="transform: translateY(2px);"><i class="ph-code ph-bold ph-lg"/></MkA>
 								<template v-if="$i && $i.id === page.userId">
-									<MkA v-tooltip="i18n.ts._pages.editPage" class="menu _button" :to="`/pages/edit/${page.id}`"><i class="ph-pencil ph-bold ph-lg"/></MkA>
+									<MkA v-tooltip="i18n.ts._pages.editPage" class="menu _button" :to="`/pages/edit/${page.id}`" style="transform: translateY(2px);"><i class="ph-pencil ph-bold ph-lg"/></MkA>
 									<button v-if="$i.pinnedPageId === page.id" v-tooltip="i18n.ts.unpin" class="menu _button" @click="pin(false)"><i class="ph-push-pin-slash ph-bold ph-lg"/></button>
 									<button v-else v-tooltip="i18n.ts.pin" class="menu _button" @click="pin(true)"><i class="ph-push-pin ph-bold ph-lg"/></button>
 								</template>
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index c448986a5..7d423e7dd 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="iltifgqe">
 	<div class="editor _panel _gap">
-		<PrismEditor v-model="code" class="_code code" :highlight="highlighter" :line-numbers="false"/>
+		<PrismEditor v-model="code" class="_code code" style="height: 30vh" :highlight="highlighter" :line-numbers="false"/>
 		<MkButton style="position: absolute; top: 8px; right: 8px;" primary @click="run()"><i class="ph-play ph-bold ph-lg"></i></MkButton>
 	</div>
 
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 0176f7c80..7a8a78f00 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -518,6 +518,10 @@ hr {
 	padding: 5px;
 }
 
+.prism-editor__container {
+	height: 100%;
+}
+
 .prism-editor__textarea:focus {
 	outline: none;
 }