refactor: slim down zoom controls (#1363)

* refactor: slim down zoom controls

* refactor: space settings controls consistently

Author: setchy

src/components/buttons/Button.tsx

@@ -19,6 +19,7 @@ const buttonVariants = cva(
       },
       size: {
         default: 'min-w-20 h-10 px-4 py-1',
+        inline: 'h-5 rounded-md px-2 py-1',
         xs: 'h-7 rounded-md px-2 py-1',
         sm: 'h-9 rounded-md px-2 py-1',
         lg: 'h-11 rounded-md px-8',

src/components/fields/Checkbox.tsx

@@ -13,18 +13,16 @@ export interface ICheckbox {
 
 export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
   return (
-    <div className="mb-3 mt-1 text-sm">
-      <div className="flex items-start">
-        <div className="flex h-5 items-center">
-          <input
-            type="checkbox"
-            id={props.name}
-            className="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-            checked={props.checked}
-            onChange={props.onChange}
-            disabled={props.disabled}
-          />
-        </div>
+    <div className="mt-3 mb-2 text-sm">
+      <div className="flex items-center">
+        <input
+          type="checkbox"
+          id={props.name}
+          className="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+          checked={props.checked}
+          onChange={props.onChange}
+          disabled={props.disabled}
+        />
 
         <div className="ml-3">
           <label

src/components/fields/RadioGroup.tsx

@@ -15,9 +15,9 @@ export interface IRadioGroup {
 
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
-    <div className={cn('mb-3 mt-1 text-sm', props.className)}>
+    <div className={cn('mt-3 mb-2 text-sm', props.className)}>
       <div className="flex items-start">
-        <div className="mr-3 py-1">
+        <div className="mr-3">
           <label
             htmlFor={props.name}
             className="font-medium text-gray-700 dark:text-gray-200"
@@ -37,7 +37,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           {props.options.map((item) => {
             return (
               <div
-                className="mt-1 flex items-center"
+                className="flex items-center"
                 key={`radio_item_${item.value.toLowerCase()}`}
               >
                 <input

src/components/fields/__snapshots__/Checkbox.test.tsx.snap

@@ -61,12 +61,11 @@ export const AppearanceSettings: FC = () => {
         onChange={(evt) => {
           updateSetting('theme', evt.target.value as Theme);
         }}
-        className="mb-0"
       />
-      <div className="flex">
+      <div className="flex items-center mt-3 mb-2 text-sm">
         <label
           htmlFor="Zoom"
-          className="mr-3 content-center font-medium text-sm text-gray-700 dark:text-gray-200"
+          className="mr-3 content-center font-medium text-gray-700 dark:text-gray-200"
         >
           Zoom:
         </label>
@@ -77,11 +76,11 @@ export const AppearanceSettings: FC = () => {
             webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage - 10))
           }
           className="rounded-r-none"
-          size="xs"
+          size="inline"
         >
           -
         </Button>
-        <span className="flex w-16 items-center justify-center rounded-none border border-gray-300 bg-transparent text-sm text-gray-700 dark:text-gray-200">
+        <span className="flex w-16 h-5 items-center justify-center rounded-none border border-gray-300 bg-transparent text-xs text-gray-700 dark:text-gray-200">
           {zoomPercentage.toFixed(0)}%
         </span>
         <Button
@@ -91,7 +90,7 @@ export const AppearanceSettings: FC = () => {
             webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage + 10))
           }
           className="rounded-none"
-          size="xs"
+          size="inline"
         >
           +
         </Button>
@@ -100,7 +99,7 @@ export const AppearanceSettings: FC = () => {
           onClick={() => webFrame.setZoomLevel(0)}
           variant="destructive"
           className="rounded-l-none"
-          size="xs"
+          size="inline"
         >
           X
         </Button>