login password und css bereinigt

src/components/ContactForm.css

@@ -26,11 +26,6 @@ input[type=email], select, textarea
   padding-right: 4px;
 }
 
-div.flexCenter
-{
-  display: flex;
-}
-
   /* Style the label to display next to the inputs */
   .flexCenter label
   {
@@ -110,8 +105,3 @@ div.flexCenter
     align-items: center;
   }
  
-  .textArea
-  {
-    height: 100px;
-  }
-  

src/components/DogContactForm.tsx

@@ -79,7 +79,7 @@ export default function DogContactForm(
 
     return (
         <>
-<div className="flexCenter">
+<div className="flex flexCenter">
     <div className="containerForm">
     <form className="formForm" id='idForm' onSubmit={submitForm}>
     <div className="rowForm">

src/components/ImpressTxt.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 const ImpressTxt = () => 
 {
     return ( 
-<>
+<div className='flex flex-row justify-center' >
-<div className='mehrspaltig'>
+<div className='text-xs w-7/12'>
 <p><span className="underline">Angaben gem. § 5 TMG:</span></p>
 <p>&nbsp;</p>
 <p>Dipl.-Ing. Peter Hoppe</p>
@@ -13,7 +13,7 @@ const ImpressTxt = () =>
 <p>&nbsp;</p>
 <p><span className="underline">Kontaktaufnahme:</span></p>
 <p>&nbsp;</p>
-<p>E-Mail:</p>
+<p>E-Mail: dog@hope-fly.de</p>
 <p>&nbsp;</p>
 <p><strong>Haftungsausschluss - Disclaimer:</strong></p>
 <p>&nbsp;</p>
@@ -41,7 +41,7 @@ const ImpressTxt = () =>
     die Webseiten Dritter, die außerhalb unseres Verantwortungsbereichs liegen, würde eine Haftungsverpflichtung
     ausschließlich in dem Fall nur bestehen, wenn wir von den Inhalten Kenntnis erlangen und es uns technisch möglich
     und zumutbar wäre, die Nutzung im Falle rechtswidriger Inhalte zu verhindern.</p>
-<p>Diese Haftungsausschlusserklärung gilt auch innerhalb des eigenen Internetauftrittes „<em>Name Ihrer Domain</em>“
+<p>Diese Haftungsausschlusserklärung gilt auch innerhalb des eigenen Internetauftrittes „<em>hope-fly.de</em>“
     gesetzten Links und Verweise von Fragestellern, Blogeinträgern, Gästen des Diskussionsforums. Für illegale,
     fehlerhafte oder unvollständige Inhalte und insbesondere für Schäden, die aus der Nutzung oder Nichtnutzung
     solcherart dargestellten Informationen entstehen, haftet allein der Diensteanbieter der Seite, auf welche verwiesen
@@ -64,7 +64,7 @@ const ImpressTxt = () =>
 <p>Dieses <a href="http://www.jurarat.de/muster-impressum">Impressum</a> wurde freundlicherweise von www.jurarat.de zur
     Verfügung gestellt.</p>
     </div>
-    </>
+  </div>
 );
 }
 export default ImpressTxt;

src/components/Impressum.css

@@ -1,12 +0,0 @@
-.underline
-{
-    text-decoration: underline;
-}
-
-.mehrspaltig 
-{
-    column-count:      2;
-    column-gap:        10em;
-    column-rule-style: double;
-    height: 400vh;
-}

src/components/Impressum.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ImpressTxt from './ImpressTxt';
-import './Impressum.css'
 
 const Impressum = () => 
 {

src/components/Login.tsx

@@ -37,7 +37,7 @@ const Login = () =>
   
     const onChangeInput = (e: React.FormEvent<HTMLInputElement>) => 
     {
-        if(e.currentTarget.type === 'email' || e.currentTarget.type === 'password')
+        //if(e.currentTarget.type === 'email' || e.currentTarget.type === 'password' || e.currentTarget.type === 'text')
         {
             setFormData({
                 ...formData,

src/components/Qr.css

@@ -48,27 +48,6 @@ img
     background: #fff;
 }
 
-.qrCode____
-{
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    height: 3.7cm;
-    justify-content: space-evenly;
-    background: #fff;
-    width: 2.4cm;
-}
-
-.beschreibung
-{
-    font-size: x-small;
-}
-
-.vert
-{
-    flex-direction: row-reverse;
-}
-
 .spinBtn
 {
     display: flex;
@@ -83,24 +62,6 @@ img
     border-width: 1px;
 }
 
-.order1
-{
-    order: 1;
-}
-.order2
-{
-    order: 2;
-}
-.order3
-{
-    order: 3;
-}
-
-.list-container
-{
-    margin-top: 10px;
-}
-
 .list-item
 {
     display:flex;
@@ -110,16 +71,6 @@ img
     cursor:move;
 }
 
-.printButton, .saveButton
-{
-    margin-bottom: 20px;
-}
-
-.qr-input
-{
-    width: 55px;
-}
-
 @media print 
 {
     .qrSettings

src/components/Qr.tsx

@@ -116,10 +116,10 @@ export default function Qr()
             <div className='qrCode__'>SCAN ME</div>
             <Img pth={dog.qr_code} className='qrCodeImg'/>
         </div>
-        <div className='qrCode vert frame' style={{ height : dog.qr_height_cm + 'cm', width : dog.qr_width_cm + 'cm', fontSize: dog.qr_fontsize + '%' }}>
+        <div className='qrCode flex-row-reverse frame' style={{ height : dog.qr_height_cm + 'cm', width : dog.qr_width_cm + 'cm', fontSize: dog.qr_fontsize + '%' }}>
-            {((dog.qr_visible_items & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.name}</div>}
+            {((dog.qr_visible_items & 0b100) > 0) && <div className={`vertFont order-${getItemOrderNumber(100)}`}>{dog.name}</div>}
-            {((dog.qr_visible_items & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.phone}</div>}
+            {((dog.qr_visible_items & 0b010) > 0) && <div className={`vertFont order-${getItemOrderNumber(10)}`}>{dog.phone}</div>}
-            {((dog.qr_visible_items & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.email}</div>}
+            {((dog.qr_visible_items & 0b001) > 0) && <div className={`vertFont order-${getItemOrderNumber(1)}`}>{dog.email}</div>}
         </div>
     </div>);
     }
@@ -329,8 +329,8 @@ export default function Qr()
                 </div>
                 <div>
                     <div>Reihenfolge</div>
-                    <div className='beschreibung'>Ändern durch Drag'n Drop</div>
+                    <div className='text-xs'>Ändern durch Drag'n Drop</div>
-                    <div className="list-container">
+                    <div className="mt-2">
                             <DndList 
                                 dragEndHandler={callBackDragEnd} 
                                 dataprops={dndList.current} 
@@ -340,8 +340,8 @@ export default function Qr()
                 </div>
             </div>
             <div className='column InputForm'>
-                <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
+                <button id="saveButton" className='mb-5' onClick={saveHandler} >Werte sichern</button>
-                <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
+                <button id="printButton" className='mb-5' onClick={printHandler} >QR-Code drucken</button>
             </div>
         </div>
         <div className='flex flex-row flex-wrap justify-center'>

src/components/test.html

@@ -5,7 +5,7 @@
 </head>
 
 <body>
-<div class="flexCenter">
+<div class="flex">
 
     <div class="containerForm">
         <div style="position: fixed; z-index: 9999; inset: 16px; pointer-events: none;"></div>
@@ -31,7 +31,7 @@
             </div>
                     <div class="rowForm">
                 <div class="col-30"><label for="msg">Nachricht</label></div>
-                <div class="col-70"><textarea class="textArea" id="msg" name="msg"
+                <div class="col-70"><textarea class="h-16" id="msg" name="msg"
                         placeholder="Ich habe Ursula gefunden! Bitte rufen Sie mich an, Telefon:(bitte angeben...)"
                         required=""></textarea></div>
             </div>