From f1ada5b3292d45fed7eb808d8cc4d98573636e9b Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.com>
Date: Thu, 5 Oct 2023 00:01:10 +0530
Subject: using dark mode if system is in dark mode

---
 package-lock.json                  | 11 ++++++++++-
 package.json                       |  3 ++-
 src/components/brands_table.vue    |  4 ++--
 src/components/customers_table.vue |  4 ++--
 src/components/items_table.vue     |  4 ++--
 src/components/navbar.vue          |  4 ++--
 src/components/new_brand.vue       |  2 +-
 src/components/new_customer.vue    |  2 +-
 src/components/new_item.vue        |  2 +-
 src/main.ts                        | 31 +++++++++++++++++++------------
 src/views/LogIn.vue                |  2 +-
 tsconfig.app.json                  |  1 +
 tsconfig.node.json                 |  1 +
 13 files changed, 45 insertions(+), 26 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 37cd1c1..da4e03b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.3",
         "@tsconfig/node18": "^18.2.2",
+        "@types/bootstrap": "^5.2.7",
         "@types/node": "^18.17.17",
         "@vitejs/plugin-vue": "^4.3.4",
         "@vitejs/plugin-vue-jsx": "^3.0.2",
@@ -1062,7 +1063,6 @@
       "version": "2.11.8",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -1080,6 +1080,15 @@
       "integrity": "sha512-d6McJeGsuoRlwWZmVIeE8CUA27lu6jLjvv1JzqmpsytOYYbVi1tHZEnwCNVOXnj4pyLvneZlFlpXUK+X9wBWyw==",
       "dev": true
     },
+    "node_modules/@types/bootstrap": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-5.2.7.tgz",
+      "integrity": "sha512-vWs0HzobIB8Af2F0B1GXpaVLSVn1NWULDYgTIWp08Et/r2B3aAwwhFBeOs/rRFWJA38EZTXkWP3tepIjpQkpLg==",
+      "dev": true,
+      "dependencies": {
+        "@popperjs/core": "^2.9.2"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.13",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.13.tgz",
diff --git a/package.json b/package.json
index c66ce3a..e2296a9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "openbills-web",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -22,6 +22,7 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node18": "^18.2.2",
+    "@types/bootstrap": "^5.2.7",
     "@types/node": "^18.17.17",
     "@vitejs/plugin-vue": "^4.3.4",
     "@vitejs/plugin-vue-jsx": "^3.0.2",
diff --git a/src/components/brands_table.vue b/src/components/brands_table.vue
index a0f95ad..d81e143 100644
--- a/src/components/brands_table.vue
+++ b/src/components/brands_table.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, onMounted } from 'vue'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
@@ -55,7 +55,7 @@ onMounted(() => {
     </div>
   </div>
 
-  <table v-else class="table table-light table-striped table-hover">
+  <table v-else class="table table-striped table-hover">
     <thead>
       <tr>
         <th scope="col">#</th>
diff --git a/src/components/customers_table.vue b/src/components/customers_table.vue
index fcd1fda..4ff23a8 100644
--- a/src/components/customers_table.vue
+++ b/src/components/customers_table.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import axios from 'axios'
@@ -56,7 +56,7 @@ onMounted(() => {
     </div>
   </div>
 
-  <table v-else class="table table-light table-striped table-hover">
+  <table v-else class="table table-striped table-hover">
     <thead>
       <tr>
         <th scope="col">#</th>
diff --git a/src/components/items_table.vue b/src/components/items_table.vue
index 5d689e5..187ee0f 100644
--- a/src/components/items_table.vue
+++ b/src/components/items_table.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import axios from 'axios'
@@ -65,7 +65,7 @@ onMounted(() => {
     </div>
   </div>
 
-  <table v-else class="table table-light table-striped table-hover">
+  <table v-else class="table table-striped table-hover">
     <thead>
       <tr>
         <th scope="col">#</th>
diff --git a/src/components/navbar.vue b/src/components/navbar.vue
index 7491ea9..12616b6 100644
--- a/src/components/navbar.vue
+++ b/src/components/navbar.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { watch, ref } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 
@@ -13,7 +13,7 @@ watch(
 </script>
 
 <template>
-  <nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
+  <nav class="navbar navbar-expand-lg">
     <div class="container-fluid">
       <RouterLink class="navbar-brand" to="/">OpenBills</RouterLink>
 
diff --git a/src/components/new_brand.vue b/src/components/new_brand.vue
index e0deb83..8b4893a 100644
--- a/src/components/new_brand.vue
+++ b/src/components/new_brand.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref } from 'vue'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
diff --git a/src/components/new_customer.vue b/src/components/new_customer.vue
index f6f8d9b..cbabac4 100644
--- a/src/components/new_customer.vue
+++ b/src/components/new_customer.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, toRaw } from 'vue'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
diff --git a/src/components/new_item.vue b/src/components/new_item.vue
index 0df7249..34162a5 100644
--- a/src/components/new_item.vue
+++ b/src/components/new_item.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, toRaw, onMounted } from 'vue'
 import axios from 'axios'
 import { useToast } from 'vue-toast-notification'
diff --git a/src/main.ts b/src/main.ts
index 2886300..c3b6952 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -26,35 +26,42 @@ axios.interceptors.request.use(
 
 axios.interceptors.response.use(
   (res) => {
-    return res;
+    return res
   },
   async (err) => {
-    const originalConfig = err.config;
+    const originalConfig = err.config
 
-    if (originalConfig.url !== "/auth/signin" && err.response) {
+    if (originalConfig.url !== '/auth/signin' && err.response) {
       if (err.response.status === 401 && !originalConfig._retry) {
-        originalConfig._retry = true;
+        originalConfig._retry = true
 
         try {
-          const rs = await axios.post("/auth/refresh", {
-            RefreshToken: localStorage.getItem("refToken")
-          });
+          const rs = await axios.post('/auth/refresh', {
+            RefreshToken: localStorage.getItem('refToken')
+          })
 
-          localStorage.setItem("authToken", rs.data.auth_token)
+          localStorage.setItem('authToken', rs.data.auth_token)
 
-          return axios(originalConfig);
+          return axios(originalConfig)
         } catch (_error) {
-          return Promise.reject(_error);
+          return Promise.reject(_error)
         }
       }
     }
 
-    return Promise.reject(err);
+    return Promise.reject(err)
   }
-);
+)
 
 const app = createApp(App)
 
 app.use(router)
 
 app.mount('#app')
+
+// use dark theme if system is in dark mode
+// flaky
+document.documentElement.setAttribute(
+  'data-bs-theme',
+  window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+)
diff --git a/src/views/LogIn.vue b/src/views/LogIn.vue
index 77999f2..dc1f983 100644
--- a/src/views/LogIn.vue
+++ b/src/views/LogIn.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="js">
 import { ref, toRaw } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import axios from 'axios'
diff --git a/tsconfig.app.json b/tsconfig.app.json
index 3e5b621..1a2c491 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -3,6 +3,7 @@
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["src/**/__tests__/*"],
   "compilerOptions": {
+    "allowJs": true,
     "composite": true,
     "baseUrl": ".",
     "paths": {
diff --git a/tsconfig.node.json b/tsconfig.node.json
index dee96be..a7e6e86 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -8,6 +8,7 @@
     "playwright.config.*"
   ],
   "compilerOptions": {
+    "allowJs": true,
     "composite": true,
     "module": "ESNext",
     "moduleResolution": "Bundler",
-- 
cgit v1.2.3