From 40acb6e2e5f16ca318dddc3f5270a0da3f2494d7 Mon Sep 17 00:00:00 2001
From: Andrew Davis <1709934+Savid@users.noreply.github.com>
Date: Sat, 5 Apr 2025 23:58:25 +1000
Subject: [PATCH] cleanup icons
---
ui/src/components/MacroForm.tsx | 2 +-
ui/src/components/MacroStepCard.tsx | 74 ++++++++++---------
.../devices.$id.settings.macros.edit.tsx | 4 +-
ui/src/routes/devices.$id.settings.macros.tsx | 21 ++++--
4 files changed, 56 insertions(+), 45 deletions(-)
diff --git a/ui/src/components/MacroForm.tsx b/ui/src/components/MacroForm.tsx
index 06afd4e..135817c 100644
--- a/ui/src/components/MacroForm.tsx
+++ b/ui/src/components/MacroForm.tsx
@@ -181,7 +181,7 @@ export function MacroForm({
<div>
<div className="flex items-center justify-between text-sm">
<div className="flex items-center gap-1">
- <FieldLabel label="Steps" info={`Each step is a collection of keys and/or modifiers that will be executed in order. You can add up to a maximum of ${MAX_STEPS_PER_MACRO} steps per macro.`} />
+ <FieldLabel label="Steps" description={`Keys/modifiers executed in sequence with a delay between each step.`} />
</div>
<span className="text-slate-500 dark:text-slate-400">
{macro.steps?.length || 0}/{MAX_STEPS_PER_MACRO} steps
diff --git a/ui/src/components/MacroStepCard.tsx b/ui/src/components/MacroStepCard.tsx
index 986eb38..1b944cf 100644
--- a/ui/src/components/MacroStepCard.tsx
+++ b/ui/src/components/MacroStepCard.tsx
@@ -1,4 +1,4 @@
-import { LuArrowUp, LuArrowDown, LuX, LuTrash } from "react-icons/lu";
+import { LuArrowUp, LuArrowDown, LuX, LuTrash2 } from "react-icons/lu";
import { Button } from "@/components/Button";
import { Combobox } from "@/components/Combobox";
@@ -94,6 +94,12 @@ export function MacroStepCard({
<Card className="p-4">
<div className="mb-2 flex items-center justify-between">
<div className="flex items-center gap-1.5">
+ <span className="flex h-6 w-5 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
+ {stepIndex + 1}
+ </span>
+ </div>
+
+ <div className="flex items-center space-x-2">
<div className="flex items-center gap-1">
<Button
size="XS"
@@ -110,24 +116,19 @@ export function MacroStepCard({
LeadingIcon={LuArrowDown}
/>
</div>
- <span className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-100 text-xs font-semibold text-blue-700 dark:bg-blue-900/40 dark:text-blue-200">
- {stepIndex + 1}
- </span>
- </div>
-
- <div className="flex items-center space-x-2">
{onDelete && (
<Button
size="XS"
- theme="danger"
+ theme="light"
+ className="text-red-500 dark:text-red-400"
text="Delete"
- LeadingIcon={LuTrash}
+ LeadingIcon={LuTrash2}
onClick={onDelete}
/>
)}
</div>
</div>
-
+
<div className="space-y-4 mt-2">
<div className="w-full flex flex-col gap-2">
<FieldLabel label="Modifiers" />
@@ -137,7 +138,7 @@ export function MacroStepCard({
<span className="absolute -top-2.5 left-2 px-1 text-xs font-medium bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400">
{group}
</span>
- <div className="flex flex-wrap gap-1">
+ <div className="flex flex-wrap gap-4 pt-1">
{mods.map(option => (
<Button
key={option.value}
@@ -164,31 +165,36 @@ export function MacroStepCard({
<div className="flex items-center gap-1">
<FieldLabel label="Keys" description={`Maximum ${MAX_KEYS_PER_STEP} keys per step.`} />
</div>
- <div className="flex flex-wrap gap-1 pb-2">
- {ensureArray(step.keys).map((key, keyIndex) => (
- <span
- key={keyIndex}
- className="inline-flex items-center rounded-md bg-blue-100 px-1 text-xs font-medium text-blue-800 dark:bg-blue-900/40 dark:text-blue-200"
- >
- <span className="px-1">
- {keyDisplayMap[key] || key}
+ {ensureArray(step.keys) && step.keys.length > 0 && (
+ <div className="flex flex-wrap gap-1 pb-2">
+ {step.keys.map((key, keyIndex) => (
+ <span
+ key={keyIndex}
+ className="inline-flex items-center py-0.5 rounded-md bg-blue-100 px-1 text-xs font-medium text-blue-800 dark:bg-blue-900/40 dark:text-blue-200"
+ >
+ <span className="px-1">
+ {keyDisplayMap[key] || key}
+ </span>
+ <Button
+ size="XS"
+ className=""
+ theme="blank"
+ onClick={() => {
+ const newKeys = ensureArray(step.keys).filter((_, i) => i !== keyIndex);
+ onKeySelect({ value: null, keys: newKeys });
+ }}
+ LeadingIcon={LuX}
+ />
</span>
- <Button
- size="XS"
- className=""
- theme="blank"
- onClick={() => {
- const newKeys = ensureArray(step.keys).filter((_, i) => i !== keyIndex);
- onKeySelect({ value: null, keys: newKeys });
- }}
- LeadingIcon={LuX}
- />
- </span>
- ))}
- </div>
+ ))}
+ </div>
+ )}
<div className="relative w-full">
<Combobox
- onChange={(value: { value: string; label: string }) => onKeySelect(value)}
+ onChange={(value: { value: string; label: string }) => {
+ onKeySelect(value);
+ onKeyQueryChange('');
+ }}
displayValue={() => keyQuery}
onInputChange={onKeyQueryChange}
options={getFilteredKeys}
@@ -204,7 +210,7 @@ export function MacroStepCard({
<div className="w-full flex flex-col gap-1">
<div className="flex items-center gap-1">
- <FieldLabel label="Step Duration" info="The time to wait after pressing the keys in this step before moving to the next step. This helps ensure reliable key presses when automating keyboard input." />
+ <FieldLabel label="Step Duration" description="Time to wait before executing the next step." />
</div>
<div className="flex items-center gap-3">
<SelectMenuBasic
diff --git a/ui/src/routes/devices.$id.settings.macros.edit.tsx b/ui/src/routes/devices.$id.settings.macros.edit.tsx
index c4b47c2..109cccc 100644
--- a/ui/src/routes/devices.$id.settings.macros.edit.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.edit.tsx
@@ -1,6 +1,6 @@
import { useNavigate, useParams } from "react-router-dom";
import { useState, useEffect } from "react";
-import { LuTrash } from "react-icons/lu";
+import { LuTrash2 } from "react-icons/lu";
import { KeySequence, useMacrosStore } from "@/hooks/stores";
import { SettingsPageHeader } from "@/components/SettingsPageheader";
@@ -102,7 +102,7 @@ export default function SettingsMacrosEditRoute() {
size="SM"
theme="danger"
text="Delete Macro"
- LeadingIcon={LuTrash}
+ LeadingIcon={LuTrash2}
onClick={() => setShowDeleteConfirm(true)}
disabled={isDeleting}
/>
diff --git a/ui/src/routes/devices.$id.settings.macros.tsx b/ui/src/routes/devices.$id.settings.macros.tsx
index 744fd2a..5c4e352 100644
--- a/ui/src/routes/devices.$id.settings.macros.tsx
+++ b/ui/src/routes/devices.$id.settings.macros.tsx
@@ -1,6 +1,6 @@
import { useEffect, Fragment, useMemo, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom";
-import { LuPenLine, LuLoader, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown, LuTrash } from "react-icons/lu";
+import { LuPenLine, LuCopy, LuMoveRight, LuCornerDownRight, LuArrowUp, LuArrowDown, LuTrash2, LuCommand } from "react-icons/lu";
import { KeySequence, useMacrosStore, generateMacroId } from "@/hooks/stores";
import { SettingsPageHeader } from "@/components/SettingsPageheader";
@@ -11,6 +11,7 @@ import { MAX_TOTAL_MACROS, COPY_SUFFIX } from "@/constants/macros";
import { keyDisplayMap, modifierDisplayMap } from "@/keyboardMappings";
import notifications from "@/notifications";
import { ConfirmDialog } from "@/components/ConfirmDialog";
+import LoadingSpinner from "@/components/LoadingSpinner";
const normalizeSortOrders = (macros: KeySequence[]): KeySequence[] => {
return macros.map((macro, index) => ({
@@ -201,8 +202,9 @@ export default function SettingsMacrosRoute() {
<div className="flex items-center gap-1 ml-4">
<Button
size="XS"
- theme="danger"
- LeadingIcon={LuTrash}
+ className="text-red-500 dark:text-red-400"
+ theme="light"
+ LeadingIcon={LuTrash2}
onClick={() => {
setMacroToDelete(macro);
setShowDeleteConfirm(true);
@@ -254,7 +256,7 @@ export default function SettingsMacrosRoute() {
<div className="flex items-center justify-between">
<SettingsPageHeader
title="Keyboard Macros"
- description={`Create and manage keyboard macros for quick actions. Currently ${macros.length}/${MAX_TOTAL_MACROS} macros are active.`}
+ description={`Combine keystrokes into a single action for faster workflows.`}
/>
{ macros.length > 0 && (
<div className="flex items-center pl-2">
@@ -274,16 +276,19 @@ export default function SettingsMacrosRoute() {
<div className="space-y-4">
{loading && macros.length === 0 ? (
<EmptyCard
+ IconElm={LuCommand}
headline="Loading macros..."
- description="Please wait while we fetch your macros"
BtnElm={
- <LuLoader className="h-6 w-6 animate-spin text-blue-500" />
+ <div className="my-2 flex flex-col items-center space-y-2 text-center">
+ <LoadingSpinner className="h-6 w-6 text-blue-700 dark:text-blue-500" />
+ </div>
}
/>
) : macros.length === 0 ? (
<EmptyCard
- headline="No macros yet"
- description="Create keyboard macros for quick actions"
+ IconElm={LuCommand}
+ headline="Create Your First Macro"
+ description="Combine keystrokes into a single action for faster workflows."
BtnElm={
<Button
size="SM"