chore: apply corporate design (#183)

Apply corporate design

src/lib/components/features/ebd-input.svelte

@@ -97,7 +97,7 @@
     on:focus={handleFocus}
     on:blur={handleBlur}
     placeholder={isFocused ? "" : "Bitte auswählen"}
-    class="inline-block border-2 border-white rounded-lg bg-primary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
+    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
   />
 
   <label

src/lib/components/features/export-button.svelte

@@ -52,7 +52,7 @@
 
 <button
   on:click={handleExport}
-  class="flex flex-row items-center gap-2 rounded-full bg-tint text-[16px] py-4 px-5 text-secondary transition-opacity duration-200 whitespace-nowrap"
+  class="flex flex-row items-center gap-2 rounded-full bg-secondary text-[16px] py-4 px-5 text-black transition-opacity duration-200 whitespace-nowrap"
   class:opacity-30={isDisabled}
   disabled={isDisabled}
 >

src/lib/components/features/filter-chapter-select.svelte

@@ -79,7 +79,7 @@
     </label>
 
     <div
-      class="border-2 border-white rounded-lg bg-primary p-3 flex flex-wrap items-center gap-2"
+      class="border-2 border-white rounded-lg bg-secondary p-3 flex flex-wrap items-center gap-2"
     >
       {#if selectedChapters.size === 0 && !isSelectFocused}
         <button

src/lib/components/features/filter-role-select.svelte

@@ -77,7 +77,7 @@
     </label>
 
     <div
-      class="border-2 border-white rounded-lg bg-primary p-3 flex flex-wrap items-center gap-2"
+      class="border-2 border-white rounded-lg bg-secondary p-3 flex flex-wrap items-center gap-2"
     >
       {#if selectedRoles.size === 0 && !isSelectFocused}
         <button

src/lib/components/features/filter-section-input.svelte

@@ -87,7 +87,7 @@
     on:focus={handleFocus}
     on:blur={handleBlur}
     placeholder={isFocused ? "" : 'z.B. "Lieferbeginn"'}
-    class="inline-block border-2 border-white rounded-lg bg-primary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
+    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-none w-full placeholder-black disabled:placeholder-opacity-25 text-base leading-relaxed cursor-pointer"
   />
 
   <label

src/lib/components/features/format-version-select.svelte

@@ -18,7 +18,7 @@
     id="format-version-select"
     bind:value={selectedVersion}
     on:change={handleSelect}
-    class="inline-block border-2 border-white rounded-lg bg-primary py-3 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer text-base leading-relaxed"
+    class="inline-block border-2 border-white rounded-lg bg-secondary py-3 px-2 ps-3 pe-4 focus:outline-0 w-full cursor-pointer text-base leading-relaxed"
   >
     <option value="">Bitte auswählen</option>
     {#each formatVersions as version}

src/lib/components/index.ts

@@ -11,7 +11,6 @@ export { default as IconLogo } from "$lib/components/shared/icon-logo.svelte";
 export { default as IconLogout } from "$lib/components/shared/icon-logout.svelte";
 export { default as IconPlant } from "$lib/components/shared/icon-plant.svelte";
 export { default as IconSquareArrow } from "$lib/components/shared/icon-square-arrow.svelte";
-export { default as LandingpageBanner } from "$lib/components/shared/landingpage-banner.svelte";
 export { default as LandingpageButton } from "$lib/components/shared/landingpage-button.svelte";
 
 // features

src/lib/components/shared/footer.svelte

@@ -2,7 +2,7 @@
   import { base } from "$app/paths";
   import { IconHeart, IconLogo } from "$lib/components";
 
-  export let background = "bg-primary";
+  export let background = "bg-secondary";
 
   let currentYear = new Date().getFullYear();
 </script>
@@ -11,7 +11,7 @@
   <a href="{base}/" title="landingpage" class="flex-none items-center">
     <IconLogo size={24} />
   </a>
-  <div class="flex items-center text-sm text-white space-x-1">
+  <div class="flex items-center text-sm text-black space-x-1">
     <p class="flex items-center flex-wrap">
       © {currentYear} - made with
       <IconHeart />

src/routes/+page.svelte

@@ -3,11 +3,7 @@
 
   import { goto } from "$app/navigation";
   import { base } from "$app/paths";
-  import {
-    AuthButton,
-    IconSquareArrow,
-    LandingpageBanner,
-  } from "$lib/components";
+  import { IconSquareArrow } from "$lib/components";
   import auth from "$src/auth/authService";
   import { isAuthenticated } from "$src/store";
 
@@ -20,37 +16,34 @@
   }
 </script>
 
-<div class="relative">
-  <div class="absolute top-4 right-4 z-10">
-    <AuthButton />
-  </div>
-</div>
-
-<section class="bg-primary flex-grow flex items-center justify-center pt-40">
-  <div class="rounded-lg bg-tint p-12 shadow-md w-1/2">
+<section class="bg-primary flex-grow flex items-center justify-center">
+  <div class="rounded-lg bg-secondary p-12 shadow-md w-1/2">
     <h2
-      class="border-b border-secondary inline-block pb-[10px] text-2xl uppercase text-center w-full"
+      class="border-b border-secondary inline-block pb-[10px] text-2xl uppercase w-full"
     >
       Entscheidungsbaumdiagramme - als Diagramme
     </h2>
-    <p class="text-base text-justify pt-[20px]">
+    <p class="text-base pt-[20px]">
       Wer mit den vom BDEW veröffentlichten Entscheidungsbaumdiagrammen (EBDs)
       arbeitet weiß: Die tabellarische Form ist sperrig und mindestens
       unübersichtlich. Unsere automatisch generierten EBDs von Hochfrequenz sind
       hingegen echte Diagramme - lesbar und nutzungsfreundlich.
     </p>
-    <p class="text-base text-justify pt-[20px]">
-      Die auf bdew-mako.de veröffentlichten Word-Dateien werden von uns
-      vollautomatisch ausgelesen. Aus den so gewonnenen Rohdaten erstellt unsere
-      Software anschließend ebenso automatisiert Diagramme, welche inhaltlich zu
-      100% den offiziellen BDEW-Dokumenten entsprechen. Diese Diagramme sollen
-      Fachbereichen und Menschen mit Prozess-Expertise dabei unterstützen, ihre
-      Systeme fit für neue oder angepasste Prüflogiken zu machen. Auf Grundlage
-      echter Diagramme lässt sich viel leichter überblicken, an welcher Stelle
-      Implementierungsaufwände anfallen, ohne dabei den Gesamtprozess aus den
-      Augen zu verlieren.
+    <p class="text-base pt-[20px]">
+      Die auf
+      <a href="https://bdew-mako.de" class="text-base pt-[20px] text-primary">
+        bdew-mako.de
+      </a>
+      veröffentlichten Word-Dateien werden von uns vollautomatisch ausgelesen. Aus
+      den so gewonnenen Rohdaten erstellt unsere Software anschließend ebenso automatisiert
+      Diagramme, welche inhaltlich zu 100% den offiziellen BDEW-Dokumenten entsprechen.
+      Diese Diagramme sollen Fachbereichen und Menschen mit Prozess-Expertise dabei
+      unterstützen, ihre Systeme fit für neue oder angepasste Prüflogiken zu machen.
+      Auf Grundlage echter Diagramme lässt sich viel leichter überblicken, an welcher
+      Stelle Implementierungsaufwände anfallen, ohne dabei den Gesamtprozess aus
+      den Augen zu verlieren.
     </p>
-    <p class="text-base text-justify pt-[20px]">
+    <p class="text-base pt-[20px]">
       Die Diagramme können entweder als SVG-Dateien heruntergeladen werden, oder
       auch als puml, um entsprechend eigene Erweiterungen, Notizen usw. darin
       abzubilden.
@@ -68,6 +61,3 @@
     </div>
   </div>
 </section>
-<section class="pb-8 bg-primary">
-  <LandingpageBanner />
-</section>

tailwind.config.js

@@ -4,12 +4,8 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: "#8DE040",
-        secondary: "#6EB52C",
-        tint: "#FBFFFE",
-        "hf-ahbtabellen": "#EBBEC1",
-        "hf-bedingungsbaum": "#E4C67F",
-        "hf-fristenkalender": "#ABDCD3",
+        primary: "#8ba2d7",
+        secondary: "#c2cee9",
       },
     },
   },