chore(lab): Refactoring workbench menu

packages/freesewing.shared/components/workbench/menu/xray/disable.js

@@ -1,39 +1,16 @@
-import { useState } from 'react'
-import { linkClasses } from 'shared/components/navigation/primary.js'
+import { Li, SumButton, SumDiv, Deg } from 'shared/components/workbench/menu'
 
 const DisableXray = props => (
-  <li className="flex flex-row">
-    <button className={`
-      flex flex-row
-      w-full
-      justify-between
-      px-2
-      text-left
-      text-base-content
-      sm:text-neutral-content
-      items-center
-      pr-6
-    `} onClick={() => props.updateGist(['xray', 'enabled'], false)}>
-      <div className={`
-        grow pl-2 border-l-2
-        ${linkClasses}
-        hover:cursor-pointer
-        hover:border-secondary
-        sm:hover:border-secondary-focus
-        text-base-content sm:text-neutral-content
-      `}>
-        <span className={`
-          text-3xl mr-2 inline-block p-0 pl-2 leading-3
-          translate-y-3
-        `}>
-          <>&deg;</>
-        </span>
+  <Li>
+    <SumButton onClick={() => props.updateGist(['xray', 'enabled'], false)}>
+      <SumDiv>
+        <Deg />
         <span>
           {props.app.t('cfp.thingIsEnabled', { thing: props.app.t('settings.xray.title') })}
         </span>
-      </div>
-    </button>
-  </li>
+      </SumDiv>
+    </SumButton>
+  </Li>
 )
 
 export default DisableXray