From 6b4d351295a9a7c1377c2a57dc1c809a984a865e Mon Sep 17 00:00:00 2001
From: Alain Takoudjou <alain.takoudjou@nexedi.com>
Date: Wed, 2 Dec 2020 11:15:36 +0100
Subject: [PATCH] Improve design of login box

Reorganize radio buttons also.
---
 static/galene.css  | 39 ++++++++++++++++++++++++++++++---------
 static/galene.html | 30 ++++++++++++++++++++----------
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/static/galene.css b/static/galene.css
index b813144..e30eeb1 100644
--- a/static/galene.css
+++ b/static/galene.css
@@ -138,6 +138,7 @@
 .btn {
     display: inline-block;
     font-weight: 400;
+    font-size: 1em;
     text-align: center;
     white-space: nowrap;
     vertical-align: middle;
@@ -557,15 +558,21 @@ textarea.form-reply {
 .login-container {
     height: calc(var(--vh, 1vh) * 100 - 56px);
     position: relative;
-    display: block;
+    display: flex;
+    justify-content: center;
 }
 
 .login-box {
-    position: absolute;
-    top: 15%;
-    left: 25%;
-    width: 35em;
-    padding: 2em;
+    width: 20em;
+    padding: 1em;
+    margin: 5em auto;
+    height: 23em;
+    background: #fcfcfc;
+}
+
+.login-box .connect {
+    width: 100%;
+    text-align: center;
 }
 
 .login-box h2 {
@@ -674,6 +681,20 @@ h1 {
     display: inline
 }
 
+.userform label {
+    min-width: 3em;
+    display: inline-block;
+    padding-top: 10px;
+}
+
+.userform input[type="text"], .userform input[type="password"] {
+    width: 100%;
+}
+
+.switch-radio {
+    margin: 0;
+}
+
 .invisible {
     display: none;
 }
@@ -786,8 +807,8 @@ h1 {
 }
 
 #connectbutton {
-    margin-left: 80px;
-    margin-top: 15px;
+    margin-top: 1em;
+    padding: 0.37rem 1.5rem;
 }
 
 #input {
@@ -1211,7 +1232,7 @@ header .collapse {
     }
 
     .login-box {
-        left: calc(100vw / 2 - 10.5em);
+        background: transparent;
     }
 
     .coln-left {
diff --git a/static/galene.html b/static/galene.html
index 76191f9..5bdd145 100644
--- a/static/galene.html
+++ b/static/galene.html
@@ -110,21 +110,31 @@
               <div class="login-container invisible" id="login-container">
                 <div class="login-box">
                   <form id="userform" class="userform">
-                    <label for="username">Username:</label>
+                    <label for="username">Username</label>
                     <input id="username" type="text" name="username"
                            autocomplete="username" class="form-control"/>
-                    <label for="password">Password:</label>
+                    <label for="password">Password</label>
                     <input id="password" type="password" name="password"
                            autocomplete="current-password" class="form-control"/>
-                    <label>Present:</label>
-                    <input id="presentoff" type="radio" name="presentradio" value="" checked/>
-                    <label for="presentoff">nothing</label>
-                    <input id="presentmike" type="radio" name="presentradio" value="mike"/>
-                    <label for="presentmike">microphone</label>
-                    <input id="presentboth" type="radio" name="presentradio" value="both"/>
-                    <label for="presentboth">camera and microphone</label>
+                    <label>Auto ready</label>
+                    <div class="present-switch">
+                      <p class="switch-radio">
+                        <input id="presentoff" type="radio" name="presentradio" value="" checked/>
+                        <label for="presentoff">Disabled</label>
+                      </p>
+                      <p class="switch-radio">
+                        <input id="presentmike" type="radio" name="presentradio" value="mike"/>
+                        <label for="presentmike">Enable microphone</label>
+                      </p>
+                      <p class="switch-radio">
+                        <input id="presentboth" type="radio" name="presentradio" value="both"/>
+                        <label for="presentboth">Enable camera and microphone</label>
+                      </p>
+                    </div>
                     <div class="clear"></div>
-                    <input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
+                    <div class="connect">
+                      <input id="connectbutton" type="submit" class="btn btn-blue" value="Connect"/>
+                    </div>
                   </form>
                   <div class="clear"></div>
                 </div>