Refactor TrashIcon ArrowIcon and LoaderIcon (#876)

SlimeVR · Nov 3, 2023 · f1b3b56 · f1b3b56
1 parent a614c22
commit f1b3b56
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/gui/src/components/ClearDriftCompensationButton.tsx b/gui/src/components/ClearDriftCompensationButton.tsx
@@ -16,7 +16,7 @@ export function ClearDriftCompensationButton() {
   return (
     <BigButton
       text={l10n.getString('widget-drift_compensation-clear')}
-      icon={<TrashIcon width={20} />}
+      icon={<TrashIcon size={20} />}
       onClick={clearDriftCompensation}
     >
       {}

diff --git a/gui/src/components/ClearMountingButton.tsx b/gui/src/components/ClearMountingButton.tsx
@@ -36,7 +36,7 @@ export function ClearMountingButton() {
   return (
     <BigButton
       text={l10n.getString('widget-clear_mounting')}
-      icon={<TrashIcon width={20} />}
+      icon={<TrashIcon size={20} />}
       onClick={clearMounting}
       disabled={!trackerWithMounting}
     />

diff --git a/gui/src/components/commons/icon/ArrowIcons.tsx b/gui/src/components/commons/icon/ArrowIcons.tsx
@@ -13,7 +13,7 @@ export function ArrowDownIcon({ size = 24 }: { size?: number }) {
   );
 }
 
-export function ArrowUpIcon({ size = 24 }: { size: number }) {
+export function ArrowUpIcon({ size = 24 }: { size?: number }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/gui/src/components/commons/icon/LoaderIcon.tsx b/gui/src/components/commons/icon/LoaderIcon.tsx
@@ -7,37 +7,39 @@ export enum SlimeState {
 
 export function LoaderIcon({
   slimeState = SlimeState.HAPPY,
+  size = 85,
 }: {
   slimeState: SlimeState;
+  size?: number | string;
 }) {
   return (
     <>
       <img
         hidden={slimeState !== SlimeState.JUMPY}
         src="/images/jumping-slime.gif"
         alt="Slime jumping"
-        width="85"
+        width={size}
         // className="crisp-edges"
       ></img>
       <img
         hidden={slimeState !== SlimeState.HAPPY}
         src="/images/happy-slime.gif"
         alt="Happy slime"
-        width="85"
+        width={size}
         // className="crisp-edges"
       ></img>
       <img
         hidden={slimeState !== SlimeState.SAD}
         src="/images/sad-slime.gif"
         alt="Sad slime"
-        width="85"
+        width={size}
         // className="crisp-edges"
       ></img>
       <img
         hidden={slimeState !== SlimeState.CURIOUS}
         src="/images/curious-slime.gif"
         alt="Slime looking for something"
-        width="85"
+        width={size}
         // className="crisp-edges"
       ></img>
     </>

diff --git a/gui/src/components/commons/icon/TrashIcon.tsx b/gui/src/components/commons/icon/TrashIcon.tsx
@@ -1,10 +1,10 @@
-export function TrashIcon({ width = 33 }: { width: number }) {
+export function TrashIcon({ size = 33 }: { size?: number }) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 24 24"
-      width={width}
-      height="29"
+      width={size}
+      height={size}
     >
       <path
         fillRule="evenodd"