add theme for canSERV

src/assets/scss/theme-bbmri.scss

@@ -17,6 +17,7 @@ $theme-colors: (
     "sort-filter-clear-button-outline": #dc3545,
 
     "search-results-text": #3c3c3d,
+    "new-request-button-color": #e95713,
     "display-view-button-color": #f37125,
 
     "card-title-text": #3c3c3d,

src/assets/scss/theme-canserv.scss

@@ -0,0 +1,62 @@
+$theme-colors: (
+    "primary": #2B50A0,
+    "secondary": #2B50A0,
+
+    "primary-text": #1c1d1b,
+    "secondary-text": #1c1d1b,
+    "login-tittle-text": #1c1d1b,
+
+    "navbar-background": #ECECEC,
+    "navbar-text": #1c1d1b,
+    "navbar-active-text": #2B50A0,
+    "navbar-welcome-text": #1c1d1b,
+    "navbar-button-outline": #2B50A0,
+
+    "sort-filter-button-outline": #2B50A0,
+    "sort-filter-dropdown-text": #1c1d1b,
+    "sort-filter-clear-button-outline": #ED6C90,
+
+    "search-results-text": #1c1d1b,
+    "new-request-button-color": #00807D,
+    "display-view-button-color": #2B50A0,
+
+    "card-title-text": #1c1d1b,
+    "table-header-text": #1c1d1b,
+    "table-title-text": #2B50A0,
+
+    "status-badge": #2B50A0,
+
+    "danger": #dc3545,
+    "warning": #e95713,
+    "success": #00807D,
+    "info": #7c7c7c,
+    "light": #e7e7e7,
+    "dark": #1c1d1b,
+
+    // BBMRI-ERIC Color palette
+    "example-1": #003674,
+    "example-2": #e95713,
+    "example-3": #3c3c3d,
+);
+
+$body-color: #3c3c3d;
+
+$default-text-color: white;
+
+@import "node_modules/bootstrap/scss/bootstrap";
+
+body {
+    font-family: Calibri, Arial, sans-serif;
+}
+
+.btn-primary {
+    color: white;
+}
+
+.btn-outline-light {
+    color: $dark;
+}
+
+.cursor-pointer {
+   cursor: pointer; 
+}

src/assets/scss/theme-eucaim.scss

@@ -17,6 +17,7 @@ $theme-colors: (
     "sort-filter-clear-button-outline": #dc3545,
 
     "search-results-text": #26336B,
+    "new-request-button-color": #F18918,
     "display-view-button-color": #F18918,
 
     "card-title-text": #26336B,

src/components/Footer.vue

@@ -8,7 +8,6 @@
         <a href="https://bbmri-eric.eu">
           <img
             width="150"
-            height="40"
             :src="logoSrc"
             alt="logo negotiator"
           >
@@ -83,7 +82,7 @@
           </div>
           <div class="col d-none d-lg-block" />
           <div class="col text-center ms-5">
-            Need help? <a href="mailto:negotiator@helpdesk.bbmri-eric.eu">Contact us</a>.
+            Need help? <a class="text-primary" href="mailto:negotiator@helpdesk.bbmri-eric.eu">Contact us</a>.
           </div>
         </div>
       </div>
@@ -93,14 +92,15 @@
 
 <script>
 import activeTheme from "../config/theme.js"
-import bbmriLogo from "../assets/images/footer-bbmri.svg"
-import eucaimLogo from "../assets/images/footer-eucaim.png"
+import bbmriLogo from "../assets/images/bbmri/footer-bbmri.svg"
+import eucaimLogo from "../assets/images/eucaim/footer-eucaim.png"
+import canservLogo from "../assets/images/canserv/footer-canserv.png"
 
 export default {
   name: "FooterPage",
   data () {
     return {
-      logoSrc: activeTheme.activeLogosFiles === "bbmri" ? bbmriLogo : eucaimLogo,
+      logoSrc: activeTheme.activeLogosFiles === "eucaim" ? eucaimLogo : (activeTheme.activeLogosFiles=== 'canserv' ? canservLogo : bbmriLogo),
       isFooterFollowUsVisible: activeTheme.isFooterFollowUsVisible
     }
   }

src/components/NavigationBar.vue

@@ -104,15 +104,16 @@ import { mapActions, mapGetters } from "vuex"
 import { ROLES } from "@/config/consts"
 import activeTheme from "../config/theme.js"
 import allFeatureFlags from "@/config/featureFlags.js"
-import bbmriLogo from "../assets/images/nav-bar-bbmri.svg"
-import eucaimLogo from "../assets/images/nav-bar-eucaim.png"
+import bbmriLogo from "../assets/images/bbmri/nav-bar-bbmri.svg"
+import eucaimLogo from "../assets/images/eucaim/nav-bar-eucaim.png"
+import canservLogo from "../assets/images/canserv/nav-bar-canserv.png"
 
 export default {
   name: "NavigationBar",
   data () {
     return {
       roles: [],
-      logoSrc: activeTheme.activeLogosFiles === "bbmri" ? bbmriLogo : eucaimLogo,
+      logoSrc: activeTheme.activeLogosFiles === "eucaim" ? eucaimLogo : (activeTheme.activeLogosFiles=== 'canserv' ? canservLogo : bbmriLogo),
       featureFlagsFAQ: allFeatureFlags.faqPage
     }
   },

src/components/NewRequestButton.vue

@@ -2,7 +2,7 @@
   <div>
     <button
       ref="openModal"
-      class="btn btn-sm bg-warning sm my-2 float-end"
+      class="btn btn-sm bg-new-request-button-color sm my-2 float-end"
       data-bs-toggle="modal"
       data-bs-target="#newRequestModal"
     >

src/components/PDFButton.vue

@@ -10,8 +10,9 @@
 <script>
 import jsPDF from "jspdf"
 import activeTheme from "../config/theme.js"
-import bbmriLogo from "../assets/images/home-bbmri.png"
-import eucaimLogo from "../assets/images/home-eucaim.png"
+import bbmriLogo from "../assets/images/bbmri/home-bbmri.png"
+import eucaimLogo from "../assets/images/eucaim/home-eucaim.png"
+import canservLogo from "../assets/images/canserv/nav-bar-canserv.png"
 import moment from "moment"
 import { dateFormat } from "@/config/consts"
 
@@ -24,7 +25,7 @@ export default {
   },
   data () {
     return {
-      logoSrc: activeTheme.activeLogosFiles === "bbmri" ? bbmriLogo : eucaimLogo
+      logoSrc: activeTheme.activeLogosFiles === "eucaim" ? eucaimLogo : (activeTheme.activeLogosFiles=== 'canserv' ? canservLogo : bbmriLogo)
     }
   },
   methods: {

src/views/HomePage.vue

@@ -49,16 +49,17 @@
           class="text-center text-primary-text mt-2 mb-2"
         >
           Not familiar with LS Login? Visit their <a
+            class="text-primary"
             target="_blank"
             href="https://lifescience-ri.eu/ls-login.html"
-          >website</a>.
+          >Website</a>.
         </div>
         <div class="text-center text-primary-text mb-2">
-          Need help? <a href="mailto:negotiator@helpdesk.bbmri-eric.eu">Contact us</a>.
+          Need help? <a class="text-primary" href="mailto:negotiator@helpdesk.bbmri-eric.eu">Contact us</a>.
         </div>
         <div class="text-center text-primary-text col mb-2">
           <i class="bi bi-github" />
-          <a href="https://github.com/BBMRI-ERIC/negotiator-v3-frontend"> GitHub</a>
+          <a class="text-primary" href="https://github.com/BBMRI-ERIC/negotiator-v3-frontend"> GitHub</a>
         </div>
         <div class="text-center text-primary-text mb-5">
           <p>&copy; 2024 BBMRI-ERIC</p>
@@ -71,18 +72,19 @@
 <script>
 import { mapActions, mapGetters } from "vuex"
 import activeTheme from "../config/theme.js"
-import bbmriLogo from "../assets/images/home-bbmri.png"
-import eucaimLogo from "../assets/images/home-eucaim.png"
+import bbmriLogo from "../assets/images/bbmri/home-bbmri.png"
+import eucaimLogo from "../assets/images/eucaim/home-eucaim.png"
+import canservLogo from "../assets/images/canserv/home-canserv.png"
 
 export default {
   name: "HomePage",
   data () {
     return {
-      logoSrc: activeTheme.activeLogosFiles === "bbmri" ? bbmriLogo : eucaimLogo
+      logoSrc: activeTheme.activeLogosFiles === "eucaim" ? eucaimLogo : (activeTheme.activeLogosFiles=== 'canserv' ? canservLogo : bbmriLogo)
     }
   },
   computed: {
-    ...mapGetters(["oidcIsAuthenticated", "oidcUser"])
+    ...mapGetters(["oidcIsAuthenticated", "oidcUser"]),
   },
   beforeMount () {
     if (this.oidcIsAuthenticated) {