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

2022-07-06 17:27:22 -04:00
parent bfba5b8d4f
commit f7ba6588a7
13 changed files with 27 additions and 28 deletions
--- a/packages/components/package.json
+++ b/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",
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/package.json
+++ b/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",
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/common/components/ConfirmDialog.tsx
+++ b/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"
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/common/components/SubTitle.tsx
+++ b/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;
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/common/components/svg/CheckBoxElementsDefs.scss
+++ b/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;
-  height: 19px;
+  fill: var(--sn-stylekit-contrast-background-color);
+  height: 18px;
  left: 0;
  margin: auto;
  position: absolute;
  stroke-linecap: round;
  stroke-linejoin: round;
-  stroke-width: 2;
-  stroke: var(--sn-stylekit-neutral-color);
+  stroke-width: 1;
  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 {
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/MigrateLegacyContent.tsx
+++ b/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>
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/TaskGroup.tsx
+++ b/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}
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/TaskSectionList.test.tsx
+++ b/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)
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/TasksSection.tsx
+++ b/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>
-              {tasks.length > 0 && (
-                <RoundButton onClick={handleCollapse} size="small">
-                  {!collapsed ? <ChevronUpIcon /> : <ChevronDownIcon />}
-                </RoundButton>
-              )}
+              <SubTitle onClick={handleCollapse}>{section.name}</SubTitle>
            </SectionHeader>
            {!collapsed && (
              <InnerTasksContainer
--- a/packages/components/src/Packages/Editors/org.standardnotes.advanced-checklist/src/features/tasks/tasks-slice.ts
+++ b/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',
  },
 ]

--- a/packages/components/src/Packages/Editors/org.standardnotes.simple-task-editor/app/stylesheets/main.scss
+++ b/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);

--- a/packages/features/src/Domain/Lists/ExperimentalFeatures.ts
+++ b/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,
--- a/yarn.lock
+++ b/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