Merge pull request #115 from bcgov/more-component-standardization

JASPER-176: Further Component Standardization/SVGs
bcgov · Dec 18, 2024 · 12d9f41 · 12d9f41
2 parents 2cd8b3b + 0a317a8
commit 12d9f41
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 8 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -25,7 +25,6 @@
     "@fullcalendar/interaction": "^6.1.15",
     "@fullcalendar/timegrid": "^6.1.15",
     "@fullcalendar/vue3": "^6.1.15",
-    "@mdi/font": "^7.4.47",
     "@types/underscore": "^1.13.0",
     "@vitejs/plugin-basic-ssl": "^1.2.0",
     "axios": "^1.7.9",
@@ -48,6 +47,8 @@
     "vuetify": "^3.7.5"
   },
   "devDependencies": {
+    "@mdi/font": "^7.4.47",
+    "@mdi/js": "^7.4.47",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "@vitejs/plugin-vue": "^5.2.1",

diff --git a/web/public/styles/WorkSans-Medium.ttf b/web/public/styles/WorkSans-Medium.ttf
diff --git a/web/public/styles/WorkSans-Regular.ttf b/web/public/styles/WorkSans-Regular.ttf
diff --git a/web/public/styles/fonts.css b/web/public/styles/fonts.css
@@ -1,9 +1,9 @@
 @font-face {
-  font-family: 'WorkSans-Regular';
+  font-family: 'WorkSans-Medium';
   font-style: normal;
-  src: url('WorkSans-Regular.ttf') format('truetype');
+  src: url('WorkSans-Medium.ttf') format('truetype');
 }
 
-html {
-  font-family: 'WorkSans-Regular', 'Work Sans', sans-serif;
+* {
+  font-family: 'WorkSans-Medium', 'Work Sans', sans-serif;
 }
diff --git a/web/src/main.ts b/web/src/main.ts
@@ -1,5 +1,4 @@
 import LoadingSpinner from '@components/LoadingSpinner.vue';
-import '@mdi/font/css/materialdesignicons.css';
 import { createBootstrap } from 'bootstrap-vue-next';
 import 'bootstrap-vue-next/dist/bootstrap-vue-next.css';
 import 'bootstrap/dist/css/bootstrap.css';

diff --git a/web/src/plugins/vuetify.ts b/web/src/plugins/vuetify.ts
@@ -2,18 +2,29 @@ import { createVuetify } from 'vuetify';
 import * as components from 'vuetify/components';
 import { VBtn } from 'vuetify/components';
 import * as directives from 'vuetify/directives';
+import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
 import 'vuetify/styles';
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 
 export default createVuetify({
+  icons: {
+    defaultSet: 'mdi',
+    aliases,
+    sets: {
+      mdi,
+    },
+  },
   components,
   directives,
   aliases: {
     VBtnSecondary: VBtn,
     VBtnTertiary: VBtn,
   },
   defaults: {
+    VContainer: {
+      fluid: true,
+    },
     VBtn: {
       rounded: true,
       variant: 'flat',
@@ -26,8 +37,20 @@ export default createVuetify({
     },
     VBtnTertiary: {
       rounded: true,
-      variant: 'outlined',
       class: 'text-none',
+      baseColor: '#183a4a',
+    },
+    VSelect: {
+      bgColor: '#dae5f5',
+      rounded: true,
+      variant: 'solo',
+      clearable: true,
+      density: 'comfortable',
+    },
+    VTextField: {
+      rounded: true,
+      dense: true,
+      variant: 'outlined',
     },
   },
 });