fix primary

src/components/NoMintWarnBanner.vue

@@ -1,8 +1,13 @@
 <template>
-  <div class="q-ma-lg q-pa-md" style="border: 2px solid; border-radius: 10px">
+  <q-card class="q-ma-lg bg-dark q-pa-md">
     <q-card-section>
       <div class="row items-center justify-center">
-        <q-icon class="q-pb-md" name="account_balance" size="50px" />
+        <q-icon
+          color="primary"
+          class="q-pb-md"
+          name="account_balance"
+          size="50px"
+        />
       </div>
       <div class="row items-center justify-center">
         <div class="text-h6">Join a mint</div>
@@ -33,7 +38,7 @@
         />
       </div>
     </q-card-section>
-  </div>
+  </q-card>
 </template>
 <script>
 import { defineComponent, ref } from "vue";
@@ -89,3 +94,17 @@ export default defineComponent({
   },
 });
 </script>
+<style scoped>
+.q-dialog__inner {
+  height: 100%;
+  width: 100%;
+  margin: 0; /* Align dialog to cover the entire viewport */
+}
+
+.q-card {
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  border: 2px solid var(--q-primary);
+}
+</style>

src/css/base.scss

@@ -18,9 +18,9 @@ $themes: (
   "freedom": (
     primary: #e22156,
     secondary: #b91a45,
-    dark: #0a0a0a,
+    dark: #000,
     info: #1b1b1b,
-    marginal-bg: #2d293b,
+    marginal-bg: #000,
     marginal-text: #fff,
   ),
   "salvador": (
@@ -104,6 +104,27 @@ $themes: (
   }
 }
 
+@each $theme, $colors in $themes {
+  [data-theme="#{$theme}"] {
+    @each $name, $color in $colors {
+      @if $name == "primary" {
+        --q-primary: #{$color};
+      }
+      @if $name == "secondary" {
+        --q-secondary: #{$color};
+      }
+    }
+    @each $name, $color in $colors {
+      .bg-#{$name} {
+        background: $color !important;
+      }
+      .text-#{$name} {
+        color: $color !important;
+      }
+    }
+  }
+}
+
 [data-theme="monochrome"] .q-badge.bg-primary,
 [data-theme="cyber"] .q-badge.bg-primary {
   background: primary !important;