Merge pull request #119 from shoonia/update-styles

Update styles

package.json

@@ -17,7 +17,7 @@
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.47.0",
     "parse-json": "^8.1.0",
-    "preact": "^10.19.2",
+    "preact": "^10.19.3",
     "react-hint": "^3.2.1",
     "react-modal": "^3.16.1",
     "storeon": "^3.1.5",
@@ -33,8 +33,8 @@
     "@types/react-hint": "^3.2.3",
     "@types/react-modal": "^3.16.3",
     "@types/wicg-file-system-access": "^2023.10.4",
-    "@typescript-eslint/eslint-plugin": "^6.16.0",
-    "@typescript-eslint/parser": "^6.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "autoprefixer": "^10.4.16",
     "babel-loader": "^9.1.3",
     "copy-webpack-plugin": "^11.0.0",

src/components/Button/BlankButton.tsx

@@ -1,10 +1,10 @@
-import type { ComponentChildren } from 'preact';
+import type { JSX, ComponentChildren } from 'preact';
 
 import s from './styles.css';
 import { classNames } from '../../util/component';
 
 interface Props {
-  onClick?: EventListener;
+  onClick?: JSX.MouseEventHandler<HTMLButtonElement>;
   children?: ComponentChildren;
   className?: string;
   [key: string]: unknown;

src/components/Header/StandWithUkraine.tsx

@@ -2,14 +2,14 @@ import s from './styles.css';
 
 export const StandWithUkraine: FC = () => (
   <div className={s.swu_box}>
-    <svg aria-label="stand with ukraine" viewBox="0 0 3 2" width="1.4em">
-      <path d="M0 0h3v1H0z" fill="#005bbb" />
-      <path d="M0 1h3v1H0z" fill="#ffd500" />
-    </svg>
     <a
       href="https://www.wix.com/stands-with-ukraine"
       className={s.swu_link}
     >
+      <svg aria-label="the national flag of Ukraine" viewBox="0 0 3 2" width="1.4em">
+        <path d="M0 0h3v1H0z" fill="#005bbb" />
+        <path d="M0 1h3v1H0z" fill="#ffd500" />
+      </svg>
       Support Ukraine
     </a>
   </div>

src/components/Header/styles.css

@@ -69,7 +69,6 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 1em;
   border-top: $decorate-border;
   border-bottom: $decorate-border;
   background-color: #eaf8ff;
@@ -78,8 +77,8 @@
 
 .swu_link {
   composes: link;
-  height: $swu-h;
-  line-height: $swu-h;
+  display: flex;
+  gap: 1em;
 }
 
 @media (max-width: $mobile-width) {

src/components/Jobs/PeriodButton.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from 'preact';
+
 import s from './styles.css';
 import type { PERIOD } from '../../constants';
 
@@ -7,9 +9,9 @@ interface Props {
   period: PERIOD;
 }
 
-const handlerClick = (event: KeyboardEvent): void => {
+const handlerClick: JSX.KeyboardEventHandler<HTMLLabelElement> = (event) => {
   if (event.key === 'Enter' || event.key === ' ') {
-    const el = event.target as HTMLElement;
+    const el = event.currentTarget;
 
     if (el.firstChild instanceof HTMLElement) {
       el.firstChild.click();

src/components/Tooltip/CronExamplesTooltip/index.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from 'preact';
+
 import s from './styles.css';
 import cronExamples from './cronExamples.json';
 import { useStoreon } from '../../../store';
@@ -12,18 +14,15 @@ interface Props {
 export const CronExamplesTooltip: FC<Props> = ({ target }) => {
   const { items, dispatch } = useStoreon('items');
 
-  const { id } = target.dataset;
+  const id = target.dataset.id || '';
   const { cronExpression } = items.find((i) => i.id === id) || {};
 
-  const onClick: EventListener = (event) => {
-    const el = event.target as HTMLButtonElement;
-
+  const onClick: JSX.MouseEventHandler<HTMLButtonElement> = (event) =>
     dispatch('items/update', {
-      id: id || '',
+      id,
       name: KEYS.cronExpression,
-      value: el.value,
+      value: event.currentTarget.value,
     });
-  };
 
   const list = cronExamples.map((i) => {
     const classList = classNames([

src/components/UploadFile/index.tsx

@@ -1,3 +1,5 @@
+import type { JSX } from 'preact';
+
 import s from './styles.css';
 import { readFile } from './readFile';
 import { classNames } from '../../util/component';
@@ -9,11 +11,8 @@ interface Props {
 }
 
 export const UploadFile: FC<Props> = ({ className, onLoad }) => {
-  const onChange: EventListener = (event) => {
-    const el = event.target as HTMLInputElement;
-
-    readFile(el.files).then(onLoad);
-  };
+  const onChange: JSX.GenericEventHandler<HTMLInputElement> = (event) =>
+    readFile(event.currentTarget.files).then(onLoad);
 
   return (
     <label