From daa868238d38c972e4d578b5cc7dccf516ec4be5 Mon Sep 17 00:00:00 2001
From: Christine Slotty <christine.slotty@software-labor.de>
Date: Tue, 14 Jul 2020 17:41:37 +0200
Subject: [PATCH] login server styles update

---
 src/Template/Profile/index.ctp             |  6 ++--
 webroot/css/grd_styles.css                 | 32 +++++++++++++++++++---
 websrc/src/less-files.css                  | 32 +++++++++++++++++++---
 websrc/src/less/12-center-form-single.less | 21 +++++++++++---
 websrc/src/less/30-form.less               | 13 ++++++++-
 5 files changed, 88 insertions(+), 16 deletions(-)

diff --git a/src/Template/Profile/index.ctp b/src/Template/Profile/index.ctp
index 13ddcb927..03613d01e 100644
--- a/src/Template/Profile/index.ctp
+++ b/src/Template/Profile/index.ctp
@@ -23,7 +23,7 @@ $this->assign(
     <i class="material-icons-outlined user-info">assignment_ind</i>
     Meine Daten
   </h3>
-  <div class="content-collection">
+  <div class="content-collection"><!-- xxx make form with email disabled / oder "ändern" button und extraseite -->
     <ul class="fact-list">
       <li class="fact">
         <span class="fact label">E-Mail Adresse:</span>
@@ -39,7 +39,7 @@ $this->assign(
       </li>
     </ul>
   </div>
-  <h3>
+  <!--<h3>
     <i class="material-icons-outlined user-info success">check_circle</i>
     Zustand meines Kontos
   </h3>
@@ -54,7 +54,7 @@ $this->assign(
         <span class="fact"></span>
       </li>
     </ul>
-  </div>
+  </div>-->
   <h3>
     <i class="material-icons-outlined user-info">vpn_key</i>
     Passwort ändern
diff --git a/webroot/css/grd_styles.css b/webroot/css/grd_styles.css
index a4cee5ceb..b419d9b5a 100644
--- a/webroot/css/grd_styles.css
+++ b/webroot/css/grd_styles.css
@@ -1175,20 +1175,34 @@ and open the template in the editor.
     margin-bottom: 1.5rem;
     border: 1px solid rgba(238, 238, 238, 0.75);
   }
+  .center-form-title h1 {
+    margin-block-start: 0;
+  }
   .center-form-selectors {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     height: 38px;
     padding: 5px 0;
+    margin-bottom: 2em;
+  }
+  .center-form-form,
+  .center-form-form form {
+    display: flex;
+    flex-direction: column;
+  }
+  .center-form-form .form-label {
+    text-align: left;
   }
   .center-form-form .form-control {
+    width: 100%;
     margin: auto;
+    box-sizing: border-box;
+    margin-bottom: 0.5em;
   }
   .center-form-submit {
-    display: block;
-    width: 96%;
-    margin: auto;
+    width: 100%;
+    margin: 1em 0;
   }
   .reset-pwd-link,
   .signup-link {
@@ -1617,6 +1631,17 @@ and open the template in the editor.
     background-color: #ec5e30;
     border-color: #eb5425;
   }
+  .link-button {
+    display: inline-block;
+    background: #f9fafb;
+    color: #fff;
+    height: 17px;
+    padding: 1em 2em;
+    line-height: 1em;
+    border-radius: 6px;
+    text-align: center;
+    vertical-align: middle;
+  }
   /* CENTER FORM SPECIFICS */
   .form-body form {
     display: grid;
@@ -1627,7 +1652,6 @@ and open the template in the editor.
   .center-form {
     width: 450px;
   }
-  .center-form-form .form-control,
   .center-form .form-control {
     width: 90%;
   }
diff --git a/websrc/src/less-files.css b/websrc/src/less-files.css
index a4cee5ceb..b419d9b5a 100644
--- a/websrc/src/less-files.css
+++ b/websrc/src/less-files.css
@@ -1175,20 +1175,34 @@ and open the template in the editor.
     margin-bottom: 1.5rem;
     border: 1px solid rgba(238, 238, 238, 0.75);
   }
+  .center-form-title h1 {
+    margin-block-start: 0;
+  }
   .center-form-selectors {
     display: flex;
     justify-content: flex-end;
     align-items: center;
     height: 38px;
     padding: 5px 0;
+    margin-bottom: 2em;
+  }
+  .center-form-form,
+  .center-form-form form {
+    display: flex;
+    flex-direction: column;
+  }
+  .center-form-form .form-label {
+    text-align: left;
   }
   .center-form-form .form-control {
+    width: 100%;
     margin: auto;
+    box-sizing: border-box;
+    margin-bottom: 0.5em;
   }
   .center-form-submit {
-    display: block;
-    width: 96%;
-    margin: auto;
+    width: 100%;
+    margin: 1em 0;
   }
   .reset-pwd-link,
   .signup-link {
@@ -1617,6 +1631,17 @@ and open the template in the editor.
     background-color: #ec5e30;
     border-color: #eb5425;
   }
+  .link-button {
+    display: inline-block;
+    background: #f9fafb;
+    color: #fff;
+    height: 17px;
+    padding: 1em 2em;
+    line-height: 1em;
+    border-radius: 6px;
+    text-align: center;
+    vertical-align: middle;
+  }
   /* CENTER FORM SPECIFICS */
   .form-body form {
     display: grid;
@@ -1627,7 +1652,6 @@ and open the template in the editor.
   .center-form {
     width: 450px;
   }
-  .center-form-form .form-control,
   .center-form .form-control {
     width: 90%;
   }
diff --git a/websrc/src/less/12-center-form-single.less b/websrc/src/less/12-center-form-single.less
index 521808180..8179da087 100644
--- a/websrc/src/less/12-center-form-single.less
+++ b/websrc/src/less/12-center-form-single.less
@@ -58,7 +58,8 @@
 
   }
 
-  .center-form-title {
+  .center-form-title h1 {
+    margin-block-start: 0;
   }
 
   .center-form-selectors {
@@ -67,16 +68,28 @@
     align-items: center;
     height: 38px;
     padding: 5px 0;
+    margin-bottom: 2em;
   }
 
+  .center-form-form,
+  .center-form-form form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .center-form-form .form-label {
+    text-align: left;
+  }
   .center-form-form .form-control {
+    width: 100%;
     margin: auto;
+    box-sizing: border-box;
+    margin-bottom: .5em;
   }
 
   .center-form-submit {
-    display: block;
-    width: 96%;
-    margin: auto;
+    width: 100%;
+    margin: 1em 0;
   }
 
   .reset-pwd-link,
diff --git a/websrc/src/less/30-form.less b/websrc/src/less/30-form.less
index 7e977daa1..1ac95ac48 100644
--- a/websrc/src/less/30-form.less
+++ b/websrc/src/less/30-form.less
@@ -131,6 +131,18 @@ and open the template in the editor.
     border-color: #eb5425;
   }
 
+  .link-button {
+    display: inline-block;
+    background: @action-button-background;
+    color: @action-button-text;
+    height: 17px;
+    padding: 1em 2em;
+    line-height: 1em;
+    border-radius: 6px;
+    text-align: center;
+    vertical-align: middle;
+  }
+
   /* CENTER FORM SPECIFICS */
   .form-body form {
     display: grid;
@@ -143,7 +155,6 @@ and open the template in the editor.
     width: 450px;
   }
 
-  .center-form-form .form-control,
   .center-form .form-control {
     width: 90%;
   }