From 19e99fcc2884cc2e178a42092386ee1abbedbd78 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Thu, 1 Jun 2023 13:42:35 +0200
Subject: [PATCH] daisyUI 3.0

---
 package-lock.json                             | 100 ++++++++++--------
 package.json                                  |   2 +-
 src/components/Note/NoteReferences.vue        |   2 +-
 src/components/Note/NoteToolbar.vue           |   2 +-
 src/components/Search/SearchResult.vue        |   2 +-
 src/components/SideBar/SideBarMenuItem.vue    |   2 +-
 .../TopBar/Settings/AccountSettings.vue       |  12 +--
 src/components/ViewModes/ListView.vue         |   4 +-
 src/components/ui/UIButton.vue                |   9 +-
 src/components/ui/UIButtonGroup.vue           |   2 +-
 src/components/ui/UIDropdownItem.vue          |   2 +-
 src/components/ui/UIMenuItem.vue              |   4 +-
 src/components/ui/UITable.vue                 |  16 ++-
 tailwind.config.ts                            |  16 +--
 14 files changed, 99 insertions(+), 76 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c3b3225..e606a8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "@vueuse/core": "^10.1.2",
         "crypto-js": "^4.1.1",
         "cytoscape": "^3.25.0",
-        "daisyui": "^2.51.6",
+        "daisyui": "^3.0.0",
         "date-fns": "^2.29.3",
         "dompurify": "^3.0.2",
         "file-saver": "^2.0.5",
@@ -3543,6 +3543,7 @@
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
       "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3802,6 +3803,7 @@
       "version": "4.21.5",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
       "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4011,6 +4013,7 @@
       "version": "1.0.30001481",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
       "integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -4257,18 +4260,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "dependencies": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      },
-      "engines": {
-        "node": ">=12.5.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -4289,6 +4280,7 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
       "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
       "dependencies": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -4304,6 +4296,11 @@
         "color-support": "bin.js"
       }
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
+    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -4797,13 +4794,13 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "2.51.6",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-2.51.6.tgz",
-      "integrity": "sha512-JRqOKayuFCmWe4X4k6Qvx1y7V/VNao8U5eTSOhusOKIzCsYqf56+TCSe4d7zmqGE0V6JiLDYAT8JeoWUeRKFCw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.0.tgz",
+      "integrity": "sha512-EuNK9JQd5yrPLDynAPQkG/29vjZXFWhBK4HXvM83d9oJU0EmF35UNLLs0cslBFfLK4b+bOuhgoYPJ4BjytOxNQ==",
       "dependencies": {
-        "color": "^4.2",
-        "css-selector-tokenizer": "^0.8.0",
-        "postcss-js": "^4.0.0",
+        "colord": "^2.9",
+        "css-selector-tokenizer": "^0.8",
+        "postcss-js": "^4",
         "tailwindcss": "^3"
       },
       "funding": {
@@ -4811,8 +4808,7 @@
         "url": "https://opencollective.com/daisyui"
       },
       "peerDependencies": {
-        "autoprefixer": "^10.0.2",
-        "postcss": "^8.1.6"
+        "postcss": "^8"
       }
     },
     "node_modules/dashdash": {
@@ -5080,7 +5076,8 @@
     "node_modules/electron-to-chromium": {
       "version": "1.4.377",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.377.tgz",
-      "integrity": "sha512-H3BYG6DW5Z+l0xcfXaicJGxrpA4kMlCxnN71+iNX+dBLkRMOdVJqFJiAmbNZZKA1zISpRg17JR03qGifXNsJtw=="
+      "integrity": "sha512-H3BYG6DW5Z+l0xcfXaicJGxrpA4kMlCxnN71+iNX+dBLkRMOdVJqFJiAmbNZZKA1zISpRg17JR03qGifXNsJtw==",
+      "dev": true
     },
     "node_modules/elementtree": {
       "version": "0.1.7",
@@ -6395,6 +6392,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
       "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true,
       "engines": {
         "node": "*"
       },
@@ -7616,7 +7614,8 @@
     "node_modules/is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
     },
     "node_modules/is-bigint": {
       "version": "1.0.4",
@@ -9336,7 +9335,8 @@
     "node_modules/node-releases": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
+      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
+      "dev": true
     },
     "node_modules/nopt": {
       "version": "6.0.0",
@@ -9387,6 +9387,7 @@
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
       "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11415,6 +11416,7 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
       "dependencies": {
         "is-arrayish": "^0.3.1"
       }
@@ -12533,6 +12535,7 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
       "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -15800,6 +15803,7 @@
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",
       "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==",
+      "dev": true,
       "requires": {
         "browserslist": "^4.21.5",
         "caniuse-lite": "^1.0.30001464",
@@ -15993,6 +15997,7 @@
       "version": "4.21.5",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
       "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+      "dev": true,
       "requires": {
         "caniuse-lite": "^1.0.30001449",
         "electron-to-chromium": "^1.4.284",
@@ -16131,7 +16136,8 @@
     "caniuse-lite": {
       "version": "1.0.30001481",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
-      "integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ=="
+      "integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==",
+      "dev": true
     },
     "cardinal": {
       "version": "2.1.1",
@@ -16299,15 +16305,6 @@
       "integrity": "sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==",
       "dev": true
     },
-    "color": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
-      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
-      "requires": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.9.0"
-      }
-    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -16325,6 +16322,7 @@
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
       "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dev": true,
       "requires": {
         "color-name": "^1.0.0",
         "simple-swizzle": "^0.2.2"
@@ -16337,6 +16335,11 @@
       "dev": true,
       "optional": true
     },
+    "colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw=="
+    },
     "colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -16743,13 +16746,13 @@
       }
     },
     "daisyui": {
-      "version": "2.51.6",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-2.51.6.tgz",
-      "integrity": "sha512-JRqOKayuFCmWe4X4k6Qvx1y7V/VNao8U5eTSOhusOKIzCsYqf56+TCSe4d7zmqGE0V6JiLDYAT8JeoWUeRKFCw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-3.0.0.tgz",
+      "integrity": "sha512-EuNK9JQd5yrPLDynAPQkG/29vjZXFWhBK4HXvM83d9oJU0EmF35UNLLs0cslBFfLK4b+bOuhgoYPJ4BjytOxNQ==",
       "requires": {
-        "color": "^4.2",
-        "css-selector-tokenizer": "^0.8.0",
-        "postcss-js": "^4.0.0",
+        "colord": "^2.9",
+        "css-selector-tokenizer": "^0.8",
+        "postcss-js": "^4",
         "tailwindcss": "^3"
       }
     },
@@ -16960,7 +16963,8 @@
     "electron-to-chromium": {
       "version": "1.4.377",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.377.tgz",
-      "integrity": "sha512-H3BYG6DW5Z+l0xcfXaicJGxrpA4kMlCxnN71+iNX+dBLkRMOdVJqFJiAmbNZZKA1zISpRg17JR03qGifXNsJtw=="
+      "integrity": "sha512-H3BYG6DW5Z+l0xcfXaicJGxrpA4kMlCxnN71+iNX+dBLkRMOdVJqFJiAmbNZZKA1zISpRg17JR03qGifXNsJtw==",
+      "dev": true
     },
     "elementtree": {
       "version": "0.1.7",
@@ -18034,7 +18038,8 @@
     "fraction.js": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA=="
+      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
+      "dev": true
     },
     "fresh": {
       "version": "0.5.2",
@@ -18965,7 +18970,8 @@
     "is-arrayish": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "dev": true
     },
     "is-bigint": {
       "version": "1.0.4",
@@ -20311,7 +20317,8 @@
     "node-releases": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
+      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
+      "dev": true
     },
     "nopt": {
       "version": "6.0.0",
@@ -20351,7 +20358,8 @@
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true
     },
     "npm-run-all": {
       "version": "4.1.5",
@@ -21816,6 +21824,7 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
       "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dev": true,
       "requires": {
         "is-arrayish": "^0.3.1"
       }
@@ -22666,6 +22675,7 @@
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
       "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==",
+      "dev": true,
       "requires": {
         "escalade": "^3.1.1",
         "picocolors": "^1.0.0"
diff --git a/package.json b/package.json
index ca762cc..a8c0d48 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@vueuse/core": "^10.1.2",
     "crypto-js": "^4.1.1",
     "cytoscape": "^3.25.0",
-    "daisyui": "^2.51.6",
+    "daisyui": "^3.0.0",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.2",
     "file-saver": "^2.0.5",
diff --git a/src/components/Note/NoteReferences.vue b/src/components/Note/NoteReferences.vue
index c6b65c3..3dd24eb 100644
--- a/src/components/Note/NoteReferences.vue
+++ b/src/components/Note/NoteReferences.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
   <UIMenu class="mt-3 rounded-xl border-[1px] px-3 py-3" v-if="props.references.length > 0">
     <UIMenuItem :title="true">
       <span>References</span>
-      <UIBadge variant="outline">{{ props.references.length }}</UIBadge>
+      <UIBadge variant="outline" class="ml-2">{{ props.references.length }}</UIBadge>
     </UIMenuItem>
     <UIMenuItem
       v-for="reference in props.references"
diff --git a/src/components/Note/NoteToolbar.vue b/src/components/Note/NoteToolbar.vue
index 1de126d..9d12570 100644
--- a/src/components/Note/NoteToolbar.vue
+++ b/src/components/Note/NoteToolbar.vue
@@ -59,7 +59,7 @@ const openModal = async (open: () => void, modal: ModalOptions) => {
     <UIButtonGroup class="flex items-center" v-if="!props.note.isRoot">
       <UIModal v-for="confirmModal in confirmModals" :key="confirmModal.key">
         <template #activator="{ open }">
-          <UIButton size="sm" @click="openModal(open, confirmModal)">
+          <UIButton size="sm" @click="openModal(open, confirmModal)" :join="true">
             <i :class="confirmModal.icon" />
           </UIButton>
         </template>
diff --git a/src/components/Search/SearchResult.vue b/src/components/Search/SearchResult.vue
index 3d37ad4..86f4a38 100644
--- a/src/components/Search/SearchResult.vue
+++ b/src/components/Search/SearchResult.vue
@@ -22,7 +22,7 @@ const element = ref<HTMLElement | null>(null)
     :active="props.activeResult?.id === result.id"
   >
     <UIBadge size="sm" variant="ghost" class="mr-0.5" v-if="activeNote?.id === result.id">current</UIBadge>
-    <span class="flex-grow overflow-hidden whitespace-nowrap">{{ result.title }}</span>
+    <span class="truncate flex-grow">{{ result.title }}</span>
     <span class="whitespace-nowrap">{{ formatDate(result.modified) }}</span>
   </UIMenuItem>
 </template>
diff --git a/src/components/SideBar/SideBarMenuItem.vue b/src/components/SideBar/SideBarMenuItem.vue
index 0048c51..2d2e6c0 100644
--- a/src/components/SideBar/SideBarMenuItem.vue
+++ b/src/components/SideBar/SideBarMenuItem.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
 </script>
 <template>
   <a
-    class="max-sm:mt-2 mt-1 block w-full cursor-pointer overflow-x-hidden text-ellipsis whitespace-nowrap rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
+    class="max-sm:mt-2 mt-1 block w-full cursor-pointer truncate rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
     :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
     <i :class="props.icon" class="mr-2" v-if="props.icon"></i>
diff --git a/src/components/TopBar/Settings/AccountSettings.vue b/src/components/TopBar/Settings/AccountSettings.vue
index 16c4cc7..25f953e 100644
--- a/src/components/TopBar/Settings/AccountSettings.vue
+++ b/src/components/TopBar/Settings/AccountSettings.vue
@@ -105,7 +105,7 @@ const toggleEncryption = async () => {
             <div class="items-top w-full flex-row sm:flex">
               <div class="font-bold sm:w-4/12">Export notes</div>
               <UIButton size="sm" @click="exportNotes">
-                <i class="fa-fw fa-solid fa-file-export mr-2"></i>
+                <i class="fa-fw fa-solid fa-file-export"></i>
                 Export notes
               </UIButton>
             </div>
@@ -113,13 +113,13 @@ const toggleEncryption = async () => {
               <div class="flex-shrink-0 font-bold sm:w-4/12">Delete account</div>
               <div>
                 <UIButton size="sm" color="error" @click="showDeleteAccountDialog = true">
-                  <i class="fa-fw fa-solid fa-trash mr-2"></i>
+                  <i class="fa-fw fa-solid fa-trash"></i>
                   Delete account
                 </UIButton>
                 <UIAlert
                   color="warning"
                   density="compact"
-                  class="mt-1 space-y-2"
+                  class="mt-1 space-y-2 text-sm"
                   v-if="showDeleteAccountDialog"
                 >
                   <div>
@@ -146,7 +146,7 @@ const toggleEncryption = async () => {
                     @click="showEncryptionDialog = true"
                     v-if="showEncryptionDialog === false"
                   >
-                    <i class="fa-fw fa-solid fa-key mr-2"></i>
+                    <i class="fa-fw fa-solid fa-key"></i>
                     Enable end-to-end encryption
                   </UIButton>
                 </template>
@@ -156,11 +156,11 @@ const toggleEncryption = async () => {
                     @click="showEncryptionDialog = true"
                     v-if="showEncryptionDialog === false"
                   >
-                    <i class="fa-fw fa-solid fa-key mr-2"></i>
+                    <i class="fa-fw fa-solid fa-key"></i>
                     Disable end-to-end encryption
                   </UIButton>
                 </template>
-                <UIAlert color="info" density="compact" v-if="showEncryptionDialog">
+                <UIAlert color="info" density="compact" class="text-sm" v-if="showEncryptionDialog">
                   <div class="w-full space-y-2">
                     <div>
                       Enter your passphrase to
diff --git a/src/components/ViewModes/ListView.vue b/src/components/ViewModes/ListView.vue
index 3cc3481..3981360 100644
--- a/src/components/ViewModes/ListView.vue
+++ b/src/components/ViewModes/ListView.vue
@@ -61,9 +61,9 @@ const deleteSelectedNotes = (closeModal: () => void) => {
       ></UIInputText>
     </div>
     <div class="overflow-x-auto">
-      <UITable density="compact" class="w-full">
+      <UITable size="md" class="w-full">
         <thead>
-          <tr>
+          <tr class="text-sm bg-base-200 text-base-content">
             <th class="w-[48px]"></th>
             <th>Note title</th>
             <th class="w-[75px]">Words</th>
diff --git a/src/components/ui/UIButton.vue b/src/components/ui/UIButton.vue
index 1360755..cbfcfb7 100644
--- a/src/components/ui/UIButton.vue
+++ b/src/components/ui/UIButton.vue
@@ -4,13 +4,15 @@ interface Props {
   variant?: 'regular' | 'outline'
   color?: 'regular' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'
   dropdown?: boolean
+  join?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'md',
   variant: 'regular',
   color: 'regular',
-  dropdown: false
+  dropdown: false,
+  join: false
 })
 
 const styleClass = computed(() => {
@@ -36,7 +38,8 @@ const styleClass = computed(() => {
   const sizeClass = sizeVariants[props.size]
   const variantClass = variantVariants[props.variant]
   const colorClass = colorVariants[props.color]
-  return [sizeClass, variantClass, colorClass]
+  const joinClass = props.join ? 'dui-join-item' : ''
+  return [sizeClass, variantClass, colorClass, joinClass]
 })
 </script>
 <template>
@@ -48,7 +51,7 @@ const styleClass = computed(() => {
   >
     <slot></slot>
   </label>
-  <button class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
+  <button type="button" class="dui-btn h-auto px-3 py-2 duration-0" :class="styleClass" v-else>
     <slot></slot>
   </button>
 </template>
diff --git a/src/components/ui/UIButtonGroup.vue b/src/components/ui/UIButtonGroup.vue
index d25f396..24969a5 100644
--- a/src/components/ui/UIButtonGroup.vue
+++ b/src/components/ui/UIButtonGroup.vue
@@ -1,3 +1,3 @@
 <template>
-  <div class="dui-btn-group"><slot></slot></div>
+  <div class="dui-join"><slot></slot></div>
 </template>
diff --git a/src/components/ui/UIDropdownItem.vue b/src/components/ui/UIDropdownItem.vue
index 0ed2887..1df1487 100644
--- a/src/components/ui/UIDropdownItem.vue
+++ b/src/components/ui/UIDropdownItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <li class="text-base">
+  <li class="text-sm">
     <a class="rounded-lg"><slot></slot></a>
   </li>
 </template>
diff --git a/src/components/ui/UIMenuItem.vue b/src/components/ui/UIMenuItem.vue
index 4066e25..ce00db2 100644
--- a/src/components/ui/UIMenuItem.vue
+++ b/src/components/ui/UIMenuItem.vue
@@ -9,7 +9,7 @@ const props = defineProps<Props>()
 
 const styleClass = computed(() => {
   const titleClass = props.title
-    ? 'dui-menu-item dui-menu-title !opacity-100 space-x-2 !text-xl font-bold text-secondary'
+    ? 'dui-menu-item dui-menu-title !opacity-100 space-x-2 !text-xl font-bold !text-secondary'
     : ''
   return [titleClass]
 })
@@ -18,7 +18,7 @@ const styleClass = computed(() => {
   <li :class="styleClass">
     <span class="flex items-center" v-if="props.title"><slot></slot></span>
     <a
-      class="w-full rounded-md"
+      class="w-full rounded-md flex"
       :class="{ 'dui-disabled': props.disabled, 'dui-active': props.active }"
       v-else
     >
diff --git a/src/components/ui/UITable.vue b/src/components/ui/UITable.vue
index e77c662..48d6ad8 100644
--- a/src/components/ui/UITable.vue
+++ b/src/components/ui/UITable.vue
@@ -1,12 +1,20 @@
 <script setup lang="ts">
 interface Props {
-  density?: 'compact'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
 }
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  size: 'md'
+})
 
 const styleClass = computed(() => {
-  const densityClass = props.density ? 'dui-table-compact' : ''
-  return [densityClass]
+  const sizeVariants = {
+    'xs': 'dui-table-xs',
+    'sm': 'dui-table-sm',
+    'md': 'dui-table-md',
+    'lg': 'dui-table-lg',
+  }
+  const sizeClass = sizeVariants[props.size]
+  return [sizeClass]
 })
 </script>
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b1beef6..540c1f6 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -35,15 +35,17 @@ export default {
     themes: [
       {
         contexted: {
+          ...require("daisyui/src/theming/themes")["[data-theme=light]"],
           primary,
           secondary,
-          accent: '#37CDBE',
-          neutral: '#F7F7F7',
-          'base-100': '#FFFFFF',
-          info: '#3ABFF8',
-          success: '#36D399',
-          warning: '#FBBD23',
-          error: '#F87272'
+          "--btn-text-case": "uppercase", // set default text transform for buttons
+          // accent: '#37CDBE',
+          // neutral: '#F7F7F7',
+          // 'base-100': '#FFFFFF',
+          // info: '#3ABFF8',
+          // success: '#36D399',
+          // warning: '#FBBD23',
+          // error: '#F87272'
         }
       }
     ],