Merge pull request #294 from ordo-pink/light-theme-fixes

Light theme fixes
ordo-pink · Nov 26, 2024 · 959f907 · 959f907
2 parents f756def + 8ef128b
commit 959f907
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 45 deletions.
diff --git a/lib/frontend-client/src/components/command-palette/command-palette-item.component.ts b/lib/frontend-client/src/components/command-palette/command-palette-item.component.ts
@@ -21,19 +21,15 @@ import { ActionListItem, Hotkey } from "@ordo-pink/maoka-components"
 import { Maoka } from "@ordo-pink/maoka"
 import { MaokaOrdo } from "@ordo-pink/maoka-ordo-jabs"
 
-export const CommandPaletteItem = (
-	item: Ordo.CommandPalette.Item,
-	on_click: () => void,
-	is_current: boolean,
-) =>
+export const CommandPaletteItem = (item: Ordo.CommandPalette.Item, on_click: () => void, is_current: boolean) =>
 	Maoka.create("div", ({ use, element, after_mount }) => {
 		const { t } = use(MaokaOrdo.Jabs.Translations)
 
 		const title = t(item.readable_name)
 		const render_info = item.render_custom_info
 			? item.render_custom_info
 			: item.hotkey
-				? () => Hotkey(item.hotkey!, { prevent_in_inputs: true })
+				? () => Hotkey(item.hotkey!, { prevent_in_inputs: true, smol: true })
 				: void 0
 
 		const render_footer = item.render_custom_footer

diff --git a/lib/frontend-client/src/components/command-palette/command-palette.css b/lib/frontend-client/src/components/command-palette/command-palette.css
@@ -7,7 +7,7 @@
 }
 
 .command-palette_items {
-	@apply w-full overflow-y-auto border-neutral-500 has-[div]:first-of-type:border-b;
+	@apply w-full overflow-y-auto border-neutral-200 first-of-type:border-none has-[div]:last-of-type:border-t dark:border-neutral-600;
 }
 
 .command-palette_hint {

diff --git a/lib/frontend-client/src/components/context-menu/context-menu.css b/lib/frontend-client/src/components/context-menu/context-menu.css
@@ -1,7 +1,7 @@
 .context-menu {
-	@apply absolute z-[1000] w-[320px] rounded-sm bg-neutral-300 shadow-md dark:bg-neutral-700;
+	@apply absolute z-[1000] w-[320px] rounded-sm bg-white shadow-lg dark:bg-neutral-700;
 }
 
 .context-menu_divider {
-	@apply my-1 h-px border-0 bg-neutral-500;
+	@apply my-1 h-px border-0 bg-neutral-200 dark:bg-neutral-600;
 }
diff --git a/lib/frontend-client/src/components/modal/modal.css b/lib/frontend-client/src/components/modal/modal.css
@@ -7,7 +7,7 @@
 }
 
 .modal {
-	@apply relative hidden min-h-8 rounded-lg bg-neutral-100 shadow-xl dark:bg-neutral-700;
+	@apply relative hidden min-h-8 rounded-lg bg-white shadow-xl dark:bg-neutral-700;
 }
 
 .modal.active {

diff --git a/lib/frontend-client/src/components/notifications/notifications.css b/lib/frontend-client/src/components/notifications/notifications.css
@@ -51,7 +51,7 @@
 }
 
 .notification-card_progress {
-	@apply absolute inset-x-1.5 bottom-0 rounded-full shadow-inner;
+	@apply absolute inset-x-1.5 bottom-0 rounded-full;
 }
 
 .notification-card_progress_foreground {

diff --git a/lib/function-file-explorer/src/components/create-file-modal.component.ts b/lib/function-file-explorer/src/components/create-file-modal.component.ts
@@ -24,10 +24,7 @@ import { MaokaJabs } from "@ordo-pink/maoka-jabs"
 import { MaokaOrdo } from "@ordo-pink/maoka-ordo-jabs"
 import { Switch } from "@ordo-pink/switch"
 
-export const CreateFileModal = (
-	ctx: Ordo.CreateFunction.Params,
-	parent: Ordo.Metadata.FSID | null = null,
-) =>
+export const CreateFileModal = (ctx: Ordo.CreateFunction.Params, parent: Ordo.Metadata.FSID | null = null) =>
 	Maoka.create("div", ({ use }) => {
 		use(MaokaOrdo.Context.provide(ctx))
 
@@ -59,12 +56,9 @@ export const CreateFileModal = (
 
 // TODO Extract select
 // TODO Add caret showing expanded-contracted status
-const FileAssociationSelector = (
-	on_select_type: (file_association: Ordo.FileAssociation.Instance, type: string) => void,
-) =>
+const FileAssociationSelector = (on_select_type: (file_association: Ordo.FileAssociation.Instance, type: string) => void) =>
 	Maoka.create("div", ({ use, refresh, on_unmount }) => {
-		const select_class =
-			"relative bg-neutral-200 dark:bg-neutral-600 rounded-md mt-2 cursor-pointer"
+		const select_class = "relative bg-neutral-100 shadow-inner dark:bg-neutral-600 rounded-md mt-2 cursor-pointer"
 
 		let current_file_association: Ordo.FileAssociation.Instance | null = null
 		let current_type_index = 0
@@ -108,26 +102,18 @@ const FileAssociationSelector = (
 
 		return () => [
 			SelectItem(
-				current_file_association
-					? current_file_association.types[current_type_index]
-					: file_associations[0].types[0],
+				current_file_association ? current_file_association.types[current_type_index] : file_associations[0].types[0],
 				current_file_association ? current_file_association : file_associations[0],
 				handle_item_click,
 			),
 
 			is_expanded
 				? Maoka.create("div", ({ use }) => {
-						use(
-							MaokaJabs.set_class(
-								"absolute top-0 left-0 right-0 bg-neutral-200 dark:bg-neutral-600 rounded-md",
-							),
-						)
+						use(MaokaJabs.set_class("absolute top-0 left-0 right-0 bg-neutral-100 dark:bg-neutral-600 rounded-md"))
 
 						return () =>
 							file_associations.flatMap(file_association =>
-								file_association.types.map(type =>
-									SelectItem(type, file_association, handle_item_click, true),
-								),
+								file_association.types.map(type => SelectItem(type, file_association, handle_item_click, true)),
 							)
 					})
 				: void 0,
@@ -146,23 +132,16 @@ const SelectItem = (
 
 		const Icon = Switch.OfTrue()
 			.case(!!file_association.render_icon, () =>
-				Maoka.create("span", ({ element }) =>
-					file_association.render_icon!(element as HTMLElement),
-				),
+				Maoka.create("span", ({ element }) => file_association.render_icon!(element as HTMLElement)),
 			)
 			.default(() => BsFileEarmarkPlus())
 
 		return () => [
 			Maoka.create("div", ({ use }) => {
-				use(
-					MaokaJabs.set_class(
-						"p-2 rounded-none first-of-type:rounded-t-md last-of-type:rounded-b-md",
-					),
-				)
+				use(MaokaJabs.set_class("p-2 rounded-none first-of-type:rounded-t-md last-of-type:rounded-b-md"))
 
 				return () => {
-					if (is_select_active)
-						use(MaokaJabs.add_class("hover:bg-neutral-300 hover:dark:bg-neutral-800"))
+					if (is_select_active) use(MaokaJabs.add_class("hover:bg-neutral-300 hover:dark:bg-neutral-800"))
 
 					return [
 						Maoka.create("div", ({ use }) => {

diff --git a/lib/maoka-components/src/common/action-list-item.css b/lib/maoka-components/src/common/action-list-item.css
@@ -1,5 +1,5 @@
 .action-list-item {
-	@apply w-full cursor-pointer rounded-sm px-2 py-1 hover:bg-gradient-to-r hover:from-neutral-300 hover:to-stone-300 md:px-1 md:py-0.5 hover:dark:bg-gradient-to-r hover:dark:from-neutral-600 hover:dark:to-stone-600;
+	@apply w-full cursor-pointer rounded-sm px-2 py-1 hover:bg-gradient-to-br hover:from-neutral-100 hover:to-stone-100 md:px-1 md:py-0.5 hover:dark:bg-gradient-to-br hover:dark:from-neutral-600 hover:dark:to-stone-600;
 }
 
 .action-list-item_layout {
@@ -11,11 +11,11 @@
 }
 
 .action-list-item.active {
-	@apply bg-gradient-to-tr from-pink-300 to-rose-300 dark:from-pink-900 dark:to-rose-900;
+	@apply bg-gradient-to-br from-purple-400/50 to-pink-400/50 dark:from-pink-900 dark:to-rose-900;
 }
 
 .action-list-item.active-hover {
-	@apply hover:!bg-gradient-to-tr hover:!from-pink-300 hover:!to-rose-300 hover:dark:!from-pink-900 hover:dark:!to-rose-900;
+	@apply hover:!bg-gradient-to-br hover:!from-pink-300 hover:!to-rose-300 hover:dark:!from-pink-900 hover:dark:!to-rose-900;
 }
 
 .action-list-item_title {

diff --git a/lib/maoka-components/src/common/hotkey.component.ts b/lib/maoka-components/src/common/hotkey.component.ts
@@ -23,6 +23,7 @@ import { Result } from "@ordo-pink/result"
 import { Switch } from "@ordo-pink/switch"
 
 import "./hotkey.css"
+import { title_case } from "@ordo-pink/tau"
 
 // TODO Move to jabs
 const isDarwin = navigator.appVersion.indexOf("Mac") !== -1
@@ -114,7 +115,7 @@ const Key = (key: string) =>
 			.case("arrowright", () => "→")
 			.case("arrowup", () => "↑")
 			.case("arrowdown", () => "↓")
-			.default(() => key.toLocaleUpperCase()),
+			.default(() => title_case(key)),
 	)
 
 const meta = isDarwin ? Key("⌥") : Key("Alt")