From 994e5d81634db5b960d3e80f15af5d0907b6fc6d Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Sun, 24 Jul 2022 12:13:53 +0200
Subject: [PATCH] feat: collapse overlay on small devices

---
 src/components/Settings/Overlay.tsx | 1182 ++++++++++++++-------------
 1 file changed, 615 insertions(+), 567 deletions(-)

diff --git a/src/components/Settings/Overlay.tsx b/src/components/Settings/Overlay.tsx
index 6243825..0f6dc95 100644
--- a/src/components/Settings/Overlay.tsx
+++ b/src/components/Settings/Overlay.tsx
@@ -224,9 +224,19 @@ const SettingsOverlay: Component = () => {
     document.removeEventListener("keydown", saveOnCtrlS);
   });
 
+  const AccordionItemLabel: FlowComponent = (props) => (
+    <span class="overflow-hidden whitespace-nowrap hidden xxl:inline-flex group-hover:inline-flex group-focus-within:inline-flex gap-2">
+      {props.children}
+    </span>
+  );
+
+  const AccordionContent: FlowComponent = (props) => (
+    <div class="min-w-[300px]">{props.children}</div>
+  );
+
   return (
     <>
-      <div class="print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 w-[480px] grid-rows-[1fr_auto] gap-4 p-3 transition-all shadow-none hover:shadow-2xl focus-within:shadow-2xl -translate-x-72 opacity-70 hover:opacity-100 focus-within:opacity-100 xxl:opacity-100 xxl:-translate-x-0 hover:translate-x-0 focus-within:translate-x-0 ">
+      <div class="group print:hidden hidden lg:grid bg-white z-50 h-full fixed xxl:h-auto xxl:relative left-0 xxl:w-[480px] grid-rows-[1fr_auto] gap-4 p-1 xxl:p-3 transition-all shadow hover:shadow-2xl focus-within:shadow-2xl outline outline-1 outline-slate-700/10 w-24 hover:w-[480px] focus-within:w-[480px]">
         <div class="overflow-y-scroll">
           <AccordionItem
             item={0}
@@ -234,247 +244,263 @@ const SettingsOverlay: Component = () => {
             label={
               <>
                 <ProjectIcon />
-                Dokument
+                <AccordionItemLabel>Dokument</AccordionItemLabel>
                 <Show when={!documentDataForm.valid}>
-                  <WarningIcon class="text-error" />
+                  <AccordionItemLabel>
+                    <WarningIcon class="text-error" />
+                  </AccordionItemLabel>
                 </Show>
               </>
             }
           >
             {/* TODO: Add option for item price decimals */}
-            <DocumentValidationContext>
-              <AccordionItemGrid>
-                <FullWidthAccordionInput
-                  label="Projekt Nr."
-                  value={state.project.projectNumber}
-                  onInput={(evt) =>
-                    setState(
-                      "project",
-                      "projectNumber",
-                      evt.currentTarget.value
-                    )
-                  }
-                />
-                <FullWidthAccordionInput
-                  label="Bestellungs Nr."
-                  value={state.project.orderNumber}
-                  onInput={(evt) =>
-                    setState("project", "orderNumber", evt.currentTarget.value)
-                  }
-                />
-                <div class="col-span-2">
-                  <UnixDateInput
-                    required
-                    labelMinWidth={fullWidthLabelWidth}
-                    label="Datum"
-                    value={state.project.date}
-                    onInput={(v: any) => setState("project", "date", v)}
-                  />
-                </div>
-                <FullWidthAccordionInput
-                  label="Lieferungs Nr."
-                  value={state.project.deliveryNumber}
-                  onInput={(evt) =>
-                    setState(
-                      "project",
-                      "deliveryNumber",
-                      evt.currentTarget.value
-                    )
-                  }
-                />
-
-                <div class="col-span-2">
-                  <UnixDateInput
-                    labelMinWidth={fullWidthLabelWidth}
-                    label="Lieferdatum"
-                    value={state.project.deliveryDate}
-                    onInput={(v: any) => setState("project", "deliveryDate", v)}
-                  />
-                </div>
-                <div class="col-span-2">
-                  <div class="input-group input-group-sm">
-                    <span
-                      class="bg-slate-200/70"
-                      style={{ "min-width": fullWidthLabelWidth }}
-                    >
-                      Typ neuer Positionen
-                    </span>
-                    <select
-                      title="Neue Positionen werden mit diesem Typen erzeugt."
-                      class="flex-1 select select-sm select-bordered"
-                      onChange={(e) =>
-                        setState(
-                          "defaultPositionType",
-                          e.currentTarget.value as any
-                        )
-                      }
-                    >
-                      <For
-                        each={[
-                          [POSITION_TYPE_QUANTITY, "Menge"],
-                          [POSITION_TYPE_AGILE, "Agile"],
-                        ]}
-                      >
-                        {([type, label]) => (
-                          <option
-                            selected={type === state.defaultPositionType}
-                            value={type}
-                          >
-                            {label}
-                          </option>
-                        )}
-                      </For>
-                    </select>
-                  </div>
-                </div>
-
-                <div class="col-span-2">
-                  <NumberInput
-                    required
-                    label="Standard Einzelpreis"
-                    labelMinWidth={fullWidthLabelWidth}
-                    value={state.defaultItemPrice}
-                    onInput={(v) =>
-                      v != null && setState("defaultItemPrice", v)
+            <AccordionContent>
+              <DocumentValidationContext>
+                <AccordionItemGrid>
+                  <FullWidthAccordionInput
+                    label="Projekt Nr."
+                    value={state.project.projectNumber}
+                    onInput={(evt) =>
+                      setState(
+                        "project",
+                        "projectNumber",
+                        evt.currentTarget.value
+                      )
                     }
-                    onBlur={resetInput(0)}
                   />
-                </div>
-
-                <div class="col-span-2">
-                  <TextArea
-                    label="Einleitung"
-                    labelSuffixJsx={<MarkdownHelpLabel />}
-                    value={state.project.preface}
-                    onInput={(evt) => {
-                      setState("project", "preface", evt.currentTarget.value);
-                    }}
+                  <FullWidthAccordionInput
+                    label="Bestellungs Nr."
+                    value={state.project.orderNumber}
+                    onInput={(evt) =>
+                      setState(
+                        "project",
+                        "orderNumber",
+                        evt.currentTarget.value
+                      )
+                    }
                   />
-                </div>
-
-                <div class="col-span-2">
-                  <TextArea
-                    label="Schlussbemerkung"
-                    labelSuffixJsx={<MarkdownHelpLabel />}
-                    value={state.project.conclusion}
+                  <div class="col-span-2">
+                    <UnixDateInput
+                      required
+                      labelMinWidth={fullWidthLabelWidth}
+                      label="Datum"
+                      value={state.project.date}
+                      onInput={(v: any) => setState("project", "date", v)}
+                    />
+                  </div>
+                  <FullWidthAccordionInput
+                    label="Lieferungs Nr."
+                    value={state.project.deliveryNumber}
                     onInput={(evt) =>
-                      setState("project", "conclusion", evt.currentTarget.value)
+                      setState(
+                        "project",
+                        "deliveryNumber",
+                        evt.currentTarget.value
+                      )
                     }
                   />
-                </div>
-              </AccordionItemGrid>
-              <AccordionItemEnd />
-              <AccordionItemDivider>QR Rechnung</AccordionItemDivider>
-              <AccordionItemGrid>
-                <FullWidthAccordionInput
-                  vertical={true}
-                  label="Referenz"
-                  value={state.invoice.reference}
-                  onInput={(evt) =>
-                    setState("invoice", "reference", evt.currentTarget.value)
-                  }
-                />
 
-                <div class="col-span-2">
-                  <button
-                    class="btn btn-xs btn-block btn-accent gap-2"
-                    onClick={() => {
-                      let value = state.invoice.reference;
-                      if (value.startsWith("RF")) {
-                        return;
+                  <div class="col-span-2">
+                    <UnixDateInput
+                      labelMinWidth={fullWidthLabelWidth}
+                      label="Lieferdatum"
+                      value={state.project.deliveryDate}
+                      onInput={(v: any) =>
+                        setState("project", "deliveryDate", v)
                       }
+                    />
+                  </div>
+                  <div class="col-span-2">
+                    <div class="input-group input-group-sm">
+                      <span
+                        class="bg-slate-200/70"
+                        style={{ "min-width": fullWidthLabelWidth }}
+                      >
+                        Typ neuer Positionen
+                      </span>
+                      <select
+                        title="Neue Positionen werden mit diesem Typen erzeugt."
+                        class="flex-1 select select-sm select-bordered"
+                        onChange={(e) =>
+                          setState(
+                            "defaultPositionType",
+                            e.currentTarget.value as any
+                          )
+                        }
+                      >
+                        <For
+                          each={[
+                            [POSITION_TYPE_QUANTITY, "Menge"],
+                            [POSITION_TYPE_AGILE, "Agile"],
+                          ]}
+                        >
+                          {([type, label]) => (
+                            <option
+                              selected={type === state.defaultPositionType}
+                              value={type}
+                            >
+                              {label}
+                            </option>
+                          )}
+                        </For>
+                      </select>
+                    </div>
+                  </div>
 
-                      if (value === "") {
-                        value = customAlphabet("1234567890", 21)() + "";
+                  <div class="col-span-2">
+                    <NumberInput
+                      required
+                      label="Standard Einzelpreis"
+                      labelMinWidth={fullWidthLabelWidth}
+                      value={state.defaultItemPrice}
+                      onInput={(v) =>
+                        v != null && setState("defaultItemPrice", v)
                       }
+                      onBlur={resetInput(0)}
+                    />
+                  </div>
 
-                      setState("invoice", "reference", generate(value));
-                    }}
-                  >
-                    <GenerateIcon /> Kreditor Referenz generieren
-                  </button>
-                </div>
-                <div class="col-span-2">
-                  <TextInput
+                  <div class="col-span-2">
+                    <TextArea
+                      label="Einleitung"
+                      labelSuffixJsx={<MarkdownHelpLabel />}
+                      value={state.project.preface}
+                      onInput={(evt) => {
+                        setState("project", "preface", evt.currentTarget.value);
+                      }}
+                    />
+                  </div>
+
+                  <div class="col-span-2">
+                    <TextArea
+                      label="Schlussbemerkung"
+                      labelSuffixJsx={<MarkdownHelpLabel />}
+                      value={state.project.conclusion}
+                      onInput={(evt) =>
+                        setState(
+                          "project",
+                          "conclusion",
+                          evt.currentTarget.value
+                        )
+                      }
+                    />
+                  </div>
+                </AccordionItemGrid>
+                <AccordionItemEnd />
+                <AccordionItemDivider>QR Rechnung</AccordionItemDivider>
+                <AccordionItemGrid>
+                  <FullWidthAccordionInput
                     vertical={true}
-                    maxLength={140}
-                    label="Zusätzliche Informationen"
-                    value={state.invoice.message}
-                    onInput={(evt) =>
-                      setState("invoice", "message", evt.currentTarget.value)
-                    }
-                  />
-                </div>
-              </AccordionItemGrid>
-              <AccordionItemEnd />
-              <AccordionItemDivider>Agile</AccordionItemDivider>
-              <AccordionItemGrid>
-                <div class="col-span-2">
-                  <TextInput
-                    required
-                    title={
-                      'Agile Positionen werden mit Story Points "geschätzt". Was ist der kleinst mögliche Aufwand einer einzelnen Agilen Position?'
-                    }
-                    type="number"
-                    label="Stunden pro Story Point"
+                    label="Referenz"
+                    value={state.invoice.reference}
                     onInput={(evt) =>
-                      evt.currentTarget.value !== "" &&
-                      setState(
-                        "agileHoursPerStoryPoint",
-                        parseFloat(evt.currentTarget.value)
-                      )
+                      setState("invoice", "reference", evt.currentTarget.value)
                     }
-                    onBlur={resetInput(0)}
-                    value={state.agileHoursPerStoryPoint}
                   />
-                </div>
-                <div class="col-span-2">
-                  <div class="form-control">
-                    <label class="label gap-8">
-                      <span class="label-text font-bold">Risiko Faktor</span>
-                      <div class="flex-1">
-                        <input
-                          class="range range-xs hover:range-accent"
-                          required
-                          type="range"
-                          title="Wie hoch ist das Risiko, dass etwas schief geht? Dieser Wert dient zur Gewichtung des Mittelwerts zwischen den minimalen und maximalen Story Points pro Position. Bei einem Risiko von 0% werden nur die minimalen Story Points der Positionen berücksichtigt, bei einem Risiko von 100% nur die Maximalen. (0 - 100%)"
-                          value={state.agileRiskFactor}
-                          min="0.0"
-                          max="1.0"
-                          step="0.1"
-                          onInput={(evt) =>
-                            evt.currentTarget.value !== "" &&
-                            setState(
-                              "agileRiskFactor",
-                              parseFloat(evt.currentTarget.value)
-                            )
-                          }
-                          onBlur={resetInput(0)}
-                        />
-                        <div class="w-full flex justify-between text-xs px-2 relative">
-                          <span>
-                            <div class="absolute left-0">Klein</div>&nbsp;
-                          </span>
-                          <span>|</span>
-                          <span>|</span>
-                          <span>|</span>
-                          <span>|</span>
-                          <span>|</span>
-                          <span>|</span>
-                          <span>|</span>
-                          <span>|</span>
-                          <span>|</span>
-                          <span>
-                            <div class="absolute text-right right-0">Gross</div>
-                            &nbsp;
-                          </span>
+
+                  <div class="col-span-2">
+                    <button
+                      class="btn btn-xs btn-block btn-accent gap-2"
+                      onClick={() => {
+                        let value = state.invoice.reference;
+                        if (value.startsWith("RF")) {
+                          return;
+                        }
+
+                        if (value === "") {
+                          value = customAlphabet("1234567890", 21)() + "";
+                        }
+
+                        setState("invoice", "reference", generate(value));
+                      }}
+                    >
+                      <GenerateIcon /> Kreditor Referenz generieren
+                    </button>
+                  </div>
+                  <div class="col-span-2">
+                    <TextInput
+                      vertical={true}
+                      maxLength={140}
+                      label="Zusätzliche Informationen"
+                      value={state.invoice.message}
+                      onInput={(evt) =>
+                        setState("invoice", "message", evt.currentTarget.value)
+                      }
+                    />
+                  </div>
+                </AccordionItemGrid>
+                <AccordionItemEnd />
+                <AccordionItemDivider>Agile</AccordionItemDivider>
+                <AccordionItemGrid>
+                  <div class="col-span-2">
+                    <TextInput
+                      required
+                      title={
+                        'Agile Positionen werden mit Story Points "geschätzt". Was ist der kleinst mögliche Aufwand einer einzelnen Agilen Position?'
+                      }
+                      type="number"
+                      label="Stunden pro Story Point"
+                      onInput={(evt) =>
+                        evt.currentTarget.value !== "" &&
+                        setState(
+                          "agileHoursPerStoryPoint",
+                          parseFloat(evt.currentTarget.value)
+                        )
+                      }
+                      onBlur={resetInput(0)}
+                      value={state.agileHoursPerStoryPoint}
+                    />
+                  </div>
+                  <div class="col-span-2">
+                    <div class="form-control">
+                      <label class="label gap-8">
+                        <span class="label-text font-bold">Risiko Faktor</span>
+                        <div class="flex-1">
+                          <input
+                            class="range range-xs hover:range-accent"
+                            required
+                            type="range"
+                            title="Wie hoch ist das Risiko, dass etwas schief geht? Dieser Wert dient zur Gewichtung des Mittelwerts zwischen den minimalen und maximalen Story Points pro Position. Bei einem Risiko von 0% werden nur die minimalen Story Points der Positionen berücksichtigt, bei einem Risiko von 100% nur die Maximalen. (0 - 100%)"
+                            value={state.agileRiskFactor}
+                            min="0.0"
+                            max="1.0"
+                            step="0.1"
+                            onInput={(evt) =>
+                              evt.currentTarget.value !== "" &&
+                              setState(
+                                "agileRiskFactor",
+                                parseFloat(evt.currentTarget.value)
+                              )
+                            }
+                            onBlur={resetInput(0)}
+                          />
+                          <div class="w-full flex justify-between text-xs px-2 relative">
+                            <span>
+                              <div class="absolute left-0">Klein</div>&nbsp;
+                            </span>
+                            <span>|</span>
+                            <span>|</span>
+                            <span>|</span>
+                            <span>|</span>
+                            <span>|</span>
+                            <span>|</span>
+                            <span>|</span>
+                            <span>|</span>
+                            <span>|</span>
+                            <span>
+                              <div class="absolute text-right right-0">
+                                Gross
+                              </div>
+                              &nbsp;
+                            </span>
+                          </div>
                         </div>
-                      </div>
-                    </label>
+                      </label>
+                    </div>
                   </div>
-                </div>
-              </AccordionItemGrid>
-            </DocumentValidationContext>
+                </AccordionItemGrid>
+              </DocumentValidationContext>
+            </AccordionContent>
           </AccordionItem>
           <AccordionItem
             item={1}
@@ -482,241 +508,253 @@ const SettingsOverlay: Component = () => {
             label={
               <>
                 <YouIcon />
-                Deine Angaben
+                <AccordionItemLabel>Deine Angaben</AccordionItemLabel>
                 <Show when={!yourDataForm.valid}>
-                  <WarningIcon class="text-error" />
+                  <AccordionItemLabel>
+                    <WarningIcon class="text-error" />
+                  </AccordionItemLabel>
                 </Show>
               </>
             }
           >
-            <YourDataValidationContext>
-              <AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
-              <AccordionItemGrid>
-                <div class="col-span-2">
-                  <TextInput
-                    required
-                    label="Iban"
-                    maxLength={50}
-                    value={localState.iban}
-                    onInput={(evt) =>
-                      setLocalState("iban", evt.currentTarget.value)
+            <AccordionContent>
+              <YourDataValidationContext>
+                <AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
+                <AccordionItemGrid>
+                  <div class="col-span-2">
+                    <TextInput
+                      required
+                      label="Iban"
+                      maxLength={50}
+                      value={localState.iban}
+                      onInput={(evt) =>
+                        setLocalState("iban", evt.currentTarget.value)
+                      }
+                    />
+                  </div>
+                  <AddressInputs
+                    namePrefix="creditor"
+                    nameRequired={true}
+                    setter={(name, value) => {
+                      setLocalState("creditor", name as any, value);
+                    }}
+                    address={() => localState.creditor}
+                  />
+                </AccordionItemGrid>
+                <AccordionItemEnd />
+                <AccordionItemDivider>
+                  Abweichende Adresse{" "}
+                  <input
+                    class="checkbox"
+                    type="checkbox"
+                    checked={localState.useCustomAddress}
+                    onChange={(evt) =>
+                      setLocalState(
+                        "useCustomAddress",
+                        evt.currentTarget.checked
+                      )
                     }
                   />
+                </AccordionItemDivider>
+                <div use:autoAnimate>
+                  <Show when={localState.useCustomAddress}>
+                    <AccordionItemGrid>
+                      <AddressInputs
+                        namePrefix="customAddress"
+                        nameRequired={true}
+                        setter={(name, value) => {
+                          setLocalState("customAddress", name as any, value);
+                        }}
+                        address={() => localState.customAddress}
+                      />
+                    </AccordionItemGrid>
+                  </Show>
                 </div>
-                <AddressInputs
-                  namePrefix="creditor"
-                  nameRequired={true}
-                  setter={(name, value) => {
-                    setLocalState("creditor", name as any, value);
-                  }}
-                  address={() => localState.creditor}
-                />
-              </AccordionItemGrid>
-              <AccordionItemEnd />
-              <AccordionItemDivider>
-                Abweichende Adresse{" "}
-                <input
-                  class="checkbox"
-                  type="checkbox"
-                  checked={localState.useCustomAddress}
-                  onChange={(evt) =>
-                    setLocalState("useCustomAddress", evt.currentTarget.checked)
-                  }
-                />
-              </AccordionItemDivider>
-              <div use:autoAnimate>
-                <Show when={localState.useCustomAddress}>
-                  <AccordionItemGrid>
-                    <AddressInputs
-                      namePrefix="customAddress"
-                      nameRequired={true}
-                      setter={(name, value) => {
-                        setLocalState("customAddress", name as any, value);
-                      }}
-                      address={() => localState.customAddress}
+                <AccordionItemEnd />
+
+                <AccordionItemDivider>Ansprechpartner</AccordionItemDivider>
+                <AccordionItemGrid>
+                  <div class="col-span-2">
+                    <TextInput
+                      label="Name"
+                      value={localState.contact?.name}
+                      onInput={(evt) =>
+                        contactSetter("name", evt.currentTarget.value)
+                      }
                     />
-                  </AccordionItemGrid>
-                </Show>
-              </div>
-              <AccordionItemEnd />
+                  </div>
 
-              <AccordionItemDivider>Ansprechpartner</AccordionItemDivider>
-              <AccordionItemGrid>
-                <div class="col-span-2">
                   <TextInput
-                    label="Name"
-                    value={localState.contact?.name}
+                    label="Telefon"
+                    value={localState.contact?.phone}
                     onInput={(evt) =>
-                      contactSetter("name", evt.currentTarget.value)
+                      contactSetter("phone", evt.currentTarget.value)
                     }
                   />
-                </div>
-
-                <TextInput
-                  label="Telefon"
-                  value={localState.contact?.phone}
-                  onInput={(evt) =>
-                    contactSetter("phone", evt.currentTarget.value)
-                  }
-                />
-                <TextInput
-                  label="E-Mail"
-                  value={localState.contact?.email}
-                  type="email"
-                  onInput={(evt) =>
-                    contactSetter("email", evt.currentTarget.value)
-                  }
-                />
-              </AccordionItemGrid>
-              <AccordionItemEnd />
-
-              <AccordionItemDivider>Andere Angaben</AccordionItemDivider>
-              <AccordionItemGrid>
-                <FullWidthAccordionInput
-                  vertical={true}
-                  label="Zahlungsbedingungen"
-                  value={localState.paymentTerms}
-                  onInput={(evt) =>
-                    setLocalState("paymentTerms", evt.currentTarget.value)
-                  }
-                />
-                <div class="col-span-2">
                   <TextInput
-                    label="MwST-Nr."
-                    value={localState.vatNumber}
+                    label="E-Mail"
+                    value={localState.contact?.email}
+                    type="email"
                     onInput={(evt) =>
-                      setLocalState("vatNumber", evt.currentTarget.value)
+                      contactSetter("email", evt.currentTarget.value)
                     }
                   />
-                </div>
-                <div class="col-span-2">
-                  <NumberInput
-                    required
-                    label="MwST-Satz"
-                    suffix="%"
-                    value={new Big(localState.vatRate).mul(100).toNumber()}
-                    onInput={(v) => {
-                      v != null &&
-                        setLocalState(
-                          "vatRate",
-                          new Big(v).div(100).toNumber()
-                        );
-                    }}
-                    onBlur={resetInput(0)}
-                  />
-                </div>
-              </AccordionItemGrid>
-              <AccordionItemEnd />
+                </AccordionItemGrid>
+                <AccordionItemEnd />
 
-              <AccordionItemDivider>Corporate Design</AccordionItemDivider>
-              <AccordionItemGrid>
-                <div class="col-span-2">
-                  <TextInput
-                    label="Logo"
-                    type="file"
-                    class="file-input"
-                    accept="image/png, image/jpeg, image/svg+xml"
-                    onInput={async (evt) => {
-                      if (!evt.currentTarget.files) {
-                        return;
+                <AccordionItemDivider>Andere Angaben</AccordionItemDivider>
+                <AccordionItemGrid>
+                  <FullWidthAccordionInput
+                    vertical={true}
+                    label="Zahlungsbedingungen"
+                    value={localState.paymentTerms}
+                    onInput={(evt) =>
+                      setLocalState("paymentTerms", evt.currentTarget.value)
+                    }
+                  />
+                  <div class="col-span-2">
+                    <TextInput
+                      label="MwST-Nr."
+                      value={localState.vatNumber}
+                      onInput={(evt) =>
+                        setLocalState("vatNumber", evt.currentTarget.value)
                       }
+                    />
+                  </div>
+                  <div class="col-span-2">
+                    <NumberInput
+                      required
+                      label="MwST-Satz"
+                      suffix="%"
+                      value={new Big(localState.vatRate).mul(100).toNumber()}
+                      onInput={(v) => {
+                        v != null &&
+                          setLocalState(
+                            "vatRate",
+                            new Big(v).div(100).toNumber()
+                          );
+                      }}
+                      onBlur={resetInput(0)}
+                    />
+                  </div>
+                </AccordionItemGrid>
+                <AccordionItemEnd />
 
-                      const file = evt.currentTarget.files[0];
-                      if (!file) {
-                        return;
-                      }
+                <AccordionItemDivider>Corporate Design</AccordionItemDivider>
+                <AccordionItemGrid>
+                  <div class="col-span-2">
+                    <TextInput
+                      label="Logo"
+                      type="file"
+                      class="file-input"
+                      accept="image/png, image/jpeg, image/svg+xml"
+                      onInput={async (evt) => {
+                        if (!evt.currentTarget.files) {
+                          return;
+                        }
 
-                      const content = await uploadFile(file, "dataUrl");
-                      if (!content) {
-                        return;
-                      }
+                        const file = evt.currentTarget.files[0];
+                        if (!file) {
+                          return;
+                        }
 
-                      const image = document.createElement("img");
-                      image.src = content;
-                      image.onload = function () {
-                        setLocalState("logo", {
-                          width: image.width,
-                          height: image.height,
-                          type: file.type,
-                          url: content,
-                        });
-                      };
-                    }}
-                  />
-                </div>
-              </AccordionItemGrid>
-            </YourDataValidationContext>
+                        const content = await uploadFile(file, "dataUrl");
+                        if (!content) {
+                          return;
+                        }
+
+                        const image = document.createElement("img");
+                        image.src = content;
+                        image.onload = function () {
+                          setLocalState("logo", {
+                            width: image.width,
+                            height: image.height,
+                            type: file.type,
+                            url: content,
+                          });
+                        };
+                      }}
+                    />
+                  </div>
+                </AccordionItemGrid>
+              </YourDataValidationContext>
+            </AccordionContent>
           </AccordionItem>
           <AccordionItem
             item={2}
             activeTitleColor="text-emerald-500"
             label={
               <>
-                <CustomerIcon /> Kunde
+                <CustomerIcon />
+                <AccordionItemLabel>Kunde</AccordionItemLabel>
                 <Show when={!customerDataForm.valid}>
-                  <WarningIcon class="text-error" />
+                  <AccordionItemLabel>
+                    <WarningIcon class="text-error" />
+                  </AccordionItemLabel>
                 </Show>
               </>
             }
           >
-            <CustomerValidationContext>
-              <AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
-              <AccordionItemGrid>
-                <AddressInputs
-                  namePrefix="debtor"
-                  setter={createCustomerAddressSetter()}
-                  address={() => state.customer.debtorAddress}
-                />
-              </AccordionItemGrid>
-              <AccordionItemEnd />
-              <AccordionItemDivider>
-                Abweichende Adresse{" "}
-                <input
-                  class="checkbox"
-                  type="checkbox"
-                  checked={state.useCustomerAlternativeAddress}
-                  onChange={(evt) =>
-                    setState(
-                      "useCustomerAlternativeAddress",
-                      evt.currentTarget.checked
-                    )
-                  }
-                />
-              </AccordionItemDivider>
-              <div use:autoAnimate>
-                <Show when={state.useCustomerAlternativeAddress}>
-                  <AccordionItemGrid>
-                    <AddressInputs
-                      setter={createCustomerAddressSetter(true)}
-                      address={() => state.customer.alternativeAddress}
-                    />
-                  </AccordionItemGrid>
-                </Show>
-              </div>
-              <AccordionItemEnd />
-              <AccordionItemDivider>Andere Angaben</AccordionItemDivider>
-              <AccordionItemGrid>
-                <FullWidthAccordionInput
-                  label="Kunden Nr."
-                  value={state.customer.customerNumber}
-                  onInput={(evt) =>
-                    setState(
-                      "customer",
-                      "customerNumber",
-                      evt.currentTarget.value
-                    )
-                  }
-                />
+            <AccordionContent>
+              <CustomerValidationContext>
+                <AccordionItemDivider>Bank Verbindung</AccordionItemDivider>
+                <AccordionItemGrid>
+                  <AddressInputs
+                    namePrefix="debtor"
+                    setter={createCustomerAddressSetter()}
+                    address={() => state.customer.debtorAddress}
+                  />
+                </AccordionItemGrid>
+                <AccordionItemEnd />
+                <AccordionItemDivider>
+                  Abweichende Adresse{" "}
+                  <input
+                    class="checkbox"
+                    type="checkbox"
+                    checked={state.useCustomerAlternativeAddress}
+                    onChange={(evt) =>
+                      setState(
+                        "useCustomerAlternativeAddress",
+                        evt.currentTarget.checked
+                      )
+                    }
+                  />
+                </AccordionItemDivider>
+                <div use:autoAnimate>
+                  <Show when={state.useCustomerAlternativeAddress}>
+                    <AccordionItemGrid>
+                      <AddressInputs
+                        setter={createCustomerAddressSetter(true)}
+                        address={() => state.customer.alternativeAddress}
+                      />
+                    </AccordionItemGrid>
+                  </Show>
+                </div>
+                <AccordionItemEnd />
+                <AccordionItemDivider>Andere Angaben</AccordionItemDivider>
+                <AccordionItemGrid>
+                  <FullWidthAccordionInput
+                    label="Kunden Nr."
+                    value={state.customer.customerNumber}
+                    onInput={(evt) =>
+                      setState(
+                        "customer",
+                        "customerNumber",
+                        evt.currentTarget.value
+                      )
+                    }
+                  />
 
-                <FullWidthAccordionInput
-                  label="MwST-Nr."
-                  value={state.customer.vatNumber}
-                  onInput={(evt) =>
-                    setState("customer", "vatNumber", evt.currentTarget.value)
-                  }
-                />
-              </AccordionItemGrid>
-            </CustomerValidationContext>
+                  <FullWidthAccordionInput
+                    label="MwST-Nr."
+                    value={state.customer.vatNumber}
+                    onInput={(evt) =>
+                      setState("customer", "vatNumber", evt.currentTarget.value)
+                    }
+                  />
+                </AccordionItemGrid>
+              </CustomerValidationContext>
+            </AccordionContent>
           </AccordionItem>
           <AccordionItem
             item={3}
@@ -724,189 +762,199 @@ const SettingsOverlay: Component = () => {
             label={
               <>
                 <PositionsIcon />
-                Positionen
-                <small>({state.positions.length})</small>
+                <AccordionItemLabel>
+                  Positionen <small>({state.positions.length})</small>
+                </AccordionItemLabel>
               </>
             }
           >
-            <PositionsSettings />
+            <AccordionContent>
+              <PositionsSettings />
+            </AccordionContent>
           </AccordionItem>
           <AccordionItem
             activeTitleColor="text-blue-500"
             label={
               <>
                 <DesignIcon />
-                Design
+                <AccordionItemLabel>Design</AccordionItemLabel>
               </>
             }
             item={4}
           >
-            <AccordionItemGrid>
-              <div class="col-span-2">
-                <Checkbox
-                  checked={localState.showLufraiWatermark}
-                  onChange={(evt) =>
-                    setLocalState(
-                      "showLufraiWatermark",
-                      evt.currentTarget.checked
-                    )
-                  }
-                >
-                  Lufrai Wasserzeichen anzeigen
-                </Checkbox>
-              </div>
-              <div class="col-span-2">
-                <Checkbox
-                  checked={state.fullWidthInvoice}
-                  onChange={(evt) =>
-                    setState("fullWidthInvoice", evt.currentTarget.checked)
-                  }
-                >
-                  Abstandlose QR Rechnung
-                </Checkbox>
-              </div>
-            </AccordionItemGrid>
+            <AccordionContent>
+              <AccordionItemGrid>
+                <div class="col-span-2">
+                  <Checkbox
+                    checked={localState.showLufraiWatermark}
+                    onChange={(evt) =>
+                      setLocalState(
+                        "showLufraiWatermark",
+                        evt.currentTarget.checked
+                      )
+                    }
+                  >
+                    Lufrai Wasserzeichen anzeigen
+                  </Checkbox>
+                </div>
+                <div class="col-span-2">
+                  <Checkbox
+                    checked={state.fullWidthInvoice}
+                    onChange={(evt) =>
+                      setState("fullWidthInvoice", evt.currentTarget.checked)
+                    }
+                  >
+                    Abstandlose QR Rechnung
+                  </Checkbox>
+                </div>
+              </AccordionItemGrid>
+            </AccordionContent>
           </AccordionItem>
         </div>
-        <div>
-          <div class="grid grid-cols-2 gap-2 mb-4">
-            <button
-              class="btn btn-sm btn-accent shadow-md gap-2"
-              onClick={async () => {
-                const files = await selectLocalFiles([
-                  ".json",
-                  "application/json",
-                ]);
-                if (!files[0]) {
-                  return;
-                }
-
-                setLoadModal("loading", true);
-                setLoadModal("errors", null);
-                await sleep(200);
-                setLoadModal("open", true);
-
-                const load = async () => {
-                  const results = await Promise.all([
-                    uploadFile(files[0]),
-                    sleep(600),
+        <div class="overflow-hidden transition-opacity opacity-90 group-hover:opacity-100 group-focus-within:opacity-100 xxl:opacity-100">
+          <AccordionContent>
+            <div class="grid grid-cols-2 gap-2 mb-4">
+              <button
+                class="btn btn-sm btn-accent shadow-md gap-2"
+                onClick={async () => {
+                  const files = await selectLocalFiles([
+                    ".json",
+                    "application/json",
                   ]);
-
-                  const content = results[0];
-
-                  if (!content) {
-                    setLoadModal("errors", {
-                      message:
-                        "Das Dokument ist leer! Bitte lade ein korrektes Dokument hoch.",
-                    });
+                  if (!files[0]) {
                     return;
                   }
 
-                  let contentObject: any;
+                  setLoadModal("loading", true);
+                  setLoadModal("errors", null);
+                  await sleep(200);
+                  setLoadModal("open", true);
 
-                  try {
-                    contentObject = JSON.parse(content);
-                  } catch (err) {
-                    setLoadModal("errors", {
-                      message: "Das Dokument hat kein gültiges Format.",
-                    });
-                    return;
-                  }
+                  const load = async () => {
+                    const results = await Promise.all([
+                      uploadFile(files[0]),
+                      sleep(600),
+                    ]);
 
-                  // TODO: Run migrations
-
-                  const schema = z
-                    .object({
-                      state: storeSchema,
-                      localState: localStoreSchema,
-                    })
-                    .collectErrors();
-
-                  try {
-                    schema.parse(contentObject);
-                  } catch (e: any) {
-                    const message = "Das Dokument hat kein gültiges Format.";
-
-                    let parseErrors = [{ path: ".", message: e.message }];
-                    if (e.collectedErrors) {
-                      parseErrors = Object.values(e.collectedErrors).map(
-                        (error: any) => {
-                          return {
-                            path: error.path.join("."),
-                            message: error.message,
-                          };
-                        }
-                      );
+                    const content = results[0];
+
+                    if (!content) {
+                      setLoadModal("errors", {
+                        message:
+                          "Das Dokument ist leer! Bitte lade ein korrektes Dokument hoch.",
+                      });
+                      return;
                     }
 
-                    setLoadModal("errors", {
-                      message,
-                      parseErrors,
-                    });
+                    let contentObject: any;
 
-                    return;
-                  }
+                    try {
+                      contentObject = JSON.parse(content);
+                    } catch (err) {
+                      setLoadModal("errors", {
+                        message: "Das Dokument hat kein gültiges Format.",
+                      });
+                      return;
+                    }
+
+                    // TODO: Run migrations
+
+                    const schema = z
+                      .object({
+                        state: storeSchema,
+                        localState: localStoreSchema,
+                      })
+                      .collectErrors();
+
+                    try {
+                      schema.parse(contentObject);
+                    } catch (e: any) {
+                      const message = "Das Dokument hat kein gültiges Format.";
+
+                      let parseErrors = [{ path: ".", message: e.message }];
+                      if (e.collectedErrors) {
+                        parseErrors = Object.values(e.collectedErrors).map(
+                          (error: any) => {
+                            return {
+                              path: error.path.join("."),
+                              message: error.message,
+                            };
+                          }
+                        );
+                      }
+
+                      setLoadModal("errors", {
+                        message,
+                        parseErrors,
+                      });
+
+                      return;
+                    }
 
-                  await startTransition(function () {
-                    batch(() => {
-                      setState(reconcile(contentObject.state));
-                      setLocalState(reconcile(contentObject.localState));
+                    await startTransition(function () {
+                      batch(() => {
+                        setState(reconcile(contentObject.state));
+                        setLocalState(reconcile(contentObject.localState));
+                      });
                     });
-                  });
-                };
+                  };
 
-                const results = await Promise.all([sleep(1200), load()]);
+                  const results = await Promise.all([sleep(1200), load()]);
 
-                setLoadModal("loading", false);
+                  setLoadModal("loading", false);
 
-                if (!loadModal.errors) {
-                  await sleep(1100);
-                  setLoadModal("open", false);
-                }
-              }}
-            >
-              <LoadIcon /> Laden
-            </button>
-            <button
-              class="btn btn-sm btn-accent shadow-md gap-2"
-              onClick={saveProject}
-            >
-              <DownloadIcon /> Speichern
-            </button>
-          </div>
-          <div class="form-control w-full">
-            <div class="input-group input-group-sm">
-              <select
-                class="w-1/2 select select-sm select-bordered shadow"
-                onChange={(evt) => {
-                  setUiState("printType", evt.currentTarget.value as any);
-                  evt.currentTarget.blur();
+                  if (!loadModal.errors) {
+                    await sleep(1100);
+                    setLoadModal("open", false);
+                  }
                 }}
               >
-                <For
-                  each={
-                    [
-                      PRINT_TYPE_OFFER,
-                      PRINT_TYPE_CONFIRMATION,
-                      PRINT_TYPE_INVOICE,
-                    ] as PrintType[]
-                  }
-                >
-                  {(type) => (
-                    <option value={type} selected={type === uiState.printType}>
-                      {printTypeTitles[type]}
-                    </option>
-                  )}
-                </For>
-              </select>
+                <LoadIcon /> Laden
+              </button>
               <button
-                class="btn btn-sm btn-primary flex-1 gap-2 shadow-md"
-                onClick={() => window.print()}
+                class="btn btn-sm btn-accent shadow-md gap-2"
+                onClick={saveProject}
               >
-                <PrinterIcon /> Drucken
+                <DownloadIcon /> Speichern
               </button>
             </div>
-          </div>
+            <div class="form-control w-full">
+              <div class="input-group input-group-sm">
+                <select
+                  class="w-1/2 select select-sm select-bordered shadow"
+                  onChange={(evt) => {
+                    setUiState("printType", evt.currentTarget.value as any);
+                    evt.currentTarget.blur();
+                  }}
+                >
+                  <For
+                    each={
+                      [
+                        PRINT_TYPE_OFFER,
+                        PRINT_TYPE_CONFIRMATION,
+                        PRINT_TYPE_INVOICE,
+                      ] as PrintType[]
+                    }
+                  >
+                    {(type) => (
+                      <option
+                        value={type}
+                        selected={type === uiState.printType}
+                      >
+                        {printTypeTitles[type]}
+                      </option>
+                    )}
+                  </For>
+                </select>
+                <button
+                  class="btn btn-sm btn-primary flex-1 gap-2 shadow-md"
+                  onClick={() => window.print()}
+                >
+                  <PrinterIcon /> Drucken
+                </button>
+              </div>
+            </div>
+          </AccordionContent>
         </div>
       </div>
       <Show when={true}>