Enhance popup UI

imdj · Feb 7, 2024 · 83bfb20 · 83bfb20
1 parent 6d9e370
commit 83bfb20
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 13 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -129,10 +129,9 @@ p {
     border-radius: 0.5rem;
     border: 3px solid #E3E3E3;
     cursor: pointer;
-    font-size: smaller;
     color: #000;
     background: #fff;
-    transition: 0.5s;
+    transition: 0.3s;
     margin: 0 0.5rem;
 }
 
@@ -149,6 +148,16 @@ a.btn {
     margin-left: 10px;
 }
 
+.main-btn {
+    border-color: #ff6600;
+    cursor: pointer;
+}
+
+.main-btn:hover, .main-btn:focus {
+    background: #ff6600;
+    color: #fff;
+}
+
 input[type="checkbox"] {
     position: relative;
     width: 40px;

diff --git a/popup.html b/popup.html
@@ -59,18 +59,9 @@ <h3 class="mt-2">Search type</h3>
 </div>
 <footer class="flex flex-col mt-3 mb-2 justify-center items-center">
     <hr style="border: none; height: 1px; background-color: #333; width: 80%;">
-    <p class="flex items-center">Facing any issues? Report it on <a href="https://github.com/imdj/HNRelevant" class="btn" target="_blank">
-            <span>GitHub</span>
-            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1024 1024" fill="none">
-                <path fill-rule="evenodd" clip-rule="evenodd"
-                    d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
-                    transform="scale(64)" fill="#1B1F23"/>
-            </svg>
-        </a>
-    </p>
     <p class="flex flex-col items-center mt-2" style="gap: 0.5rem; text-align: center;">
         Enjoying HNRelevant?<br>Leave a review to help others find it!
-        <a id="review-btn" class="btn" target="_blank" href="https://chromewebstore.google.com/detail/hnrelevant/iajhnkeiioebplnbfkpnlnggkgblmoln" >Visit the store</a>
+        <a id="review-btn" class="btn main-btn" target="_blank" href="https://chromewebstore.google.com/detail/hnrelevant/iajhnkeiioebplnbfkpnlnggkgblmoln" style="border-color: #ff6600; ;">Visit the store</a>
     </p>
 </footer>
 <script src="./scripts/third-party/browser-polyfill.min.js"></script>

diff --git a/scripts/popup.js b/scripts/popup.js
@@ -20,7 +20,8 @@ function requestPermission() {
 
         const grantPermissionButton = document.createElement("button");
         grantPermissionButton.textContent = "Grant Permission";
-        grantPermissionButton.style = "font-size: 1.5em; padding: 0.5em; margin: 0.5em; border: 0; border-radius: 0.5em; background-color: #ff6600; color: white; cursor: pointer;";
+        grantPermissionButton.classList = "btn main-btn";
+        grantPermissionButton.style = "font-size: 1.5em;";
         grantPermissionButton.addEventListener("click", requestPermission);
 
         document.body.appendChild(grantPermissionButton);