use Prettier

2022-02-05 01:25:59 +01:00
parent 0b95d65898
commit 8223211d6a
30 changed files with 1072 additions and 713 deletions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -0,0 +1,6 @@
+{
+  "bracketSameLine": true,
+  "tabWidth": 4,
+  "semi": false,
+  "singleQuote": true
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,9 @@
        "preact": "^10.3.2",
        "preact-cli-tailwind": "^3.0.0",
        "preact-render-to-string": "^5.1.4",
-        "preact-router": "^3.2.1"
+        "preact-router": "^3.2.1",
+        "prettier": "^2.5.1",
+        "prettier-plugin-tailwindcss": "^0.1.5"
      },
      "devDependencies": {
        "enzyme": "^3.10.0",
@@ -16065,6 +16067,28 @@
        "node": ">=4"
      }
    },
+    "node_modules/prettier": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.5.tgz",
+      "integrity": "sha512-e+jTxwiHL4I3Ot8OjV1LAiiaAx0Zgy71xTL7xNmJtNmhpja7GKzFSAoulqBDS1D57B7lbZDCvDEKIWIQSBUmBQ==",
+      "engines": {
+        "node": ">=12.17.0"
+      },
+      "peerDependencies": {
+        "prettier": ">=2.2.0"
+      }
+    },
    "node_modules/pretty-bytes": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
@@ -34427,6 +34451,17 @@
      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
      "dev": true
    },
+    "prettier": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg=="
+    },
+    "prettier-plugin-tailwindcss": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.1.5.tgz",
+      "integrity": "sha512-e+jTxwiHL4I3Ot8OjV1LAiiaAx0Zgy71xTL7xNmJtNmhpja7GKzFSAoulqBDS1D57B7lbZDCvDEKIWIQSBUmBQ==",
+      "requires": {}
+    },
    "pretty-bytes": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-4.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -31,7 +31,9 @@
    "preact": "^10.3.2",
    "preact-cli-tailwind": "^3.0.0",
    "preact-render-to-string": "^5.1.4",
-    "preact-router": "^3.2.1"
+    "preact-router": "^3.2.1",
+    "prettier": "^2.5.1",
+    "prettier-plugin-tailwindcss": "^0.1.5"
  },
  "jest": {
    "preset": "jest-preset-preact",
--- a/size-plugin.json
+++ b/size-plugin.json
--- a/src/Contexts.js
+++ b/src/Contexts.js
@@ -1,23 +1,43 @@
-import { createContext } from "preact";
-import usePlants from "./hooks/PlantsHook";
-import { useLocalStorage } from "./hooks/LocalStorageHook"
-import useUser from "./hooks/UserHook";
-import {TranslateProvider} from "./components/Translation";
+import { createContext } from 'preact'
+import usePlants from './hooks/PlantsHook'
+import { useLocalStorage } from './hooks/LocalStorageHook'
+import useUser from './hooks/UserHook'
+import { TranslateProvider } from './components/Translation'

 export const UserContext = createContext(null)
 export const PlantsContext = createContext(null)

-export default function ContextsProviders({children}) {
-
+export default function ContextsProviders({ children }) {
    const [data, setData] = useLocalStorage('data', {})
    const [user, setUser] = useUser(data, setData)
-    const {plants, addPlant, editPlant, removePlant, addAction, doneTask, history, archivedEntries} = usePlants(data, setData)
+    const {
+        plants,
+        addPlant,
+        editPlant,
+        removePlant,
+        addAction,
+        doneTask,
+        history,
+        archivedEntries,
+    } = usePlants(data, setData)

-    return <TranslateProvider>
-        <UserContext.Provider value={[user, setUser]}>
-            <PlantsContext.Provider value={{plants, addPlant, editPlant, removePlant, addAction, doneTask, history, archivedEntries}}>
-                {children}
-            </PlantsContext.Provider>
-        </UserContext.Provider>
-    </TranslateProvider>
+    return (
+        <TranslateProvider>
+            <UserContext.Provider value={[user, setUser]}>
+                <PlantsContext.Provider
+                    value={{
+                        plants,
+                        addPlant,
+                        editPlant,
+                        removePlant,
+                        addAction,
+                        doneTask,
+                        history,
+                        archivedEntries,
+                    }}>
+                    {children}
+                </PlantsContext.Provider>
+            </UserContext.Provider>
+        </TranslateProvider>
+    )
 }
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,31 +1,30 @@
-import { h } from 'preact';
-import { Router } from 'preact-router';
-import ContextsProviders from '../Contexts';
-import Header from './Header';
-
+import { h } from 'preact'
+import { Router } from 'preact-router'
+import ContextsProviders from '../Contexts'
+import Header from './Header'

 // Code-splitting is automated for `routes` directory
-import Home from '../routes/Home';
-import Plant from '../routes/Plant';
-import Profile from '../routes/Profile';
-import Style from "../routes/Style";
+import Home from '../routes/Home'
+import Plant from '../routes/Plant'
+import Profile from '../routes/Profile'
+import Style from '../routes/Style'

 const App = () => {
+    return (
+        <div id="app" className="flex h-screen flex-col overflow-auto">
+            <ContextsProviders>
+                <Header />
+                <main className="flex-1 dark:bg-gray-800 dark:text-white">
+                    <Router>
+                        <Home path="/" />
+                        <Plant path="plant/:id" />
+                        <Profile path="/profile" />
+                        <Style path="/style" />
+                    </Router>
+                </main>
+            </ContextsProviders>
+        </div>
+    )
+}

-	return (
-	<div id="app" className="h-screen overflow-auto flex flex-col">
-		<ContextsProviders>
-			<Header />
-			<main className="flex-1 dark:bg-gray-800 dark:text-white">
-				<Router>
-					<Home path="/" />
-					<Plant path="plant/:id" />
-					<Profile path="/profile" />
-					<Style path="/style" />
-				</Router>
-			</main>
-		</ContextsProviders>
-	</div>
-)}
-
-export default App;
+export default App
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -1,19 +1,31 @@
-import { classNames } from "../utilities/classNames"
-
-export const Button = ({ children, className = "", type = "button", ...props }) => {
-
-  return (
-    <button type={type} className={classNames("border px-2 py-1 shadow transition-all duration-300 rounded hover:ring-2 focus:ring-2 ring-offset disabled:opacity-50 disabled:cursor-not-allowed", className)} {...props}>
-      {children}
-    </button>
-  )
+export const Button = ({
+    children,
+    className = '',
+    type = 'button',
+    ...props
+}) => {
+    return (
+        <button
+            type={type}
+            className={`ring-offset rounded border px-2 py-1 shadow transition-all duration-300 hover:ring-2 focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
+            {...props}>
+            {children}
+        </button>
+    )
 }

-export const SmallButton =  ({ children, className = "", type = "button", ...props }) => {
-
-  return (
-      <button type={type} className={classNames("border border-white flex items-center justify-center w-6 h-6 shadow transition-all duration-300 rounded-full cursor-pointer", className)} {...props}>
-        {children}
-      </button>
-  )
+export const SmallButton = ({
+    children,
+    className = '',
+    type = 'button',
+    ...props
+}) => {
+    return (
+        <button
+            type={type}
+            className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-white shadow transition-all duration-300 ${className}`}
+            {...props}>
+            {children}
+        </button>
+    )
 }
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -1,8 +1,13 @@
-import {classNames} from "../utilities/classNames";
-import {Text} from "./Translation";
-
-export const InputField = ({children, name, value = "", type = "text", textSupport = "", ...props}) => {
+import { Text } from './Translation'

+export const InputField = ({
+    children,
+    name,
+    value = '',
+    type = 'text',
+    textSupport = '',
+    ...props
+}) => {
    const id = props.id ?? name
    const classStyle = props.className ?? ''

@@ -10,22 +15,31 @@ export const InputField = ({children, name, value = "", type = "text", textSuppo
        delete props.className
    }

-    return <fieldset className={classNames(classStyle)}>
-        {children && <label htmlFor={id} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-            { children }
-        </label>}
-        <input id={id}
-               name={name}
-               type={type}
-               value={value}
-               className="focus:ring-indigo-500 focus:border-indigo-500 block w-full px-2 py-1 mt-1 sm:text-sm border border-gray-300 rounded-md dark:bg-gray-500"
-               {...props}/>
-        <span className="text-gray-500 text-sm"><Text text={textSupport} /></span>
-    </fieldset>
+    return (
+        <fieldset className={classStyle}>
+            {children && (
+                <label
+                    htmlFor={id}
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {children}
+                </label>
+            )}
+            <input
+                id={id}
+                name={name}
+                type={type}
+                value={value}
+                className="mt-1 block w-full rounded-md border border-gray-300 px-2 py-1 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-500 sm:text-sm"
+                {...props}
+            />
+            <span className="text-sm text-gray-500">
+                <Text text={textSupport} />
+            </span>
+        </fieldset>
+    )
 }

-export const TextAreaField = ({children, name, ...props}) => {
-
+export const TextAreaField = ({ children, name, ...props }) => {
    const id = props.id ?? name
    const classStyle = props.className ?? ''

@@ -33,29 +47,54 @@ export const TextAreaField = ({children, name, ...props}) => {
        delete props.className
    }

-    return <fieldset className={classNames(classStyle)}>
-        {children && <label htmlFor={id} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-            { children }
-        </label>}
-        <textarea id={id}
-                  name={name}
-                  className="focus:ring-indigo-500 focus:border-indigo-500 block w-full px-2 py-1 mt-1 sm:text-sm border border-gray-300 dark:bg-gray-500 rounded-md"
-                  {...props}
-        />
-    </fieldset>
+    return (
+        <fieldset className={classStyle}>
+            {children && (
+                <label
+                    htmlFor={id}
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {children}
+                </label>
+            )}
+            <textarea
+                id={id}
+                name={name}
+                className="mt-1 block w-full rounded-md border border-gray-300 px-2 py-1 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-500 sm:text-sm"
+                {...props}
+            />
+        </fieldset>
+    )
 }

-export const SelectField = ({children, name, options, className = '', ...props}) => {
-
+export const SelectField = ({
+    children,
+    name,
+    options,
+    className = '',
+    ...props
+}) => {
    const id = props.id ?? name

-    return <fieldset className={className}>
-        {children && <label htmlFor={id} className="block text-sm font-medium text-gray-700 dark:text-gray-300">
-            { children }
-        </label>}
-        <select id={id} name={name} className="focus:ring-indigo-500 focus:border-indigo-500 block w-full px-2 py-1 mt-1 sm:text-sm border border-gray-300 dark:bg-gray-500 rounded-md" {...props}>
-            {options.map((option, index) => <option key={index} value={option}
-                                                         className="capitalize"><Text text={option} /></option>)}
-        </select>
-    </fieldset>
+    return (
+        <fieldset className={className}>
+            {children && (
+                <label
+                    htmlFor={id}
+                    className="block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    {children}
+                </label>
+            )}
+            <select
+                id={id}
+                name={name}
+                className="mt-1 block w-full rounded-md border border-gray-300 px-2 py-1 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-500 sm:text-sm"
+                {...props}>
+                {options.map((option, index) => (
+                    <option key={index} value={option} className="capitalize">
+                        <Text text={option} />
+                    </option>
+                ))}
+            </select>
+        </fieldset>
+    )
 }
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,30 +1,33 @@
-import { Link } from "preact-router/match"
-import {Text} from "./Translation"
+import { Link } from 'preact-router/match'
+import { Text } from './Translation'

 const Header = () => {
-  return (
-    <header className="bg-primary text-white flex justify-between items-center p-2 text-lg">
-      <Link href="/" class="font-bold text-xl cursor-pointer">
-        <Text text="Plantes" />
-      </Link>
-      <nav className="flex gap-2">
-        <NavLink path="/style"><Text text="Style" /></NavLink>
-        <NavLink path="/profile"><Text text="Me" /></NavLink>
-      </nav>
-    </header>
-  )
+    return (
+        <header className="flex items-center justify-between bg-primary p-2 text-lg text-white">
+            <Link href="/" class="cursor-pointer text-xl font-bold">
+                <Text text="Plantes" />
+            </Link>
+            <nav className="flex gap-2">
+                <NavLink path="/style">
+                    <Text text="Style" />
+                </NavLink>
+                <NavLink path="/profile">
+                    <Text text="Me" />
+                </NavLink>
+            </nav>
+        </header>
+    )
 }

 export default Header

 const NavLink = ({ path, children }) => {
-  return (
-    <Link
-      href={path}
-      activeClassName="font-bold bg-primary-dark"
-      class="py-1 px-2 rounded cursor-pointer"
-    >
-      {children}
-    </Link>
-  )
+    return (
+        <Link
+            href={path}
+            activeClassName="font-bold bg-primary-dark"
+            class="cursor-pointer rounded py-1 px-2">
+            {children}
+        </Link>
+    )
 }
--- a/src/components/Modals.js
+++ b/src/components/Modals.js
@@ -1,33 +1,52 @@
-import {Text} from "./Translation";
+import { Text } from './Translation'

-export const Modal = ({children, isOpen, customClose = false, ...props}) => {
+export const Modal = ({ children, isOpen, customClose = false, ...props }) => {
+    const handleClose = (e) => props.onChange(e)

-    const handleClose = e => props.onChange(e)
-
-    return <>
-        {isOpen &&
-            <div className="overlay fixed block top-0 bottom-0 left-0 right-0 z-10 bg-gray-800 bg-opacity-80" onClick={handleClose}>
-                <div className="h-full flex justify-center items-center">
-                    <div className="flex flex-col bg-white dark:bg-gray-700 dark:text-white rounded p-2 min-h-48 min-w-48" {...props}>
-                        <div className="flex-1">
-                            {children}
+    return (
+        <>
+            {isOpen && (
+                <div
+                    className="overlay fixed top-0 bottom-0 left-0 right-0 z-10 block bg-gray-800 bg-opacity-80"
+                    onClick={handleClose}>
+                    <div className="flex h-full items-center justify-center">
+                        <div
+                            className="flex min-h-48 min-w-48 flex-col rounded bg-white p-2 dark:bg-gray-700 dark:text-white"
+                            {...props}>
+                            <div className="flex-1">{children}</div>
+                            {!customClose && (
+                                <div className="flex justify-end">
+                                    <button
+                                        type="button"
+                                        className="close-button rounded bg-gray-300 px-2 py-1 shadow hover:bg-gray-400 dark:bg-gray-600 hover:dark:bg-gray-800"
+                                        onClick={handleClose}>
+                                        <Text text="Close" />
+                                    </button>
+                                </div>
+                            )}
                        </div>
-                        {!customClose &&<div className="flex justify-end">
-                            <button type="button" className="bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 hover:dark:bg-gray-800 px-2 py-1 rounded shadow close-button" onClick={handleClose}><Text text="Close" /></button>
-                        </div>}
                    </div>
                </div>
-            </div>
-        }
+            )}
        </>
+    )
 }

-export const ModalTitle = ({children, ...props}) => {
-    return <div className="bg-green-700 text-white text-2xl font-bold text-center -mx-2 -mt-2 p-2 rounded-tl rounded-tr" {...props}>{children}</div>
+export const ModalTitle = ({ children, ...props }) => {
+    return (
+        <div
+            className="-mx-2 -mt-2 rounded-tl rounded-tr bg-green-700 p-2 text-center text-2xl font-bold text-white"
+            {...props}>
+            {children}
+        </div>
+    )
 }

 export const closeModal = (e, setter) => {
-    if (e.target.classList.contains("overlay") || e.target.classList.contains("close-button")) {
+    if (
+        e.target.classList.contains('overlay') ||
+        e.target.classList.contains('close-button')
+    ) {
        setter(false)
    }
 }
--- a/src/components/PageLayout.js
+++ b/src/components/PageLayout.js
@@ -1,9 +1,3 @@
-import { classNames } from "../utilities/classNames";
-
-
-export const PageLayout = ({children, ...props}) => {
-
-    return <div class={classNames("p-2", props.class ?? "")}>
-        {children}
-    </div>
+export const PageLayout = ({ children, ...props }) => {
+    return <div className={`p-2 ${props.class ?? ''}`}>{children}</div>
 }
--- a/src/components/Plants.js
+++ b/src/components/Plants.js
@@ -1,81 +1,108 @@
-import { Link } from "preact-router/match"
-import {getPicture} from "../utilities/pictures"
-import {InputField, TextAreaField} from "./Form"
-import {Button} from "./Button"
-import {useState} from "preact/hooks"
-import {Text} from "./Translation"
+import { Link } from "preact-router/match";
+import { getPicture } from "../utilities/pictures";
+import { InputField, TextAreaField } from "./Form";
+import { Button } from "./Button";
+import { useState } from "preact/hooks";
+import { Text } from "./Translation";

 export const PlantThumb = ({ plant, children }) => {
-
-    return <Link href={`/plant/${plant.id}`} class="block h-48 cursor-pointer">
-            <div className="group bg-primary-light relative rounded shadow-lg flex flex-col">
-                <img src={getPicture(plant.id)} alt="" className="object-cover h-48 w-full min-h-48 min-w-48 rounded" />
-                <div className="bg-primary group-hover:bg-primary-dark text-white p-2 text-center absolute bottom-0 w-full rounded-bl rounded-br">
-                    {children}
-                </div>
-                <div title="Actions" className="absolute right-2 top-2 rounded-full flex justify-center items-center bg-primary group-hover:bg-primary-dark w-6 h-6">
-                    {plant.actions.length}
-                </div>
-            </div>
+  return (
+    <Link href={`/plant/${plant.id}`} class="block h-48 cursor-pointer">
+      <div className="group relative flex flex-col rounded bg-primary-light shadow-lg">
+        <img
+          src={getPicture(plant.id)}
+          alt=""
+          className="h-48 min-h-48 w-full min-w-48 rounded object-cover"
+        />
+        <div className="absolute bottom-0 w-full rounded-bl rounded-br bg-primary p-2 text-center text-white group-hover:bg-primary-dark">
+          {children}
+        </div>
+        <div
+          title="Actions"
+          className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary group-hover:bg-primary-dark"
+        >
+          {plant.actions.length}
+        </div>
+      </div>
    </Link>
-}
+  );
+};

-export const PlantForm = ({children, plant, ...props}) => {
+export const PlantForm = ({ children, plant, ...props }) => {
+  const [plantForm, setPlantForm] = useState(plant);

-    const [plantForm, setPlantForm] = useState(plant)
+  return (
+    <form onSubmit={(e) => props.onChange(e, plantForm)}>
+      <InputField
+        name="name"
+        className="mb-2 mt-5"
+        value={plantForm.name}
+        onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value })}
+      >
+        <Text text="Name" />
+      </InputField>
+      <TextAreaField
+        name="description"
+        className="mb-5"
+        value={plantForm.description}
+        onChange={(e) =>
+          setPlantForm({ ...plantForm, description: e.target.value })
+        }
+      >
+        <Text text="Description" />
+      </TextAreaField>

-    return <form onSubmit={e => props.onChange(e, plantForm)}>
+      <fieldset className="mx-auto mb-5 flex max-w-[300px] gap-2">
+        <div className="flex-1">
+          <input
+            id="indoor"
+            name="indoor"
+            type="radio"
+            checked={plantForm.indoor === true}
+            onChange={() => setPlantForm({ ...plantForm, indoor: true })}
+            className="peer sr-only"
+          />
+          <label
+            htmlFor="indoor"
+            className="block w-full rounded border bg-blue-500 px-2 py-1 text-center hover:bg-blue-700 peer-checked:bg-blue-700 dark:border-white"
+          >
+            <Text text="Indoor" />
+          </label>
+        </div>

-        <InputField name="name"
-                    className="mb-2 mt-5"
-                    value={plantForm.name}
-                    onChange={(e) => setPlantForm({ ...plantForm, name: e.target.value }) }>
-            <Text text="Name" />
-        </InputField>
-        <TextAreaField name="description"
-                       className="mb-5"
-                       value={plantForm.description}
-                       onChange={(e) => setPlantForm({ ...plantForm, description: e.target.value })}>
-            <Text text="Description" />
-        </TextAreaField>
+        <div className="flex-1">
+          <input
+            id="outdoor"
+            name="outdoor"
+            type="radio"
+            checked={plantForm.indoor === false}
+            onChange={() => setPlantForm({ ...plantForm, indoor: false })}
+            className="peer sr-only"
+          />
+          <label
+            htmlFor="outdoor"
+            className="block w-full rounded border bg-blue-500 px-2 py-1 text-center hover:bg-blue-700 peer-checked:bg-blue-700 dark:border-white"
+          >
+            <Text text="Outdoor" />
+          </label>
+        </div>
+      </fieldset>

-        <fieldset className="mb-5 flex gap-2 max-w-[300px] mx-auto">
-            <div className="flex-1">
-                <input id="indoor"
-                       name="indoor"
-                       type="radio"
-                       checked={plantForm.indoor === true}
-                       onChange={() => setPlantForm({ ...plantForm, indoor: true })}
-                       className="sr-only peer"
-                />
-                <label htmlFor="indoor" className="w-full block peer-checked:bg-blue-700 bg-blue-500 hover:bg-blue-700 px-2 py-1 text-center rounded border dark:border-white">
-                    <Text text="Indoor" />
-                </label>
-            </div>
+      <InputField
+        name="spot"
+        className="mt-5"
+        value={plantForm.spot}
+        onChange={(e) => setPlantForm({ ...plantForm, spot: e.target.value })}
+      >
+        <Text text="Spot" />
+      </InputField>

-            <div className="flex-1">
-                <input id="outdoor"
-                       name="outdoor"
-                       type="radio"
-                       checked={plantForm.indoor === false}
-                       onChange={() => setPlantForm({ ...plantForm, indoor: false })}
-                       className="sr-only peer"
-                />
-                <label htmlFor="outdoor" className="w-full block peer-checked:bg-blue-700 bg-blue-500 hover:bg-blue-700 px-2 py-1 text-center rounded border dark:border-white">
-                    <Text text="Outdoor" />
-                </label>
-            </div>
-        </fieldset>
-
-        <InputField name="spot"
-                    className="mt-5"
-                    value={plantForm.spot}
-                    onChange={(e) => setPlantForm({ ...plantForm, spot: e.target.value }) }>
-            <Text text="Spot" />
-        </InputField>
-
-        <Button type="submit" className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
-            { children }
-        </Button>
+      <Button
+        type="submit"
+        className="mx-auto mt-5 mb-2 block w-full bg-green-800 px-2 py-1 text-white shadow hover:bg-green-900"
+      >
+        {children}
+      </Button>
    </form>
-}
+  );
+};
--- a/src/components/SVG.js
+++ b/src/components/SVG.js
@@ -1,29 +1,40 @@
-
-const SVGSkeleton = ({paths, viewBox = "0 0 512 512", ...props}) => {
-    return <svg xmlns="http://www.w3.org/2000/svg"
-                viewBox={viewBox}
-                fill="currentColor"
-                className={props.className ?? ''}
-                {...props}>
-        {props.title && <title>{ props.title }</title>}
-        {paths}
-    </svg>
+const SVGSkeleton = ({ paths, viewBox = '0 0 512 512', ...props }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={viewBox}
+            fill="currentColor"
+            className={props.className ?? ''}
+            {...props}>
+            {props.title && <title>{props.title}</title>}
+            {paths}
+        </svg>
+    )
 }

-export const PlusSVG = (props) => SVGSkeleton({
-    viewBox: "0 0 448 512",
-    paths: <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" />,
-    ...props
-})
+export const PlusSVG = (props) =>
+    SVGSkeleton({
+        viewBox: '0 0 448 512',
+        paths: (
+            <path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" />
+        ),
+        ...props,
+    })

-export const EditSVG = (props) => SVGSkeleton({
-    viewBox: "0 0 576 512",
-    paths: <path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z" />,
-    ...props
-})
+export const EditSVG = (props) =>
+    SVGSkeleton({
+        viewBox: '0 0 576 512',
+        paths: (
+            <path d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z" />
+        ),
+        ...props,
+    })

-export const TriangleSVG = (props) => SVGSkeleton({
-    viewBox: "0 0 320 512",
-    paths: <path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z" />,
-    ...props
-})
+export const TriangleSVG = (props) =>
+    SVGSkeleton({
+        viewBox: '0 0 320 512',
+        paths: (
+            <path d="M288.662 352H31.338c-17.818 0-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81 20.474-7.81 28.284 0l128.662 128.662c12.6 12.599 3.676 34.142-14.142 34.142z" />
+        ),
+        ...props,
+    })
--- a/src/components/Tasks.js
+++ b/src/components/Tasks.js
@@ -1,21 +1,23 @@
-import {Button} from "./Button"
-import { Link } from "preact-router/match"
-import {useContext} from "preact/hooks"
-import {PlantsContext} from "../Contexts"
-import {Text} from "./Translation"
+import { Button } from './Button'
+import { Link } from 'preact-router/match'
+import { useContext } from 'preact/hooks'
+import { PlantsContext } from '../Contexts'
+import { Text } from './Translation'

 export const Tasks = () => {
-
    const { plants, doneTask, history } = useContext(PlantsContext)

    const taskIsRequired = (action) => {
-        if (Number(action.frequency) ===  0) {
+        if (Number(action.frequency) === 0) {
            return false
        }

        if (history()[action.id]) {
            let lastTask = new Date(history()[action.id])
-            return lastTask.addDays(Number(action.frequency)).toSQLDate() < (new Date()).toSQLDate()
+            return (
+                lastTask.addDays(Number(action.frequency)).toSQLDate() <
+                new Date().toSQLDate()
+            )
        }
        return true
    }
@@ -24,31 +26,60 @@ export const Tasks = () => {
        if (history()[action.id]) {
            let lastTask = new Date(history()[action.id])
            const oneDay = 1000 * 60 * 60 * 24
-            return Math.round(((new Date()) - lastTask)/oneDay)
+            return Math.round((new Date() - lastTask) / oneDay)
        }
        return 0
    }

-    return <div className="mb-5">
-        <h1>
-            <Text text="Tasks" />
-        </h1>
-        <div>
-            {plants.map(plant => plant.actions.filter(action => taskIsRequired(action)).map(action => <div className="flex items-center gap-2 my-2">
-                <span>
-                    <Button className="bg-blue-500 hover:bg-blue-700" onClick={() => doneTask(action.id)}>
-                        <Text text="Done" />
-                    </Button>
-                </span>
-                <span className="capitalize">
-                    <Link href={`/plant/${plant.id}`} class="font-bold mr-2">{plant.name}</Link>
-                    <Text text={action.action_type} />
-                </span>
-                {Number(action.frequency) === 0
-                    ? <span><Text text="when you want" /></span>
-                    : (taskDelay(action) > 1 ? <span><Text text="since {{count}} days" count={taskDelay(action)} /></span>
-                                 : <span><Text text="every {{count}} days" count={action.frequency} /></span>)}
-            </div>))}
+    return (
+        <div className="mb-5">
+            <h1>
+                <Text text="Tasks" />
+            </h1>
+            <div>
+                {plants.map((plant) =>
+                    plant.actions
+                        .filter((action) => taskIsRequired(action))
+                        .map((action) => (
+                            <div className="my-2 flex items-center gap-2">
+                                <span>
+                                    <Button
+                                        className="bg-blue-500 hover:bg-blue-700"
+                                        onClick={() => doneTask(action.id)}>
+                                        <Text text="Done" />
+                                    </Button>
+                                </span>
+                                <span className="capitalize">
+                                    <Link
+                                        href={`/plant/${plant.id}`}
+                                        class="mr-2 font-bold">
+                                        {plant.name}
+                                    </Link>
+                                    <Text text={action.action_type} />
+                                </span>
+                                {Number(action.frequency) === 0 ? (
+                                    <span>
+                                        <Text text="when you want" />
+                                    </span>
+                                ) : taskDelay(action) > 1 ? (
+                                    <span>
+                                        <Text
+                                            text="since {{count}} days"
+                                            count={taskDelay(action)}
+                                        />
+                                    </span>
+                                ) : (
+                                    <span>
+                                        <Text
+                                            text="every {{count}} days"
+                                            count={action.frequency}
+                                        />
+                                    </span>
+                                )}
+                            </div>
+                        ))
+                )}
+            </div>
        </div>
-    </div>
+    )
 }
--- a/src/components/Translation.js
+++ b/src/components/Translation.js
@@ -1,12 +1,11 @@
-import {en} from "../lang/en"
-import {fr} from "../lang/fr"
-import {useContext, useEffect, useState} from "preact/hooks"
-import {createContext} from "preact"
+import en from '../lang/en.json'
+import fr from '../lang/fr.json'
+import { useContext, useEffect, useState } from 'preact/hooks'
+import { createContext } from 'preact'

 export const TranslateContext = createContext(null)

-export const Text = ({text, count = null}) => {
-
+export const Text = ({ text, count = null }) => {
    const lang = useContext(TranslateContext)
    const [translate, setTranslate] = useState()

@@ -27,23 +26,23 @@ export const Text = ({text, count = null}) => {
        setTranslate(text)
    }, [])

-    return <>{ translate }</>
+    return <>{translate}</>
 }

-export const TranslateProvider = ({children}) => {
-
+export const TranslateProvider = ({ children }) => {
    let translate = null
-    if (typeof navigator !== "undefined") {
+    if (typeof navigator !== 'undefined') {
        const userLang = navigator.language || navigator.userLanguage
-        if (userLang === "en") {
+        if (userLang === 'en') {
            translate = en
-        } else if (userLang === "fr") {
+        } else if (userLang === 'fr') {
            translate = fr
        }
    }

-    return <TranslateContext.Provider value={translate}>
-        { children }
-    </TranslateContext.Provider>
-
+    return (
+        <TranslateContext.Provider value={translate}>
+            {children}
+        </TranslateContext.Provider>
+    )
 }
--- a/src/hooks/LocalStorageHook.js
+++ b/src/hooks/LocalStorageHook.js
@@ -1,4 +1,4 @@
-import { useState } from "preact/hooks"
+import { useState } from 'preact/hooks'

 export const useLocalStorage = (key, initialValue) => {
    const [storedValue, setStoredValue] = useState(() => {
--- a/src/hooks/PlantsHook.js
+++ b/src/hooks/PlantsHook.js
@@ -1,46 +1,57 @@
-import { useEffect, useState } from "preact/hooks"
-import {route} from "preact-router";
-import {actionId} from "../utilities/actions";
+import { useEffect, useState } from 'preact/hooks'
+import { route } from 'preact-router'
+import { actionId } from '../utilities/actions'

 const usePlants = (data, setData) => {
    const [plants, setPlants] = useState([])

-    useEffect(() =>{
+    useEffect(() => {
        setPlants(data.plants ?? [])
    }, [])

    const addPlant = (plantForm) => {
        let plant = plantForm
-        let maxId = Math.max.apply(Math, plants.map(function(elem) { return elem.id; }))
+        let maxId = Math.max.apply(
+            Math,
+            plants.map(function (elem) {
+                return elem.id
+            })
+        )
        plant.id = maxId === -Infinity ? 1 : maxId + 1
        plant.actions = []
        setPlants([...plants, plant])
-        setData({...data, plants: [...plants, plant]})
+        setData({ ...data, plants: [...plants, plant] })
    }

    const editPlant = (plant) => {
-        let plantIndex = plants.findIndex(item => item.id === plant.id)
+        let plantIndex = plants.findIndex((item) => item.id === plant.id)
        plants[plantIndex] = plant
        savePlants(plants)
    }

    const removePlant = (plant) => {
-        plants.splice(plants.findIndex(item => item.id === plant.id), 1)
+        plants.splice(
+            plants.findIndex((item) => item.id === plant.id),
+            1
+        )
        savePlants(plants)
        route('/', true)
    }

    const addAction = (plant, action) => {
        action.id = action.action_type + '-' + plant.id
-        let actionIndex = plant.actions.findIndex(item => item.action_type === action.action_type)
-        actionIndex >= 0 ? plant.actions[actionIndex] = action
+        let actionIndex = plant.actions.findIndex(
+            (item) => item.action_type === action.action_type
+        )
+        actionIndex >= 0
+            ? (plant.actions[actionIndex] = action)
            : plant.actions.push(action)
        editPlant(plant)
    }

    const savePlants = (plants) => {
        setPlants(plants)
-        setData({...data, plants: plants})
+        setData({ ...data, plants: plants })
    }

    const doneTask = (action) => {
@@ -51,10 +62,10 @@ const usePlants = (data, setData) => {
        archived.push({
            plantId: Number(action.split('-')[1]),
            action: actionId(action.split('-')[0]),
-            time: (new Date()).toSQLDate()
+            time: new Date().toSQLDate(),
        })

-        setData({...data, history: history, archived: archived})
+        setData({ ...data, history: history, archived: archived })
    }

    const history = () => data.history ?? {}
@@ -64,7 +75,16 @@ const usePlants = (data, setData) => {
        return archived.where('plantId', plantId)
    }

-    return {plants, addPlant, editPlant, removePlant, addAction, doneTask, history, archivedEntries}
+    return {
+        plants,
+        addPlant,
+        editPlant,
+        removePlant,
+        addAction,
+        doneTask,
+        history,
+        archivedEntries,
+    }
 }

 export default usePlants
--- a/src/hooks/UserHook.js
+++ b/src/hooks/UserHook.js
@@ -1,15 +1,15 @@
-import { useEffect, useState } from "preact/hooks"
-
+import { useEffect, useState } from 'preact/hooks'

 const useUser = (data, setData) => {
-    const [user, setUser] = useState(data.user ?? {name: "me", dark_mode: false})
+    const [user, setUser] = useState(
+        data.user ?? { name: 'me', dark_mode: false }
+    )

-    useEffect(() =>{
-        setData({...data, user: user})
+    useEffect(() => {
+        setData({ ...data, user: user })
        document.querySelector('html').classList.toggle('dark', user.dark_mode)
    }, [user])

-
    return [user, setUser]
 }

--- a/src/index.js
+++ b/src/index.js
@@ -1,23 +1,25 @@
-import App from './components/App';
-import './style';
+import App from './components/App'
+import './style'

-Number.prototype.pad = function(n) {
+Number.prototype.pad = function (n) {
    return (new Array(n).join('0') + this).slice(-n)
 }

 Date.prototype.addDays = function (days) {
-    let date = new Date(this.valueOf());
-    date.setDate(date.getDate() + days);
-    return date;
+    let date = new Date(this.valueOf())
+    date.setDate(date.getDate() + days)
+    return date
 }

-Date.prototype.toFrDate = function() {
-    let month = ((this.getMonth() + 1 < 10) ? '0' : '') + (this.getMonth() + 1)
+Date.prototype.toFrDate = function () {
+    let month = (this.getMonth() + 1 < 10 ? '0' : '') + (this.getMonth() + 1)
    return `${this.getDate()}/${month}/${this.getFullYear()}`
 }

-Date.prototype.toSQLDate = function() {
-    return `${this.getFullYear()}-${Number(this.getMonth() + 1).pad(2)}-${Number(this.getDate()).pad(2)}`
+Date.prototype.toSQLDate = function () {
+    return `${this.getFullYear()}-${Number(this.getMonth() + 1).pad(
+        2
+    )}-${Number(this.getDate()).pad(2)}`
 }

 /**
@@ -26,8 +28,8 @@ Date.prototype.toSQLDate = function() {
 * @param {string} search to filter by
 * @returns {*[]}
 */
-Array.prototype.where = function(field, search) {
-    return this.filter(item => item[field] === search)
+Array.prototype.where = function (field, search) {
+    return this.filter((item) => item[field] === search)
 }

 /**
@@ -42,4 +44,4 @@ Array.prototype.sortObjectsBy = function (field, desc = false) {
        : this.sort((a, b) => a[field] > b[field])
 }

-export default App;
+export default App
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -1,10 +0,0 @@
-
-export const en = {
-    "Add": "+",
-    "Add Plant": "Add Plant",
-    "Done": "Done",
-    "Tasks": "Tasks",
-    "watering": "watering",
-    "when you want": "when you want",
-    "since {{count}} day": {one: "since {{count}} day", many: "since {{count}} days"}
-}
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -0,0 +1,12 @@
+{
+  "Add": "+",
+  "Add Plant": "Add Plant",
+  "Done": "Done",
+  "Tasks": "Tasks",
+  "watering": "watering",
+  "when you want": "when you want",
+  "since {{count}} day": {
+    "one": "since {{count}} day",
+    "many": "since {{count}} days"
+  }
+}
--- a/src/lang/fr.js
+++ b/src/lang/fr.js
@@ -1,39 +0,0 @@
-
-export const fr = {
-    "Add": "Ajouter",
-    "Add Action": "Ajouter une action",
-    "Add Plant": "Ajouter une plante",
-    "A number of days between 2 actions. You can use 0 to set no notification.": "Un nombre de jours entre deux actions. Vous pouvez utilisé le 0 pour ne pas avoir de notification.",
-    "bathing": "baigner",
-    "Close": "Fermer",
-    "Confirm delete plant": "Confirmer la suppression de la plante",
-    "Description": "Description",
-    "Dark Mode": "Mode sombre",
-    "Delete": "Supprimer",
-    "Delete Plant ?": "Supprimer la plante ?",
-    "Done": "Fait",
-    "Download": "Télécharger",
-    "Download config": "Télécharger votre vos données",
-    "Edit": "Editer",
-    "Edit Plant": "Editer la plante",
-    "every {{count}} days": {one: "tous les jours", many: "tous les {{count}} jours"},
-    "Frequency": "Fréquence",
-    "Indoor": "Intérieur",
-    "last task": "dernière fois",
-    "Me": "Moi",
-    "Name": "Nom",
-    "never": "jamais",
-    "Outdoor": "Extérieur",
-    "Plantes": "Plantes",
-    "Plants": "Plantes",
-    "{{count}} Plants": "{{count}} Plantes",
-    "Profile": "Profile",
-    "Spot": "Emplacement",
-    "Spot:": "Emplacement : ",
-    "spraying": "asperger",
-    "Style": "Style",
-    "Tasks": "Tâches",
-    "watering": "arrossage",
-    "when you want": "quand je veux",
-    "since {{count}} days": {one: "depuis {{count}} jour", many: "depuis {{count}} jours"}
-}
--- a/src/lang/fr.json
+++ b/src/lang/fr.json
@@ -0,0 +1,45 @@
+{
+  "Add": "Ajouter",
+  "Add Action": "Ajouter une action",
+  "Add Plant": "Ajouter une plante",
+  "A number of days between 2 actions. You can use 0 to set no notification.":
+  "Un nombre de jours entre deux actions. Vous pouvez utilisé le 0 pour ne pas avoir de notification.",
+  "bathing": "baigner",
+  "Close": "Fermer",
+  "Confirm delete plant": "Confirmer la suppression de la plante",
+  "Description": "Description",
+  "Dark Mode": "Mode sombre",
+  "Delete": "Supprimer",
+  "Delete Plant ?": "Supprimer la plante ?",
+  "Done": "Fait",
+  "Download": "Télécharger",
+  "Download config": "Télécharger votre vos données",
+  "Edit": "Editer",
+  "Edit Plant": "Editer la plante",
+  "every {{count}} days": {
+    "one": "tous les jours",
+    "many": "tous les {{count}} jours"
+  },
+  "Frequency": "Fréquence",
+  "Indoor": "Intérieur",
+  "last task": "dernière fois",
+  "Me": "Moi",
+  "Name": "Nom",
+  "never": "jamais",
+  "Outdoor": "Extérieur",
+  "Plantes": "Plantes",
+  "Plants": "Plantes",
+  "{{count}} Plants": "{{count}} Plantes",
+  "Profile": "Profile",
+  "Spot": "Emplacement",
+  "Spot:": "Emplacement : ",
+  "spraying": "asperger",
+  "Style": "Style",
+  "Tasks": "Tâches",
+  "watering": "arrosage",
+  "when you want": "quand je veux",
+  "since {{count}} days": {
+    "one": "depuis {{count}} jour",
+    "many": "depuis {{count}} jours"
+  }
+}
--- a/src/routes/Home.js
+++ b/src/routes/Home.js
@@ -1,52 +1,59 @@
-import { createPortal } from "preact/compat"
-import { useContext, useState } from "preact/hooks"
-import {closeModal, Modal, ModalTitle} from "../components/Modals"
-import { PageLayout } from "../components/PageLayout"
-import {PlantForm, PlantThumb} from "../components/Plants"
-import { PlantsContext } from "../Contexts"
-import {Tasks} from "../components/Tasks"
-import {Text} from "../components/Translation";
+import { createPortal } from 'preact/compat'
+import { useContext, useState } from 'preact/hooks'
+import { closeModal, Modal, ModalTitle } from '../components/Modals'
+import { PageLayout } from '../components/PageLayout'
+import { PlantForm, PlantThumb } from '../components/Plants'
+import { PlantsContext } from '../Contexts'
+import { Tasks } from '../components/Tasks'
+import { Text } from '../components/Translation'

 export const Home = () => {
-  const [addModal, setAddModal] = useState(false)
-  const { plants, addPlant } = useContext(PlantsContext)
+    const [addModal, setAddModal] = useState(false)
+    const { plants, addPlant } = useContext(PlantsContext)

-  const handleSubmit = (e, plantForm) => {
-    e.preventDefault()
-    e.stopPropagation()
-    addPlant(plantForm)
-    setAddModal(false)
-  }
+    const handleSubmit = (e, plantForm) => {
+        e.preventDefault()
+        e.stopPropagation()
+        addPlant(plantForm)
+        setAddModal(false)
+    }

-  return (
-    <PageLayout class="relative">
+    return (
+        <PageLayout class="relative">
+            <Tasks />

-      <Tasks />
+            <h1>
+                <Text text="Plants" />
+            </h1>
+            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+                {plants.map((plant) => (
+                    <PlantThumb plant={plant}>{plant.name}</PlantThumb>
+                ))}
+            </div>
+            <div className="sticky bottom-5 flex w-full justify-end">
+                <div
+                    onClick={() => setAddModal(true)}
+                    className="flex h-16 w-16 cursor-pointer items-center justify-center rounded-full bg-primary text-white shadow hover:bg-primary-dark">
+                    <Text text="+" />
+                </div>
+            </div>

-      <h1><Text text="Plants" /></h1>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
-        {plants.map((plant) => (
-          <PlantThumb plant={plant}>{plant.name}</PlantThumb>
-        ))}
-      </div>
-      <div className="w-full sticky bottom-5 flex justify-end">
-        <div onClick={() => setAddModal(true)}
-          className="rounded-full shadow w-16 h-16 flex items-center justify-center cursor-pointer bg-primary hover:bg-primary-dark text-white">
-          <Text text="+" />
-        </div>
-      </div>
-
-      {typeof window !== "undefined" && createPortal(
-        <Modal isOpen={addModal} onChange={e => closeModal(e, setAddModal)}>
-            <ModalTitle>
-                <Text text="Add Plant" />
-            </ModalTitle>
-            <PlantForm plant={{}} onChange={handleSubmit}><Text text="Add" /></PlantForm>
-        </Modal>,
-        document.getElementById('app')
-      )}
-    </PageLayout>
-  )
+            {typeof window !== 'undefined' &&
+                createPortal(
+                    <Modal
+                        isOpen={addModal}
+                        onChange={(e) => closeModal(e, setAddModal)}>
+                        <ModalTitle>
+                            <Text text="Add Plant" />
+                        </ModalTitle>
+                        <PlantForm plant={{}} onChange={handleSubmit}>
+                            <Text text="Add" />
+                        </PlantForm>
+                    </Modal>,
+                    document.getElementById('app')
+                )}
+        </PageLayout>
+    )
 }

 export default Home
--- a/src/routes/Plant.js
+++ b/src/routes/Plant.js
@@ -1,32 +1,38 @@
-import {createPortal, useRef} from "preact/compat"
-import { useContext, useEffect, useState } from "preact/hooks"
-import {Button, SmallButton} from "../components/Button"
-import {closeModal, Modal, ModalTitle} from "../components/Modals"
-import { PageLayout } from "../components/PageLayout"
-import { PlantsContext } from "../Contexts"
-import {InputField, SelectField} from "../components/Form"
-import {getPicture, storePicture} from "../utilities/pictures"
-import {EditSVG, PlusSVG, TriangleSVG} from "../components/SVG"
-import {classNames} from "../utilities/classNames"
-import {PlantForm} from "../components/Plants"
-import {ACTION_TYPES, actionId} from "../utilities/actions"
-import {Text} from "../components/Translation"
-
-const Plant = ({id}) => {
+import { createPortal, useRef } from 'preact/compat'
+import { useContext, useEffect, useState } from 'preact/hooks'
+import { Button, SmallButton } from '../components/Button'
+import { closeModal, Modal, ModalTitle } from '../components/Modals'
+import { PageLayout } from '../components/PageLayout'
+import { PlantsContext } from '../Contexts'
+import { InputField, SelectField } from '../components/Form'
+import { getPicture, storePicture } from '../utilities/pictures'
+import { EditSVG, PlusSVG, TriangleSVG } from '../components/SVG'
+import { PlantForm } from '../components/Plants'
+import { ACTION_TYPES, actionId } from '../utilities/actions'
+import { Text } from '../components/Translation'

+const Plant = ({ id }) => {
    const [addModal, setAddModal] = useState(false)
    const [editModal, setEditModal] = useState(false)
    const [deleteModal, setDeleteModal] = useState(false)
-    const {plants, editPlant, removePlant, addAction, doneTask, history, archivedEntries} = useContext(PlantsContext)
+    const {
+        plants,
+        editPlant,
+        removePlant,
+        addAction,
+        doneTask,
+        history,
+        archivedEntries,
+    } = useContext(PlantsContext)
    const [plant, setPlant] = useState({})
    const archived = archivedEntries(Number(id))
    const [actionForm, setActionForm] = useState({})
-    const [image, setImage] = useState(localStorage.getItem("image" + id) ?? '')
+    const [image, setImage] = useState(localStorage.getItem('image' + id) ?? '')
    const pictureName = 'picture-' + id
    const picture = useRef(null)

    useEffect(() => {
-        const plantFind = plants.find(plant => plant.id === Number(id))
+        const plantFind = plants.find((plant) => plant.id === Number(id))
        setPlant(plantFind)
    }, [])

@@ -42,144 +48,254 @@ const Plant = ({id}) => {
        }
        addAction(plant, actionForm)
        setAddModal(false)
-      }
+    }

-      const handleEditSubmit = (e, plantForm) => {
-          e.preventDefault()
-          e.stopPropagation()
-          editPlant(plantForm)
-          setEditModal(false)
-          setPlant(plantForm)
-      }
+    const handleEditSubmit = (e, plantForm) => {
+        e.preventDefault()
+        e.stopPropagation()
+        editPlant(plantForm)
+        setEditModal(false)
+        setPlant(plantForm)
+    }

    const handleDeletePlant = () => removePlant(plant)

    const handleOpenEditModal = () => setEditModal(true)

-    const addPicture = e => storePicture(e, id)
+    const addPicture = (e) => storePicture(e, id)

-    return <PageLayout>
-        <div className="flex justify-between items-center">
-            <h1 className="my-2 flex-1 text-center">{ plant.name }</h1>
-            <div>
-                <Button className="bg-blue-500 hover:bg-blue-700 mr-2" onClick={() => handleOpenEditModal()}><Text text="Edit" /></Button>
-                <Button className="bg-red-500 hover:bg-red-700" onClick={() => setDeleteModal(true)}><Text text="Delete" /></Button>
-            </div>
-        </div>
-        <div className="flex justify-around flex-wrap gap-5">
-            <div className="relative">
-                <img id="picture" ref={picture} src={getPicture(id)} alt="" className="inline-block min-w-[300px] min-h-[200px] bg-gray-400"/>
-                <SmallButton className="absolute top-2 left-2 cursor-pointer bg-blue-500 hover:bg-blue-700 max-w-[300px]">
-                    <label className="relative">
-                        <EditSVG className="w-4 h-4 block z-10 cursor-pointer" />
-                        <input id="input-file" type="file" name="picture" className="absolute opacity-0 max-w-[300px] w-0 h-0 inline" onChange={addPicture}/>
-                    </label>
-                </SmallButton>
-            </div>
-            <div className="flex-1">
-                {plant.description && <p>{ plant.description }</p>}
-                {plant.hasOwnProperty('indoor') && <span className="inline-block bg-green-500 text-white px-2 py-1 text-sm font-semibold rounded shadow my-2"><Text text={ plant.indoor ? 'Indoor' : 'Outdoor' } /></span>}
-                {plant.spot && <p><Text text="Spot:" /> <span className="font-bold">{ plant.spot }</span></p>}
-            </div>
-        </div>
-        <div>
-            <div className="flex items-center gap-2">
-                <h2><Text text="Actions" /></h2>
-                <SmallButton className="bg-blue-500 hover:bg-blue-700 mb-2 mt-5"
-                             onClick={() => setAddModal(true)}>
-                    <PlusSVG className="w-4 h-4" />
-                </SmallButton>
-            </div>
-            {plant.actions && plant.actions.map(action => {
-                let isDone = false
-                let lastTask = false
-                if (history()[action.id]) {
-                    lastTask = new Date(history()[action.id])
-                    isDone = lastTask.addDays(Number(action.frequency)).toSQLDate() >= (new Date()).toSQLDate()
-                }
-                return <div key={action.action_type} className="flex items-center gap-2 my-2">
-                    <span>
-                        <Button className={classNames(isDone ? "bg-green-500 hover:bg-green-700" : "bg-blue-500 hover:bg-blue-700")}
-                                onClick={() => doneTask(action.id)}>
-                            <Text text="Done" />
-                        </Button>
-                    </span>
-                    <span className="capitalize font-bold"><Text text={action.action_type} /></span>
-                    {Number(action.frequency) === 0
-                        ? <span><Text text="when you want" /></span>
-                        : <span><Text text="every {{count}} days" count={action.frequency} /></span>}
-                    <span className="text-gray-500"><Text text="last task" /> {lastTask ? lastTask.toFrDate() : <Text text="never" />}</span>
-                    <ArchivedAction archived={archived.where('action', actionId(action.action_type))} />
+    return (
+        <PageLayout>
+            <div className="flex items-center justify-between">
+                <h1 className="my-2 flex-1 text-center">{plant.name}</h1>
+                <div>
+                    <Button
+                        className="mr-2 bg-blue-500 hover:bg-blue-700"
+                        onClick={() => handleOpenEditModal()}>
+                        <Text text="Edit" />
+                    </Button>
+                    <Button
+                        className="bg-red-500 hover:bg-red-700"
+                        onClick={() => setDeleteModal(true)}>
+                        <Text text="Delete" />
+                    </Button>
                </div>
-            })}
-        </div>
+            </div>
+            <div className="flex flex-wrap justify-around gap-5">
+                <div className="relative">
+                    <img
+                        id="picture"
+                        ref={picture}
+                        src={getPicture(id)}
+                        alt=""
+                        className="inline-block min-h-[200px] min-w-[300px] bg-gray-400"
+                    />
+                    <SmallButton className="absolute top-2 left-2 max-w-[300px] cursor-pointer bg-blue-500 hover:bg-blue-700">
+                        <label className="relative">
+                            <EditSVG className="z-10 block h-4 w-4 cursor-pointer" />
+                            <input
+                                id="input-file"
+                                type="file"
+                                name="picture"
+                                className="absolute inline h-0 w-0 max-w-[300px] opacity-0"
+                                onChange={addPicture}
+                            />
+                        </label>
+                    </SmallButton>
+                </div>
+                <div className="flex-1">
+                    {plant.description && <p>{plant.description}</p>}
+                    {plant.hasOwnProperty('indoor') && (
+                        <span className="my-2 inline-block rounded bg-green-500 px-2 py-1 text-sm font-semibold text-white shadow">
+                            <Text text={plant.indoor ? 'Indoor' : 'Outdoor'} />
+                        </span>
+                    )}
+                    {plant.spot && (
+                        <p>
+                            <Text text="Spot:" />{' '}
+                            <span className="font-bold">{plant.spot}</span>
+                        </p>
+                    )}
+                </div>
+            </div>
+            <div>
+                <div className="flex items-center gap-2">
+                    <h2>
+                        <Text text="Actions" />
+                    </h2>
+                    <SmallButton
+                        className="mb-2 mt-5 bg-blue-500 hover:bg-blue-700"
+                        onClick={() => setAddModal(true)}>
+                        <PlusSVG className="h-4 w-4" />
+                    </SmallButton>
+                </div>
+                {plant.actions &&
+                    plant.actions.map((action) => {
+                        let isDone = false
+                        let lastTask = false
+                        if (history()[action.id]) {
+                            lastTask = new Date(history()[action.id])
+                            isDone =
+                                lastTask
+                                    .addDays(Number(action.frequency))
+                                    .toSQLDate() >= new Date().toSQLDate()
+                        }
+                        return (
+                            <div
+                                key={action.action_type}
+                                className="my-2 flex items-center gap-2">
+                                <span>
+                                    <Button
+                                        className={
+                                            isDone
+                                                ? 'bg-green-500 hover:bg-green-700'
+                                                : 'bg-blue-500 hover:bg-blue-700'
+                                        }
+                                        onClick={() => doneTask(action.id)}>
+                                        <Text text="Done" />
+                                    </Button>
+                                </span>
+                                <span className="font-bold capitalize">
+                                    <Text text={action.action_type} />
+                                </span>
+                                {Number(action.frequency) === 0 ? (
+                                    <span>
+                                        <Text text="when you want" />
+                                    </span>
+                                ) : (
+                                    <span>
+                                        <Text
+                                            text="every {{count}} days"
+                                            count={action.frequency}
+                                        />
+                                    </span>
+                                )}
+                                <span className="text-gray-500">
+                                    <Text text="last task" />{' '}
+                                    {lastTask ? (
+                                        lastTask.toFrDate()
+                                    ) : (
+                                        <Text text="never" />
+                                    )}
+                                </span>
+                                <ArchivedAction
+                                    archived={archived.where(
+                                        'action',
+                                        actionId(action.action_type)
+                                    )}
+                                />
+                            </div>
+                        )
+                    })}
+            </div>

-        {createPortal(
-        <Modal isOpen={addModal} onChange={e => closeModal(e, setAddModal)}>
-        <ModalTitle><Text text="Add Action" /></ModalTitle>
-          <form onSubmit={handleSubmit}>
+            {createPortal(
+                <Modal
+                    isOpen={addModal}
+                    onChange={(e) => closeModal(e, setAddModal)}>
+                    <ModalTitle>
+                        <Text text="Add Action" />
+                    </ModalTitle>
+                    <form onSubmit={handleSubmit}>
+                        <SelectField
+                            name="action_type"
+                            className="mb-2 mt-5"
+                            value={actionForm.action_type}
+                            options={ACTION_TYPES}
+                            onChange={(e) =>
+                                setActionForm({
+                                    ...actionForm,
+                                    action_type: e.target.value,
+                                })
+                            }>
+                            <Text text="Name" />
+                        </SelectField>

-            <SelectField name="action_type"
-                         className="mb-2 mt-5"
-                         value={actionForm.action_type}
-                         options={ACTION_TYPES}
-                         onChange={(e) => setActionForm({ ...actionForm, action_type: e.target.value })}>
-                <Text text="Name" />
-            </SelectField>
+                        <InputField
+                            name="frequency"
+                            className="mb-5"
+                            type="number"
+                            textSupport="A number of days between 2 actions. You can use 0 to set no notification."
+                            value={actionForm.frequency}
+                            onChange={(e) =>
+                                setActionForm({
+                                    ...actionForm,
+                                    frequency: e.target.value,
+                                })
+                            }>
+                            <Text text="Frequency" />
+                        </InputField>

-            <InputField name="frequency"
-                        className="mb-5"
-                        type="number"
-                        textSupport="A number of days between 2 actions. You can use 0 to set no notification."
-                        value={actionForm.frequency}
-                        onChange={(e) => setActionForm({ ...actionForm, frequency: e.target.value })}>
-                <Text text="Frequency" />
-            </InputField>
+                        <Button
+                            type="submit"
+                            className="mx-auto mt-5 mb-2 block w-full bg-green-800 px-2 py-1 text-white shadow hover:bg-green-900">
+                            <Text text="Add" />
+                        </Button>
+                    </form>
+                </Modal>,
+                app
+            )}

+            {createPortal(
+                <Modal
+                    isOpen={editModal}
+                    onChange={(e) => closeModal(e, setEditModal)}>
+                    <ModalTitle>
+                        <Text text="Edit Plant" />
+                    </ModalTitle>
+                    <PlantForm plant={plant} onChange={handleEditSubmit}>
+                        <Text text="Edit" />
+                    </PlantForm>
+                </Modal>,
+                app
+            )}

-              <Button type="submit"
-                      className="block w-full mt-5 mb-2 bg-green-800 hover:bg-green-900 text-white mx-auto px-2 py-1 shadow">
-                  <Text text="Add" />
-              </Button>
-          </form>
-        </Modal>,
-        app
-      )}
-
-        {createPortal(
-            <Modal isOpen={editModal} onChange={e => closeModal(e, setEditModal)}>
-                <ModalTitle>
-                    <Text text="Edit Plant" />
-                </ModalTitle>
-                <PlantForm plant={plant} onChange={handleEditSubmit}><Text text="Edit" /></PlantForm>
-            </Modal>,
-            app
-        )}
-
-        {createPortal(
-            <Modal isOpen={deleteModal} onChange={e => closeModal(e, setDeleteModal)}>
-                <ModalTitle>
-                    <Text text="Delete Plant ?" />
-                </ModalTitle>
-                <Button className="bg-red-500 hover:bg-red-700 mt-10" onClick={handleDeletePlant}><Text text="Confirm delete plant" /></Button>
-            </Modal>,
-            app
-        )}
-    </PageLayout>
+            {createPortal(
+                <Modal
+                    isOpen={deleteModal}
+                    onChange={(e) => closeModal(e, setDeleteModal)}>
+                    <ModalTitle>
+                        <Text text="Delete Plant ?" />
+                    </ModalTitle>
+                    <Button
+                        className="mt-10 bg-red-500 hover:bg-red-700"
+                        onClick={handleDeletePlant}>
+                        <Text text="Confirm delete plant" />
+                    </Button>
+                </Modal>,
+                app
+            )}
+        </PageLayout>
+    )
 }

 export default Plant

-const ArchivedAction = ({archived = []}) => {
+const ArchivedAction = ({ archived = [] }) => {
    console.log(archived)
    const [isOpen, setIsOpen] = useState(false)

-    return <>
-        {archived.length > 0 && <span className="relative" onClick={() => setIsOpen(!isOpen)}>
-            { archived.length } <TriangleSVG className={classNames("w-6 inline transform transition-all duration-300", isOpen ? 'rotate-180' : '')} />
-            {archived.length > 0 && isOpen && <ul className="absolute z-10 bg-white dark:bg-gray-800 border border-primary p-2 rounded">
-                {archived.sortObjectsBy('time', true).map(archive => <li>{(new Date(archive.time)).toFrDate()}</li>)}
-            </ul>}
-        </span>}
-    </>
+    return (
+        <>
+            {archived.length > 0 && (
+                <span className="relative" onClick={() => setIsOpen(!isOpen)}>
+                    {archived.length}{' '}
+                    <TriangleSVG
+                        className={`inline w-6 transform transition-all duration-300 ${
+                            isOpen ? 'rotate-180' : ''
+                        }`}
+                    />
+                    {archived.length > 0 && isOpen && (
+                        <ul className="absolute z-10 rounded border border-primary bg-white p-2 dark:bg-gray-800">
+                            {archived
+                                .sortObjectsBy('time', true)
+                                .map((archive) => (
+                                    <li>{new Date(archive.time).toFrDate()}</li>
+                                ))}
+                        </ul>
+                    )}
+                </span>
+            )}
+        </>
+    )
 }
--- a/src/routes/Profile.js
+++ b/src/routes/Profile.js
@@ -1,13 +1,13 @@
-import { useContext, useEffect, useState } from "preact/hooks";
-import { PageLayout } from "../components/PageLayout";
-import {PlantsContext, UserContext} from "../Contexts";
-import {Button} from "../components/Button";
-import {useLocalStorage} from "../hooks/LocalStorageHook";
-import {Text} from "../components/Translation";
+import { useContext, useEffect, useState } from 'preact/hooks'
+import { PageLayout } from '../components/PageLayout'
+import { PlantsContext, UserContext } from '../Contexts'
+import { Button } from '../components/Button'
+import { useLocalStorage } from '../hooks/LocalStorageHook'
+import { Text } from '../components/Translation'

 export default function Profile() {
    const [user, setUser] = useContext(UserContext)
-    const {plants} = useContext(PlantsContext)
+    const { plants } = useContext(PlantsContext)
    const [darkMode, setDarkMode] = useState(false)
    const [data, setData] = useLocalStorage('data', {})

@@ -16,46 +16,55 @@ export default function Profile() {
    }, [])

    useEffect(() => {
-        setUser({...user, dark_mode: darkMode})
+        setUser({ ...user, dark_mode: darkMode })
    }, [darkMode])

    const handleChangeDarkMode = () => {
-        setUser({...user, dark_mode: !user.dark_mode})
+        setUser({ ...user, dark_mode: !user.dark_mode })
    }

    const handleDownloadConfig = async () => {
-        const fileName = "plants"
+        const fileName = 'plants'
        const json = JSON.stringify(data)
-        const blob = new Blob([json], {type: 'application/json'})
+        const blob = new Blob([json], { type: 'application/json' })
        const href = await URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = href
-        link.download = fileName + ".json"
+        link.download = fileName + '.json'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
    }

-    return <PageLayout>
-        <h1 className=""><Text text="Profile" /></h1>
-        <label htmlFor="dark_mode">
-            <input type="checkbox"
-                   id="dark_mode"
-                   name="dark_mode"
-                   className="mr-2"
-                   checked={user.dark_mode}
-                   onChange={() => handleChangeDarkMode()} />
-            <Text text="Dark Mode" />
-        </label>
-        <div className="mt-5">
-            <Text text="{{count}} Plants" count={plants.length} />
-        </div>
-        <div className="mt-5">
-            <h2><Text text="Download config" /></h2>
-            <Button className="bg-primary hover:bg-primary-dark border-primary-dark ring-primary"
+    return (
+        <PageLayout>
+            <h1 className="">
+                <Text text="Profile" />
+            </h1>
+            <label htmlFor="dark_mode">
+                <input
+                    type="checkbox"
+                    id="dark_mode"
+                    name="dark_mode"
+                    className="mr-2"
+                    checked={user.dark_mode}
+                    onChange={() => handleChangeDarkMode()}
+                />
+                <Text text="Dark Mode" />
+            </label>
+            <div className="mt-5">
+                <Text text="{{count}} Plants" count={plants.length} />
+            </div>
+            <div className="mt-5">
+                <h2>
+                    <Text text="Download config" />
+                </h2>
+                <Button
+                    className="border-primary-dark bg-primary ring-primary hover:bg-primary-dark"
                    onClick={handleDownloadConfig}>
-                <Text text="Download" />
-            </Button>
-        </div>
-    </PageLayout>
+                    <Text text="Download" />
+                </Button>
+            </div>
+        </PageLayout>
+    )
 }
--- a/src/routes/Style.js
+++ b/src/routes/Style.js
@@ -1,79 +1,86 @@
-import {PageLayout} from "../components/PageLayout";
-import {Button} from "../components/Button";
+import { PageLayout } from '../components/PageLayout'
+import { Button } from '../components/Button'

 export default function Style() {
+    return (
+        <PageLayout>
+            <h1>Style</h1>

-    return <PageLayout>
-        <h1>Style</h1>
-
-        <div className="flex">
-            <div>
-                <h1>H1 Head</h1>
-                <h2>H2 Headline</h2>
-                <h3>H3 Headline</h3>
-                <h4>H4 Headline</h4>
-                <h5>H5 Headline</h5>
-                <h6>H6 Headline</h6>
-                <p>Text paragraph</p>
-            </div>
-        </div>
-
-        <div>
-            <div className="my-2 flex gap-2">
-                <Button className="bg-primary hover:bg-primary-dark border-primary-dark ring-primary">Primary</Button>
-                <Button className="bg-primary-light hover:bg-primary text-primary hover:text-primary-darkest ring-primary">Smooth</Button>
-                <Button className="border-primary text-primary ring-primary-dark">Ghost</Button>
-                <Button className="border-primary text-primary ring-primary-dark border-transparent">Raised</Button>
-                <Button className="bg-primary hover:bg-primary-dark border-primary-dark ring-primary rounded-full">Previous</Button>
-            </div>
-            <div className="my-2">
-                <Button>Secondary</Button>
-                <Button>Smooth</Button>
-                <Button>Ghost</Button>
-                <Button>Raised</Button>
-                <Button>Previous</Button>
-            </div>
-            <div className="my-2">
-                <Button>Warning</Button>
-                <Button>Smooth</Button>
-                <Button>Ghost</Button>
-                <Button>Raised</Button>
-                <Button>Previous</Button>
-            </div>
-            <div className="my-2">
-                <Button>Success</Button>
-                <Button>Smooth</Button>
-                <Button>Ghost</Button>
-                <Button>Raised</Button>
-                <Button>Previous</Button>
-            </div>
-            <div className="my-2">
-                <Button>Danger</Button>
-                <Button>Smooth</Button>
-                <Button>Ghost</Button>
-                <Button>Raised</Button>
-                <Button>Previous</Button>
-            </div>
-        </div>
-
-        <div>
            <div className="flex">
-                <div className="bg-primary-light my-2 p-2 flex-1">
-                    Primary light
-                </div>
-                <div className="bg-primary my-2 p-2 flex-1">
-                    Primary
-                </div>
-                <div className="bg-primary-dark my-2 p-2 flex-1">
-                    Primary dark
-                </div>
-                <div className="bg-primary-darkest my-2 p-2 flex-1">
-                    Primary darkest
+                <div>
+                    <h1>H1 Head</h1>
+                    <h2>H2 Headline</h2>
+                    <h3>H3 Headline</h3>
+                    <h4>H4 Headline</h4>
+                    <h5>H5 Headline</h5>
+                    <h6>H6 Headline</h6>
+                    <p>Text paragraph</p>
                </div>
            </div>
-            <div className="bg-gray-500 my-2">
-                Background Primary
+
+            <div>
+                <div className="my-2 flex gap-2">
+                    <Button className="border-primary-dark bg-primary ring-primary hover:bg-primary-dark">
+                        Primary
+                    </Button>
+                    <Button className="bg-primary-light text-primary ring-primary hover:bg-primary hover:text-primary-darkest">
+                        Smooth
+                    </Button>
+                    <Button className="border-primary text-primary ring-primary-dark">
+                        Ghost
+                    </Button>
+                    <Button className="border-primary border-transparent text-primary ring-primary-dark">
+                        Raised
+                    </Button>
+                    <Button className="rounded-full border-primary-dark bg-primary ring-primary hover:bg-primary-dark">
+                        Previous
+                    </Button>
+                </div>
+                <div className="my-2">
+                    <Button>Secondary</Button>
+                    <Button>Smooth</Button>
+                    <Button>Ghost</Button>
+                    <Button>Raised</Button>
+                    <Button>Previous</Button>
+                </div>
+                <div className="my-2">
+                    <Button>Warning</Button>
+                    <Button>Smooth</Button>
+                    <Button>Ghost</Button>
+                    <Button>Raised</Button>
+                    <Button>Previous</Button>
+                </div>
+                <div className="my-2">
+                    <Button>Success</Button>
+                    <Button>Smooth</Button>
+                    <Button>Ghost</Button>
+                    <Button>Raised</Button>
+                    <Button>Previous</Button>
+                </div>
+                <div className="my-2">
+                    <Button>Danger</Button>
+                    <Button>Smooth</Button>
+                    <Button>Ghost</Button>
+                    <Button>Raised</Button>
+                    <Button>Previous</Button>
+                </div>
            </div>
-        </div>
-    </PageLayout>
+
+            <div>
+                <div className="flex">
+                    <div className="my-2 flex-1 bg-primary-light p-2">
+                        Primary light
+                    </div>
+                    <div className="my-2 flex-1 bg-primary p-2">Primary</div>
+                    <div className="my-2 flex-1 bg-primary-dark p-2">
+                        Primary dark
+                    </div>
+                    <div className="my-2 flex-1 bg-primary-darkest p-2">
+                        Primary darkest
+                    </div>
+                </div>
+                <div className="my-2 bg-gray-500">Background Primary</div>
+            </div>
+        </PageLayout>
+    )
 }
--- a/src/utilities/actions.js
+++ b/src/utilities/actions.js
@@ -1,6 +1,5 @@
-
 export const ACTION_TYPES = ['watering', 'spraying', 'bathing']

 export const actionId = (action) => {
-    return ACTION_TYPES.findIndex(item => item === action)
+    return ACTION_TYPES.findIndex((item) => item === action)
 }
--- a/src/utilities/classNames.js
+++ b/src/utilities/classNames.js
@@ -1,4 +0,0 @@
-export function classNames() {
-    // console.log(Object.values(arguments), Object.values(arguments).join(' '));
-    return Object.values(arguments).join(' ')
-}
--- a/src/utilities/pictures.js
+++ b/src/utilities/pictures.js
@@ -1,68 +1,66 @@
-
-const pictureName = id => {
+const pictureName = (id) => {
    return 'picture-' + id
 }

-export const getPicture = id => {
-    return localStorage.getItem('picture-' + id ?? '') ?? ""
+export const getPicture = (id) => {
+    return localStorage.getItem(pictureName(id) ?? '') ?? ''
 }

 export const storePicture = (e, id) => {
-    const files = e.target.files;
-    let file = files[0];
+    const files = e.target.files
+    let file = files[0]

    if (file) {
-        const reader = new FileReader();
-        reader.onload = function(e) {
-            document.getElementById("picture").src = e.target.result;
-        };
-        reader.readAsDataURL(file);
+        const reader = new FileReader()
+        reader.onload = function (e) {
+            document.getElementById('picture').src = e.target.result
+        }
+        reader.readAsDataURL(file)
    }

-    const filesToUploads = document.getElementById("input-file").files;
-    file = filesToUploads[0];
+    const filesToUploads = document.getElementById('input-file').files
+    file = filesToUploads[0]
    if (file) {
        const reader = new FileReader()
        let dataPicture

        reader.onload = function (e) {
-            let img = document.createElement("img");
-            img.src = e.target.result;
+            let img = document.createElement('img')
+            img.src = e.target.result

-            let canvas = document.createElement("canvas");
-            var ctx = canvas.getContext("2d");
-            ctx.drawImage(img, 0, 0);
+            let canvas = document.createElement('canvas')
+            var ctx = canvas.getContext('2d')
+            ctx.drawImage(img, 0, 0)

-            const MAX_WIDTH = 300;
-            const MAX_HEIGHT = 300;
-            let width = img.width;
-            let height = img.height;
+            const MAX_WIDTH = 300
+            const MAX_HEIGHT = 300
+            let width = img.width
+            let height = img.height

            if (width > height) {
                if (width > MAX_WIDTH) {
-                    height *= MAX_WIDTH / width;
-                    width = MAX_WIDTH;
+                    height *= MAX_WIDTH / width
+                    width = MAX_WIDTH
                }
            } else {
                if (height > MAX_HEIGHT) {
-                    width *= MAX_HEIGHT / height;
-                    height = MAX_HEIGHT;
+                    width *= MAX_HEIGHT / height
+                    height = MAX_HEIGHT
                }
            }

-            canvas.width = width;
-            canvas.height = height;
-            var ctx = canvas.getContext("2d");
-            ctx.drawImage(img, 0, 0, width, height);
+            canvas.width = width
+            canvas.height = height
+            var ctx = canvas.getContext('2d')
+            ctx.drawImage(img, 0, 0, width, height)

-            dataPicture = canvas.toDataURL(file.type);
-            document.getElementById("picture").src = dataPicture;
+            dataPicture = canvas.toDataURL(file.type)
+            document.getElementById('picture').src = dataPicture

            setTimeout(() => {
                localStorage.setItem(pictureName(id), dataPicture)
            }, 500)
-
-        };
-        reader.readAsDataURL(file);
+        }
+        reader.readAsDataURL(file)
    }
 }