Use CSS selectors instead of an if in react for MainLayout buttons (#605

)
SlimeVR · Feb 25, 2023 · a0f3515 · a0f3515
1 parent 2473b0e
commit a0f3515
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/gui/src/components/ClearDriftCompensationButton.tsx b/gui/src/components/ClearDriftCompensationButton.tsx
@@ -1,7 +1,8 @@
 import { useLocalization } from '@fluent/react';
 import { ClearDriftCompensationRequestT, RpcMessage } from 'solarxr-protocol';
 import { useWebsocketAPI } from '../hooks/websocket-api';
-import { Button } from './commons/Button';
+import { BigButton } from './commons/BigButton';
+import { TrashIcon } from './commons/icon/TrashIcon';
 
 export function ClearDriftCompensationButton() {
   const { l10n } = useLocalization();
@@ -13,8 +14,12 @@ export function ClearDriftCompensationButton() {
   };
 
   return (
-    <Button variant="secondary" onClick={clearDriftCompensation}>
-      {l10n.getString('widget-drift_compensation-clear')}
-    </Button>
+    <BigButton
+      text={l10n.getString('widget-drift_compensation-clear')}
+      icon={<TrashIcon width={20} />}
+      onClick={clearDriftCompensation}
+    >
+      {}
+    </BigButton>
   );
 }
diff --git a/gui/src/components/MainLayout.tsx b/gui/src/components/MainLayout.tsx
@@ -63,7 +63,7 @@ export function MainLayoutRoute({
             </div>
             {widgets && (
               <div className="flex flex-col px-2 min-w-[274px] w-[274px] gap-2 pt-2 rounded-xl overflow-y-auto bg-background-70">
-                <div className="grid grid-cols-2 gap-2 w-full">
+                <div className="grid grid-cols-2 gap-2 w-full [&>*:nth-child(odd):last-of-type]:col-span-full">
                   <ResetButton
                     type={ResetType.Quick}
                     variant="big"
@@ -78,13 +78,11 @@ export function MainLayoutRoute({
                       variant="big"
                     ></ResetButton>
                   )}
-                  <BVHButton
-                    className={config?.debug ? 'col-span-1' : 'col-span-2'}
-                  ></BVHButton>
+                  <BVHButton></BVHButton>
+                  {driftCompensationEnabled && (
+                    <ClearDriftCompensationButton></ClearDriftCompensationButton>
+                  )}
                 </div>
-                {driftCompensationEnabled && (
-                  <ClearDriftCompensationButton></ClearDriftCompensationButton>
-                )}
                 <div className="w-full">
                   <OverlayWidget></OverlayWidget>
                 </div>

diff --git a/gui/src/components/commons/icon/TrashIcon.tsx b/gui/src/components/commons/icon/TrashIcon.tsx
@@ -0,0 +1,16 @@
+export function TrashIcon({ width = 33 }: { width: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width={width}
+      height="24"
+    >
+      <path
+        fillRule="evenodd"
+        d="M16.5 4.478v.227a48.816 48.816 0 013.878.512.75.75 0 11-.256 1.478l-.209-.035-1.005 13.07a3 3 0 01-2.991 2.77H8.084a3 3 0 01-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 01-.256-1.478A48.567 48.567 0 017.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 013.369 0c1.603.051 2.815 1.387 2.815 2.951zm-6.136-1.452a51.196 51.196 0 013.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 00-6 0v-.113c0-.794.609-1.428 1.364-1.452zm-.355 5.945a.75.75 0 10-1.5.058l.347 9a.75.75 0 101.499-.058l-.346-9zm5.48.058a.75.75 0 10-1.498-.058l-.347 9a.75.75 0 001.5.058l.345-9z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}