fix(advanced checklist): improve editor styles (#1221)

packages/components/package.json

@@ -23,7 +23,8 @@
   },
   "dependencies": {
     "@standardnotes/features": "workspace:*",
-    "@standardnotes/styles": "workspace:*"
+    "@standardnotes/styles": "workspace:*",
+    "@standardnotes/utils": "workspace:*"
   },
   "devDependencies": {
     "@standardnotes/deterministic-zip": "^1.2.0",

packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/package.json

@@ -79,6 +79,9 @@
       "^.+\\.module\\.(css|sass|scss)$"
     ]
   },
+  "dependencies": {
+    "@standardnotes/utils": "workspace:*"
+  },
   "devDependencies": {
     "@reach/alert-dialog": "0.16.2",
     "@reach/menu-button": "0.16.2",
@@ -87,7 +90,6 @@
     "@reduxjs/toolkit": "1.8.0",
     "@standardnotes/editor-kit": "2.2.5",
     "@standardnotes/stylekit": "5.23.0",
-    "@standardnotes/utils": "workspace:*",
     "@testing-library/dom": "8.11.3",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.4",

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

@@ -45,7 +45,7 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
                   <p className="color-foreground">{children}</p>
                 </AlertDialogDescription>
 
-                <div className="flex my-1 mt-4">
+                <div className="flex my-1">
                   <button
                     data-testid="cancel-dialog-button"
                     className="sn-button small neutral"

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

@@ -2,6 +2,7 @@ import styled from 'styled-components'
 
 export const SubTitle = styled.h3`
   color: var(--sn-stylekit-foreground-color);
+  cursor: pointer;
   font-size: var(--sn-stylekit-font-size-h3);
   font-weight: 500;
   margin: 10px 0px;

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

@@ -2,7 +2,7 @@ $transition-duration: 750ms;
 
 .checkbox-container {
   display: block;
-  padding-left: 20px;
+  padding-left: 22px;
   position: relative;
 
   &:last-child {
@@ -22,17 +22,16 @@ $transition-duration: 750ms;
 .checkbox-button {
   bottom: 0;
   cursor: pointer;
-  fill: none;
+  fill: var(--sn-stylekit-contrast-background-color);
-  height: 19px;
+  height: 18px;
   left: 0;
   margin: auto;
   position: absolute;
   stroke-linecap: round;
   stroke-linejoin: round;
-  stroke-width: 2;
+  stroke-width: 1;
-  stroke: var(--sn-stylekit-neutral-color);
   top: 0;
-  width: 19px;
+  width: 18px;
 }
 
 .align-baseline {
@@ -60,8 +59,9 @@ $transition-duration: 750ms;
 .checkbox-square {
   stroke-dasharray: 56.1053, 56.1053;
   stroke-dashoffset: 0;
-  stroke: var(--sn-stylekit-neutral-color);
+  stroke: var(--sn-stylekit-shadow-color);
   transition-delay: $transition-duration * 0.2;
+  fill: var(--sn-stylekit-contrast-background-color);
 }
 
 .checkbox-mark {

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

@@ -30,7 +30,7 @@ const MigrateLegacyContent: React.FC = () => {
                   Are you sure you want to migrate legacy content to the new format?
                 </AlertDialogLabel>
 
-                <div className="flex my-1 mt-4">
+                <div className="flex my-1">
                   <button className="sn-button small neutral" onClick={handleCancel} ref={cancelRef}>
                     Cancel
                   </button>

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

@@ -18,7 +18,7 @@ const TaskGroupContainer = styled.div<{ isLast?: boolean }>`
   border: 1px solid var(--sn-stylekit-border-color);
   border-radius: 4px;
   box-sizing: border-box;
-  padding: 16px;
+  padding: 16px 18px;
   margin-bottom: ${({ isLast }) => (!isLast ? '9px' : '0px')};
 
   @media only screen and (max-width: 600px) {
@@ -83,7 +83,7 @@ const TaskGroup: React.FC<TaskGroupProps> = ({
       onTransitionEnd={onTransitionEnd}
       isLast={isLast}
     >
-      <div className="flex items-center justify-between h-8 mt-1 mb-1">
+      <div className="flex items-center justify-between h-8">
         <div className="flex flex-grow items-center" onClick={handleClick}>
           <MainTitle crossed={allTasksCompleted && collapsed} highlight={isDragging} {...props}>
             {groupName}

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

@@ -60,7 +60,7 @@ it('renders the completed tasks section', () => {
 
   const completedTasksSection = screen.getByTestId('completed-tasks-section')
   expect(completedTasksSection).toBeInTheDocument()
-  expect(completedTasksSection).toHaveTextContent('Completed tasks')
+  expect(completedTasksSection).toHaveTextContent('Completed')
 
   const taskItems = within(completedTasksSection).getAllByTestId('task-item')
   expect(taskItems).toHaveLength(1)
@@ -100,7 +100,7 @@ it('renders default sections', () => {
 
   const completedTasksSection = screen.getByTestId('completed-tasks-section')
   expect(completedTasksSection).toBeInTheDocument()
-  expect(completedTasksSection).toHaveTextContent('Completed tasks')
+  expect(completedTasksSection).toHaveTextContent('Completed')
 
   const taskItems = within(completedTasksSection).getAllByTestId('task-item')
   expect(taskItems).toHaveLength(1)

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

@@ -6,10 +6,9 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import styled from 'styled-components'
 
 import { useAppDispatch, useAppSelector, usePrevious } from '../../app/hooks'
-import { RoundButton, SubTitle } from '../../common/components'
+import { SubTitle } from '../../common/components'
 import { SectionModel, TaskModel, tasksGroupCollapsed } from './tasks-slice'
 
-import { ChevronDownIcon, ChevronUpIcon } from '../../common/components/icons'
 import TaskItem from './TaskItem'
 
 const SectionHeader = styled.div`
@@ -26,7 +25,7 @@ const InnerTasksContainer = styled.div`
   flex-direction: column;
 
   & > *:not(:last-child) {
-    margin-bottom: 7px;
+    margin-bottom: 9px;
   }
 `
 
@@ -101,12 +100,7 @@ const TasksSection: React.FC<TasksSectionProps> = ({ groupName, tasks, section,
         {(provided) => (
           <Wrapper>
             <SectionHeader>
-              <SubTitle>{section.name}</SubTitle>
+              <SubTitle onClick={handleCollapse}>{section.name}</SubTitle>
-              {tasks.length > 0 && (
-                <RoundButton onClick={handleCollapse} size="small">
-                  {!collapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                </RoundButton>
-              )}
             </SectionHeader>
             {!collapsed && (
               <InnerTasksContainer

packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/tasks-slice.ts

@@ -5,11 +5,11 @@ export const LATEST_SCHEMA_VERSION = '1.0.0'
 export const DEFAULT_SECTIONS: SectionModel[] = [
   {
     id: 'open-tasks',
-    name: 'Open tasks',
+    name: 'Open',
   },
   {
     id: 'completed-tasks',
-    name: 'Completed tasks',
+    name: 'Completed',
   },
 ]
 

packages/components/src/Packages/Editors/org.standardnotes.simple-task-editor/app/stylesheets/main.scss

@@ -85,7 +85,7 @@ body {
    left: 0;
    height: 10px;
    width: 10px;
-   border-radius: 1px;
+   border-radius: 10px;
    background-color: var(--sn-stylekit-contrast-background-color);;
    border: 1px solid var(--sn-stylekit-contrast-border-color);
 

packages/features/src/Domain/Lists/ExperimentalFeatures.ts

@@ -8,7 +8,7 @@ import { FillEditorComponentDefaults } from './Utilities/FillEditorComponentDefa
 export function experimentalFeatures(): FeatureDescription[] {
   const advancedChecklist: EditorFeatureDescription = FillEditorComponentDefaults({
     availableInSubscriptions: [SubscriptionName.PlusPlan, SubscriptionName.ProPlan],
-    name: 'Advanced Checklist [Alpha]',
+    name: 'Advanced Checklist [Beta]',
     identifier: FeatureIdentifier.AdvancedChecklist,
     note_type: NoteType.Task,
     spellcheckControl: true,

yarn.lock

@@ -6403,6 +6403,7 @@ __metadata:
     "@standardnotes/eslint-config-extensions": ^1.0.4
     "@standardnotes/features": "workspace:*"
     "@standardnotes/styles": "workspace:*"
+    "@standardnotes/utils": "workspace:*"
     copy-webpack-plugin: ^11.0.0
     mini-css-extract-plugin: ^2.6.0
     minimatch: ^5.1.0