UI: Reconnect network page imporved.

Fixes zulip#862. Center aligned the text and added a table to make points look better.
samyakgaur · Jul 13, 2020 · 93c3b81 · 93c3b81
1 parent b6e11f6
commit 93c3b81
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 31 deletions.
diff --git a/app/renderer/css/network.css b/app/renderer/css/network.css
@@ -1,11 +1,46 @@
+
 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 {
@@ -17,22 +52,24 @@ body {
 }
 
 #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 {
     text-align: left;
     font-size: 16px;
     list-style-position: inside;
+    /* text-align: justify; */
 }
 
 #reconnect {
@@ -44,16 +81,56 @@ body {
 }
 
 .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: 5px;
-    line-height: 32px;
+    border-radius: 7px;
+    line-height: 35px;
     cursor: pointer;
 }
 
 .button:hover {
     opacity: 0.8;
-}
+}
+
+.container {
+    text-align: center;
+    position: relative;
+}
+
+.maingraphic {
+    position: relative;
+}
+
+.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
@@ -1,26 +1,34 @@
 <!DOCTYPE html>
 <html lang="en" class="responsive desktop">
-    <head>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <meta name="viewport" content="width=device-width">
-        <title>Zulip - Network Troubleshooting</title>
-        <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>
-        </div>
-    </body>
+	<head>
+   		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    	<meta name="viewport" content="width=device-width">
+    	<title>Zulip - Network Troubleshooting</title>
+    	<link rel="stylesheet" href="css/network.css" type="text/css" media="screen">
+	</head>
+	<body>
+    	<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">
+        	        <div id="reconnect" class="button">Reconnect</div>
+            	    <div id="settings" class="button">Settings</div>
+	            </div>
+    	    </div>
+	    </div>
+	</body>
 </html>