fix: Misc styles

frappe · Sep 19, 2024 · 6e8eef6 · 6e8eef6
1 parent aa6db40
commit 6e8eef6
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 26 deletions.
diff --git a/frontend/src/components/BlockContextMenu.vue b/frontend/src/components/BlockContextMenu.vue
@@ -60,29 +60,25 @@
 			}"
 			v-model="showBlockTemplateDialog">
 			<template #body-content>
-				<div class="flex flex-col gap-4">
+				<div class="flex flex-col gap-3">
 					<BuilderInput
 						type="text"
 						v-model="blockTemplateProperties.templateName"
 						label="Template Name"
 						required
-						:hideClearButton="true"
-						class="[&>div>input]:bg-surface-white [&>label]:dark:text-zinc-300" />
-
+						:hideClearButton="true" />
 					<BuilderInput
 						type="select"
 						v-model="blockTemplateProperties.category"
 						label="Category"
 						:options="store.blockTemplateCategoryOptions"
-						:hideClearButton="true"
-						class="[&>div>input]:bg-surface-white [&>label]:dark:text-zinc-300" />
+						:hideClearButton="true" />
 					<div class="relative">
 						<BuilderInput
 							type="text"
 							v-model="blockTemplateProperties.previewImage"
 							label="Preview Image"
-							:hideClearButton="true"
-							class="[&>div>input]:bg-surface-white [&>label]:dark:text-zinc-300" />
+							:hideClearButton="true" />
 						<FileUploader
 							file-types="image/*"
 							@success="

diff --git a/frontend/src/components/Controls/Input.vue b/frontend/src/components/Controls/Input.vue
@@ -68,6 +68,7 @@ const classes = computed(() => {
 	} else if (props.type === "textarea") {
 		_classes.push([
 			"[&>textarea]:border-outline-gray-1",
+			"[&>label]:text-text-icons-gray-7",
 			"[&>textarea]:bg-surface-gray-2",
 			"[&>textarea]:text-text-icons-gray-8",
 			"[&>textarea]:focus:border-outline-gray-3",
@@ -80,6 +81,7 @@ const classes = computed(() => {
 		]);
 	} else {
 		_classes.push([
+			"[&>label]:text-text-icons-gray-7",
 			"[&>div>input]:border-outline-gray-1",
 			"[&>div>input]:bg-surface-gray-2",
 			"[&>div>input]:text-text-icons-gray-8",

diff --git a/frontend/src/components/TextBlock.vue b/frontend/src/components/TextBlock.vue
@@ -27,7 +27,7 @@
 				},
 			}"
 			v-if="editor"
-			class="z-50 rounded-md border border-gray-300 bg-surface-white p-1 text-lg shadow-2xl">
+			class="z-50 rounded-md border border-outline-gray-3 bg-surface-white p-1 text-lg text-text-icons-gray-9 shadow-2xl">
 			<div v-if="settingLink" class="flex">
 				<BuilderInput
 					v-model="textLink"
@@ -57,41 +57,41 @@
 			<div v-show="!settingLink" class="flex gap-1">
 				<button
 					@click="setHeading(1)"
-					class="rounded px-2 py-1 text-sm hover:bg-gray-100"
-					:class="{ 'bg-gray-200': block.getElement() === 'h1' }">
+					class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+					:class="{ 'bg-surface-gray-3': block.getElement() === 'h1' }">
 					<code>H1</code>
 				</button>
 				<button
 					@click="setHeading(2)"
-					class="rounded px-2 py-1 text-sm hover:bg-gray-100"
-					:class="{ 'bg-gray-200': block.getElement() === 'h2' }">
+					class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+					:class="{ 'bg-surface-gray-3': block.getElement() === 'h2' }">
 					<code>H2</code>
 				</button>
 				<button
 					@click="setHeading(3)"
-					class="rounded px-2 py-1 text-sm hover:bg-gray-100"
-					:class="{ 'bg-gray-200': block.getElement() === 'h3' }">
+					class="rounded px-2 py-1 text-sm hover:bg-surface-gray-2"
+					:class="{ 'bg-surface-gray-3': block.getElement() === 'h3' }">
 					<code>H3</code>
 				</button>
 				<button
 					v-show="!block.isHeader()"
 					@click="editor?.chain().focus().toggleBold().run()"
-					class="rounded px-2 py-1 hover:bg-gray-100"
-					:class="{ 'bg-gray-200': editor.isActive('bold') }">
+					class="rounded px-2 py-1 hover:bg-surface-gray-2"
+					:class="{ 'bg-surface-gray-3': editor.isActive('bold') }">
 					<FeatherIcon class="h-3 w-3" name="bold" />
 				</button>
 				<button
 					v-show="!block.isHeader()"
 					@click="editor?.chain().focus().toggleItalic().run()"
-					class="rounded px-2 py-1 hover:bg-gray-100"
-					:class="{ 'bg-gray-200': editor.isActive('italic') }">
+					class="rounded px-2 py-1 hover:bg-surface-gray-2"
+					:class="{ 'bg-surface-gray-3': editor.isActive('italic') }">
 					<FeatherIcon class="h-3 w-3" name="italic" />
 				</button>
 				<button
 					v-show="!block.isHeader()"
 					@click="editor?.chain().focus().toggleStrike().run()"
-					class="rounded px-2 py-1 hover:bg-gray-100"
-					:class="{ 'bg-gray-200': editor.isActive('strike') }">
+					class="rounded px-2 py-1 hover:bg-surface-gray-2"
+					:class="{ 'bg-surface-gray-3': editor.isActive('strike') }">
 					<StrikeThroughIcon />
 				</button>
 				<button
@@ -102,8 +102,8 @@
 							enableLinkInput();
 						}
 					"
-					class="rounded px-2 py-1 hover:bg-gray-100"
-					:class="{ 'bg-gray-200': editor.isActive('link') }">
+					class="rounded px-2 py-1 hover:bg-surface-gray-2"
+					:class="{ 'bg-surface-gray-3': editor.isActive('link') }">
 					<FeatherIcon class="h-3 w-3" name="link" />
 				</button>
 			</div>

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
@@ -1,4 +1,4 @@
-import { Dialog, FeatherIcon, FormControl, FrappeUI } from "frappe-ui";
+import { Button, Dialog, FeatherIcon, FormControl, FrappeUI } from "frappe-ui";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 import "./index.css";
@@ -8,8 +8,8 @@ import "./telemetry";
 import "./utils/arrayFunctions";
 
 import App from "@/App.vue";
+import BuilderButton from "@/components/Controls/Button.vue";
 import Input from "@/components/Controls/Input.vue";
-import Button from "@/components/Controls/Button.vue";
 
 const app = createApp(App);
 const pinia = createPinia();
@@ -20,7 +20,8 @@ app.use(pinia);
 
 window.name = "frappe-builder";
 
-app.component("BuilderButton", Button);
+app.component("Button", Button);
+app.component("BuilderButton", BuilderButton);
 app.component("FormControl", FormControl);
 app.component("Dialog", Dialog);
 app.component("BuilderInput", Input);