chore: Sky rebranding-related UI adjustments (#619)

frontend/assets/styles/ant-design-dark.less

@@ -1,101 +1,101 @@
 .dark {
-  @import '~ant-design-vue/lib/style/components';
-
-  @main: #222629;
-  @main-dark: #191c1e;
-  @main-light: #2e3338;
-  @text: #ddd;
-  @text-light: #fff;
-  @text-dark: #222;
-  @text-disabled: #999;
-
-  @primary: #1aab9b;
-  @info: #4ac8d2;
-  @success: #06d6a0;
-  @error: #ef476f;
-  @warn: #e55934;
-
-  @primary-color: @primary;
-  @processing-color: @info;
-  @info-color: @info;
-  @success-color: @success;
-  @error-color: @error;
-  @highlight-color: @error;
-  @warning-color: @warn;
-  @text-color: @text;
-  @text-color-dark: @text-dark;
-  @disabled-color: @text-disabled;
-  @text-color-secondary: @text-disabled;
-  @heading-color: @text-light;
-  @heading-color-dark: @text-dark;
-  @link-color: lighten(@primary, 10%);
-
-  @body-background: @main;
-  @component-background: @main-light;
-  @dropdown-selected-color: @text-color;
-  @item-active-bg: darken(@primary, 20%);
-  @item-hover-bg: darken(@primary, 20%);
-  @menu-highlight-color: @text;
-  @table-row-hover-bg: darken(@primary, 10%);
-
-  @descriptions-bg: @main-light;
-  @menu-bg: transparent;
-
-  @border-color-base: @main-dark;
-  @border-color-split: lighten(@main-light, 2%);
-
-  @background-color-light: @main-light;
-  @background-color-base: @main-light;
-
-  @checkbox-check-color: @main-light;
-
-  @layout-header-background: @main-dark;
-  @layout-body-background: @main;
-
-  // Alert
-  @alert-success-border-color: @success;
-  @alert-success-bg-color: darken(@success, 20%);
-  @alert-success-icon-color: @success;
-
-  @alert-info-border-color: @info;
-  @alert-info-bg-color: darken(@info, 30%);
-  @alert-info-icon-color: @info;
-
-  @alert-warning-border-color: @warn;
-  @alert-warning-bg-color: darken(@warn, 20%);
-  @alert-warning-icon-color: @warn;
-
-  @alert-error-border-color: @error;
-  @alert-error-bg-color: darken(@error, 20%);
-  @alert-error-icon-color: @error;
-
-  // Popover
-  @popover-bg: @component-background;
-
-  // fix certain styles in dark mode
-  .ant-alert.ant-alert-no-icon {
-    padding: 8px 15px;
-  }
-
-  .ant-popover-arrow {
-    border-color: @popover-bg !important;
-  }
-
-  .ant-modal-body {
-    padding: 0;
-  }
-
-  .ant-progress-circle-trail {
-    stroke: lighten(@main-light, 10%) !important;
-  }
-
-  .ant-radio-group {
-    display: flex;
-  }
-
-  .ant-alert-description {
-    display: block;
-  }
-
-  color-scheme: dark;
+    @import '~ant-design-vue/lib/style/components';
+
+    @main: #222629;
+    @main-dark: #191c1e;
+    @main-light: #2e3338;
+    @text: #ddd;
+    @text-light: #fff;
+    @text-dark: #222;
+    @text-disabled: #999;
+
+    @primary: #4331E9;
+    @info: #4ac8d2;
+    @success: #06d6a0;
+    @error: #ef476f;
+    @warn: #e55934;
+
+    @primary-color: @primary;
+    @processing-color: @info;
+    @info-color: @info;
+    @success-color: @success;
+    @error-color: @error;
+    @highlight-color: @error;
+    @warning-color: @warn;
+    @text-color: @text;
+    @text-color-dark: @text-dark;
+    @disabled-color: @text-disabled;
+    @text-color-secondary: @text-disabled;
+    @heading-color: @text-light;
+    @heading-color-dark: @text-dark;
+    @link-color: lighten(@primary, 10%);
+
+    @body-background: @main;
+    @component-background: @main-light;
+    @dropdown-selected-color: @text-color;
+    @item-active-bg: darken(@primary, 20%);
+    @item-hover-bg: darken(@primary, 20%);
+    @menu-highlight-color: @text;
+    @table-row-hover-bg: darken(@primary, 10%);
+
+    @descriptions-bg: @main-light;
+    @menu-bg: transparent;
+
+    @border-color-base: @main-dark;
+    @border-color-split: lighten(@main-light, 2%);
+
+    @background-color-light: @main-light;
+    @background-color-base: @main-light;
+
+    @checkbox-check-color: @main-light;
+
+    @layout-header-background: @main-dark;
+    @layout-body-background: @main;
+
+    // Alert
+    @alert-success-border-color: @success;
+    @alert-success-bg-color: darken(@success, 20%);
+    @alert-success-icon-color: @success;
+
+    @alert-info-border-color: @info;
+    @alert-info-bg-color: darken(@info, 30%);
+    @alert-info-icon-color: @info;
+
+    @alert-warning-border-color: @warn;
+    @alert-warning-bg-color: darken(@warn, 20%);
+    @alert-warning-icon-color: @warn;
+
+    @alert-error-border-color: @error;
+    @alert-error-bg-color: darken(@error, 20%);
+    @alert-error-icon-color: @error;
+
+    // Popover
+    @popover-bg: @component-background;
+
+    // fix certain styles in dark mode
+    .ant-alert.ant-alert-no-icon {
+        padding: 8px 15px;
+    }
+
+    .ant-popover-arrow {
+        border-color: @popover-bg !important;
+    }
+
+    .ant-modal-body {
+        padding: 0;
+    }
+
+    .ant-progress-circle-trail {
+        stroke: lighten(@main-light, 10%) !important;
+    }
+
+    .ant-radio-group {
+        display: flex;
+    }
+
+    .ant-alert-description {
+        display: block;
+    }
+
+    color-scheme: dark;
 }

frontend/assets/styles/ant-design.less

@@ -1,6 +1,6 @@
 @import '~ant-design-vue/dist/antd.less';
 
-@primary-color: #1aab9b;
+@primary-color: #4331E9;
 @modal-body-padding: 0px;
 @dropdown-selected-color: @text-color;
 @border-width-base: 2px;

frontend/components/common/inputs/LinkButton.vue

@@ -43,7 +43,7 @@ export default Vue.extend({
 
 <style scoped>
 .Primary {
-    @apply bg-primary-light border-2 border-primary hover:text-primary text-gray-700;
+    @apply bg-primary-light border-2 border-primary hover:text-white text-gray-700;
 }
 
 .Secondary {

frontend/components/common/inputs/Select.vue

@@ -22,7 +22,7 @@
                 <slot name="text-prefix" />
                 <span class="hidden md:block">
                     <slot v-if="selectLink" name="title">
-                        <nuxt-link :to="selectLink" class="text-gray-700 hover:text-gray-600">
+                        <nuxt-link :to="selectLink" class="text-white hover:text-primary-light">
                             {{ selectTitle }}
                         </nuxt-link>
                     </slot>

frontend/components/common/inputs/SelectOption.vue

@@ -15,7 +15,7 @@
         <div
             v-if="!option.href"
             :key="option.value"
-            class="w-full flex hover:bg-primary px-4 py-2 cursor-pointer items-center"
+            class="w-full flex hover:bg-primary px-4 py-2 cursor-pointer items-center hover:text-white"
             :class="option.classes"
             @click="$emit('input', option.value)"
         >

frontend/components/common/other/ComingSoon.vue

@@ -8,16 +8,12 @@
                 <div class="text-2xl text-gray-600">Last updated on {{ lastUpdatedDate }}</div>
             </div>
         </div>
-        <div
-            class="absolute inset-0 select-none bg-center bg-cover filter dark:invert"
-            :style="{ backgroundImage: `url(${backgroundImage})` }"
-        />
+        <div class="absolute inset-0 select-none bg-center bg-cover filter ComingSoonBackground" />
     </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import backgroundImage from '~/assets/images/background-image.jpg';
 
 export default Vue.extend({
     name: 'ComingSoon',
@@ -27,11 +23,6 @@ export default Vue.extend({
             required: true,
         },
     },
-    data() {
-        return {
-            backgroundImage,
-        };
-    },
     computed: {
         lastUpdatedDate(): string {
             const date = new Date(this.lastUpdated);
@@ -45,3 +36,12 @@ export default Vue.extend({
     },
 });
 </script>
+
+<style scoped>
+.ComingSoonBackground {
+    background-image: url('~/assets/images/background-image.jpg');
+}
+.dark .ComingSoonBackground {
+    background-image: url('~/assets/images/background-image-dark.jpg');
+}
+</style>

frontend/components/dashboard/CollateralTable.vue

@@ -212,7 +212,7 @@ export default Vue.extend({
 }
 .CollateralTable >>> .ant-table-tbody td,
 .CollateralTable >>> .ant-table-thead th {
-    @apply border-b-2 border-r-2 border-gray-300 dark:border-gray-600;
+    @apply border-r-2 border-gray-300 dark:border-gray-600;
 }
 
 .CollateralTable >>> .ant-table-tbody td:first-child,