#529 | Redesign - Base styling

quasar.conf.js

@@ -44,7 +44,7 @@ module.exports = function(/* ctx */) {
         ],
 
         // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
-        css: ['fonts/silka/silka.css', 'app.sass'],
+        css: ['fonts/silka/silka.css', 'app.scss'],
 
         // https://github.com/quasarframework/quasar/tree/dev/extras
         extras: [
@@ -98,7 +98,14 @@ module.exports = function(/* ctx */) {
         framework: {
             iconSet: 'material-icons', // Quasar icon set
             lang: 'en-US', // Quasar language pack
-            config: {},
+            config: {
+                brand: {
+                    // brand colors
+                    primary: '#8B3F98',
+                    secondary: '#348DCC',
+                    accent: '#73C58F',
+                },
+            },
 
             // Possible values for "importStrategy":
             // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives

src/components/Footer.vue

@@ -19,9 +19,6 @@ export default {
 </template>
 
 <style lang="scss">
-body.body--light .c-footer {
-    color: $white
-}
 .c-footer {
     margin: 8px auto 24px;
     padding: 0 16px;

src/components/Health/Endpoints.vue

@@ -131,6 +131,7 @@ export default {
   border-radius: 6px
   box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%)
 .tableWrapper
+  max-width: 100vw
   min-width: 50vw
   max-width: 100vw
   border-radius: 6px

src/components/MethodField.vue

@@ -117,7 +117,7 @@ export default {
         margin: auto;
     }
     .c-method-icon {
-        background: $purpleBright;
+        background: var(--q-primary);
         display: flex;
         align-items: center;
         justify-content: center;

src/components/TransactionField.vue

@@ -14,7 +14,7 @@ export default {
         color: {
             type: String,
             required: false,
-            default: 'secondary',
+            default: 'primary',
         },
         truncate: {
             type: Number,

src/components/TransactionTable.vue

@@ -292,7 +292,7 @@ export default {
                     {{ col.label }}
                     <template v-if="col.name === 'date'">
                         <q-icon
-                            class="info-icon"
+                            class="info-icon q-ml-xs"
                             name="fas fa-info-circle"
                             @click="toggleDateFormat"
                         >
@@ -302,7 +302,7 @@ export default {
                         </q-icon>
                     </template>
                     <template v-if="col.name === 'method'">
-                        <q-icon class="info-icon" name="fas fa-info-circle" />
+                        <q-icon class="info-icon" name="fas fa-info-circle q-ml-xs" />
                         <q-tooltip anchor="bottom middle" self="top middle" max-width="10rem">
                             {{ $t('components.executed_based_on_decoded_data') }}
                         </q-tooltip>
@@ -322,7 +322,7 @@ export default {
                         color="negative"
                     />
                     <TransactionField
-                        :color="(props.row.status !== '0x1') ? 'negative' : 'secondary'"
+                        :color="(props.row.status !== '0x1') ? 'negative' : 'primary'"
                         :transaction-hash="props.row.hash"
                         :truncate="(props.row.status !== '0x1') ? 15 : 18"
                     />

src/components/header/AppHeader.vue

@@ -525,7 +525,7 @@ export default defineComponent({
         padding: 0 16px;
         width: 100%;
         box-shadow:
-            0 4px 5px rgba(0, 0, 0, 0.2),
+            0 3px 5px rgba(0, 0, 0, 0.2),
             0 2px 2px rgba(0, 0, 0, 0.14),
             0 3px 1px -2px rgba(0, 0, 0, 0.12);
 
@@ -575,15 +575,14 @@ export default defineComponent({
         border-radius: 4px;
 
         &:hover,
-        &:focus,
         &:active {
             @media screen and (min-width: $breakpoint-lg-min) {
                 background-color: var(--highlight-color);
             }
 
             & > #{$this}__menu-item-icon:not(#{$this}__menu-item-icon--chevron) {
                 filter: grayscale(0);
-                color: $secondary;
+                color: $primary;
             }
         }
 

src/css/_utilities.scss

@@ -43,6 +43,3 @@
     }
 }
 
-
-// components
-@import 'components/notification'