From 392fee66a2f9f6da07480e493a6c683d7a761e48 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 13 Nov 2023 11:25:13 +0530
Subject: [PATCH 1/5] ci: Auto format vue files with prettier

---
 .pre-commit-config.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 7443bde6a8..5561068486 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -35,7 +35,7 @@ repos:
     rev: v2.7.1
     hooks:
       - id: prettier
-        types_or: [javascript]
+        types_or: [javascript, vue]
         # Ignore any files that might contain jinja / bundles
         exclude: |
             (?x)^(

From b4bc871aab74f2c49ab894a2b4b4062dd5f8c040 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 13 Nov 2023 11:26:00 +0530
Subject: [PATCH 2/5] style: Auto format vue file with prettier

- Ran pre-commit run --all-files
---
 .../js/form_builder/components/SearchBox.vue  |   2 +-
 .../js/form_builder/components/Tabs.vue       |   8 +-
 .../components/controls/ButtonControl.vue     |   6 +-
 .../components/controls/CheckControl.vue      |   5 +-
 .../components/controls/DataControl.vue       |   7 +-
 .../components/controls/SelectControl.vue     |  25 +-
 .../components/controls/TextControl.vue       |   2 +-
 .../js/frappe/build_events/BuildError.vue     |  13 +-
 .../js/frappe/build_events/BuildSuccess.vue   |  12 +-
 .../js/frappe/file_uploader/FileBrowser.vue   |  67 ++-
 .../js/frappe/file_uploader/FilePreview.vue   |  54 ++-
 .../js/frappe/file_uploader/FileUploader.vue  | 448 +++++++++++-------
 .../js/frappe/file_uploader/ImageCropper.vue  |  33 +-
 .../js/frappe/file_uploader/ProgressRing.vue  |   9 +-
 .../js/frappe/file_uploader/WebLink.vue       |   8 +-
 .../print_format_builder/ConfigureColumns.vue |  12 +-
 .../public/js/print_format_builder/Field.vue  |  45 +-
 .../js/print_format_builder/HTMLEditor.vue    |   9 +-
 .../print_format_builder/LetterHeadEditor.vue | 168 +++----
 .../js/print_format_builder/Preview.vue       |  16 +-
 .../js/print_format_builder/PrintFormat.vue   |  10 +-
 .../PrintFormatBuilder.vue                    |   6 +-
 .../PrintFormatControls.vue                   |  68 +--
 .../PrintFormatSection.vue                    |  54 +--
 .../components/ActionNode.vue                 |  20 +-
 .../components/ConnectionLine.vue             |   6 +-
 26 files changed, 574 insertions(+), 539 deletions(-)

diff --git a/frappe/public/js/form_builder/components/SearchBox.vue b/frappe/public/js/form_builder/components/SearchBox.vue
index bae326058d..050037a6b0 100644
--- a/frappe/public/js/form_builder/components/SearchBox.vue
+++ b/frappe/public/js/form_builder/components/SearchBox.vue
@@ -6,7 +6,7 @@
 			class="search-input form-control"
 			type="text"
 			:placeholder="__('Search properties...')"
-			@input="event => $emit('update:modelValue', event.target.value)"
+			@input="(event) => $emit('update:modelValue', event.target.value)"
 		/>
 		<span class="search-icon">
 			<div v-html="frappe.utils.icon('search', 'sm')"></div>
diff --git a/frappe/public/js/form_builder/components/Tabs.vue b/frappe/public/js/form_builder/components/Tabs.vue
index 6f2ace4d13..ef8674f4c4 100644
--- a/frappe/public/js/form_builder/components/Tabs.vue
+++ b/frappe/public/js/form_builder/components/Tabs.vue
@@ -13,7 +13,7 @@ const store = useStore();
 const { Backspace } = useMagicKeys();
 whenever(Backspace, (value) => {
 	if (value && selected.value && store.not_using_input) {
-		remove_tab(store.current_tab, '', true);
+		remove_tab(store.current_tab, "", true);
 	}
 });
 
@@ -45,12 +45,10 @@ function add_new_section() {
 
 function is_tab_empty(tab) {
 	// check if sections have columns and it contains fields
-	return !tab.sections.some((section) =>
-		section.columns.some((column) => column.fields.length)
-	);
+	return !tab.sections.some((section) => section.columns.some((column) => column.fields.length));
 }
 
-function remove_tab(tab, event, force=false) {
+function remove_tab(tab, event, force = false) {
 	// is remove_tab_btn is not visible then return
 	if (!event?.currentTarget?.offsetParent && !force) return;
 
diff --git a/frappe/public/js/form_builder/components/controls/ButtonControl.vue b/frappe/public/js/form_builder/components/controls/ButtonControl.vue
index 46fc97052c..6642d5dc49 100644
--- a/frappe/public/js/form_builder/components/controls/ButtonControl.vue
+++ b/frappe/public/js/form_builder/components/controls/ButtonControl.vue
@@ -4,10 +4,7 @@ const props = defineProps(["df", "value"]);
 </script>
 
 <template>
-	<div
-		class="control frappe-control editable"
-		:data-fieldtype="df.fieldtype"
-	>
+	<div class="control frappe-control editable" :data-fieldtype="df.fieldtype">
 		<!-- label -->
 		<div class="field-controls">
 			<h4 v-if="df.fieldtype == 'Heading'">
@@ -28,5 +25,4 @@ const props = defineProps(["df", "value"]);
 h4 {
 	margin-bottom: 0px;
 }
-
 </style>
diff --git a/frappe/public/js/form_builder/components/controls/CheckControl.vue b/frappe/public/js/form_builder/components/controls/CheckControl.vue
index fbdb76396d..e8ec928763 100644
--- a/frappe/public/js/form_builder/components/controls/CheckControl.vue
+++ b/frappe/public/js/form_builder/components/controls/CheckControl.vue
@@ -20,7 +20,7 @@ let slots = useSlots();
 				type="checkbox"
 				:checked="value"
 				:disabled="read_only"
-				@change="event => $emit('update:modelValue', event.target.checked)"
+				@change="(event) => $emit('update:modelValue', event.target.checked)"
 			/>
 			<span class="label-area" :class="{ reqd: df.reqd }">{{ df.label }}</span>
 		</label>
@@ -31,7 +31,8 @@ let slots = useSlots();
 </template>
 
 <style lang="scss" scoped>
-label, input {
+label,
+input {
 	margin-bottom: 0 !important;
 	cursor: pointer;
 }
diff --git a/frappe/public/js/form_builder/components/controls/DataControl.vue b/frappe/public/js/form_builder/components/controls/DataControl.vue
index f0fb2d244a..04c426e972 100644
--- a/frappe/public/js/form_builder/components/controls/DataControl.vue
+++ b/frappe/public/js/form_builder/components/controls/DataControl.vue
@@ -23,10 +23,7 @@ if (props.df.fieldtype === "Icon") {
 </script>
 
 <template>
-	<div
-		class="control frappe-control"
-		:class="{ editable: slots.label }"
-	>
+	<div class="control frappe-control" :class="{ editable: slots.label }">
 		<!-- label -->
 		<div v-if="slots.label" class="field-controls">
 			<slot name="label" />
@@ -49,7 +46,7 @@ if (props.df.fieldtype === "Icon") {
 			type="text"
 			:value="value"
 			:disabled="read_only || df.read_only"
-			@input="event => $emit('update:modelValue', event.target.value)"
+			@input="(event) => $emit('update:modelValue', event.target.value)"
 		/>
 		<input
 			v-if="slots.label && df.fieldtype === 'Barcode'"
diff --git a/frappe/public/js/form_builder/components/controls/SelectControl.vue b/frappe/public/js/form_builder/components/controls/SelectControl.vue
index ef07dbf0ed..7961b557ed 100644
--- a/frappe/public/js/form_builder/components/controls/SelectControl.vue
+++ b/frappe/public/js/form_builder/components/controls/SelectControl.vue
@@ -13,20 +13,22 @@ function get_options() {
 
 	if (typeof options == "string") {
 		options = options.split("\n") || "";
-		options = options.map(opt => {
+		options = options.map((opt) => {
 			return { label: __(opt), value: opt };
 		});
 	}
 
 	if (options?.length && typeof options[0] == "string") {
-		options = options.map(opt => {
+		options = options.map((opt) => {
 			return { label: __(opt), value: opt };
 		});
 	}
 
 	if (props.df.fieldname == "fieldtype") {
 		if (!in_list(frappe.model.layout_fields, props.modelValue)) {
-			options = options && options.filter(opt => !in_list(frappe.model.layout_fields, opt.value));
+			options =
+				options &&
+				options.filter((opt) => !in_list(frappe.model.layout_fields, opt.value));
 		} else {
 			options = [{ label: __(props.modelValue), value: props.modelValue }];
 		}
@@ -56,17 +58,17 @@ let select_control = computed(() => {
 					content.value = select_control.value.get_value();
 				}
 				update_control.value = true;
-			}
+			},
 		},
 		value: content.value,
 		render_input: true,
-		only_input: Boolean(slots.label) || props.no_label
+		only_input: Boolean(slots.label) || props.no_label,
 	});
 });
 
 let content = computed({
 	get: () => props.modelValue,
-	set: value => emit("update:modelValue", value)
+	set: (value) => emit("update:modelValue", value),
 });
 
 onMounted(() => {
@@ -75,15 +77,18 @@ onMounted(() => {
 
 watch(
 	() => content.value,
-	value => {
+	(value) => {
 		update_control.value = false;
 		select_control.value?.set_value(value);
 	}
 );
 
-watch(() => props.df.options, () => {
-	select_control.value;
-})
+watch(
+	() => props.df.options,
+	() => {
+		select_control.value;
+	}
+);
 </script>
 
 <template>
diff --git a/frappe/public/js/form_builder/components/controls/TextControl.vue b/frappe/public/js/form_builder/components/controls/TextControl.vue
index 5e0aa382d7..0947c2757c 100644
--- a/frappe/public/js/form_builder/components/controls/TextControl.vue
+++ b/frappe/public/js/form_builder/components/controls/TextControl.vue
@@ -38,7 +38,7 @@ let height = computed(() => {
 			type="text"
 			:value="value"
 			:disabled="read_only || df.read_only"
-			@input="event => $emit('update:modelValue', event.target.value)"
+			@input="(event) => $emit('update:modelValue', event.target.value)"
 		/>
 
 		<!-- description -->
diff --git a/frappe/public/js/frappe/build_events/BuildError.vue b/frappe/public/js/frappe/build_events/BuildError.vue
index 4cdbbd85c0..500387b615 100644
--- a/frappe/public/js/frappe/build_events/BuildError.vue
+++ b/frappe/public/js/frappe/build_events/BuildError.vue
@@ -28,9 +28,7 @@ function open_in_editor(location) {
 }
 function error_component(error, i) {
 	let location = data.value.error.errors[i].location;
-	let location_string = `${location.file}:${location.line}:${
-		location.column
-	}`;
+	let location_string = `${location.file}:${location.line}:${location.column}`;
 	let template = error.replace(
 		" > " + location_string,
 		` &gt; <a class="file-link" @click="open">${location_string}</a>`
@@ -41,11 +39,11 @@ function error_component(error, i) {
 		methods: {
 			open() {
 				frappe.realtime.emit("open_in_editor", location);
-			}
-		}
+			},
+		},
 	};
 }
-defineExpose({show, hide});
+defineExpose({ show, hide });
 </script>
 
 <style scoped>
@@ -58,8 +56,7 @@ defineExpose({show, hide});
 	z-index: 9999;
 	margin: 0;
 	background: rgba(0, 0, 0, 0.66);
-	--monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
-		monospace;
+	--monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
 	--dim: var(--gray-400);
 }
 .window {
diff --git a/frappe/public/js/frappe/build_events/BuildSuccess.vue b/frappe/public/js/frappe/build_events/BuildSuccess.vue
index 787096aa95..2fa3848839 100644
--- a/frappe/public/js/frappe/build_events/BuildSuccess.vue
+++ b/frappe/public/js/frappe/build_events/BuildSuccess.vue
@@ -1,13 +1,7 @@
 <template>
-	<div
-		v-if="is_shown"
-		class="flex justify-between build-success-message align-center"
-	>
+	<div v-if="is_shown" class="flex justify-between build-success-message align-center">
 		Compiled successfully
-		<a
-			v-if="!live_reload"
-			class="ml-4 text-white underline" href="/" @click.prevent="reload"
-		>
+		<a v-if="!live_reload" class="ml-4 text-white underline" href="/" @click.prevent="reload">
 			Refresh
 		</a>
 	</div>
@@ -43,7 +37,7 @@ function reload() {
 	window.location.reload();
 }
 
-defineExpose({show, hide});
+defineExpose({ show, hide });
 </script>
 
 <style scoped>
diff --git a/frappe/public/js/frappe/file_uploader/FileBrowser.vue b/frappe/public/js/frappe/file_uploader/FileBrowser.vue
index 6fafcb4685..56102586f6 100644
--- a/frappe/public/js/frappe/file_uploader/FileBrowser.vue
+++ b/frappe/public/js/frappe/file_uploader/FileBrowser.vue
@@ -1,11 +1,7 @@
 <template>
 	<div class="file-browser">
 		<div>
-			<a
-				href=""
-				class="text-muted text-medium"
-				@click.prevent="emit('hide-browser')"
-			>
+			<a href="" class="text-muted text-medium" @click.prevent="emit('hide-browser')">
 				{{ __("← Back to upload files") }}
 			</a>
 		</div>
@@ -23,8 +19,8 @@
 				class="tree with-skeleton"
 				:node="node"
 				:selected_node="selected_node"
-				@node-click="n => toggle_node(n)"
-				@load-more="n => load_more(n)"
+				@node-click="(n) => toggle_node(n)"
+				@load-more="(n) => load_more(n)"
 			/>
 		</div>
 	</div>
@@ -48,7 +44,7 @@ let node = ref({
 	fetching: false,
 	fetched: false,
 	open: false,
-	filtered: true
+	filtered: true,
 });
 let selected_node = ref({});
 let search_text = ref("");
@@ -61,16 +57,14 @@ function toggle_node(node) {
 		node.fetching = true;
 		node.children_start = 0;
 		node.children_loading = false;
-		get_files_in_folder(node.value, 0).then(
-			({ files, has_more }) => {
-				node.open = true;
-				node.children = files;
-				node.fetched = true;
-				node.fetching = false;
-				node.children_start += page_length.value;
-				node.has_more_children = has_more;
-			}
-		);
+		get_files_in_folder(node.value, 0).then(({ files, has_more }) => {
+			node.open = true;
+			node.children = files;
+			node.fetched = true;
+			node.fetching = false;
+			node.children_start += page_length.value;
+			node.has_more_children = has_more;
+		});
 	} else {
 		node.open = !node.open;
 		select_node(node);
@@ -80,14 +74,12 @@ function load_more(node) {
 	if (node.has_more_children) {
 		let start = node.children_start;
 		node.children_loading = true;
-		get_files_in_folder(node.value, start).then(
-			({ files, has_more }) => {
-				node.children = node.children.concat(files);
-				node.children_start += page_length.value;
-				node.has_more_children = has_more;
-				node.children_loading = false;
-			}
-		);
+		get_files_in_folder(node.value, start).then(({ files, has_more }) => {
+			node.children = node.children.concat(files);
+			node.children_start += page_length.value;
+			node.has_more_children = has_more;
+			node.children_loading = false;
+		});
 	}
 }
 function select_node(node) {
@@ -100,9 +92,9 @@ function get_files_in_folder(folder, start) {
 		.call("frappe.core.api.file.get_files_in_folder", {
 			folder,
 			start,
-			page_length: page_length.value
+			page_length: page_length.value,
 		})
-		.then(r => {
+		.then((r) => {
 			let { files = [], has_more = false } = r.message || {};
 			files.sort((a, b) => {
 				if (a.is_folder && b.is_folder) {
@@ -116,7 +108,7 @@ function get_files_in_folder(folder, start) {
 				}
 				return 0;
 			});
-			files = files.map(file => make_file_node(file));
+			files = files.map((file) => make_file_node(file));
 			return { files, has_more };
 		});
 }
@@ -127,15 +119,12 @@ function search_by_name() {
 	}
 	if (search_text.value.length < 3) return;
 	frappe
-		.call(
-			"frappe.core.api.file.get_files_by_search_text",
-			{
-				text: search_text.value
-			}
-		)
-		.then(r => {
+		.call("frappe.core.api.file.get_files_by_search_text", {
+			text: search_text.value,
+		})
+		.then((r) => {
 			let files = r.message || [];
-			files = files.map(file => make_file_node(file));
+			files = files.map((file) => make_file_node(file));
 			if (!folder_node.value) {
 				folder_node.value = node.value;
 			}
@@ -145,7 +134,7 @@ function search_by_name() {
 				children: files,
 				by_search: true,
 				open: true,
-				filtered: true
+				filtered: true,
 			};
 		});
 }
@@ -164,7 +153,7 @@ function make_file_node(file) {
 		children_start: 0,
 		open: false,
 		fetching: false,
-		filtered: true
+		filtered: true,
 	};
 }
 
diff --git a/frappe/public/js/frappe/file_uploader/FilePreview.vue b/frappe/public/js/frappe/file_uploader/FilePreview.vue
index 65c0529b40..9c6159334a 100644
--- a/frappe/public/js/frappe/file_uploader/FilePreview.vue
+++ b/frappe/public/js/frappe/file_uploader/FilePreview.vue
@@ -1,13 +1,8 @@
 <template>
 	<div class="file-preview">
 		<div class="file-icon">
-			<img
-				v-if="is_image"
-				:src="src"
-				:alt="file.name"
-			>
-			<div class="fallback" v-else v-html="frappe.utils.icon('file', 'md')">
-			</div>
+			<img v-if="is_image" :src="src" :alt="file.name" />
+			<div class="fallback" v-else v-html="frappe.utils.icon('file', 'md')"></div>
 		</div>
 		<div>
 			<div>
@@ -24,8 +19,20 @@
 			</div>
 
 			<div class="flex config-area">
-				<label v-if="is_optimizable" class="frappe-checkbox"><input type="checkbox" :checked="optimize" @change="emit('toggle_optimize')">{{ __('Optimize') }}</label>
-				<label class="frappe-checkbox"><input type="checkbox" :checked="file.private" @change="emit('toggle_private')">{{ __('Private') }}</label>
+				<label v-if="is_optimizable" class="frappe-checkbox"
+					><input
+						type="checkbox"
+						:checked="optimize"
+						@change="emit('toggle_optimize')"
+					/>{{ __("Optimize") }}</label
+				>
+				<label class="frappe-checkbox"
+					><input
+						type="checkbox"
+						:checked="file.private"
+						@change="emit('toggle_private')"
+					/>{{ __("Private") }}</label
+				>
 			</div>
 			<div>
 				<span v-if="file.error_message" class="file-error text-danger">
@@ -45,8 +52,18 @@
 			<div v-if="uploaded" v-html="frappe.utils.icon('solid-success', 'lg')"></div>
 			<div v-if="file.failed" v-html="frappe.utils.icon('solid-error', 'lg')"></div>
 			<div class="file-action-buttons">
-				<button v-if="is_cropable" class="btn btn-crop muted" @click="emit('toggle_image_cropper')" v-html="frappe.utils.icon('crop', 'md')"></button>
-				<button v-if="!uploaded && !file.uploading && !file.failed" class="btn muted" @click="emit('remove')" v-html="frappe.utils.icon('delete', 'md')"></button>
+				<button
+					v-if="is_cropable"
+					class="btn btn-crop muted"
+					@click="emit('toggle_image_cropper')"
+					v-html="frappe.utils.icon('crop', 'md')"
+				></button>
+				<button
+					v-if="!uploaded && !file.uploading && !file.failed"
+					class="btn muted"
+					@click="emit('remove')"
+					v-html="frappe.utils.icon('delete', 'md')"
+				></button>
 			</div>
 		</div>
 	</div>
@@ -79,15 +96,20 @@ let uploaded = computed(() => {
 	return props.file.request_succeeded;
 });
 let is_image = computed(() => {
-	return props.file.file_obj.type.startsWith('image');
+	return props.file.file_obj.type.startsWith("image");
 });
 let is_optimizable = computed(() => {
-	let is_svg = props.file.file_obj.type == 'image/svg+xml';
+	let is_svg = props.file.file_obj.type == "image/svg+xml";
 	return is_image.value && !is_svg && !uploaded.value && !props.file.failed;
 });
 let is_cropable = computed(() => {
-	let croppable_types = ['image/jpeg', 'image/png'];
-	return !uploaded.value && !props.file.uploading && !props.file.failed && croppable_types.includes(props.file.file_obj.type);
+	let croppable_types = ["image/jpeg", "image/png"];
+	return (
+		!uploaded.value &&
+		!props.file.uploading &&
+		!props.file.failed &&
+		croppable_types.includes(props.file.file_obj.type)
+	);
 });
 let progress = computed(() => {
 	let value = Math.round((props.file.progress * 100) / props.file.total);
@@ -102,7 +124,7 @@ onMounted(() => {
 	if (is_image.value) {
 		if (window.FileReader) {
 			let fr = new FileReader();
-			fr.onload = () => src.value = fr.result;
+			fr.onload = () => (src.value = fr.result);
 			fr.readAsDataURL(props.file.file_obj);
 		}
 	}
diff --git a/frappe/public/js/frappe/file_uploader/FileUploader.vue b/frappe/public/js/frappe/file_uploader/FileUploader.vue
index 91a4654bb9..b4725da83d 100644
--- a/frappe/public/js/frappe/file_uploader/FileUploader.vue
+++ b/frappe/public/js/frappe/file_uploader/FileUploader.vue
@@ -1,5 +1,6 @@
 <template>
-	<div class="file-uploader"
+	<div
+		class="file-uploader"
 		@dragover.prevent="dragover"
 		@dragleave.prevent="dragleave"
 		@drop.prevent="dropfiles"
@@ -10,19 +11,50 @@
 		>
 			<div v-if="!is_dragging">
 				<div class="text-center">
-					{{ __('Drag and drop files here or upload from') }}
+					{{ __("Drag and drop files here or upload from") }}
 				</div>
 				<div class="mt-2 text-center">
 					<button class="btn btn-file-upload" @click="browse_files">
-						<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
-							<path d="M13.5 22V19" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M16.5 22V19" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M10.5 22H19.5" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M7.5 16H22.5" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M21 8H9C8.17157 8 7.5 8.67157 7.5 9.5V17.5C7.5 18.3284 8.17157 19 9 19H21C21.8284 19 22.5 18.3284 22.5 17.5V9.5C22.5 8.67157 21.8284 8 21 8Z" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
+						<svg
+							width="30"
+							height="30"
+							viewBox="0 0 30 30"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)" />
+							<path
+								d="M13.5 22V19"
+								stroke="var(--text-color)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path
+								d="M16.5 22V19"
+								stroke="var(--text-color)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path
+								d="M10.5 22H19.5"
+								stroke="var(--text-color)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path
+								d="M7.5 16H22.5"
+								stroke="var(--text-color)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path
+								d="M21 8H9C8.17157 8 7.5 8.67157 7.5 9.5V17.5C7.5 18.3284 8.17157 19 9 19H21C21.8284 19 22.5 18.3284 22.5 17.5V9.5C22.5 8.67157 21.8284 8 21 8Z"
+								stroke="var(--text-color)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
 						</svg>
-						<div class="mt-1">{{ __('My Device') }}</div>
+						<div class="mt-1">{{ __("My Device") }}</div>
 					</button>
 					<input
 						type="file"
@@ -31,37 +63,105 @@
 						@change="on_file_input"
 						:multiple="allow_multiple"
 						:accept="(restrictions.allowed_file_types || []).join(', ')"
+					/>
+					<button
+						class="btn btn-file-upload"
+						v-if="!disable_file_browser"
+						@click="show_file_browser = true"
 					>
-					<button class="btn btn-file-upload" v-if="!disable_file_browser" @click="show_file_browser = true">
-						<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
-							<path d="M13.0245 11.5H8C7.72386 11.5 7.5 11.7239 7.5 12V20C7.5 21.1046 8.39543 22 9.5 22H20.5C21.6046 22 22.5 21.1046 22.5 20V14.5C22.5 14.2239 22.2761 14 22 14H15.2169C15.0492 14 14.8926 13.9159 14.8 13.776L13.4414 11.724C13.3488 11.5841 13.1922 11.5 13.0245 11.5Z" stroke="var(--text-color)" stroke-miterlimit="10" stroke-linecap="square"/>
-							<path d="M8.87939 9.5V8.5C8.87939 8.22386 9.10325 8 9.37939 8H20.6208C20.8969 8 21.1208 8.22386 21.1208 8.5V12" stroke="var(--text-color)" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+						<svg
+							width="30"
+							height="30"
+							viewBox="0 0 30 30"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)" />
+							<path
+								d="M13.0245 11.5H8C7.72386 11.5 7.5 11.7239 7.5 12V20C7.5 21.1046 8.39543 22 9.5 22H20.5C21.6046 22 22.5 21.1046 22.5 20V14.5C22.5 14.2239 22.2761 14 22 14H15.2169C15.0492 14 14.8926 13.9159 14.8 13.776L13.4414 11.724C13.3488 11.5841 13.1922 11.5 13.0245 11.5Z"
+								stroke="var(--text-color)"
+								stroke-miterlimit="10"
+								stroke-linecap="square"
+							/>
+							<path
+								d="M8.87939 9.5V8.5C8.87939 8.22386 9.10325 8 9.37939 8H20.6208C20.8969 8 21.1208 8.22386 21.1208 8.5V12"
+								stroke="var(--text-color)"
+								stroke-miterlimit="10"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
 						</svg>
-						<div class="mt-1">{{ __('Library') }}</div>
+						<div class="mt-1">{{ __("Library") }}</div>
 					</button>
-					<button class="btn btn-file-upload" v-if="allow_web_link" @click="show_web_link = true">
-						<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
-							<path d="M12.0469 17.9543L17.9558 12.0454" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M13.8184 11.4547L15.7943 9.47873C16.4212 8.85205 17.2714 8.5 18.1578 8.5C19.0443 8.5 19.8945 8.85205 20.5214 9.47873V9.47873C21.1481 10.1057 21.5001 10.9558 21.5001 11.8423C21.5001 12.7287 21.1481 13.5789 20.5214 14.2058L18.5455 16.1818" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
-							<path d="M11.4547 13.8184L9.47873 15.7943C8.85205 16.4212 8.5 17.2714 8.5 18.1578C8.5 19.0443 8.85205 19.8945 9.47873 20.5214V20.5214C10.1057 21.1481 10.9558 21.5001 11.8423 21.5001C12.7287 21.5001 13.5789 21.1481 14.2058 20.5214L16.1818 18.5455" stroke="var(--text-color)" stroke-linecap="round" stroke-linejoin="round"/>
+					<button
+						class="btn btn-file-upload"
+						v-if="allow_web_link"
+						@click="show_web_link = true"
+					>
+						<svg
+							width="30"
+							height="30"
+							viewBox="0 0 30 30"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)" />
+							<path
+								d="M12.0469 17.9543L17.9558 12.0454"
+								stroke="var(--text-color)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path
+								d="M13.8184 11.4547L15.7943 9.47873C16.4212 8.85205 17.2714 8.5 18.1578 8.5C19.0443 8.5 19.8945 8.85205 20.5214 9.47873V9.47873C21.1481 10.1057 21.5001 10.9558 21.5001 11.8423C21.5001 12.7287 21.1481 13.5789 20.5214 14.2058L18.5455 16.1818"
+								stroke="var(--text-color)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+							<path
+								d="M11.4547 13.8184L9.47873 15.7943C8.85205 16.4212 8.5 17.2714 8.5 18.1578C8.5 19.0443 8.85205 19.8945 9.47873 20.5214V20.5214C10.1057 21.1481 10.9558 21.5001 11.8423 21.5001C12.7287 21.5001 13.5789 21.1481 14.2058 20.5214L16.1818 18.5455"
+								stroke="var(--text-color)"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
 						</svg>
-						<div class="mt-1">{{ __('Link') }}</div>
+						<div class="mt-1">{{ __("Link") }}</div>
 					</button>
-					<button v-if="allow_take_photo" class="btn btn-file-upload" @click="capture_image">
-						<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)"/>
-							<path d="M11.5 10.5H9.5C8.67157 10.5 8 11.1716 8 12V20C8 20.8284 8.67157 21.5 9.5 21.5H20.5C21.3284 21.5 22 20.8284 22 20V12C22 11.1716 21.3284 10.5 20.5 10.5H18.5L17.3 8.9C17.1111 8.64819 16.8148 8.5 16.5 8.5H13.5C13.1852 8.5 12.8889 8.64819 12.7 8.9L11.5 10.5Z" stroke="var(--text-color)" stroke-linejoin="round"/>
-							<circle cx="15" cy="16" r="2.5" stroke="var(--text-color)"/>
+					<button
+						v-if="allow_take_photo"
+						class="btn btn-file-upload"
+						@click="capture_image"
+					>
+						<svg
+							width="30"
+							height="30"
+							viewBox="0 0 30 30"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<circle cx="15" cy="15" r="15" fill="var(--subtle-fg)" />
+							<path
+								d="M11.5 10.5H9.5C8.67157 10.5 8 11.1716 8 12V20C8 20.8284 8.67157 21.5 9.5 21.5H20.5C21.3284 21.5 22 20.8284 22 20V12C22 11.1716 21.3284 10.5 20.5 10.5H18.5L17.3 8.9C17.1111 8.64819 16.8148 8.5 16.5 8.5H13.5C13.1852 8.5 12.8889 8.64819 12.7 8.9L11.5 10.5Z"
+								stroke="var(--text-color)"
+								stroke-linejoin="round"
+							/>
+							<circle cx="15" cy="16" r="2.5" stroke="var(--text-color)" />
 						</svg>
-						<div class="mt-1">{{ __('Camera') }}</div>
+						<div class="mt-1">{{ __("Camera") }}</div>
 					</button>
-					<button v-if="google_drive_settings.enabled" class="btn btn-file-upload" @click="show_google_drive_picker">
+					<button
+						v-if="google_drive_settings.enabled"
+						class="btn btn-file-upload"
+						@click="show_google_drive_picker"
+					>
 						<svg width="30" height="30">
-							<image href="/assets/frappe/icons/social/google_drive.svg" width="30" height="30"/>
+							<image
+								href="/assets/frappe/icons/social/google_drive.svg"
+								width="30"
+								height="30"
+							/>
 						</svg>
-						<div class="mt-1">{{ __('Google Drive') }}</div>
+						<div class="mt-1">{{ __("Google Drive") }}</div>
 					</button>
 				</div>
 				<div class="text-muted text-medium text-center">
@@ -69,10 +169,13 @@
 				</div>
 			</div>
 			<div v-else>
-				{{ __('Drop files here') }}
+				{{ __("Drop files here") }}
 			</div>
 		</div>
-		<div class="file-preview-area" v-show="files.length && !show_file_browser && !show_web_link">
+		<div
+			class="file-preview-area"
+			v-show="files.length && !show_file_browser && !show_web_link"
+		>
 			<div class="file-preview-container" v-if="!show_image_cropper">
 				<FilePreview
 					v-for="(file, i) in files"
@@ -85,19 +188,16 @@
 				/>
 			</div>
 			<div class="flex align-center" v-if="show_upload_button && currently_uploading === -1">
-				<button
-					class="btn btn-primary btn-sm margin-right"
-					@click="upload_files"
-				>
+				<button class="btn btn-primary btn-sm margin-right" @click="upload_files">
 					<span v-if="files.length === 1">
-						{{ __('Upload file') }}
+						{{ __("Upload file") }}
 					</span>
 					<span v-else>
-						{{ __('Upload {0} files', [files.length]) }}
+						{{ __("Upload {0} files", [files.length]) }}
 					</span>
 				</button>
 				<div class="text-muted text-medium">
-					{{ __('Click on the lock icon to toggle public/private') }}
+					{{ __("Click on the lock icon to toggle public/private") }}
 				</div>
 			</div>
 		</div>
@@ -106,60 +206,56 @@
 			:file="files[crop_image_with_index]"
 			:fixed_aspect_ratio="restrictions.crop_image_aspect_ratio"
 			@toggle_image_cropper="toggle_image_cropper(-1)"
-			@upload_after_crop="trigger_upload=true"
+			@upload_after_crop="trigger_upload = true"
 		/>
 		<FileBrowser
 			ref="file_browser"
 			v-if="show_file_browser && !disable_file_browser"
 			@hide-browser="show_file_browser = false"
 		/>
-		<WebLink
-			ref="web_link"
-			v-if="show_web_link"
-			@hide-web-link="show_web_link = false"
-		/>
+		<WebLink ref="web_link" v-if="show_web_link" @hide-web-link="show_web_link = false" />
 	</div>
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue';
-import FilePreview from './FilePreview.vue';
-import FileBrowser from './FileBrowser.vue';
-import WebLink from './WebLink.vue';
-import GoogleDrivePicker from '../../integrations/google_drive_picker';
-import ImageCropper from './ImageCropper.vue';
+import { computed, ref, watch } from "vue";
+import FilePreview from "./FilePreview.vue";
+import FileBrowser from "./FileBrowser.vue";
+import WebLink from "./WebLink.vue";
+import GoogleDrivePicker from "../../integrations/google_drive_picker";
+import ImageCropper from "./ImageCropper.vue";
 
 // props
 const props = defineProps({
 	show_upload_button: {
-		default: true
+		default: true,
 	},
 	disable_file_browser: {
-		default: false
+		default: false,
 	},
 	allow_multiple: {
-		default: true
+		default: true,
 	},
 	as_dataurl: {
-		default: false
+		default: false,
 	},
 	doctype: {
-		default: null
+		default: null,
 	},
 	docname: {
-		default: null
+		default: null,
 	},
 	fieldname: {
-		default: null
+		default: null,
 	},
 	folder: {
-		default: 'Home'
+		default: "Home",
 	},
 	method: {
-		default: null
+		default: null,
 	},
 	on_success: {
-		default: null
+		default: null,
 	},
 	make_attachments_public: {
 		default: null,
@@ -169,15 +265,15 @@ const props = defineProps({
 			max_file_size: null, // 2048 -> 2KB
 			max_number_of_files: null,
 			allowed_file_types: [], // ['image/*', 'video/*', '.jpg', '.gif', '.pdf'],
-			crop_image_aspect_ratio: null // 1, 16 / 9, 4 / 3, NaN (free)
-		})
+			crop_image_aspect_ratio: null, // 1, 16 / 9, 4 / 3, NaN (free)
+		}),
 	},
 	attach_doc_image: {
-		default: false
+		default: false,
 	},
 	upload_notes: {
-		default: null // "Images or video, upto 2MB"
-	}
+		default: null, // "Images or video, upto 2MB"
+	},
 });
 
 // variables
@@ -197,7 +293,7 @@ let hide_dialog_footer = ref(false);
 let allow_take_photo = ref(false);
 let allow_web_link = ref(true);
 let google_drive_settings = ref({
-	enabled: false
+	enabled: false,
 });
 let wrapper_ready = ref(false);
 
@@ -211,14 +307,13 @@ if (frappe.user_id !== "Guest") {
 			if (!resp.exc) {
 				google_drive_settings.value = resp.message;
 			}
-		}
+		},
 	});
 }
 if (props.restrictions.max_file_size == null) {
-	frappe.call('frappe.core.api.file.get_max_file_size')
-		.then(res => {
-			props.restrictions.max_file_size = Number(res.message);
-		});
+	frappe.call("frappe.core.api.file.get_max_file_size").then((res) => {
+		props.restrictions.max_file_size = Number(res.message);
+	});
 }
 if (props.restrictions.max_number_of_files == null && props.doctype) {
 	props.restrictions.max_number_of_files = frappe.get_meta(props.doctype)?.max_attachments;
@@ -242,7 +337,7 @@ function on_file_input(e) {
 	add_files(file_input.value.files);
 }
 function remove_file(file) {
-	files.value = files.value.filter(f => f !== file);
+	files.value = files.value.filter((f) => f !== file);
 }
 function toggle_image_cropper(index) {
 	crop_image_with_index.value = show_image_cropper.value ? -1 : index;
@@ -251,7 +346,7 @@ function toggle_image_cropper(index) {
 }
 function toggle_all_private() {
 	let flag;
-	let private_values = files.value.filter(file => file.private);
+	let private_values = files.value.filter((file) => file.private);
 	if (private_values.length < files.value.length) {
 		// there are some private and some public
 		// set all to private
@@ -260,7 +355,7 @@ function toggle_all_private() {
 		// all are private, set all to public
 		flag = false;
 	}
-	files.value = files.value.map(file => {
+	files.value = files.value.map((file) => {
 		file.private = flag;
 		return file;
 	});
@@ -268,12 +363,19 @@ function toggle_all_private() {
 function show_max_files_number_warning(file) {
 	console.warn(
 		`File skipped because it exceeds the allowed specified limit of ${max_number_of_files} uploads`,
-		file,
+		file
 	);
 	if (props.doctype) {
-		MSG = __('File "{0}" was skipped because only {1} uploads are allowed for DocType "{2}"', [file.name, max_number_of_files, props.doctype])
+		MSG = __('File "{0}" was skipped because only {1} uploads are allowed for DocType "{2}"', [
+			file.name,
+			max_number_of_files,
+			props.doctype,
+		]);
 	} else {
-		MSG = __('File "{0}" was skipped because only {1} uploads are allowed', [file.name, max_number_of_files])
+		MSG = __('File "{0}" was skipped because only {1} uploads are allowed', [
+			file.name,
+			max_number_of_files,
+		]);
 	}
 	frappe.show_alert({
 		message: MSG,
@@ -283,14 +385,14 @@ function show_max_files_number_warning(file) {
 function add_files(file_array) {
 	let _files = Array.from(file_array)
 		.filter(check_restrictions)
-		.map(file => {
-			let is_image = file.type.startsWith('image');
+		.map((file) => {
+			let is_image = file.type.startsWith("image");
 			let size_kb = file.size / 1024;
 			return {
 				file_obj: file,
 				cropper_file: file,
 				crop_box_data: null,
-				optimize: size_kb > 200 && is_image && !file.type.includes('svg'),
+				optimize: size_kb > 200 && is_image && !file.type.includes("svg"),
 				name: file.name,
 				doc: null,
 				progress: 0,
@@ -306,7 +408,7 @@ function add_files(file_array) {
 	// pop extra files as per FileUploader.restrictions.max_number_of_files
 	max_number_of_files = props.restrictions.max_number_of_files;
 	if (max_number_of_files && _files.length > max_number_of_files) {
-		_files.slice(max_number_of_files).forEach(file => {
+		_files.slice(max_number_of_files).forEach((file) => {
 			show_max_files_number_warning(file, props.doctype);
 		});
 
@@ -315,8 +417,12 @@ function add_files(file_array) {
 
 	files.value = files.value.concat(_files);
 	// if only one file is allowed and crop_image_aspect_ratio is set, open cropper immediately
-	if (files.value.length === 1 && !props.allow_multiple && props.restrictions.crop_image_aspect_ratio != null) {
-		if (!files.value[0].file_obj.type.includes('svg')) {
+	if (
+		files.value.length === 1 &&
+		!props.allow_multiple &&
+		props.restrictions.crop_image_aspect_ratio != null
+	) {
+		if (!files.value[0].file_obj.type.includes("svg")) {
 			toggle_image_cropper(0);
 		}
 	}
@@ -330,13 +436,13 @@ function check_restrictions(file) {
 	if (allowed_file_types && allowed_file_types.length) {
 		is_correct_type = allowed_file_types.some((type) => {
 			// is this is a mime-type
-			if (type.includes('/')) {
+			if (type.includes("/")) {
 				if (!file.type) return false;
 				return file.type.match(type);
 			}
 
 			// otherwise this is likely an extension
-			if (type[0] === '.') {
+			if (type[0] === ".") {
 				return file.name.toLowerCase().endsWith(type.toLowerCase());
 			}
 			return false;
@@ -348,17 +454,20 @@ function check_restrictions(file) {
 	}
 
 	if (!is_correct_type) {
-		console.warn('File skipped because of invalid file type', file);
+		console.warn("File skipped because of invalid file type", file);
 		frappe.show_alert({
 			message: __('File "{0}" was skipped because of invalid file type', [file.name]),
-			indicator: 'orange'
+			indicator: "orange",
 		});
 	}
 	if (!valid_file_size) {
-		console.warn('File skipped because of invalid file size', file.size, file);
+		console.warn("File skipped because of invalid file size", file.size, file);
 		frappe.show_alert({
-			message: __('File "{0}" was skipped because size exceeds {1} MB', [file.name, max_file_size / (1024 * 1024)]),
-			indicator: 'orange'
+			message: __('File "{0}" was skipped because size exceeds {1} MB', [
+				file.name,
+				max_file_size / (1024 * 1024),
+			]),
+			indicator: "orange",
 		});
 	}
 
@@ -374,17 +483,12 @@ function upload_files() {
 	if (props.as_dataurl) {
 		return return_as_dataurl();
 	}
-	return frappe.run_serially(
-		files.value.map(
-			(file, i) =>
-				() => upload_file(file, i)
-		)
-	);
+	return frappe.run_serially(files.value.map((file, i) => () => upload_file(file, i)));
 }
 function upload_via_file_browser() {
 	let selected_file = file_browser.value.selected_node;
 	if (!selected_file.value) {
-		frappe.msgprint(__('Click on a file to select it.'));
+		frappe.msgprint(__("Click on a file to select it."));
 		close_dialog.value = true;
 		return Promise.reject();
 	}
@@ -396,23 +500,22 @@ function upload_via_file_browser() {
 function upload_via_web_link() {
 	let file_url = web_link.value.url;
 	if (!file_url) {
-		frappe.msgprint(__('Invalid URL'));
+		frappe.msgprint(__("Invalid URL"));
 		close_dialog.value = true;
 		return Promise.reject();
 	}
-	file_url = decodeURI(file_url)
+	file_url = decodeURI(file_url);
 	close_dialog.value = true;
 	return upload_file({
-		file_url
+		file_url,
 	});
 }
 function return_as_dataurl() {
-	let promises = files.value.map(file =>
-		frappe.dom.file_to_base64(file.file_obj)
-			.then(dataurl => {
-				file.dataurl = dataurl;
-				props.on_success && props.on_success(file);
-			})
+	let promises = files.value.map((file) =>
+		frappe.dom.file_to_base64(file.file_obj).then((dataurl) => {
+			file.dataurl = dataurl;
+			props.on_success && props.on_success(file);
+		})
 	);
 	close_dialog.value = true;
 	return Promise.all(promises);
@@ -422,23 +525,23 @@ function upload_file(file, i) {
 
 	return new Promise((resolve, reject) => {
 		let xhr = new XMLHttpRequest();
-		xhr.upload.addEventListener('loadstart', (e) => {
+		xhr.upload.addEventListener("loadstart", (e) => {
 			file.uploading = true;
-		})
-		xhr.upload.addEventListener('progress', (e) => {
+		});
+		xhr.upload.addEventListener("progress", (e) => {
 			if (e.lengthComputable) {
 				file.progress = e.loaded;
 				file.total = e.total;
 			}
-		})
-		xhr.upload.addEventListener('load', (e) => {
+		});
+		xhr.upload.addEventListener("load", (e) => {
 			file.uploading = false;
 			resolve();
-		})
-		xhr.addEventListener('error', (e) => {
+		});
+		xhr.addEventListener("error", (e) => {
 			file.failed = true;
 			reject();
-		})
+		});
 		xhr.onreadystatechange = () => {
 			if (xhr.readyState == XMLHttpRequest.DONE) {
 				if (xhr.status === 200) {
@@ -447,10 +550,10 @@ function upload_file(file, i) {
 					let file_doc = null;
 					try {
 						r = JSON.parse(xhr.responseText);
-						if (r.message.doctype === 'File') {
+						if (r.message.doctype === "File") {
 							file_doc = r.message;
 						}
-					} catch(e) {
+					} catch (e) {
 						r = xhr.responseText;
 					}
 
@@ -460,14 +563,16 @@ function upload_file(file, i) {
 						props.on_success(file_doc, r);
 					}
 
-					if (i == files.value.length - 1 && files.value.every(file => file.request_succeeded)) {
+					if (
+						i == files.value.length - 1 &&
+						files.value.every((file) => file.request_succeeded)
+					) {
 						close_dialog.value = true;
 					}
-
 				} else if (xhr.status === 403) {
 					file.failed = true;
 					let response = JSON.parse(xhr.responseText);
-					file.error_message = `Not permitted. ${response._error_message || ''}.`;
+					file.error_message = `Not permitted. ${response._error_message || ""}.`;
 
 					try {
 						// Append server messages which are useful hint for perm issues
@@ -475,73 +580,73 @@ function upload_file(file, i) {
 
 						server_messages.forEach((m) => {
 							m = JSON.parse(m);
-							file.error_message += `\n ${m.message} `
-						})
+							file.error_message += `\n ${m.message} `;
+						});
 					} catch (e) {
-						console.warning("Failed to parse server message", e)
+						console.warning("Failed to parse server message", e);
 					}
-
-
 				} else if (xhr.status === 413) {
 					file.failed = true;
-					file.error_message = 'Size exceeds the maximum allowed file size.';
-
+					file.error_message = "Size exceeds the maximum allowed file size.";
 				} else {
 					file.failed = true;
-					file.error_message = xhr.status === 0 ? 'XMLHttpRequest Error' : `${xhr.status} : ${xhr.statusText}`;
+					file.error_message =
+						xhr.status === 0
+							? "XMLHttpRequest Error"
+							: `${xhr.status} : ${xhr.statusText}`;
 
 					let error = null;
 					try {
 						error = JSON.parse(xhr.responseText);
-					} catch(e) {
+					} catch (e) {
 						// pass
 					}
 					frappe.request.cleanup({}, error);
 				}
 			}
-		}
-		xhr.open('POST', '/api/method/upload_file', true);
-		xhr.setRequestHeader('Accept', 'application/json');
-		xhr.setRequestHeader('X-Frappe-CSRF-Token', frappe.csrf_token);
+		};
+		xhr.open("POST", "/api/method/upload_file", true);
+		xhr.setRequestHeader("Accept", "application/json");
+		xhr.setRequestHeader("X-Frappe-CSRF-Token", frappe.csrf_token);
 
 		let form_data = new FormData();
 		if (file.file_obj) {
-			form_data.append('file', file.file_obj, file.name);
+			form_data.append("file", file.file_obj, file.name);
 		}
-		form_data.append('is_private', +file.private);
-		form_data.append('folder', props.folder);
+		form_data.append("is_private", +file.private);
+		form_data.append("folder", props.folder);
 
 		if (file.file_url) {
-			form_data.append('file_url', file.file_url);
+			form_data.append("file_url", file.file_url);
 		}
 
 		if (file.file_name) {
-			form_data.append('file_name', file.file_name);
+			form_data.append("file_name", file.file_name);
 		}
 		if (file.library_file_name) {
-			form_data.append('library_file_name', file.library_file_name);
+			form_data.append("library_file_name", file.library_file_name);
 		}
 
 		if (props.doctype && props.docname) {
-			form_data.append('doctype', props.doctype);
-			form_data.append('docname', props.docname);
+			form_data.append("doctype", props.doctype);
+			form_data.append("docname", props.docname);
 		}
 
 		if (props.fieldname) {
-			form_data.append('fieldname', props.fieldname);
+			form_data.append("fieldname", props.fieldname);
 		}
 
 		if (props.method) {
-			form_data.append('method', props.method);
+			form_data.append("method", props.method);
 		}
 
 		if (file.optimize) {
-			form_data.append('optimize', true);
+			form_data.append("optimize", true);
 		}
 
 		if (props.attach_doc_image) {
-			form_data.append('max_width', 200);
-			form_data.append('max_height', 200);
+			form_data.append("max_width", 200);
+			form_data.append("max_height", 200);
 		}
 
 		xhr.send(form_data);
@@ -550,23 +655,23 @@ function upload_file(file, i) {
 function capture_image() {
 	const capture = new frappe.ui.Capture({
 		animate: false,
-		error: true
+		error: true,
 	});
 	capture.show();
-	capture.submit(data_urls => {
-		data_urls.forEach(data_url => {
-			let filename = `capture_${frappe.datetime.now_datetime().replaceAll(/[: -]/g, '_')}.png`;
-			url_to_file(data_url, filename, 'image/png').then((file) =>
-				add_files([file])
-			);
+	capture.submit((data_urls) => {
+		data_urls.forEach((data_url) => {
+			let filename = `capture_${frappe.datetime
+				.now_datetime()
+				.replaceAll(/[: -]/g, "_")}.png`;
+			url_to_file(data_url, filename, "image/png").then((file) => add_files([file]));
 		});
 	});
 }
 function show_google_drive_picker() {
 	close_dialog.value = true;
 	let google_drive = new GoogleDrivePicker({
-		pickerCallback: data => google_drive_callback(data),
-		...google_drive_settings.value
+		pickerCallback: (data) => google_drive_callback(data),
+		...google_drive_settings.value,
 	});
 	google_drive.loadPicker();
 }
@@ -574,31 +679,36 @@ function google_drive_callback(data) {
 	if (data.action == google.picker.Action.PICKED) {
 		upload_file({
 			file_url: data.docs[0].url,
-			file_name: data.docs[0].name
+			file_name: data.docs[0].name,
 		});
 	} else if (data.action == google.picker.Action.CANCEL) {
-		cur_frm.attachments.new_attachment()
+		cur_frm.attachments.new_attachment();
 	}
 }
 function url_to_file(url, filename, mime_type) {
 	return fetch(url)
-		.then(res => res.arrayBuffer())
-		.then(buffer => new File([buffer], filename, { type: mime_type }));
+		.then((res) => res.arrayBuffer())
+		.then((buffer) => new File([buffer], filename, { type: mime_type }));
 }
 
 // computed
 let upload_complete = computed(() => {
-	return files.value.length > 0
-		&& files.value.every(
-			file => file.total !== 0 && file.progress === file.total);
+	return (
+		files.value.length > 0 &&
+		files.value.every((file) => file.total !== 0 && file.progress === file.total)
+	);
 });
 
 // watcher
-watch(files, (newvalue, oldvalue) => {
-	if (!props.allow_multiple && newvalue.length > 1) {
-		files.value = [newvalue[newvalue.length - 1]];
-	}
-}, { deep: true });
+watch(
+	files,
+	(newvalue, oldvalue) => {
+		if (!props.allow_multiple && newvalue.length > 1) {
+			files.value = [newvalue[newvalue.length - 1]];
+		}
+	},
+	{ deep: true }
+);
 
 defineExpose({
 	files,
diff --git a/frappe/public/js/frappe/file_uploader/ImageCropper.vue b/frappe/public/js/frappe/file_uploader/ImageCropper.vue
index 4e5a49a5f0..b91345e440 100644
--- a/frappe/public/js/frappe/file_uploader/ImageCropper.vue
+++ b/frappe/public/js/frappe/file_uploader/ImageCropper.vue
@@ -13,7 +13,7 @@
 						:class="{
 							active: isNaN(aspect_ratio)
 								? isNaN(button.value)
-								: button.value === aspect_ratio
+								: button.value === aspect_ratio,
 						}"
 						:key="button.label"
 						@click="aspect_ratio = button.value"
@@ -63,9 +63,9 @@ function crop_image() {
 	props.file.crop_box_data = cropper.value.getData();
 	const canvas = cropper.value.getCroppedCanvas();
 	const file_type = props.file.file_obj.type;
-	canvas.toBlob(blob => {
+	canvas.toBlob((blob) => {
 		var cropped_file_obj = new File([blob], props.file.name, {
-			type: blob.type
+			type: blob.type,
 		});
 		props.file.file_obj = cropped_file_obj;
 		emit("toggle_image_cropper");
@@ -87,7 +87,7 @@ onMounted(() => {
 			scalable: false,
 			viewMode: 1,
 			data: crop_box,
-			aspectRatio: aspect_ratio.value
+			aspectRatio: aspect_ratio.value,
 		});
 		window.cropper = cropper.value;
 	};
@@ -98,30 +98,33 @@ let aspect_ratio_buttons = computed(() => {
 	return [
 		{
 			label: __("1:1"),
-			value: 1
+			value: 1,
 		},
 		{
 			label: __("4:3"),
-			value: 4 / 3
+			value: 4 / 3,
 		},
 		{
 			label: __("16:9"),
-			value: 16 / 9
+			value: 16 / 9,
 		},
 		{
 			label: __("Free"),
-			value: NaN
-		}
+			value: NaN,
+		},
 	];
 });
 
 // watcher
-watch(aspect_ratio, (value) => {
-	if (cropper.value) {
-		cropper.value.setAspectRatio(value);
-	}
-}, { deep: true });
-
+watch(
+	aspect_ratio,
+	(value) => {
+		if (cropper.value) {
+			cropper.value.setAspectRatio(value);
+		}
+	},
+	{ deep: true }
+);
 </script>
 
 <style scoped>
diff --git a/frappe/public/js/frappe/file_uploader/ProgressRing.vue b/frappe/public/js/frappe/file_uploader/ProgressRing.vue
index 952459d8ac..429e68afdd 100644
--- a/frappe/public/js/frappe/file_uploader/ProgressRing.vue
+++ b/frappe/public/js/frappe/file_uploader/ProgressRing.vue
@@ -4,7 +4,7 @@
 			:stroke-dasharray="circumference + ' ' + circumference"
 			:style="{
 				stroke: secondary,
-				strokeDashoffset: 0
+				strokeDashoffset: 0,
 			}"
 			:stroke-width="stroke"
 			fill="transparent"
@@ -16,7 +16,7 @@
 			:stroke-dasharray="circumference + ' ' + circumference"
 			:style="{
 				stroke: primary,
-				strokeDashoffset: strokeDashoffset
+				strokeDashoffset: strokeDashoffset,
 			}"
 			:stroke-width="stroke"
 			fill="transparent"
@@ -32,7 +32,7 @@
 			:style="{
 				color: 'var(--text-color)',
 				fontSize: 'var(--text-xs)',
-				fontWeight: 'var(--text-bold)'
+				fontWeight: 'var(--text-bold)',
 			}"
 		>
 			{{ progress }}%
@@ -49,7 +49,7 @@ const props = defineProps({
 	secondary: String,
 	radius: Number,
 	progress: Number,
-	stroke: Number
+	stroke: Number,
 });
 
 // variables
@@ -60,7 +60,6 @@ let circumference = ref(normalizedRadius.value * 2 * Math.PI);
 let strokeDashoffset = computed(() => {
 	return circumference.value - (props.progress / 100) * circumference.value;
 });
-
 </script>
 
 <style scoped>
diff --git a/frappe/public/js/frappe/file_uploader/WebLink.vue b/frappe/public/js/frappe/file_uploader/WebLink.vue
index 022481500a..7e731f0dc8 100644
--- a/frappe/public/js/frappe/file_uploader/WebLink.vue
+++ b/frappe/public/js/frappe/file_uploader/WebLink.vue
@@ -1,9 +1,7 @@
 <template>
 	<div class="file-web-link margin-bottom">
-		<a href class="text-muted text-medium"
-			@click.prevent="emit('hide-web-link')"
-		>
-			{{ __('← Back to upload files') }}
+		<a href class="text-muted text-medium" @click.prevent="emit('hide-web-link')">
+			{{ __("← Back to upload files") }}
 		</a>
 		<div class="input-group">
 			<input
@@ -11,7 +9,7 @@
 				class="form-control"
 				:placeholder="__('Attach a web link')"
 				v-model="url"
-			>
+			/>
 		</div>
 	</div>
 </template>
diff --git a/frappe/public/js/print_format_builder/ConfigureColumns.vue b/frappe/public/js/print_format_builder/ConfigureColumns.vue
index df30898294..f2253fd11a 100644
--- a/frappe/public/js/print_format_builder/ConfigureColumns.vue
+++ b/frappe/public/js/print_format_builder/ConfigureColumns.vue
@@ -19,10 +19,7 @@
 			handle=".icon-drag"
 		>
 			<template #item="{ element }">
-				<div
-					class="mt-2 row align-center column-row"
-					v-for="column in df.table_columns"
-				>
+				<div class="mt-2 row align-center column-row" v-for="column in df.table_columns">
 					<div class="col-8">
 						<div class="column-label d-flex align-center">
 							<div class="px-2 icon-drag ml-n2">
@@ -50,10 +47,7 @@
 							max="100"
 							step="5"
 						/>
-						<button
-							class="ml-2 btn btn-xs btn-icon"
-							@click="remove_column(column)"
-						>
+						<button class="ml-2 btn btn-xs btn-icon" @click="remove_column(column)">
 							<svg class="icon icon-sm">
 								<use href="#icon-close"></use>
 							</svg>
@@ -74,7 +68,7 @@ const props = defineProps(["df"]);
 
 // methods
 function remove_column(column) {
-	props.df["table_columns"] = props.df.table_columns.filter(_column => _column !== column)
+	props.df["table_columns"] = props.df.table_columns.filter((_column) => _column !== column);
 }
 // computed
 let help_message = computed(() => {
diff --git a/frappe/public/js/print_format_builder/Field.vue b/frappe/public/js/print_format_builder/Field.vue
index 8e9f17aab0..c222a0596d 100644
--- a/frappe/public/js/print_format_builder/Field.vue
+++ b/frappe/public/js/print_format_builder/Field.vue
@@ -7,10 +7,7 @@
 					v-if="df.fieldtype == 'HTML' && df.html"
 					v-html="df.html"
 				></div>
-				<div
-					class="custom-html"
-					v-if="df.fieldtype == 'Field Template'"
-				>
+				<div class="custom-html" v-if="df.fieldtype == 'Field Template'">
 					{{ df.label }}
 				</div>
 				<input
@@ -24,9 +21,7 @@
 					@blur="editing = false"
 				/>
 				<span v-else-if="df.label">{{ df.label }}</span>
-				<i class="text-muted" v-else>
-					{{ __("No Label") }} ({{ df.fieldname }})
-				</i>
+				<i class="text-muted" v-else> {{ __("No Label") }} ({{ df.fieldname }}) </i>
 			</div>
 			<div class="field-actions">
 				<button
@@ -45,10 +40,7 @@
 				>
 					Configure columns
 				</button>
-				<button
-					class="btn btn-xs btn-icon"
-					@click="df['remove'] = true"
-				>
+				<button class="btn btn-xs btn-icon" @click="df['remove'] = true">
 					<svg class="icon icon-sm">
 						<use href="#icon-close"></use>
 					</svg>
@@ -94,14 +86,14 @@ function edit_html() {
 				label: __("HTML"),
 				fieldname: "html",
 				fieldtype: "Code",
-				options: "HTML"
-			}
+				options: "HTML",
+			},
 		],
 		primary_action: ({ html }) => {
 			html = frappe.dom.remove_script_and_style(html);
 			props.df["html"] = html;
 			d.hide();
-		}
+		},
 	});
 	d.set_value("html", props.df.html);
 	d.show();
@@ -112,7 +104,7 @@ function configure_columns() {
 		fields: [
 			{
 				fieldtype: "HTML",
-				fieldname: "columns_area"
+				fieldname: "columns_area",
 			},
 			{
 				label: "",
@@ -130,8 +122,8 @@ function configure_columns() {
 							dialog.set_value("add_column", "");
 						}
 					}
-				}
-			}
+				},
+			},
 		],
 		on_page_show: () => {
 			createApp(ConfigureColumnsVue, { df: props.df }).mount(
@@ -139,8 +131,8 @@ function configure_columns() {
 			);
 		},
 		on_hide: () => {
-			props.df["table_columns"] = props.df.table_columns.filter(col => !col.invalid_width);
-		}
+			props.df["table_columns"] = props.df.table_columns.filter((col) => !col.invalid_width);
+		},
 	});
 	dialog.show();
 }
@@ -149,18 +141,18 @@ function get_all_columns() {
 	let more_columns = [
 		{
 			label: __("Sr No."),
-			value: "idx"
-		}
+			value: "idx",
+		},
 	];
 	return more_columns.concat(
 		meta.fields
-			.map(tf => {
+			.map((tf) => {
 				if (frappe.model.no_value_type.includes(tf.fieldtype)) {
 					return;
 				}
 				return {
 					label: tf.label,
-					value: tf.fieldname
+					value: tf.fieldname,
 				};
 			})
 			.filter(Boolean)
@@ -172,8 +164,8 @@ function get_column_to_add(fieldname) {
 			label: __("Sr No."),
 			fieldtype: "Data",
 			fieldname: "idx",
-			width: 10
-		}
+			width: 10,
+		},
 	};
 
 	if (fieldname in standard_columns) {
@@ -182,7 +174,7 @@ function get_column_to_add(fieldname) {
 
 	return {
 		...frappe.meta.get_docfield(props.df.options, fieldname),
-		width: 10
+		width: 10,
 	};
 }
 function validate_table_columns() {
@@ -214,7 +206,6 @@ watch(
 	() => validate_table_columns(),
 	{ deep: true }
 );
-
 </script>
 
 <style scoped>
diff --git a/frappe/public/js/print_format_builder/HTMLEditor.vue b/frappe/public/js/print_format_builder/HTMLEditor.vue
index a6c0c71d47..839b31af90 100644
--- a/frappe/public/js/print_format_builder/HTMLEditor.vue
+++ b/frappe/public/js/print_format_builder/HTMLEditor.vue
@@ -1,10 +1,7 @@
 <template>
 	<div class="html-editor">
 		<div class="d-flex justify-content-end">
-			<button
-				class="btn btn-default btn-xs btn-edit"
-				@click="toggle_edit"
-			>
+			<button class="btn btn-default btn-xs btn-edit" @click="toggle_edit">
 				{{ !editing ? buttonLabel : __("Done") }}
 			</button>
 		</div>
@@ -46,9 +43,9 @@ function toggle_edit() {
 				max_lines: 30,
 				change: () => {
 					emit("change", get_value());
-				}
+				},
 			},
-			render_input: true
+			render_input: true,
 		});
 	}
 	control.value.set_value(props.value);
diff --git a/frappe/public/js/print_format_builder/LetterHeadEditor.vue b/frappe/public/js/print_format_builder/LetterHeadEditor.vue
index 92ccb75fdd..0cb23b9518 100644
--- a/frappe/public/js/print_format_builder/LetterHeadEditor.vue
+++ b/frappe/public/js/print_format_builder/LetterHeadEditor.vue
@@ -13,11 +13,7 @@
 						type="button"
 						class="btn btn-xs"
 						@click="letterhead.align = direction"
-						:class="
-							letterhead.align == direction
-								? 'btn-secondary'
-								: 'btn-default'
-						"
+						:class="letterhead.align == direction ? 'btn-secondary' : 'btn-default'"
 					>
 						{{ direction }}
 					</button>
@@ -30,12 +26,7 @@
 					min="20"
 					:max="range_input_field === 'image_width' ? 700 : 500"
 					:value="letterhead[range_input_field]"
-					@input="
-						e =>
-							(letterhead[range_input_field] = parseFloat(
-								e.target.value
-							))
-					"
+					@input="(e) => (letterhead[range_input_field] = parseFloat(e.target.value))"
 				/>
 			</div>
 			<div>
@@ -58,11 +49,7 @@
 					class="ml-2 btn btn-default btn-xs btn-edit"
 					@click="toggle_edit_letterhead"
 				>
-					{{
-						!store.edit_letterhead
-							? __("Edit Letter Head")
-							: __("Done")
-					}}
+					{{ !store.edit_letterhead ? __("Edit Letter Head") : __("Done") }}
 				</button>
 				<button
 					v-if="!letterhead"
@@ -73,10 +60,7 @@
 				</button>
 			</div>
 		</div>
-		<div
-			v-if="letterhead && !store.edit_letterhead"
-			v-html="letterhead.content"
-		></div>
+		<div v-if="letterhead && !store.edit_letterhead" v-html="letterhead.content"></div>
 		<!-- <div v-show="letterhead && store.edit_letterhead" ref="editor"></div> -->
 		<div
 			class="edit-letterhead"
@@ -85,8 +69,8 @@
 				justifyContent: {
 					Left: 'flex-start',
 					Center: 'center',
-					Right: 'flex-end'
-				}[letterhead.align]
+					Right: 'flex-end',
+				}[letterhead.align],
 			}"
 		>
 			<div class="edit-image">
@@ -101,7 +85,7 @@
 							height:
 								range_input_field === 'image_height'
 									? letterhead.image_height + 'px'
-									: null
+									: null,
 						}"
 					/>
 				</div>
@@ -143,15 +127,15 @@ function toggle_edit_letterhead() {
 				change: () => {
 					letterhead.value._dirty = true;
 					letterhead.value.content = control.value.get_value();
-				}
+				},
 			},
 			render_input: true,
 			only_input: true,
-			no_wrapper: true
+			no_wrapper: true,
 		});
 	}
 	control.value.set_value(letterhead.value.content);
-};
+}
 function change_letterhead() {
 	let d = new frappe.ui.Dialog({
 		title: __("Change Letter Head"),
@@ -160,62 +144,52 @@ function change_letterhead() {
 				label: __("Letter Head"),
 				fieldname: "letterhead",
 				fieldtype: "Link",
-				options: "Letter Head"
-			}
+				options: "Letter Head",
+			},
 		],
 		primary_action: ({ letterhead }) => {
 			if (letterhead) {
 				set_letterhead(letterhead);
 			}
 			d.hide();
-		}
+		},
 	});
 	d.show();
-};
+}
 function upload_image() {
 	new frappe.ui.FileUploader({
 		folder: "Home/Attachments",
-		on_success: file_doc => {
-			get_image_dimensions(file_doc.file_url).then(
-				({ width, height }) => {
-					letterhead.value["image"] = file_doc.file_url;
-					let new_width = width;
-					let new_height = height;
-					aspect_ratio.value = width / height;
-					range_input_field.value =
-						aspect_ratio.value > 1
-							? "image_width"
-							: "image_height";
+		on_success: (file_doc) => {
+			get_image_dimensions(file_doc.file_url).then(({ width, height }) => {
+				letterhead.value["image"] = file_doc.file_url;
+				let new_width = width;
+				let new_height = height;
+				aspect_ratio.value = width / height;
+				range_input_field.value = aspect_ratio.value > 1 ? "image_width" : "image_height";
 
-					if (width > 200) {
-						new_width = 200;
-						new_height = new_width / aspect_ratio.value;
-					}
-					if (height > 80) {
-						new_height = 80;
-						new_width = aspect_ratio.value * new_height;
-					}
-
-					letterhead.value["image_height"] = new_height;
-					letterhead.value["image_width"] = new_width;
+				if (width > 200) {
+					new_width = 200;
+					new_height = new_width / aspect_ratio.value;
 				}
-			);
-		}
+				if (height > 80) {
+					new_height = 80;
+					new_width = aspect_ratio.value * new_height;
+				}
+
+				letterhead.value["image_height"] = new_height;
+				letterhead.value["image_width"] = new_width;
+			});
+		},
 	});
-};
+}
 function set_letterhead(_letterhead) {
 	store.value.change_letterhead(_letterhead).then(() => {
-		get_image_dimensions(letterhead.value.image).then(
-			({ width, height }) => {
-				aspect_ratio.value = width / height;
-				range_input_field.value =
-					aspect_ratio.value > 1
-						? "image_width"
-						: "image_height";
-			}
-		);
+		get_image_dimensions(letterhead.value.image).then(({ width, height }) => {
+			aspect_ratio.value = width / height;
+			range_input_field.value = aspect_ratio.value > 1 ? "image_width" : "image_height";
+		});
 	});
-};
+}
 function create_letterhead() {
 	let d = new frappe.ui.Dialog({
 		title: __("Create Letter Head"),
@@ -223,23 +197,23 @@ function create_letterhead() {
 			{
 				label: __("Letter Head Name"),
 				fieldname: "name",
-				fieldtype: "Data"
-			}
+				fieldtype: "Data",
+			},
 		],
 		primary_action: ({ name }) => {
 			return frappe.db
 				.insert({
 					doctype: "Letter Head",
 					letter_head_name: name,
-					source: "Image"
+					source: "Image",
 				})
-				.then(doc => {
+				.then((doc) => {
 					d.hide();
 					store.value.change_letterhead(doc.name).then(() => {
 						toggle_edit_letterhead();
 					});
 				});
-		}
+		},
 	});
 	d.show();
 }
@@ -249,34 +223,33 @@ onMounted(() => {
 		set_letterhead(frappe.boot.sysdefaults.letter_head);
 	}
 
-	watch(() => {
-		return letterhead.value
-				? letterhead.value[range_input_field.value]
-				: null;
-	}, () => {
-		if (aspect_ratio.value === null) return;
+	watch(
+		() => {
+			return letterhead.value ? letterhead.value[range_input_field.value] : null;
+		},
+		() => {
+			if (aspect_ratio.value === null) return;
 
-		let update_field =
-			range_input_field.value == "image_width"
-				? "image_height"
-				: "image_width";
-		letterhead.value[update_field] =
-			update_field == "image_width"
-				? aspect_ratio.value * letterhead.value.image_height
-				: letterhead.value.image_width / aspect_ratio.value;
-	});
+			let update_field =
+				range_input_field.value == "image_width" ? "image_height" : "image_width";
+			letterhead.value[update_field] =
+				update_field == "image_width"
+					? aspect_ratio.value * letterhead.value.image_height
+					: letterhead.value.image_width / aspect_ratio.value;
+		}
+	);
 });
 
 // watch
-watch(letterhead, () => {
-	if (!letterhead.value) return;
-	if (letterhead.value.image_width && letterhead.value.image_height) {
-		let dimension =
-			letterhead.value.image_width > letterhead.value.image_height
-				? "width"
-				: "height";
-		let dimension_value = letterhead.value["image_" + dimension];
-		letterhead.value.content = `
+watch(
+	letterhead,
+	() => {
+		if (!letterhead.value) return;
+		if (letterhead.value.image_width && letterhead.value.image_height) {
+			let dimension =
+				letterhead.value.image_width > letterhead.value.image_height ? "width" : "height";
+			let dimension_value = letterhead.value["image_" + dimension];
+			letterhead.value.content = `
 			<div style="text-align: ${letterhead.value.align.toLowerCase()};">
 				<img
 					src="${letterhead.value.image}"
@@ -285,8 +258,11 @@ watch(letterhead, () => {
 					style="${dimension}: ${dimension_value}px;">
 			</div>
 		`;
-	}
-}, { deep: true }, { immediate: true });
+		}
+	},
+	{ deep: true },
+	{ immediate: true }
+);
 </script>
 
 <style scoped>
diff --git a/frappe/public/js/print_format_builder/Preview.vue b/frappe/public/js/print_format_builder/Preview.vue
index 377ec92b6d..c78cd6aa00 100644
--- a/frappe/public/js/print_format_builder/Preview.vue
+++ b/frappe/public/js/print_format_builder/Preview.vue
@@ -59,7 +59,7 @@ function refresh() {
 	iframe.value?.contentWindow.location.reload();
 }
 function get_default_docname() {
-	return frappe.db.get_list(doctype.value, { limit: 1 }).then(doc => {
+	return frappe.db.get_list(doctype.value, { limit: 1 }).then((doc) => {
 		return doc.length > 0 ? doc[0].name : null;
 	});
 }
@@ -78,9 +78,7 @@ let url = computed(() => {
 		params.append("letterhead", store.value.letterhead.name);
 	}
 	let _url =
-		type.value == "PDF"
-			? `/api/method/frappe.utils.weasyprint.download_pdf`
-			: "/printpreview";
+		type.value == "PDF" ? `/api/method/frappe.utils.weasyprint.download_pdf` : "/printpreview";
 	return `${_url}?${params.toString()}`;
 });
 
@@ -95,9 +93,9 @@ onMounted(() => {
 			options: doctype.value,
 			change: () => {
 				docname.value = doc_select.value.get_value();
-			}
+			},
 		},
-		render_input: true
+		render_input: true,
 	});
 	preview_type.value = frappe.ui.form.make_control({
 		parent: preview_type_ref.value,
@@ -108,12 +106,12 @@ onMounted(() => {
 			options: ["PDF", "HTML"],
 			change: () => {
 				type.value = preview_type.value.get_value();
-			}
+			},
 		},
-		render_input: true
+		render_input: true,
 	});
 	preview_type.value.set_value(type.value);
-	get_default_docname().then(doc_name => {
+	get_default_docname().then((doc_name) => {
 		doc_name && doc_select.value.set_value(doc_name);
 	});
 });
diff --git a/frappe/public/js/print_format_builder/PrintFormat.vue b/frappe/public/js/print_format_builder/PrintFormat.vue
index a93e546ffe..a08286df80 100644
--- a/frappe/public/js/print_format_builder/PrintFormat.vue
+++ b/frappe/public/js/print_format_builder/PrintFormat.vue
@@ -57,8 +57,8 @@ function add_section_above(section) {
 				label: "",
 				columns: [
 					{ label: "", fields: [] },
-					{ label: "", fields: [] }
-				]
+					{ label: "", fields: [] },
+				],
 			});
 		}
 		sections.push(_section);
@@ -75,12 +75,12 @@ let rootStyles = computed(() => {
 		margin_top = 0,
 		margin_bottom = 0,
 		margin_left = 0,
-		margin_right = 0
+		margin_right = 0,
 	} = print_format.value;
 	return {
 		padding: `${margin_top}mm ${margin_right}mm ${margin_bottom}mm ${margin_left}mm`,
 		width: "210mm",
-		minHeight: "297mm"
+		minHeight: "297mm",
 	};
 });
 let page_number_style = computed(() => {
@@ -89,7 +89,7 @@ let page_number_style = computed(() => {
 		background: "white",
 		padding: "4px",
 		borderRadius: "var(--border-radius)",
-		border: "1px solid var(--border-color)"
+		border: "1px solid var(--border-color)",
 	};
 	if (print_format.value.page_number.includes("Top")) {
 		style.top = print_format.value.margin_top / 2 + "mm";
diff --git a/frappe/public/js/print_format_builder/PrintFormatBuilder.vue b/frappe/public/js/print_format_builder/PrintFormatBuilder.vue
index c3452c6a7a..d436b4f7cf 100644
--- a/frappe/public/js/print_format_builder/PrintFormatBuilder.vue
+++ b/frappe/public/js/print_format_builder/PrintFormatBuilder.vue
@@ -27,14 +27,12 @@ let show_preview = ref(false);
 
 // computed
 let $store = computed(() => {
-	return getStore(props.print_format_name)
+	return getStore(props.print_format_name);
 });
 
 let shouldRender = computed(() => {
 	return Boolean(
-		$store.value.print_format.value &&
-			$store.value.meta.value &&
-			$store.value.layout.value
+		$store.value.print_format.value && $store.value.meta.value && $store.value.layout.value
 	);
 });
 
diff --git a/frappe/public/js/print_format_builder/PrintFormatControls.vue b/frappe/public/js/print_format_builder/PrintFormatControls.vue
index eac5fbe9f6..98e2ee9b24 100644
--- a/frappe/public/js/print_format_builder/PrintFormatControls.vue
+++ b/frappe/public/js/print_format_builder/PrintFormatControls.vue
@@ -4,11 +4,7 @@
 			<div class="sidebar-menu">
 				<div class="sidebar-label">{{ __("Page Margins") }}</div>
 				<div class="margin-controls">
-					<div
-						class="form-group"
-						v-for="df in margins"
-						:key="df.fieldname"
-					>
+					<div class="form-group" v-for="df in margins" :key="df.fieldname">
 						<div class="clearfix">
 							<label class="control-label">
 								{{ df.label }}
@@ -21,13 +17,7 @@
 									class="form-control form-control-sm"
 									:value="print_format[df.fieldname]"
 									min="0"
-									@change="
-										e =>
-											update_margin(
-												df.fieldname,
-												e.target.value
-											)
-									"
+									@change="(e) => update_margin(df.fieldname, e.target.value)"
 								/>
 							</div>
 						</div>
@@ -43,10 +33,7 @@
 								class="form-control form-control-sm"
 								v-model="print_format.font"
 							>
-								<option
-									v-for="font in google_fonts"
-									:value="font"
-								>
+								<option v-for="font in google_fonts" :value="font">
 									{{ font }}
 								</option>
 							</select>
@@ -65,10 +52,7 @@
 								placeholder="12, 13, 14"
 								:value="print_format.font_size"
 								@change="
-									e =>
-										(print_format.font_size = parseFloat(
-											e.target.value
-										))
+									(e) => (print_format.font_size = parseFloat(e.target.value))
 								"
 							/>
 						</div>
@@ -112,10 +96,7 @@
 					item-key="id"
 				>
 					<template #item="{ element }">
-						<div
-							class="field"
-							:title="element.fieldname"
-						>
+						<div class="field" :title="element.fieldname">
 							{{ element.label }}
 						</div>
 					</template>
@@ -157,7 +138,7 @@ function clone_field(df) {
 		"options",
 		"table_columns",
 		"html",
-		"field_template"
+		"field_template",
 	]);
 	if (cloned.custom) {
 		// generate unique fieldnames for custom blocks
@@ -171,16 +152,14 @@ let margins = computed(() => {
 	return [
 		{ label: __("Top"), fieldname: "margin_top" },
 		{ label: __("Bottom"), fieldname: "margin_bottom" },
-		{ label: __("Left", null, 'alignment'), fieldname: "margin_left" },
-		{ label: __("Right", null, 'alignment'), fieldname: "margin_right" }
+		{ label: __("Left", null, "alignment"), fieldname: "margin_left" },
+		{ label: __("Right", null, "alignment"), fieldname: "margin_right" },
 	];
 });
 let fields = computed(() => {
 	let fields = meta.value.fields
-		.filter(df => {
-			if (
-				["Section Break", "Column Break"].includes(df.fieldtype)
-			) {
+		.filter((df) => {
+			if (["Section Break", "Column Break"].includes(df.fieldtype)) {
 				return false;
 			}
 			if (search_text.value) {
@@ -195,12 +174,12 @@ let fields = computed(() => {
 				return true;
 			}
 		})
-		.map(df => {
+		.map((df) => {
 			let out = {
 				label: df.label,
 				fieldname: df.fieldname,
 				fieldtype: df.fieldtype,
-				options: df.options
+				options: df.options,
 			};
 			if (df.fieldtype == "Table") {
 				out.table_columns = get_table_columns(df);
@@ -214,27 +193,27 @@ let fields = computed(() => {
 			fieldname: "custom_html",
 			fieldtype: "HTML",
 			html: "",
-			custom: 1
+			custom: 1,
 		},
 		{
 			label: __("ID (name)"),
 			fieldname: "name",
-			fieldtype: "Data"
+			fieldtype: "Data",
 		},
 		{
 			label: __("Spacer"),
 			fieldname: "spacer",
 			fieldtype: "Spacer",
-			custom: 1
+			custom: 1,
 		},
 		{
 			label: __("Divider"),
 			fieldname: "divider",
 			fieldtype: "Divider",
-			custom: 1
+			custom: 1,
 		},
 		...print_templates.value,
-		...fields
+		...fields,
 	];
 });
 let print_templates = computed(() => {
@@ -243,21 +222,18 @@ let print_templates = computed(() => {
 	for (let template of templates) {
 		let df;
 		if (template.field) {
-			df = frappe.meta.get_docfield(
-				meta.value.name,
-				template.field
-			);
+			df = frappe.meta.get_docfield(meta.value.name, template.field);
 		} else {
 			df = {
 				label: template.name,
-				fieldname: frappe.scrub(template.name)
+				fieldname: frappe.scrub(template.name),
 			};
 		}
 		out.push({
 			label: `${__(df.label)} (${__("Field Template")})`,
 			fieldname: df.fieldname + "_template",
 			fieldtype: "Field Template",
-			field_template: template.name
+			field_template: template.name,
 		});
 	}
 	return out;
@@ -270,7 +246,7 @@ let page_number_positions = computed(() => {
 		{ label: __("Top Right"), value: "Top Right" },
 		{ label: __("Bottom Left"), value: "Bottom Left" },
 		{ label: __("Bottom Center"), value: "Bottom Center" },
-		{ label: __("Bottom Right"), value: "Bottom Right" }
+		{ label: __("Bottom Right"), value: "Bottom Right" },
 	];
 });
 
@@ -278,7 +254,7 @@ let page_number_positions = computed(() => {
 onMounted(() => {
 	let method =
 		"frappe.printing.page.print_format_builder_beta.print_format_builder_beta.get_google_fonts";
-	frappe.call(method).then(r => {
+	frappe.call(method).then((r) => {
 		google_fonts.value = r.message || [];
 		if (!google_fonts.value.includes(print_format.value.font)) {
 			google_fonts.value.push(print_format.value.font);
diff --git a/frappe/public/js/print_format_builder/PrintFormatSection.vue b/frappe/public/js/print_format_builder/PrintFormatSection.vue
index 658137e5ce..f9d847c87f 100644
--- a/frappe/public/js/print_format_builder/PrintFormatSection.vue
+++ b/frappe/public/js/print_format_builder/PrintFormatSection.vue
@@ -28,10 +28,7 @@
 								<use href="#icon-dot-horizontal"></use>
 							</svg>
 						</button>
-						<div
-							class="dropdown-menu dropdown-menu-right"
-							role="menu"
-						>
+						<div class="dropdown-menu dropdown-menu-right" role="menu">
 							<button
 								v-for="option in section_options"
 								class="dropdown-item"
@@ -44,17 +41,11 @@
 				</div>
 			</div>
 			<div class="row section-columns">
-				<div
-					class="column col"
-					v-for="(column, i) in section.columns"
-					:key="i"
-				>
+				<div class="column col" v-for="(column, i) in section.columns" :key="i">
 					<draggable
 						class="drag-container"
 						:style="{
-							backgroundColor: column.fields.length
-								? null
-								: 'var(--gray-50)'
+							backgroundColor: column.fields.length ? null : 'var(--gray-50)',
 						}"
 						v-model="column.fields"
 						group="fields"
@@ -68,10 +59,7 @@
 				</div>
 			</div>
 		</div>
-		<div
-			class="my-4 text-center text-muted font-italic"
-			v-if="section.page_break"
-		>
+		<div class="my-4 text-center text-muted font-italic" v-if="section.page_break">
 			{{ __("Page Break") }}
 		</div>
 	</div>
@@ -93,7 +81,7 @@ function add_column() {
 	if (props.section.columns.length < 4) {
 		props.section.columns.push({
 			label: "",
-			fields: []
+			fields: [],
 		});
 	}
 }
@@ -121,46 +109,50 @@ let section_options = computed(() => {
 	return [
 		{
 			label: __("Add section above"),
-			action: () => emit("add_section_above")
+			action: () => emit("add_section_above"),
 		},
 		{
 			label: __("Add column"),
 			action: add_column,
-			condition: () => props.section.columns.length < 4
+			condition: () => props.section.columns.length < 4,
 		},
 		{
 			label: __("Remove column"),
 			action: remove_column,
-			condition: () => props.section.columns.length > 1
+			condition: () => props.section.columns.length > 1,
 		},
 		{
 			label: __("Add page break"),
 			action: add_page_break,
-			condition: () => !props.section.page_break
+			condition: () => !props.section.page_break,
 		},
 		{
 			label: __("Remove page break"),
 			action: remove_page_break,
-			condition: () => props.section.page_break
+			condition: () => props.section.page_break,
 		},
 		{
 			label: __("Remove section"),
-			action: () => { props.section["remove"] = true }
+			action: () => {
+				props.section["remove"] = true;
+			},
 		},
 		{
 			label: __("Field Orientation (Left-Right)"),
 			condition: () => !props.section.field_orientation,
-			action: () => { props.section["field_orientation"] = "left-right" }
+			action: () => {
+				props.section["field_orientation"] = "left-right";
+			},
 		},
 		{
 			label: __("Field Orientation (Top-Down)"),
-			condition: () =>
-				props.section.field_orientation == "left-right",
-			action: () => { props.section["field_orientation"] = "" }
-		}
-	].filter(option => (option.condition ? option.condition() : true));
-})
-
+			condition: () => props.section.field_orientation == "left-right",
+			action: () => {
+				props.section["field_orientation"] = "";
+			},
+		},
+	].filter((option) => (option.condition ? option.condition() : true));
+});
 </script>
 
 <style scoped>
diff --git a/frappe/public/js/workflow_builder/components/ActionNode.vue b/frappe/public/js/workflow_builder/components/ActionNode.vue
index d85670d643..040b23a3fa 100644
--- a/frappe/public/js/workflow_builder/components/ActionNode.vue
+++ b/frappe/public/js/workflow_builder/components/ActionNode.vue
@@ -6,8 +6,8 @@ import { useStore } from "../store";
 const props = defineProps({
 	node: {
 		type: Object,
-		required: true
-	}
+		required: true,
+	},
 });
 
 const isValidConnection = ({ source, target }) => {
@@ -26,21 +26,25 @@ let store = useStore();
 const { edges, findNode } = useVueFlow();
 watch(
 	() => findNode(props.node.id)?.selected,
-	val => {
+	(val) => {
 		if (val) store.workflow.selected = props.node;
 
 		let connected_edges = edges.value.filter(
-			edge => edge.source === props.node.id || edge.target === props.node.id
+			(edge) => edge.source === props.node.id || edge.target === props.node.id
 		);
-		connected_edges.forEach(edge => edge.selected = val);
+		connected_edges.forEach((edge) => (edge.selected = val));
 	}
 );
 
 let label = computed(() => findNode(props.node.id)?.data?.action);
 
-watch(() => props.node.data, () => {
-	store.ref_history.commit();
-}, { deep: true });
+watch(
+	() => props.node.data,
+	() => {
+		store.ref_history.commit();
+	},
+	{ deep: true }
+);
 </script>
 
 <template>
diff --git a/frappe/public/js/workflow_builder/components/ConnectionLine.vue b/frappe/public/js/workflow_builder/components/ConnectionLine.vue
index f14e81f646..33ecbe5fd0 100644
--- a/frappe/public/js/workflow_builder/components/ConnectionLine.vue
+++ b/frappe/public/js/workflow_builder/components/ConnectionLine.vue
@@ -11,21 +11,21 @@ const props = defineProps({
 	targetPosition: { type: String, required: false },
 	sourceHandle: { type: Object, required: false },
 	targetHandle: { type: Object, required: false },
-	markerEnd: { type: String, required: false }
+	markerEnd: { type: String, required: false },
 });
 
 let opposite = {
 	left: "left",
 	right: "right",
 	top: "bottom",
-	bottom: "top"
+	bottom: "top",
 };
 
 const d = computed(() =>
 	getSmoothStepPath({
 		...props,
 		borderRadius: 30,
-		targetPosition: opposite[props.targetPosition]
+		targetPosition: opposite[props.targetPosition],
 	})
 );
 </script>

From e91611a37bc9d7af3150d29004f6638de85dca77 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 13 Nov 2023 11:49:46 +0530
Subject: [PATCH 3/5] ci: Auto format .scss files with prettier

---
 .pre-commit-config.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 5561068486..fafe8bd3fb 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -35,7 +35,7 @@ repos:
     rev: v2.7.1
     hooks:
       - id: prettier
-        types_or: [javascript, vue]
+        types_or: [javascript, vue, scss]
         # Ignore any files that might contain jinja / bundles
         exclude: |
             (?x)^(

From b1294596dbc9e3fe2a2148a949acd102eda26898 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 13 Nov 2023 11:50:43 +0530
Subject: [PATCH 4/5] style: Auto format .scss files with prettier

---
 frappe/public/css/fonts/inter/inter.scss      | 127 ++--
 frappe/public/css/octicons/octicons.scss      | 692 +++++++++++++-----
 .../css/octicons/sprockets-octicons.scss      | 688 ++++++++++++-----
 frappe/public/scss/common/alert.scss          |   2 +-
 frappe/public/scss/common/awesomeplete.scss   |  15 +-
 frappe/public/scss/common/buttons.scss        |  20 +-
 frappe/public/scss/common/color_picker.scss   |  18 +-
 frappe/public/scss/common/controls.scss       |  29 +-
 frappe/public/scss/common/css_variables.scss  |  12 +-
 frappe/public/scss/common/datepicker.scss     |  17 +-
 frappe/public/scss/common/flex.scss           |   7 +-
 frappe/public/scss/common/form.scss           |   2 +-
 frappe/public/scss/common/global.scss         |  10 +-
 frappe/public/scss/common/grid.scss           |  32 +-
 frappe/public/scss/common/icon_picker.scss    |  15 +-
 frappe/public/scss/common/icons.scss          |   2 +-
 frappe/public/scss/common/indicator.scss      |  14 +-
 frappe/public/scss/common/mixins.scss         |  11 +-
 frappe/public/scss/common/modal.scss          |  10 +-
 frappe/public/scss/common/phone_picker.scss   |  29 +-
 frappe/public/scss/common/quill.scss          |  46 +-
 frappe/public/scss/desk.bundle.scss           |   2 +-
 frappe/public/scss/desk/avatar.scss           |   1 -
 frappe/public/scss/desk/calendar.scss         |   9 +-
 frappe/public/scss/desk/css_variables.scss    |  17 +-
 frappe/public/scss/desk/dark.scss             |  20 +-
 frappe/public/scss/desk/dashboard_view.scss   |  53 +-
 frappe/public/scss/desk/desktop.scss          |  73 +-
 frappe/public/scss/desk/driver.scss           |   4 +-
 frappe/public/scss/desk/file_view.scss        |   7 +-
 frappe/public/scss/desk/filters.scss          |   2 -
 frappe/public/scss/desk/form.scss             |  12 +-
 frappe/public/scss/desk/frappe_datatable.scss |   7 +-
 frappe/public/scss/desk/global.scss           | 104 ++-
 frappe/public/scss/desk/global_search.scss    |   4 +-
 frappe/public/scss/desk/image_view.scss       |   9 +-
 frappe/public/scss/desk/kanban.scss           |   6 +-
 frappe/public/scss/desk/link_preview.scss     |   1 -
 frappe/public/scss/desk/list.scss             |  45 +-
 frappe/public/scss/desk/mobile.scss           |  27 +-
 frappe/public/scss/desk/module.scss           |  16 +-
 frappe/public/scss/desk/notification.scss     |  18 +-
 frappe/public/scss/desk/page.scss             |  23 +-
 frappe/public/scss/desk/plyr.scss             |   2 +-
 frappe/public/scss/desk/print_preview.scss    |   7 +-
 frappe/public/scss/desk/report.scss           |  26 +-
 frappe/public/scss/desk/role_editor.scss      |   9 +-
 frappe/public/scss/desk/sidebar.scss          |  17 +-
 frappe/public/scss/desk/tags.scss             |   2 +-
 frappe/public/scss/desk/theme_switcher.scss   |   2 +-
 frappe/public/scss/desk/timeline.scss         |  24 +-
 frappe/public/scss/desk/toast.scss            |   6 +-
 frappe/public/scss/desk/tree.scss             |   5 +-
 frappe/public/scss/desk/typography.scss       |   2 +-
 frappe/public/scss/desk/user_profile.scss     |   2 +-
 frappe/public/scss/desk/variables.scss        |  42 +-
 frappe/public/scss/desk/version.scss          |   5 +-
 frappe/public/scss/element/checkbox.scss      |  60 +-
 frappe/public/scss/element/radio.scss         |   4 +-
 frappe/public/scss/email.bundle.scss          |  41 +-
 frappe/public/scss/espresso/_borders.scss     |  18 +-
 frappe/public/scss/espresso/_colors.scss      | 326 +++++----
 frappe/public/scss/espresso/_shadows.scss     |  27 +-
 frappe/public/scss/espresso/_spacing.scss     |  14 +-
 frappe/public/scss/espresso/_typography.scss  |  16 +-
 frappe/public/scss/login.bundle.scss          |   2 +-
 frappe/public/scss/print.bundle.scss          |   2 +-
 frappe/public/scss/website.bundle.scss        |   2 +-
 frappe/public/scss/website/base.scss          |   5 +-
 frappe/public/scss/website/blog.scss          |   3 +-
 frappe/public/scss/website/css_variables.scss |   2 +-
 frappe/public/scss/website/doc.scss           |   2 +-
 frappe/public/scss/website/error-state.scss   |   4 +-
 frappe/public/scss/website/footer.scss        |   9 +-
 frappe/public/scss/website/index.scss         |  56 +-
 frappe/public/scss/website/markdown.scss      |  10 +-
 .../scss/website/multilevel_dropdown.scss     |   6 +-
 frappe/public/scss/website/my_account.scss    |   3 +-
 frappe/public/scss/website/navbar.scss        |  11 +-
 frappe/public/scss/website/page_builder.scss  |  42 +-
 frappe/public/scss/website/portal.scss        |   2 +-
 frappe/public/scss/website/search.scss        |   2 +-
 frappe/public/scss/website/variables.scss     |  11 +-
 frappe/public/scss/website/web_form.scss      |   7 +-
 .../public/scss/website/website_avatar.scss   |   4 +-
 frappe/public/scss/website/website_image.scss |   5 +-
 86 files changed, 1939 insertions(+), 1166 deletions(-)

diff --git a/frappe/public/css/fonts/inter/inter.scss b/frappe/public/css/fonts/inter/inter.scss
index d3565415a3..705fe2badd 100644
--- a/frappe/public/css/fonts/inter/inter.scss
+++ b/frappe/public/css/fonts/inter/inter.scss
@@ -1,164 +1,167 @@
 // TODO instead of making copy of inter.css find a way to import it.
 // workaround for css import as it fails for custom website_theme_template
 @font-face {
-	font-family: 'Inter V';
+	font-family: "Inter V";
 	font-weight: 100 900;
 	font-display: swap;
 	font-style: normal;
-	src: url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2-variations'),
-	  url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2');
-	src: url('/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19') format('woff2') tech('variations');
-  }
-  @font-face {
-	font-family: 'Inter V';
+	src: url("/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19") format("woff2-variations"),
+		url("/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19") format("woff2");
+	src: url("/assets/frappe/css/fonts/inter/Inter.var.woff2?v=3.19") format("woff2")
+		tech("variations");
+}
+@font-face {
+	font-family: "Inter V";
 	font-weight: 100 900;
 	font-display: swap;
 	font-style: italic;
-	src: url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2-variations'),
-	  url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2');
-	src: url('/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19') format('woff2') tech('variations');
-  }
+	src: url("/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19")
+			format("woff2-variations"),
+		url("/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19") format("woff2");
+	src: url("/assets/frappe/css/fonts/inter/Inter-Italic.var.woff2?v=3.19") format("woff2")
+		tech("variations");
+}
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 100;
 	src: url("/assets/frappe/css/fonts/inter/inter_thinitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_thinitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_thinitalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 200;
 	src: url("/assets/frappe/css/fonts/inter/inter_extralight.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_extralight.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_extralight.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 200;
 	src: url("/assets/frappe/css/fonts/inter/inter_extralightitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_extralightitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_extralightitalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 300;
 	src: url("/assets/frappe/css/fonts/inter/inter_light.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_light.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_light.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 300;
 	src: url("/assets/frappe/css/fonts/inter/inter_lightitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_lightitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_lightitalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 400;
 	src: url("/assets/frappe/css/fonts/inter/inter_regular.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_regular.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_regular.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 400;
 	src: url("/assets/frappe/css/fonts/inter/inter_italic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_italic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_italic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 500;
 	src: url("/assets/frappe/css/fonts/inter/inter_medium.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_medium.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_medium.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 500;
 	src: url("/assets/frappe/css/fonts/inter/inter_mediumitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_mediumitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_mediumitalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 600;
 	src: url("/assets/frappe/css/fonts/inter/inter_semibold.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_semibold.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_semibold.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 600;
 	src: url("/assets/frappe/css/fonts/inter/inter_semibolditalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_semibolditalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_semibolditalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 700;
 	src: url("/assets/frappe/css/fonts/inter/inter_bold.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_bold.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_bold.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 700;
 	src: url("/assets/frappe/css/fonts/inter/inter_bolditalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_bolditalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_bolditalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 800;
 	src: url("/assets/frappe/css/fonts/inter/inter_extrabold.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_extrabold.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_extrabold.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 800;
 	src: url("/assets/frappe/css/fonts/inter/inter_extrabolditalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_extrabolditalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_extrabolditalic.woff") format("woff");
 }
 
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  normal;
+	font-style: normal;
 	font-weight: 900;
 	src: url("/assets/frappe/css/fonts/inter/inter_black.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_black.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_black.woff") format("woff");
 }
 @font-face {
-	font-family: 'Inter';
+	font-family: "Inter";
 	font-display: swap;
-	font-style:  italic;
+	font-style: italic;
 	font-weight: 900;
 	src: url("/assets/frappe/css/fonts/inter/inter_blackitalic.woff2") format("woff2"),
-			url("/assets/frappe/css/fonts/inter/inter_blackitalic.woff") format("woff");
+		url("/assets/frappe/css/fonts/inter/inter_blackitalic.woff") format("woff");
 }
diff --git a/frappe/public/css/octicons/octicons.scss b/frappe/public/css/octicons/octicons.scss
index 0902cedce8..81e7d52d78 100755
--- a/frappe/public/css/octicons/octicons.scss
+++ b/frappe/public/css/octicons/octicons.scss
@@ -1,220 +1,548 @@
 $octicons-font-path: "." !default;
-$octicons-version:   "396334ee3da78f4302d25c758ae3e3ce5dc3c97d";
+$octicons-version: "396334ee3da78f4302d25c758ae3e3ce5dc3c97d";
 
 @font-face {
-  font-family: 'octicons';
-  src: url('#{$octicons-font-path}/octicons.eot?#iefix&v=#{$octicons-version}') format('embedded-opentype'),
-       url('#{$octicons-font-path}/octicons.woff?v=#{$octicons-version}') format('woff'),
-       url('#{$octicons-font-path}/octicons.ttf?v=#{$octicons-version}') format('truetype'),
-       url('#{$octicons-font-path}/octicons.svg?v=#{$octicons-version}#octicons') format('svg');
-  font-weight: normal;
-  font-style: normal;
+	font-family: "octicons";
+	src: url("#{$octicons-font-path}/octicons.eot?#iefix&v=#{$octicons-version}")
+			format("embedded-opentype"),
+		url("#{$octicons-font-path}/octicons.woff?v=#{$octicons-version}") format("woff"),
+		url("#{$octicons-font-path}/octicons.ttf?v=#{$octicons-version}") format("truetype"),
+		url("#{$octicons-font-path}/octicons.svg?v=#{$octicons-version}#octicons") format("svg");
+	font-weight: normal;
+	font-style: normal;
 }
 
 // .octicon is optimized for 16px.
 // .mega-octicon is optimized for 32px but can be used larger.
-.octicon, .mega-octicon {
-  font: normal normal normal 16px/1 octicons;
-  display: inline-block;
-  text-decoration: none;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.octicon,
+.mega-octicon {
+	font: normal normal normal 16px/1 octicons;
+	display: inline-block;
+	text-decoration: none;
+	text-rendering: auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.mega-octicon {
+	font-size: 32px;
 }
-.mega-octicon { font-size: 32px; }
 
-.octicon-alert:before { content: '\f02d'} /*  */
-.octicon-arrow-down:before { content: '\f03f'} /*  */
-.octicon-arrow-left:before { content: '\f040'} /*  */
-.octicon-arrow-right:before { content: '\f03e'} /*  */
-.octicon-arrow-small-down:before { content: '\f0a0'} /*  */
-.octicon-arrow-small-left:before { content: '\f0a1'} /*  */
-.octicon-arrow-small-right:before { content: '\f071'} /*  */
-.octicon-arrow-small-up:before { content: '\f09f'} /*  */
-.octicon-arrow-up:before { content: '\f03d'} /*  */
+.octicon-alert:before {
+	content: "\f02d";
+} /*  */
+.octicon-arrow-down:before {
+	content: "\f03f";
+} /*  */
+.octicon-arrow-left:before {
+	content: "\f040";
+} /*  */
+.octicon-arrow-right:before {
+	content: "\f03e";
+} /*  */
+.octicon-arrow-small-down:before {
+	content: "\f0a0";
+} /*  */
+.octicon-arrow-small-left:before {
+	content: "\f0a1";
+} /*  */
+.octicon-arrow-small-right:before {
+	content: "\f071";
+} /*  */
+.octicon-arrow-small-up:before {
+	content: "\f09f";
+} /*  */
+.octicon-arrow-up:before {
+	content: "\f03d";
+} /*  */
 .octicon-microscope:before,
-.octicon-beaker:before { content: '\f0dd'} /*  */
-.octicon-bell:before { content: '\f0de'} /*  */
-.octicon-book:before { content: '\f007'} /*  */
-.octicon-bookmark:before { content: '\f07b'} /*  */
-.octicon-briefcase:before { content: '\f0d3'} /*  */
-.octicon-broadcast:before { content: '\f048'} /*  */
-.octicon-browser:before { content: '\f0c5'} /*  */
-.octicon-bug:before { content: '\f091'} /*  */
-.octicon-calendar:before { content: '\f068'} /*  */
-.octicon-check:before { content: '\f03a'} /*  */
-.octicon-checklist:before { content: '\f076'} /*  */
-.octicon-chevron-down:before { content: '\f0a3'} /*  */
-.octicon-chevron-left:before { content: '\f0a4'} /*  */
-.octicon-chevron-right:before { content: '\f078'} /*  */
-.octicon-chevron-up:before { content: '\f0a2'} /*  */
-.octicon-circle-slash:before { content: '\f084'} /*  */
-.octicon-circuit-board:before { content: '\f0d6'} /*  */
-.octicon-clippy:before { content: '\f035'} /*  */
-.octicon-clock:before { content: '\f046'} /*  */
-.octicon-cloud-download:before { content: '\f00b'} /*  */
-.octicon-cloud-upload:before { content: '\f00c'} /*  */
-.octicon-code:before { content: '\f05f'} /*  */
-.octicon-color-mode:before { content: '\f065'} /*  */
+.octicon-beaker:before {
+	content: "\f0dd";
+} /*  */
+.octicon-bell:before {
+	content: "\f0de";
+} /*  */
+.octicon-book:before {
+	content: "\f007";
+} /*  */
+.octicon-bookmark:before {
+	content: "\f07b";
+} /*  */
+.octicon-briefcase:before {
+	content: "\f0d3";
+} /*  */
+.octicon-broadcast:before {
+	content: "\f048";
+} /*  */
+.octicon-browser:before {
+	content: "\f0c5";
+} /*  */
+.octicon-bug:before {
+	content: "\f091";
+} /*  */
+.octicon-calendar:before {
+	content: "\f068";
+} /*  */
+.octicon-check:before {
+	content: "\f03a";
+} /*  */
+.octicon-checklist:before {
+	content: "\f076";
+} /*  */
+.octicon-chevron-down:before {
+	content: "\f0a3";
+} /*  */
+.octicon-chevron-left:before {
+	content: "\f0a4";
+} /*  */
+.octicon-chevron-right:before {
+	content: "\f078";
+} /*  */
+.octicon-chevron-up:before {
+	content: "\f0a2";
+} /*  */
+.octicon-circle-slash:before {
+	content: "\f084";
+} /*  */
+.octicon-circuit-board:before {
+	content: "\f0d6";
+} /*  */
+.octicon-clippy:before {
+	content: "\f035";
+} /*  */
+.octicon-clock:before {
+	content: "\f046";
+} /*  */
+.octicon-cloud-download:before {
+	content: "\f00b";
+} /*  */
+.octicon-cloud-upload:before {
+	content: "\f00c";
+} /*  */
+.octicon-code:before {
+	content: "\f05f";
+} /*  */
+.octicon-color-mode:before {
+	content: "\f065";
+} /*  */
 .octicon-comment-add:before,
-.octicon-comment:before { content: '\f02b'} /*  */
-.octicon-comment-discussion:before { content: '\f04f'} /*  */
-.octicon-credit-card:before { content: '\f045'} /*  */
-.octicon-dash:before { content: '\f0ca'} /*  */
-.octicon-dashboard:before { content: '\f07d'} /*  */
-.octicon-database:before { content: '\f096'} /*  */
+.octicon-comment:before {
+	content: "\f02b";
+} /*  */
+.octicon-comment-discussion:before {
+	content: "\f04f";
+} /*  */
+.octicon-credit-card:before {
+	content: "\f045";
+} /*  */
+.octicon-dash:before {
+	content: "\f0ca";
+} /*  */
+.octicon-dashboard:before {
+	content: "\f07d";
+} /*  */
+.octicon-database:before {
+	content: "\f096";
+} /*  */
 .octicon-clone:before,
-.octicon-desktop-download:before { content: '\f0dc'} /*  */
-.octicon-device-camera:before { content: '\f056'} /*  */
-.octicon-device-camera-video:before { content: '\f057'} /*  */
-.octicon-device-desktop:before { content: '\f27c'} /*  */
-.octicon-device-mobile:before { content: '\f038'} /*  */
-.octicon-diff:before { content: '\f04d'} /*  */
-.octicon-diff-added:before { content: '\f06b'} /*  */
-.octicon-diff-ignored:before { content: '\f099'} /*  */
-.octicon-diff-modified:before { content: '\f06d'} /*  */
-.octicon-diff-removed:before { content: '\f06c'} /*  */
-.octicon-diff-renamed:before { content: '\f06e'} /*  */
-.octicon-ellipsis:before { content: '\f09a'} /*  */
+.octicon-desktop-download:before {
+	content: "\f0dc";
+} /*  */
+.octicon-device-camera:before {
+	content: "\f056";
+} /*  */
+.octicon-device-camera-video:before {
+	content: "\f057";
+} /*  */
+.octicon-device-desktop:before {
+	content: "\f27c";
+} /*  */
+.octicon-device-mobile:before {
+	content: "\f038";
+} /*  */
+.octicon-diff:before {
+	content: "\f04d";
+} /*  */
+.octicon-diff-added:before {
+	content: "\f06b";
+} /*  */
+.octicon-diff-ignored:before {
+	content: "\f099";
+} /*  */
+.octicon-diff-modified:before {
+	content: "\f06d";
+} /*  */
+.octicon-diff-removed:before {
+	content: "\f06c";
+} /*  */
+.octicon-diff-renamed:before {
+	content: "\f06e";
+} /*  */
+.octicon-ellipsis:before {
+	content: "\f09a";
+} /*  */
 .octicon-eye-unwatch:before,
 .octicon-eye-watch:before,
-.octicon-eye:before { content: '\f04e'} /*  */
-.octicon-file-binary:before { content: '\f094'} /*  */
-.octicon-file-code:before { content: '\f010'} /*  */
-.octicon-file-directory:before { content: '\f016'} /*  */
-.octicon-file-media:before { content: '\f012'} /*  */
-.octicon-file-pdf:before { content: '\f014'} /*  */
-.octicon-file-submodule:before { content: '\f017'} /*  */
-.octicon-file-symlink-directory:before { content: '\f0b1'} /*  */
-.octicon-file-symlink-file:before { content: '\f0b0'} /*  */
-.octicon-file-text:before { content: '\f011'} /*  */
-.octicon-file-zip:before { content: '\f013'} /*  */
-.octicon-flame:before { content: '\f0d2'} /*  */
-.octicon-fold:before { content: '\f0cc'} /*  */
-.octicon-gear:before { content: '\f02f'} /*  */
-.octicon-gift:before { content: '\f042'} /*  */
-.octicon-gist:before { content: '\f00e'} /*  */
-.octicon-gist-secret:before { content: '\f08c'} /*  */
+.octicon-eye:before {
+	content: "\f04e";
+} /*  */
+.octicon-file-binary:before {
+	content: "\f094";
+} /*  */
+.octicon-file-code:before {
+	content: "\f010";
+} /*  */
+.octicon-file-directory:before {
+	content: "\f016";
+} /*  */
+.octicon-file-media:before {
+	content: "\f012";
+} /*  */
+.octicon-file-pdf:before {
+	content: "\f014";
+} /*  */
+.octicon-file-submodule:before {
+	content: "\f017";
+} /*  */
+.octicon-file-symlink-directory:before {
+	content: "\f0b1";
+} /*  */
+.octicon-file-symlink-file:before {
+	content: "\f0b0";
+} /*  */
+.octicon-file-text:before {
+	content: "\f011";
+} /*  */
+.octicon-file-zip:before {
+	content: "\f013";
+} /*  */
+.octicon-flame:before {
+	content: "\f0d2";
+} /*  */
+.octicon-fold:before {
+	content: "\f0cc";
+} /*  */
+.octicon-gear:before {
+	content: "\f02f";
+} /*  */
+.octicon-gift:before {
+	content: "\f042";
+} /*  */
+.octicon-gist:before {
+	content: "\f00e";
+} /*  */
+.octicon-gist-secret:before {
+	content: "\f08c";
+} /*  */
 .octicon-git-branch-create:before,
 .octicon-git-branch-delete:before,
-.octicon-git-branch:before { content: '\f020'} /*  */
-.octicon-git-commit:before { content: '\f01f'} /*  */
-.octicon-git-compare:before { content: '\f0ac'} /*  */
-.octicon-git-merge:before { content: '\f023'} /*  */
+.octicon-git-branch:before {
+	content: "\f020";
+} /*  */
+.octicon-git-commit:before {
+	content: "\f01f";
+} /*  */
+.octicon-git-compare:before {
+	content: "\f0ac";
+} /*  */
+.octicon-git-merge:before {
+	content: "\f023";
+} /*  */
 .octicon-git-pull-request-abandoned:before,
-.octicon-git-pull-request:before { content: '\f009'} /*  */
-.octicon-globe:before { content: '\f0b6'} /*  */
-.octicon-graph:before { content: '\f043'} /*  */
-.octicon-heart:before { content: '\2665'} /* ♥ */
-.octicon-history:before { content: '\f07e'} /*  */
-.octicon-home:before { content: '\f08d'} /*  */
-.octicon-horizontal-rule:before { content: '\f070'} /*  */
-.octicon-hubot:before { content: '\f09d'} /*  */
-.octicon-inbox:before { content: '\f0cf'} /*  */
-.octicon-info:before { content: '\f059'} /*  */
-.octicon-issue-closed:before { content: '\f028'} /*  */
-.octicon-issue-opened:before { content: '\f026'} /*  */
-.octicon-issue-reopened:before { content: '\f027'} /*  */
-.octicon-jersey:before { content: '\f019'} /*  */
-.octicon-key:before { content: '\f049'} /*  */
-.octicon-keyboard:before { content: '\f00d'} /*  */
-.octicon-law:before { content: '\f0d8'} /*  */
-.octicon-light-bulb:before { content: '\f000'} /*  */
-.octicon-link:before { content: '\f05c'} /*  */
-.octicon-link-external:before { content: '\f07f'} /*  */
-.octicon-list-ordered:before { content: '\f062'} /*  */
-.octicon-list-unordered:before { content: '\f061'} /*  */
-.octicon-location:before { content: '\f060'} /*  */
+.octicon-git-pull-request:before {
+	content: "\f009";
+} /*  */
+.octicon-globe:before {
+	content: "\f0b6";
+} /*  */
+.octicon-graph:before {
+	content: "\f043";
+} /*  */
+.octicon-heart:before {
+	content: "\2665";
+} /* ♥ */
+.octicon-history:before {
+	content: "\f07e";
+} /*  */
+.octicon-home:before {
+	content: "\f08d";
+} /*  */
+.octicon-horizontal-rule:before {
+	content: "\f070";
+} /*  */
+.octicon-hubot:before {
+	content: "\f09d";
+} /*  */
+.octicon-inbox:before {
+	content: "\f0cf";
+} /*  */
+.octicon-info:before {
+	content: "\f059";
+} /*  */
+.octicon-issue-closed:before {
+	content: "\f028";
+} /*  */
+.octicon-issue-opened:before {
+	content: "\f026";
+} /*  */
+.octicon-issue-reopened:before {
+	content: "\f027";
+} /*  */
+.octicon-jersey:before {
+	content: "\f019";
+} /*  */
+.octicon-key:before {
+	content: "\f049";
+} /*  */
+.octicon-keyboard:before {
+	content: "\f00d";
+} /*  */
+.octicon-law:before {
+	content: "\f0d8";
+} /*  */
+.octicon-light-bulb:before {
+	content: "\f000";
+} /*  */
+.octicon-link:before {
+	content: "\f05c";
+} /*  */
+.octicon-link-external:before {
+	content: "\f07f";
+} /*  */
+.octicon-list-ordered:before {
+	content: "\f062";
+} /*  */
+.octicon-list-unordered:before {
+	content: "\f061";
+} /*  */
+.octicon-location:before {
+	content: "\f060";
+} /*  */
 .octicon-gist-private:before,
 .octicon-mirror-private:before,
 .octicon-git-fork-private:before,
-.octicon-lock:before { content: '\f06a'} /*  */
-.octicon-logo-github:before { content: '\f092'} /*  */
-.octicon-mail:before { content: '\f03b'} /*  */
-.octicon-mail-read:before { content: '\f03c'} /*  */
-.octicon-mail-reply:before { content: '\f051'} /*  */
-.octicon-mark-github:before { content: '\f00a'} /*  */
-.octicon-markdown:before { content: '\f0c9'} /*  */
-.octicon-megaphone:before { content: '\f077'} /*  */
-.octicon-mention:before { content: '\f0be'} /*  */
-.octicon-milestone:before { content: '\f075'} /*  */
+.octicon-lock:before {
+	content: "\f06a";
+} /*  */
+.octicon-logo-github:before {
+	content: "\f092";
+} /*  */
+.octicon-mail:before {
+	content: "\f03b";
+} /*  */
+.octicon-mail-read:before {
+	content: "\f03c";
+} /*  */
+.octicon-mail-reply:before {
+	content: "\f051";
+} /*  */
+.octicon-mark-github:before {
+	content: "\f00a";
+} /*  */
+.octicon-markdown:before {
+	content: "\f0c9";
+} /*  */
+.octicon-megaphone:before {
+	content: "\f077";
+} /*  */
+.octicon-mention:before {
+	content: "\f0be";
+} /*  */
+.octicon-milestone:before {
+	content: "\f075";
+} /*  */
 .octicon-mirror-public:before,
-.octicon-mirror:before { content: '\f024'} /*  */
-.octicon-mortar-board:before { content: '\f0d7'} /*  */
-.octicon-mute:before { content: '\f080'} /*  */
-.octicon-no-newline:before { content: '\f09c'} /*  */
-.octicon-octoface:before { content: '\f008'} /*  */
-.octicon-organization:before { content: '\f037'} /*  */
-.octicon-package:before { content: '\f0c4'} /*  */
-.octicon-paintcan:before { content: '\f0d1'} /*  */
-.octicon-pencil:before { content: '\f058'} /*  */
+.octicon-mirror:before {
+	content: "\f024";
+} /*  */
+.octicon-mortar-board:before {
+	content: "\f0d7";
+} /*  */
+.octicon-mute:before {
+	content: "\f080";
+} /*  */
+.octicon-no-newline:before {
+	content: "\f09c";
+} /*  */
+.octicon-octoface:before {
+	content: "\f008";
+} /*  */
+.octicon-organization:before {
+	content: "\f037";
+} /*  */
+.octicon-package:before {
+	content: "\f0c4";
+} /*  */
+.octicon-paintcan:before {
+	content: "\f0d1";
+} /*  */
+.octicon-pencil:before {
+	content: "\f058";
+} /*  */
 .octicon-person-add:before,
 .octicon-person-follow:before,
-.octicon-person:before { content: '\f018'} /*  */
-.octicon-pin:before { content: '\f041'} /*  */
-.octicon-plug:before { content: '\f0d4'} /*  */
+.octicon-person:before {
+	content: "\f018";
+} /*  */
+.octicon-pin:before {
+	content: "\f041";
+} /*  */
+.octicon-plug:before {
+	content: "\f0d4";
+} /*  */
 .octicon-repo-create:before,
 .octicon-gist-new:before,
 .octicon-file-directory-create:before,
 .octicon-file-add:before,
-.octicon-plus:before { content: '\f05d'} /*  */
-.octicon-primitive-dot:before { content: '\f052'} /*  */
-.octicon-primitive-square:before { content: '\f053'} /*  */
-.octicon-pulse:before { content: '\f085'} /*  */
-.octicon-question:before { content: '\f02c'} /*  */
-.octicon-quote:before { content: '\f063'} /*  */
-.octicon-radio-tower:before { content: '\f030'} /*  */
+.octicon-plus:before {
+	content: "\f05d";
+} /*  */
+.octicon-primitive-dot:before {
+	content: "\f052";
+} /*  */
+.octicon-primitive-square:before {
+	content: "\f053";
+} /*  */
+.octicon-pulse:before {
+	content: "\f085";
+} /*  */
+.octicon-question:before {
+	content: "\f02c";
+} /*  */
+.octicon-quote:before {
+	content: "\f063";
+} /*  */
+.octicon-radio-tower:before {
+	content: "\f030";
+} /*  */
 .octicon-repo-delete:before,
-.octicon-repo:before { content: '\f001'} /*  */
-.octicon-repo-clone:before { content: '\f04c'} /*  */
-.octicon-repo-force-push:before { content: '\f04a'} /*  */
+.octicon-repo:before {
+	content: "\f001";
+} /*  */
+.octicon-repo-clone:before {
+	content: "\f04c";
+} /*  */
+.octicon-repo-force-push:before {
+	content: "\f04a";
+} /*  */
 .octicon-gist-fork:before,
-.octicon-repo-forked:before { content: '\f002'} /*  */
-.octicon-repo-pull:before { content: '\f006'} /*  */
-.octicon-repo-push:before { content: '\f005'} /*  */
-.octicon-rocket:before { content: '\f033'} /*  */
-.octicon-rss:before { content: '\f034'} /*  */
-.octicon-ruby:before { content: '\f047'} /*  */
-.octicon-screen-full:before { content: '\f066'} /*  */
-.octicon-screen-normal:before { content: '\f067'} /*  */
+.octicon-repo-forked:before {
+	content: "\f002";
+} /*  */
+.octicon-repo-pull:before {
+	content: "\f006";
+} /*  */
+.octicon-repo-push:before {
+	content: "\f005";
+} /*  */
+.octicon-rocket:before {
+	content: "\f033";
+} /*  */
+.octicon-rss:before {
+	content: "\f034";
+} /*  */
+.octicon-ruby:before {
+	content: "\f047";
+} /*  */
+.octicon-screen-full:before {
+	content: "\f066";
+} /*  */
+.octicon-screen-normal:before {
+	content: "\f067";
+} /*  */
 .octicon-search-save:before,
-.octicon-search:before { content: '\f02e'} /*  */
-.octicon-server:before { content: '\f097'} /*  */
-.octicon-settings:before { content: '\f07c'} /*  */
-.octicon-shield:before { content: '\f0e1'} /*  */
+.octicon-search:before {
+	content: "\f02e";
+} /*  */
+.octicon-server:before {
+	content: "\f097";
+} /*  */
+.octicon-settings:before {
+	content: "\f07c";
+} /*  */
+.octicon-shield:before {
+	content: "\f0e1";
+} /*  */
 .octicon-log-in:before,
-.octicon-sign-in:before { content: '\f036'} /*  */
+.octicon-sign-in:before {
+	content: "\f036";
+} /*  */
 .octicon-log-out:before,
-.octicon-sign-out:before { content: '\f032'} /*  */
-.octicon-squirrel:before { content: '\f0b2'} /*  */
+.octicon-sign-out:before {
+	content: "\f032";
+} /*  */
+.octicon-squirrel:before {
+	content: "\f0b2";
+} /*  */
 .octicon-star-add:before,
 .octicon-star-delete:before,
-.octicon-star:before { content: '\f02a'} /*  */
-.octicon-stop:before { content: '\f08f'} /*  */
+.octicon-star:before {
+	content: "\f02a";
+} /*  */
+.octicon-stop:before {
+	content: "\f08f";
+} /*  */
 .octicon-repo-sync:before,
-.octicon-sync:before { content: '\f087'} /*  */
+.octicon-sync:before {
+	content: "\f087";
+} /*  */
 .octicon-tag-remove:before,
 .octicon-tag-add:before,
-.octicon-tag:before { content: '\f015'} /*  */
-.octicon-telescope:before { content: '\f088'} /*  */
-.octicon-terminal:before { content: '\f0c8'} /*  */
-.octicon-three-bars:before { content: '\f05e'} /*  */
-.octicon-thumbsdown:before { content: '\f0db'} /*  */
-.octicon-thumbsup:before { content: '\f0da'} /*  */
-.octicon-tools:before { content: '\f031'} /*  */
-.octicon-trashcan:before { content: '\f0d0'} /*  */
-.octicon-triangle-down:before { content: '\f05b'} /*  */
-.octicon-triangle-left:before { content: '\f044'} /*  */
-.octicon-triangle-right:before { content: '\f05a'} /*  */
-.octicon-triangle-up:before { content: '\f0aa'} /*  */
-.octicon-unfold:before { content: '\f039'} /*  */
-.octicon-unmute:before { content: '\f0ba'} /*  */
-.octicon-versions:before { content: '\f064'} /*  */
-.octicon-watch:before { content: '\f0e0'} /*  */
+.octicon-tag:before {
+	content: "\f015";
+} /*  */
+.octicon-telescope:before {
+	content: "\f088";
+} /*  */
+.octicon-terminal:before {
+	content: "\f0c8";
+} /*  */
+.octicon-three-bars:before {
+	content: "\f05e";
+} /*  */
+.octicon-thumbsdown:before {
+	content: "\f0db";
+} /*  */
+.octicon-thumbsup:before {
+	content: "\f0da";
+} /*  */
+.octicon-tools:before {
+	content: "\f031";
+} /*  */
+.octicon-trashcan:before {
+	content: "\f0d0";
+} /*  */
+.octicon-triangle-down:before {
+	content: "\f05b";
+} /*  */
+.octicon-triangle-left:before {
+	content: "\f044";
+} /*  */
+.octicon-triangle-right:before {
+	content: "\f05a";
+} /*  */
+.octicon-triangle-up:before {
+	content: "\f0aa";
+} /*  */
+.octicon-unfold:before {
+	content: "\f039";
+} /*  */
+.octicon-unmute:before {
+	content: "\f0ba";
+} /*  */
+.octicon-versions:before {
+	content: "\f064";
+} /*  */
+.octicon-watch:before {
+	content: "\f0e0";
+} /*  */
 .octicon-remove-close:before,
-.octicon-x:before { content: '\f081'} /*  */
-.octicon-zap:before { content: '\26A1'} /* ⚡ */
+.octicon-x:before {
+	content: "\f081";
+} /*  */
+.octicon-zap:before {
+	content: "\26A1";
+} /* ⚡ */
diff --git a/frappe/public/css/octicons/sprockets-octicons.scss b/frappe/public/css/octicons/sprockets-octicons.scss
index cef21ae62e..84cd64d260 100755
--- a/frappe/public/css/octicons/sprockets-octicons.scss
+++ b/frappe/public/css/octicons/sprockets-octicons.scss
@@ -1,217 +1,543 @@
 @font-face {
-  font-family: 'octicons';
-  src: font-url('octicons.eot?#iefix') format('embedded-opentype'),
-       font-url('octicons.woff') format('woff'),
-       font-url('octicons.ttf') format('truetype'),
-       font-url('octicons.svg#octicons') format('svg');
-  font-weight: normal;
-  font-style: normal;
+	font-family: "octicons";
+	src: font-url("octicons.eot?#iefix") format("embedded-opentype"),
+		font-url("octicons.woff") format("woff"), font-url("octicons.ttf") format("truetype"),
+		font-url("octicons.svg#octicons") format("svg");
+	font-weight: normal;
+	font-style: normal;
 }
 
 // .octicon is optimized for 16px.
 // .mega-octicon is optimized for 32px but can be used larger.
-.octicon, .mega-octicon {
-  font: normal normal normal 16px/1 octicons;
-  display: inline-block;
-  text-decoration: none;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+.octicon,
+.mega-octicon {
+	font: normal normal normal 16px/1 octicons;
+	display: inline-block;
+	text-decoration: none;
+	text-rendering: auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.mega-octicon {
+	font-size: 32px;
 }
-.mega-octicon { font-size: 32px; }
 
-.octicon-alert:before { content: '\f02d'} /*  */
-.octicon-arrow-down:before { content: '\f03f'} /*  */
-.octicon-arrow-left:before { content: '\f040'} /*  */
-.octicon-arrow-right:before { content: '\f03e'} /*  */
-.octicon-arrow-small-down:before { content: '\f0a0'} /*  */
-.octicon-arrow-small-left:before { content: '\f0a1'} /*  */
-.octicon-arrow-small-right:before { content: '\f071'} /*  */
-.octicon-arrow-small-up:before { content: '\f09f'} /*  */
-.octicon-arrow-up:before { content: '\f03d'} /*  */
+.octicon-alert:before {
+	content: "\f02d";
+} /*  */
+.octicon-arrow-down:before {
+	content: "\f03f";
+} /*  */
+.octicon-arrow-left:before {
+	content: "\f040";
+} /*  */
+.octicon-arrow-right:before {
+	content: "\f03e";
+} /*  */
+.octicon-arrow-small-down:before {
+	content: "\f0a0";
+} /*  */
+.octicon-arrow-small-left:before {
+	content: "\f0a1";
+} /*  */
+.octicon-arrow-small-right:before {
+	content: "\f071";
+} /*  */
+.octicon-arrow-small-up:before {
+	content: "\f09f";
+} /*  */
+.octicon-arrow-up:before {
+	content: "\f03d";
+} /*  */
 .octicon-microscope:before,
-.octicon-beaker:before { content: '\f0dd'} /*  */
-.octicon-bell:before { content: '\f0de'} /*  */
-.octicon-book:before { content: '\f007'} /*  */
-.octicon-bookmark:before { content: '\f07b'} /*  */
-.octicon-briefcase:before { content: '\f0d3'} /*  */
-.octicon-broadcast:before { content: '\f048'} /*  */
-.octicon-browser:before { content: '\f0c5'} /*  */
-.octicon-bug:before { content: '\f091'} /*  */
-.octicon-calendar:before { content: '\f068'} /*  */
-.octicon-check:before { content: '\f03a'} /*  */
-.octicon-checklist:before { content: '\f076'} /*  */
-.octicon-chevron-down:before { content: '\f0a3'} /*  */
-.octicon-chevron-left:before { content: '\f0a4'} /*  */
-.octicon-chevron-right:before { content: '\f078'} /*  */
-.octicon-chevron-up:before { content: '\f0a2'} /*  */
-.octicon-circle-slash:before { content: '\f084'} /*  */
-.octicon-circuit-board:before { content: '\f0d6'} /*  */
-.octicon-clippy:before { content: '\f035'} /*  */
-.octicon-clock:before { content: '\f046'} /*  */
-.octicon-cloud-download:before { content: '\f00b'} /*  */
-.octicon-cloud-upload:before { content: '\f00c'} /*  */
-.octicon-code:before { content: '\f05f'} /*  */
-.octicon-color-mode:before { content: '\f065'} /*  */
+.octicon-beaker:before {
+	content: "\f0dd";
+} /*  */
+.octicon-bell:before {
+	content: "\f0de";
+} /*  */
+.octicon-book:before {
+	content: "\f007";
+} /*  */
+.octicon-bookmark:before {
+	content: "\f07b";
+} /*  */
+.octicon-briefcase:before {
+	content: "\f0d3";
+} /*  */
+.octicon-broadcast:before {
+	content: "\f048";
+} /*  */
+.octicon-browser:before {
+	content: "\f0c5";
+} /*  */
+.octicon-bug:before {
+	content: "\f091";
+} /*  */
+.octicon-calendar:before {
+	content: "\f068";
+} /*  */
+.octicon-check:before {
+	content: "\f03a";
+} /*  */
+.octicon-checklist:before {
+	content: "\f076";
+} /*  */
+.octicon-chevron-down:before {
+	content: "\f0a3";
+} /*  */
+.octicon-chevron-left:before {
+	content: "\f0a4";
+} /*  */
+.octicon-chevron-right:before {
+	content: "\f078";
+} /*  */
+.octicon-chevron-up:before {
+	content: "\f0a2";
+} /*  */
+.octicon-circle-slash:before {
+	content: "\f084";
+} /*  */
+.octicon-circuit-board:before {
+	content: "\f0d6";
+} /*  */
+.octicon-clippy:before {
+	content: "\f035";
+} /*  */
+.octicon-clock:before {
+	content: "\f046";
+} /*  */
+.octicon-cloud-download:before {
+	content: "\f00b";
+} /*  */
+.octicon-cloud-upload:before {
+	content: "\f00c";
+} /*  */
+.octicon-code:before {
+	content: "\f05f";
+} /*  */
+.octicon-color-mode:before {
+	content: "\f065";
+} /*  */
 .octicon-comment-add:before,
-.octicon-comment:before { content: '\f02b'} /*  */
-.octicon-comment-discussion:before { content: '\f04f'} /*  */
-.octicon-credit-card:before { content: '\f045'} /*  */
-.octicon-dash:before { content: '\f0ca'} /*  */
-.octicon-dashboard:before { content: '\f07d'} /*  */
-.octicon-database:before { content: '\f096'} /*  */
+.octicon-comment:before {
+	content: "\f02b";
+} /*  */
+.octicon-comment-discussion:before {
+	content: "\f04f";
+} /*  */
+.octicon-credit-card:before {
+	content: "\f045";
+} /*  */
+.octicon-dash:before {
+	content: "\f0ca";
+} /*  */
+.octicon-dashboard:before {
+	content: "\f07d";
+} /*  */
+.octicon-database:before {
+	content: "\f096";
+} /*  */
 .octicon-clone:before,
-.octicon-desktop-download:before { content: '\f0dc'} /*  */
-.octicon-device-camera:before { content: '\f056'} /*  */
-.octicon-device-camera-video:before { content: '\f057'} /*  */
-.octicon-device-desktop:before { content: '\f27c'} /*  */
-.octicon-device-mobile:before { content: '\f038'} /*  */
-.octicon-diff:before { content: '\f04d'} /*  */
-.octicon-diff-added:before { content: '\f06b'} /*  */
-.octicon-diff-ignored:before { content: '\f099'} /*  */
-.octicon-diff-modified:before { content: '\f06d'} /*  */
-.octicon-diff-removed:before { content: '\f06c'} /*  */
-.octicon-diff-renamed:before { content: '\f06e'} /*  */
-.octicon-ellipsis:before { content: '\f09a'} /*  */
+.octicon-desktop-download:before {
+	content: "\f0dc";
+} /*  */
+.octicon-device-camera:before {
+	content: "\f056";
+} /*  */
+.octicon-device-camera-video:before {
+	content: "\f057";
+} /*  */
+.octicon-device-desktop:before {
+	content: "\f27c";
+} /*  */
+.octicon-device-mobile:before {
+	content: "\f038";
+} /*  */
+.octicon-diff:before {
+	content: "\f04d";
+} /*  */
+.octicon-diff-added:before {
+	content: "\f06b";
+} /*  */
+.octicon-diff-ignored:before {
+	content: "\f099";
+} /*  */
+.octicon-diff-modified:before {
+	content: "\f06d";
+} /*  */
+.octicon-diff-removed:before {
+	content: "\f06c";
+} /*  */
+.octicon-diff-renamed:before {
+	content: "\f06e";
+} /*  */
+.octicon-ellipsis:before {
+	content: "\f09a";
+} /*  */
 .octicon-eye-unwatch:before,
 .octicon-eye-watch:before,
-.octicon-eye:before { content: '\f04e'} /*  */
-.octicon-file-binary:before { content: '\f094'} /*  */
-.octicon-file-code:before { content: '\f010'} /*  */
-.octicon-file-directory:before { content: '\f016'} /*  */
-.octicon-file-media:before { content: '\f012'} /*  */
-.octicon-file-pdf:before { content: '\f014'} /*  */
-.octicon-file-submodule:before { content: '\f017'} /*  */
-.octicon-file-symlink-directory:before { content: '\f0b1'} /*  */
-.octicon-file-symlink-file:before { content: '\f0b0'} /*  */
-.octicon-file-text:before { content: '\f011'} /*  */
-.octicon-file-zip:before { content: '\f013'} /*  */
-.octicon-flame:before { content: '\f0d2'} /*  */
-.octicon-fold:before { content: '\f0cc'} /*  */
-.octicon-gear:before { content: '\f02f'} /*  */
-.octicon-gift:before { content: '\f042'} /*  */
-.octicon-gist:before { content: '\f00e'} /*  */
-.octicon-gist-secret:before { content: '\f08c'} /*  */
+.octicon-eye:before {
+	content: "\f04e";
+} /*  */
+.octicon-file-binary:before {
+	content: "\f094";
+} /*  */
+.octicon-file-code:before {
+	content: "\f010";
+} /*  */
+.octicon-file-directory:before {
+	content: "\f016";
+} /*  */
+.octicon-file-media:before {
+	content: "\f012";
+} /*  */
+.octicon-file-pdf:before {
+	content: "\f014";
+} /*  */
+.octicon-file-submodule:before {
+	content: "\f017";
+} /*  */
+.octicon-file-symlink-directory:before {
+	content: "\f0b1";
+} /*  */
+.octicon-file-symlink-file:before {
+	content: "\f0b0";
+} /*  */
+.octicon-file-text:before {
+	content: "\f011";
+} /*  */
+.octicon-file-zip:before {
+	content: "\f013";
+} /*  */
+.octicon-flame:before {
+	content: "\f0d2";
+} /*  */
+.octicon-fold:before {
+	content: "\f0cc";
+} /*  */
+.octicon-gear:before {
+	content: "\f02f";
+} /*  */
+.octicon-gift:before {
+	content: "\f042";
+} /*  */
+.octicon-gist:before {
+	content: "\f00e";
+} /*  */
+.octicon-gist-secret:before {
+	content: "\f08c";
+} /*  */
 .octicon-git-branch-create:before,
 .octicon-git-branch-delete:before,
-.octicon-git-branch:before { content: '\f020'} /*  */
-.octicon-git-commit:before { content: '\f01f'} /*  */
-.octicon-git-compare:before { content: '\f0ac'} /*  */
-.octicon-git-merge:before { content: '\f023'} /*  */
+.octicon-git-branch:before {
+	content: "\f020";
+} /*  */
+.octicon-git-commit:before {
+	content: "\f01f";
+} /*  */
+.octicon-git-compare:before {
+	content: "\f0ac";
+} /*  */
+.octicon-git-merge:before {
+	content: "\f023";
+} /*  */
 .octicon-git-pull-request-abandoned:before,
-.octicon-git-pull-request:before { content: '\f009'} /*  */
-.octicon-globe:before { content: '\f0b6'} /*  */
-.octicon-graph:before { content: '\f043'} /*  */
-.octicon-heart:before { content: '\2665'} /* ♥ */
-.octicon-history:before { content: '\f07e'} /*  */
-.octicon-home:before { content: '\f08d'} /*  */
-.octicon-horizontal-rule:before { content: '\f070'} /*  */
-.octicon-hubot:before { content: '\f09d'} /*  */
-.octicon-inbox:before { content: '\f0cf'} /*  */
-.octicon-info:before { content: '\f059'} /*  */
-.octicon-issue-closed:before { content: '\f028'} /*  */
-.octicon-issue-opened:before { content: '\f026'} /*  */
-.octicon-issue-reopened:before { content: '\f027'} /*  */
-.octicon-jersey:before { content: '\f019'} /*  */
-.octicon-key:before { content: '\f049'} /*  */
-.octicon-keyboard:before { content: '\f00d'} /*  */
-.octicon-law:before { content: '\f0d8'} /*  */
-.octicon-light-bulb:before { content: '\f000'} /*  */
-.octicon-link:before { content: '\f05c'} /*  */
-.octicon-link-external:before { content: '\f07f'} /*  */
-.octicon-list-ordered:before { content: '\f062'} /*  */
-.octicon-list-unordered:before { content: '\f061'} /*  */
-.octicon-location:before { content: '\f060'} /*  */
+.octicon-git-pull-request:before {
+	content: "\f009";
+} /*  */
+.octicon-globe:before {
+	content: "\f0b6";
+} /*  */
+.octicon-graph:before {
+	content: "\f043";
+} /*  */
+.octicon-heart:before {
+	content: "\2665";
+} /* ♥ */
+.octicon-history:before {
+	content: "\f07e";
+} /*  */
+.octicon-home:before {
+	content: "\f08d";
+} /*  */
+.octicon-horizontal-rule:before {
+	content: "\f070";
+} /*  */
+.octicon-hubot:before {
+	content: "\f09d";
+} /*  */
+.octicon-inbox:before {
+	content: "\f0cf";
+} /*  */
+.octicon-info:before {
+	content: "\f059";
+} /*  */
+.octicon-issue-closed:before {
+	content: "\f028";
+} /*  */
+.octicon-issue-opened:before {
+	content: "\f026";
+} /*  */
+.octicon-issue-reopened:before {
+	content: "\f027";
+} /*  */
+.octicon-jersey:before {
+	content: "\f019";
+} /*  */
+.octicon-key:before {
+	content: "\f049";
+} /*  */
+.octicon-keyboard:before {
+	content: "\f00d";
+} /*  */
+.octicon-law:before {
+	content: "\f0d8";
+} /*  */
+.octicon-light-bulb:before {
+	content: "\f000";
+} /*  */
+.octicon-link:before {
+	content: "\f05c";
+} /*  */
+.octicon-link-external:before {
+	content: "\f07f";
+} /*  */
+.octicon-list-ordered:before {
+	content: "\f062";
+} /*  */
+.octicon-list-unordered:before {
+	content: "\f061";
+} /*  */
+.octicon-location:before {
+	content: "\f060";
+} /*  */
 .octicon-gist-private:before,
 .octicon-mirror-private:before,
 .octicon-git-fork-private:before,
-.octicon-lock:before { content: '\f06a'} /*  */
-.octicon-logo-github:before { content: '\f092'} /*  */
-.octicon-mail:before { content: '\f03b'} /*  */
-.octicon-mail-read:before { content: '\f03c'} /*  */
-.octicon-mail-reply:before { content: '\f051'} /*  */
-.octicon-mark-github:before { content: '\f00a'} /*  */
-.octicon-markdown:before { content: '\f0c9'} /*  */
-.octicon-megaphone:before { content: '\f077'} /*  */
-.octicon-mention:before { content: '\f0be'} /*  */
-.octicon-milestone:before { content: '\f075'} /*  */
+.octicon-lock:before {
+	content: "\f06a";
+} /*  */
+.octicon-logo-github:before {
+	content: "\f092";
+} /*  */
+.octicon-mail:before {
+	content: "\f03b";
+} /*  */
+.octicon-mail-read:before {
+	content: "\f03c";
+} /*  */
+.octicon-mail-reply:before {
+	content: "\f051";
+} /*  */
+.octicon-mark-github:before {
+	content: "\f00a";
+} /*  */
+.octicon-markdown:before {
+	content: "\f0c9";
+} /*  */
+.octicon-megaphone:before {
+	content: "\f077";
+} /*  */
+.octicon-mention:before {
+	content: "\f0be";
+} /*  */
+.octicon-milestone:before {
+	content: "\f075";
+} /*  */
 .octicon-mirror-public:before,
-.octicon-mirror:before { content: '\f024'} /*  */
-.octicon-mortar-board:before { content: '\f0d7'} /*  */
-.octicon-mute:before { content: '\f080'} /*  */
-.octicon-no-newline:before { content: '\f09c'} /*  */
-.octicon-octoface:before { content: '\f008'} /*  */
-.octicon-organization:before { content: '\f037'} /*  */
-.octicon-package:before { content: '\f0c4'} /*  */
-.octicon-paintcan:before { content: '\f0d1'} /*  */
-.octicon-pencil:before { content: '\f058'} /*  */
+.octicon-mirror:before {
+	content: "\f024";
+} /*  */
+.octicon-mortar-board:before {
+	content: "\f0d7";
+} /*  */
+.octicon-mute:before {
+	content: "\f080";
+} /*  */
+.octicon-no-newline:before {
+	content: "\f09c";
+} /*  */
+.octicon-octoface:before {
+	content: "\f008";
+} /*  */
+.octicon-organization:before {
+	content: "\f037";
+} /*  */
+.octicon-package:before {
+	content: "\f0c4";
+} /*  */
+.octicon-paintcan:before {
+	content: "\f0d1";
+} /*  */
+.octicon-pencil:before {
+	content: "\f058";
+} /*  */
 .octicon-person-add:before,
 .octicon-person-follow:before,
-.octicon-person:before { content: '\f018'} /*  */
-.octicon-pin:before { content: '\f041'} /*  */
-.octicon-plug:before { content: '\f0d4'} /*  */
+.octicon-person:before {
+	content: "\f018";
+} /*  */
+.octicon-pin:before {
+	content: "\f041";
+} /*  */
+.octicon-plug:before {
+	content: "\f0d4";
+} /*  */
 .octicon-repo-create:before,
 .octicon-gist-new:before,
 .octicon-file-directory-create:before,
 .octicon-file-add:before,
-.octicon-plus:before { content: '\f05d'} /*  */
-.octicon-primitive-dot:before { content: '\f052'} /*  */
-.octicon-primitive-square:before { content: '\f053'} /*  */
-.octicon-pulse:before { content: '\f085'} /*  */
-.octicon-question:before { content: '\f02c'} /*  */
-.octicon-quote:before { content: '\f063'} /*  */
-.octicon-radio-tower:before { content: '\f030'} /*  */
+.octicon-plus:before {
+	content: "\f05d";
+} /*  */
+.octicon-primitive-dot:before {
+	content: "\f052";
+} /*  */
+.octicon-primitive-square:before {
+	content: "\f053";
+} /*  */
+.octicon-pulse:before {
+	content: "\f085";
+} /*  */
+.octicon-question:before {
+	content: "\f02c";
+} /*  */
+.octicon-quote:before {
+	content: "\f063";
+} /*  */
+.octicon-radio-tower:before {
+	content: "\f030";
+} /*  */
 .octicon-repo-delete:before,
-.octicon-repo:before { content: '\f001'} /*  */
-.octicon-repo-clone:before { content: '\f04c'} /*  */
-.octicon-repo-force-push:before { content: '\f04a'} /*  */
+.octicon-repo:before {
+	content: "\f001";
+} /*  */
+.octicon-repo-clone:before {
+	content: "\f04c";
+} /*  */
+.octicon-repo-force-push:before {
+	content: "\f04a";
+} /*  */
 .octicon-gist-fork:before,
-.octicon-repo-forked:before { content: '\f002'} /*  */
-.octicon-repo-pull:before { content: '\f006'} /*  */
-.octicon-repo-push:before { content: '\f005'} /*  */
-.octicon-rocket:before { content: '\f033'} /*  */
-.octicon-rss:before { content: '\f034'} /*  */
-.octicon-ruby:before { content: '\f047'} /*  */
-.octicon-screen-full:before { content: '\f066'} /*  */
-.octicon-screen-normal:before { content: '\f067'} /*  */
+.octicon-repo-forked:before {
+	content: "\f002";
+} /*  */
+.octicon-repo-pull:before {
+	content: "\f006";
+} /*  */
+.octicon-repo-push:before {
+	content: "\f005";
+} /*  */
+.octicon-rocket:before {
+	content: "\f033";
+} /*  */
+.octicon-rss:before {
+	content: "\f034";
+} /*  */
+.octicon-ruby:before {
+	content: "\f047";
+} /*  */
+.octicon-screen-full:before {
+	content: "\f066";
+} /*  */
+.octicon-screen-normal:before {
+	content: "\f067";
+} /*  */
 .octicon-search-save:before,
-.octicon-search:before { content: '\f02e'} /*  */
-.octicon-server:before { content: '\f097'} /*  */
-.octicon-settings:before { content: '\f07c'} /*  */
-.octicon-shield:before { content: '\f0e1'} /*  */
+.octicon-search:before {
+	content: "\f02e";
+} /*  */
+.octicon-server:before {
+	content: "\f097";
+} /*  */
+.octicon-settings:before {
+	content: "\f07c";
+} /*  */
+.octicon-shield:before {
+	content: "\f0e1";
+} /*  */
 .octicon-log-in:before,
-.octicon-sign-in:before { content: '\f036'} /*  */
+.octicon-sign-in:before {
+	content: "\f036";
+} /*  */
 .octicon-log-out:before,
-.octicon-sign-out:before { content: '\f032'} /*  */
-.octicon-squirrel:before { content: '\f0b2'} /*  */
+.octicon-sign-out:before {
+	content: "\f032";
+} /*  */
+.octicon-squirrel:before {
+	content: "\f0b2";
+} /*  */
 .octicon-star-add:before,
 .octicon-star-delete:before,
-.octicon-star:before { content: '\f02a'} /*  */
-.octicon-stop:before { content: '\f08f'} /*  */
+.octicon-star:before {
+	content: "\f02a";
+} /*  */
+.octicon-stop:before {
+	content: "\f08f";
+} /*  */
 .octicon-repo-sync:before,
-.octicon-sync:before { content: '\f087'} /*  */
+.octicon-sync:before {
+	content: "\f087";
+} /*  */
 .octicon-tag-remove:before,
 .octicon-tag-add:before,
-.octicon-tag:before { content: '\f015'} /*  */
-.octicon-telescope:before { content: '\f088'} /*  */
-.octicon-terminal:before { content: '\f0c8'} /*  */
-.octicon-three-bars:before { content: '\f05e'} /*  */
-.octicon-thumbsdown:before { content: '\f0db'} /*  */
-.octicon-thumbsup:before { content: '\f0da'} /*  */
-.octicon-tools:before { content: '\f031'} /*  */
-.octicon-trashcan:before { content: '\f0d0'} /*  */
-.octicon-triangle-down:before { content: '\f05b'} /*  */
-.octicon-triangle-left:before { content: '\f044'} /*  */
-.octicon-triangle-right:before { content: '\f05a'} /*  */
-.octicon-triangle-up:before { content: '\f0aa'} /*  */
-.octicon-unfold:before { content: '\f039'} /*  */
-.octicon-unmute:before { content: '\f0ba'} /*  */
-.octicon-versions:before { content: '\f064'} /*  */
-.octicon-watch:before { content: '\f0e0'} /*  */
+.octicon-tag:before {
+	content: "\f015";
+} /*  */
+.octicon-telescope:before {
+	content: "\f088";
+} /*  */
+.octicon-terminal:before {
+	content: "\f0c8";
+} /*  */
+.octicon-three-bars:before {
+	content: "\f05e";
+} /*  */
+.octicon-thumbsdown:before {
+	content: "\f0db";
+} /*  */
+.octicon-thumbsup:before {
+	content: "\f0da";
+} /*  */
+.octicon-tools:before {
+	content: "\f031";
+} /*  */
+.octicon-trashcan:before {
+	content: "\f0d0";
+} /*  */
+.octicon-triangle-down:before {
+	content: "\f05b";
+} /*  */
+.octicon-triangle-left:before {
+	content: "\f044";
+} /*  */
+.octicon-triangle-right:before {
+	content: "\f05a";
+} /*  */
+.octicon-triangle-up:before {
+	content: "\f0aa";
+} /*  */
+.octicon-unfold:before {
+	content: "\f039";
+} /*  */
+.octicon-unmute:before {
+	content: "\f0ba";
+} /*  */
+.octicon-versions:before {
+	content: "\f064";
+} /*  */
+.octicon-watch:before {
+	content: "\f0e0";
+} /*  */
 .octicon-remove-close:before,
-.octicon-x:before { content: '\f081'} /*  */
-.octicon-zap:before { content: '\26A1'} /* ⚡ */
+.octicon-x:before {
+	content: "\f081";
+} /*  */
+.octicon-zap:before {
+	content: "\26A1";
+} /* ⚡ */
diff --git a/frappe/public/scss/common/alert.scss b/frappe/public/scss/common/alert.scss
index ba026fa48a..1d2cbf59af 100644
--- a/frappe/public/scss/common/alert.scss
+++ b/frappe/public/scss/common/alert.scss
@@ -9,4 +9,4 @@ $alert-types: info, success, warning, danger;
 			border: none;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/awesomeplete.scss b/frappe/public/scss/common/awesomeplete.scss
index d424961376..2ec7c62253 100644
--- a/frappe/public/scss/common/awesomeplete.scss
+++ b/frappe/public/scss/common/awesomeplete.scss
@@ -8,15 +8,15 @@
 		clip: rect(0, 0, 0, 0);
 	}
 
-	&> input {
+	& > input {
 		display: block;
 	}
 
-	&> ul:empty {
+	& > ul:empty {
 		display: none;
 	}
 
-	&> ul {
+	& > ul {
 		position: absolute;
 		width: 100%;
 		list-style: none;
@@ -33,7 +33,7 @@
 		z-index: 4;
 		min-width: 250px;
 
-		&> li {
+		& > li {
 			cursor: pointer;
 			@include get_textstyle("sm", "regular");
 			padding: var(--padding-sm);
@@ -54,12 +54,13 @@
 			}
 		}
 
-		&> li .link-option {
+		& > li .link-option {
 			font-weight: normal;
 			color: var(--text-color);
 		}
 
-		&> li:hover, &> li[aria-selected=true] {
+		& > li:hover,
+		& > li[aria-selected="true"] {
 			background-color: var(--awesomplete-hover-bg);
 			color: var(--text-color);
 		}
@@ -68,4 +69,4 @@
 			text-decoration: none;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/buttons.scss b/frappe/public/scss/common/buttons.scss
index ddc6c9fdbb..672498ada3 100644
--- a/frappe/public/scss/common/buttons.scss
+++ b/frappe/public/scss/common/buttons.scss
@@ -24,7 +24,8 @@
 		height: var(--btn-height);
 		padding: 0px;
 		@extend .center-content;
-		&.btn-default, &.btn-secondary {
+		&.btn-default,
+		&.btn-secondary {
 			min-width: 28px;
 		}
 	}
@@ -41,7 +42,9 @@
 	);
 
 	color: $white;
-	&:hover, &:active, &:focus {
+	&:hover,
+	&:active,
+	&:focus {
 		color: $white;
 	}
 	.icon {
@@ -61,7 +64,8 @@
 	);
 
 	color: var(--primary);
-	&:hover, &:active {
+	&:hover,
+	&:active {
 		color: var(--primary);
 	}
 
@@ -73,7 +77,8 @@
 .btn.btn-secondary {
 	background-color: var(--control-bg);
 	color: var(--text-color);
-	&:hover, &:active {
+	&:hover,
+	&:active {
 		background-color: var(--btn-default-hover-bg);
 		color: var(--text-color);
 	}
@@ -82,7 +87,8 @@
 .btn.btn-default {
 	background-color: var(--control-bg);
 	color: var(--text-color);
-	&:hover, &:active {
+	&:hover,
+	&:active {
 		background: var(--btn-default-hover-bg);
 		color: var(--text-color);
 	}
@@ -120,7 +126,7 @@
 		box-shadow: none;
 	}
 	.btn-primary:active {
-			color: var(--gray-900) !important;
-			background-color: var(--invert-neutral) !important;
+		color: var(--gray-900) !important;
+		background-color: var(--invert-neutral) !important;
 	}
 }
diff --git a/frappe/public/scss/common/color_picker.scss b/frappe/public/scss/common/color_picker.scss
index 2e53150a41..f80057f5b3 100644
--- a/frappe/public/scss/common/color_picker.scss
+++ b/frappe/public/scss/common/color_picker.scss
@@ -19,7 +19,8 @@
 		cursor: pointer;
 	}
 
-	.color-selector, .hue-selector {
+	.color-selector,
+	.hue-selector {
 		width: 12px;
 		height: 12px;
 		background: transparent;
@@ -27,11 +28,12 @@
 		border-radius: 50%;
 		/* box-shadow: 0 0 0 1px gray, 0 0 0 3px white, 0 0 0 4px gray; */
 		border: 1px solid rgba(0, 0, 0, 0.2);
-		&::before, &::after {
+		&::before,
+		&::after {
 			position: absolute;
 			background-color: transparent;
 			border: 1px solid rgba(0, 0, 0, 0.2);
-			content: ' ';
+			content: " ";
 			border-radius: 50%;
 		}
 
@@ -74,8 +76,8 @@
 		position: relative;
 		background: linear-gradient(
 			90deg,
-			hsl(0,   100%, 50%),
-			hsl(60,  100%, 50%),
+			hsl(0, 100%, 50%),
+			hsl(60, 100%, 50%),
 			hsl(120, 100%, 50%),
 			hsl(180, 100%, 50%),
 			hsl(240, 100%, 50%),
@@ -92,7 +94,7 @@
 	}
 }
 
-.frappe-control[data-fieldtype='Color'] {
+.frappe-control[data-fieldtype="Color"] {
 	input {
 		padding-left: 38px;
 	}
@@ -108,9 +110,9 @@
 		position: absolute;
 		top: 5px;
 		left: 8px;
-		content: ' ';
+		content: " ";
 		&.no-value {
-			background: url('/assets/frappe/images/color-circle.png');
+			background: url("/assets/frappe/images/color-circle.png");
 			background-size: contain;
 		}
 	}
diff --git a/frappe/public/scss/common/controls.scss b/frappe/public/scss/common/controls.scss
index c77c1319cd..fd75433a36 100644
--- a/frappe/public/scss/common/controls.scss
+++ b/frappe/public/scss/common/controls.scss
@@ -125,7 +125,8 @@ select.form-control {
 		}
 	}
 
-	.selectable-item:hover, .selectable-item.highlighted {
+	.selectable-item:hover,
+	.selectable-item.highlighted {
 		background-color: var(--fg-hover-color);
 	}
 
@@ -142,7 +143,7 @@ select.form-control {
 .frappe-control {
 	@include get_textstyle("base", "regular");
 	.control-label.reqd:after {
-		content: ' *';
+		content: " *";
 		color: var(--red-400);
 	}
 	.help:empty {
@@ -193,7 +194,7 @@ select.form-control {
 	}
 }
 
-.frappe-control:not([data-fieldtype='MultiSelectPills']):not([data-fieldtype='Table MultiSelect']) {
+.frappe-control:not([data-fieldtype="MultiSelectPills"]):not([data-fieldtype="Table MultiSelect"]) {
 	&.has-error {
 		input {
 			border: 1px solid var(--error-border);
@@ -205,8 +206,8 @@ select.form-control {
 	}
 }
 
-.frappe-control[data-fieldtype='MultiSelectPills'],
-.frappe-control[data-fieldtype='Table MultiSelect'] {
+.frappe-control[data-fieldtype="MultiSelectPills"],
+.frappe-control[data-fieldtype="Table MultiSelect"] {
 	&.has-error {
 		.control-input {
 			border: 1px solid var(--error-border);
@@ -257,7 +258,8 @@ select.form-control {
 }
 
 /* progress bar */
-.progress, .progress-bar {
+.progress,
+.progress-bar {
 	box-shadow: none;
 }
 
@@ -361,7 +363,8 @@ textarea.form-control {
 	overflow-wrap: break-word;
 }
 
-.frappe-control[data-fieldtype="Data"] .control-input, .control-value {
+.frappe-control[data-fieldtype="Data"] .control-input,
+.control-value {
 	position: relative;
 }
 
@@ -372,26 +375,30 @@ textarea.form-control {
 	padding: 3px;
 }
 
-.markdown-preview, .html-preview {
+.markdown-preview,
+.html-preview {
 	padding: var(--padding-md);
 	min-height: 300px;
 	max-height: 600px;
 	overflow: auto;
 }
 
-.markdown-toggle, .html-toggle {
+.markdown-toggle,
+.html-toggle {
 	margin-bottom: var(--margin-xs);
 }
 
 .barcode-scanner {
 	position: relative;
 
-	& > canvas, & > video {
+	& > canvas,
+	& > video {
 		max-width: 100%;
 		width: 100%;
 	}
 
-	canvas.drawing, canvas.drawingBuffer {
+	canvas.drawing,
+	canvas.drawingBuffer {
 		position: absolute;
 		left: 0;
 		top: 0;
diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss
index 2e0e4db11c..1881aebea1 100644
--- a/frappe/public/scss/common/css_variables.scss
+++ b/frappe/public/scss/common/css_variables.scss
@@ -19,12 +19,10 @@ $disabled-input-height: 22px;
 	--margin-xl: 30px;
 	--margin-2xl: 40px;
 
-
 	--modal-shadow: var(--shadow-md);
 	--card-shadow: var(--shadow-sm);
 	--btn-shadow: var(--shadow-xs);
 
-
 	// navbar
 	--navbar-height: 48px;
 
@@ -50,8 +48,6 @@ $disabled-input-height: 22px;
 	--bg-pink: var(--pink-50);
 	--bg-cyan: var(--cyan-50);
 
-
-
 	--text-on-blue: var(--blue-700);
 	--text-on-light-blue: var(--blue-600);
 	--text-on-dark-blue: var(--blue-800);
@@ -128,7 +124,6 @@ $disabled-input-height: 22px;
 	--code-block-bg: var(--gray-900);
 	--code-block-text: var(--gray-400);
 
-
 	--primary-color: var(--gray-900);
 	--btn-height: 28px;
 
@@ -143,8 +138,11 @@ $disabled-input-height: 22px;
 
 	--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);
 	--checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);
-	--checkbox-disabled-gradient: linear-gradient(180deg, var(--disabled-control-bg) -124.51%, var(--disabled-control-bg) 100%);
-
+	--checkbox-disabled-gradient: linear-gradient(
+		180deg,
+		var(--disabled-control-bg) -124.51%,
+		var(--disabled-control-bg) 100%
+	);
 
 	// switch
 	--switch-bg: var(--gray-300);
diff --git a/frappe/public/scss/common/datepicker.scss b/frappe/public/scss/common/datepicker.scss
index f60f1c25f5..77ed7d622b 100644
--- a/frappe/public/scss/common/datepicker.scss
+++ b/frappe/public/scss/common/datepicker.scss
@@ -20,11 +20,14 @@
 	&--nav {
 		border-bottom: 1px solid var(--border-color);
 	}
-	&--nav-title:hover, &--nav-action:hover {
+	&--nav-title:hover,
+	&--nav-action:hover {
 		background-color: var(--fg-hover-color);
 	}
 
-	&--time-current-hours, &--time-current-minutes, &--time-current-seconds {
+	&--time-current-hours,
+	&--time-current-minutes,
+	&--time-current-seconds {
 		font-family: inherit;
 		&:after {
 			color: var(--text-color);
@@ -48,12 +51,14 @@
 			}
 		}
 
-		&.-range-from-, &.-range-to- {
+		&.-range-from-,
+		&.-range-to- {
 			border: 1px solid var(--border-color);
 			background: var(--date-range-bg);
 		}
 
-		&.-selected-, &.-current-.-selected- {
+		&.-selected-,
+		&.-current-.-selected- {
 			color: var(--date-active-text);
 			background: var(--date-active-bg);
 			border-radius: var(--border-radius-tiny);
@@ -79,7 +84,8 @@
 		}
 	}
 
-	&--time, &--buttons {
+	&--time,
+	&--buttons {
 		border-top: 1px solid var(--border-color);
 	}
 
@@ -109,4 +115,3 @@
 		}
 	}
 }
-
diff --git a/frappe/public/scss/common/flex.scss b/frappe/public/scss/common/flex.scss
index 97d01f4f63..1d1917d17c 100644
--- a/frappe/public/scss/common/flex.scss
+++ b/frappe/public/scss/common/flex.scss
@@ -24,7 +24,7 @@
 }
 
 .justify-between {
-	justify-content: space-between
+	justify-content: space-between;
 }
 
 .justify-flex-end {
@@ -51,7 +51,8 @@
 	align-items: center;
 }
 
-.level-left, .level-right {
+.level-left,
+.level-right {
 	display: flex;
 	flex-basis: auto;
 	flex-grow: 0;
@@ -84,5 +85,5 @@
 }
 
 .fill-width {
-	flex: 1
+	flex: 1;
 }
diff --git a/frappe/public/scss/common/form.scss b/frappe/public/scss/common/form.scss
index 37bd915857..028d2770f8 100644
--- a/frappe/public/scss/common/form.scss
+++ b/frappe/public/scss/common/form.scss
@@ -27,4 +27,4 @@
 	font-size: var(--text-xl);
 	font-weight: 700;
 	color: var(--heading-color);
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/global.scss b/frappe/public/scss/common/global.scss
index 881dc8a19e..41d145e52e 100644
--- a/frappe/public/scss/common/global.scss
+++ b/frappe/public/scss/common/global.scss
@@ -1,7 +1,8 @@
 @import "../element/checkbox";
 @import "../element/radio";
 
-html, body {
+html,
+body {
 	height: 100%;
 	font-family: var(--font-stack);
 	font-variation-settings: "opsz" 24;
@@ -21,7 +22,8 @@ html, body {
 		color: var(--text-color);
 	}
 
-	.input-area, .disp-area {
+	.input-area,
+	.disp-area {
 		display: flex;
 	}
 }
@@ -57,7 +59,6 @@ html, body {
 		-moz-appearance: none;
 		/* for Chrome */
 		-webkit-appearance: none;
-
 	}
 
 	.select-icon {
@@ -134,7 +135,8 @@ html, body {
 .btn-link {
 	box-shadow: none !important;
 	outline: none;
-	.icon, &:hover {
+	.icon,
+	&:hover {
 		text-decoration: none !important;
 	}
 }
diff --git a/frappe/public/scss/common/grid.scss b/frappe/public/scss/common/grid.scss
index 5ac43a177e..a51c727b24 100644
--- a/frappe/public/scss/common/grid.scss
+++ b/frappe/public/scss/common/grid.scss
@@ -31,15 +31,17 @@
 		}
 	}
 
-	.grid-static-col, .row-check, .row-index {
+	.grid-static-col,
+	.row-check,
+	.row-index {
 		height: 32px;
 		padding: 6px 8px !important;
 	}
 	.grid-static-col {
 		padding: 6px 8px !important;
-		.static-area{
+		.static-area {
 			&.reqd:after {
-				content: ' *';
+				content: " *";
 				color: var(--red-400);
 			}
 		}
@@ -69,7 +71,8 @@
 }
 
 // hide row index in 6/4 column child tables
-.form-column.col-sm-6, .form-column.col-sm-4 {
+.form-column.col-sm-6,
+.form-column.col-sm-4 {
 	.form-grid {
 		.row-index {
 			display: none;
@@ -98,7 +101,7 @@
 
 .grid-body .data-row {
 	@include get_textstyle("sm", "regular");
-	color: var(--text-muted)
+	color: var(--text-muted);
 }
 
 .grid-empty,
@@ -219,7 +222,7 @@
 			padding: 0px !important;
 		}
 
-		.frappe-control[data-fieldtype=Select].form-group .select-icon {
+		.frappe-control[data-fieldtype="Select"].form-group .select-icon {
 			top: 9px;
 		}
 
@@ -287,7 +290,8 @@
 		margin-left: 1rem;
 	}
 
-	.grid-static-col[data-fieldtype="Code"], .grid-static-col[data-fieldtype="HTML Editor"] {
+	.grid-static-col[data-fieldtype="Code"],
+	.grid-static-col[data-fieldtype="HTML Editor"] {
 		overflow: hidden;
 
 		.static-area {
@@ -450,7 +454,8 @@
 	}
 }
 
-.grid-buttons, .grid-bulk-actions {
+.grid-buttons,
+.grid-bulk-actions {
 	display: inline-flex;
 }
 
@@ -460,7 +465,8 @@
 .grid-footer {
 	margin-top: var(--margin-sm);
 }
-.grid-footer, .grid-custom-buttons {
+.grid-footer,
+.grid-custom-buttons {
 	padding: var(--padding-sm) 0px;
 	background-color: var(--fg-color);
 	.btn {
@@ -517,8 +523,7 @@
 }
 
 .grid-footer-toolbar {
-	padding: var(--padding-md) var(--padding-sm) var(--padding-xs)
-		var(--padding-sm);
+	padding: var(--padding-md) var(--padding-sm) var(--padding-xs) var(--padding-sm);
 	// border-top: 1px solid var(--border-color);
 	span {
 		margin-right: var(--margin-xs);
@@ -565,10 +570,10 @@
 
 @media (min-width: map-get($grid-breakpoints, "md")) {
 	.form-grid-container {
-		overflow-x: unset!important;
+		overflow-x: unset !important;
 
 		.form-grid {
-			position: unset!important;
+			position: unset !important;
 		}
 	}
 }
@@ -579,4 +584,3 @@
 		padding-right: 0 !important;
 	}
 }
-
diff --git a/frappe/public/scss/common/icon_picker.scss b/frappe/public/scss/common/icon_picker.scss
index eae078cfe9..4c7cd1ebef 100644
--- a/frappe/public/scss/common/icon_picker.scss
+++ b/frappe/public/scss/common/icon_picker.scss
@@ -12,8 +12,8 @@
 		cursor: pointer;
 
 		/* Hide scrollbar for IE, Edge and Firefox */
-		-ms-overflow-style: none;  /* IE and Edge */
-		scrollbar-width: none;  /* Firefox */
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
 
 		/* Hide scrollbar for Chrome, Safari and Opera */
 		&::-webkit-scrollbar {
@@ -32,7 +32,7 @@
 	.search-icons {
 		position: relative;
 
-		input[type='search'] {
+		input[type="search"] {
 			height: inherit;
 			padding-left: 30px;
 		}
@@ -50,7 +50,7 @@
 	}
 }
 
-.frappe-control[data-fieldtype='Icon'] {
+.frappe-control[data-fieldtype="Icon"] {
 	input {
 		padding-left: 40px;
 	}
@@ -62,7 +62,7 @@
 		position: absolute;
 		top: calc(50% + 2px);
 		left: 8px;
-		content: ' ';
+		content: " ";
 	}
 	.like-disabled-input {
 		.icon-value {
@@ -88,8 +88,9 @@
 	}
 }
 
-.dt-cell__edit, .filter-field {
+.dt-cell__edit,
+.filter-field {
 	.selected-icon {
 		top: 5px !important;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/icons.scss b/frappe/public/scss/common/icons.scss
index 21054f3a68..a8c17e9f83 100644
--- a/frappe/public/scss/common/icons.scss
+++ b/frappe/public/scss/common/icons.scss
@@ -76,4 +76,4 @@ use.like-icon {
 
 .no-stroke {
 	stroke: none;
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/indicator.scss b/frappe/public/scss/common/indicator.scss
index c178dbaf70..da9e26dba0 100644
--- a/frappe/public/scss/common/indicator.scss
+++ b/frappe/public/scss/common/indicator.scss
@@ -7,7 +7,7 @@
 }
 
 .indicator::before {
-	content: '';
+	content: "";
 	height: 8px;
 	width: 8px;
 	border-radius: var(--border-radius);
@@ -17,7 +17,7 @@
 .indicator-pill-right {
 	@include get_textstyle("sm", "regular");
 	padding: 4.5px 8px;
-	border-radius: var( --border-radius-full);
+	border-radius: var(--border-radius-full);
 	height: 20px;
 }
 
@@ -31,7 +31,7 @@
 
 .indicator-pill:not(.no-indicator-dot)::before,
 .indicator-pill-right::after {
-	content:'';
+	content: "";
 	display: inline-table;
 	height: 6px;
 	width: 6px;
@@ -48,7 +48,8 @@
 	margin: 0 0 0 4px;
 }
 
-$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
+$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple,
+	light-blue;
 @each $color in $indicator-colors {
 	.indicator.#{"" + $color} {
 		&::before,
@@ -72,11 +73,12 @@ $indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, dar
 	}
 }
 
-
 .indicator.blink {
 	animation: blink 1s linear infinite;
 }
 
 @keyframes blink {
-	50% { opacity: 0.5; }
+	50% {
+		opacity: 0.5;
+	}
 }
diff --git a/frappe/public/scss/common/mixins.scss b/frappe/public/scss/common/mixins.scss
index 55b54d9de3..d4f2102382 100644
--- a/frappe/public/scss/common/mixins.scss
+++ b/frappe/public/scss/common/mixins.scss
@@ -1,9 +1,4 @@
-@mixin flex(
-	$dis: flex,
-	$x: center,
-	$y: center,
-	$dir: row
-) {
+@mixin flex($dis: flex, $x: center, $y: center, $dir: row) {
 	display: $dis;
 	justify-content: $x;
 	align-items: $y;
@@ -43,7 +38,7 @@
 	$top: 0,
 	$left: 0,
 	$background-color: var(--bg-color),
-	$border-radius: var(--border-radius),
+	$border-radius: var(--border-radius)
 ) {
 	// Deprecated: Does not work as expected anymore. Also, this never worked in Safari.
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss
index 3d5624237a..b2e888a41d 100644
--- a/frappe/public/scss/common/modal.scss
+++ b/frappe/public/scss/common/modal.scss
@@ -21,7 +21,7 @@ body.modal-open[style^="padding-right"] {
 	}
 
 	// Hide scrollbar on touch devices
-	@media(max-width: 991px) {
+	@media (max-width: 991px) {
 		scrollbar-width: none;
 		&::-webkit-scrollbar {
 			width: 0;
@@ -147,7 +147,6 @@ body.modal-open[style^="padding-right"] {
 	.hasDatepicker {
 		z-index: 1140;
 	}
-
 }
 
 .modal-backdrop.show {
@@ -203,7 +202,8 @@ body.modal-open[style^="padding-right"] {
 		}
 	}
 
-	.modal-body, .modal-footer {
+	.modal-body,
+	.modal-footer {
 		display: none;
 	}
 }
@@ -244,7 +244,7 @@ body.modal-open[style^="padding-right"] {
 			margin-bottom: -24px;
 			button {
 				// same as form-control input
-				height: calc(1.5em + .7rem);
+				height: calc(1.5em + 0.7rem);
 			}
 		}
 	}
@@ -285,7 +285,7 @@ body.modal-open[style^="padding-right"] {
 	@extend .row;
 	.btn-group {
 		opacity: 0;
-		transition: opacity .3s ease-in-out;
+		transition: opacity 0.3s ease-in-out;
 
 		button {
 			display: inline-flex;
diff --git a/frappe/public/scss/common/phone_picker.scss b/frappe/public/scss/common/phone_picker.scss
index f2131e8b84..2d865559d5 100644
--- a/frappe/public/scss/common/phone_picker.scss
+++ b/frappe/public/scss/common/phone_picker.scss
@@ -12,8 +12,8 @@
 		cursor: pointer;
 
 		/* Hide scrollbar for IE, Edge and Firefox */
-		-ms-overflow-style: none;  /* IE and Edge */
-		scrollbar-width: none;  /* Firefox */
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
 
 		/* Hide scrollbar for Chrome, Safari and Opera */
 		&::-webkit-scrollbar {
@@ -44,7 +44,7 @@
 	.search-phones {
 		position: relative;
 
-		input[type='search'] {
+		input[type="search"] {
 			height: inherit;
 			padding-left: 30px;
 		}
@@ -59,7 +59,7 @@
 
 .phone-picker-popover {
 	max-width: 325px;
-    left: 29px !important;
+	left: 29px !important;
 	.picker-arrow {
 		left: 15px !important;
 	}
@@ -69,9 +69,7 @@
 	}
 }
 
-
-.frappe-control[data-fieldtype='Phone']
-{
+.frappe-control[data-fieldtype="Phone"] {
 	input {
 		padding-left: 30px;
 	}
@@ -83,7 +81,7 @@
 		position: absolute;
 		top: calc(50% + 2px);
 		left: 8px;
-		content: ' ';
+		content: " ";
 		align-items: center;
 		z-index: 1;
 
@@ -97,7 +95,6 @@
 		img {
 			height: 15px;
 		}
-
 	}
 	.like-disabled-input {
 		.phone-value {
@@ -111,12 +108,11 @@
 }
 
 .modal-body {
-	.frappe-control[data-fieldtype='Phone']
-		{
-			.selected-phone {
-				top: calc(50% - 0.5px);
-			}
+	.frappe-control[data-fieldtype="Phone"] {
+		.selected-phone {
+			top: calc(50% - 0.5px);
 		}
+	}
 }
 
 .data-row.row {
@@ -128,7 +124,7 @@
 
 .bg-gray-100 {
 	--tw-bg-opacity: 1;
-	background-color: rgba(244,245,246,var(--tw-bg-opacity));
+	background-color: rgba(244, 245, 246, var(--tw-bg-opacity));
 }
 
 .dt-cell__content {
@@ -137,7 +133,8 @@
 	}
 }
 
-.dt-cell__edit, .filter-field {
+.dt-cell__edit,
+.filter-field {
 	.selected-phone {
 		top: 5.5px !important;
 	}
diff --git a/frappe/public/scss/common/quill.scss b/frappe/public/scss/common/quill.scss
index b805c15a17..135fe0dcf8 100644
--- a/frappe/public/scss/common/quill.scss
+++ b/frappe/public/scss/common/quill.scss
@@ -1,5 +1,5 @@
-@import '~quill/dist/quill.snow';
-@import '~quill/dist/quill.bubble';
+@import "~quill/dist/quill.snow";
+@import "~quill/dist/quill.bubble";
 
 .ql-toolbar.ql-snow,
 .ql-container.ql-snow {
@@ -158,7 +158,6 @@
 		color: var(--text-color);
 		box-shadow: var(--shadow-base);
 	}
-
 }
 
 .print-format {
@@ -208,7 +207,7 @@
 	color: var(--code-block-text);
 	padding: var(--padding-xs) var(--padding-sm) !important;
 	margin-bottom: var(--margin-xs) !important;
-	margin-top: var(--margin-xs)!important;
+	margin-top: var(--margin-xs) !important;
 	border-radius: var(--border-radius-sm);
 }
 
@@ -262,33 +261,33 @@
 	width: 66px;
 
 	.ql-picker-label::before {
-		content: 'Table';
+		content: "Table";
 	}
 
 	.ql-picker-options {
-		[data-value='insert-table']::before {
-			content: 'Insert Table';
+		[data-value="insert-table"]::before {
+			content: "Insert Table";
 		}
-		[data-value='insert-row-above']::before {
-			content: 'Insert Row Above';
+		[data-value="insert-row-above"]::before {
+			content: "Insert Row Above";
 		}
-		[data-value='insert-row-below']::before {
-			content: 'Insert Row Below';
+		[data-value="insert-row-below"]::before {
+			content: "Insert Row Below";
 		}
-		[data-value='insert-column-right']::before {
-			content: 'Insert Column Right';
+		[data-value="insert-column-right"]::before {
+			content: "Insert Column Right";
 		}
-		[data-value='insert-column-left']::before {
-			content: 'Insert Column Left';
+		[data-value="insert-column-left"]::before {
+			content: "Insert Column Left";
 		}
-		[data-value='delete-row']::before {
-			content: 'Delete Row';
+		[data-value="delete-row"]::before {
+			content: "Delete Row";
 		}
-		[data-value='delete-column']::before {
-			content: 'Delete Column';
+		[data-value="delete-column"]::before {
+			content: "Delete Column";
 		}
-		[data-value='delete-table']::before {
-			content: 'Delete Table';
+		[data-value="delete-table"]::before {
+			content: "Delete Table";
 		}
 	}
 }
@@ -313,7 +312,6 @@
 	}
 }
 
-
 .ql-mention-list {
 	border-radius: var(--border-radius-sm);
 	list-style: none;
@@ -323,7 +321,7 @@
 	overflow: scroll;
 }
 
-.mention>span {
+.mention > span {
 	margin: 0 3px;
 }
 
@@ -338,4 +336,4 @@
 	left: 8px;
 	color: var(--text-muted);
 	font-style: normal;
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk.bundle.scss b/frappe/public/scss/desk.bundle.scss
index 6b192bb3ff..82fb24319d 100644
--- a/frappe/public/scss/desk.bundle.scss
+++ b/frappe/public/scss/desk.bundle.scss
@@ -8,4 +8,4 @@
 @import "frappe/public/js/lib/leaflet/leaflet.css";
 @import "frappe/public/js/lib/leaflet_easy_button/easy-button.css";
 @import "frappe/public/js/lib/leaflet_control_locate/L.Control.Locate.css";
-@import "frappe/public/js/lib/leaflet_draw/leaflet.draw.css";
\ No newline at end of file
+@import "frappe/public/js/lib/leaflet_draw/leaflet.draw.css";
diff --git a/frappe/public/scss/desk/avatar.scss b/frappe/public/scss/desk/avatar.scss
index 1572ce8fe9..005cd62a0c 100644
--- a/frappe/public/scss/desk/avatar.scss
+++ b/frappe/public/scss/desk/avatar.scss
@@ -166,7 +166,6 @@
 		margin-right: var(--margin-xs);
 	}
 
-
 	.avatar-action {
 		@extend .avatar-small;
 		display: flex;
diff --git a/frappe/public/scss/desk/calendar.scss b/frappe/public/scss/desk/calendar.scss
index c506e63fbc..804006fe64 100644
--- a/frappe/public/scss/desk/calendar.scss
+++ b/frappe/public/scss/desk/calendar.scss
@@ -59,12 +59,12 @@ th.fc-widget-header {
 }
 
 // .fc-highlight {
-	// background-color: $light-yellow !important;
+// background-color: $light-yellow !important;
 // }
 
 .fc-event {
 	// border: 1px solid #E8DDFF; /* default BORDER color */
-	background-color: #E8DDFF;
+	background-color: #e8ddff;
 }
 
 .fc-time-grid-event {
@@ -137,7 +137,6 @@ th.fc-day-header {
 	// }
 }
 
-
 .fc-state-active {
 	box-shadow: none !important;
 	background: var(--gray-500) !important;
@@ -164,7 +163,8 @@ th.fc-day-header {
 }
 
 .fc-left {
-	.fc-prev-button, .fc-next-button {
+	.fc-prev-button,
+	.fc-next-button {
 		width: 28px;
 		display: flex;
 		justify-content: center;
@@ -205,4 +205,3 @@ th.fc-day-header {
 .fc-now-indicator-arrow {
 	display: none !important;
 }
-
diff --git a/frappe/public/scss/desk/css_variables.scss b/frappe/public/scss/desk/css_variables.scss
index 7e8adf7459..0694bec98d 100644
--- a/frappe/public/scss/desk/css_variables.scss
+++ b/frappe/public/scss/desk/css_variables.scss
@@ -1,17 +1,14 @@
-@import '../common/css_variables.scss';
+@import "../common/css_variables.scss";
 
 :root,
 [data-theme="light"] {
 	// breakpoints
-	--xxl-width: #{map-get($grid-breakpoints, '2xl')};
-	--xl-width: #{map-get($grid-breakpoints, 'xl')};
-	--lg-width: #{map-get($grid-breakpoints, 'lg')};
-	--md-width: #{map-get($grid-breakpoints, 'md')};
-	--sm-width: #{map-get($grid-breakpoints, 'sm')};
-	--xs-width: #{map-get($grid-breakpoints, 'xs')};
-
-
-
+	--xxl-width: #{map-get($grid-breakpoints, "2xl")};
+	--xl-width: #{map-get($grid-breakpoints, "xl")};
+	--lg-width: #{map-get($grid-breakpoints, "lg")};
+	--md-width: #{map-get($grid-breakpoints, "md")};
+	--sm-width: #{map-get($grid-breakpoints, "sm")};
+	--xs-width: #{map-get($grid-breakpoints, "xs")};
 
 	--appreciation-color: var(--green-600);
 	--appreciation-bg: var(--green-100);
diff --git a/frappe/public/scss/desk/dark.scss b/frappe/public/scss/desk/dark.scss
index 37c3c973d9..d168f4247a 100644
--- a/frappe/public/scss/desk/dark.scss
+++ b/frappe/public/scss/desk/dark.scss
@@ -48,7 +48,6 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 	// Border Colors
 	--border-primary: var(--gray-200);
 
-
 	// Background Text Color Pairs
 	--bg-blue: var(--blue-600);
 	--bg-light-blue: var(--blue-600);
@@ -129,15 +128,24 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 
 	// checkbox
 	--checkbox-color: var(--neutral-white);
-	--checkbox-gradient: linear-gradient(180deg, var(--neutral-white) -124.51%, var(--neutral-white) 100%);
-	--checkbox-disabled-gradient: linear-gradient(180deg, var(--gray-600) -124.51%, var(--gray-600) 100%);
+	--checkbox-gradient: linear-gradient(
+		180deg,
+		var(--neutral-white) -124.51%,
+		var(--neutral-white) 100%
+	);
+	--checkbox-disabled-gradient: linear-gradient(
+		180deg,
+		var(--gray-600) -124.51%,
+		var(--gray-600) 100%
+	);
 	--checkbox-focus-shadow: var(--focus-default);
 
 	input[type="checkbox"] {
 		&:checked {
 			background-image: $check-icon-dark, var(--checkbox-gradient);
 		}
-		&.disabled-selected, &:disabled:checked {
+		&.disabled-selected,
+		&:disabled:checked {
 			background-image: $check-icon-dark, var(--checkbox-disabled-gradient);
 		}
 		&.disabled-deselected {
@@ -154,7 +162,6 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 	--date-active-bg: var(--gray-700);
 	--date-range-bg: var(--subtle-fg);
 
-
 	// grid
 	.grid-body .editable-row {
 		--control-bg: var(--gray-900);
@@ -247,7 +254,8 @@ $check-icon-dark: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xm
 		background: var(--gray-500);
 	}
 
-	$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple, light-blue;
+	$indicator-colors: green, cyan, blue, orange, yellow, gray, grey, red, pink, darkgrey, purple,
+		light-blue;
 	@each $color in $indicator-colors {
 		.indicator {
 			--indicator-dot-#{"" + $color}: var(--bg-#{$color});
diff --git a/frappe/public/scss/desk/dashboard_view.scss b/frappe/public/scss/desk/dashboard_view.scss
index 732b568ee3..959a6aa1ff 100644
--- a/frappe/public/scss/desk/dashboard_view.scss
+++ b/frappe/public/scss/desk/dashboard_view.scss
@@ -28,37 +28,36 @@
 	// .page-form {
 	// 	height: 50px;
 
-		// .dashboard-header {
-		// 	padding: 10px;
-		// 	display: flex;
-		// 	justify-content: space-between;
-		// 	width: 100%;
+	// .dashboard-header {
+	// 	padding: 10px;
+	// 	display: flex;
+	// 	justify-content: space-between;
+	// 	width: 100%;
 
-		// 	.header-title {
-		// 		line-height: 1.5em;
-		// 	}
+	// 	.header-title {
+	// 		line-height: 1.5em;
+	// 	}
 
-		// 	.restricted-button {
-		// 		cursor: default;
-		// 		position: relative;
-		// 		right: 5px;
-		// 		top: -3px;
-		// 	}
-		// }
+	// 	.restricted-button {
+	// 		cursor: default;
+	// 		position: relative;
+	// 		right: 5px;
+	// 		top: -3px;
+	// 	}
+	// }
 
-		// .customize-dashboard {
-		// 	font-size: 13px;
-		// 	cursor: pointer;
-		// }
+	// .customize-dashboard {
+	// 	font-size: 13px;
+	// 	cursor: pointer;
+	// }
 
-		// .customize-options {
-		// 	display: none;
-		// 	cursor: pointer;
+	// .customize-options {
+	// 	display: none;
+	// 	cursor: pointer;
 
-		// 	.customize-option:hover {
-		// 		text-decoration: underline;
-		// 	}
-		// }
+	// 	.customize-option:hover {
+	// 		text-decoration: underline;
+	// 	}
+	// }
 	// }
 }
-
diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index 30456215da..8de66e43d5 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -569,7 +569,6 @@ body {
 	}
 
 	&.links-widget-box {
-
 		.widget-head .widget-label .widget-title svg {
 			margin: 2px;
 			margin-right: 12px !important;
@@ -588,7 +587,6 @@ body {
 			border-radius: var(--border-radius-md);
 			cursor: pointer;
 
-
 			&:first-child {
 				margin-top: 12px;
 			}
@@ -722,14 +720,17 @@ body {
 	}
 
 	&.quick-list-widget-box {
-		.list-loading-state, .list-no-data-state {
+		.list-loading-state,
+		.list-no-data-state {
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			height: 202px;
 		}
 
-		.refresh-list, .filter-list, .add-new {
+		.refresh-list,
+		.filter-list,
+		.add-new {
 			background-color: var(--btn-default-bg);
 			cursor: pointer;
 
@@ -933,7 +934,8 @@ body {
 	@media (min-width: map-get($grid-breakpoints, "lg")) {
 		.layout-main {
 			height: calc(100vh - var(--navbar-height) - var(--page-head-height) - 5px);
-			.layout-side-section, .layout-main-section-wrapper {
+			.layout-side-section,
+			.layout-main-section-wrapper {
 				height: 100%;
 				overflow-y: auto;
 				scrollbar-color: var(--gray-200) transparent;
@@ -988,7 +990,7 @@ body {
 		padding: var(--padding-sm);
 	}
 
-	.block-menu-item-icon svg{
+	.block-menu-item-icon svg {
 		width: 18px;
 		height: 18px;
 		margin-right: 5px;
@@ -1011,7 +1013,8 @@ body {
 				display: none;
 			}
 
-			.setting-btn, .duplicate-page {
+			.setting-btn,
+			.duplicate-page {
 				display: none;
 			}
 
@@ -1063,7 +1066,6 @@ body {
 
 	.desk-sidebar {
 		&.show-hidden-workspaces {
-
 			.unhide-workspace-btn {
 				display: none;
 			}
@@ -1094,14 +1096,16 @@ body {
 
 		.standard-sidebar-section.show-control {
 			.desk-sidebar-item.standard-sidebar-item {
-
-				&:hover, &.selected {
+				&:hover,
+				&.selected {
 					.drag-handle {
 						display: inline-block;
 						background-color: var(--bg-color);
 					}
 
-					.setting-btn, .duplicate-page, .unhide-workspace-btn {
+					.setting-btn,
+					.duplicate-page,
+					.unhide-workspace-btn {
 						display: inline-block;
 						margin-right: 8px;
 					}
@@ -1113,19 +1117,17 @@ body {
 				}
 
 				.block-click {
-					pointer-events:none;
+					pointer-events: none;
 				}
 			}
 		}
 	}
 
-
 	// widgets
 	.widget.number-widget-box {
 		border: 1px solid var(--border-color);
 	}
 
-
 	.codex-editor__loader {
 		display: none !important;
 	}
@@ -1133,7 +1135,7 @@ body {
 	.codex-editor {
 		min-height: 630px;
 
-		.codex-editor__redactor{
+		.codex-editor__redactor {
 			display: flex;
 			flex-wrap: wrap;
 			flex-direction: row;
@@ -1168,20 +1170,24 @@ body {
 				}
 
 				.edit-mode {
-					.widget-control > *, .paragraph-control > * {
+					.widget-control > *,
+					.paragraph-control > * {
 						width: 0px;
 						visibility: hidden;
 						opacity: 0;
 						transition: visibility 0s, opacity 0.5s ease-in-out;
 					}
 
-					.link-item, .quick-list-item, .see-all {
+					.link-item,
+					.quick-list-item,
+					.see-all {
 						pointer-events: none;
 					}
 				}
 
 				&:hover {
-					.widget-control > *, .new-block-button {
+					.widget-control > *,
+					.new-block-button {
 						width: auto;
 						visibility: visible;
 						opacity: 1;
@@ -1201,7 +1207,8 @@ body {
 							opacity: 1;
 						}
 
-						&.shortcut, &.header {
+						&.shortcut,
+						&.header {
 							background-color: var(--fg-color) !important;
 						}
 
@@ -1237,7 +1244,7 @@ body {
 					height: 100%;
 					padding: 7px;
 
-					&> div {
+					& > div {
 						height: 100%;
 					}
 
@@ -1248,7 +1255,7 @@ body {
 					.resizer {
 						width: 10px;
 						height: 100%;
-						position:absolute;
+						position: absolute;
 						right: 0;
 						bottom: 0;
 						cursor: col-resize;
@@ -1383,7 +1390,6 @@ body {
 		}
 
 		.ce-toolbar {
-
 			&.ce-toolbar--opened {
 				display: none;
 			}
@@ -1403,7 +1409,8 @@ body {
 			.ce-settings {
 				width: fit-content;
 
-				.ce-settings__button, .cdx-settings-button {
+				.ce-settings__button,
+				.cdx-settings-button {
 					color: #707684;
 
 					.icon {
@@ -1415,19 +1422,20 @@ body {
 					color: #388ae5;
 				}
 
-				.cdx-settings-button.disabled{
+				.cdx-settings-button.disabled {
 					pointer-events: none;
-					opacity: .5
+					opacity: 0.5;
 				}
-				.cdx-settings-sidebar{
+				.cdx-settings-sidebar {
 					position: absolute;
 					right: 100%;
-					top:0;
+					top: 0;
 					background: #fff;
 					width: 108px;
 					height: 145px;
-					box-shadow: 0 3px 15px -3px rgba(13,20,33,.13);
-					border-radius: 0 4px 4px 0;z-index: 0;
+					box-shadow: 0 3px 15px -3px rgba(13, 20, 33, 0.13);
+					border-radius: 0 4px 4px 0;
+					z-index: 0;
 				}
 			}
 
@@ -1436,7 +1444,8 @@ body {
 			}
 		}
 
-		.ce-inline-tool, .ce-inline-toolbar__dropdown {
+		.ce-inline-tool,
+		.ce-inline-toolbar__dropdown {
 			.icon {
 				fill: currentColor;
 			}
@@ -1456,11 +1465,10 @@ body {
 				max-width: 760px;
 			}
 		}
-
 	}
 
 	.cdx-marker {
-		background: rgba(245,235,111,0.29);
+		background: rgba(245, 235, 111, 0.29);
 		padding: 3px 0;
 	}
 
@@ -1515,5 +1523,4 @@ body {
 	.dropdown-item-icon {
 		margin-right: 5px;
 	}
-
 }
diff --git a/frappe/public/scss/desk/driver.scss b/frappe/public/scss/desk/driver.scss
index 2f4e6e647d..9a2636e4a8 100644
--- a/frappe/public/scss/desk/driver.scss
+++ b/frappe/public/scss/desk/driver.scss
@@ -70,11 +70,11 @@ input.driver-highlighted-element {
 .driver-fix-stacking {
 	z-index: auto !important;
 	position: unset !important;
-	opacity: 1.0 !important;
+	opacity: 1 !important;
 	transform: none !important;
 	filter: none !important;
 	perspective: none !important;
 	transform-style: flat !important;
 	transform-box: border-box !important;
 	will-change: unset !important;
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/file_view.scss b/frappe/public/scss/desk/file_view.scss
index 29e49ab65e..6c38033331 100644
--- a/frappe/public/scss/desk/file_view.scss
+++ b/frappe/public/scss/desk/file_view.scss
@@ -1,5 +1,4 @@
 .file-view {
-
 	.no-result {
 		.breadcrumbs {
 			font-size: var(--text-md);
@@ -13,7 +12,6 @@
 	}
 
 	.file-grid-view {
-
 		.file-grid.folders {
 			margin-bottom: var(--margin-2xl);
 		}
@@ -59,7 +57,6 @@
 							display: block;
 						}
 					}
-
 				}
 
 				.file-footer {
@@ -101,7 +98,6 @@
 			}
 
 			.file-wrapper:hover {
-
 				.list-row-checkbox {
 					&:before {
 						display: block;
@@ -119,9 +115,8 @@
 			}
 
 			.file-wrapper.cut {
-				border: 2px dashed var(--dark-border-color)
+				border: 2px dashed var(--dark-border-color);
 			}
 		}
 	}
-
 }
diff --git a/frappe/public/scss/desk/filters.scss b/frappe/public/scss/desk/filters.scss
index 75d1a6e396..53e9dfea5a 100644
--- a/frappe/public/scss/desk/filters.scss
+++ b/frappe/public/scss/desk/filters.scss
@@ -40,7 +40,6 @@
 				}
 			}
 		}
-
 	}
 
 	.empty-filters {
@@ -104,4 +103,3 @@
 		}
 	}
 }
-
diff --git a/frappe/public/scss/desk/form.scss b/frappe/public/scss/desk/form.scss
index 298a244057..fc22da5dec 100644
--- a/frappe/public/scss/desk/form.scss
+++ b/frappe/public/scss/desk/form.scss
@@ -1,5 +1,5 @@
 @import "../common/form.scss";
-@import '~cropperjs/dist/cropper.min';
+@import "~cropperjs/dist/cropper.min";
 
 .tooltip-content {
 	position: absolute;
@@ -19,11 +19,10 @@
 
 .show-tooltip .frappe-control:hover .tooltip-content {
 	opacity: 1;
-	transform: translate3d(0,0,0);
+	transform: translate3d(0, 0, 0);
 	pointer-events: auto;
 }
 
-
 .std-form-layout > .form-layout > .form-page {
 	border-radius: var(--border-radius-md);
 	border: 1px solid var(--border-color);
@@ -31,7 +30,8 @@
 	background-color: var(--card-bg);
 }
 
-.form-section, .form-dashboard-section {
+.form-section,
+.form-dashboard-section {
 	margin: 0px;
 
 	.form-section-description {
@@ -132,7 +132,8 @@
 	text-align: right;
 }
 
-.form-control:disabled, .form-control[readonly] {
+.form-control:disabled,
+.form-control[readonly] {
 	color: var(--text-muted);
 	cursor: not-allowed;
 }
@@ -336,7 +337,6 @@
 	}
 }
 [data-theme="dark"] .form-message {
-
 	&.blue {
 		@include form-message-background("blue", "dark");
 	}
diff --git a/frappe/public/scss/desk/frappe_datatable.scss b/frappe/public/scss/desk/frappe_datatable.scss
index a515c51b41..138ca29c8a 100644
--- a/frappe/public/scss/desk/frappe_datatable.scss
+++ b/frappe/public/scss/desk/frappe_datatable.scss
@@ -26,7 +26,8 @@
 		background-color: var(--bg-color) !important;
 	}
 
-	.frappe-control, .form-control {
+	.frappe-control,
+	.form-control {
 		margin: 0;
 		border-radius: 0px;
 		border: none;
@@ -48,7 +49,6 @@
 	}
 
 	.dt-header {
-
 		.dt-row[data-is-filter] {
 			display: flex !important;
 		}
@@ -150,7 +150,8 @@
 		font-feature-settings: "tnum";
 	}
 
-	.dt-cell__content--header-0, .dt-cell__content--col-0 {
+	.dt-cell__content--header-0,
+	.dt-cell__content--col-0 {
 		padding: 0.5rem;
 	}
 
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index b2612b148e..a87c325c85 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -11,8 +11,8 @@ body {
 	background-color: var(--bg-color);
 
 	&.full-width {
-	@include media-breakpoint-up(md) {
-		.container {
+		@include media-breakpoint-up(md) {
+			.container {
 				width: 90%;
 				max-width: 100%;
 			}
@@ -96,22 +96,49 @@ pre {
 	white-space: pre-wrap;
 }
 
-.col-xs-1 { @extend .col-1; }
-.col-xs-2 { @extend .col-2; }
-.col-xs-3 { @extend .col-3; }
-.col-xs-4 { @extend .col-4; }
-.col-xs-5 { @extend .col-5; }
-.col-xs-6 { @extend .col-6; }
-.col-xs-7 { @extend .col-7; }
-.col-xs-8 { @extend .col-8; }
-.col-xs-9 { @extend .col-9; }
-.col-xs-10 { @extend .col-10; }
-.col-xs-11 { @extend .col-11; }
-.col-xs-12 { @extend .col-12; }
+.col-xs-1 {
+	@extend .col-1;
+}
+.col-xs-2 {
+	@extend .col-2;
+}
+.col-xs-3 {
+	@extend .col-3;
+}
+.col-xs-4 {
+	@extend .col-4;
+}
+.col-xs-5 {
+	@extend .col-5;
+}
+.col-xs-6 {
+	@extend .col-6;
+}
+.col-xs-7 {
+	@extend .col-7;
+}
+.col-xs-8 {
+	@extend .col-8;
+}
+.col-xs-9 {
+	@extend .col-9;
+}
+.col-xs-10 {
+	@extend .col-10;
+}
+.col-xs-11 {
+	@extend .col-11;
+}
+.col-xs-12 {
+	@extend .col-12;
+}
 
-.btn-default { @extend .btn-light; }
+.btn-default {
+	@extend .btn-light;
+}
 
-.hidden-xs, .hidden-sm {
+.hidden-xs,
+.hidden-sm {
 	@include media-breakpoint-between(xs, sm) {
 		display: none !important;
 	}
@@ -173,7 +200,6 @@ img {
 	}
 }
 
-
 .hide-control {
 	@extend .d-none;
 }
@@ -186,20 +212,36 @@ img {
 	text-decoration: none !important;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
 	color: var(--text-color);
-	margin-bottom: var(--margin-md)
+	margin-bottom: var(--margin-md);
 }
 // override default gray-900 from bootstrap to support dark mode.
-h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
 	color: var(--heading-color);
 }
-h1, h2, h3 {
+h1,
+h2,
+h3 {
 	font-weight: bold;
 }
 
 p {
-	margin-bottom: var(--margin-sm)
+	margin-bottom: var(--margin-sm);
 }
 
 .small {
@@ -234,7 +276,8 @@ h2 {
 	}
 }
 
-.btn-group-sm > .btn, .btn-sm {
+.btn-group-sm > .btn,
+.btn-sm {
 	padding: var(--padding-xs) var(--padding-sm);
 	@include get_textstyle("base", "regular");
 }
@@ -308,7 +351,7 @@ select.input-xs {
 
 .dropdown-item {
 	border-radius: 8px;
-	padding : var(--dropdown-padding) !important;
+	padding: var(--dropdown-padding) !important;
 }
 
 .dropdown-menu {
@@ -338,7 +381,8 @@ select.input-xs {
 		--icon-stroke: #{$component-active-color};
 	}
 
-	.divider, .dropdown-divider {
+	.divider,
+	.dropdown-divider {
 		margin: 4px;
 	}
 
@@ -346,7 +390,8 @@ select.input-xs {
 		&.dropdown-divider {
 			display: none;
 		}
-		.divider, .dropdown-divider {
+		.divider,
+		.dropdown-divider {
 			display: none;
 		}
 	}
@@ -392,7 +437,8 @@ kbd {
 
 .table {
 	color: var(--text-color);
-	th, td {
+	th,
+	td {
 		padding: 0.5rem;
 	}
 }
@@ -499,7 +545,8 @@ kbd {
 		right: auto !important;
 		left: 5px;
 	}
-	input, textarea {
+	input,
+	textarea {
 		direction: rtl !important;
 	}
 
@@ -518,7 +565,6 @@ img.no-image {
 	background-color: var(--bg-light-gray);
 }
 
-
 @media (min-width: 768px) {
 	.video-modal .modal-dialog {
 		width: 700px;
diff --git a/frappe/public/scss/desk/global_search.scss b/frappe/public/scss/desk/global_search.scss
index db92be3f9b..7799d4757e 100644
--- a/frappe/public/scss/desk/global_search.scss
+++ b/frappe/public/scss/desk/global_search.scss
@@ -100,7 +100,9 @@
 				}
 			}
 
-			.list-more, .section-more, .results-status {
+			.list-more,
+			.section-more,
+			.results-status {
 				padding: var(--padding-sm) 0;
 				color: var(--primary);
 				@include get_textstyle("sm", "regular");
diff --git a/frappe/public/scss/desk/image_view.scss b/frappe/public/scss/desk/image_view.scss
index 063af27923..26339953a2 100644
--- a/frappe/public/scss/desk/image_view.scss
+++ b/frappe/public/scss/desk/image_view.scss
@@ -1,6 +1,5 @@
 // Image view
 .image-view {
-
 	.frappe-list {
 		padding: var(--padding-xs);
 	}
@@ -24,7 +23,6 @@
 				margin-left: var(--margin-xs);
 			}
 		}
-
 	}
 
 	.image-view-container {
@@ -200,15 +198,13 @@
 			// 	opacity: 0.5
 			// }
 		}
-
 	}
 }
 
-
 .pswp--svg .pswp__button,
 .pswp--svg .pswp__button--arrow--left:before,
 .pswp--svg .pswp__button--arrow--right:before {
-	background-image: url('/assets/frappe/images/default-skin.svg') !important;
+	background-image: url("/assets/frappe/images/default-skin.svg") !important;
 }
 .pswp--svg .pswp__button--arrow--left,
 .pswp--svg .pswp__button--arrow--right {
@@ -234,8 +230,7 @@
 	cursor: pointer;
 	border: 1px solid var(--border-color);
 
-
 	img {
 		max-height: 100%;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/kanban.scss b/frappe/public/scss/desk/kanban.scss
index af0e30e453..a711a6f820 100644
--- a/frappe/public/scss/desk/kanban.scss
+++ b/frappe/public/scss/desk/kanban.scss
@@ -160,10 +160,7 @@
 					@include flex(flex, space-between, null, column);
 					margin-top: var(--margin-sm);
 					min-height: 100px;
-					@include card(
-						$padding: 0,
-						$background-color: var(--kanban-card-bg)
-					);
+					@include card($padding: 0, $background-color: var(--kanban-card-bg));
 					box-shadow: none;
 					border: 1px solid var(--border-color);
 
@@ -207,7 +204,6 @@
 						}
 
 						.kanban-card-meta {
-
 							.list-comment-count {
 								width: 30px;
 							}
diff --git a/frappe/public/scss/desk/link_preview.scss b/frappe/public/scss/desk/link_preview.scss
index 4c5dbcad14..ca29c5ad37 100644
--- a/frappe/public/scss/desk/link_preview.scss
+++ b/frappe/public/scss/desk/link_preview.scss
@@ -40,7 +40,6 @@
 				overflow-wrap: break-word;
 
 				.preview-field {
-
 					.preview-label {
 						padding-bottom: 4px;
 					}
diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss
index 8b4961fa46..8f6c5ea282 100644
--- a/frappe/public/scss/desk/list.scss
+++ b/frappe/public/scss/desk/list.scss
@@ -4,7 +4,9 @@
 // }
 
 .freeze-row {
-	.level-left, .level-right, .list-row-col {
+	.level-left,
+	.level-right,
+	.list-row-col {
 		height: 100%;
 		width: 100%;
 	}
@@ -41,7 +43,8 @@
 }
 
 .no-list-sidebar {
-	&[data-page-route^="List/"], [data-page-route^="List/"]{
+	&[data-page-route^="List/"],
+	[data-page-route^="List/"] {
 		@include media-breakpoint-up(md) {
 			.layout-side-section {
 				display: none;
@@ -67,7 +70,6 @@
 			background-color: var(--highlight-color);
 		}
 	}
-
 }
 
 .list-row {
@@ -117,7 +119,7 @@
 		justify-content: flex-end;
 		// min-width: 120px;
 
-		&> span {
+		& > span {
 			display: inline-block;
 		}
 
@@ -135,7 +137,8 @@
 			white-space: nowrap;
 		}
 
-		.list-assignments, .list-actions {
+		.list-assignments,
+		.list-actions {
 			margin-right: var(--margin-md);
 		}
 	}
@@ -146,7 +149,8 @@
 		}
 	}
 
-	.select-like, .file-select {
+	.select-like,
+	.file-select {
 		padding-left: 11px;
 	}
 }
@@ -155,10 +159,10 @@
 	@extend .list-row;
 	cursor: default;
 	background-color: var(--subtle-fg);
-    height: 30px;
+	height: 30px;
 	padding: 8px, 10px, 8px, 0px;
 	margin: 8px 5px;
-    border-radius: var(--border-radius-md);
+	border-radius: var(--border-radius-md);
 
 	.list-check-all {
 		margin-left: 11px;
@@ -201,7 +205,8 @@ $level-margin-right: 8px;
 	}
 }
 
-.list-paging-area, .footnote-area {
+.list-paging-area,
+.footnote-area {
 	border-top: 1px solid var(--border-color);
 
 	.btn-group {
@@ -214,7 +219,7 @@ $level-margin-right: 8px;
 			background-color: var(--bg-color);
 			color: var(--text-color);
 			font-weight: var(--weight-medium);
-	   }
+		}
 	}
 	.btn-paging {
 		background-color: var(--gray-50);
@@ -222,7 +227,8 @@ $level-margin-right: 8px;
 }
 
 .frappe-card {
-	.list-paging-area, .footnote-area {
+	.list-paging-area,
+	.footnote-area {
 		padding: var(--padding-md);
 	}
 }
@@ -239,7 +245,8 @@ $level-margin-right: 8px;
 	margin-bottom: 1px;
 }
 
-input.list-check-all, input.list-row-checkbox {
+input.list-check-all,
+input.list-row-checkbox {
 	margin-top: 0px;
 	margin-bottom: 0px;
 	--checkbox-right-margin: calc(var(--checkbox-size) / 2 + #{$level-margin-right});
@@ -315,12 +322,13 @@ input.list-check-all {
 		cursor: auto;
 	}
 
-	input[type=checkbox] {
+	input[type="checkbox"] {
 		margin: 0;
 		margin-right: 5px;
 	}
 
-	.liked-by, .liked-by-filter-button {
+	.liked-by,
+	.liked-by-filter-button {
 		display: inline-block;
 		width: 20px;
 		margin-right: 10px;
@@ -343,7 +351,8 @@ input.list-check-all {
 		margin-right: 5px;
 		min-width: 110px;
 
-		.list-row-modified, .avatar-small {
+		.list-row-modified,
+		.avatar-small {
 			margin-right: 10px;
 		}
 	}
@@ -425,7 +434,6 @@ input.list-check-all {
 			margin: var(--margin-xs) 0 var(--margin-xs) var(--margin-xs);
 		}
 	}
-
 }
 
 .restricted-button {
@@ -441,10 +449,7 @@ input.list-check-all {
 	}
 
 	&.btn {
-		@include button-variant(
-			$background: $light-yellow,
-			$border: darken($light-yellow, 5%),
-		);
+		@include button-variant($background: $light-yellow, $border: darken($light-yellow, 5%));
 		box-shadow: none;
 	}
 }
diff --git a/frappe/public/scss/desk/mobile.scss b/frappe/public/scss/desk/mobile.scss
index a44468e2f3..a965feca65 100644
--- a/frappe/public/scss/desk/mobile.scss
+++ b/frappe/public/scss/desk/mobile.scss
@@ -17,7 +17,7 @@ body {
 	}
 }
 
-@media(max-width: 991px) {
+@media (max-width: 991px) {
 	.intro-area,
 	.footnote-area {
 		padding: 15px;
@@ -45,7 +45,6 @@ body {
 			margin-right: var(--margin-xs);
 		}
 
-
 		.page-head .sub-heading {
 			font-size: var(--text-xs);
 		}
@@ -80,7 +79,7 @@ body {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 
-		@media(max-width: 480px) {
+		@media (max-width: 480px) {
 			li > a {
 				width: 100px;
 			}
@@ -98,7 +97,7 @@ body {
 	}
 
 	// select all except last 2
-	#navbar-breadcrumbs li:not(:nth-last-child(-n+1)) {
+	#navbar-breadcrumbs li:not(:nth-last-child(-n + 1)) {
 		display: none;
 	}
 
@@ -161,9 +160,8 @@ body {
 	// }
 }
 
-@media(max-width: 767px) {
-
-	body[data-route^="Form"]{
+@media (max-width: 767px) {
+	body[data-route^="Form"] {
 		.page-title {
 			.title-text {
 				@include get_textstyle("lg", "regular");
@@ -256,14 +254,13 @@ body {
 				top: 4px;
 
 				// bigger indicators for list
-				.indicator::before, .indicator::after {
+				.indicator::before,
+				.indicator::after {
 					height: 12px;
 					width: 12px;
 					border-radius: 12px;
 				}
-
 			}
-
 		}
 
 		.list-row-right.no-right-column {
@@ -272,7 +269,6 @@ body {
 			right: 10px;
 			left: -10px;
 			width: 100%;
-
 		}
 	}
 
@@ -346,12 +342,13 @@ body {
 						margin-right: 0;
 					}
 				}
-				.comment-header{
+				.comment-header {
 					padding: 7px 10px;
 					.links-active {
 						padding-right: 10px;
 					}
-					.reply-link, .reply-link-all {
+					.reply-link,
+					.reply-link-all {
 						margin-left: 0;
 					}
 					.asset-details {
@@ -364,10 +361,10 @@ body {
 				.reply {
 					padding: 10px;
 				}
-				.commented-on-small{
+				.commented-on-small {
 					display: inline-block;
 				}
-				.commented-on-small{
+				.commented-on-small {
 					display: inline-block;
 				}
 			}
diff --git a/frappe/public/scss/desk/module.scss b/frappe/public/scss/desk/module.scss
index 1ff8b85874..f87485c789 100644
--- a/frappe/public/scss/desk/module.scss
+++ b/frappe/public/scss/desk/module.scss
@@ -30,7 +30,7 @@
 	padding: 30px;
 }
 
-@media(min-width: map-get($grid-breakpoints, "md")) {
+@media (min-width: map-get($grid-breakpoints, "md")) {
 	.module-section:nth-child(even) {
 		background-color: var(--bg-color);
 	}
@@ -40,21 +40,21 @@
 	}
 }
 
-@media(max-width: map-get($grid-breakpoints, "lg")) {
+@media (max-width: map-get($grid-breakpoints, "lg")) {
 	.module-body {
 		margin-top: 15px;
 		border-top: 1px solid $border-color;
 	}
 }
 
-@media(max-width: map-get($grid-breakpoints, "md")) {
+@media (max-width: map-get($grid-breakpoints, "md")) {
 	.module-body {
 		margin-top: 0;
 		border-top: 1px solid transparent;
 	}
 }
 
-@media(max-width: map-get($grid-breakpoints, "md")) {
+@media (max-width: map-get($grid-breakpoints, "md")) {
 	.module-section {
 		border: none;
 	}
@@ -72,7 +72,6 @@
 	}
 }
 
-
 .module-item {
 	margin: 0px;
 	padding: 7px;
@@ -96,7 +95,8 @@
 	margin-left: 3px;
 }
 
-.module-item:hover, .module-item:focus {
+.module-item:hover,
+.module-item:focus {
 	background-color: var(--bg-color);
 }
 
@@ -126,14 +126,12 @@
 	width: 0px;
 }
 
-@media(max-width: map-get($grid-breakpoints, "md")) {
-
+@media (max-width: map-get($grid-breakpoints, "md")) {
 	body[data-route^="Module"] {
 		.page-title {
 			width: 100%;
 		}
 
-
 		.page-actions {
 			display: none !important;
 		}
diff --git a/frappe/public/scss/desk/notification.scss b/frappe/public/scss/desk/notification.scss
index 11dd6217d2..4affdb5f87 100644
--- a/frappe/public/scss/desk/notification.scss
+++ b/frappe/public/scss/desk/notification.scss
@@ -64,7 +64,8 @@
 		max-height: 450px;
 		overflow-y: auto;
 
-		.panel-events, .panel-notifications {
+		.panel-events,
+		.panel-notifications {
 			@include size(100%, null);
 		}
 
@@ -134,14 +135,13 @@
 
 .recent-item.notification-item {
 	padding: 10px 10px 10px 0px;
-	margin:  10px 10px 10px 10px;
+	margin: 10px 10px 10px 10px;
 	justify-content: space-between;
 
 	&.unread {
-
 		&:hover {
 			.mark-as-read {
-				flex-shrink : 0;
+				flex-shrink: 0;
 				align-self: center;
 				justify-self: end;
 				width: 8px;
@@ -161,12 +161,12 @@
 		gap: 10px;
 
 		&::before {
-			content: '';
+			content: "";
 			display: inline-block;
 			@include size(6px, 6px);
 			min-width: 6px;
 			margin-top: 16px;
-    		margin-left: 2px;
+			margin-left: 2px;
 			border-radius: 10px;
 		}
 
@@ -177,7 +177,7 @@
 
 	b {
 		font-weight: 500;
-		color: var(--text-light)
+		color: var(--text-light);
 	}
 
 	.notification-timestamp {
@@ -293,7 +293,7 @@
 
 	&:hover {
 		text-decoration: none;
-		color: var(--text-color)
+		color: var(--text-color);
 	}
 }
 
@@ -315,4 +315,4 @@
 			margin-left: 5px;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/page.scss b/frappe/public/scss/desk/page.scss
index 4f5b02bc32..223fc2ce8e 100644
--- a/frappe/public/scss/desk/page.scss
+++ b/frappe/public/scss/desk/page.scss
@@ -10,7 +10,8 @@
 			display: none;
 		}
 
-		.sidebar-toggle-icon, .sidebar-toggle-placeholder {
+		.sidebar-toggle-icon,
+		.sidebar-toggle-placeholder {
 			@include transition(all 0.5s ease-in-out);
 		}
 
@@ -42,7 +43,6 @@
 	}
 }
 
-
 .page-container {
 	background-color: var(--bg-color);
 
@@ -60,7 +60,8 @@
 		border-radius: var(--border-radius);
 		line-height: 1;
 		padding: 4px 8px;
-		&, & .hidden-xs {
+		&,
+		& .hidden-xs {
 			display: inline-flex;
 			align-items: center;
 			gap: 6px;
@@ -69,7 +70,8 @@
 	.btn:not(.icon-btn) {
 		padding: 4px 8px;
 	}
-	.btn-primary, .btn-secondary {
+	.btn-primary,
+	.btn-secondary {
 		min-width: 40px;
 	}
 	.custom-btn-group {
@@ -90,7 +92,7 @@
 	overflow: hidden;
 	@include card($padding: 0px);
 	box-shadow: none;
-	border: 1px solid var(--border-color)
+	border: 1px solid var(--border-color);
 }
 
 .page-head {
@@ -144,7 +146,9 @@
 	}
 }
 
-.menu-btn-group, .custom-btn-group, .page-icon-group {
+.menu-btn-group,
+.custom-btn-group,
+.page-icon-group {
 	display: flex;
 	.dropdown-menu {
 		width: max-content;
@@ -159,10 +163,13 @@
 	}
 }
 .layout-main-section {
-	.frappe-list, .report-wrapper {
+	.frappe-list,
+	.report-wrapper {
 		padding: 0 var(--padding-xs);
 
-		.result, .no-result, .freeze {
+		.result,
+		.no-result,
+		.freeze {
 			min-height: #{"calc(100vh - 284px)"};
 		}
 	}
diff --git a/frappe/public/scss/desk/plyr.scss b/frappe/public/scss/desk/plyr.scss
index acc8c851f9..04aef940ae 100644
--- a/frappe/public/scss/desk/plyr.scss
+++ b/frappe/public/scss/desk/plyr.scss
@@ -8,4 +8,4 @@
 	.plyr__poster {
 		filter: brightness(0.7);
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/print_preview.scss b/frappe/public/scss/desk/print_preview.scss
index ed85f8b933..5d7f88585b 100644
--- a/frappe/public/scss/desk/print_preview.scss
+++ b/frappe/public/scss/desk/print_preview.scss
@@ -45,7 +45,6 @@
 .layout-side-section.print-preview-sidebar {
 	padding-right: var(--padding-md);
 
-
 	.label-area {
 		white-space: nowrap;
 	}
@@ -73,7 +72,6 @@
 	}
 
 	.skeleton-body {
-
 		.skeleton-table {
 			width: 100%;
 
@@ -144,9 +142,8 @@
 		background-position: -100px;
 	}
 
-	50%, 100% {
+	50%,
+	100% {
 		background-position: 500px;
 	}
 }
-
-
diff --git a/frappe/public/scss/desk/report.scss b/frappe/public/scss/desk/report.scss
index 1f6ae9fae1..d465ec6044 100644
--- a/frappe/public/scss/desk/report.scss
+++ b/frappe/public/scss/desk/report.scss
@@ -29,7 +29,7 @@
 
 .grid-report .show-zero {
 	margin: 10px;
-	display: none
+	display: none;
 }
 
 // column picker
@@ -183,9 +183,15 @@
 		color: var(--text-color);
 		font-feature-settings: "tnum";
 
-		&.green { color: var(--green-500); }
-		&.red { color: var(--red-500); }
-		&.blue { color: var(--blue-500); }
+		&.green {
+			color: var(--green-500);
+		}
+		&.red {
+			color: var(--red-500);
+		}
+		&.blue {
+			color: var(--blue-500);
+		}
 
 		// SIZE & SPACING
 		padding-top: 12px;
@@ -214,9 +220,15 @@
 			border-radius: var(--border-radius-sm, 4px);
 			border: 1px solid var(--dark-border-color);
 
-			&.green { color: var(--green-500); }
-			&.red { color: var(--red-500); }
-			&.blue { color: var(--blue-500); }
+			&.green {
+				color: var(--green-500);
+			}
+			&.red {
+				color: var(--red-500);
+			}
+			&.blue {
+				color: var(--blue-500);
+			}
 
 			// SIZE & SPACING
 			min-width: 24px;
diff --git a/frappe/public/scss/desk/role_editor.scss b/frappe/public/scss/desk/role_editor.scss
index c4b8c3a270..aba9d9aba8 100644
--- a/frappe/public/scss/desk/role_editor.scss
+++ b/frappe/public/scss/desk/role_editor.scss
@@ -4,7 +4,8 @@ table.user-perm {
 	overflow-x: scroll;
 	-webkit-overflow-scrolling: touch;
 	-ms-overflow-style: -ms-autohiding-scrollbar;
-	tr td, tr th {
+	tr td,
+	tr th {
 		padding: 5px;
 		border-bottom: 1px solid var(--border-color);
 		min-width: 30px;
@@ -12,7 +13,7 @@ table.user-perm {
 			text-align: center;
 		}
 	}
-	--icon-stroke: var(--text-muted)
+	--icon-stroke: var(--text-muted);
 }
 
 .frappe-control {
@@ -28,7 +29,7 @@ table.user-perm {
 		label {
 			position: relative;
 		}
-		input[type=checkbox] {
+		input[type="checkbox"] {
 			margin-left: 0;
 		}
 	}
@@ -46,4 +47,4 @@ table.user-perm {
 .module-block-list .checkbox {
 	margin-bottom: var(--margin-xs);
 	font-size: var(--text-md);
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss
index 018c61d669..8a0f56e645 100644
--- a/frappe/public/scss/desk/sidebar.scss
+++ b/frappe/public/scss/desk/sidebar.scss
@@ -44,7 +44,6 @@ body[data-route^="Module"] .main-menu {
 		.es-icon {
 			margin: 0px 6px;
 		}
-
 	}
 	&.user-actions {
 		margin-bottom: 15px;
@@ -84,7 +83,6 @@ body[data-route^="Module"] .main-menu {
 	}
 
 	.form-tags {
-
 		.form-tag-row:not(:last-child) {
 			margin-bottom: var(--margin-sm);
 		}
@@ -256,7 +254,6 @@ body[data-route^="Module"] .main-menu {
 				background-color: var(--border-color);
 				opacity: 0.7;
 			}
-
 		}
 
 		@media (max-width: 767px) {
@@ -383,7 +380,7 @@ body[data-route^="Module"] .main-menu {
 			display: none;
 		}
 
-		input:not([data-fieldtype='Check']) {
+		input:not([data-fieldtype="Check"]) {
 			background: var(--control-bg-on-gray);
 		}
 
@@ -403,7 +400,8 @@ body[data-route^="Module"] .main-menu {
 	margin-bottom: 10px;
 }
 
-.attachment-row, .form-tag-row {
+.attachment-row,
+.form-tag-row {
 	margin-bottom: 3px;
 	max-width: 100%;
 	.data-pill {
@@ -446,13 +444,14 @@ body[data-route^="Module"] .main-menu {
 	margin-left: var(--margin-md);
 	margin-bottom: var(--margin-sm);
 	color: var(--text-light);
-
 }
 .form-assignments {
 	margin-top: 12px;
 }
-.form-assignments, .form-shared {
-	.assignments, .shares {
+.form-assignments,
+.form-shared {
+	.assignments,
+	.shares {
 		margin: var(--margin-xs) 0px;
 	}
 }
@@ -568,4 +567,4 @@ body[data-route^="Module"] .main-menu {
 
 .shared-user {
 	margin-bottom: 10px;
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/tags.scss b/frappe/public/scss/desk/tags.scss
index ba29ddd624..895206f140 100644
--- a/frappe/public/scss/desk/tags.scss
+++ b/frappe/public/scss/desk/tags.scss
@@ -13,4 +13,4 @@
 	.tag-pill {
 		background-color: var(--gray-900);
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/theme_switcher.scss b/frappe/public/scss/desk/theme_switcher.scss
index 0b14f0a9cd..ae95b9354c 100644
--- a/frappe/public/scss/desk/theme_switcher.scss
+++ b/frappe/public/scss/desk/theme_switcher.scss
@@ -112,4 +112,4 @@
 		background: var(--gray-900);
 		position: absolute;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/timeline.scss b/frappe/public/scss/desk/timeline.scss
index 2cbfcb2234..1191cbfb08 100644
--- a/frappe/public/scss/desk/timeline.scss
+++ b/frappe/public/scss/desk/timeline.scss
@@ -9,7 +9,9 @@ $threshold: 34;
 	// doing this will prevent cssnano from converting 0px to 0
 	// clamp requires value unit to be valid
 	--zero-px: 0px;
-	top: unquote("clamp(var(--zero-px), 50% - #{$badge-size}/2, max(var(--zero-px), (#{$threshold}px - (50% - #{$badge-size}/2)) * #{$threshold}))");
+	top: unquote(
+		"clamp(var(--zero-px), 50% - #{$badge-size}/2, max(var(--zero-px), (#{$threshold}px - (50% - #{$badge-size}/2)) * #{$threshold}))"
+	);
 	left: calc(-1 * (#{$badge-size} / 2));
 	background-color: var(--timeline-badge-bg);
 	@extend .center-content;
@@ -24,7 +26,7 @@ $threshold: 34;
 		padding-left: calc(var(--padding-sm) + var(--timeline-item-icon-size) / 2);
 	}
 	&:before {
-		content: ' ';
+		content: " ";
 		top: 90px; // TODO: get top and bottom programmatically
 		left: calc(var(--timeline-item-icon-size) / 2);
 		position: absolute;
@@ -36,18 +38,20 @@ $threshold: 34;
 		left: calc(-1.25 * var(--timeline-item-left-margin) / 2);
 		background: var(--bg-color);
 		&:before {
-			content: ' ';
+			content: " ";
 			background: var(--timeline-badge-color);
 			border-radius: 50%;
 			height: 4px;
 			width: 4px;
 		}
 	}
-	.activity-title, .timeline-actions {
+	.activity-title,
+	.timeline-actions {
 		margin-bottom: 0 !important;
 		display: flex;
 		align-items: center;
-		.show-all-activity, .timeline-item {
+		.show-all-activity,
+		.timeline-item {
 			margin-bottom: 0;
 		}
 		min-height: 60px;
@@ -106,9 +110,9 @@ $threshold: 34;
 					margin: 0 var(--margin-sm);
 				}
 
-				.content{
+				.content {
 					padding-left: 42px;
-					.mention{
+					.mention {
 						background-color: transparent;
 						border: none;
 						font-weight: var(--weight-semibold);
@@ -120,7 +124,6 @@ $threshold: 34;
 		.timeline-badge {
 			@include timeline-badge(var(--timeline-item-icon-size));
 			left: calc(-1 * var(--timeline-item-left-margin));
-
 		}
 		.timeline-load-more {
 			margin-left: calc(var(--timeline-item-left-margin) + var(--padding-sm));
@@ -133,7 +136,7 @@ $threshold: 34;
 				overflow: auto;
 				max-height: 500px;
 				&::before {
-					content: '';
+					content: "";
 					display: block;
 					height: 1px;
 					margin-top: -10px;
@@ -157,7 +160,8 @@ $threshold: 34;
 				background-color: transparent;
 				--icon-stroke: var(--text-muted);
 			}
-			.action-btn, .custom-actions {
+			.action-btn,
+			.custom-actions {
 				@include get_textstyle("sm", "regular");
 			}
 
diff --git a/frappe/public/scss/desk/toast.scss b/frappe/public/scss/desk/toast.scss
index a70f6d3948..695c7118b7 100644
--- a/frappe/public/scss/desk/toast.scss
+++ b/frappe/public/scss/desk/toast.scss
@@ -97,7 +97,7 @@
 			color: var(--text-light);
 
 			&:hover {
-				color: var(--text-color)
+				color: var(--text-color);
 			}
 
 			&:last-child {
@@ -138,7 +138,9 @@
 }
 
 @keyframes backOutRight {
-	0% { opacity: 1; }
+	0% {
+		opacity: 1;
+	}
 
 	100% {
 		-webkit-transform: translateX(2000px);
diff --git a/frappe/public/scss/desk/tree.scss b/frappe/public/scss/desk/tree.scss
index a0cffaa203..5e9a2fe3c1 100644
--- a/frappe/public/scss/desk/tree.scss
+++ b/frappe/public/scss/desk/tree.scss
@@ -107,7 +107,8 @@
 
 // decoration
 // .tree, .tree-node {
-.tree.with-skeleton, .tree.with-skeleton .tree-node {
+.tree.with-skeleton,
+.tree.with-skeleton .tree-node {
 	position: relative;
 
 	// &.opened::before, &:last-child::after {
@@ -158,4 +159,4 @@
 .tree-node.hover-active {
 	background-color: var(--fg-hover-color);
 	border-radius: var(--border-radius-sm);
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/typography.scss b/frappe/public/scss/desk/typography.scss
index 833523a67e..a642cc852a 100644
--- a/frappe/public/scss/desk/typography.scss
+++ b/frappe/public/scss/desk/typography.scss
@@ -25,4 +25,4 @@ $h2-font-size: 1.5rem;
 $h3-font-size: 1.25rem;
 $h4-font-size: 1.125rem;
 $h5-font-size: 0.875rem;
-$h6-font-size: 0.6875rem;
\ No newline at end of file
+$h6-font-size: 0.6875rem;
diff --git a/frappe/public/scss/desk/user_profile.scss b/frappe/public/scss/desk/user_profile.scss
index 0a15a077f0..2fbb3e14a8 100644
--- a/frappe/public/scss/desk/user_profile.scss
+++ b/frappe/public/scss/desk/user_profile.scss
@@ -97,4 +97,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/desk/variables.scss b/frappe/public/scss/desk/variables.scss
index 552161787f..fdd5a4dbb7 100644
--- a/frappe/public/scss/desk/variables.scss
+++ b/frappe/public/scss/desk/variables.scss
@@ -4,11 +4,11 @@
 @import "../espresso/shadows";
 @import "../espresso/borders";
 
-html, body {
+html,
+body {
 	font-size: 16px;
 }
 
-
 $border-color: var(--border-color);
 $code-color: var(--purple-600);
 
@@ -19,15 +19,15 @@ $border-radius-lg: var(--border-radius-lg);
 $nav-divider-margin-y: 4px;
 
 $container-max-widths: (
-  sm: 540px,
-  md: 840px,
-  lg: 1090px,
-  xl: 1290px
+	sm: 540px,
+	md: 840px,
+	lg: 1090px,
+	xl: 1290px,
 );
 
 $theme-colors: (
-  "primary": $primary,
-  "danger": $danger
+	"primary": $primary,
+	"danger": $danger,
 );
 
 $navbar-height: 48px;
@@ -77,7 +77,7 @@ $btn-font-weight: 400 !default;
 $btn-active-box-shadow: var(--shadow-inset);
 
 // mark
-$mark-bg: #FDF9AF;
+$mark-bg: #fdf9af;
 $mark-padding: 0;
 
 // transitions
@@ -88,7 +88,7 @@ $input-transition: none;
 $enable-shadows: true;
 $popover-border-radius: 12px;
 $popover-bg: var(--popover-bg);
-$popover-box-shadow: 	var(--shadow-2xl);
+$popover-box-shadow: var(--shadow-2xl);
 $popover-body-padding-x: var(--padding-md);
 $popover-body-padding-y: var(--padding-md);
 $popover-border-color: transparent;
@@ -119,17 +119,17 @@ $dropdown-item-padding-x: var(--padding-sm);
 
 $spacer: 14px;
 $grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  2xl: 1440px
+	xs: 0,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1200px,
+	2xl: 1440px,
 ) !default;
 
-@import 'typography';
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@import "typography";
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
-@import 'css_variables';
-@import 'dark';
+@import "css_variables";
+@import "dark";
diff --git a/frappe/public/scss/desk/version.scss b/frappe/public/scss/desk/version.scss
index ddcf1f07a5..e0ddb3d4c2 100644
--- a/frappe/public/scss/desk/version.scss
+++ b/frappe/public/scss/desk/version.scss
@@ -22,7 +22,8 @@
 
 [data-theme="dark"] {
 	.version-info {
-		.danger, .success {
+		.danger,
+		.success {
 			color: var(--gray-900);
 
 			td {
@@ -30,4 +31,4 @@
 			}
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/element/checkbox.scss b/frappe/public/scss/element/checkbox.scss
index 864d64e25f..628667f902 100644
--- a/frappe/public/scss/element/checkbox.scss
+++ b/frappe/public/scss/element/checkbox.scss
@@ -37,14 +37,16 @@ input[type="checkbox"] {
 		box-shadow: var(--checkbox-focus-shadow);
 	}
 
-	&.disabled-deselected, &:disabled {
+	&.disabled-deselected,
+	&:disabled {
 		background-color: var(--disabled-control-bg);
 		box-shadow: inset 0px 1px 7px rgba(0, 0, 0, 0.1);
 		border: 0.5px solid var(--dark-border-color);
 		pointer-events: none;
 	}
 
-	&.disabled-selected, &:disabled:checked {
+	&.disabled-selected,
+	&:disabled:checked {
 		background-color: var(--gray-600);
 		background-image: $check-icon;
 		background-size: 57%;
@@ -60,17 +62,17 @@ input[type="checkbox"] {
 	display: inline-block;
 	width: 26px;
 	height: 16px;
-  }
+}
 
-  /* Hide default HTML checkbox */
-  .switch input {
+/* Hide default HTML checkbox */
+.switch input {
 	opacity: 0;
 	width: 0;
 	height: 0;
-  }
+}
 
-  /* The slider */
-  .slider {
+/* The slider */
+.slider {
 	position: absolute;
 	cursor: pointer;
 	top: 0;
@@ -78,11 +80,11 @@ input[type="checkbox"] {
 	right: 0;
 	bottom: 0;
 	background-color: var(--switch-bg);
-	-webkit-transition: .4s;
-	transition: .4s;
-  }
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+}
 
-  .slider:before {
+.slider:before {
 	position: absolute;
 	content: "";
 	height: 12px;
@@ -90,33 +92,33 @@ input[type="checkbox"] {
 	left: 2px;
 	bottom: 2px;
 	background-color: var(--neutral);
-	-webkit-transition: .4s;
-	transition: .4s;
-  }
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+}
 
-  input:checked + .slider {
+input:checked + .slider {
 	background-color: var(--invert-neutral);
-  }
+}
 
-  input:focus + .slider {
-	box-shadow: var(--focus-default)
-  }
+input:focus + .slider {
+	box-shadow: var(--focus-default);
+}
 
-  input:checked + .slider:before {
+input:checked + .slider:before {
 	-webkit-transform: translateX(10px);
 	-ms-transform: translateX(10px);
 	transform: translateX(10px);
-  }
+}
 
-  /* Rounded sliders */
-  .slider.round {
+/* Rounded sliders */
+.slider.round {
 	border-radius: 34px;
-  }
+}
 
-  label.switch {
+label.switch {
 	margin-bottom: 0;
-  }
+}
 
-  .slider.round:before {
+.slider.round:before {
 	border-radius: 50%;
-  }
\ No newline at end of file
+}
diff --git a/frappe/public/scss/element/radio.scss b/frappe/public/scss/element/radio.scss
index b471832a9b..43fa98c550 100644
--- a/frappe/public/scss/element/radio.scss
+++ b/frappe/public/scss/element/radio.scss
@@ -24,7 +24,7 @@ input[type="radio"] {
 		width: var(--checkbox-size);
 		height: var(--checkbox-size);
 		position: absolute;
-		content: ' ';
+		content: " ";
 		border: 1px solid var(--gray-400);
 		border-radius: 16px;
 	}
@@ -34,4 +34,4 @@ input[type="radio"] {
 		border-radius: 16px;
 		box-shadow: inset 0 0 0 2px white;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/email.bundle.scss b/frappe/public/scss/email.bundle.scss
index 9b58c130a2..ef274f023f 100644
--- a/frappe/public/scss/email.bundle.scss
+++ b/frappe/public/scss/email.bundle.scss
@@ -1,30 +1,31 @@
 $white: #fff;
-$gray-900: #1F272E;
-$gray-800: #333C44;
-$gray-700: #505A62;
+$gray-900: #1f272e;
+$gray-800: #333c44;
+$gray-700: #505a62;
 $gray-600: #687178;
-$gray-500: #98A1A9;
-$gray-400: #C0C6CC;
-$gray-300: #DCE0E3;
-$gray-200: #EBEEF0;
-$gray-100: #F4F5F6;
-$gray-50: #F9FAFA;
-$primary: #2490EF;
+$gray-500: #98a1a9;
+$gray-400: #c0c6cc;
+$gray-300: #dce0e3;
+$gray-200: #ebeef0;
+$gray-100: #f4f5f6;
+$gray-50: #f9fafa;
+$primary: #2490ef;
 
-$blue-500: #2D95F0;
+$blue-500: #2d95f0;
 
 $text-color: $gray-900;
 $border-color: $gray-100;
 $dark-border-color: $gray-200;
-$font-stack: "-apple-system", "BlinkMacSystemFont","Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+$font-stack: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+	"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 $text-muted: $gray-600;
 $text-extra-muted: $gray-400;
 $border-radius: 6px;
 $border-radius-sm: 4px;
 $border-radius-lg: 8px;
 
-$orange-bg: #FFEAE1;
-$orange-color: #CB5A2A;
+$orange-bg: #ffeae1;
+$orange-color: #cb5a2a;
 
 body {
 	line-height: 1.5;
@@ -86,7 +87,9 @@ hr {
 	}
 }
 
-.email-header, .email-body, .email-footer {
+.email-header,
+.email-body,
+.email-footer {
 	width: 100% !important;
 	min-width: 100% !important;
 }
@@ -195,7 +198,8 @@ hr {
 	width: 100%;
 	border-collapse: collapse;
 
-	td, th {
+	td,
+	th {
 		padding: 8px;
 		line-height: 1.42857143;
 		vertical-align: top;
@@ -219,7 +223,8 @@ hr {
 	&.table-bordered {
 		border: 1px solid $border-color;
 
-		td, th {
+		td,
+		th {
 			border: 1px solid $border-color;
 		}
 	}
@@ -340,4 +345,4 @@ blockquote {
 	p {
 		margin: 5px 0;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/espresso/_borders.scss b/frappe/public/scss/espresso/_borders.scss
index 98390f9a08..24ce61186e 100644
--- a/frappe/public/scss/espresso/_borders.scss
+++ b/frappe/public/scss/espresso/_borders.scss
@@ -1,10 +1,10 @@
 :root {
-    --border-radius-tiny: 4px;
-    --border-radius-sm: 8px;
-    --border-radius: 8px;
-    --border-radius-md: 10px;
-    --border-radius-lg: 12px;
-    --border-radius-xl: 16px;
-    --border-radius-2xl: 20px;
-    --border-radius-full: 999px;
-}
\ No newline at end of file
+	--border-radius-tiny: 4px;
+	--border-radius-sm: 8px;
+	--border-radius: 8px;
+	--border-radius-md: 10px;
+	--border-radius-lg: 12px;
+	--border-radius-xl: 16px;
+	--border-radius-2xl: 20px;
+	--border-radius-full: 999px;
+}
diff --git a/frappe/public/scss/espresso/_colors.scss b/frappe/public/scss/espresso/_colors.scss
index 23c706fa77..564b7b33db 100644
--- a/frappe/public/scss/espresso/_colors.scss
+++ b/frappe/public/scss/espresso/_colors.scss
@@ -1,5 +1,6 @@
 // colors
-$color_list: gray, blue, green, red, orange, amber, yellow, cyan, teal, violet, pink, purple, white-overlay, black-overlay;
+$color_list: gray, blue, green, red, orange, amber, yellow, cyan, teal, violet, pink, purple,
+	white-overlay, black-overlay;
 
 $gray-50: #f8f8f8;
 $gray-100: #f3f3f3;
@@ -16,176 +17,189 @@ $primary: $gray-900;
 $primary-light: lighten($primary, 80%) !default;
 
 $danger: #e03636;
-$light-yellow: #FEF4E2;
+$light-yellow: #fef4e2;
 
 :root {
-    --neutral-white: #ffffff;
-    --neutral-black: #000000;
-    --neutral: var(--neutral-white);
-    --invert-neutral: var(--neutral-black);
+	--neutral-white: #ffffff;
+	--neutral-black: #000000;
+	--neutral: var(--neutral-white);
+	--invert-neutral: var(--neutral-black);
 
-    --gray-50: #f8f8f8;
-    --gray-100: #f3f3f3;
-    --gray-200: #ededed;
-    --gray-300: #e2e2e2;
-    --gray-400: #c7c7c7;
-    --gray-500: #999999;
-    --gray-600: #7c7c7c;
-    --gray-700: #525252;
-    --gray-800: #383838;
-    --gray-900: #171717;
+	--gray-50: #f8f8f8;
+	--gray-100: #f3f3f3;
+	--gray-200: #ededed;
+	--gray-300: #e2e2e2;
+	--gray-400: #c7c7c7;
+	--gray-500: #999999;
+	--gray-600: #7c7c7c;
+	--gray-700: #525252;
+	--gray-800: #383838;
+	--gray-900: #171717;
 
-    --blue-50: #f7fbfd;
-    --blue-100: #edf6fd;
-    --blue-200: #e3f1fd;
-    --blue-300: #c9e7fc;
-    --blue-400: #70b6f0;
-    --blue-500: #0289f7;
-    --blue-600: #007be0;
-    --blue-700: #0070cc;
-    --blue-800: #005ca3;
-    --blue-900: #004880;
+	--blue-50: #f7fbfd;
+	--blue-100: #edf6fd;
+	--blue-200: #e3f1fd;
+	--blue-300: #c9e7fc;
+	--blue-400: #70b6f0;
+	--blue-500: #0289f7;
+	--blue-600: #007be0;
+	--blue-700: #0070cc;
+	--blue-800: #005ca3;
+	--blue-900: #004880;
 
-    --green-50: #f3fcf5;
-    --green-100: #e4f5e9;
-    --green-200: #daf0e1;
-    --green-300: #cae5d4;
-    --green-400: #b6dec5;
-    --green-500: #59ba8b;
-    --green-600: #30a66d;
-    --green-700: #278f5e;
-    --green-800: #16794c;
-    --green-900: #173b2c;
+	--green-50: #f3fcf5;
+	--green-100: #e4f5e9;
+	--green-200: #daf0e1;
+	--green-300: #cae5d4;
+	--green-400: #b6dec5;
+	--green-500: #59ba8b;
+	--green-600: #30a66d;
+	--green-700: #278f5e;
+	--green-800: #16794c;
+	--green-900: #173b2c;
 
-    --red-50: #fff7f7;
-    --red-100: #fff0f0;
-    --red-200: #fcd7d7;
-    --red-300: #f9c6c6;
-    --red-400: #eb9091;
-    --red-500: #e03636;
-    --red-600: #cc2929;
-    --red-700: #b52a2a;
-    --red-800: #941f1f;
-    --red-900: #6b1515;
+	--red-50: #fff7f7;
+	--red-100: #fff0f0;
+	--red-200: #fcd7d7;
+	--red-300: #f9c6c6;
+	--red-400: #eb9091;
+	--red-500: #e03636;
+	--red-600: #cc2929;
+	--red-700: #b52a2a;
+	--red-800: #941f1f;
+	--red-900: #6b1515;
 
-    --orange-50: #fff9f5;
-    --orange-100: #fff1e7;
-    --orange-200: #fce6d5;
-    --orange-300: #f7d6bd;
-    --orange-400: #f0b58b;
-    --orange-500: #e86c13;
-    --orange-600: #d45a08;
-    --orange-700: #bd3e0c;
-    --orange-800: #9e3513;
-    --orange-900: #6b2711;
+	--orange-50: #fff9f5;
+	--orange-100: #fff1e7;
+	--orange-200: #fce6d5;
+	--orange-300: #f7d6bd;
+	--orange-400: #f0b58b;
+	--orange-500: #e86c13;
+	--orange-600: #d45a08;
+	--orange-700: #bd3e0c;
+	--orange-800: #9e3513;
+	--orange-900: #6b2711;
 
-    --amber-50: #fdfaed;
-    --amber-100: #fcf3cf;
-    --amber-200: #f7e28d;
-    --amber-300: #f5d261;
-    --amber-400: #f2be3a;
-    --amber-500: #e79913;
-    --amber-600: #db7706;
-    --amber-700: #b35309;
-    --amber-800: #91400d;
-    --amber-900: #763813;
+	--amber-50: #fdfaed;
+	--amber-100: #fcf3cf;
+	--amber-200: #f7e28d;
+	--amber-300: #f5d261;
+	--amber-400: #f2be3a;
+	--amber-500: #e79913;
+	--amber-600: #db7706;
+	--amber-700: #b35309;
+	--amber-800: #91400d;
+	--amber-900: #763813;
 
-    --yellow-50: #fffcef;
-    --yellow-100: #fff7d3;
-    --yellow-200: #f7e9a8;
-    --yellow-300: #f5e171;
-    --yellow-400: #f2d14b;
-    --yellow-500: #edba13;
-    --yellow-600: #d1930d;
-    --yellow-700: #ab6e05;
-    --yellow-800: #8c5600;
-    --yellow-900: #733f12;
+	--yellow-50: #fffcef;
+	--yellow-100: #fff7d3;
+	--yellow-200: #f7e9a8;
+	--yellow-300: #f5e171;
+	--yellow-400: #f2d14b;
+	--yellow-500: #edba13;
+	--yellow-600: #d1930d;
+	--yellow-700: #ab6e05;
+	--yellow-800: #8c5600;
+	--yellow-900: #733f12;
 
-    --cyan-50: #f5fbfc;
-    --cyan-100: #e0f8ff;
-    --cyan-200: #b3ecfc;
-    --cyan-300: #94e6ff;
-    --cyan-400: #6bd3f2;
-    --cyan-500: #34bae3;
-    --cyan-600: #32a4c7;
-    --cyan-700: #267a94;
-    --cyan-800: #125c73;
-    --cyan-900: #164759;
+	--cyan-50: #f5fbfc;
+	--cyan-100: #e0f8ff;
+	--cyan-200: #b3ecfc;
+	--cyan-300: #94e6ff;
+	--cyan-400: #6bd3f2;
+	--cyan-500: #34bae3;
+	--cyan-600: #32a4c7;
+	--cyan-700: #267a94;
+	--cyan-800: #125c73;
+	--cyan-900: #164759;
 
-    --teal-50: #f0fdfa;
-    --teal-100: #e6f7f4;
-    --teal-200: #bae8e1;
-    --teal-300: #97ded4;
-    --teal-400: #73d1c4;
-    --teal-500: #36baad;
-    --teal-600: #0b9e92;
-    --teal-700: #0f736b;
-    --teal-800: #115c57;
-    --teal-900: #114541;
+	--teal-50: #f0fdfa;
+	--teal-100: #e6f7f4;
+	--teal-200: #bae8e1;
+	--teal-300: #97ded4;
+	--teal-400: #73d1c4;
+	--teal-500: #36baad;
+	--teal-600: #0b9e92;
+	--teal-700: #0f736b;
+	--teal-800: #115c57;
+	--teal-900: #114541;
 
-    --violet-50: #fbfaff;
-    --violet-100: #f5f2ff;
-    --violet-200: #e5e1fa;
-    --violet-300: #dad2f7;
-    --violet-400: #bdb1f0;
-    --violet-500: #6846e3;
-    --violet-600: #5f46c7;
-    --violet-700: #4f3da1;
-    --violet-800: #392980;
-    --violet-900: #251959;
+	--violet-50: #fbfaff;
+	--violet-100: #f5f2ff;
+	--violet-200: #e5e1fa;
+	--violet-300: #dad2f7;
+	--violet-400: #bdb1f0;
+	--violet-500: #6846e3;
+	--violet-600: #5f46c7;
+	--violet-700: #4f3da1;
+	--violet-800: #392980;
+	--violet-900: #251959;
 
-    --pink-50: #fff7fc;
-    --pink-100: #feeef8;
-    --pink-200: #f8e2f0;
-    --pink-300: #f2d4e6;
-    --pink-400: #e9c4da;
-    --pink-500: #e34aa6;
-    --pink-600: #cf3a96;
-    --pink-700: #9c2671;
-    --pink-800: #801458;
-    --pink-900: #570f3e;
+	--pink-50: #fff7fc;
+	--pink-100: #feeef8;
+	--pink-200: #f8e2f0;
+	--pink-300: #f2d4e6;
+	--pink-400: #e9c4da;
+	--pink-500: #e34aa6;
+	--pink-600: #cf3a96;
+	--pink-700: #9c2671;
+	--pink-800: #801458;
+	--pink-900: #570f3e;
 
-    --purple-50: #fdfaff;
-    --purple-100: #f9f0ff;
-    --purple-200: #f1e5fa;
-    --purple-300: #e9d6f5;
-    --purple-400: #d6c1e6;
-    --purple-500: #9c45e3;
-    --purple-600: #8642c2;
-    --purple-700: #6e399d;
-    --purple-800: #5c2f83;
-    --purple-900: #401863;
+	--purple-50: #fdfaff;
+	--purple-100: #f9f0ff;
+	--purple-200: #f1e5fa;
+	--purple-300: #e9d6f5;
+	--purple-400: #d6c1e6;
+	--purple-500: #9c45e3;
+	--purple-600: #8642c2;
+	--purple-700: #6e399d;
+	--purple-800: #5c2f83;
+	--purple-900: #401863;
 
-    // overlays
-    --white-overlay-50: rgba(255,255,255,0.090);
-    --white-overlay-100: rgba(255,255,255,0.180);
-    --white-overlay-200: rgba(255,255,255,0.270);
-    --white-overlay-300: rgba(255,255,255,0.360);
-    --white-overlay-400: rgba(255,255,255,0.450);
-    --white-overlay-500: rgba(255,255,255,0.540);
-    --white-overlay-600: rgba(255,255,255,0.630);
-    --white-overlay-700: rgba(255,255,255,0.720);
-    --white-overlay-800: rgba(255,255,255,0.810);
-    --white-overlay-900: rgba(255,255,255,0.900);
+	// overlays
+	--white-overlay-50: rgba(255, 255, 255, 0.09);
+	--white-overlay-100: rgba(255, 255, 255, 0.18);
+	--white-overlay-200: rgba(255, 255, 255, 0.27);
+	--white-overlay-300: rgba(255, 255, 255, 0.36);
+	--white-overlay-400: rgba(255, 255, 255, 0.45);
+	--white-overlay-500: rgba(255, 255, 255, 0.54);
+	--white-overlay-600: rgba(255, 255, 255, 0.63);
+	--white-overlay-700: rgba(255, 255, 255, 0.72);
+	--white-overlay-800: rgba(255, 255, 255, 0.81);
+	--white-overlay-900: rgba(255, 255, 255, 0.9);
 
-    --black-overlay-50: rgba(0,0,0,0.090);
-    --black-overlay-100: rgba(0,0,0,0.180);
-    --black-overlay-200: rgba(0,0,0,0.270);
-    --black-overlay-300: rgba(0,0,0,0.360);
-    --black-overlay-400: rgba(0,0,0,0.450);
-    --black-overlay-500: rgba(0,0,0,0.540);
-    --black-overlay-600: rgba(0,0,0,0.630);
-    --black-overlay-700: rgba(0,0,0,0.720);
-    --black-overlay-800: rgba(0,0,0,0.810);
-    --black-overlay-900: rgba(0,0,0,0.900);
-
-    // gradients
-    --linear-black: linear-gradient(to bottom, rgba(46,46,46,0.180) 0%,rgba(36,36,36,0.140) 100%);
-    --linear-blue: linear-gradient(to bottom, rgba(17,142,245,0.067) 0%,rgba(7,127,247,0.029) 100%);
-    --angular-white: conic-gradient(rgba(255,255,255,1) 72.38%,rgba(255,255,255,1) 99.87%);
-    --angular-black: conic-gradient(rgba(56,56,56,0.220) 72.38%,rgba(56,56,56,0.220) 99.87%);
-    --angular-green: conic-gradient(rgba(23,117,75,0.092) 72.38%,rgba(23,117,75,0.092) 99.87%);
-    --angular-red: conic-gradient(rgba(205,41,41,0.804) 72.38%,rgba(205,41,41,0.804) 99.87%);
-    --angular-blue: conic-gradient(rgba(0,110,219,0.000) 72.38%,rgba(0,110,219,0.000) 99.87%);
+	--black-overlay-50: rgba(0, 0, 0, 0.09);
+	--black-overlay-100: rgba(0, 0, 0, 0.18);
+	--black-overlay-200: rgba(0, 0, 0, 0.27);
+	--black-overlay-300: rgba(0, 0, 0, 0.36);
+	--black-overlay-400: rgba(0, 0, 0, 0.45);
+	--black-overlay-500: rgba(0, 0, 0, 0.54);
+	--black-overlay-600: rgba(0, 0, 0, 0.63);
+	--black-overlay-700: rgba(0, 0, 0, 0.72);
+	--black-overlay-800: rgba(0, 0, 0, 0.81);
+	--black-overlay-900: rgba(0, 0, 0, 0.9);
 
+	// gradients
+	--linear-black: linear-gradient(
+		to bottom,
+		rgba(46, 46, 46, 0.18) 0%,
+		rgba(36, 36, 36, 0.14) 100%
+	);
+	--linear-blue: linear-gradient(
+		to bottom,
+		rgba(17, 142, 245, 0.067) 0%,
+		rgba(7, 127, 247, 0.029) 100%
+	);
+	--angular-white: conic-gradient(rgba(255, 255, 255, 1) 72.38%, rgba(255, 255, 255, 1) 99.87%);
+	--angular-black: conic-gradient(rgba(56, 56, 56, 0.22) 72.38%, rgba(56, 56, 56, 0.22) 99.87%);
+	--angular-green: conic-gradient(
+		rgba(23, 117, 75, 0.092) 72.38%,
+		rgba(23, 117, 75, 0.092) 99.87%
+	);
+	--angular-red: conic-gradient(
+		rgba(205, 41, 41, 0.804) 72.38%,
+		rgba(205, 41, 41, 0.804) 99.87%
+	);
+	--angular-blue: conic-gradient(rgba(0, 110, 219, 0) 72.38%, rgba(0, 110, 219, 0) 99.87%);
 }
diff --git a/frappe/public/scss/espresso/_shadows.scss b/frappe/public/scss/espresso/_shadows.scss
index 93fcef1769..e53ee56916 100644
--- a/frappe/public/scss/espresso/_shadows.scss
+++ b/frappe/public/scss/espresso/_shadows.scss
@@ -1,12 +1,16 @@
-:root{
+:root {
 	// Drop Shadows
-	--shadow-xs:  rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
-	--shadow-sm: 0px 1px 2px rgba(0,0,0,0.100);
-	--shadow-base: 0px 0px 1px rgba(0,0,0,0.450), 0px 1px 2px rgba(0,0,0,0.100);
-	--shadow-md: 0px 0px 1px rgba(0,0,0,0.120), 0px 0.5px 2px rgba(0,0,0,0.150), 0px 2px 3px rgba(0,0,0,0.160);
-	--shadow-lg: 0px 0px 1px rgba(0,0,0,0.350), 0px 6px 8px -4px rgba(0,0,0,0.100);
-	--shadow-xl: 0px 0px 1px rgba(0,0,0,0.190), 0px 1px 2px rgba(0,0,0,0.070), 0px 6px 15px -5px rgba(0,0,0,0.110);
-	--shadow-2xl: 0px 0px 1px rgba(0,0,0,0.200), 0px 1px 3px rgba(0,0,0,0.050), 0px 10px 24px -3px rgba(0,0,0,0.100);
+	--shadow-xs: rgba(0, 0, 0, 0.05) 0px 0.5px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px,
+		rgba(0, 0, 0, 0.05) 0px 2px 4px 0px;
+	--shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.1);
+	--shadow-base: 0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1);
+	--shadow-md: 0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15),
+		0px 2px 3px rgba(0, 0, 0, 0.16);
+	--shadow-lg: 0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1);
+	--shadow-xl: 0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07),
+		0px 6px 15px -5px rgba(0, 0, 0, 0.11);
+	--shadow-2xl: 0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05),
+		0px 10px 24px -3px rgba(0, 0, 0, 0.1);
 
 	// Input Focus Rings
 	--focus-default: 0px 0px 0px 2px #c9c9c9;
@@ -17,8 +21,9 @@
 
 	// Custom Shadows
 	--custom-status: 0px 0px 0px 1.5px #ffffff;
-	--custom-shadow-sm: 0px 1px 4px rgba(0,0,0,0.100);
+	--custom-shadow-sm: 0px 1px 4px rgba(0, 0, 0, 0.1);
 
 	// Revisit and remove if unused
-	--drop-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0), 0px 2px 4px rgba(0, 0, 0, 0.05);
-}
\ No newline at end of file
+	--drop-shadow: 0px 0.5px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0),
+		0px 2px 4px rgba(0, 0, 0, 0.05);
+}
diff --git a/frappe/public/scss/espresso/_spacing.scss b/frappe/public/scss/espresso/_spacing.scss
index 66d5af34fa..c4281f7279 100644
--- a/frappe/public/scss/espresso/_spacing.scss
+++ b/frappe/public/scss/espresso/_spacing.scss
@@ -1,8 +1,8 @@
 :root {
-    // Input Padding
-    --input-padding: 6px 8px;
-    --dropdown-padding: 4px 8px;
-    --grid-padding: 10px 8px;
-    --disabled-input-padding: 3px 8px;
-    --number-card-padding: 8px 8px 8px 12px;
-}
\ No newline at end of file
+	// Input Padding
+	--input-padding: 6px 8px;
+	--dropdown-padding: 4px 8px;
+	--grid-padding: 10px 8px;
+	--disabled-input-padding: 3px 8px;
+	--number-card-padding: 8px 8px 8px 12px;
+}
diff --git a/frappe/public/scss/espresso/_typography.scss b/frappe/public/scss/espresso/_typography.scss
index 20d83c5c84..979dfb4c1c 100644
--- a/frappe/public/scss/espresso/_typography.scss
+++ b/frappe/public/scss/espresso/_typography.scss
@@ -1,5 +1,6 @@
 :root {
-	--font-stack: "Inter V", "Inter", "-apple-system", "BlinkMacSystemFont","Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+	--font-stack: "Inter V", "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto",
+		"Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 	// font size
 	--text-tiny: 11px;
 	--text-2xs: 12px;
@@ -41,7 +42,6 @@
 	--para-line-height-2xl: 148%;
 	--para-line-height-3xl: 140%;
 
-
 	// font color
 	--heading-color: var(--gray-900);
 	--text-neutral: var(--gray-900);
@@ -85,15 +85,15 @@ $letter-space-heavy: (
 	$heavy: map-get($letter-space-heavy, $name);
 	@if ((index($weight-list, $heavy) or length($weight-list)) <= index($weight-list, $weight)) {
 		@return map-get($letter-space, #{$name}-heavy);
-	};
+	}
 	@return map-get($letter-space, $name);
-};
+}
 
-@mixin get_textstyle($name, $weight){
+@mixin get_textstyle($name, $weight) {
 	font-size: var(--text-#{$name});
 	font-weight: var(--weight-#{$weight});
 	letter-spacing: get_letterspacing($name, $weight);
-	@if $name == 'tiny' {
+	@if $name == "tiny" {
 		text-transform: "uppercase";
-	};
-}
\ No newline at end of file
+	}
+}
diff --git a/frappe/public/scss/login.bundle.scss b/frappe/public/scss/login.bundle.scss
index 64c8efbc08..66834017f4 100644
--- a/frappe/public/scss/login.bundle.scss
+++ b/frappe/public/scss/login.bundle.scss
@@ -214,4 +214,4 @@ body {
 		letter-spacing: 0.01em;
 		color: var(--text-color);
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/print.bundle.scss b/frappe/public/scss/print.bundle.scss
index 208f475f07..a69bcbe4b4 100644
--- a/frappe/public/scss/print.bundle.scss
+++ b/frappe/public/scss/print.bundle.scss
@@ -45,4 +45,4 @@
 	* {
 		overflow-wrap: anywhere;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/website.bundle.scss b/frappe/public/scss/website.bundle.scss
index bcbb6f3c6a..d014926fc1 100644
--- a/frappe/public/scss/website.bundle.scss
+++ b/frappe/public/scss/website.bundle.scss
@@ -1 +1 @@
-@import './website/index';
\ No newline at end of file
+@import "./website/index";
diff --git a/frappe/public/scss/website/base.scss b/frappe/public/scss/website/base.scss
index 62a7ea87e9..29740f5f17 100644
--- a/frappe/public/scss/website/base.scss
+++ b/frappe/public/scss/website/base.scss
@@ -25,7 +25,10 @@ img {
 	height: auto;
 }
 
-h1, h2, h3, h4 {
+h1,
+h2,
+h3,
+h4 {
 	font-weight: 600;
 }
 
diff --git a/frappe/public/scss/website/blog.scss b/frappe/public/scss/website/blog.scss
index 611390f7ca..15cabf9192 100644
--- a/frappe/public/scss/website/blog.scss
+++ b/frappe/public/scss/website/blog.scss
@@ -24,7 +24,7 @@
 	width: 100%;
 
 	.card {
-		border: 1px solid var(--border-color)
+		border: 1px solid var(--border-color);
 	}
 
 	.card-body {
@@ -114,7 +114,6 @@
 		margin-bottom: 5rem;
 	}
 
-
 	.feedback-item svg {
 		vertical-align: sub;
 	}
diff --git a/frappe/public/scss/website/css_variables.scss b/frappe/public/scss/website/css_variables.scss
index 2b9be4eb8b..59f090a22f 100644
--- a/frappe/public/scss/website/css_variables.scss
+++ b/frappe/public/scss/website/css_variables.scss
@@ -1,4 +1,4 @@
-@import '../common/css_variables.scss';
+@import "../common/css_variables.scss";
 
 // Deprecated but remove after all use is removed as well.
 :root {
diff --git a/frappe/public/scss/website/doc.scss b/frappe/public/scss/website/doc.scss
index 8cc12e7e55..cc58087465 100644
--- a/frappe/public/scss/website/doc.scss
+++ b/frappe/public/scss/website/doc.scss
@@ -178,7 +178,7 @@ $navbar-height-lg: 4.5rem;
 		&::before {
 			height: 6rem;
 			margin-top: -6rem;
-			content: '';
+			content: "";
 			display: block;
 			visibility: hidden;
 		}
diff --git a/frappe/public/scss/website/error-state.scss b/frappe/public/scss/website/error-state.scss
index 98a97c2f71..ce4a6a0d8c 100644
--- a/frappe/public/scss/website/error-state.scss
+++ b/frappe/public/scss/website/error-state.scss
@@ -7,7 +7,7 @@
 		margin: var(--margin-2xl) auto;
 
 		@include media-breakpoint-down(sm) {
-			width: 80%
+			width: 80%;
 		}
 	}
 
@@ -15,5 +15,3 @@
 		@include get_textstyle("base", "regular");
 	}
 }
-
-
diff --git a/frappe/public/scss/website/footer.scss b/frappe/public/scss/website/footer.scss
index a40a9bfc2e..e112b1cbea 100644
--- a/frappe/public/scss/website/footer.scss
+++ b/frappe/public/scss/website/footer.scss
@@ -17,7 +17,8 @@
 	margin-top: 0.5rem;
 }
 
-.footer-link, .footer-child-item a {
+.footer-link,
+.footer-child-item a {
 	font-size: $font-size-sm;
 	font-weight: 500;
 	color: $gray-700;
@@ -34,7 +35,8 @@
 	}
 }
 
-.footer-col-left, .footer-col-right {
+.footer-col-left,
+.footer-col-right {
 	padding-top: 0.8rem;
 	padding-bottom: 1rem;
 	line-height: 2;
@@ -91,7 +93,8 @@
 .footer-logo-extension {
 	.input-group {
 		justify-content: flex-end;
-		#footer-subscribe-email, #footer-subscribe-button {
+		#footer-subscribe-email,
+		#footer-subscribe-button {
 			max-width: 300px;
 			border: 1px solid var(--dark-border-color);
 			box-shadow: none;
diff --git a/frappe/public/scss/website/index.scss b/frappe/public/scss/website/index.scss
index 1614ece989..65093c8ed2 100644
--- a/frappe/public/scss/website/index.scss
+++ b/frappe/public/scss/website/index.scss
@@ -1,8 +1,8 @@
-@import 'variables';
+@import "variables";
 @import "../../css/fonts/inter/inter.scss";
-@import '../common/quill';
-@import '~bootstrap/scss/bootstrap';
-@import '~cropperjs/dist/cropper.min';
+@import "../common/quill";
+@import "~bootstrap/scss/bootstrap";
+@import "~cropperjs/dist/cropper.min";
 @import "../common/mixins";
 @import "../common/global";
 @import "../common/icons";
@@ -15,23 +15,22 @@
 @import "../common/indicator";
 @import "../common/controls";
 @import "../common/awesomeplete";
-@import 'base';
-@import 'multilevel_dropdown';
-@import 'website_image';
-@import 'website_avatar';
-@import 'web_form';
-@import 'page_builder';
-@import 'blog';
-@import 'markdown';
-@import 'sidebar';
-@import 'portal';
-@import 'search';
-@import 'doc';
-@import 'navbar';
-@import 'footer';
-@import 'error-state';
-@import 'my_account';
-
+@import "base";
+@import "multilevel_dropdown";
+@import "website_image";
+@import "website_avatar";
+@import "web_form";
+@import "page_builder";
+@import "blog";
+@import "markdown";
+@import "sidebar";
+@import "portal";
+@import "search";
+@import "doc";
+@import "navbar";
+@import "footer";
+@import "error-state";
+@import "my_account";
 
 .ql-editor.read-mode {
 	padding: 0;
@@ -88,7 +87,7 @@
 
 .dropdown-item {
 	border-radius: $dropdown-border-radius;
-	padding : var(--dropdown-padding) !important;
+	padding: var(--dropdown-padding) !important;
 }
 
 .dropdown-item:active {
@@ -134,7 +133,7 @@
 
 .breadcrumb-container {
 	margin-top: 1rem;
-	padding-top:  0.25rem;
+	padding-top: 0.25rem;
 }
 
 .breadcrumb {
@@ -144,8 +143,7 @@
 }
 
 .breadcrumb-item {
-	+ .breadcrumb-item
-	 {
+	+ .breadcrumb-item {
 		font-size: $font-size-sm;
 		&::before {
 			content: #{"/*!rtl:var(--left-arrow-svg);*/"}var(--right-arrow-svg);
@@ -153,7 +151,7 @@
 		}
 	}
 	a {
-		color: var(--text-color)
+		color: var(--text-color);
 	}
 
 	li.disabled {
@@ -168,7 +166,8 @@ a.card {
 	text-decoration: none;
 }
 
-a.card-link, a.card-link:hover {
+a.card-link,
+a.card-link:hover {
 	text-decoration: underline;
 }
 
@@ -197,7 +196,7 @@ a.card-link, a.card-link:hover {
 }
 
 .indicator-pill {
-	font-size: var(--font-size-xs)
+	font-size: var(--font-size-xs);
 }
 
 h4.modal-title {
@@ -252,7 +251,6 @@ h5.modal-title {
 
 .btn-xs {
 	@extend .btn-sm;
-
 }
 
 .hidden-xs {
diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss
index 451b281833..0b88664e89 100644
--- a/frappe/public/scss/website/markdown.scss
+++ b/frappe/public/scss/website/markdown.scss
@@ -1,4 +1,3 @@
-
 .section-markdown > .from-markdown {
 	max-width: 50rem;
 	margin: auto;
@@ -31,7 +30,8 @@
 		list-style: decimal;
 	}
 
-	p, li {
+	p,
+	li {
 		line-height: 1.7;
 
 		@include media-breakpoint-up(sm) {
@@ -48,7 +48,8 @@
 		padding-bottom: 1px;
 	}
 
-	li > ul, li > ol {
+	li > ul,
+	li > ol {
 		padding-left: 1.5rem;
 	}
 
@@ -78,7 +79,8 @@
 		margin-bottom: 0;
 	}
 
-	b, strong {
+	b,
+	strong {
 		color: $gray-800;
 		font-weight: 600;
 	}
diff --git a/frappe/public/scss/website/multilevel_dropdown.scss b/frappe/public/scss/website/multilevel_dropdown.scss
index 928718a109..adaeb6a68a 100644
--- a/frappe/public/scss/website/multilevel_dropdown.scss
+++ b/frappe/public/scss/website/multilevel_dropdown.scss
@@ -6,12 +6,12 @@
 	transform: rotate(-90deg);
 	position: absolute;
 	right: 6px;
-	top: .8em;
+	top: 0.8em;
 }
 
 .dropdown-submenu .dropdown-menu {
 	top: 0;
 	left: 100%;
-	margin-left: .1rem;
-	margin-right: .1rem;
+	margin-left: 0.1rem;
+	margin-right: 0.1rem;
 }
diff --git a/frappe/public/scss/website/my_account.scss b/frappe/public/scss/website/my_account.scss
index 0bff99d9dc..91ebb54e18 100644
--- a/frappe/public/scss/website/my_account.scss
+++ b/frappe/public/scss/website/my_account.scss
@@ -50,7 +50,6 @@
 	}
 
 	.my-account-avatar {
-
 		.avatar {
 			height: 60px;
 			width: 60px;
@@ -70,8 +69,8 @@
 
 			.edit-profile-icon {
 				stroke: var(--blue-500);
+			}
 		}
-	}
 
 		.right-icon {
 			@include media-breakpoint-up(sm) {
diff --git a/frappe/public/scss/website/navbar.scss b/frappe/public/scss/website/navbar.scss
index 4fdb3df137..f7f8ffc64f 100644
--- a/frappe/public/scss/website/navbar.scss
+++ b/frappe/public/scss/website/navbar.scss
@@ -71,14 +71,13 @@
 	}
 
 	.navbar-toggler {
-		border-color: rgba(255,255,255, 0.1);
+		border-color: rgba(255, 255, 255, 0.1);
 
 		.icon {
 			stroke: none;
 		}
 	}
 
-
 	svg use {
 		--icon-stroke: white;
 	}
@@ -98,7 +97,6 @@
 	}
 }
 
-
 .navbar.bg-dark {
 	.dropdown-menu {
 		font-size: 0.75rem;
@@ -135,7 +133,8 @@
 	font-weight: 500;
 
 	&:hover,
-	&:focus, &.active {
+	&:focus,
+	&.active {
 		color: $primary;
 	}
 }
@@ -147,8 +146,8 @@
 
 .logged-in {
 	display: flex;
-    justify-content: center;
-    align-items: center;
+	justify-content: center;
+	align-items: center;
 	.nav-link {
 		max-width: 200px;
 		@extend .ellipsis;
diff --git a/frappe/public/scss/website/page_builder.scss b/frappe/public/scss/website/page_builder.scss
index f747807ea9..e761032940 100644
--- a/frappe/public/scss/website/page_builder.scss
+++ b/frappe/public/scss/website/page_builder.scss
@@ -40,18 +40,23 @@
 	}
 }
 
-.hero-title, .hero-subtitle {
+.hero-title,
+.hero-subtitle {
 	max-width: 42rem;
 	margin-top: 0rem;
 	margin-bottom: 0.5rem;
 }
 
 .hero.align-center {
-	h1, .hero-title, .hero-subtitle, .hero-buttons {
+	h1,
+	.hero-title,
+	.hero-subtitle,
+	.hero-buttons {
 		text-align: center;
 	}
 
-	.hero-title, .hero-subtitle {
+	.hero-title,
+	.hero-subtitle {
 		margin-left: auto;
 		margin-right: auto;
 	}
@@ -71,7 +76,8 @@
 .section-with-image.align-center {
 	text-align: center;
 
-	.section-description, .section-image {
+	.section-description,
+	.section-image {
 		margin-left: auto;
 		margin-right: auto;
 	}
@@ -386,7 +392,7 @@
 	margin-top: 2rem;
 
 	&:before {
-		content: '—'
+		content: "—";
 	}
 
 	@include media-breakpoint-up(lg) {
@@ -467,7 +473,6 @@
 	}
 }
 
-
 /* Section with Collapsible Content */
 
 .collapsible-items {
@@ -524,10 +529,12 @@
 }
 
 .section-with-collapsible-content.align-center {
-	.section-title, .section-description {
+	.section-title,
+	.section-description {
 		text-align: center;
 	}
-	.section-description, .collapsible-items {
+	.section-description,
+	.collapsible-items {
 		margin-left: auto;
 		margin-right: auto;
 		margin-top: 3rem;
@@ -670,7 +677,8 @@
 	margin-bottom: 0.5rem;
 }
 
-.section-title + .section-features, .section-description + .section-features {
+.section-title + .section-features,
+.section-description + .section-features {
 	&[data-columns="2"] {
 		margin-top: 3rem;
 	}
@@ -699,7 +707,8 @@
 	line-height: 1.7;
 }
 
-.feature-title, .feature-content {
+.feature-title,
+.feature-content {
 	margin-bottom: 0;
 }
 
@@ -708,7 +717,6 @@
 	margin-top: auto;
 }
 
-
 /* Section with Embed */
 
 .section-with-embed .embed-container {
@@ -720,13 +728,13 @@
 }
 
 .section-video {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-    cursor: pointer;
+	aspect-ratio: 16 / 9;
+	width: 100%;
+	cursor: pointer;
 }
 
 .video-thumbnail {
-    aspect-ratio: 16 / 9;
-    width: 100%;
-    object-fit: cover;
+	aspect-ratio: 16 / 9;
+	width: 100%;
+	object-fit: cover;
 }
diff --git a/frappe/public/scss/website/portal.scss b/frappe/public/scss/website/portal.scss
index 1b724c6816..396191f051 100644
--- a/frappe/public/scss/website/portal.scss
+++ b/frappe/public/scss/website/portal.scss
@@ -4,4 +4,4 @@
 	a {
 		color: $body-color;
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/website/search.scss b/frappe/public/scss/website/search.scss
index aee2457f31..d8e63cca05 100644
--- a/frappe/public/scss/website/search.scss
+++ b/frappe/public/scss/website/search.scss
@@ -37,4 +37,4 @@
 			padding: 0 0.125rem;
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/website/variables.scss b/frappe/public/scss/website/variables.scss
index 33720e6daa..c62266d10f 100644
--- a/frappe/public/scss/website/variables.scss
+++ b/frappe/public/scss/website/variables.scss
@@ -4,7 +4,6 @@
 @import "../espresso/spacing";
 @import "../espresso/borders";
 
-
 $body-color: $gray-700 !default;
 $text-muted: $gray-600 !default;
 $border-color: $gray-300 !default;
@@ -17,7 +16,7 @@ $container-max-widths: (
 	sm: 540px,
 	md: 840px,
 	lg: 1090px,
-	xl: 1290px
+	xl: 1290px,
 );
 
 $font-sizes: (
@@ -30,7 +29,7 @@ $font-sizes: (
 	"3xl": 1.875rem,
 	"4xl": 2.25rem,
 	"5xl": 3rem,
-	"6xl": 4rem
+	"6xl": 4rem,
 );
 
 @each $size, $value in $font-sizes {
@@ -89,7 +88,7 @@ $grid-breakpoints: (
 	md: 768px,
 	lg: 992px,
 	xl: 1200px,
-	2xl: 1440px
+	2xl: 1440px,
 ) !default;
 
 $spacers: (
@@ -117,12 +116,12 @@ $spacers: (
 	48: 12rem,
 	52: 13rem,
 	56: 14rem,
-	64: 16rem
+	64: 16rem,
 );
 
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
-@import 'css_variables';
+@import "css_variables";
 
 $code-color: $purple;
diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss
index a4facf5310..c831807856 100644
--- a/frappe/public/scss/website/web_form.scss
+++ b/frappe/public/scss/website/web_form.scss
@@ -255,7 +255,7 @@
 								flex: 1;
 
 								@include media-breakpoint-down(sm) {
-									order: 1
+									order: 1;
 								}
 							}
 
@@ -345,7 +345,7 @@
 								flex: 1;
 
 								@include media-breakpoint-down(sm) {
-									order: 2
+									order: 2;
 								}
 							}
 						}
@@ -495,7 +495,8 @@
 									border-top: 1px solid var(--border-color);
 									max-width: 160px;
 
-									.ql-editor, p {
+									.ql-editor,
+									p {
 										width: max-content;
 										max-width: 150px;
 										margin-bottom: 0;
diff --git a/frappe/public/scss/website/website_avatar.scss b/frappe/public/scss/website/website_avatar.scss
index a378623925..e58701eee9 100644
--- a/frappe/public/scss/website/website_avatar.scss
+++ b/frappe/public/scss/website/website_avatar.scss
@@ -1,8 +1,8 @@
-@import '../desk/avatar';
+@import "../desk/avatar";
 
 :root,
 [data-theme="dark"] {
 	--avatar-frame-color: var(--gray-500);
 	--avatar-frame-bg: var(--gray-100);
 	--avatar-frame-border: var(--gray-100);
-}
\ No newline at end of file
+}
diff --git a/frappe/public/scss/website/website_image.scss b/frappe/public/scss/website/website_image.scss
index e237fc0a54..a1d45d8add 100644
--- a/frappe/public/scss/website/website_image.scss
+++ b/frappe/public/scss/website/website_image.scss
@@ -4,10 +4,7 @@ img {
 	position: relative;
 }
 
-@include broken-img(
-	$height: 175px,
-	$border-radius: 0,
-);
+@include broken-img($height: 175px, $border-radius: 0);
 
 .website-image-placeholder {
 	display: flex;

From a306818e49c5a8e0125b06197faafc252d7c84f8 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Mon, 13 Nov 2023 11:53:55 +0530
Subject: [PATCH 5/5] ci: Ignore website theme file which has jinja in it

---
 .pre-commit-config.yaml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index fafe8bd3fb..7161bb90ae 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -44,7 +44,8 @@ repos:
                 .*boilerplate.*|
                 frappe/www/website_script.js|
                 frappe/templates/includes/.*|
-                frappe/public/js/lib/.*
+                frappe/public/js/lib/.*|
+                frappe/website/doctype/website_theme/website_theme_template.scss
             )$