Fixes zulip#862 improved reconnect error page UI

enesonus · Mar 31, 2023 · ed99c05 · ed99c05
1 parent b8d7003
commit ed99c05
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 13 deletions.
diff --git a/app/renderer/css/network.css b/app/renderer/css/network.css
@@ -4,18 +4,30 @@ body {
   cursor: default;
   font-size: 14px;
   color: rgb(51 51 51 / 100%);
-  background: rgb(255 255 255 / 100%);
+  background: rgb(32 45 58 / 100%);
   user-select: none;
 }
 
+img {
+  max-width: 100%;
+  width: 380px;
+  height: auto;
+  vertical-align: middle;
+  resize: both;
+}
+
 #content {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  justify-content: center;
   font-family: "Trebuchet MS", Helvetica, sans-serif;
-  margin: 100px 200px;
+  margin: 100px 50px;
   text-align: center;
 }
 
+#texts {
+  color: rgb(240 248 255 / 100%);
+}
+
 #title {
   text-align: left;
   font-size: 24px;
@@ -33,14 +45,20 @@ body {
   text-align: left;
   font-size: 16px;
   list-style-position: inside;
+  padding: 20px;
+}
+
+#buttons {
+  display: flex;
+  justify-content: start;
 }
 
 #reconnect {
   float: left;
 }
 
 #settings {
-  margin-left: 116px;
+  margin-left: 16px;
 }
 
 .button {

diff --git a/app/renderer/img/zulip_network.png b/app/renderer/img/zulip_network.png
diff --git a/app/renderer/network.html b/app/renderer/network.html
@@ -14,14 +14,16 @@
   <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="texts">
+        <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>
       <div id="buttons">
         <div id="reconnect" class="button">Reconnect</div>
         <div id="settings" class="button">Settings</div>