..

.gitignore

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

.vscode/extensions.json

+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}

README.md

+# juno-frontend-core
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Run End-to-End Tests with [Cypress](https://www.cypress.io/)
+
+```sh
+npm run test:e2e:dev
+```
+
+This runs the end-to-end tests against the Vite development server.
+It is much faster than the production build.
+
+But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):
+
+```sh
+npm run build
+npm run test:e2e
+```

babel.config.js

+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

cypress.config.js

+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
+    baseUrl: 'http://localhost:4173'
+  }
+})

cypress/e2e/example.cy.js

+// https://on.cypress.io/api
+
+describe('My First Test', () => {
+  it('visits the app root url', () => {
+    cy.visit('/')
+    cy.contains('h1', 'You did it!')
+  })
+})

cypress/e2e/jsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  },
+  "include": ["./**/*", "../support/**/*"]
+}

cypress/fixtures/example.json

+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

index.html

+<!--
+=========================================================
+* Vue Argon Dashboard 2 - v4.0.0
+=========================================================
+
+* Product Page: https://creative-tim.com/product/vue-argon-dashboard
+* Copyright 2024 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+-->
+
+<!doctype html>
+
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+
+    <link rel="icon" href="./favicon.png" />
+
+    <title>Vue Argon Dashboard 2 by Creative Tim</title>
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
+      rel="stylesheet"
+    />
+
+    <!-- Font Awesome Icons -->
+
+    <script
+      src="https://kit.fontawesome.com/42d5adcbca.js"
+      crossorigin="anonymous"
+    ></script>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+    />
+
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+  </head>
+
+  <body class="bg-gray-100">
+    <noscript>
+      <strong>
+        We're sorry but Vue Argon Dashboard 2 doesn't work properly without
+        JavaScript enabled. Please enable it to continue.
+      </strong>
+    </noscript>
+
+    <div id="app" class="g-sidenav-show"></div>
+
+    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}

package.json

+{
+  "name": "juno-frontend-core",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "test:e2e": "start-server-and-test preview http://localhost:4173 'cypress run --e2e'",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' http://localhost:4173 'cypress open --e2e'"
+  },
+  "dependencies": {
+    "@popperjs/core": "2.11.8",
+    "bootstrap": "5.3.3",
+    "chart.js": "4.4.1",
+    "core-js": "3.36.0",
+    "dropzone": "6.0.0-beta.2",
+    "pinia": "^2.1.7",
+    "quill": "1.3.7",
+    "vue": "^3.4.15",
+    "vue-count-to": "1.0.13",
+    "vue-flatpickr-component": "11.0.4",
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vue/test-utils": "^2.4.4",
+    "cypress": "^13.6.3",
+    "jsdom": "^24.0.0",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "start-server-and-test": "^2.0.3",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.2"
+  }
+}

public/index.html

+<!--
+=========================================================
+* Vue Argon Dashboard 2 - v4.0.0
+=========================================================
+
+* Product Page: https://creative-tim.com/product/vue-argon-dashboard
+* Copyright 2024 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+-->
+
+<!doctype html>
+
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+
+    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
+
+    <title>Vue Argon Dashboard 2 by Creative Tim</title>
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
+      rel="stylesheet"
+    />
+
+    <!-- Font Awesome Icons -->
+
+    <script
+      src="https://kit.fontawesome.com/42d5adcbca.js"
+      crossorigin="anonymous"
+    ></script>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
+    />
+
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
+  </head>
+
+  <body class="bg-gray-100">
+    <noscript>
+      <strong>
+        We're sorry but Vue Argon Dashboard 2 doesn't work properly without
+        JavaScript enabled. Please enable it to continue.
+      </strong>
+    </noscript>
+
+    <div id="app" class="g-sidenav-show"></div>
+
+    <!-- built files will be auto injected -->
+  </body>
+</html>

src/App.vue

+<!--
+=========================================================
+* Vue Argon Dashboard 2 - v4.0.0
+=========================================================
+
+* Product Page: https://creative-tim.com/product/vue-argon-dashboard
+* Copyright 2024 Creative Tim (https://www.creative-tim.com)
+
+Coded by www.creative-tim.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+-->
+<script setup>
+import { computed } from "vue";
+import { useStore } from "vuex";
+import Sidenav from "./components/Sidenav";
+import Configurator from "@/components/Configurator.vue";
+import Navbar from "@/components/Navbars/Navbar.vue";
+import AppFooter from "@/components/Footer.vue";
+
+const store = useStore();
+const isNavFixed = computed(() => store.state.isNavFixed);
+const darkMode = computed(() => store.state.darkMode);
+const isAbsolute = computed(() => store.state.isAbsolute);
+const showSidenav = computed(() => store.state.showSidenav);
+const layout = computed(() => store.state.layout);
+const showNavbar = computed(() => store.state.showNavbar);
+const showFooter = computed(() => store.state.showFooter);
+const showConfig = computed(() => store.state.showConfig);
+const hideConfigButton = computed(() => store.state.hideConfigButton);
+const toggleConfigurator = () => store.commit("toggleConfigurator");
+
+const navClasses = computed(() => {
+  return {
+    "position-sticky bg-white left-auto top-2 z-index-sticky":
+      isNavFixed.value && !darkMode.value,
+    "position-sticky bg-default left-auto top-2 z-index-sticky":
+      isNavFixed.value && darkMode.value,
+    "position-absolute px-4 mx-0 w-100 z-index-2": isAbsolute.value,
+    "px-0 mx-4": !isAbsolute.value,
+  };
+});
+</script>
+<template>
+  <div
+    v-show="layout === 'landing'"
+    class="landing-bg h-100 bg-gradient-primary position-fixed w-100"
+  ></div>
+
+  <sidenav v-if="showSidenav" />
+
+  <main
+    class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
+  >
+    <!-- nav -->
+
+    <navbar :class="[navClasses]" v-if="showNavbar" />
+
+    <router-view />
+
+    <app-footer v-show="showFooter" />
+
+    <configurator
+      :toggle="toggleConfigurator"
+      :class="[showConfig ? 'show' : '', hideConfigButton ? 'd-none' : '']"
+    />
+  </main>
+</template>

src/argon-dashboard.js

+import "./assets/js/nav-pills.js";
+import "./assets/scss/argon-dashboard.scss";
+
+export default {
+  install() {},
+};

src/assets/css copy/nucleo-icons.css

+/*--------------------------------
+
+hermes-dashboard-icons Web Font - built using nucleoapp.com
+License - nucleoapp.com/license/
+
+-------------------------------- */
+@font-face {
+  font-family: "NucleoIcons";
+  src: url("../fonts/nucleo-icons.eot");
+  src:
+    url("../fonts/nucleo-icons.eot") format("embedded-opentype"),
+    url("../fonts/nucleo-icons.woff2") format("woff2"),
+    url("../fonts/nucleo-icons.woff") format("woff"),
+    url("../fonts/nucleo-icons.ttf") format("truetype"),
+    url("../fonts/nucleo-icons.svg") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+/*------------------------
+    base class definition
+-------------------------*/
+.ni {
+  display: inline-block;
+  font: normal normal normal 14px/1 NucleoIcons;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/*------------------------
+  change icon size
+-------------------------*/
+.ni-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+
+.ni-2x {
+  font-size: 2em;
+}
+
+.ni-3x {
+  font-size: 3em;
+}
+
+.ni-4x {
+  font-size: 4em;
+}
+
+.ni-5x {
+  font-size: 5em;
+}
+
+/*----------------------------------
+  add a square/circle background
+-----------------------------------*/
+.ni.square,
+.ni.circle {
+  padding: 0.33333333em;
+  vertical-align: -16%;
+  background-color: #eee;
+}
+
+.ni.circle {
+  border-radius: 50%;
+}
+
+/*------------------------
+  list icons
+-------------------------*/
+.ni-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+
+.ni-ul > li {
+  position: relative;
+}
+
+.ni-ul > li > .ni {
+  position: absolute;
+  left: -1.57142857em;
+  top: 0.14285714em;
+  text-align: center;
+}
+
+.ni-ul > li > .ni.lg {
+  top: 0;
+  left: -1.35714286em;
+}
+
+.ni-ul > li > .ni.circle,
+.ni-ul > li > .ni.square {
+  top: -0.19047619em;
+  left: -1.9047619em;
+}
+
+/*------------------------
+  spinning icons
+-------------------------*/
+.ni.spin {
+  -webkit-animation: nc-spin 2s infinite linear;
+  -moz-animation: nc-spin 2s infinite linear;
+  animation: nc-spin 2s infinite linear;
+}
+
+@-webkit-keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@-moz-keyframes nc-spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(360deg);
+  }
+}
+
+@keyframes nc-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+/*------------------------
+  rotated/flipped icons
+-------------------------*/
+.ni.rotate-90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+
+.ni.rotate-180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+.ni.rotate-270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+
+.ni.flip-y {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
+  -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+
+.ni.flip-x {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+
+/*------------------------
+    font icons
+-------------------------*/
+
+.ni-active-40::before {
+  content: "\ea02";
+}
+
+.ni-air-baloon::before {
+  content: "\ea03";
+}
+
+.ni-album-2::before {
+  content: "\ea04";
+}
+
+.ni-align-center::before {
+  content: "\ea05";
+}
+
+.ni-align-left-2::before {
+  content: "\ea06";
+}
+
+.ni-ambulance::before {
+  content: "\ea07";
+}
+
+.ni-app::before {
+  content: "\ea08";
+}
+
+.ni-archive-2::before {
+  content: "\ea09";
+}
+
+.ni-atom::before {
+  content: "\ea0a";
+}
+
+.ni-badge::before {
+  content: "\ea0b";
+}
+
+.ni-bag-17::before {
+  content: "\ea0c";
+}
+
+.ni-basket::before {
+  content: "\ea0d";
+}
+
+.ni-bell-55::before {
+  content: "\ea0e";
+}
+
+.ni-bold-down::before {
+  content: "\ea0f";
+}
+
+.ni-bold-left::before {
+  content: "\ea10";
+}
+
+.ni-bold-right::before {
+  content: "\ea11";
+}
+
+.ni-bold-up::before {
+  content: "\ea12";
+}
+
+.ni-bold::before {
+  content: "\ea13";
+}
+
+.ni-book-bookmark::before {
+  content: "\ea14";
+}
+
+.ni-books::before {
+  content: "\ea15";
+}
+
+.ni-box-2::before {
+  content: "\ea16";
+}
+
+.ni-briefcase-24::before {
+  content: "\ea17";
+}
+
+.ni-building::before {
+  content: "\ea18";
+}
+
+.ni-bulb-61::before {
+  content: "\ea19";
+}
+
+.ni-bullet-list-67::before {
+  content: "\ea1a";
+}
+
+.ni-bus-front-12::before {
+  content: "\ea1b";
+}
+
+.ni-button-pause::before {
+  content: "\ea1c";
+}
+
+.ni-button-play::before {
+  content: "\ea1d";
+}
+
+.ni-button-power::before {
+  content: "\ea1e";
+}
+
+.ni-calendar-grid-58::before {
+  content: "\ea1f";
+}
+
+.ni-camera-compact::before {
+  content: "\ea20";
+}
+
+.ni-caps-small::before {
+  content: "\ea21";
+}
+
+.ni-cart::before {
+  content: "\ea22";
+}
+
+.ni-chart-bar-32::before {
+  content: "\ea23";
+}
+
+.ni-chart-pie-35::before {
+  content: "\ea24";
+}
+
+.ni-chat-round::before {
+  content: "\ea25";
+}
+
+.ni-check-bold::before {
+  content: "\ea26";
+}
+
+.ni-circle-08::before {
+  content: "\ea27";
+}
+
+.ni-cloud-download-95::before {
+  content: "\ea28";
+}
+
+.ni-cloud-upload-96::before {
+  content: "\ea29";
+}
+
+.ni-compass-04::before {
+  content: "\ea2a";
+}
+
+.ni-controller::before {
+  content: "\ea2b";
+}
+
+.ni-credit-card::before {
+  content: "\ea2c";
+}
+
+.ni-curved-next::before {
+  content: "\ea2d";
+}
+
+.ni-delivery-fast::before {
+  content: "\ea2e";
+}
+
+.ni-diamond::before {
+  content: "\ea2f";
+}
+
+.ni-email-83::before {
+  content: "\ea30";
+}
+
+.ni-fat-add::before {
+  content: "\ea31";
+}
+
+.ni-fat-delete::before {
+  content: "\ea32";
+}
+
+.ni-fat-remove::before {
+  content: "\ea33";
+}
+
+.ni-favourite-28::before {
+  content: "\ea34";
+}
+
+.ni-folder-17::before {
+  content: "\ea35";
+}
+
+.ni-glasses-2::before {
+  content: "\ea36";
+}
+
+.ni-hat-3::before {
+  content: "\ea37";
+}
+
+.ni-headphones::before {
+  content: "\ea38";
+}
+
+.ni-html5::before {
+  content: "\ea39";
+}
+
+.ni-istanbul::before {
+  content: "\ea3a";
+}
+
+.ni-key-25::before {
+  content: "\ea3b";
+}
+
+.ni-laptop::before {
+  content: "\ea3c";
+}
+
+.ni-like-2::before {
+  content: "\ea3d";
+}
+
+.ni-lock-circle-open::before {
+  content: "\ea3e";
+}
+
+.ni-map-big::before {
+  content: "\ea3f";
+}
+
+.ni-mobile-button::before {
+  content: "\ea40";
+}
+
+.ni-money-coins::before {
+  content: "\ea41";
+}
+
+.ni-note-03::before {
+  content: "\ea42";
+}
+
+.ni-notification-70::before {
+  content: "\ea43";
+}
+
+.ni-palette::before {
+  content: "\ea44";
+}
+
+.ni-paper-diploma::before {
+  content: "\ea45";
+}
+
+.ni-pin-3::before {
+  content: "\ea46";
+}
+
+.ni-planet::before {
+  content: "\ea47";
+}
+
+.ni-ruler-pencil::before {
+  content: "\ea48";
+}
+
+.ni-satisfied::before {
+  content: "\ea49";
+}
+
+.ni-scissors::before {
+  content: "\ea4a";
+}
+
+.ni-send::before {
+  content: "\ea4b";
+}
+
+.ni-settings-gear-65::before {
+  content: "\ea4c";
+}
+
+.ni-settings::before {
+  content: "\ea4d";
+}
+
+.ni-single-02::before {
+  content: "\ea4e";
+}
+
+.ni-single-copy-04::before {
+  content: "\ea4f";
+}
+
+.ni-sound-wave::before {
+  content: "\ea50";
+}
+
+.ni-spaceship::before {
+  content: "\ea51";
+}
+
+.ni-square-pin::before {
+  content: "\ea52";
+}
+
+.ni-support-16::before {
+  content: "\ea53";
+}
+
+.ni-tablet-button::before {
+  content: "\ea54";
+}
+
+.ni-tag::before {
+  content: "\ea55";
+}
+
+.ni-tie-bow::before {
+  content: "\ea56";
+}
+
+.ni-time-alarm::before {
+  content: "\ea57";
+}
+
+.ni-trophy::before {
+  content: "\ea58";
+}
+
+.ni-tv-2::before {
+  content: "\ea59";
+}
+
+.ni-umbrella-13::before {
+  content: "\ea5a";
+}
+
+.ni-user-run::before {
+  content: "\ea5b";
+}
+
+.ni-vector::before {
+  content: "\ea5c";
+}
+
+.ni-watch-time::before {
+  content: "\ea5d";
+}
+
+.ni-world::before {
+  content: "\ea5e";
+}
+
+.ni-zoom-split-in::before {
+  content: "\ea5f";
+}
+
+.ni-collection::before {
+  content: "\ea60";
+}
+
+.ni-image::before {
+  content: "\ea61";
+}
+
+.ni-shop::before {
+  content: "\ea62";
+}
+
+.ni-ungroup::before {
+  content: "\ea63";
+}
+
+.ni-world-2::before {
+  content: "\ea64";
+}
+
+.ni-ui-04::before {
+  content: "\ea65";
+}
+
+.icon-window-expand-bottom-right::before {
+  content: "\ea01";
+}
+
+/* all icon font classes list here */

src/assets/css copy/nucleo-svg.css

+/* Generated using nucleoapp.com */
+/* --------------------------------
+
+Icon colors
+
+-------------------------------- */
+
+.icon {
+  display: inline-block;
+  /* icon primary color */
+  color: #111111;
+  height: 1em;
+  width: 1em;
+}
+
+.icon use {
+  /* icon secondary color - fill */
+  fill: #7ea6f6;
+}
+
+.icon.icon-outline use {
+  /* icon secondary color - stroke */
+  stroke: #7ea6f6;
+}
+
+/* --------------------------------
+
+Change icon size
+
+-------------------------------- */
+
+.icon-xs {
+  height: 0.5em;
+  width: 0.5em;
+}
+
+.icon-sm {
+  height: 0.8em;
+  width: 0.8em;
+}
+
+.icon-lg {
+  height: 1.6em;
+  width: 1.6em;
+}
+
+.icon-xl {
+  height: 2em;
+  width: 2em;
+}
+
+/* -------------------------------- 
+
+Align icon and text 
+
+-------------------------------- */
+
+.icon-text-aligner {
+  /* add this class to parent element that contains icon + text */
+  display: flex;
+  align-items: center;
+}
+
+.icon-text-aligner .icon {
+  color: inherit;
+  margin-right: 0.4em;
+}
+
+.icon-text-aligner .icon use {
+  color: inherit;
+  fill: currentColor;
+}
+
+.icon-text-aligner .icon.icon-outline use {
+  stroke: currentColor;
+}
+
+/* -------------------------------- 
+
+Icon reset values - used to enable color customizations
+
+-------------------------------- */
+
+.icon {
+  fill: currentColor;
+  stroke: none;
+}
+
+.icon.icon-outline {
+  fill: none;
+  stroke: currentColor;
+}
+
+.icon use {
+  stroke: none;
+}
+
+.icon.icon-outline use {
+  fill: none;
+}
+
+/* -------------------------------- 
+
+Stroke effects - Nucleo outline icons
+
+- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
+- 24px, 32px icons -> up to 2px stroke
+- 48px, 64px icons -> up to 4px stroke
+
+-------------------------------- */
+
+.icon-outline.icon-stroke-1 {
+  stroke-width: 1px;
+}
+
+.icon-outline.icon-stroke-2 {
+  stroke-width: 2px;
+}
+
+.icon-outline.icon-stroke-3 {
+  stroke-width: 3px;
+}
+
+.icon-outline.icon-stroke-4 {
+  stroke-width: 4px;
+}
+
+.icon-outline.icon-stroke-1 use,
+.icon-outline.icon-stroke-3 use {
+  -webkit-transform: translateX(0.5px) translateY(0.5px);
+  -moz-transform: translateX(0.5px) translateY(0.5px);
+  -ms-transform: translateX(0.5px) translateY(0.5px);
+  -o-transform: translateX(0.5px) translateY(0.5px);
+  transform: translateX(0.5px) translateY(0.5px);
+}

src/assets/css/nucleo-svg.css

+/* Generated using nucleoapp.com */
+/* --------------------------------
+
+Icon colors
+
+-------------------------------- */
+
+.icon {
+  display: inline-block;
+  /* icon primary color */
+  color: #111111;
+  height: 1em;
+  width: 1em;
+}
+
+.icon use {
+  /* icon secondary color - fill */
+  fill: #7ea6f6;
+}
+
+.icon.icon-outline use {
+  /* icon secondary color - stroke */
+  stroke: #7ea6f6;
+}
+
+/* --------------------------------
+
+Change icon size
+
+-------------------------------- */
+
+.icon-xs {
+  height: 0.5em;
+  width: 0.5em;
+}
+
+.icon-sm {
+  height: 0.8em;
+  width: 0.8em;
+}
+
+.icon-lg {
+  height: 1.6em;
+  width: 1.6em;
+}
+
+.icon-xl {
+  height: 2em;
+  width: 2em;
+}
+
+/* -------------------------------- 
+
+Align icon and text 
+
+-------------------------------- */
+
+.icon-text-aligner {
+  /* add this class to parent element that contains icon + text */
+  display: flex;
+  align-items: center;
+}
+
+.icon-text-aligner .icon {
+  color: inherit;
+  margin-right: 0.4em;
+}
+
+.icon-text-aligner .icon use {
+  color: inherit;
+  fill: currentColor;
+}
+
+.icon-text-aligner .icon.icon-outline use {
+  stroke: currentColor;
+}
+
+/* -------------------------------- 
+
+Icon reset values - used to enable color customizations
+
+-------------------------------- */
+
+.icon {
+  fill: currentColor;
+  stroke: none;
+}
+
+.icon.icon-outline {
+  fill: none;
+  stroke: currentColor;
+}
+
+.icon use {
+  stroke: none;
+}
+
+.icon.icon-outline use {
+  fill: none;
+}
+
+/* -------------------------------- 
+
+Stroke effects - Nucleo outline icons
+
+- 16px icons -> up to 1px stroke (16px outline icons do not support stroke changes)
+- 24px, 32px icons -> up to 2px stroke
+- 48px, 64px icons -> up to 4px stroke
+
+-------------------------------- */
+
+.icon-outline.icon-stroke-1 {
+  stroke-width: 1px;
+}
+
+.icon-outline.icon-stroke-2 {
+  stroke-width: 2px;
+}
+
+.icon-outline.icon-stroke-3 {
+  stroke-width: 3px;
+}
+
+.icon-outline.icon-stroke-4 {
+  stroke-width: 4px;
+}
+
+.icon-outline.icon-stroke-1 use,
+.icon-outline.icon-stroke-3 use {
+  -webkit-transform: translateX(0.5px) translateY(0.5px);
+  -moz-transform: translateX(0.5px) translateY(0.5px);
+  -ms-transform: translateX(0.5px) translateY(0.5px);
+  -o-transform: translateX(0.5px) translateY(0.5px);
+  transform: translateX(0.5px) translateY(0.5px);
+}

src/assets/img/down-arrow-dark.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="7px" viewBox="0 0 10 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>down-arrow</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="2" transform="translate(-938.000000, -135.000000)" fill="#252f40" fill-rule="nonzero">
+            <g id="down-arrow" transform="translate(938.000000, 135.000000)">
+                <path d="M7.91769231,0.994615385 L4.61538462,4.29692308 L1.31307692,0.994615385 C1.01124701,0.7030983 0.531473248,0.707267405 0.234754942,1.00398571 C-0.0619633645,1.30070402 -0.0661324689,1.78047778 0.225384615,2.08230769 L4.07153846,5.92846154 C4.37192296,6.22875534 4.85884627,6.22875534 5.15923077,5.92846154 L9.00538462,2.08230769 C9.20535122,1.88917348 9.28554815,1.60317085 9.21515166,1.33422514 C9.14475517,1.06527942 8.93472058,0.855244834 8.66577486,0.784848341 C8.39682915,0.714451848 8.11082652,0.794648781 7.91769231,0.994615385 Z" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/img/down-arrow-white.svg

+<svg height="7" viewBox="0 0 10 7" width="10" xmlns="http://www.w3.org/2000/svg"><path d="m7.91769231.99461539-3.30230769 3.30230769-3.3023077-3.30230769c-.30182991-.29151709-.78160367-.28734798-1.07832198.00937032-.2967183.29671831-.30088741.77649207-.00937032 1.07832198l3.84615384 3.84615385c.3003845.3002938.78730781.3002938 1.08769231 0l3.84615385-3.84615385c.1999666-.19313421.28016353-.47913684.20976704-.74808255-.07039649-.26894572-.28043108-.47898031-.5493768-.5493768-.26894571-.07039649-.55494834.00980044-.74808255.20976705z" fill="#fff"/></svg>
\ No newline at end of file

src/assets/img/down-arrow.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="7px" viewBox="0 0 10 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>down-arrow</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="2" transform="translate(-938.000000, -135.000000)" fill="#67748E" fill-rule="nonzero">
+            <g id="down-arrow" transform="translate(938.000000, 135.000000)">
+                <path d="M7.91769231,0.994615385 L4.61538462,4.29692308 L1.31307692,0.994615385 C1.01124701,0.7030983 0.531473248,0.707267405 0.234754942,1.00398571 C-0.0619633645,1.30070402 -0.0661324689,1.78047778 0.225384615,2.08230769 L4.07153846,5.92846154 C4.37192296,6.22875534 4.85884627,6.22875534 5.15923077,5.92846154 L9.00538462,2.08230769 C9.20535122,1.88917348 9.28554815,1.60317085 9.21515166,1.33422514 C9.14475517,1.06527942 8.93472058,0.855244834 8.66577486,0.784848341 C8.39682915,0.714451848 8.11082652,0.794648781 7.91769231,0.994615385 Z" id="Path"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/logos/github.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>UI/icons/dark/github</title>
+    <desc>Created with Sketch.</desc>
+    <defs/>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UI/icons/dark/github" fill="#182359">
+            <path d="M17.9985267,2 C9.16436969,2 2,9.16338746 2,18.0004911 C2,25.0695847 6.58405721,31.0660855 12.9420179,33.1818042 C13.7425335,33.3291384 14.0342552,32.8350778 14.0342552,32.4107554 C14.0342552,32.0306332 14.020504,31.0248319 14.0126462,29.6899843 C9.56217195,30.6564965 8.62316216,27.5447988 8.62316216,27.5447988 C7.89533135,25.696246 6.84631204,25.2041499 6.84631204,25.2041499 C5.3935971,24.2120998 6.95632156,24.2317444 6.95632156,24.2317444 C8.56226404,24.3447006 9.40697996,25.8809049 9.40697996,25.8809049 C10.834157,28.3256699 13.1522146,27.6194481 14.063722,27.2098591 C14.2090917,26.1765554 14.6226097,25.4713159 15.0793456,25.0715492 C11.5266276,24.6678535 7.7912152,23.294699 7.7912152,17.163633 C7.7912152,15.417232 8.41492986,13.9880905 9.43841125,12.8703152 C9.27339697,12.4656374 8.72433162,10.8380859 9.5955677,8.63593112 C9.5955677,8.63593112 10.9382731,8.20571534 13.9949661,10.2762516 C15.27088,9.9206851 16.6401056,9.7438841 18.0004911,9.7370085 C19.3598944,9.7438841 20.7281378,9.9206851 22.0060161,10.2762516 C25.0607447,8.20571534 26.4014856,8.63593112 26.4014856,8.63593112 C27.2746861,10.8380859 26.7256208,12.4656374 26.5615888,12.8703152 C27.5870346,13.9880905 28.2058381,15.417232 28.2058381,17.163633 C28.2058381,23.3104147 24.4645324,24.6629424 20.9010099,25.0587802 C21.4746309,25.5528408 21.9863716,26.5291752 21.9863716,28.0211793 C21.9863716,30.1604715 21.966727,31.8862457 21.966727,32.4107554 C21.966727,32.8390067 22.255502,33.3369962 23.0668222,33.180822 C29.4198717,31.0601921 34,25.0676202 34,18.0004911 C34,9.16338746 26.8356303,2 17.9985267,2" id="icons/icon-github"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/logos/google.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>UI/icons/color/google</title>
+    <desc>Created with Sketch.</desc>
+    <defs/>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UI/icons/color/google">
+            <g id="Group" transform="translate(2.000000, 2.000000)">
+                <path d="M32.4365525,16.6024012 C32.4365525,15.4515967 32.3313665,14.344128 32.1357206,13.2820585 L16.5492615,13.2820585 L16.5492615,19.5616128 L25.4557094,19.5616128 C25.0721312,21.5908257 23.9059692,23.3098098 22.1535707,24.4613022 L22.1535707,28.5341733 L27.5019274,28.5341733 C30.631561,25.7077204 32.4365525,21.5461142 32.4365525,16.6024012 L32.4365525,16.6024012 Z" id="Shape" fill="#4285F4"/>
+                <path d="M16.5492615,32.4674071 C21.0175621,32.4674071 24.7635856,31.0139403 27.5019274,28.5341733 L22.1535707,24.4613022 C20.6718508,25.4353244 18.7756982,26.0110706 16.5492615,26.0110706 C12.2387399,26.0110706 8.59088994,23.1557272 7.2893887,19.3181072 L1.76011213,19.3181072 L1.76011213,23.5244249 C4.48302664,28.8299569 10.0796222,32.4674071 16.5492615,32.4674071 L16.5492615,32.4674071 Z" id="Shape" fill="#34A853"/>
+                <path d="M7.2893887,19.3181072 C6.95840347,18.344085 6.77047118,17.3033395 6.77047118,16.2337035 C6.77047118,15.1640676 6.95840347,14.1233221 7.2893887,13.1492999 L7.2893887,8.94298219 L1.76011213,8.94298219 C0.639530783,11.1345322 0,13.6142992 0,16.2337035 C0,18.8531079 0.639530783,21.3328749 1.76011213,23.5244249 L7.2893887,19.3181072 L7.2893887,19.3181072 Z" id="Shape" fill="#FBBC05"/>
+                <path d="M16.5492615,6.4563365 C18.9790577,6.4563365 21.160615,7.27558824 22.8758478,8.88382548 L27.6225407,4.22764161 C24.755872,1.60892511 21.0098485,0 16.5492615,0 C10.0803235,0 4.48302664,3.63813805 1.76011213,8.94298219 L7.2893887,13.1492999 C8.59088994,9.31236774 12.2394411,6.4563365 16.5492615,6.4563365 Z" id="Shape" fill="#EA4335"/>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/bootstrap.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="140px" height="140px" viewBox="0 0 140 140" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>bootstrap</title>
+    <g id="bootstrap" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="bootstrap-5-1" transform="translate(6.000000, 21.000000)" fill="#7952B3">
+            <path d="M25.7551875,0 C18.6799219,0 13.4445547,6.19273437 13.6789922,12.9085937 C13.9039844,19.3607109 13.6116641,27.7171484 11.5080234,34.5318203 C9.396875,41.365625 5.82896875,45.6961797 0,46.252 L0,52.5275625 C5.82896875,53.0845937 9.396875,57.4129687 11.5077812,64.2477422 C13.6116641,71.0624141 13.9037422,79.4188516 13.67875,85.8709687 C13.4443125,92.5858594 18.6796797,98.7795625 25.7561562,98.7795625 L98.2542578,98.7795625 C105.329523,98.7795625 110.563922,92.5868281 110.329484,85.8709687 C110.104492,79.4188516 110.396812,71.0624141 112.500453,64.2477422 C114.611602,57.4129687 118.170789,53.0828984 124,52.5275625 L124,46.252 C118.171031,45.6949687 114.611844,41.3665937 112.500453,34.5318203 C110.39657,27.7181172 110.104492,19.3607109 110.329484,12.9085937 C110.563922,6.19370312 105.329523,0 98.2542578,0 L25.7542187,0 L25.7551875,0 Z M84.0678828,60.8052891 C84.0678828,70.0527344 77.1701406,75.6610703 65.7231484,75.6610703 L46.2372266,75.6610703 C45.076488,75.6610703 44.1355234,74.7201058 44.1355234,73.5593672 L44.1355234,25.2204375 C44.1355234,24.0596989 45.076488,23.1187344 46.2372266,23.1187344 L65.6122266,23.1187344 C75.1570781,23.1187344 81.4212578,28.2889531 81.4212578,36.2268906 C81.4212578,41.7984141 77.2071953,46.7862656 71.838625,47.6600781 L71.838625,47.9507031 C79.146875,48.7523437 84.0678828,53.8140625 84.0678828,60.8052891 L84.0678828,60.8052891 Z M63.5984375,29.7810703 L52.4878437,29.7810703 L52.4878437,45.4748203 L61.8457266,45.4748203 C69.0798672,45.4748203 73.0686953,42.5617891 73.0686953,37.355 C73.0679687,32.4754062 69.6385937,29.7810703 63.5984375,29.7810703 Z M52.4878437,51.7017031 L52.4878437,68.9965547 L64.00725,68.9965547 C71.5392812,68.9965547 75.5288359,65.9742969 75.5288359,60.2945156 C75.5288359,54.6147344 71.4273906,51.7007344 63.522875,51.7007344 L52.4878437,51.7007344 L52.4878437,51.7017031 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/icon-bulb.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="44px" height="46px" viewBox="0 0 44 46" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-bulb</title>
+    <defs>
+        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#3A416F" offset="0%"></stop>
+            <stop stop-color="#141727" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-2">
+            <stop stop-color="#3A416F" offset="0%"></stop>
+            <stop stop-color="#141727" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-3">
+            <stop stop-color="#3A416F" offset="0%"></stop>
+            <stop stop-color="#141727" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-4">
+            <stop stop-color="#3A416F" offset="0%"></stop>
+            <stop stop-color="#141727" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="linearGradient-5">
+            <stop stop-color="#3A416F" offset="0%"></stop>
+            <stop stop-color="#141727" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="icon-bulb" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="bulb-63" transform="translate(0.000000, 2.000000)" fill-rule="nonzero">
+            <path d="M4.7826087,22.9565217 L0.956521739,22.9565217 C0.428521739,22.9565217 0,22.5289565 0,22 C0,21.4710435 0.428521739,21.0434783 0.956521739,21.0434783 L4.7826087,21.0434783 C5.3106087,21.0434783 5.73913043,21.4710435 5.73913043,22 C5.73913043,22.5289565 5.3106087,22.9565217 4.7826087,22.9565217 Z" id="Path" fill="url(#linearGradient-1)" opacity="0.498432958"></path>
+            <path d="M9.8253913,10.781913 C9.58052174,10.781913 9.33565217,10.6881739 9.14913043,10.5016522 L6.44408696,7.79565217 C6.07008696,7.42165217 6.07008696,6.81713043 6.44408696,6.44313043 C6.81808696,6.06913043 7.4226087,6.06913043 7.7966087,6.44313043 L10.5016522,9.14913043 C10.8756522,9.52313043 10.8756522,10.1276522 10.5016522,10.5016522 C10.3151304,10.6891304 10.0702609,10.781913 9.8253913,10.781913 Z" id="Path" fill="url(#linearGradient-2)" opacity="0.498432958"></path>
+            <path d="M22,5.73913043 C21.472,5.73913043 21.0434783,5.31156522 21.0434783,4.7826087 L21.0434783,0.956521739 C21.0434783,0.427565217 21.472,0 22,0 C22.528,0 22.9565217,0.427565217 22.9565217,0.956521739 L22.9565217,4.7826087 C22.9565217,5.31156522 22.528,5.73913043 22,5.73913043 Z" id="Path" fill="url(#linearGradient-3)" opacity="0.498432958"></path>
+            <path d="M34.1746087,10.781913 C33.9297391,10.781913 33.6848696,10.6881739 33.4983478,10.5016522 C33.1243478,10.1276522 33.1243478,9.52313043 33.4983478,9.14913043 L36.2033913,6.44313043 C36.5764348,6.06913043 37.181913,6.06913043 37.555913,6.44313043 C37.929913,6.81713043 37.929913,7.42165217 37.555913,7.79565217 L34.8508696,10.5016522 C34.6643478,10.6891304 34.4194783,10.781913 34.1746087,10.781913 Z" id="Path" fill="url(#linearGradient-2)" opacity="0.498432958"></path>
+            <path d="M43.0434783,22.9565217 L39.2173913,22.9565217 C38.6893913,22.9565217 38.2608696,22.5289565 38.2608696,22 C38.2608696,21.4710435 38.6893913,21.0434783 39.2173913,21.0434783 L43.0434783,21.0434783 C43.5714783,21.0434783 44,21.4710435 44,22 C44,22.5289565 43.5714783,22.9565217 43.0434783,22.9565217 Z" id="Path" fill="url(#linearGradient-1)" opacity="0.500931141"></path>
+            <path d="M22,9.56521739 C15.1436522,9.56521739 9.56521739,15.1436522 9.56521739,22 C9.56521739,27.0217391 12.6136522,31.546087 17.2173913,33.4667826 L17.2173913,39.2173913 L26.7826087,39.2173913 L26.7826087,33.4667826 C31.3863478,31.546087 34.4347826,27.0217391 34.4347826,22 C34.4347826,15.1436522 28.8563478,9.56521739 22,9.56521739 Z" id="Path" fill="url(#linearGradient-4)"></path>
+            <path d="M20.0869565,44 L23.9130435,44 C25.498,44 26.7826087,42.7153913 26.7826087,41.1304348 L17.2173913,41.1304348 C17.2173913,42.7153913 18.502,44 20.0869565,44 Z" id="Path" fill="url(#linearGradient-5)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/logo-asana.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Logos</title>
+    <defs>
+        <radialGradient cx="50.0135415%" cy="54.714503%" fx="50.0135415%" fy="54.714503%" r="71.9292757%" gradientTransform="translate(0.500135,0.547145),scale(0.921739,1.000000),translate(-0.500135,-0.547145)" id="radialGradient-1">
+            <stop stop-color="#FFB900" offset="0%"></stop>
+            <stop stop-color="#F95D8F" offset="60%"></stop>
+            <stop stop-color="#F95353" offset="99.9%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="asana-logo" transform="translate(31.000000, 22.000000)" fill="url(#radialGradient-1)" fill-rule="nonzero">
+            <path d="M89.9906921,56.1170331 C76.175985,56.1170331 64.97895,67.282887 64.97895,81.056696 C64.97895,94.8318401 76.175985,106 89.9906921,106 C103.803087,106 115,94.8318401 115,81.056696 C115,67.282887 103.803087,56.1170331 89.9906921,56.1170331 Z M25.010525,56.1182468 C11.1981304,56.1194604 0,67.282887 0,81.0579097 C0,94.8318401 11.1981304,105.998786 25.010525,105.998786 C38.824015,105.998786 50.0222671,94.8318401 50.0222671,81.0579097 C50.0222671,67.2827656 38.824015,56.1182468 25.0093079,56.1182468 L25.010525,56.1182468 L25.010525,56.1182468 Z M82.5105859,24.9408766 C82.5105859,38.714807 71.3136726,49.8841806 57.5012779,49.8841806 C43.6865709,49.8841806 32.4895359,38.714807 32.4895359,24.9408766 C32.4895359,11.1669462 43.6865709,0 57.5011562,0 C71.3135508,0 82.5093688,11.1669462 82.5093688,24.9408766 L82.5105859,24.9408766 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/logo-atlassian.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Logos</title>
+    <defs>
+        <linearGradient x1="80.5250892%" y1="15.6897142%" x2="43.803046%" y2="97.3483651%" id="linearGradient-1">
+            <stop stop-color="#0052CC" offset="0%"></stop>
+            <stop stop-color="#2684FF" offset="92%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="atlassian-1" transform="translate(35.000000, 21.000000)" fill-rule="nonzero">
+            <path d="M32.2177437,50.2228454 C31.1791646,48.8591721 29.2398559,48.5964284 27.8794818,49.635084 C27.4950585,49.9399792 27.1849667,50.3291598 26.9728674,50.7729298 L0.336388365,104.364716 C-0.449192603,105.946205 0.18801967,107.868741 1.75999765,108.659896 C2.20126182,108.88437 2.68910685,109 3.18360694,108.998989 L40.2948533,108.998989 C41.5095132,109.030231 42.627261,108.335051 43.1420719,107.228169 C51.1517473,90.5899995 46.2964903,65.2936515 32.2177437,50.2228454 Z" id="Path" fill="url(#linearGradient-1)"></path>
+            <path d="M51.4733618,1.73446471 C37.8211056,22.5862851 36.24436,49.0339597 47.3237511,71.3383072 L65.4063614,107.233778 C65.9512026,108.315801 67.0651049,109 68.2838287,109 L105.781771,109 C106.635913,109.001993 107.455652,108.666103 108.059623,108.066637 C108.663594,107.467171 109.002008,106.653546 109,105.805775 C109,105.310759 108.886342,104.822253 108.666811,104.377773 L56.948122,1.71943311 C56.4470574,0.669442923 55.3812876,0 54.2107419,0 C53.0401961,0 51.9744264,0.669442923 51.4733618,1.71943311 L51.4733618,1.73446471 Z" id="Path" fill="#2684FF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/logo-invision.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Logos</title>
+    <g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="invision" transform="translate(36.000000, 22.000000)" fill-rule="nonzero">
+            <path d="M96.3908516,0 L9.60914844,0 C4.30210938,0 0,4.30210938 0,9.60914844 L0,96.3908516 C0,101.697891 4.30210938,106 9.60914844,106 L96.3908516,106 C101.697891,106 106,101.697891 106,96.3908516 L106,9.60914844 C106,4.30210938 101.697891,0 96.3908516,0" id="Path" fill="#DC395F"></path>
+            <path d="M35.8726639,33.7452625 C39.3481912,33.7452625 42.2597111,30.9866909 42.2597111,27.3711837 C42.2597111,23.758158 39.3481912,21 35.8726639,21 C32.3971366,21 29.4864335,23.758158 29.4864335,27.3711837 C29.4864335,30.9862773 32.3971366,33.7452625 35.8726639,33.7452625 M22.6297204,67.8737974 C22.2543961,69.4908911 22.0661214,71.2370214 22.0661214,72.6613873 C22.0661214,78.2740672 25.0715744,82 31.4586217,82 C36.7556357,82 41.0500152,78.8146149 44.1420502,73.6709335 L42.2539935,81.3440638 L52.7724666,81.3440638 L58.7841895,56.9267762 C60.2871203,50.744598 63.1986402,47.535639 67.6134992,47.535639 C71.0886182,47.535639 73.2486727,49.7242988 73.2486727,53.3373245 C73.2486727,54.3840928 73.1547395,55.52433 72.7790068,56.7613446 L69.6792122,67.9846366 C69.2095463,69.6017303 69.0224968,71.2196511 69.0224968,72.7403809 C69.0224968,78.0685185 72.1210662,81.9656729 78.6020466,81.9656729 C84.1436953,81.9656729 88.5577376,78.3530608 91,69.697267 L86.8677573,68.0818276 C84.8012275,73.8806181 83.0164973,74.9290407 81.6074997,74.9290407 C80.1985021,74.9290407 79.4470368,73.9786363 79.4470368,72.0774138 C79.4470368,71.2213054 79.6357199,70.2713146 79.9167026,69.1273552 L82.9229725,58.1931549 C83.6740295,55.6256568 83.9562374,53.3489047 83.9562374,51.2570224 C83.9562374,43.0772579 79.0717125,38.808296 73.1547395,38.808296 C67.6134992,38.808296 61.977509,43.8700887 59.1603306,49.1973992 L61.2260436,39.6354539 L45.1659218,39.6354539 L42.9115257,48.0575756 L50.4257709,48.0575756 L45.7985412,66.8175168 C42.1649611,74.9972812 35.4903967,75.1300401 34.6527579,74.9402073 C33.2772495,74.6258873 32.397545,74.0969199 32.397545,72.2870984 C32.397545,71.2428115 32.5854113,69.7427607 33.0550772,67.9341799 L40.100065,39.6354539 L22.2543961,39.6354539 L20,48.0575756 L27.4194953,48.0575756 L22.6301288,67.8737974" id="Shape" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/logo-jira.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Logos</title>
+    <defs>
+        <linearGradient x1="67.9273487%" y1="40.3110476%" x2="40.6754218%" y2="81.641044%" id="linearGradient-1">
+            <stop stop-color="#0052CC" offset="18%"></stop>
+            <stop stop-color="#2684FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="32.3045012%" y1="-23.3247078%" x2="59.5183684%" y2="17.8549121%" id="linearGradient-2">
+            <stop stop-color="#0052CC" offset="18%"></stop>
+            <stop stop-color="#2684FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="jira-3" transform="translate(35.000000, 21.000000)" fill-rule="nonzero">
+            <path d="M105.705696,51.9209821 L58.1065074,4.58660714 L53.4942403,0 L17.6627523,35.6321429 L1.27784635,51.9209821 C-0.425948784,53.6240313 -0.425948784,56.3759687 1.27784635,58.0790179 L34.0130909,90.6321429 L53.4942403,110 L89.3207902,74.3678571 L89.8788054,73.8178571 L105.705696,58.1035714 C106.534097,57.2858004 107,56.173045 107,55.0122768 C107,53.8515086 106.534097,52.7387531 105.705696,51.9209821 Z M53.4942403,71.2642857 L37.1389635,55 L53.4942403,38.7357143 L69.8445789,55 L53.4942403,71.2642857 Z" id="Shape" fill="#2684FF"></path>
+            <path d="M53,38.6445299 C42.2639805,27.9872611 42.2108919,10.7221586 52.8811718,0 L17,35.6113693 L36.5274378,55 L53,38.6445299 Z" id="Path" fill="url(#linearGradient-1)"></path>
+            <path d="M69.446952,55 L53,71.2982957 C63.7858387,81.9863246 63.7858387,99.3119711 53,110 L89,74.3557598 L69.446952,55 Z" id="Path" fill="url(#linearGradient-2)"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/logo-slack.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Logos</title>
+    <g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="slack-new-logo" transform="translate(35.000000, 22.000000)" fill-rule="nonzero">
+            <path d="M39.2803996,-1.77635684e-15 C33.3581411,0.00436871997 28.5651823,4.80122324 28.5695565,10.7121014 C28.5651823,16.6229795 33.3625182,21.419834 39.2847767,21.4242027 L49.999997,21.4242027 L49.999997,10.7164701 C50.0043711,4.80559196 45.2070353,0.00873743993 39.2803996,-1.77635684e-15 C39.2847767,-1.77635684e-15 39.2847767,-1.77635684e-15 39.2803996,-1.77635684e-15 M39.2803996,28.5714286 L10.7152412,28.5714286 C4.7929826,28.5757973 -0.00435323957,33.3726518 1.19295144e-05,39.2835299 C-0.0087303708,45.194408 4.78860547,49.9912626 10.710864,50 L39.2803996,50 C45.2026582,49.9956313 49.999994,45.1987768 49.9956199,39.2878986 C49.999994,33.3726518 45.2026582,28.5757973 39.2803996,28.5714286 Z" id="Shape" fill="#36C5F0"></path>
+            <path d="M106.999997,39.2835299 C107.004372,33.3726518 102.206616,28.5757973 96.2838386,28.5714286 C90.3610616,28.5757973 85.5633057,33.3726518 85.5676802,39.2835299 L85.5676802,50 L96.2838386,50 C102.206616,49.9956313 107.004372,45.1987768 106.999997,39.2835299 Z M78.4279602,39.2835299 L78.4279602,10.7121014 C78.4323347,4.80559196 73.6389563,0.00873743993 67.7161793,7.10542736e-15 C61.7934022,0.00436871997 56.9956464,4.80122324 57.0000119,10.7121014 L57.0000119,39.2835299 C56.9912689,45.194408 61.7890247,49.9912626 67.7118018,50 C73.6345788,49.9956313 78.4323347,45.1987768 78.4279602,39.2835299 Z" id="Shape" fill="#2EB67D"></path>
+            <path d="M67.7152233,107 C73.6374818,106.995632 78.4348177,102.199196 78.4304435,96.2888345 C78.4348177,90.3784728 73.6374818,85.5820374 67.7152233,85.5776691 L57.000003,85.5776691 L57.000003,96.2888345 C56.9956289,102.194828 61.7929647,106.991263 67.7152233,107 Z M67.7152233,78.4266993 L96.2847588,78.4266993 C102.207017,78.4223309 107.004353,73.6258955 106.999988,67.7155338 C107.00873,61.8051721 102.211395,57.0087367 96.289136,57 L67.7196004,57 C61.7973418,57.0043683 57.000006,61.8008038 57.0043801,67.7111655 C57.000006,73.6258955 61.7929647,78.4223309 67.7152233,78.4266993 L67.7152233,78.4266993 Z" id="Shape" fill="#ECB22E"></path>
+            <path d="M2.98908926e-06,67.7121014 C-0.00437153219,73.6229795 4.79338431,78.419834 10.7161614,78.4242027 C16.6389384,78.419834 21.4366943,73.6229795 21.4323198,67.7121014 L21.4323198,57 L10.7161614,57 C4.79338431,57.0043687 -0.00437153219,61.8012232 2.98908926e-06,67.7121014 Z M28.5720309,67.7121014 L28.5720309,96.2835299 C28.5632878,102.194408 33.3610437,106.991263 39.2838207,107 C45.2065978,106.995631 50.0043536,102.198777 49.9999881,96.2878986 L49.9999881,67.7208388 C50.0087311,61.8099607 45.2109753,57.0131062 39.2881982,57.0043687 C33.3610437,57.0043687 28.5676653,61.8012232 28.5720309,67.7121014 C28.5720309,67.7121014 28.5720309,67.7164701 28.5720309,67.7121014" id="Shape" fill="#E01E5A"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/logo-spotify.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Logos</title>
+    <g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="spotify-2" transform="translate(36.000000, 22.000000)" fill="#2EBD59" fill-rule="nonzero">
+            <path d="M53.5,0 C23.9517912,0 0,23.9517912 0,53.5 C0,83.0482088 23.9517912,107 53.5,107 C83.0482088,107 107,83.0482088 107,53.5 C107,23.9554418 83.0482088,0.00365063118 53.5,0 Z M78.0358922,77.1597407 C77.0757762,78.7368134 75.0204708,79.2296486 73.4506994,78.2695326 C60.8888775,70.5922552 45.0743432,68.8582054 26.4524736,73.1111907 C24.656363,73.523712 22.8675537,72.3993176 22.458683,70.6032071 C22.0461617,68.8070966 23.1669055,67.0182873 24.9666667,66.6094166 C45.3444899,61.9548618 62.8273627,63.9590583 76.9297509,72.5745479 C78.4995223,73.5419652 78.9996588,75.5899693 78.0358922,77.1597407 L78.0358922,77.1597407 Z M84.5814739,62.5973729 C83.373115,64.5614125 80.8030706,65.1747185 78.8426817,63.9700102 C64.4664961,55.1318321 42.5408052,52.5727397 25.5325145,57.7347322 C23.3275333,58.4027977 20.9984306,57.1579324 20.3267144,54.9566018 C19.6622996,52.7516206 20.9071648,50.4261685 23.1084954,49.7544524 C42.5371546,43.858683 66.6933811,46.7134766 83.2051859,56.8622313 C85.1692255,58.0705902 85.7898328,60.636984 84.5814739,62.5973729 Z M85.1436711,47.4253497 C67.8980894,37.1853292 39.4523712,36.2434664 22.9880246,41.2375299 C20.3449676,42.0406687 17.5485841,40.5475606 16.7490959,37.9045036 C15.9496076,35.2614466 17.4390652,32.4650631 20.0857728,31.6619243 C38.9850904,25.9267827 70.3987718,27.0329239 90.2509041,38.8171614 C92.627465,40.2299556 93.4087001,43.3001365 91.9995565,45.6730467 C90.5940635,48.0532583 87.5165814,48.838144 85.1436711,47.4253497 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/img/small-logos/logo-xd.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="177px" height="150px" viewBox="0 0 177 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Logos</title>
+    <g id="Logos" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="adobe-xd-1" transform="translate(35.000000, 23.000000)" fill-rule="nonzero">
+            <path d="M88.87536,105 L19.12464,105 C8.54928,105 0,96.4750769 0,85.9298462 L0,19.0701538 C0,8.52492308 8.54928,0 19.12464,0 L88.87536,0 C99.45072,0 108,8.52492308 108,19.0701538 L108,85.9298462 C108,96.4750769 99.45072,105 88.87536,105 Z" id="Path" fill="#FF26BE"></path>
+            <path d="M85.8661662,101 L20.1764293,101 C11.2646329,101 4,93.7634471 4,84.8860975 L4,22.1139025 C4,13.2365529 11.2646329,6 20.1764293,6 L85.8233827,6 C94.7822409,6 102,13.2365529 102,22.1139025 L102,84.8434794 C102.042595,93.7634471 94.7779626,101 85.8661662,101 L85.8661662,101 Z" id="Path" fill="#2E001F"></path>
+            <path d="M42.8937592,49.0345674 L55.6917204,73.6219562 C55.9198637,73.9861163 55.7838552,74.3546639 55.4153161,74.3546639 L47.4610124,74.3546639 C46.9564647,74.3546639 46.7283214,74.2186523 46.5001781,73.7623553 C43.5738017,67.7295823 40.6035515,61.6968094 37.5411665,55.2077394 L37.4490317,55.2077394 C34.7069249,61.3326493 31.6884136,67.7778445 28.7664245,73.8106174 C28.5382812,74.1747775 28.3101379,74.3151766 27.9415987,74.3151766 L20.4084827,74.3151766 C19.9521961,74.3151766 19.903935,73.9510165 20.1364657,73.6746058 L32.6580226,49.8155373 L20.5488786,25.6844455 C20.2724742,25.3202854 20.5488786,25.0438747 20.8208956,25.0438747 L28.6830644,25.0438747 C29.139351,25.0438747 29.3236206,25.1360116 29.5035028,25.5484339 C32.3816182,31.5812068 35.3079947,37.7982536 38.0501016,43.8749012 L38.1422364,43.8749012 C40.7922085,37.8421283 43.7185849,31.5812068 46.5528266,25.5923086 C46.7809699,25.2281485 46.9169784,25 47.3776523,25 L54.7352735,25 C55.0994253,25 55.2398212,25.2764107 55.0116779,25.6405708 L42.8937592,49.0345674 Z M57.933665,56.4844935 C57.933665,45.8361009 65.0192712,37.5174554 76.2597158,37.5174554 C77.22055,37.5174554 77.7207103,37.5174554 78.6376708,37.6095923 L78.6376708,25.5001717 C78.6376708,25.223761 78.8658141,25.0438747 79.0939574,25.0438747 L86.3155701,25.0438747 C86.6797219,25.0438747 86.7718567,25.1798863 86.7718567,25.4080348 L86.7718567,67.3654222 C86.7718567,68.5983016 86.7718567,70.1514664 87,71.8450303 C87,72.121441 86.9078652,72.2091904 86.6358482,72.3495895 C82.7968986,74.179165 78.7736793,74.999812 74.9347297,74.999812 C65.0148838,75.0391094 57.9292796,68.918587 57.933665,56.4844935 L57.933665,56.4844935 Z M78.6332835,44.7874952 C77.9927273,44.5110846 77.0801541,44.3311982 75.9833114,44.3311982 C70.2226932,44.3311982 66.2038614,48.7625442 66.2038614,56.1247209 C66.2038614,64.5355033 70.3192154,67.9182436 75.4831511,67.9182436 C76.5799938,67.9182436 77.7689714,67.782232 78.6376708,67.4136844 L78.6376708,44.7874952 L78.6332835,44.7874952 Z" id="Shape" fill="#FFD9F2"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/assets/js/dark-mode.js

+/* eslint-disable */
+const body = document.getElementsByTagName("body")[0];
+const hr = document.querySelectorAll("div:not(.sidenav) > hr");
+const sidebarWhite = document.querySelectorAll(".sidenav.bg-white");
+const hr_card = document.querySelectorAll("div:not(.bg-gradient-dark) hr");
+const text_btn = document.querySelectorAll("button:not(.btn) > .text-dark");
+const text_span = document.querySelectorAll(
+  "span.text-dark, .breadcrumb .text-dark",
+);
+const text_span_white = document.querySelectorAll("span.text-white");
+const text_strong = document.querySelectorAll("strong.text-dark");
+const text_strong_white = document.querySelectorAll("strong.text-white");
+const text_nav_link = document.querySelectorAll("a.nav-link.text-dark");
+const secondary = document.querySelectorAll(".text-secondary");
+const bg_gray_100 = document.querySelectorAll(".bg-gray-100");
+const bg_gray_600 = document.querySelectorAll(".bg-gray-600");
+const btn_text_dark = document.querySelectorAll(
+  ".btn.btn-link.text-dark, .btn .ni.text-dark",
+);
+const btn_text_white = document.querySelectorAll(
+  ".btn.btn-link.text-white, .btn .ni.text-white",
+);
+const card_border = document.querySelectorAll(".card.border");
+const card_border_dark = document.querySelectorAll(".card.border.border-dark");
+const svg = document.querySelectorAll("g");
+const navLinks = document.querySelectorAll(
+  ".navbar-main .nav-link, .navbar-main .breadcrumb-item, .navbar-main .breadcrumb-item a, .navbar-main h6",
+);
+const cardNavLinksIcons = document.querySelectorAll(".card .nav .nav-link i");
+const cardNavSpan = document.querySelectorAll(".card .nav .nav-link span");
+
+export function activateDarkMode() {
+  body.classList.add("bg-gray-600", "dark-version");
+
+  for (var i = 0; i < cardNavLinksIcons.length; i++) {
+    if (cardNavLinksIcons[i].classList.contains("text-dark")) {
+      cardNavLinksIcons[i].classList.remove("text-dark");
+      cardNavLinksIcons[i].classList.add("text-white");
+    }
+  }
+  for (var i = 0; i < cardNavSpan.length; i++) {
+    if (cardNavSpan[i].classList.contains("text-sm")) {
+      cardNavSpan[i].classList.add("text-white");
+    }
+  }
+  for (var i = 0; i < hr.length; i++) {
+    if (hr[i].classList.contains("dark")) {
+      hr[i].classList.remove("dark");
+      hr[i].classList.add("light");
+    }
+  }
+  for (var i = 0; i < hr_card.length; i++) {
+    if (hr_card[i].classList.contains("dark")) {
+      hr_card[i].classList.remove("dark");
+      hr_card[i].classList.add("light");
+    }
+  }
+  for (var i = 0; i < text_btn.length; i++) {
+    if (text_btn[i].classList.contains("text-dark")) {
+      text_btn[i].classList.remove("text-dark");
+      text_btn[i].classList.add("text-white");
+    }
+  }
+  for (var i = 0; i < text_span.length; i++) {
+    if (text_span[i].classList.contains("text-dark")) {
+      text_span[i].classList.remove("text-dark");
+      text_span[i].classList.add("text-white");
+    }
+  }
+  for (var i = 0; i < text_strong.length; i++) {
+    if (text_strong[i].classList.contains("text-dark")) {
+      text_strong[i].classList.remove("text-dark");
+      text_strong[i].classList.add("text-white");
+    }
+  }
+  for (var i = 0; i < text_nav_link.length; i++) {
+    if (text_nav_link[i].classList.contains("text-dark")) {
+      text_nav_link[i].classList.remove("text-dark");
+      text_nav_link[i].classList.add("text-white");
+    }
+  }
+  for (var i = 0; i < secondary.length; i++) {
+    if (secondary[i].classList.contains("text-secondary")) {
+      secondary[i].classList.remove("text-secondary");
+      secondary[i].classList.add("text-white");
+      secondary[i].classList.add("opacity-8");
+    }
+  }
+  for (var i = 0; i < bg_gray_100.length; i++) {
+    if (bg_gray_100[i].classList.contains("bg-gray-100")) {
+      bg_gray_100[i].classList.remove("bg-gray-100");
+      bg_gray_100[i].classList.add("bg-gray-600");
+    }
+  }
+  for (var i = 0; i < btn_text_dark.length; i++) {
+    btn_text_dark[i].classList.remove("text-dark");
+    btn_text_dark[i].classList.add("text-white");
+  }
+  for (var i = 0; i < sidebarWhite.length; i++) {
+    sidebarWhite[i].classList.remove("bg-white");
+  }
+  for (var i = 0; i < svg.length; i++) {
+    if (svg[i].hasAttribute("fill")) {
+      svg[i].setAttribute("fill", "#fff");
+    }
+  }
+  for (var i = 0; i < card_border.length; i++) {
+    card_border[i].classList.add("border-dark");
+  }
+}
+
+export function deactivateDarkMode() {
+  body.classList.remove("bg-gray-600", "dark-version");
+  body.classList.add("bg-gray-100");
+
+  for (var i = 0; i < navLinks.length; i++) {
+    if (navLinks[i].classList.contains("text-dark")) {
+      navLinks[i].classList.add("text-white");
+      navLinks[i].classList.remove("text-dark");
+    }
+  }
+  for (var i = 0; i < cardNavLinksIcons.length; i++) {
+    if (cardNavLinksIcons[i].classList.contains("text-white")) {
+      cardNavLinksIcons[i].classList.remove("text-white");
+      cardNavLinksIcons[i].classList.add("text-dark");
+    }
+  }
+  for (var i = 0; i < cardNavSpan.length; i++) {
+    if (cardNavSpan[i].classList.contains("text-white")) {
+      cardNavSpan[i].classList.remove("text-white");
+    }
+  }
+  for (var i = 0; i < hr.length; i++) {
+    if (hr[i].classList.contains("light")) {
+      hr[i].classList.add("dark");
+      hr[i].classList.remove("light");
+    }
+  }
+  for (var i = 0; i < hr_card.length; i++) {
+    if (hr_card[i].classList.contains("light")) {
+      hr_card[i].classList.add("dark");
+      hr_card[i].classList.remove("light");
+    }
+  }
+  for (var i = 0; i < text_btn.length; i++) {
+    if (text_btn[i].classList.contains("text-white")) {
+      text_btn[i].classList.remove("text-white");
+      text_btn[i].classList.add("text-dark");
+    }
+  }
+  for (var i = 0; i < text_span_white.length; i++) {
+    if (
+      text_span_white[i].classList.contains("text-white") &&
+      !text_span_white[i].closest(".sidenav") &&
+      !text_span_white[i].closest(".card.bg-gradient-dark")
+    ) {
+      text_span_white[i].classList.remove("text-white");
+      text_span_white[i].classList.add("text-dark");
+    }
+  }
+  for (var i = 0; i < text_strong_white.length; i++) {
+    if (text_strong_white[i].classList.contains("text-white")) {
+      text_strong_white[i].classList.remove("text-white");
+      text_strong_white[i].classList.add("text-dark");
+    }
+  }
+  for (var i = 0; i < secondary.length; i++) {
+    if (secondary[i].classList.contains("text-white")) {
+      secondary[i].classList.remove("text-white");
+      secondary[i].classList.remove("opacity-8");
+      secondary[i].classList.add("text-dark");
+    }
+  }
+  for (var i = 0; i < bg_gray_600.length; i++) {
+    if (bg_gray_600[i].classList.contains("bg-gray-600")) {
+      bg_gray_600[i].classList.remove("bg-gray-600");
+      bg_gray_600[i].classList.add("bg-gray-100");
+    }
+  }
+  for (var i = 0; i < svg.length; i++) {
+    if (svg[i].hasAttribute("fill")) {
+      svg[i].setAttribute("fill", "#252f40");
+    }
+  }
+  for (var i = 0; i < btn_text_white.length; i++) {
+    if (!btn_text_white[i].closest(".card.bg-gradient-dark")) {
+      btn_text_white[i].classList.remove("text-white");
+      btn_text_white[i].classList.add("text-dark");
+    }
+  }
+  for (var i = 0; i < card_border_dark.length; i++) {
+    card_border_dark[i].classList.remove("border-dark");
+  }
+}

src/assets/js/nav-pills.js

+/* eslint-disable */
+
+export default function setNavPills() {
+  var total = document.querySelectorAll(".nav-pills");
+
+  function initNavs() {
+    total.forEach(function (item, i) {
+      var moving_div = document.createElement("div");
+      var first_li = item.querySelector("li:first-child .nav-link");
+      var tab = first_li.cloneNode();
+      tab.innerHTML = "-";
+
+      moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
+      moving_div.appendChild(tab);
+      item.appendChild(moving_div);
+
+      var list_length = item.getElementsByTagName("li").length;
+
+      moving_div.style.padding = "0px";
+      moving_div.style.width =
+        item.querySelector("li:nth-child(1)").offsetWidth + "px";
+      moving_div.style.transform = "translate3d(0px, 0px, 0px)";
+      moving_div.style.transition = ".5s ease";
+
+      item.onmouseover = function (event) {
+        let target = getEventTarget(event);
+        let li = target.closest("li"); // get reference
+        if (li) {
+          let nodes = Array.from(li.closest("ul").children); // get array
+          let index = nodes.indexOf(li) + 1;
+          item.querySelector("li:nth-child(" + index + ") .nav-link").onclick =
+            function () {
+              moving_div = item.querySelector(".moving-tab");
+              let sum = 0;
+              if (item.classList.contains("flex-column")) {
+                for (var j = 1; j <= nodes.indexOf(li); j++) {
+                  sum += item.querySelector(
+                    "li:nth-child(" + j + ")",
+                  ).offsetHeight;
+                }
+                moving_div.style.transform =
+                  "translate3d(0px," + sum + "px, 0px)";
+                moving_div.style.height = item.querySelector(
+                  "li:nth-child(" + j + ")",
+                ).offsetHeight;
+              } else {
+                for (var j = 1; j <= nodes.indexOf(li); j++) {
+                  sum += item.querySelector(
+                    "li:nth-child(" + j + ")",
+                  ).offsetWidth;
+                }
+                moving_div.style.transform =
+                  "translate3d(" + sum + "px, 0px, 0px)";
+                moving_div.style.width =
+                  item.querySelector("li:nth-child(" + index + ")")
+                    .offsetWidth + "px";
+              }
+            };
+        }
+      };
+    });
+  }
+
+  setTimeout(function () {
+    initNavs();
+  }, 100);
+
+  // Tabs navigation resize
+
+  window.addEventListener("resize", function (event) {
+    total.forEach(function (item, i) {
+      item.querySelector(".moving-tab").remove();
+      var moving_div = document.createElement("div");
+      var tab = item.querySelector(".nav-link.active").cloneNode();
+      tab.innerHTML = "-";
+
+      moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
+      moving_div.appendChild(tab);
+
+      item.appendChild(moving_div);
+
+      moving_div.style.padding = "0px";
+      moving_div.style.transition = ".5s ease";
+
+      let li = item.querySelector(".nav-link.active").parentElement;
+
+      if (li) {
+        let nodes = Array.from(li.closest("ul").children); // get array
+        let index = nodes.indexOf(li) + 1;
+
+        let sum = 0;
+        if (item.classList.contains("flex-column")) {
+          for (var j = 1; j <= nodes.indexOf(li); j++) {
+            sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
+          }
+          moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
+          moving_div.style.width =
+            item.querySelector("li:nth-child(" + index + ")").offsetWidth +
+            "px";
+          moving_div.style.height = item.querySelector(
+            "li:nth-child(" + j + ")",
+          ).offsetHeight;
+        } else {
+          for (var j = 1; j <= nodes.indexOf(li); j++) {
+            sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
+          }
+          moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
+          moving_div.style.width =
+            item.querySelector("li:nth-child(" + index + ")").offsetWidth +
+            "px";
+        }
+      }
+    });
+
+    if (window.innerWidth < 991) {
+      total.forEach(function (item, i) {
+        if (!item.classList.contains("flex-column")) {
+          item.classList.remove("flex-row");
+          item.classList.add("flex-column", "on-resize");
+          let li = item.querySelector(".nav-link.active").parentElement;
+          let nodes = Array.from(li.closest("ul").children); // get array
+          let index = nodes.indexOf(li) + 1;
+          let sum = 0;
+          for (var j = 1; j <= nodes.indexOf(li); j++) {
+            sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
+          }
+          var moving_div = document.querySelector(".moving-tab");
+          moving_div.style.width =
+            item.querySelector("li:nth-child(1)").offsetWidth + "px";
+          moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
+        }
+      });
+    } else {
+      total.forEach(function (item, i) {
+        if (item.classList.contains("on-resize")) {
+          item.classList.remove("flex-column", "on-resize");
+          item.classList.add("flex-row");
+          let li = item.querySelector(".nav-link.active").parentElement;
+          let nodes = Array.from(li.closest("ul").children); // get array
+          let index = nodes.indexOf(li) + 1;
+          let sum = 0;
+          for (var j = 1; j <= nodes.indexOf(li); j++) {
+            sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
+          }
+          var moving_div = document.querySelector(".moving-tab");
+          moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
+          moving_div.style.width =
+            item.querySelector("li:nth-child(" + index + ")").offsetWidth +
+            "px";
+        }
+      });
+    }
+  });
+
+  // Function to remove flex row on mobile devices
+  if (window.innerWidth < 991) {
+    total.forEach(function (item, i) {
+      if (item.classList.contains("flex-row")) {
+        item.classList.remove("flex-row");
+        item.classList.add("flex-column", "on-resize");
+      }
+    });
+  }
+
+  function getEventTarget(e) {
+    e = e || window.event;
+    return e.target || e.srcElement;
+  }
+}

src/assets/js/tooltip.js

+import bootstrap from "bootstrap/dist/js/bootstrap";
+
+// initialization of Tooltips
+export default function setTooltip() {
+  var tooltipTriggerList = [].slice.call(
+    document.querySelectorAll('[data-bs-toggle="tooltip"]'),
+  );
+  // eslint-disable-next-line no-unused-vars
+  var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+}

src/assets/scss/argon-dashboard.scss

+// =========================================================
+// * Argon Dashboard 2 Pro - v2.0.0
+// =========================================================
+//
+// * Product Page: https://www.creative-tim.com/product/argon-dashboard-pro
+// * Copyright 2021 Creative Tim (https://www.creative-tim.com)
+//
+// Coded by www.creative-tim.com
+//
+// =========================================================
+//
+// * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+// Bootstrap Functions
+@import "argon-dashboard/bootstrap/functions";
+
+// Custom Variables
+@import "argon-dashboard/custom/variables";
+
+// Theme Variables
+@import "argon-dashboard/variables";
+
+// Bootstrap Core
+@import "argon-dashboard/bootstrap/bootstrap";
+
+// Theme Core
+@import "argon-dashboard/theme-pro";
+
+// Custom Variables
+@import "argon-dashboard/custom/styles";

src/assets/scss/argon-dashboard/_accordion.scss

+.accordion {
+  .accordion-button {
+    font-size: inherit !important;
+  }
+
+  div {
+    button[aria-expanded="true"] {
+      .collapse-close {
+        display: none;
+      }
+
+      .collapse-open {
+        display: block;
+      }
+    }
+
+    button[aria-expanded="false"] {
+      .collapse-open {
+        display: none;
+      }
+
+      .collapse-close {
+        display: block;
+      }
+    }
+  }
+}

src/assets/scss/argon-dashboard/_alert.scss

+@each $state, $value in $theme-gradient-colors {
+  .alert-#{$state} {
+    @include gradient-directional(
+      nth($value, 1) 0%,
+      darken(nth($value, -1), 8%) 100%,
+      $deg: 310deg
+    );
+  }
+}
+
+.btn-close {
+  &:focus {
+    box-shadow: none;
+  }
+}
+
+.alert-dismissible {
+  .btn-close {
+    background-image: none;
+  }
+}
+
+.alert {
+  z-index: 999;
+}

src/assets/scss/argon-dashboard/_avatars.scss

+//
+// Avatar
+//
+
+// General styles
+
+.avatar {
+  color: $white;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: $avatar-font-size;
+  border-radius: $border-radius-lg;
+  height: $avatar-height;
+  width: $avatar-width;
+  transition: all 0.2s ease-in-out;
+
+  img {
+    width: 100%;
+  }
+
+  &.rounded-circle {
+    img {
+      @extend .rounded-circle;
+    }
+  }
+
+  + .avatar-content {
+    display: inline-block;
+    margin-left: $avatar-content-margin;
+  }
+
+  &.avatar-raised {
+    margin-top: -($avatar-height / 2);
+  }
+
+  &.avatar-scale-up:hover {
+    transform: scale(1.2);
+  }
+}
+
+// Style for the Testimonials Carousel
+.active {
+  .avatar.avatar-scale-up {
+    transform: scale(1.2);
+  }
+}
+
+// Avatar size variations
+
+.avatar-xxl {
+  width: $avatar-xxl-width !important;
+  height: $avatar-xxl-height !important;
+
+  &.avatar-raised {
+    margin-top: -($avatar-xxl-height / 2);
+  }
+}
+
+.avatar-xl {
+  width: $avatar-xl-width !important;
+  height: $avatar-xl-height !important;
+
+  &.avatar-raised {
+    margin-top: -($avatar-xl-height / 2);
+  }
+}
+
+.avatar-lg {
+  width: $avatar-lg-width !important;
+  height: $avatar-lg-height !important;
+  font-size: $font-size-sm;
+
+  &.avatar-raised {
+    margin-top: -($avatar-lg-height / 2);
+  }
+}
+
+.avatar-sm {
+  width: $avatar-sm-width !important;
+  height: $avatar-sm-height !important;
+  font-size: $font-size-sm;
+
+  &.avatar-raised {
+    margin-top: -($avatar-sm-height / 2);
+  }
+}
+
+.avatar-xs {
+  width: $avatar-xs-width !important;
+  height: $avatar-xs-height !important;
+  font-size: $font-size-xs;
+
+  &.avatar-raised {
+    margin-top: -($avatar-xs-height / 2);
+  }
+}
+
+//
+// Avatar group
+//
+
+// General styles
+
+.avatar-group {
+  .avatar {
+    position: relative;
+    z-index: $avatar-group-zindex;
+    border: $avatar-group-border solid $card-bg;
+
+    &:hover {
+      z-index: $avatar-group-zindex-hover;
+    }
+  }
+
+  .avatar + .avatar {
+    margin-left: $avatar-group-double;
+  }
+}

src/assets/scss/argon-dashboard/_backgrounds.scss

+.bg-primary-soft {
+  background: rgba($primary-gradient, 0.03);
+}
+
+.bg-info-soft {
+  background: rgba($info-gradient, 0.03);
+}
+
+.bg-success-soft {
+  background: rgba($success-gradient, 0.03);
+}
+
+.bg-warning-soft {
+  background: rgba($warning-gradient, 0.03);
+}
+
+.bg-danger-soft {
+  background: rgba($danger-gradient, 0.03);
+}

src/assets/scss/argon-dashboard/_badge.scss

+@each $prop, $value in $theme-colors {
+  .badge.bg-#{$prop} {
+    background: $value;
+  }
+}
+.badge {
+  text-transform: uppercase;
+}

src/assets/scss/argon-dashboard/_breadcrumbs.scss

+//
+// Breadcrumb
+//
+
+.breadcrumb-item {
+  font-size: $font-size-sm;
+  &.text-white {
+    &::before {
+      color: $white;
+    }
+  }
+}
+
+.breadcrumb-dark {
+  background-color: $breadcrumb-dark-bg;
+
+  .breadcrumb-item {
+    font-weight: 600;
+
+    a {
+      color: $breadcrumb-dark-color;
+
+      &:hover {
+        color: $breadcrumb-dark-hover-color;
+      }
+    }
+
+    + .breadcrumb-item {
+      &::before {
+        color: $breadcrumb-dark-divider-color;
+      }
+    }
+
+    &.active {
+      color: $breadcrumb-dark-active-color;
+    }
+  }
+}
+
+// Links
+
+.breadcrumb-links {
+  padding: 0;
+  margin: 0;
+  background: transparent;
+}

src/assets/scss/argon-dashboard/_buttons.scss

+.btn {
+  margin-bottom: $btn-margin-bottom;
+  letter-spacing: $a-letter-spacing;
+  text-transform: none;
+  box-shadow: $btn-box-shadow;
+
+  &:not([class*="btn-outline-"]) {
+    border: 0;
+  }
+
+  &:active,
+  &:active:focus,
+  &:active:hover {
+    box-shadow: $btn-hover-box-shadow;
+    transform: $btn-active-hover-transform;
+  }
+
+  @include hover {
+    &:not(.btn-icon-only) {
+      box-shadow: $btn-hover-box-shadow;
+      transform: $btn-hover-transform;
+    }
+  }
+
+  &.bg-white {
+    @include hover {
+      color: $body-color;
+    }
+  }
+
+  &.btn-link {
+    box-shadow: none;
+    font-weight: $btn-font-weight;
+
+    &:hover,
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &.btn-round {
+    border-radius: $btn-border-rounded;
+  }
+
+  &.btn-xs {
+    padding: $btn-padding-y-xs $btn-padding-x-xs;
+    font-size: $btn-font-size-xs;
+  }
+
+  // Button Just Icon
+
+  &.btn-icon-only {
+    width: $btn-just-icon-width;
+    height: $btn-just-icon-height;
+    padding: $btn-just-icon-padding-y $btn-just-icon-padding-x;
+  }
+
+  // Button Icon Sizes
+
+  &.btn-sm {
+    &.btn-icon-only {
+      width: $btn-just-icon-width-sm;
+      height: $btn-just-icon-height-sm;
+      padding: $btn-just-icon-padding-y-sm $btn-just-icon-padding-x-sm;
+    }
+
+    i {
+      font-size: $btn-just-icon-sm-font-size;
+    }
+  }
+
+  &.btn-lg {
+    &.btn-icon-only {
+      width: $btn-just-icon-width-lg;
+      height: $btn-just-icon-height-lg;
+      padding: $btn-just-icon-padding-y-lg $btn-just-icon-padding-x-lg;
+    }
+
+    i {
+      font-size: $btn-just-icon-lg-font-size;
+      position: $btn-just-icon-lg-position;
+      top: $btn-just-icon-lg-top;
+    }
+  }
+
+  &.btn-rounded {
+    border-radius: $btn-border-rounded;
+  }
+}
+
+.btn-check {
+  &:checked {
+    + .btn {
+      svg {
+        .color-background {
+          fill: $white;
+        }
+      }
+      &:hover {
+        svg {
+          .color-background {
+            fill: $dark;
+          }
+        }
+      }
+    }
+  }
+}
+
+.icon-move-right {
+  i {
+    transition: $btn-icon-transition;
+  }
+  &:hover,
+  &:focus {
+    i {
+      transform: $btn-icon-transform-right;
+    }
+  }
+}
+
+.icon-move-left {
+  i {
+    transition: $btn-icon-transition;
+  }
+  &:hover,
+  &:focus {
+    i {
+      transform: $btn-icon-transform-left;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color},
+  .btn.bg-gradient-#{$color} {
+    @include hover {
+      background-color: $value;
+      border-color: $value;
+    }
+    .btn.bg-outline-#{$color} {
+      border: $border-width solid $value;
+    }
+
+    &:not(:disabled):not(.disabled).active,
+    &:not(:disabled):not(.disabled):active,
+    .show > &.dropdown-toggle {
+      color: color-yiq($value);
+      background-color: $value;
+    }
+
+    @if $value != $white and $value != $light {
+      &.focus,
+      &:focus {
+        color: $white;
+      }
+    }
+  }
+
+  .btn-outline-#{$color} {
+    box-shadow: none;
+    @include hover {
+      &:not(.active) {
+        background-color: transparent;
+        opacity: 0.75;
+        box-shadow: none;
+        color: $value;
+      }
+    }
+  }
+}
+
+.btn-outline-white {
+  border-color: rgba($white, 0.75);
+  background: rgba($white, 0.1);
+}
+
+@each $color, $value in $btn-font-colors {
+  .btn-#{$color},
+  .btn.bg-gradient-#{$color} {
+    color: $value;
+    @include hover {
+      color: $value;
+    }
+  }
+}

src/assets/scss/argon-dashboard/_cards-extend.scss

+@import "cards/card-blog";
+@import "cards/card-horizontal";
+@import "cards/card-profile";
+@import "cards/card-pricing";

src/assets/scss/argon-dashboard/_cards.scss

+.card {
+  box-shadow: $card-box-shadow;
+  .card-header {
+    padding: $card-header-padding;
+  }
+
+  .card-body {
+    font-family: $font-family-sans-serif;
+    padding: $card-body-padding;
+  }
+
+  &.card-plain {
+    background-color: $card-plain-bg-color;
+    box-shadow: $card-plain-box-shadow !important;
+  }
+
+  .card-footer {
+    padding: $card-footer-padding;
+    background-color: transparent;
+  }
+}
+
+.author {
+  display: $card-author-display;
+
+  .name > span {
+    line-height: $card-author-name-line-height;
+    font-weight: $font-weight-bold;
+    font-size: $font-size-sm;
+    color: $card-author-name-color;
+  }
+
+  .stats {
+    font-size: $font-size-sm;
+    font-weight: $font-weight-normal;
+  }
+}
+
+@import "cards/card-background";
+@import "cards/card-carousel";

src/assets/scss/argon-dashboard/_components.scss

+// Badges
+@import "badges/badge";
+@import "badges/badge-circle";
+@import "badges/badge-dot";
+@import "badges/badge-floating";

src/assets/scss/argon-dashboard/_dark-version.scss

+.dark-version {
+  background-color: $dark-version-bg-color !important;
+
+  > div[class*="bg-"] {
+    background-color: $dark-version-bg-color !important;
+  }
+
+  .sidenav {
+    background: $dark-version-sidenav-bg-color !important;
+
+    &.bg-transparent {
+      background: transparent !important;
+
+      .navbar-nav {
+        .nav-link {
+          color: $white !important;
+        }
+      }
+      .nav {
+        .nav-link {
+          color: $white !important;
+        }
+      }
+    }
+
+    &.bg-white {
+      background: $white !important;
+
+      .navbar-nav {
+        .nav-link {
+          &.active:after {
+            color: $dark-version-caret-sidebar-color;
+          }
+        }
+      }
+      .collapse {
+        .nav-item {
+          .nav-link:not(.active) {
+            i {
+              color: $dark !important;
+            }
+          }
+          h6 {
+            color: $dark !important;
+          }
+        }
+      }
+    }
+  }
+
+  .fixed-plugin {
+    .btn {
+      &.bg-gradient-dark,
+      &.btn-outline-dark {
+        color: $white !important;
+        border: 1px solid $white !important;
+      }
+      &.active {
+        background: $white !important;
+        color: $h-color !important;
+      }
+    }
+  }
+
+  .bg-gradient-dark {
+    background-image: linear-gradient(
+      195deg,
+      $dark-gradient-dark,
+      $dark-gradient-state-dark
+    );
+  }
+
+  .card,
+  .swal2-popup,
+  .dropdown .dropdown-menu,
+  .kanban-board {
+    background: $dark-version-card-bg-color;
+    box-shadow: $dark-version-card-box-shadow;
+
+    .card-header {
+      background: transparent;
+    }
+
+    p {
+      color: $white !important;
+      opacity: 0.6;
+    }
+  }
+
+  .kanban-item {
+    background: transparent !important;
+    border: 1px solid;
+  }
+
+  .swal2-html-container {
+    color: $white !important;
+    opacity: 0.6;
+  }
+
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4,
+  h5,
+  .h5,
+  h6,
+  .h6,
+  a:not(.dropdown-item):not(.choices__item):not(.leaflet-control-zoom-in):not(
+      .leaflet-control-zoom-out
+    ):not(.btn):not(.nav-link):not(.fixed-plugin-button),
+  .table thead tr th,
+  .kanban-title-board {
+    color: $white !important;
+  }
+
+  .input-group {
+    &.input-group-dynamic,
+    &.input-group-static {
+      .form-control {
+        background-image: $dark-version-input-bg-image !important;
+        background-size:
+          0 100%,
+          100% 100%;
+        &:focus {
+          background-size:
+            100% 100%,
+            100% 100%;
+        }
+      }
+    }
+
+    &.input-group-outline {
+      .form-control {
+        border-color: $dark-version-border-color !important;
+      }
+    }
+
+    .is-valid,
+    .is-invalid {
+      border-color: $dark-version-border-color !important;
+    }
+  }
+
+  .accordion {
+    .accordion-button {
+      border-color: $dark-version-border-color !important;
+      color: $white;
+      opacity: 0.8;
+    }
+  }
+
+  .table > :not(caption) > * > * {
+    border-color: $dark-version-border-color !important;
+    color: $dark-version-table-color !important;
+  }
+
+  label {
+    color: $dark-version-body-color !important;
+  }
+
+  .list-group-item,
+  .multisteps-form__panel {
+    background-color: transparent !important;
+    border-color: rgba(255, 255, 255, 0.15) !important;
+  }
+
+  .nav {
+    &.bg-white {
+      background-color: $dark-version-card-bg-color !important;
+      box-shadow: $dark-version-card-box-shadow;
+    }
+
+    .nav-link[data-scroll]:hover {
+      color: $h-color !important;
+    }
+  }
+
+  .toast {
+    background-color: $dark-version-card-bg-color !important;
+    box-shadow: $dark-version-card-box-shadow;
+
+    .toast-header {
+      background: transparent;
+    }
+
+    span {
+      color: $white;
+    }
+
+    p {
+      color: $white !important;
+      opacity: 0.6;
+    }
+  }
+
+  .choices {
+    .choices__input {
+      background-color: transparent !important;
+      border-bottom: 1px solid $dark-version-border-color;
+      color: $white;
+    }
+    .choices__list.choices__list--dropdown {
+      background: $dark-version-card-bg-color;
+      box-shadow: $dark-version-card-box-shadow;
+    }
+  }
+
+  // Fullcalendar changes
+  .fc-theme-standard td,
+  .fc-theme-standard th {
+    border-color: $fc-theme-standard-dark-border-color;
+  }
+
+  // Datatable changes
+  .dataTable-sorter::after {
+    border-bottom-color: $white;
+  }
+
+  .dataTable-sorter::before {
+    border-top-color: $white;
+  }
+
+  // Quill changes
+  .ql-snow .ql-stroke {
+    stroke: $light;
+  }
+
+  .ql-snow .ql-fill,
+  .ql-snow .ql-stroke.ql-fill {
+    fill: $light;
+  }
+
+  .ql-toolbar.ql-snow .ql-picker-label {
+    color: $light;
+  }
+
+  .navbar-vertical {
+    .navbar-nav {
+      .nav-item {
+        .nav-link {
+          color: $white;
+          opacity: 0.8;
+
+          &[data-bs-toggle="collapse"]:after {
+            color: $white;
+          }
+
+          &.active {
+            box-shadow: $dark-nav-link-active-shadow;
+          }
+        }
+        .collapse,
+        .collapsing {
+          .nav {
+            .nav-item {
+              .nav-link {
+                color: $white;
+                opacity: 0.6;
+
+                &.active {
+                  opacity: 1;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+body.dark-version {
+  color: $dark-version-body-color !important;
+}

src/assets/scss/argon-dashboard/_dropdown-extend.scss

+// MultiLevel Dropdown Style
+
+.dropdown-menu li {
+  position: relative;
+}
+
+// End MultiLevel Dropdown Style
+
+.dropdown-image {
+  background-size: cover;
+}
+
+@include media-breakpoint-up(lg) {
+  .dropdown-xl {
+    min-width: $dropdown-xl-min-width;
+  }
+
+  .dropdown-lg {
+    min-width: $dropdown-lg-min-width;
+  }
+
+  .dropdown-md {
+    min-width: $dropdown-md-min-width;
+  }
+}
+
+@include media-breakpoint-down(xl) {
+  .dropdown-lg-responsive {
+    min-width: $dropdown-lg-width-responsive;
+  }
+}

src/assets/scss/argon-dashboard/_dropup.scss

+.dropup {
+  .dropdown-menu {
+    box-shadow: $dropdown-box-shadow;
+    transition: $dropdown-transition;
+    cursor: pointer;
+    top: auto !important;
+    bottom: 100% !important;
+    margin-bottom: $dropup-mb !important;
+    display: block;
+    opacity: 0;
+    transform-origin: $dropup-transform-origin;
+    pointer-events: none;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    will-change: transform, box-shadow;
+    animation: $dropdown-animation;
+
+    &.show {
+      pointer-events: auto;
+      opacity: 1;
+      animation: $dropdown-animation-show;
+
+      &:after {
+        bottom: -($dropup-animation-arrow-bottom-position - 2);
+      }
+    }
+
+    &:after {
+      font-family: "FontAwesome";
+      content: "\f0d7";
+      position: absolute;
+      z-index: -1;
+      bottom: $dropup-animation-arrow-bottom-position;
+      left: $dropdown-animation-arrow-left-position;
+      right: auto;
+      font-size: $dropdown-animation-arrow-font-size;
+      color: $white;
+      transition: $dropup-animation-arrow-transition;
+    }
+  }
+}

src/assets/scss/argon-dashboard/_fixed-plugin.scss

+.fixed-plugin {
+  .fixed-plugin-button {
+    background: $white;
+    border-radius: $fixed-plugin-radius;
+    bottom: $fixed-plugin-bottom;
+    right: $fixed-plugin-right;
+    font-size: $font-size-xl;
+    z-index: $fixed-plugin-button-z-index;
+    box-shadow: $fixed-plugin-box-shadow;
+    cursor: pointer;
+    i {
+      pointer-events: none;
+    }
+  }
+  .card {
+    position: fixed !important;
+    right: -$fixed-plugin-card-width;
+    top: 0;
+    height: 100%;
+    left: auto !important;
+    transform: unset !important;
+    width: $fixed-plugin-card-width;
+    border-radius: 0;
+    padding: 0 10px;
+    transition: 0.2s ease;
+    z-index: $fixed-plugin-card-z-index;
+  }
+
+  .badge {
+    border: 1px solid $white;
+    border-radius: 50%;
+    cursor: pointer;
+    display: inline-block;
+    height: 23px;
+    margin-right: 5px;
+    position: relative;
+    width: 23px;
+    transition: $transition-base;
+    &:hover,
+    &.active {
+      border-color: $dark;
+    }
+  }
+
+  .btn.bg-gradient-primary:not(:disabled):not(.disabled) {
+    border: 1px solid transparent;
+    &:not(.active) {
+      background-color: transparent;
+      background-image: none;
+      border: 1px solid $primary;
+      color: $primary;
+    }
+  }
+
+  &.show {
+    .card {
+      right: 0;
+    }
+  }
+}

src/assets/scss/argon-dashboard/_floating-elements.scss

+.floating-man {
+  width: $floating-man-width;
+}
+
+.fadeIn1 {
+  animation-duration: $fade-in-1-animation-duration;
+}
+.fadeIn2 {
+  animation-duration: $fade-in-2-animation-duration;
+}
+.fadeIn3 {
+  animation-duration: $fade-in-3-animation-duration;
+}
+.fadeIn4 {
+  animation-duration: $fade-in-4-animation-duration;
+}
+.fadeIn5 {
+  animation-duration: $fade-in-5-animation-duration;
+}
+.fadeIn1,
+.fadeIn2,
+.fadeIn3,
+.fadeIn4,
+.fadeIn5 {
+  animation-fill-mode: both;
+}
+.fadeInBottom {
+  animation-name: $fade-in-animation-name;
+}
+
+@keyframes fadeInBottom {
+  from {
+    opacity: 0;
+    transform: $fade-in-bottom-transform;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// Headers
+
+.header-rounded-images {
+  .shape-1 {
+    width: $shape-1-width;
+    left: $shape-1-left;
+  }
+
+  .shape-2 {
+    width: $shape-2-width;
+    left: $shape-2-left;
+  }
+
+  .shape-3 {
+    width: $shape-3-width;
+    margin-top: $shape-3-left;
+  }
+
+  .img-1 {
+    right: $shape-img-1-right;
+    width: $shape-img-1-width;
+    margin-top: $shape-img-1-margin-top;
+  }
+
+  .img-2 {
+    left: $shape-img-2-left;
+    width: $shape-img-2-width;
+    margin-top: $shape-img-2-margin-top;
+  }
+}

src/assets/scss/argon-dashboard/_footer.scss

+.footer {
+  .nav-link {
+    color: $dark;
+    font-weight: $font-weight-normal;
+    font-size: $font-size-sm;
+    padding-top: 0;
+    padding-bottom: $nav-link-footer-padding;
+
+    &:hover {
+      opacity: 1 !important;
+      transition: $footer-link-animation;
+    }
+  }
+}