Dev

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.44.0",
+    "cronstrue": "^2.47.0",
     "parse-json": "^8.1.0",
     "preact": "^10.19.2",
     "react-hint": "^3.2.1",
@@ -26,10 +26,10 @@
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.23.4",
     "@babel/preset-typescript": "^7.23.3",
-    "@evilmartians/lefthook": "^1.5.4",
+    "@evilmartians/lefthook": "^1.5.5",
     "@types/css-modules": "^1.0.5",
     "@types/jest": "^29.5.10",
-    "@types/node": "^20.10.1",
+    "@types/node": "^20.10.2",
     "@types/react-hint": "^3.2.3",
     "@types/react-modal": "^3.16.3",
     "@types/wicg-file-system-access": "^2023.10.4",
@@ -41,15 +41,15 @@
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "css-mqpacker-webpack-plugin": "^0.14.0",
-    "eslint": "^8.54.0",
+    "eslint": "^8.55.0",
     "eslint-plugin-react": "^7.33.2",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "html-inline-css-webpack-plugin": "^1.11.2",
     "html-webpack-plugin": "^5.5.3",
     "jest": "^29.7.0",
     "mini-css-class-name": "^0.15.0",
     "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.32",
     "postcss-import": "^15.1.0",
     "postcss-loader": "^7.3.3",
     "postcss-simple-vars": "^7.0.1",

src/components/DownloadButton/util.ts

@@ -3,6 +3,7 @@ export const isSupportFilePicker = typeof showSaveFilePicker === 'function';
 export const saveFile = async (content: string): Promise<void> => {
   const file = await showSaveFilePicker({
     suggestedName: 'jobs.config',
+    startIn: 'desktop',
   });
 
   const writable = await file.createWritable();

src/components/Editor/Buttons.tsx

@@ -1,6 +1,6 @@
 import { useStoreon } from '../../store';
 import { Button } from '../Button';
-import { Toolbar } from '../Toolbar';
+import { ToolbarWrapper, ToolbarHint } from '../Toolbar';
 import { IconPlus } from '../Icons/IconPlus';
 import { IconUpload } from '../Icons/IconUpload';
 import { MAX_ITEMS, ROUTER } from '../../constants';
@@ -17,24 +17,24 @@ export const Buttons: FC = () => {
   };
 
   return (
-    <Toolbar.Wrapper>
-      <Toolbar.Hint label="You can configure up to 20 jobs">
+    <ToolbarWrapper>
+      <ToolbarHint label="You can configure up to 20 jobs">
         <Button
           onClick={createItem}
           disabled={items.length >= MAX_ITEMS}
         >
           <IconPlus />
           {' New Job'}
         </Button>
-      </Toolbar.Hint>
-      <Toolbar.Hint label="Upload your config">
+      </ToolbarHint>
+      <ToolbarHint label="Upload your config">
         <Button
           onClick={openUploadModal}
           aria-label="Upload your config"
         >
           <IconUpload />
         </Button>
-      </Toolbar.Hint>
-    </Toolbar.Wrapper>
+      </ToolbarHint>
+    </ToolbarWrapper>
   );
 };

src/components/Icons/IconThreeDots.tsx

@@ -1,9 +1,8 @@
 export const IconThreeDots: FC = () => (
   <svg
-    width="18"
-    height="18"
+    width="24"
+    height="24"
     fill="currentcolor"
-    viewBox="0 0 24 24"
   >
     <path d="M6 12.5c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5zm5 0c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5zm5 0c0-.828.666-1.5 1.5-1.5.828 0 1.5.666 1.5 1.5 0 .828-.666 1.5-1.5 1.5-.828 0-1.5-.666-1.5-1.5z"/>
   </svg>

src/components/Jobs/Cron.tsx

@@ -17,7 +17,7 @@ export const Cron: FC<Props> = ({ value, error }) => {
   }, [error]);
 
   return (
-    <Label top="A valid cron expression">
+    <Label top="Cron Expression">
       <input
         ref={ref}
         type="text"

src/components/Jobs/CronExamples.css

@@ -1,8 +1,6 @@
 @import url("../../styles/vars.css");
 
 .btn {
-  width: 24px;
-  height: 24px;
   vertical-align: middle;
   color: $color-primary;
   border: 1px solid $color-primary;

src/components/Preview/index.tsx

@@ -3,7 +3,7 @@ import { useRef } from 'preact/hooks';
 import s from './styles.css';
 import { useStoreon } from '../../store';
 import { Button } from '../Button';
-import { Toolbar } from '../Toolbar';
+import { ToolbarWrapper, ToolbarHint } from '../Toolbar';
 import { JSON } from './JSON';
 import { DownloadButton } from '../DownloadButton';
 import { IconDuplicate } from '../Icons/IconDuplicate';
@@ -36,20 +36,20 @@ export const Preview: FC = () => {
 
   return (
     <div className={s.box}>
-      <Toolbar.Wrapper>
-        <Toolbar.Hint label="Copy to clipboard">
+      <ToolbarWrapper>
+        <ToolbarHint label="Copy to clipboard">
           <Button onClick={clipboard}>
             <IconDuplicate />
             Copy Code
           </Button>
-        </Toolbar.Hint>
-        <Toolbar.Hint label="Download a file">
+        </ToolbarHint>
+        <ToolbarHint label="Download a file">
           <DownloadButton
             label="Download a file"
             data={data}
           />
-        </Toolbar.Hint>
-      </Toolbar.Wrapper>
+        </ToolbarHint>
+      </ToolbarWrapper>
       <pre
         ref={output}
         className={s.out}