TrackingConsent: now centered on the bottom of the page

Author: mraveux

src/components/TrackingConsent.vue

@@ -1,25 +1,26 @@
 <template>
-    <div
-        class="tracking-consent nq-shadow"
+    <div class="tracking-consent"
         :class="[ theme, safariFix ]"
         v-if="uiRequired && uiAllowed"
     >
-        {{ text.main }}
-        <div class="button-group">
-            <button
-                class="nq-button-pill light-blue"
-                @click="allowUsageData"
-            >{{ text.yes }}</button>
-            <button
-                class="nq-button-s"
-                @click="denyConsent"
-                :class="{ inverse: theme === constructor.Themes.DARK }"
-            >{{ text.no }}</button>
-            <button
-                class="nq-button-s"
-                @click="allowBrowserData"
-                :class="{ inverse: theme === constructor.Themes.DARK }"
-            >{{ text.browserOnly }}</button>
+        <div class="content nq-shadow">
+            {{ text.main }}
+            <div class="button-group">
+                <button
+                    class="nq-button-pill light-blue"
+                    @click="allowUsageData"
+                >{{ text.yes }}</button>
+                <button
+                    class="nq-button-s"
+                    @click="denyConsent"
+                    :class="{ inverse: theme === constructor.Themes.DARK }"
+                >{{ text.no }}</button>
+                <button
+                    class="nq-button-s"
+                    @click="allowBrowserData"
+                    :class="{ inverse: theme === constructor.Themes.DARK }"
+                >{{ text.browserOnly }}</button>
+            </div>
         </div>
     </div>
 </template>
@@ -402,23 +403,28 @@ export default TrackingConsent;
         position: fixed;
         bottom: 2rem;
         z-index: 900;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
 
-        padding: 1.5rem;
-
+    .content {
         display: flex;
         align-items: center;
         justify-content: space-between;
 
+        padding: 1.5rem;
+
         border-radius: 1rem;
         font-size: 2rem;
     }
 
-    .tracking-consent.light {
+    .light .content {
         background: white;
         color: var(--nimiq-blue);
     }
 
-    .tracking-consent.dark {
+    .dark .content {
         background: var(--nimiq-blue);
         color: white;
     }
@@ -433,16 +439,18 @@ export default TrackingConsent;
     }
 
     @media (max-width: 860px) {
-        .tracking-consent {
+        .content {
             flex-direction: column;
             align-items: flex-start;
-            width: 100%;
-            bottom: 0;
             border-bottom-left-radius: 0;
             border-bottom-right-radius: 0;
             padding: 2.5rem;
         }
 
+        .tracking-consent {
+            bottom: 0;
+        }
+
         .tracking-consent.ios-safari-13-fix {
             bottom: 74px;
         }

src/i18n/en.po

@@ -103,7 +103,7 @@ msgstr ""
 msgid "Grant camera access when asked."
 msgstr ""
 
-#: src/components/TrackingConsent.vue:42
+#: src/components/TrackingConsent.vue:43
 msgid "Help Nimiq improve by sharing anonymized usage data. Thank you! ❤️"
 msgstr ""
 
@@ -161,7 +161,7 @@ msgstr ""
 msgid "Nimiq provides this service free of charge."
 msgstr ""
 
-#: src/components/TrackingConsent.vue:48
+#: src/components/TrackingConsent.vue:49
 msgid "No"
 msgstr ""
 
@@ -262,7 +262,7 @@ msgstr ""
 msgid "Vendor crypto markup"
 msgstr ""
 
-#: src/components/TrackingConsent.vue:47
+#: src/components/TrackingConsent.vue:48
 msgid "Yes"
 msgstr ""