improve popup for missing permission

icons/credits

@@ -49,3 +49,7 @@ CC0
 unchecked.svg (edited)
 https://www.svgrepo.com/svg/188772/unchecked-cross
 CC0
+
+warning.svg (edited)
+https://www.svgrepo.com/svg/177809/warning-signs
+CC0

icons/warning.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" width="800px" height="800px" fill="#000000">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <polygon style="fill:#FFA418;" points="0,477.703 256,477.703 289.391,256 256,34.297 "/> <polygon style="fill:#FFA418;" points="256,34.297 256,477.703 512,477.703 "/> <g> <circle style="fill:#324860;" cx="256" cy="405.359" r="16.696"/> <rect x="239.304" y="177.185" style="fill:#324860;" width="33.391" height="178.087"/> </g> </g>
+
</svg>

pages/popup/popup.css

@@ -68,6 +68,7 @@ footer {
     justify-content: space-between;
     overflow: hidden;
     padding: 8px 15px;
+    width: 100%;
 }
 
 #testing-utility {
@@ -337,8 +338,8 @@ footer {
     width: 100%;
 }
 
-.div-missind-permission {
-    background-color: #d3d3d3;
+.div-missing-permission {
+    text-align: center;
     padding: 10px;
 }
 
@@ -351,11 +352,20 @@ footer {
 	font-size: 12px;
 	padding: 5px 10px;
     width: fit-content;
+    float: none;
 }
 
-.div-btn-case-permission {
-	display: flex;
-	justify-content: space-around;
+.missing-permission-buttons {
+    display: flex;
+    justify-content: center;
+}
+
+.warning-icon {
+    width: 3em;
+}
+
+#grant-permission {
+    margin-left: 0;
 }
 
 

pages/popup/popup.html

@@ -25,12 +25,13 @@
                 <div id="donate-button-svg" class="button-svg" data-link="donate"></div>
             </div>
         </header>
-        <div id="div-permission" class="div-missind-permission" hidden>
+        <div id="div-permission" class="div-missing-permission" hidden>
+            <img class"warning-icon" src="../../icons/warning.svg" style="width: 3em">
             <p class="bold" data-i18n-content="permissionMissing">Missing permission</p>
             <p data-i18n-content="permissionRevokedPermissionName">Access your data for all websites</p>
-            <div class="div-btn-case-permission">
-                <div id="grant-permission" class="div-btn-permission" data-i18n-content="permissionAllow">Allow</div>
-                <div id="btn-info-permission" class="div-btn-permission" data-link="faq-permission" data-i18n-content="permissionMoreInfo">More Info</div>
+            <div class="missing-permission-buttons">
+                <div id="grant-permission" class="div-btn-permission button" data-i18n-content="permissionAllow">Allow</div>
+                <div id="btn-info-permission" class="div-btn-permission button" data-link="faq-permission" data-i18n-content="permissionMoreInfo">More Info</div>
             </div>
         </div>
         <div id="div-content" class="content">