Setup preliminary styling

* Install vuetify * Color theming vuetify * Fonts and preliminary icons
bcgov · Dec 11, 2023 · b97bd70 · b97bd70
1 parent 517d4fa
commit b97bd70
Show file tree

Hide file tree

Showing 19 changed files with 123 additions and 94 deletions.
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/index.html b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/index.html
@@ -1,10 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" href="bcid-apple-touch-icon.png" />
+    <link rel="stylesheet" href="/styles/fonts.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My ECE Registry</title>
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/package-lock.json b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/package-lock.json
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/package.json b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/package.json
@@ -19,7 +19,8 @@
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.0",
     "vue": "^3.3.4",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vuetify": "^3.4.6"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",

diff --git a/...ients.RegistryPortal/ecer.clients.registryportal.client/public/bcid-192x192.png b/...ients.RegistryPortal/ecer.clients.registryportal.client/public/bcid-192x192.png
diff --git a/...ients.RegistryPortal/ecer.clients.registryportal.client/public/bcid-512x512.png b/...ients.RegistryPortal/ecer.clients.registryportal.client/public/bcid-512x512.png
diff --git a/...istryPortal/ecer.clients.registryportal.client/public/bcid-apple-touch-icon.png b/...istryPortal/ecer.clients.registryportal.client/public/bcid-apple-touch-icon.png
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/public/favicon.ico b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/public/favicon.ico
diff --git a/....Clients.RegistryPortal/ecer.clients.registryportal.client/public/styles/BCSans-Bold.woff b/....Clients.RegistryPortal/ecer.clients.registryportal.client/public/styles/BCSans-Bold.woff
diff --git a/...ts.RegistryPortal/ecer.clients.registryportal.client/public/styles/BCSans-BoldItalic.woff b/...ts.RegistryPortal/ecer.clients.registryportal.client/public/styles/BCSans-BoldItalic.woff
diff --git a/...lients.RegistryPortal/ecer.clients.registryportal.client/public/styles/BCSans-Italic.woff b/...lients.RegistryPortal/ecer.clients.registryportal.client/public/styles/BCSans-Italic.woff
diff --git a/...ients.RegistryPortal/ecer.clients.registryportal.client/public/styles/BCSans-Regular.woff b/...ients.RegistryPortal/ecer.clients.registryportal.client/public/styles/BCSans-Regular.woff
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/public/styles/fonts.css b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/public/styles/fonts.css
@@ -0,0 +1,36 @@
+@font-face {
+  font-family: "BCSans";
+  font-style: normal;
+  src:
+    url("BCSans-Regular.woff") format("woff"),
+    url("BCSans-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "BCSans";
+  font-style: italic;
+  src:
+    url("BCSans-Italic.woff") format("woff"),
+    url("BCSans-Italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "BCSans";
+  font-weight: 700;
+  src:
+    url("BCSans-Bold.woff") format("woff"),
+    url("BCSans-Bold.woff2") format("woff2");
+}
+@font-face {
+  font-family: "BCSans";
+  font-style: italic;
+  font-weight: 700;
+  src:
+    url("BCSans-BoldItalic.woff") format("woff"),
+    url("BCSans-BoldItalic.woff2") format("woff2");
+}
+
+.v-application {
+  font-family: "BCSans", Verdana, Arial, sans-serif !important;
+}
+html {
+  font-family: "BCSans", Verdana, Arial, sans-serif !important;
+}
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/assets/base.css b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/assets/base.css
diff --git a/...ts.RegistryPortal/ecer.clients.registryportal.client/src/assets/bc-gov-logo.svg b/...ts.RegistryPortal/ecer.clients.registryportal.client/src/assets/bc-gov-logo.svg
diff --git a/...ts.RegistryPortal/ecer.clients.registryportal.client/src/assets/bc_gov_logo.jpg b/...ts.RegistryPortal/ecer.clients.registryportal.client/src/assets/bc_gov_logo.jpg
diff --git a/...R.Clients.RegistryPortal/ecer.clients.registryportal.client/src/assets/logo.svg b/...R.Clients.RegistryPortal/ecer.clients.registryportal.client/src/assets/logo.svg
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Button.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Button.vue
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/main.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/main.ts
@@ -1,10 +1,28 @@
+// Vuetify
+import "vuetify/styles";
+
 import { createPinia } from "pinia";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 import { createApp } from "vue";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
 
 import App from "./App.vue";
 import router from "./router";
 import { useConfigStore } from "./store/config";
+import ecerTheme from "./styles/ecer-theme";
+
+const vuetify = createVuetify({
+  theme: {
+    defaultTheme: "ecerTheme",
+    themes: {
+      ecerTheme,
+    },
+  },
+  components,
+  directives,
+});
 
 const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
@@ -13,6 +31,7 @@ const app = createApp(App);
 
 app.use(pinia);
 app.use(router);
+app.use(vuetify);
 
 const configStore = useConfigStore();
 

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/styles/ecer-theme.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/styles/ecer-theme.ts
@@ -0,0 +1,17 @@
+import type { ThemeDefinition } from "vuetify";
+
+const ecerTheme: ThemeDefinition = {
+  dark: false,
+  colors: {
+    background: "#FFFFFF",
+    surface: "#38598A",
+    primary: "#003366",
+    secondary: "#FCBA19",
+    links: "#1A5A96",
+    error: "#D8292F",
+    success: "#2E8540",
+    warning: "#FCBA19",
+  },
+};
+
+export default ecerTheme;