From 78e22b89808c76a9a321915acf928a0dfcdfaaf5 Mon Sep 17 00:00:00 2001
From: Mountler <mikey-nihon@web.de>
Date: Mon, 9 Dec 2024 13:19:33 +0100
Subject: [PATCH] Fixed display of back button in adaptivity element

---
 .../AdaptivityElementDialogContainer.tsx         |  5 +++--
 ...daptivityElementDialogContainer.test.tsx.snap | 16 ++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/Components/Core/Presentation/Adaptivity/AdaptivityElement/UIComponents/AdaptivityElementDialogContainer.tsx b/src/Components/Core/Presentation/Adaptivity/AdaptivityElement/UIComponents/AdaptivityElementDialogContainer.tsx
index 9780e28f4..7d2d5875b 100644
--- a/src/Components/Core/Presentation/Adaptivity/AdaptivityElement/UIComponents/AdaptivityElementDialogContainer.tsx
+++ b/src/Components/Core/Presentation/Adaptivity/AdaptivityElement/UIComponents/AdaptivityElementDialogContainer.tsx
@@ -50,6 +50,7 @@ import {
 } from "../../../../Domain/LearningElementModels/LearningElementModelTypes";
 import { useTranslation } from "react-i18next";
 import CloseButton from "~ReactComponents/ReactRelated/ReactBaseComponents/CloseButton";
+import StyledButton from "~ReactComponents/ReactRelated/ReactBaseComponents/StyledButton";
 
 function getNPCImage(model: LearningElementModel, close: boolean): string {
   switch (model) {
@@ -145,12 +146,12 @@ export default function AdaptivityElementDialogContainer({
             <div className="z-20 flex items-center justify-center w-full h-20 gap-2 p-2 pb-3 overflow-hidden text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl ">
               {!(currentTask === null && currentQuestion === null) &&
                 !showAnswerFeedback && (
-                  <CloseButton
+                  <StyledButton
                     onClick={controller.back}
                     className="w-8 h-8 p-1 mr-2 text-xs roboto-black xl:w-10 xl:h-10 lg:w-10 lg:h-10 md:w-10 md:h-10 sm:w-10 sm:h-10"
                   >
                     {"\u25C0"}
-                  </CloseButton>
+                  </StyledButton>
                 )}
 
               {currentTask === null && currentQuestion === null && (
diff --git a/src/Components/CoreTest/Presentation/Adaptivity/AdaptivityElement/UIComponents/__snapshots__/AdaptivityElementDialogContainer.test.tsx.snap b/src/Components/CoreTest/Presentation/Adaptivity/AdaptivityElement/UIComponents/__snapshots__/AdaptivityElementDialogContainer.test.tsx.snap
index 1a62d26c2..0a11f22e8 100644
--- a/src/Components/CoreTest/Presentation/Adaptivity/AdaptivityElement/UIComponents/__snapshots__/AdaptivityElementDialogContainer.test.tsx.snap
+++ b/src/Components/CoreTest/Presentation/Adaptivity/AdaptivityElement/UIComponents/__snapshots__/AdaptivityElementDialogContainer.test.tsx.snap
@@ -99,15 +99,15 @@ exports[`AdaptivityElementDialogContainer should render 1`] = `
           <div
             class="z-20 flex items-center justify-center w-full h-20 gap-2 p-2 pb-3 overflow-hidden text-xl font-bold text-adlerdarkblue lg:roboto-black lg:text-2xl "
           >
-            <button
-              class="justify-center aspect-square flex items-center rounded-lg hover:cursor-pointer hover:border-adlerdarkblue hover:bg-adleryellow lg:text-xl transition ease-in-out duration-75 active:translate-x-[1px] active:translate-y-[1px] active:border-b-2 active:border-r-2 active:border-transparent text-adlerdarkblue font-regular border-b-2 border-r-2 border-adlerdarkblue overflow-hidden box-border cursor-pointer bg-buttonbgblue w-8 h-8 p-1 mr-2 text-xs roboto-black xl:w-10 xl:h-10 lg:w-10 lg:h-10 md:w-10 md:h-10 sm:w-10 sm:h-10"
+            <div
+              class=""
             >
-              <img
-                alt="CloseButton"
-                class="w-6 h-6"
-                src="close.svg"
-              />
-            </button>
+              <button
+                class="mr-2 roboto-black xl:w-10 xl:h-10 justify-center p-1 lg:w-16 lg:h-16 md:w-14 md:h-14 sm:w-10 sm:h-10 w-10 h-10 aspect-square flex items-center text-sm rounded-lg hover:cursor-pointer lg:text-xl transition ease-in-out duration-75 active:translate-x-[1px] active:translate-y-[1px] active:border-b-2 active:border-r-2 active:border-transparent text-adlerdarkblue font-regular border-b-2 border-r-2 border-adlerdarkblue overflow-hidden box-border cursor-pointer bg-buttonbgblue landscape:hover:bg-adleryellow active:bg-adleryellow"
+              >
+                ◀
+              </button>
+            </div>
             <img
               alt="LearningImage!"
               class="visible h-16 -scale-x-100 lg:invisible lg:h-0"