⚡ refactor: major changes from discord review session

aashutoshrathi · aashutoshrathi · commit 5af67227c791 · 2023-01-22T17:38:01.000+05:30
diff --git a/src/options/index.css b/src/options/index.css
@@ -2,46 +2,48 @@
 
 html {
   background-color: #1e1e1e;
-  padding: 0;
-  margin: 0;
   color: white;
   font-family: Manrope, Arial, Helvetica, sans-serif;
 }
 
+body {
+  width: 356px;
+  height: 372px;
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  margin: 0;
+}
+
 label {
   color: #B2B1B1;
-  font-size: 16px;
+  font-size: 14px;
 }
 
 input {
-  width: 100%;
-  display: block;
   background-color: #e6e6e6;
   height: 40px;
+  display: block;
+  padding-left: 12px;
+  padding-right: 12px;
   border-radius: 12px;
   border: none;
   font-size: 18px;
   margin-bottom: 16px;
   margin-top: 8px;
-  padding-left: 8px;
-}
-
-body {
-  width: 326px;
-  height: 344px;
-  padding: 8px 16px;
-  padding-right: 30px;
-}
-
-#main > * {
-  margin-bottom: 8px;
 }
 
 .hflex {
   display: flex;
   flex-direction: row;
 }
 
+
+.f-1 {
+  flex: 1;
+}
+
 .align-center {
   align-items: center;
 }
@@ -55,6 +57,10 @@ body {
   text-align: center;
 }
 
+.header {
+  margin-bottom: 12px;
+}
+
 .icon-container {
   width: 46px;
   height: 46px;
@@ -80,18 +86,17 @@ body {
   font-size: 12px;
   align-self: flex-end;
   margin-bottom: 20px;
-  margin-right: -16px !important;
 }
 
 .full-w {
   width: 100%;
 }
 
 .btn {
-  background-color: #223544;
+  background-color: #4856BA;
   height: 42px;
-  font-size: 21px;
-  border-radius: 18px;
+  font-size: 18px;
+  border-radius: 12px;
   font-weight: 500;
   text-align: center;
   cursor: pointer;
@@ -102,18 +107,13 @@ body {
 }
 
 .btn:hover {
-  background-color: rgb(53, 83, 106);
-}
-
-.refresh {
-  align-self: flex-end;
-  margin-top: 8px;
-  width: 36px !important;
+  background-color: #5464db;
 }
 
 .submit {
-  margin-top: 20px;
-  width: 100%;
+  margin-top: 10px;
+  letter-spacing: 1.2px;
+  font-size: 16px;
 }
 
 .tip {
diff --git a/src/options/index.html b/src/options/index.html
@@ -5,35 +5,34 @@
     <link rel="stylesheet" href="./index.css" />
   </head>
 
-  <body>
-    <div id="main">
-      <div class="hflex align-center">
-        <div class="icon-container">
-          <img class="icon" src="../../icons/icon.png" />
-        </div>
-        <div class="vflex text-center">
-          <p class="heading">MONGO IP UPDATER</p>
-          <i class="lazy">&nbsp;&nbsp;&nbsp;for the supa hackas</i>
-        </div>
+  <body class="vflex">
+    <div class="header hflex align-center">
+      <div class="icon-container">
+        <img class="icon" src="../../icons/icon.png" />
       </div>
-      <div>
-        <div class="hflex full-w">
-          <div class="full-w">
-            <label for="ip">Your IP Address</label>
-            <input name="ip" id="ip" type="text" />
-          </div>
-          <div id="refresh-ip" class="btn refresh">🔄</div>
-        </div>
-        <label for="name">Name for the entry in Mongo's access list </label>
+      <div class="vflex f-1 text-center">
+        <p class="heading">MONGO IP UPDATER</p>
+        <i class="lazy">&nbsp;&nbsp;&nbsp;for the supa hackas</i>
+      </div>
+    </div>
+    <div>
+      <div class="vflex">
+        <label for="ip">Your IP address</label>
+        <input name="ip" id="ip" type="text" />
+      </div>
+
+      <div class="vflex">
+        <label for="name">Name for entry</label>
         <input name="name" type="text" />
-        <div class="btn submit" id="upsert">
-          <p>Allow my IP 🪄</p>
-        </div>
       </div>
-      <div class="tip">
-        💡 This can be done from any page on <b>MongoDB Cloud</b>
+
+      <div class="btn submit" id="upsert">
+        <p>Add to access list</p>
       </div>
     </div>
+    <div class="tip">
+      💡 Tip: This can be done from any page on <b>MongoDB Cloud</b>
+    </div>
     <div id="error"></div>
   </body>
 </html>
diff --git a/src/options/index.js b/src/options/index.js
@@ -58,8 +58,4 @@ document.addEventListener("DOMContentLoaded", function () {
       document.querySelector("#error").innerText = e.message;
     }
   });
-
-  document.querySelector("#refresh-ip")?.addEventListener("click", async () => {
-    updateIpField();
-  });
 });

Original file line number	Diff line number	Diff line change
`@@ -58,8 +58,4 @@ document.addEventListener("DOMContentLoaded", function () {`
`58`	`58`	`document.querySelector("#error").innerText = e.message;`
`59`	`59`	`}`
`60`	`60`	`});`
`61`		`-`
`62`		`- document.querySelector("#refresh-ip")?.addEventListener("click", async () => {`
`63`		`- updateIpField();`
`64`		`- });`
`65`	`61`	`});`