fix(advanced checklist): UI changes (#1208)

* fix: remove create task circle

* fix: adjust outer margin

* fix: remove reorder icon

* fix: adjust checkbox and text size

Co-authored-by: Johnny Almonte <johnny243@users.noreply.github.com>

packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/common/components/MainTitle.tsx

@@ -17,9 +17,9 @@ type MainTitleProps = {
   crossed?: boolean
 }
 
-export const MainTitle: React.FC<MainTitleProps> = ({ children, highlight = false, crossed = false }) => {
+export const MainTitle: React.FC<MainTitleProps> = ({ children, highlight = false, crossed = false, ...props }) => {
   return (
-    <Header1 className={`sk-h1 ${highlight ? 'info' : ''}`} crossed={crossed}>
+    <Header1 className={`sk-h1 ${highlight ? 'info' : ''}`} crossed={crossed} {...props}>
       {children}
     </Header1>
   )

packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/common/components/TextAreaInput.tsx

@@ -5,9 +5,9 @@ const StyledTextArea = styled.textarea`
   background-color: transparent;
   border: none;
   color: inherit;
-  font-size: 1rem;
+  font-size: 0.98rem;
   font-weight: 400;
-  margin-left: 6px;
+  margin-left: 2px;
   outline: none;
   overflow: hidden;
   resize: none;

packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/common/components/svg/CheckBoxElementsDefs.scss

@@ -23,7 +23,7 @@ $transition-duration: 750ms;
   bottom: 0;
   cursor: pointer;
   fill: none;
-  height: 22px;
+  height: 19px;
   left: 0;
   margin: auto;
   position: absolute;
@@ -32,7 +32,7 @@ $transition-duration: 750ms;
   stroke-width: 2;
   stroke: var(--sn-stylekit-neutral-color);
   top: 0;
-  width: 22px;
+  width: 19px;
 }
 
 .align-baseline {

packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/CreateTask.tsx

@@ -6,18 +6,12 @@ import { useAppDispatch, useAppSelector, useDebouncedCallback } from '../../app/
 import { GroupModel, taskAdded, tasksGroupDraft } from './tasks-slice'
 
 import { TextInput } from '../../common/components'
-import { DottedCircleIcon } from '../../common/components/icons'
 import { isLastActiveGroup } from '../../common/utils'
 
 const Container = styled.div`
   align-items: center;
   display: flex;
   margin-bottom: 8px;
-
-  & > *:first-child {
-    margin-left: 1px;
-    margin-right: 9px;
-  }
 `
 
 type CreateTaskProps = {
@@ -67,7 +61,6 @@ const CreateTask: React.FC<CreateTaskProps> = ({ group }) => {
 
   return (
     <Container>
-      <DottedCircleIcon />
       <TextInput
         testId="create-task-input"
         disabled={!canEdit}

packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/TaskGroup.tsx

@@ -11,12 +11,12 @@ import TaskGroupOptions from './TaskGroupOptions'
 
 import { useEffect, useState } from 'react'
 import { CircularProgressBar, GenericInlineText, MainTitle, RoundButton } from '../../common/components'
-import { ChevronDownIcon, ChevronUpIcon, ReorderIcon } from '../../common/components/icons'
+import { ChevronDownIcon, ChevronUpIcon } from '../../common/components/icons'
 
 const TaskGroupContainer = styled.div<{ isLast?: boolean }>`
   background-color: var(--sn-stylekit-background-color);
   border: 1px solid var(--sn-stylekit-border-color);
-  border-radius: 8px;
+  border-radius: 4px;
   box-sizing: border-box;
   padding: 16px;
   margin-bottom: ${({ isLast }) => (!isLast ? '9px' : '0px')};
@@ -85,12 +85,7 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
     >
       <div className="flex items-center justify-between h-8 mt-1 mb-1">
         <div className="flex flex-grow items-center" onClick={handleClick}>
-          {canEdit && (
-            <div className="mr-3 pt-1px" {...props}>
-              <ReorderIcon highlight={isDragging} />
-            </div>
-          )}
-          <MainTitle crossed={allTasksCompleted && collapsed} highlight={isDragging}>
+          <MainTitle crossed={allTasksCompleted && collapsed} highlight={isDragging} {...props}>
             {groupName}
           </MainTitle>
           <CircularProgressBar size={18} percentage={percentageCompleted} />

packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/index.tsx

@@ -21,12 +21,8 @@ import { CheckBoxElementsDefs } from './common/components/svg'
 import { getPlainPreview } from './common/utils'
 
 const MainContainer = styled.div`
-  margin: 16px;
+  margin: 6px;
   padding-bottom: 60px;
-
-  @media only screen and (max-width: 600px) {
-    margin: 8px;
-  }
 `
 
 const FloatingContainer = styled.div`