From 0384d5032f3736831a6174f2b001759c6891aa73 Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Tue, 26 Mar 2024 14:41:38 -0600
Subject: [PATCH 1/2] Update Icon Library

---
 api/web/package-lock.json                     |  8 +--
 api/web/package.json                          |  3 +-
 api/web/src/components/Errors.vue             | 14 ++---
 api/web/src/components/Export.vue             | 20 +++----
 api/web/src/components/Fabric.vue             | 20 +++----
 api/web/src/components/Job.vue                | 32 +++++------
 api/web/src/components/JobLog.vue             |  8 +--
 api/web/src/components/JobRaw.vue             | 20 +++----
 api/web/src/components/Jobs.vue               | 26 ++++-----
 api/web/src/components/Profile.vue            | 18 +++---
 api/web/src/components/Run.vue                | 12 ++--
 api/web/src/components/Runs.vue               |  8 +--
 api/web/src/components/cards/Exports.vue      |  8 +--
 api/web/src/components/job/JobSample.vue      |  8 +--
 .../src/components/profile/ProfileDefault.vue | 56 +++++++++----------
 api/web/src/components/profile/Tokens.vue     | 34 +++++------
 .../profile/admin/AdminCollection.vue         | 14 ++---
 .../profile/admin/AdminOverrides.vue          | 32 +++++------
 .../components/profile/admin/AdminUser.vue    | 22 ++++----
 api/web/src/components/util/MustLogin.vue     |  8 +--
 20 files changed, 182 insertions(+), 189 deletions(-)

diff --git a/api/web/package-lock.json b/api/web/package-lock.json
index cba7f197..2c75d5c6 100644
--- a/api/web/package-lock.json
+++ b/api/web/package-lock.json
@@ -22,8 +22,7 @@
                 "sass-loader": "^14.1.0",
                 "vue": "^3.2.31",
                 "vue-chartjs": "^5.2.0",
-                "vue-router": "^4.0.14",
-                "vue-tabler-icons": "2.21.0"
+                "vue-router": "^4.0.14"
             },
             "devDependencies": {
                 "@vitejs/plugin-vue": "^5.0.0",
@@ -3201,11 +3200,6 @@
                 "vue": "^3.2.0"
             }
         },
-        "node_modules/vue-tabler-icons": {
-            "version": "2.21.0",
-            "resolved": "https://registry.npmjs.org/vue-tabler-icons/-/vue-tabler-icons-2.21.0.tgz",
-            "integrity": "sha512-rEZYPd37j1sd/9gBFtC1u8wj3Pz1S3gLP1tgexvnivzQPXphc6M+7XuTSOd7wtdpaLt1sQgDmuQxIgczzrvf0A=="
-        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/api/web/package.json b/api/web/package.json
index 36929fab..44f261bf 100644
--- a/api/web/package.json
+++ b/api/web/package.json
@@ -22,8 +22,7 @@
         "sass-loader": "^14.1.0",
         "vue": "^3.2.31",
         "vue-chartjs": "^5.2.0",
-        "vue-router": "^4.0.14",
-        "vue-tabler-icons": "2.21.0"
+        "vue-router": "^4.0.14"
     },
     "devDependencies": {
         "@vitejs/plugin-vue": "^5.0.0",
diff --git a/api/web/src/components/Errors.vue b/api/web/src/components/Errors.vue
index dc745da8..b6915dfd 100644
--- a/api/web/src/components/Errors.vue
+++ b/api/web/src/components/Errors.vue
@@ -20,8 +20,8 @@
                             <h3 class='card-title'>Job Errors</h3>
 
                             <div class='ms-auto btn-list'>
-                                <SearchIcon @click='showFilter = !showFilter' class='cursor-pointer'/>
-                                <RefreshIcon @click='fetchProblems' class='cursor-pointer'/>
+                                <IconSearch @click='showFilter = !showFilter' class='cursor-pointer' size='32'/>
+                                <IconRefresh @click='fetchProblems' class='cursor-pointer' size='32'/>
                             </div>
                         </div>
                         <template v-if='showFilter'>
@@ -85,9 +85,9 @@
 
 <script>
 import {
-    RefreshIcon,
-    SearchIcon
-} from 'vue-tabler-icons';
+    IconRefresh,
+    IconSearch
+} from '@tabler/icons-vue';
 import Status from './util/Status.vue';
 import QueryStatus from './query/Status.vue';
 import QuerySource from './query/Source.vue';
@@ -164,8 +164,8 @@ export default {
         }
     },
     components: {
-        SearchIcon,
-        RefreshIcon,
+        IconSearch,
+        IconRefresh,
         Status,
         QueryStatus,
         QuerySource,
diff --git a/api/web/src/components/Export.vue b/api/web/src/components/Export.vue
index eeccaa4a..e2449bc2 100644
--- a/api/web/src/components/Export.vue
+++ b/api/web/src/components/Export.vue
@@ -31,14 +31,14 @@
                             <div class='ms-auto btn-list'>
                                 <TablerDropdown>
                                     <slot>
-                                        <DotsVerticalIcon class='cursor-pointer'/>
+                                        <IconDotsVertical class='cursor-pointer' size='32'/>
                                     </slot>
                                     <template #dropdown>
                                         <div @click='createRerun' class='mx-2 my-2'>Rerun</div>
                                     </template>
                                 </TablerDropdown>
 
-                                <RefreshIcon @click='refresh' class='cursor-pointer'/>
+                                <IconRefresh @click='refresh' class='cursor-pointer' size='32'/>
                             </div>
                         </div>
                         <div class='card-body'>
@@ -56,7 +56,7 @@
                                 <template v-else-if='exp.status === "Success"'>
                                     <div class='d-flex justify-content-center mb-3'>
                                         <button @click='datapls' class='btn btn-primary'>
-                                            <ArrowDownIcon/> Download&nbsp;
+                                            <IconArrowDown size='32'/> Download&nbsp;
                                             <span v-text='exp.format'/>
                                         </button>
                                     </div>
@@ -81,10 +81,10 @@ import Log from './util/Log.vue';
 import Status from './util/Status.vue';
 import LayerIcon from './util/LayerIcon.vue';
 import {
-    ArrowDownIcon,
-    RefreshIcon,
-    DotsVerticalIcon,
-} from 'vue-tabler-icons';
+    IconArrowDown,
+    IconRefresh,
+    IconDotsVertical,
+} from '@tabler/icons-vue';
 import {
     TablerLoading,
     TablerDropdown,
@@ -162,9 +162,9 @@ export default {
         }
     },
     components: {
-        ArrowDownIcon,
-        RefreshIcon,
-        DotsVerticalIcon,
+        IconArrowDown,
+        IconRefresh,
+        IconDotsVertical,
         TablerLoading,
         TablerDropdown,
         TablerBreadCrumb,
diff --git a/api/web/src/components/Fabric.vue b/api/web/src/components/Fabric.vue
index 21a58269..1990e4f4 100644
--- a/api/web/src/components/Fabric.vue
+++ b/api/web/src/components/Fabric.vue
@@ -8,19 +8,19 @@
                     "color-gray": !filter.layers.buildings,
                     "color-blue": filter.layers.buildings
                 }'>
-                    <BuildingCommunityIcon width="24" height="24"/>
+                    <IconBuildingCommunity size='24'/>
                 </button>
                 <button @click='filter.layers.addresses = !filter.layers.addresses' class='btn btn--stroke btn--s mx3 round' :class='{
                     "color-gray": !filter.layers.addresses,
                     "color-blue": filter.layers.addresses
                 }'>
-                    <MapPinIcon width="24" height="24"/>
+                    <IconMapPin size='24'/>
                 </button>
                 <button @click='filter.layers.parcels = !filter.layers.parcels' class='btn btn--stroke btn--s mx3 round' :class='{
                     "color-gray": !filter.layers.parcels,
                     "color-blue": filter.layers.parcels
                 }'>
-                    <ShapeIcon width="24" height="24"/>
+                    <IconShape size='24'/>
                 </button>
             </div>
 
@@ -30,10 +30,10 @@
 
 <script>
 import {
-    ShapeIcon,
-    MapPinIcon,
-    BuildingCommunityIcon
-} from 'vue-tabler-icons';
+    IconShape,
+    IconMapPin,
+    IconBuildingCommunity
+} from '@tabler/icons-vue';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
@@ -156,9 +156,9 @@ export default {
         }
     },
     components: {
-        ShapeIcon,
-        MapPinIcon,
-        BuildingCommunityIcon
+        IconShape,
+        IconMapPin,
+        IconBuildingCommunity
     }
 }
 </script>
diff --git a/api/web/src/components/Job.vue b/api/web/src/components/Job.vue
index 094a18bb..3a620ff2 100644
--- a/api/web/src/components/Job.vue
+++ b/api/web/src/components/Job.vue
@@ -52,14 +52,14 @@
 
                             <div class='ms-auto btn-list'>
                                 <Download :auth='auth' :job='job' @login='$emit("login")' @perk='$emit("perk", $event)'/>
-                                <LicenseIcon v-if='job.license' class='cursor-pointer'/>
-                                <CodeIcon @click='$router.push({ path: `/job/${$route.params.jobid}/raw` })' class='cursor-pointer'/>
-                                <NotesIcon @click='$router.push({ path: `/job/${$route.params.jobid}/log` })' v-if='job.loglink' class='cursor-pointer'/>
-                                <RefreshIcon @click='refresh' class='cursor-pointer'/>
+                                <IconLicense v-if='job.license' class='cursor-pointer' size='32'/>
+                                <IconCode @click='$router.push({ path: `/job/${$route.params.jobid}/raw` })' class='cursor-pointer' size='32'/>
+                                <IconNotes @click='$router.push({ path: `/job/${$route.params.jobid}/log` })' v-if='job.loglink' class='cursor-pointer' size='32'/>
+                                <IconRefresh @click='refresh' class='cursor-pointer' size='32'/>
 
                                 <div class='dropdown'>
                                     <div type="button" id="jobAdmin" data-bs-toggle="dropdown" aria-expanded="false">
-                                        <DotsVerticalIcon class='cursor-pointer'/>
+                                        <IconDotsVertical class='cursor-pointer' size='32'/>
                                     </div>
                                     <ul class="dropdown-menu" aria-labelledby='jobAdmin'>
                                         <a @click='createRerun' class="dropdown-item cursor-pointer">Create ReRun</a>
@@ -117,12 +117,12 @@
 import Log from './util/Log.vue';
 import LayerIcon from './util/LayerIcon.vue';
 import {
-    LicenseIcon,
-    CodeIcon,
-    NotesIcon,
-    RefreshIcon,
-    DotsVerticalIcon,
-} from 'vue-tabler-icons'
+    IconLicense,
+    IconCode,
+    IconNotes,
+    IconRefresh,
+    IconDotsVertical,
+} from '@tabler/icons-vue'
 import {
     TablerBreadCrumb,
     TablerLoading,
@@ -232,11 +232,11 @@ export default {
         TablerLoading,
         ErrorsModerate,
         Status,
-        LicenseIcon,
-        CodeIcon,
-        NotesIcon,
-        RefreshIcon,
-        DotsVerticalIcon,
+        IconLicense,
+        IconCode,
+        IconNotes,
+        IconRefresh,
+        IconDotsVertical,
         LayerIcon
     },
 }
diff --git a/api/web/src/components/JobLog.vue b/api/web/src/components/JobLog.vue
index e6434b4a..2644e2fb 100644
--- a/api/web/src/components/JobLog.vue
+++ b/api/web/src/components/JobLog.vue
@@ -29,7 +29,7 @@
                             </div>
 
                             <div class='ms-auto btn-list'>
-                                <RefreshIcon @click='getJob' class='cursor-pointer'/>
+                                <IconRefresh @click='getJob' class='cursor-pointer' size='32'/>
                             </div>
                         </div>
                         <TablerLoading v-if='loading'/>
@@ -46,8 +46,8 @@
 import Log from './util/Log.vue'
 import Status from './util/Status.vue'
 import {
-    RefreshIcon
-} from 'vue-tabler-icons';
+    IconRefresh
+} from '@tabler/icons-vue';
 import {
     TablerBreadCrumb,
     TablerLoading
@@ -76,7 +76,7 @@ export default {
         },
     },
     components: {
-        RefreshIcon,
+        IconRefresh,
         TablerLoading,
         TablerBreadCrumb,
         Status,
diff --git a/api/web/src/components/JobRaw.vue b/api/web/src/components/JobRaw.vue
index 4016ea34..29d99183 100644
--- a/api/web/src/components/JobRaw.vue
+++ b/api/web/src/components/JobRaw.vue
@@ -5,9 +5,9 @@
                 <h2 class='txt-h4 ml12 pb12 fl'>Job #<span v-text='$route.params.jobid'/></h2>
 
                 <div class='ms-auto btn-list'>
-                    <RefreshIcon @click='refresh' class='cursor-pointer'/>
-                    <BrandGithubIcon @click='external(job.source)' class='cursor-pointer'/>
-                    <LinkIcon v-if='job.source' @click='external(raw.data)'/>
+                    <IconRefresh @click='refresh' class='cursor-pointer' size='32'/>
+                    <IconBrandGithub @click='external(job.source)' class='cursor-pointer' size='32'/>
+                    <IconLink v-if='job.source' @click='external(raw.data)' size='32'/>
                 </div>
             </div>
         </div>
@@ -26,10 +26,10 @@
 
 <script>
 import {
-    RefreshIcon,
-    BrandGithubIcon,
-    LinkIcon
-} from 'vue-tabler-icons';
+    IconRefresh,
+    IconBrandGithub,
+    IconLink
+} from '@tabler/icons-vue';
 
 export default {
     name: 'JobRaw',
@@ -85,9 +85,9 @@ export default {
         },
     },
     components: {
-        RefreshIcon,
-        BrandGithubIcon,
-        LinkIcon
+        IconRefresh,
+        IconBrandGithub,
+        IconLink
     }
 }
 </script>
diff --git a/api/web/src/components/Jobs.vue b/api/web/src/components/Jobs.vue
index ada1ba32..afef327c 100644
--- a/api/web/src/components/Jobs.vue
+++ b/api/web/src/components/Jobs.vue
@@ -20,8 +20,8 @@
                             <h3 class='card-title'>Jobs</h3>
 
                             <div class='ms-auto btn-list'>
-                                <SearchIcon @click='showFilter = !showFilter' class='cursor-pointer'/>
-                                <RefreshIcon @click='fetchJobs' class='cursor-pointer'/>
+                                <IconSearch @click='showFilter = !showFilter' class='cursor-pointer' size='32'/>
+                                <IconRefresh @click='fetchJobs' class='cursor-pointer' size='32'/>
                             </div>
                         </div>
                         <template v-if='showFilter'>
@@ -64,10 +64,10 @@
                                         <div v-on:click.stop.prevent='' class='btn-list'>
                                             <Download :auth='auth' :job='job' @login='$emit("login")' @perk='$emit("perk", $event)'/>
                                             <span v-on:click.stop.prevent='external(job.source)'>
-                                                <BrandGithubIcon class='cursor-pointer'/>
+                                                <IconBrandGithub class='cursor-pointer' size='32'/>
                                             </span>
                                             <span v-on:click.stop.prevent='$router.push(`/job/${job.id}/log`)' v-if='job.loglink'>
-                                                <NotesIcon class='cursor-pointer'/>
+                                                <IconNotes class='cursor-pointer' size='32'/>
                                             </span>
                                         </div>
                                     </td>
@@ -85,11 +85,11 @@
 
 <script>
 import {
-    SearchIcon,
-    BrandGithubIcon,
-    RefreshIcon,
-    NotesIcon
-} from 'vue-tabler-icons'
+    IconSearch,
+    IconBrandGithub,
+    IconRefresh,
+    IconNotes
+} from '@tabler/icons-vue'
 import LayerIcon from './util/LayerIcon.vue';
 import Status from './util/Status.vue';
 import Download from './util/Download.vue';
@@ -168,12 +168,12 @@ export default {
         }
     },
     components: {
-        SearchIcon,
+        IconSearch,
+        IconBrandGithub,
+        IconRefresh,
+        IconNotes,
         Download,
-        RefreshIcon,
         Status,
-        BrandGithubIcon,
-        NotesIcon,
         TablerLoading,
         TablerBreadCrumb,
         TableFooter,
diff --git a/api/web/src/components/Profile.vue b/api/web/src/components/Profile.vue
index e3fe5d5c..62fbfe2c 100644
--- a/api/web/src/components/Profile.vue
+++ b/api/web/src/components/Profile.vue
@@ -19,12 +19,12 @@
                                 <TablerLoading v-if='loading.cache' :inline='true' desc='Reset Cache'/>
                                 <TablerLoading v-if='loading.fabric' :inline='true' desc='Refresh Fabric'/>
 
-                                <span v-if='done.cache' @click='done.cache = false' class='cursor-pointer'><CheckIcon/>Cache Cleared</span>
-                                <span v-if='done.collections' @click='done.cache = false' class='cursor-pointer'><CheckIcon/>Collection Refresh Submitted</span>
-                                <span v-if='done.fabric' @click='done.cache = false' class='cursor-pointer'><CheckIcon/>Fabric Refresh Submitted</span>
+                                <span v-if='done.cache' @click='done.cache = false' class='cursor-pointer'><IconCheck size='32'/>Cache Cleared</span>
+                                <span v-if='done.collections' @click='done.cache = false' class='cursor-pointer'><IconCheck size='32'/>Collection Refresh Submitted</span>
+                                <span v-if='done.fabric' @click='done.cache = false' class='cursor-pointer'><IconCheck size='32'/>Fabric Refresh Submitted</span>
 
                                 <TablerDropdown>
-                                    <slot><SettingsIcon class='cursor-pointer mx-3'/></slot>
+                                    <slot><IconSettings class='cursor-pointer mx-3' size='32'/></slot>
                                     <template #dropdown>
                                         <div @click='fabric' class='cursor-pointer text-center my-2'>Refresh Fabric</div>
                                         <div @click='clear' class='cursor-pointer text-center my-2'>Clear Cache</div>
@@ -49,9 +49,9 @@
 
 <script>
 import {
-    SettingsIcon,
-    CheckIcon,
-} from 'vue-tabler-icons';
+    IconSettings,
+    IconCheck,
+} from '@tabler/icons-vue';
 
 import {
     TablerLoading,
@@ -128,11 +128,11 @@ export default {
         }
     },
     components: {
-        SettingsIcon,
+        IconSettings,
         TablerBreadCrumb,
         TablerLoading,
         TablerDropdown,
-        CheckIcon,
+        IconCheck,
     }
 }
 </script>
diff --git a/api/web/src/components/Run.vue b/api/web/src/components/Run.vue
index bdfbed62..d96be7d2 100644
--- a/api/web/src/components/Run.vue
+++ b/api/web/src/components/Run.vue
@@ -26,9 +26,9 @@
                             </h3>
 
                             <div class='ms-auto btn-list'>
-                                <span v-if='run.live' class="badge bg-green text-white">Live</span>
-                                <span v-if='run.github.sha' v-on:click.stop.prevent='github(run)' class="badge bg-blue text-white">Github</span>
-                                <RefreshIcon @click='fetchRun' class='cursor-pointer'/>
+                                <span v-if='run.live' class="badge bg-green text-white" style='height: 20px;'>Live</span>
+                                <span v-if='run.github.sha' v-on:click.stop.prevent='github(run)' style='height: 20px;' class="badge bg-blue text-white">Github</span>
+                                <IconRefresh @click='fetchRun' class='cursor-pointer' size='32'/>
                             </div>
                         </div>
 
@@ -109,8 +109,8 @@ import {
     TablerLoading
 } from '@tak-ps/vue-tabler';
 import {
-    RefreshIcon
-} from 'vue-tabler-icons';
+    IconRefresh
+} from '@tabler/icons-vue';
 
 export default {
     name: 'Run',
@@ -220,7 +220,7 @@ export default {
         TablerBreadCrumb,
         TablerLoading,
         TablerNone,
-        RefreshIcon,
+        IconRefresh,
         Status
     },
 }
diff --git a/api/web/src/components/Runs.vue b/api/web/src/components/Runs.vue
index 0b6351eb..5c21c4ac 100644
--- a/api/web/src/components/Runs.vue
+++ b/api/web/src/components/Runs.vue
@@ -20,7 +20,7 @@
                             <h3 class='card-title'>Source Runs</h3>
 
                             <div class='ms-auto btn-list'>
-                                <RefreshIcon @click='fetchRuns' class='cursor-pointer'/>
+                                <IconRefresh @click='fetchRuns' class='cursor-pointer' size='32'/>
                             </div>
                         </div>
 
@@ -64,8 +64,8 @@ import Status from './util/Status.vue';
 import moment from 'moment-timezone';
 import TableFooter from './util/TableFooter.vue';
 import {
-    RefreshIcon
-} from 'vue-tabler-icons';
+    IconRefresh
+} from '@tabler/icons-vue';
 import {
     TablerLoading,
     TablerBreadCrumb
@@ -127,7 +127,7 @@ export default {
     },
     components: {
         Status,
-        RefreshIcon,
+        IconRefresh,
         TableFooter,
         TablerLoading,
         TablerBreadCrumb,
diff --git a/api/web/src/components/cards/Exports.vue b/api/web/src/components/cards/Exports.vue
index b4db081f..3456bcd2 100644
--- a/api/web/src/components/cards/Exports.vue
+++ b/api/web/src/components/cards/Exports.vue
@@ -3,7 +3,7 @@
     <div class='card-header'>
         <h3 class='card-title'>Exports</h3>
         <div class='d-flex ms-auto btn-list'>
-            <RefreshIcon @click='fetchExports' class='cursor-pointer'/>
+            <IconRefresh @click='fetchExports' class='cursor-pointer' size='32'/>
         </div>
     </div>
     <TablerLoading v-if='loading' desc='Loading Exports'/>
@@ -42,8 +42,8 @@ import {
     TablerNone,
 } from '@tak-ps/vue-tabler';
 import {
-    RefreshIcon
-} from 'vue-tabler-icons';
+    IconRefresh
+} from '@tabler/icons-vue';
 
 export default {
     name: 'CardExports',
@@ -102,7 +102,7 @@ export default {
         }
     },
     components: {
-        RefreshIcon,
+        IconRefresh,
         TableFooter,
         TablerLoading,
         TablerNone,
diff --git a/api/web/src/components/job/JobSample.vue b/api/web/src/components/job/JobSample.vue
index c62b8073..114da8cd 100644
--- a/api/web/src/components/job/JobSample.vue
+++ b/api/web/src/components/job/JobSample.vue
@@ -6,7 +6,7 @@
     <template v-else>
         <div class='border rounded'>
             <div class='d-flex justify-content-center my-4'>
-                <InfoCircleIcon size='40'/>
+                <IconInfoCircle size='40'/>
             </div>
 
             <div class='text-center'>
@@ -49,8 +49,8 @@
 
 <script>
 import {
-    InfoCircleIcon
-} from 'vue-tabler-icons';
+    IconInfoCircle
+} from '@tabler/icons-vue';
 import {
     TablerLoading,
     TablerNone
@@ -94,7 +94,7 @@ export default {
     components: {
         TablerLoading,
         TablerNone,
-        InfoCircleIcon
+        IconInfoCircle
     }
 }
 </script>
diff --git a/api/web/src/components/profile/ProfileDefault.vue b/api/web/src/components/profile/ProfileDefault.vue
index 6c7ba237..6bba2915 100644
--- a/api/web/src/components/profile/ProfileDefault.vue
+++ b/api/web/src/components/profile/ProfileDefault.vue
@@ -27,7 +27,7 @@
                 <h3 class='card-title'>Contribution</h3>
 
                 <div class='d-flex ms-auto'>
-                    <RefreshIcon @click='$emit("refresh")' class='cursor-pointer'/>'
+                    <IconRefresh @click='$emit("refresh")' class='cursor-pointer' size='32'/>'
                 </div>
             </div>
             <div class='card-body row'>
@@ -54,43 +54,43 @@
                         "cursor-pointer": profile.level !== "basic",
                         "border border--gray-light": profile.level === "basic",
                     }'>
-                        <UserIcon class='w-100 text-center my-2' width='36' height='36'/>
+                        <IconUser class='w-100 text-center my-2' size='36'/>
 
                         <div class='text-center'>Basic</div>
                         <div class='text-center txt-s'>No Cost</div>
 
                         <div class='col-12 pt-2'>
-                            <CircleCheckIcon v-if='profile.level === "basic"' class='w-100 text-center'/>
-                            <CircleIcon v-else-if='hover === "basic"' class='w-100 text-center'/>
-                            <CircleDottedIcon v-else class='w-full text-center'/>
+                            <IconCircleCheck v-if='profile.level === "basic"' class='w-100 text-center' size='32'/>
+                            <IconCircle v-else-if='hover === "basic"' class='w-100 text-center' size='32'/>
+                            <IconCircleDotted v-else class='w-full text-center' size='32'/>
                         </div>
                     </div>
                     <div @click='oc("backer")' class='col-4 rounded py-2 my-2' @mouseover="hover = 'backer'" @mouseleave="hover = false" :class='{
                         "cursor-pointer": profile.level !== "backer",
                         "border border--gray-light": profile.level === "backer",
                     }'>
-                        <CoinIcon class='w-full text-center my-2' width="36" height="36"/>
+                        <IconCoin class='w-full text-center my-2' size='36'/>
                         <div class='text-center'>Backer</div>
                         <div class='text-center txt-s'>&gt;= $5</div>
 
                         <div class='col col--12 pt12'>
-                            <CircleCheckIcon v-if='profile.level === "backer"' class='w-full text-center' width="18" height="18"/>
-                            <CircleIcon v-else-if='hover === "backer"' class='w-full text-center' width="18" height="18"/>
-                            <CircleDottedIcon v-else class='w-full text-center' width="18" height="18"/>
+                            <IconCircleCheck v-if='profile.level === "backer"' class='w-full text-center' size='18'/>
+                            <IconCircle v-else-if='hover === "backer"' class='w-full text-center' size='18'/>
+                            <IconCircleDotted v-else class='w-full text-center' size='18'/>
                         </div>
                     </div>
                     <div @click='oc("sponsor")' class='col-4 rounded py-2 my-2' @mouseover="hover = 'sponsor'" @mouseleave="hover = false" :class='{
                         "cursor-pointer": profile.level !== "sponsor",
                         "border border--gray-light": profile.level === "sponsor",
                     }'>
-                        <TrophyIcon class='w-100 text-center my-2' width="36" height="36"/>
+                        <IconTrophy class='w-100 text-center my-2' size='36'/>
                         <div class='text-center'>Sponsor</div>
                         <div class='text-center txt-s'>&gt;= $100</div>
 
                         <div class='col col--12 pt12'>
-                            <CircleCheckIcon v-if='profile.level === "sponsor"' class='w-full text-center' width="18" height="18"/>
-                            <CircleIcon v-else-if='hover === "sponsor"' class='w-full text-center' width="18" height="18"/>
-                            <CircleDottedIcon v-else class='w-full text-center' width="18" height="18"/>
+                            <IconCircleCheck v-if='profile.level === "sponsor"' class='w-full text-center' size='18'/>
+                            <IconCircle v-else-if='hover === "sponsor"' class='w-full text-center' size='18'/>
+                            <IconCircleDotted v-else class='w-full text-center' size='18'/>
                         </div>
                     </div>
 
@@ -143,14 +143,14 @@ import {
 } from '@tak-ps/vue-tabler';
 
 import {
-    UserIcon,
-    CoinIcon,
-    RefreshIcon,
-    TrophyIcon,
-    CircleCheckIcon,
-    CircleDottedIcon,
-    CircleIcon
-} from 'vue-tabler-icons';
+    IconUser,
+    IconCoin,
+    IconRefresh,
+    IconTrophy,
+    IconCircleCheck,
+    IconCircleDotted,
+    IconCircle
+} from '@tabler/icons-vue';
 import Tokens from './Tokens.vue'
 import Exports from '../cards/Exports.vue'
 
@@ -193,13 +193,13 @@ export default {
     components: {
         Tokens,
         Exports,
-        UserIcon,
-        CoinIcon,
-        RefreshIcon,
-        TrophyIcon,
-        CircleCheckIcon,
-        CircleDottedIcon,
-        CircleIcon,
+        IconUser,
+        IconCoin,
+        IconRefresh,
+        IconTrophy,
+        IconCircleCheck,
+        IconCircleDotted,
+        IconCircle,
         TablerInput
     }
 }
diff --git a/api/web/src/components/profile/Tokens.vue b/api/web/src/components/profile/Tokens.vue
index d556be66..9a723987 100644
--- a/api/web/src/components/profile/Tokens.vue
+++ b/api/web/src/components/profile/Tokens.vue
@@ -3,8 +3,8 @@
     <div class='card-header'>
         <h3 class='card-title'>API Tokens:</h3>
         <div class='d-flex ms-auto btn-list'>
-            <PlusIcon @click='newToken.show = true' class='cursor-pointer'/>
-            <RefreshIcon @click='refresh' class='cursor-pointer'/>
+            <IconPlus @click='newToken.show = true' class='cursor-pointer' size='32'/>
+            <IconRefresh @click='refresh' class='cursor-pointer' size='32'/>
         </div>
     </div>
     <TablerLoading v-if='loading' desc='Loading Tokens'/>
@@ -15,14 +15,14 @@
                 <div class='col-12 row border rounded'>
                     <div class='col-12'>
                         <h2 class='subheader'>Create New Token</h2>
-                        <XIcon @click='newToken.show = false' class='cursor-pointer'/>
+                        <IconX @click='newToken.show = false' class='cursor-pointer' size='32'/>
                     </div>
 
                     <div class='col-10'>
                         <TablerInput label='Token Name' v-model='newToken.name' type='text' placeholder='Token Name'/>
                     </div>
                     <div class='col-2'>
-                        <CheckIcon @click='setToken' class='cursor-pointer'/>
+                        <IconCheck @click='setToken' class='cursor-pointer' size='32'/>
                     </div>
                 </div>
             </div>
@@ -30,7 +30,7 @@
         <template v-if='newToken.show && newToken.token'>
             <div class='col-12'>
                 <h2 class='txt-bold fl' v-text='newToken.name'></h2>
-                <XIcon @click='newToken.show = false' class='cursor-pointer'/>
+                <IconX @click='newToken.show = false' class='cursor-pointer' size='32'/>
             </div>
 
             <div class='col-12'>
@@ -51,7 +51,7 @@
                         <td>
                             <div class='d-flex'>
                                 <div class='ms-auto'>
-                                    <TrashIcon @click='deleteToken(token.id)' class='cursor-pointer'/>
+                                    <IconTrash @click='deleteToken(token.id)' class='cursor-pointer' size='32'/>
                                 </div>
                             </div>
                         </td>
@@ -70,12 +70,12 @@ import {
     TablerNone
 } from '@tak-ps/vue-tabler';
 import {
-    XIcon,
-    PlusIcon,
-    TrashIcon,
-    RefreshIcon,
-    CheckIcon
-} from 'vue-tabler-icons';
+    IconX,
+    IconPlus,
+    IconTrash,
+    IconRefresh,
+    IconCheck
+} from '@tabler/icons-vue';
 
 export default {
     name: 'Tokens',
@@ -148,12 +148,12 @@ export default {
         }
     },
     components: {
-        PlusIcon,
-        XIcon,
-        TrashIcon,
-        RefreshIcon,
+        IconX,
+        IconPlus,
+        IconTrash,
+        IconRefresh,
+        IconCheck,
         TablerInput,
-        CheckIcon,
         TablerNone,
         TablerLoading
     }
diff --git a/api/web/src/components/profile/admin/AdminCollection.vue b/api/web/src/components/profile/admin/AdminCollection.vue
index 14d09c6a..b7134e37 100644
--- a/api/web/src/components/profile/admin/AdminCollection.vue
+++ b/api/web/src/components/profile/admin/AdminCollection.vue
@@ -4,8 +4,8 @@
         <h2 class='card-title'>Collections</h2>
 
         <div class='ms-auto btn-list'>
-            <PlusIcon @click='collections.splice(0, 0, {})' class='cursor-pointer'/>
-            <RefreshIcon @click='refresh' class='cursor-pointer'/>
+            <IconPlus @click='collections.splice(0, 0, {})' class='cursor-pointer' size='32'/>
+            <IconRefresh @click='refresh' class='cursor-pointer' size='32'/>
         </div>
     </div>
 
@@ -32,9 +32,9 @@
 <script>
 import Collection from './Collection.vue';
 import {
-    PlusIcon,
-    RefreshIcon,
-} from 'vue-tabler-icons';
+    IconPlus,
+    IconRefresh,
+} from '@tabler/icons-vue';
 
 import {
     TablerLoading
@@ -74,8 +74,8 @@ export default {
     },
     components: {
         TablerLoading,
-        PlusIcon,
-        RefreshIcon,
+        IconPlus,
+        IconRefresh,
         Collection
     }
 }
diff --git a/api/web/src/components/profile/admin/AdminOverrides.vue b/api/web/src/components/profile/admin/AdminOverrides.vue
index 4c71e3c8..c8fd5cb6 100644
--- a/api/web/src/components/profile/admin/AdminOverrides.vue
+++ b/api/web/src/components/profile/admin/AdminOverrides.vue
@@ -4,12 +4,12 @@
         <h2 class='card-title'>Level Overrides</h2>
 
         <div class='ms-auto btn-list'>
-            <SearchIcon @click='showFilter = true' v-if='!showFilter' class='cursor-pointer'/>
-            <XIcon @click='showFilter = false' v-else class='cursor-pointer'/>
+            <IconSearch @click='showFilter = true' v-if='!showFilter' class='cursor-pointer' size='32'/>
+            <IconX @click='showFilter = false' v-else class='cursor-pointer' size='32'/>
 
-            <PlusIcon @click='addLevel' :disabled='add' class='cursor-pointer'/>
+            <IconPlus @click='addLevel' :disabled='add' class='cursor-pointer' size='32'/>
 
-            <RefreshIcon @click='getLevels' class='cursor-pointer'/>
+            <IconRefresh @click='getLevels' class='cursor-pointer' size='32'/>
         </div>
     </div>
 
@@ -79,7 +79,7 @@
                         <td>
                             <div class='d-flex'>
                                 <div class='ms-auto btn-list'>
-                                    <TrashIcon @click='deleteLevel(level)' class='cursor-pointer'/>
+                                    <IconTrash @click='deleteLevel(level)' class='cursor-pointer' size='32'/>
                                 </div>
                             </div>
                         </td>
@@ -95,12 +95,12 @@
 <script>
 import TableFooter from '../../util/TableFooter.vue';
 import {
-    SearchIcon,
-    PlusIcon,
-    RefreshIcon,
-    TrashIcon,
-    XIcon
-} from 'vue-tabler-icons';
+    IconSearch,
+    IconPlus,
+    IconRefresh,
+    IconTrash,
+    IconX
+} from '@tabler/icons-vue';
 
 import {
     TablerInput,
@@ -192,16 +192,16 @@ export default {
         },
     },
     components: {
-        PlusIcon,
-        SearchIcon,
-        RefreshIcon,
-        TrashIcon,
+        IconSearch,
+        IconPlus,
+        IconRefresh,
+        IconTrash,
+        IconX,
         TablerNone,
         TablerInput,
         TablerEnum,
         TablerLoading,
         TableFooter,
-        XIcon,
     }
 }
 </script>
diff --git a/api/web/src/components/profile/admin/AdminUser.vue b/api/web/src/components/profile/admin/AdminUser.vue
index 497d51f4..a1c53377 100644
--- a/api/web/src/components/profile/admin/AdminUser.vue
+++ b/api/web/src/components/profile/admin/AdminUser.vue
@@ -4,10 +4,10 @@
         <h2 class='card-title'>Users</h2>
 
         <div class='d-flex ms-auto btn-list'>
-            <SearchIcon v-if='!showFilter' @click='showFilter = true' class='cursor-pointer'/>
-            <XIcon v-else @click='showFilter = false' class='cursor-pointer'/>
+            <IconSearch v-if='!showFilter' @click='showFilter = true' class='cursor-pointer' size='32'/>
+            <IconX v-else @click='showFilter = false' class='cursor-pointer' size='32'/>
 
-            <RefreshIcon @click='getUsers' class='cursor-pointer'/>
+            <IconRefresh @click='getUsers' class='cursor-pointer' size='32'/>
         </div>
     </div>
 
@@ -70,7 +70,7 @@
                                 <div class='col-12 d-flex'>
                                     <h3 class='subheader'>User Settings</h3>
                                     <div class='ms-auto'>
-                                        <RefreshIcon @click='getUser(user)' class='cursor-pointer'/>
+                                        <IconRefresh @click='getUser(user)' class='cursor-pointer' size='32'/>
                                     </div>
                                 </div>
                                <div class='col-12' >
@@ -108,10 +108,10 @@ import {
 } from '@tak-ps/vue-tabler';
 
 import {
-    RefreshIcon,
-    SearchIcon,
-    XIcon,
-} from 'vue-tabler-icons';
+    IconRefresh,
+    IconSearch,
+    IconX,
+} from '@tabler/icons-vue';
 
 export default {
     name: 'AdminUser',
@@ -224,9 +224,9 @@ export default {
         TablerToggle,
         TablerEnum,
         TablerInput,
-        RefreshIcon,
-        SearchIcon,
-        XIcon,
+        IconRefresh,
+        IconSearch,
+        IconX,
     }
 }
 </script>
diff --git a/api/web/src/components/util/MustLogin.vue b/api/web/src/components/util/MustLogin.vue
index d7f6619e..a676804d 100644
--- a/api/web/src/components/util/MustLogin.vue
+++ b/api/web/src/components/util/MustLogin.vue
@@ -3,7 +3,7 @@
     <button type="button" class="btn-close" @click='close' aria-label="Close"></button>
     <div class="modal-status bg-yellow"></div>
     <div class="modal-body text-center py-4">
-        <UserExclamationIcon size='60'/>
+        <IconUserExclamation size='60'/>
         <h3>Login Required</h3>
 
         <p class='my6'>
@@ -28,13 +28,13 @@ import {
     TablerModal 
 } from '@tak-ps/vue-tabler';
 import {
-    UserExclamationIcon
-} from 'vue-tabler-icons';
+    IconUserExclamation
+} from '@tabler/icons-vue';
 
 export default {
     name: 'MustLogin',
     components: {
-        UserExclamationIcon,
+        IconUserExclamation,
         TablerModal
     }
 }

From 19de66ef7fdd8f8ee98ba805fefd0c8b3aa9084b Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Tue, 26 Mar 2024 14:46:20 -0600
Subject: [PATCH 2/2] Update App

---
 api/web/src/pages/App.vue | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/api/web/src/pages/App.vue b/api/web/src/pages/App.vue
index 327647f6..055d3fe2 100644
--- a/api/web/src/pages/App.vue
+++ b/api/web/src/pages/App.vue
@@ -13,15 +13,15 @@
             <div class='ms-auto'>
                 <div class='btn-list'>
                     <a href="/docs" class="btn btn-dark" target="_blank" rel="noreferrer">
-                        <HelpIcon/>
+                        <IconHelp size='32'/>
                     </a>
                     <a v-if='false' href="/map" class="btn btn-dark" target="_blank" rel="noreferrer">
-                        <MapIcon/>
+                        <IconMap size='32'/>
                     </a>
 
                     <div class='dropdown'>
                         <div type="button" id="userProfileButton" data-bs-toggle="dropdown" aria-expanded="false" class='btn btn-dark'>
-                            <MenuIcon/>
+                            <IconMenu size='32'/>
                         </div>
                         <ul class="dropdown-menu" aria-labelledby='userProfileButton'>
                             <a @click='$router.push("/run")' class="dropdown-item cursor-pointer">Runs</a>
@@ -34,7 +34,7 @@
                     <a class="btn btn-dark" target="_blank" rel="noreferrer">
                         <div v-if='auth.username' class='dropdown'>
                             <div type='button' id="userProfileButton" data-bs-toggle="dropdown" aria-expanded="false">
-                                <UserIcon/>
+                                <IconUser size='32'/>
                             </div>
                             <ul class="dropdown-menu" aria-labelledby='userProfileButton'>
                                 <a @click='$router.push("/profile")' class="cursor-pointer dropdown-item">Profile</a>
@@ -48,7 +48,7 @@
                         </div>
 
 
-                        <LoginIcon @click='$router.push("/login")' v-else/>
+                        <IconLogin @click='$router.push("/login")' v-else size='32'/>
                     </a>
                 </div>
             </div>
@@ -69,12 +69,12 @@ import '@tabler/core/dist/js/tabler.min.js';
 import '@tabler/core/dist/css/tabler.min.css';
 import Err from '../components/Err.vue'
 import {
-    HelpIcon,
-    MenuIcon,
-    UserIcon,
-    LoginIcon,
-    MapIcon
-} from 'vue-tabler-icons'
+    IconHelp,
+    IconMenu,
+    IconUser,
+    IconLogin,
+    IconMap
+} from '@tabler/icons-vue'
 import {
     TablerError
 } from '@tak-ps/vue-tabler';
@@ -154,11 +154,11 @@ export default {
     },
     components: {
         Err,
-        UserIcon,
-        MenuIcon,
-        LoginIcon,
-        MapIcon,
-        HelpIcon,
+        IconHelp,
+        IconMenu,
+        IconUser,
+        IconLogin,
+        IconMap,
         TablerError
     }
 }