Better third-party theme compatibility

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "cmdr",
 	"name": "Commander",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"minAppVersion": "0.12.0",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"author": "jsmorabito & phibr0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cmdr",
-	"version": "0.0.2",
+	"version": "0.0.3",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"main": "main.js",
 	"scripts": {

src/styles.scss

@@ -43,7 +43,7 @@
 	display: flex;
 	place-items: center;
 	flex-flow: column;
-	height: 80%;
+	margin: 3rem 0px;
 	place-content: center;
 
 	svg {
@@ -143,7 +143,7 @@
 		flex-direction: column;
 		align-items: flex-start;
 		border: none;
-		background-color: var(--background-secondary-alt);
+		background-color: var(--background-modifier-border);
 		padding: 6px 12px;
 		border-radius: 12px;
 

src/ui/components/commandViewerComponent.tsx

@@ -52,9 +52,9 @@ export default function CommandViewer({ manager, plugin }: CommandViewerProps):
 							await manager.addCommand(pair);
 							this.forceUpdate();
 						}}
+						aria-label="Add new"
 					>
 						<div ref={addIcon} />
-						Add new
 					</button>
 				</div>
 			</ManagerContext.Provider>

src/ui/components/macroBuilderComponent.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef, useState, } from "preact/hooks";
 import ReactFlow, { useEdgesState, useNodesState, Background, Edge, ReactFlowProvider, addEdge } from 'react-flow-renderer/nocss';
 import chroma from "chroma-js";
 import { ReactFlowInstance } from "react-flow-renderer";
+import { ObsidianIcon } from "src/util";
 
 interface BaseComponentProps {
 	color: string;
@@ -112,14 +113,3 @@ export default function MacroBuilder(): h.JSX.Element {
 		</Fragment>
 	);
 }
-
-function ObsidianIcon({ icon, size }: { icon: string, size?: number }): h.JSX.Element {
-	const iconEl = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		setIcon(iconEl.current!, icon, size);
-	}, [icon, size]);
-
-	return <div style={{ display: "grid" }} ref={iconEl} />;
-}

src/util.ts → src/util.tsx

@@ -2,8 +2,10 @@ import { CommandIconPair } from './types';
 import CommanderPlugin from "./main";
 import AddCommandModal from "./ui/addCommandModal";
 import ChooseIconModal from './ui/chooseIconModal';
-import { Command } from 'obsidian';
+import { Command, setIcon } from 'obsidian';
 import ChooseCustomNameModal from './ui/chooseCustomNameModal';
+import { h } from 'preact';
+import { useRef, useEffect } from 'preact/hooks';
 
 /**
  * It creates a modal, waits for the user to select a command, and then creates another modal to wait
@@ -34,3 +36,14 @@ export async function chooseNewCommand(plugin: CommanderPlugin): Promise<Command
 export function getCommandFromId(id: string): Command | null {
 	return app.commands.commands[id] ?? null;
 }
+
+export function ObsidianIcon({ icon, size }: { icon: string, size?: number }): h.JSX.Element {
+	const iconEl = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		setIcon(iconEl.current!, icon, size);
+	}, [icon, size]);
+
+	return <div style={{ display: "grid" }} ref={iconEl} />;
+}