UI: Reconnect network page imporoved.

Fixes zulip#862. Center aligned the text and added a table to make points look better.Div tags are changed to button tag and mobile comptaibility added.
samyakgaur · Sep 22, 2020 · 422ef18 · 422ef18
1 parent b477e0d
commit 422ef18
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 6 deletions.
diff --git a/app/renderer/css/network.css b/app/renderer/css/network.css
@@ -47,7 +47,6 @@ li:hover span {
     display: flex;
     flex-direction: column;
     font-family: "Trebuchet MS", Helvetica, sans-serif;
-    margin: 100px 200px;
     text-align: center;
 }
 
@@ -69,7 +68,6 @@ li:hover span {
     text-align: left;
     font-size: 16px;
     list-style-position: inside;
-    /* text-align: justify; */
 }
 
 #reconnect {
@@ -81,14 +79,12 @@ li:hover span {
 }
 
 .button {
-    margin-top: 20px;
     font-size: 16px;
     background: rgba(0, 150, 136, 1.000);
     color: rgba(255, 255, 255, 1.000);
     width: 96px;
     height: 32px;
     border-radius: 7px;
-    line-height: 35px;
     cursor: pointer;
 }
 
@@ -103,6 +99,7 @@ li:hover span {
 
 .maingraphic {
     position: relative;
+    margin-bottom: 60px;
 }
 
 .cog {

diff --git a/app/renderer/network.html b/app/renderer/network.html
@@ -25,8 +25,8 @@
                     <li>This Zulip organization has been moved or deleted.</li>
                 </ul>
                 <div id="buttons">
-                    <div id="reconnect" class="button">Reconnect</div>
-                    <div id="settings" class="button">Settings</div>
+                    <button id="reconnect" class="button">Reconnect</button>
+                    <button id="settings" class="button">Settings</button>
                 </div>
             </div>
         </div>