From c047cca51864350981165347e9822a718ae7eba1 Mon Sep 17 00:00:00 2001
From: JohannaPeanut <76495099+JohannaPeanut@users.noreply.github.com>
Date: Thu, 11 Jan 2024 12:46:03 +0100
Subject: [PATCH] Survey: update styling text, legend

---
 src/core/styles/index.css                  |  4 ++++
 src/survey-public/components/core/Text.tsx | 11 +++--------
 src/survey-public/frm7/data/feedback.ts    |  2 +-
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/core/styles/index.css b/src/core/styles/index.css
index a7fc21a21..0bd6f2074 100644
--- a/src/core/styles/index.css
+++ b/src/core/styles/index.css
@@ -30,3 +30,7 @@
 
 @layer utilities {
 }
+
+.stripe-background {
+  background: repeating-linear-gradient(-45deg, #da1616, #da1616 2px, white 2px, white 4px);
+}
diff --git a/src/survey-public/components/core/Text.tsx b/src/survey-public/components/core/Text.tsx
index 4a349b380..7439abf85 100644
--- a/src/survey-public/components/core/Text.tsx
+++ b/src/survey-public/components/core/Text.tsx
@@ -8,12 +8,7 @@ type Props = {
 
 export const SurveyH1: React.FC<Props> = ({ className, children }) => {
   return (
-    <h1
-      className={clsx(
-        "mb-8 pt-10 text-3xl font-extrabold text-gray-900 sm:text-5xl md:text-4xl",
-        className,
-      )}
-    >
+    <h1 className={clsx("mb-6 pt-10 text-2xl font-extrabold text-gray-900 sm:text-3xl", className)}>
       {children}
     </h1>
   )
@@ -21,7 +16,7 @@ export const SurveyH1: React.FC<Props> = ({ className, children }) => {
 
 export const SurveyH2: React.FC<Props> = ({ className, children }) => {
   return (
-    <h2 className={clsx("mb-6 pt-12 text-2xl font-extrabold text-gray-900 sm:text-3xl", className)}>
+    <h2 className={clsx("mb-4 pt-8 text-lg font-extrabold text-gray-900 sm:text-xl", className)}>
       {children}
     </h2>
   )
@@ -29,7 +24,7 @@ export const SurveyH2: React.FC<Props> = ({ className, children }) => {
 
 export const SurveyH3: React.FC<Props> = ({ className, children }) => {
   return (
-    <h3 className={clsx("mb-6 pt-12 text-xl font-extrabold text-gray-900 sm:text-2xl", className)}>
+    <h3 className={clsx("mb-4 pt-8 text-lg font-extrabold text-gray-900", className)}>
       {children}
     </h3>
   )
diff --git a/src/survey-public/frm7/data/feedback.ts b/src/survey-public/frm7/data/feedback.ts
index 5af787b75..38b130805 100644
--- a/src/survey-public/frm7/data/feedback.ts
+++ b/src/survey-public/frm7/data/feedback.ts
@@ -79,7 +79,7 @@ export const feedbackDefinition: TFeedback = {
               },
               blockedArea: {
                 label: { de: "Gesperrt aus Gründen des Natur- oder Denkmalschutzes" },
-                color: "bg-[#DA1616] opacity-70", // todo frm7
+                color: "opacity-70 stripe-background", // todo frm7
                 height: "h-5",
                 shape: "line",
               },