From b1ed5af1ec9012a3b14a762bcc1658d7d9dee0f4 Mon Sep 17 00:00:00 2001
From: k-santos <143345722+k-santos@users.noreply.github.com>
Date: Wed, 24 Jul 2024 23:05:46 -0300
Subject: [PATCH] feat: hide preview button when the text in not being edited
 (#657)

---
 app/renderer/src/components/Checkbox.tsx      | 13 +++-----
 app/renderer/src/components/Radio.tsx         |  7 +---
 .../src/routes/Tasks/TaskDetails/index.tsx    |  2 +-
 .../src/styles/components/checkbox.ts         | 33 +++++--------------
 4 files changed, 16 insertions(+), 39 deletions(-)

diff --git a/app/renderer/src/components/Checkbox.tsx b/app/renderer/src/components/Checkbox.tsx
index 697a9012..08696649 100644
--- a/app/renderer/src/components/Checkbox.tsx
+++ b/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>
   );
 });
diff --git a/app/renderer/src/components/Radio.tsx b/app/renderer/src/components/Radio.tsx
index bf092834..e7b1c91f 100644
--- a/app/renderer/src/components/Radio.tsx
+++ b/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}
diff --git a/app/renderer/src/routes/Tasks/TaskDetails/index.tsx b/app/renderer/src/routes/Tasks/TaskDetails/index.tsx
index 7fb25c0d..ca3d1c3a 100644
--- a/app/renderer/src/routes/Tasks/TaskDetails/index.tsx
+++ b/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
             />
diff --git a/app/renderer/src/styles/components/checkbox.ts b/app/renderer/src/styles/components/checkbox.ts
index 3dc1bcf0..d7e0db41 100644
--- a/app/renderer/src/styles/components/checkbox.ts
+++ b/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;