feat: hide preview button when the text in not being edited

app/renderer/src/components/Checkbox.tsx

@@ -8,18 +8,15 @@ import {
 export type CheckboxProps = {
   label?: string;
   asPrimary?: boolean;
+  hidden?: boolean;
 } & React.HTMLProps<HTMLInputElement>;
 
 export const Checkbox = React.forwardRef<
   HTMLInputElement,
   CheckboxProps
->(({ id, label, name, disabled, asPrimary, ...props }, ref) => {
+>(({ id, label, name, disabled, asPrimary, hidden, ...props }, ref) => {
   return (
-    <StyledCheckbox
-      htmlFor={id}
-      disabled={disabled}
-      asPrimary={asPrimary}
-    >
+    <StyledCheckbox htmlFor={id} asPrimary={asPrimary}>
       <input
         type="checkbox"
         name={name}
@@ -28,8 +25,8 @@ export const Checkbox = React.forwardRef<
         disabled={disabled}
         {...props}
       />
-      <StyledCheckboxBox />
-      <StyledCheckboxLabel>{label}</StyledCheckboxLabel>
+      <StyledCheckboxBox hidden={hidden} />
+      <StyledCheckboxLabel>{hidden ? "" : label}</StyledCheckboxLabel>
     </StyledCheckbox>
   );
 });

app/renderer/src/components/Radio.tsx

@@ -9,12 +9,7 @@ import { CheckboxProps } from "./Checkbox";
 export const Radio = React.forwardRef<HTMLInputElement, CheckboxProps>(
   ({ id, label, name, disabled, asPrimary, ...props }, ref) => {
     return (
-      <StyledCheckbox
-        htmlFor={id}
-        disabled={disabled}
-        tabIndex={0}
-        asPrimary={asPrimary}
-      >
+      <StyledCheckbox htmlFor={id} tabIndex={0} asPrimary={asPrimary}>
         <input
           type="radio"
           name={name}

app/renderer/src/routes/Tasks/TaskDetails/index.tsx

@@ -174,7 +174,7 @@ const TaskDetails = React.forwardRef<HTMLDivElement, Props>(
             Description
             <Checkbox
               label="preview"
-              disabled={!editingDescription}
+              hidden={!editingDescription}
               onChange={showPreviewCallback}
               asPrimary
             />

app/renderer/src/styles/components/checkbox.ts

@@ -1,11 +1,11 @@
 import styled, { css } from "styled-components/macro";
 import { themes } from "styles/themes";
 
-export const StyledCheckboxBox = styled.span`
+export const StyledCheckboxBox = styled.span<{ hidden?: boolean }>`
   width: 1.1em;
   height: 1.1em;
 
-  display: flex;
+  display: ${({ hidden }) => (hidden ? "none" : "flex")};
   align-items: center;
   justify-content: center;
 
@@ -44,7 +44,6 @@ export const StyledCheckboxLabel = styled.span`
 `;
 
 export const StyledCheckbox = styled.label<{
-  disabled?: boolean;
   asPrimary?: boolean;
 }>`
   & > input {
@@ -79,35 +78,21 @@ export const StyledCheckbox = styled.label<{
 
   &:hover ${StyledCheckboxBox} {
     box-shadow: ${(p) =>
-      p.disabled
-        ? `0 0 0 0.2rem rgba(var(--${
-            p.asPrimary ? "color-primary" : "color-green"
-          }-rgb), 0)`
-        : `0 0 0 0.2rem rgba(var(--${
-            p.asPrimary ? "color-primary" : "color-green"
-          }-rgb), 0.16)`};
+      `0 0 0 0.2rem rgba(var(--${
+        p.asPrimary ? "color-primary" : "color-green"
+      }-rgb), 0.16)`};
   }
 
   &:active ${StyledCheckboxBox} {
     box-shadow: ${(p) =>
-      p.disabled
-        ? `0 0 0 0.4rem rgba(var(--${
-            p.asPrimary ? "color-primary" : "color-green"
-          }-rgb), 0)`
-        : `0 0 0 0.4rem rgba(var(--${
-            p.asPrimary ? "color-primary" : "color-green"
-          }-rgb), 0.16)`};
+      `0 0 0 0.4rem rgba(var(--${
+        p.asPrimary ? "color-primary" : "color-green"
+      }-rgb), 0.16)`};
   }
 
   &:hover ${StyledCheckboxLabel}, &:focus ${StyledCheckboxLabel} {
     color: ${(p) =>
-      p.disabled
-        ? "var(--color-disabled-text)"
-        : `var(--${p.asPrimary ? "color-primary" : "color-green"})`};
-  }
-
-  ${StyledCheckboxLabel} {
-    color: ${(p) => p.disabled && "var(--color-disabled-text)"};
+      `var(--${p.asPrimary ? "color-primary" : "color-green"})`};
   }
 
   display: inline-flex;