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 · 5dcff9b · 5dcff9b
1 parent b6e11f6
commit 5dcff9b
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 23 deletions.
diff --git a/app/renderer/css/network.css b/app/renderer/css/network.css
@@ -1,32 +1,67 @@
+
 html,
 body {
     margin: 0;
     cursor: default;
     font-size: 14px;
-    color: rgba(51, 51, 51, 1.000);
-    background: rgba(255, 255, 255, 1.000);
     user-select: none;
+    position: relative;
+    min-height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+ul {
+    text-align: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    list-style-type: none;
+    text-align: center;
+    background: rgb(255, 255, 255);
+    height: 40px;
+    line-height: 40px;
+    color: rgb(102, 102, 102);
+}
+
+li:nth-child(2n) {
+    background: rgb(247, 247, 247);
+}
+
+li:hover span {
+    width: 40px;
+    opacity: 1.0;
+}
+
+#buttons {
+    margin: auto;
+    margin-top: 20px;
 }
 
 #content {
     display: flex;
     flex-direction: column;
     font-family: "Trebuchet MS", Helvetica, sans-serif;
-    margin: 100px 200px;
     text-align: center;
 }
 
 #title {
-    text-align: left;
+    text-align: center;
     font-size: 24px;
     font-weight: bold;
-    margin: 20px 0;
 }
 
 #subtitle {
     font-size: 20px;
-    text-align: left;
+    text-align: center;
     margin: 12px 0;
+    font-weight: bold;
+    color: rgb(102, 102, 102);
 }
 
 #description {
@@ -49,11 +84,50 @@ body {
     color: rgba(255, 255, 255, 1.000);
     width: 96px;
     height: 32px;
-    border-radius: 5px;
-    line-height: 32px;
+    border-radius: 7px;
     cursor: pointer;
 }
 
 .button:hover {
     opacity: 0.8;
-}
+}
+
+.container {
+    text-align: center;
+    position: relative;
+}
+
+.maingraphic {
+    position: relative;
+    margin-bottom: 60px;
+}
+
+.cog {
+    margin-top: 50px;
+    width: 10rem;
+    height: 10rem;
+    animation: coganimation 10s infinite;
+    fill: rgba(0, 150, 136, 1.000);
+    margin-left: 60px;
+}
+
+.spanner {
+    margin-top: 60px;
+    position: absolute;
+    transform: rotate(20deg);
+    top: 10%;
+    margin-left: 30px;
+    left: 25%;
+    width: 10rem;
+    height: 10rem;
+    fill: rgba(0, 150, 136, 1.000);
+}
+
+@keyframes coganimation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
diff --git a/app/renderer/network.html b/app/renderer/network.html
@@ -7,20 +7,28 @@
         <link rel="stylesheet" href="css/network.css" type="text/css" media="screen">
     </head>
     <body>
-        <div id="content">
-            <div id="picture"><img src="img/zulip_network.png"></div>
-            <div id="title">We can't connect to this organization</div>
-            <div id="subtitle">This could be because</div>
-            <ul id="description">
-                <li>You're not online or your proxy is misconfigured.</li>
-                <li>There is no Zulip organization hosted at this URL.</li>
-                <li>This Zulip organization is temporarily unavailable.</li>
-                <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>
+        <div class="container">
+            <div class="maingraphic">
+                <img src="img/zulip_network.png">
+            </div>
+            <div id="content">
+                <div id="title">We can't connect to this organization</div>
+                <div id="subtitle">
+                    <ul>
+                        <li>This could be because</li>
+                    </ul>
+                </div>
+                <ul id="description">
+                    <li>You're not online or your proxy is misconfigured.</li>
+                    <li>There is no Zulip organization hosted at this URL.</li>
+                    <li>This Zulip organization is temporarily unavailable.</li>
+                    <li>This Zulip organization has been moved or deleted.</li>
+                </ul>
+                <div id="buttons">
+                    <button id="reconnect" class="button">Reconnect</button>
+                    <button id="settings" class="button">Settings</button>
+                </div>
             </div>
         </div>
     </body>
-</html>
+</html>