make all pages responsiv

Made endpage, anmeldepage and regisitrierung responsive (prefer moblie view)

src/App.js

@@ -17,17 +17,19 @@ import Warenkorb from "./Pages/warenkorb";
 import Listenansicht from "./Pages/listenansicht";
 import "./App.css";
 import MainPage from "./Components/mainpage";
+import EndPage from "./Components/endpage";
 
 import { QueryClient, QueryClientProvider, useQuery } from "react-query";
 
 const queryClient = new QueryClient();
 
+/*<QueryClientProvider client={queryClient}>
+        <MainPage></MainPage>
+      </QueryClientProvider>*/
 function App() {
   return (
     <div className="App">
-      <QueryClientProvider client={queryClient}>
-        <MainPage></MainPage>
-      </QueryClientProvider>
+      <Registrierung></Registrierung>
     </div>
   );
 }

src/Components/endpage.jsx

@@ -5,12 +5,12 @@ import Ueberschrift2 from "./ueberschrift2";
 
 function EndPage() {
   return (
-    <div class="h-screen overflow-hidden">
+    <div class="md:h-screen overflow-hidden">
       <div>
         <HeaderBig name=" " />
       </div>
       <div class="flex justify-center content-center items-center h-full w-full">
-        <div class="bg-primary h-1/2 w-1/2 p-10 lg:w-1/3 rounded-3xl flex justify-center items-center flex-col">
+        <div class="md:bg-primary h-1/2 w-1/2 p-10 lg:w-1/3 rounded-3xl flex justify-center items-center flex-col sm:bg-white">
           <Ueberschrift2 name="Vielen Dank!" />
           <Ueberschrift2 name="Deine Bestellung wurde erfolgreich aufgegeben." />
           <div class="p-5"></div>

src/Pages/anmeldepage.jsx

@@ -5,25 +5,31 @@ import bild from "../pizza_logo_dark.png";
 
 function Anmeldepage(props) {
   return (
-    <div class="sm: m-2">
-      <div class="sm:  grid grid-cols-5 items-center">
-        <img
-          class="sm:w-60 h-45 p-5 grid col-span-3 col-start-2 place-content-center"
-          src={props.bild || bild}
-          alt="Logo"></img>
+    <div class="sm: m-2 items-center">
+      <div class="flex justify-center">
+        <img class="w-60 h-45" src={props.bild || bild} alt="Logo"></img>
       </div>
       <br></br>
       <br></br>
       <label class="font-medium leading-tight text-3xl mt-0 mb-2">Anmelden</label>
       <br></br>
       <br></br>
-      <label class="absolute left-0">E-Mail:</label>
-      <Eingabefeld isPassword={false} placeholder="Mail"></Eingabefeld>
-      <label class="absolute left-0">Passwort:</label>
-      <Eingabefeld isPassword={true} placeholder="Passwort"></Eingabefeld>
+      <div class="md:flex justify-center sm:w-full">
+        <label className="sm:absolute-left-0">E-Mail:</label>
+      </div>
+      <div class="md:flex justify-center sm:w-full">
+        <Eingabefeld isPassword={false} placeholder="Mail"></Eingabefeld>
+      </div>
+
+      <div class="md:flex justify-center sm:w-full">
+        <label className="sm:absolute-left-0">Passwort:</label>
+      </div>
+      <div class="md:flex justify-center sm:w-full">
+        <Eingabefeld isPassword={true} placeholder="Passwort"></Eingabefeld>
+      </div>
       <br></br>
       <br></br>
-      <div class="sm: flex justify-between">
+      <div class="flex justify-between md:justify-center">
         <ButtonPrimary name="Registieren"></ButtonPrimary>
         <ButtonPrimary name="Anmelden"></ButtonPrimary>
       </div>

src/Pages/registrierung.jsx

@@ -6,11 +6,8 @@ import bild from "../pizza_logo_dark.png";
 function Registrierung(props) {
   return (
     <div class="sm: m-5">
-      <div class="sm:  grid grid-cols-5 items-center">
-        <img
-          class="sm:w-60 h-45 p-5 grid col-span-3 col-start-2 place-content-center"
-          src={props.bild || bild}
-          alt="Logo"></img>
+      <div class="flex justify-center">
+        <img class="w-60 h-45" src={props.bild || bild} alt="Logo"></img>
       </div>
 
       <br></br>
@@ -18,38 +15,45 @@ function Registrierung(props) {
       <label class="font-medium leading-tight text-3xl mt-0 mb-2">Registrieren</label>
       <br></br>
       <br></br>
-      <div class="grid grid-cols-2 grid-rows-2 justify-items-start p-0 gap-x-1 gap-y-0 h-10">
-        <label class="col-start-1 col-end-1 row-start-1 row-end-1">Vorname:</label>
-        <label class="col-start-2 col-end-2 row-start-1 row-end-1">Passwort:</label>
+      <div class="grid grid-cols-2 grid-rows-2  p-0 gap-x-1 gap-y-0 h-10 md:ml-80 md:pl-20 md:mr-80 md:pr:20">
+        <label class="sm: col-start-1 col-end-1 row-start-1 row-end-1">Vorname:</label>
+        <label class="sm: col-start-2 col-end-2 row-start-1 row-end-1">Nachname:</label>
         <Eingabefeld
           isPassword={false}
-          placeholder="Mail"
-          class="col-start-1 col-end-1 row-start-2 row-end-2"></Eingabefeld>
+          placeholder="Vorname"
+          class="sm: col-start-1 col-end-1 row-start-2 row-end-2"></Eingabefeld>
         <Eingabefeld
-          isPassword={true}
-          placeholder="Passwort"
+          isPassword={false}
+          placeholder="Nachname"
           class="col-start-2 col-end-2 row-start-2 row-end-2"></Eingabefeld>
       </div>
       <br></br>
       <br></br>
-      <div class="pt-2">
-        <label class="absolute left-2">E-Mail:</label>
+      <br></br>
+      <div class="md:flex justify-center sm:w-full">
+        <label class="">E-Mail:</label>
+      </div>
+      <div className="md:flex justify-center sm:w-full">
         <Eingabefeld isPassword={false} placeholder="Mail"></Eingabefeld>
       </div>
 
-      <div class="pt-2">
-        <label class="absolute left-2">Passwort:</label>
+      <div class="md:flex justify-center sm:w-full">
+        <label class="">Passwort:</label>
+      </div>
+      <div class="md:flex justify-center sm:w-full">
         <Eingabefeld isPassword={true} placeholder="Passwort"></Eingabefeld>
       </div>
 
-      <div class="pt-2">
-        <label class="absolute left-2">Passwort erneut:</label>
+      <div class="md:flex justify-center sm:w-full">
+        <label class="">Passwort erneut:</label>
+      </div>
+      <div className="md:flex justify-center sm:w-full">
         <Eingabefeld isPassword={false} placeholder="Passwort erneut"></Eingabefeld>
       </div>
 
       <br></br>
       <br></br>
-      <div class="sm: flex justify-between">
+      <div class="sm: flex justify-between md:justify-center">
         <ButtonPrimary name="Registieren"></ButtonPrimary>
         <ButtonPrimary name="Anmelden"></ButtonPrimary>
       </div>