Merge pull request wseagar#26 from zikyfranky/main

better UI for the Options Page
khalen56 · Nov 11, 2022 · c388029 · c388029
2 parents a1d0537 + 256f2f0
commit c388029
Show file tree

Hide file tree

Showing 3 changed files with 145 additions and 25 deletions.
diff --git a/chrome/icon.png b/chrome/icon.png
diff --git a/chrome/options.chrome.css b/chrome/options.chrome.css
@@ -0,0 +1,118 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;900&display=swap");
+
+input {
+  caret-color: red;
+}
+
+body {
+  margin: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  place-items: center;
+  overflow: hidden;
+  font-family: poppins;
+}
+
+.container {
+  position: relative;
+  border-radius: 20px;
+  padding: 10px 40px;
+  box-sizing: border-box;
+  background: #ecf0f3;
+  box-shadow: 14px 14px 20px #cbced1, -14px -14px 20px white;
+}
+
+.brand-logo {
+  height: 70px;
+  width: 70px;
+  background: url("icon.png");
+  background-repeat: no-repeat;
+  background-size: contain;
+  margin: auto;
+  border-radius: 50%;
+  box-sizing: border-box;
+  box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px white;
+}
+#status {
+  font-weight: 900;
+  color: #1da1f2;
+  letter-spacing: 1px;
+}
+
+label,
+input,
+button {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
+}
+
+label {
+  margin-bottom: 3px;
+}
+
+input::placeholder {
+  color: gray;
+}
+
+input {
+  background: #ecf0f3;
+  padding: 10px;
+  padding-left: 20px;
+  height: 30px;
+  font-size: 12px;
+  border-radius: 50px;
+  box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
+}
+
+input[type="checkbox"] {
+  box-shadow: none;
+  height: 30px;
+}
+
+.inputs {
+  text-align: left;
+  margin-top: 15px;
+}
+
+.option {
+  margin-top: 13px;
+}
+.option.checkboxes {
+  display: flex !important;
+}
+.option.checkboxes label {
+  width: 80% !important;
+}
+.option.checkboxes input {
+  width: 20% !important;
+}
+
+button {
+  color: white;
+  margin-top: 20px;
+  background: #1da1f2;
+  height: 40px;
+  border-radius: 20px;
+  cursor: pointer;
+  font-weight: 900;
+  box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
+  transition: 0.5s;
+}
+
+button:hover {
+  box-shadow: none;
+}
+
+h1 {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
diff --git a/chrome/options.chrome.html b/chrome/options.chrome.html
@@ -4,37 +4,39 @@
     <meta charset="utf-8" />
     <title>Eight Dollars Options</title>
 
-    <script src="options.chrome.js">
-
-    </script>
+    <script src="options.chrome.js"></script>
+    <link rel="stylesheet" href="options.chrome.css" />
   </head>
   <body>
     <div class="container">
-      <h1>Eight Dollars Options</h1>
-      <div class="options">
-        <div class="option">
-          <label for="memeMode">Comic Sans Icon + Font for Twitter Blue</label>
-          <input type="checkbox" id="memeMode" />
-        </div>
-        <div class="option">
-          <label for="textEnabled">Enable Text</label>
-          <input type="checkbox" id="textEnabled" />
-        </div>
-        <div class="option text-option">
-          <label for="textVerifiedLabel">Verified Label</label>
-          <input type="text" id="textVerifiedLabel" />
-        </div>
-        <div class="option text-option">
-          <label for="textTwitterBlueLabel">Twitter Blue Label</label>
-          <input type="text" id="textTwitterBlueLabel" />
-        </div>
-        <div class="option text-option">
+      <div class="brand-logo"></div>
+      <div id="status"></div>
+      <div class="inputs">
+        <div class="options">
+          <div class="option text-option">
+            <label for="textVerifiedLabel">Verified Label</label>
+            <input type="text" id="textVerifiedLabel" />
+          </div>
+          <div class="option text-option">
+            <label for="textTwitterBlueLabel">Twitter Blue Label</label>
+            <input type="text" id="textTwitterBlueLabel" />
+          </div>
+          <div class="option checkboxes">
+            <label for="memeMode"
+              >Comic Sans Icon + Font for Twitter Blue</label
+            >
+            <input type="checkbox" id="memeMode" />
+          </div>
+          <div class="option checkboxes">
+            <label for="textEnabled">Enable Text</label>
+            <input type="checkbox" id="textEnabled" />
+          </div>
+          <div class="option text-option checkboxes">
             <label for="textEnableBorder">Enable Border</label>
             <input type="checkbox" id="textEnableBorder" />
+          </div>
+          <button id="save">Save</button>
         </div>
-        <div id="status"></div>
-        <button id="save">Save</button>
-
       </div>
     </div>
   </body>