BTHLABS-58: Tweaks and fixes

* Use explicit values to populate access token's platform in apps.
* Fix View Association layout.
* Web Extension popup layout rework.

services/extension/src/content/templates/popup.html

@@ -11,11 +11,14 @@
 }
 .hotpocket-extension-popup {
   background: #212529;
-  border: 1px solid #495057;
-  border-radius: 0.375rem;
+  border: 1px solid #2b3035;
+  border-radius: 0.5rem;
   color: white;
   width: 300px;
 }
+.hotpocket-extension-popup strong {
+  font-weight: bold;
+}
 .hotpocket-extension-popup .hotpocket-extension-popup-close {
   opacity: 0.75;
 }
@@ -23,41 +26,53 @@
   opacity: 1;
 }
 .hotpocket-extension-popup .hotpocket-extension-popup-header {
-  background: rgba(222, 226, 230, 0.3);
-  border-bottom: 1px solid #495057;
-  padding: 0.5rem 1rem;
+  align-items: center;
+  display: flex;
+  height: 1.5rem;
+  overflow: hidden;
+  padding: 0.5rem 0.5rem;
   position: relative;
+  vertical-align: middle;
+}
+.hotpocket-extension-popup .hotpocket-extension-popup-header img {
+  border-radius: 20%;
+  height: 1.5rem;
 }
 .hotpocket-extension-popup .hotpocket-extension-popup-header strong {
+  flex: 1;
+  margin-left: 0.5rem;
   margin-right: 1rem;
 }
 .hotpocket-extension-popup .hotpocket-extension-popup-header .hotpocket-extension-popup-close {
   cursor: pointer;
-  display: block;
-  line-height: 1.5;
-  position: absolute;
-  right: 0.5rem;
+  font-size: 1.25rem;
+  height: 1.5rem;
+  line-height: 1;
+  padding: 0px 0.375rem;
   text-align: center;
-  top: 0.5rem;
-  width: 1.5rem;
 }
 .hotpocket-extension-popup .hotpocket-extension-popup-body {
-  padding: 1rem;
+  padding: 0.5rem 0.75rem;
+  padding-top: 0px;
 }
 .hotpocket-extension-popup .hotpocket-extension-popup-body > * {
   margin: 0px;
 }
+.hotpocket-extension-popup .hotpocket-extension-popup-body strong {
+  font-weight: 600;
+}
 .hotpocket-extension-popup .hotpocket-extension-popup-message-success {
-  color: rgba(25, 135, 84, 1);
+  color: #0EA767;
 }
 .hotpocket-extension-popup .hotpocket-extension-popup-message-error {
-  color: rgba(220, 53, 69, 1);
+  color: #EE6476;
 }
 </style>
 <div class="hotpocket-extension-popup">
   <div class="hotpocket-extension-popup-header">
+    <img alt="" src="data:image/png;base64,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" title="" />
     <strong>HotPocket by BTHLabs</strong>
-    <a class="hotpocket-extension-popup-close">&times</a>
+    <a class="hotpocket-extension-popup-close">&times;</a>
   </div>
   <div class="hotpocket-extension-popup-body">
   </div>

services/extension/src/content/templates/popup_preview.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+<style type="text/css">
+* {
+  font-family: sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  margin: 0px;
+  padding: 0px;
+}
+body {
+  background: #ebebeb;
+  height: 100vh;
+  width: 100vw;
+}
+.container {
+  padding: 1rem;
+}
+.mb-1 {
+  margin-bottom: 1rem;
+}
+h1 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+</style>
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="mb-1">HERE POPUP PREVIEW BE</h1>
+      {% include "popup.html" %}
+    </div>
+  </body>
+</html>