styled LoadingScreen

ProjektAdLer · Nov 24, 2023 · 8b62148 · 8b62148
1 parent 8322c3a
commit 8b62148
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/src/Components/Core/Presentation/React/GeneralComponents/LoadingScreen/LoadingScreen.tsx b/src/Components/Core/Presentation/React/GeneralComponents/LoadingScreen/LoadingScreen.tsx
@@ -20,14 +20,14 @@ export default function LoadingScreen() {
   return (
     <div className="absolute z-[20000]">
       <main className="grid w-screen h-screen grid-cols-6 grid-rows-5 bg-gradient-to-br from-adlerbggradientfrom to-adlerbggradientto">
-        <section className="z-20 flex items-center justify-center col-span-4 col-start-2 row-span-3 row-start-1 mt-24">
+        <section className="z-20 flex items-center justify-center col-span-4 col-start-2 row-span-3 row-start-1 mt-10">
           <img
             className="w-32 m-4 xs:w-36 md:w-64 lg:w-72 xl:w-96 animate-wiggle"
             src={logo}
             alt="AdlerEngine Logo"
           />
         </section>
-        <section className="z-10 flex flex-col items-center justify-center col-span-4 col-start-2 row-span-1 row-start-4 mb-10">
+        <section className="z-10 flex flex-col items-center justify-center col-span-2 col-start-3 row-span-1 row-start-4 mb-10 text-lg font-medium rounded-lg justify-self-center w-96 h-1/3 bg-buttonbgblue text-adlerdarkblue lg:text-2xl">
           {viewModel.loadStep.Value && <p>{viewModel.loadStep.Value}</p>}
         </section>
 
@@ -52,25 +52,25 @@ export default function LoadingScreen() {
             <StyledButton
               shape={"freefloatcenter"}
               onClick={() => controller.closeLoadingScreen()}
-              className="p-5"
+              className="p-5 scale-125 lg:scale-150"
             >
               Weiter zum Lernraum
             </StyledButton>
           </section>
         )}
 
-        <section className="flex items-center self-center col-span-4 col-start-2 row-start-5 rounded-lg bg-buttonbgblue justify-self-center">
-          <p className="p-4 text-xl font-medium text-center text-adlerdarkblue">
+        <section className="flex items-center self-center col-span-4 col-start-2 row-start-5 justify-self-center">
+          <p className="p-4 text-lg font-medium text-center lg:text-xl text-adlerdarkblue">
             Du willst mehr über das Projekt AdLer erfahren? Dann schau doch mal
             auf unserer{" "}
             <a
               target="_blank"
               href="https://projekt-adler.eu"
               title="AdLer Projekthomepage https://projekt-adler.eu"
               rel="noreferrer"
-              className="underline text-nodehandlecolor"
+              className="underline text-adleroceanblue hover:text-nodehandlecolor"
             >
-              Projekt Homepage
+              Projekt-Homepage
             </a>{" "}
             vorbei.
           </p>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -180,6 +180,7 @@ module.exports = {
         adlerbggradientfrom: "#a1c8e5",
         adlerbggradientto: "#e2eaf2",
         nodehandlecolor: "#e9d6b3",
+        adleroceanblue: "#45a0e5",
         // Neue Farben, die noch nicht im Wiki dokumentiert sind, bitte unter diesem Kommentar einfügen
       },
       gridTemplateRows: {