Fix undo button styling

xiv-gear-planner · Sep 18, 2024 · 8851173 · 8851173
1 parent 8b74f67
commit 8851173
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/packages/common-ui/src/components/util.ts b/packages/common-ui/src/components/util.ts
@@ -615,6 +615,19 @@ export function discordIcon() {
     return svg;
 }
 
+export function undoIcon() {
+    const svg = makeSvgGlyph("0 0 24 24", "M10 8H5V3M5.29102 16.3569C6.22284 17.7918 7.59014 18.8902 9.19218 19.4907C10.7942 20.0913 12.547 20.1624 14.1925 19.6937C15.8379 19.225 17.2893 18.2413 18.3344 16.8867C19.3795 15.5321 19.963 13.878 19.9989 12.1675C20.0347 10.4569 19.5211 8.78001 18.5337 7.38281C17.5462 5.98561 16.1366 4.942 14.5122 4.40479C12.8878 3.86757 11.1341 3.86499 9.5083 4.39795C7.88252 4.93091 6.47059 5.97095 5.47949 7.36556");
+    svg.classList.add('svg-line');
+    return svg;
+}
+
+export function redoIcon() {
+    const svg = makeSvgGlyph("0 0 24 24", "M10 8H5V3M5.29102 16.3569C6.22284 17.7918 7.59014 18.8902 9.19218 19.4907C10.7942 20.0913 12.547 20.1624 14.1925 19.6937C15.8379 19.225 17.2893 18.2413 18.3344 16.8867C19.3795 15.5321 19.963 13.878 19.9989 12.1675C20.0347 10.4569 19.5211 8.78001 18.5337 7.38281C17.5462 5.98561 16.1366 4.942 14.5122 4.40479C12.8878 3.86757 11.1341 3.86499 9.5083 4.39795C7.88252 4.93091 6.47059 5.97095 5.47949 7.36556");
+    svg.style.transform = 'scaleX(-1)';
+    svg.classList.add('svg-line');
+    return svg;
+}
+
 customElements.define("option-data-element", OptionDataElement, {extends: "option"});
 customElements.define("data-select", DataSelect, {extends: "select"});
 customElements.define("field-bound-converting-text-field", FieldBoundConvertingTextField, {extends: "input"});

diff --git a/packages/common-ui/styles/common.less b/packages/common-ui/styles/common.less
@@ -1715,11 +1715,11 @@ div.gear-sheet-toolbar-holder {
       border-radius: 8px;
       display: flex;
       justify-content: center;
-      span {
-        display: block;
-        position: relative;
-        top: -3px;
+      padding: 2px;
+      svg {
         margin: auto;
+        width: 100%;
+        height: 100%;
       }
     }
     @media screen and (max-width: 630px) {
@@ -1732,9 +1732,6 @@ div.gear-sheet-toolbar-holder {
         width: 20px;
         height: 20px;
         font-size: 24px;
-        span {
-          top: -2px;
-        }
       }
     }
   }

diff --git a/packages/frontend/src/scripts/components/gear_edit_toolbar.ts b/packages/frontend/src/scripts/components/gear_edit_toolbar.ts
@@ -4,7 +4,7 @@ import {MateriaPriorityPicker} from "./materia";
 import {StatTierDisplay} from "./stat_tier_display";
 import {CharacterGearSet} from "@xivgear/core/gear";
 import {GearPlanSheet} from "@xivgear/core/sheet";
-import {makeActionButton, quickElement} from "@xivgear/common-ui/components/util";
+import {makeActionButton, quickElement, redoIcon, undoIcon} from "@xivgear/common-ui/components/util";
 
 export class UndoArea extends HTMLDivElement {
     private _currentSet: CharacterGearSet;
@@ -14,10 +14,10 @@ export class UndoArea extends HTMLDivElement {
     constructor() {
         super();
         this.classList.add('undo-controls');
-        this.undoButton = makeActionButton([quickElement('span', [], ['⟲'])], () => {
+        this.undoButton = makeActionButton([undoIcon()], () => {
             this.currentSet?.undo();
         }, 'Undo');
-        this.redoButton = makeActionButton([quickElement('span', [], ['⟳'])], () => {
+        this.redoButton = makeActionButton([redoIcon()], () => {
             this.currentSet?.redo();
         }, 'Redo');
         this.replaceChildren(this.undoButton, this.redoButton);