From bec83c377e0ced0a1091dc61e608dac0f05d910c Mon Sep 17 00:00:00 2001
From: Vishal Mahajan <vishal423@gmail.com>
Date: Mon, 3 May 2021 01:55:04 +0530
Subject: [PATCH] chore: Improve tailwind integration and theme neutralization

---
 generators/client/files.js                    |  1 +
 .../webapp/app/components/Button.svelte.ejs   | 16 +++--
 .../app/components/CheckboxControl.svelte.ejs |  2 +-
 .../webapp/app/components/Icon.svelte.ejs     | 11 ++++
 .../app/components/InputControl.svelte.ejs    | 12 ++--
 .../app/components/SelectControl.svelte.ejs   | 19 +++---
 .../components/account/Password.svelte.ejs    |  4 +-
 .../account/PasswordConfirm.svelte.ejs        |  6 +-
 .../UserDeleteModal.svelte.ejs                |  9 ++-
 .../admin/user-management/UserForm.svelte.ejs |  8 +--
 .../UserListActions.svelte.ejs                | 10 ++--
 .../components/layout/AccountMenu.svelte.ejs  | 17 +++---
 .../components/layout/AdminMenu.svelte.ejs    | 17 +++---
 .../app/components/layout/Footer.svelte.ejs   |  5 +-
 .../app/components/layout/MenuItem.svelte.ejs |  2 +-
 .../app/components/layout/NavItem.svelte.ejs  |  7 ++-
 .../app/components/layout/Navbar.svelte.ejs   |  6 +-
 .../layout/ThemeModeToggle.svelte.ejs         | 10 ++--
 .../components/table/Pagination.svelte.ejs    |  9 +--
 .../app/components/table/Sort.svelte.ejs      |  5 +-
 .../user-management/[id]/view.svelte.ejs      |  5 +-
 .../admin/user-management/index.svelte.ejs    |  4 +-
 .../main/webapp/app/routes/login.svelte.ejs   |  4 +-
 .../src/main/webapp/app/tailwind.css.ejs      | 59 -------------------
 .../templates/svelte/tailwind.config.js.ejs   |  2 +-
 25 files changed, 106 insertions(+), 144 deletions(-)
 create mode 100644 generators/client/templates/svelte/src/main/webapp/app/components/Icon.svelte.ejs

diff --git a/generators/client/files.js b/generators/client/files.js
index da91ef4ac..8684ba0b4 100644
--- a/generators/client/files.js
+++ b/generators/client/files.js
@@ -147,6 +147,7 @@ const svelteFiles = {
 				'Alert.svelte',
 				'Button.svelte',
 				'CheckboxControl.svelte',
+				'Icon.svelte',
 				'InputControl.svelte',
 				'Modal.svelte',
 				'SelectControl.svelte',
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/Button.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/Button.svelte.ejs
index 58d3664e4..1de0811bf 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/Button.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/Button.svelte.ejs
@@ -6,11 +6,17 @@
 
 <button
 	on:click|preventDefault
-	class="my-4 focus:outline-none focus:ring m-auto btn {classes}"
-	class:btn-primary="{role === 'primary'}"
-	class:btn-secondary="{role === 'secondary'}"
-	class:btn-danger="{role === 'danger'}"
-	class:btn-action="{role === 'action'}"
+	class="my-4 focus:outline-none focus:ring m-auto py-2 px-6 font-bold rounded transition-colors duration-200 disabled:opacity-75 disabled:pointer-events-none {role ===
+'primary'
+		? 'bg-primary-700 text-white dark:bg-primary-500 dark:text-gray-100 hover:bg-primary-800 dark:hover:bg-primary-400 focus:ring-primary-500 '
+		: ''} {role === 'neutral'
+		? 'bg-gray-500 dark:bg-gray-300 text-white dark:text-gray-800 hover:bg-gray-700 dark:hover:bg-gray-500 focus:ring-gray-500 '
+		: ''} {role === 'danger'
+		? 'bg-red-700 dark:bg-red-500 text-white hover:bg-red-800 dark:hover:bg-red-400 focus:ring-red-500 '
+		: ''} {role === 'action'
+		? 'py-2 px-2 font-semibold px-3 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100 focus:ring-gray-500 '
+		: ''}
+{classes}"
 	disabled="{disabled}"
 	{...$$restProps}
 >
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/CheckboxControl.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/CheckboxControl.svelte.ejs
index 39f750116..f9ef650d3 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/CheckboxControl.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/CheckboxControl.svelte.ejs
@@ -16,7 +16,7 @@
 	<input
 		type="checkbox"
 		checked="{checked}"
-		class="appearance-none w-5 h-5 mr-2 border-2 border-gray-200 dark:border-gray-700 checked:border-transparent rounded focus:outline-none focus:ring-2 align-middle bg-transparent bg-no-repeat bg-center checked:bg-blue-600 dark:checked:bg-blue-500 {classes}"
+		class="appearance-none w-5 h-5 mr-2 border-2 border-gray-200 dark:border-gray-700 checked:border-transparent rounded focus:outline-none focus:ring-2 focus:ring-primary-500 align-middle bg-transparent bg-no-repeat bg-center checked:bg-primary-600 dark:checked:bg-primary-500 {classes}"
 		group="{group}"
 		value="{value}"
 		on:change
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/Icon.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/Icon.svelte.ejs
new file mode 100644
index 000000000..a2862169f
--- /dev/null
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/Icon.svelte.ejs
@@ -0,0 +1,11 @@
+<script>
+	import Icon from 'fa-svelte'
+
+	export let classes = ''
+	export let icon
+</script>
+
+<Icon
+	class="w-4 h-4 overflow-visible inline-block fill-current {classes}"
+	icon="{icon}"
+/>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/InputControl.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/InputControl.svelte.ejs
index e91ad1e3f..5b52353df 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/InputControl.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/InputControl.svelte.ejs
@@ -1,8 +1,8 @@
 <script>
 	import { createEventDispatcher, afterUpdate } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 
+	import Icon from './Icon.svelte'
 	import { validate, createValidator } from '../utils/validator.js'
 
 	export let value = ''
@@ -68,8 +68,8 @@
 		class:text-xs="{focusedOrContainsValue}"
 		class:text-gray-700="{!focused}"
 		class:dark:text-gray-400="{!focused}"
-		class:text-blue-700="{focusedAndValidOrPristine}"
-		class:dark:text-blue-500="{focusedAndValidOrPristine}"
+		class:text-primary-700="{focusedAndValidOrPristine}"
+		class:dark:text-primary-500="{focusedAndValidOrPristine}"
 		class:text-red-600="{dirtyAndInvalid && focused}"
 		class:dark:text-red-500="{dirtyAndInvalid && focused}"
 		for="{idVal}"
@@ -81,8 +81,8 @@
 		class:border-2="{focused}"
 		class:border-gray-400="{pristineOrValid}"
 		class:dark:border-gray-700="{pristineOrValid}"
-		class:border-blue-600="{focusedAndValidOrPristine}"
-		class:dark:border-blue-500="{focusedAndValidOrPristine}"
+		class:border-primary-600="{focusedAndValidOrPristine}"
+		class:dark:border-primary-500="{focusedAndValidOrPristine}"
 		class:border-red-600="{dirtyAndInvalid}"
 		class:dark:border-red-500="{dirtyAndInvalid}"
 		type="{type}"
@@ -101,7 +101,7 @@
 	<slot message="{message}" dirty="{dirty}" valid="{valid}">
 		{#if dirty && !valid}
 			<div data-test="{name}-error" class="flex items-center">
-				<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+				<Icon classes="mr-2" icon="{faExclamationCircle}" />
 				{message}
 			</div>
 		{:else}&nbsp;{/if}
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/SelectControl.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/SelectControl.svelte.ejs
index 863eec5e4..bda23cd90 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/SelectControl.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/SelectControl.svelte.ejs
@@ -1,9 +1,9 @@
 <script>
 	import { createEventDispatcher, afterUpdate } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 	import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown'
 
+	import Icon from './Icon.svelte'
 	import CheckboxControl from './CheckboxControl.svelte'
 
 	export let name = ''
@@ -75,8 +75,8 @@
 		class:text-xs="{focusedOrContainsValue || isOpen}"
 		class:text-gray-700="{!focused}"
 		class:dark:text-gray-200="{!focused}"
-		class:text-blue-700="{focusedAndValidOrPristine}"
-		class:dark:text-blue-500="{focusedAndValidOrPristine}"
+		class:text-primary-700="{focusedAndValidOrPristine}"
+		class:dark:text-primary-500="{focusedAndValidOrPristine}"
 		class:text-red-600="{dirtyAndInvalid && (focused || isOpen)}"
 		class:dark:text-red-500="{dirtyAndInvalid && (focused || isOpen)}"
 		for="{name + randomSuffix}"
@@ -88,9 +88,9 @@
 		class:border-2="{focused || isOpen}"
 		class:border-gray-400="{pristineOrValid}"
 		class:dark:border-gray-700="{pristineOrValid}"
-		class:border-blue-600="{focusedAndValidOrPristine ||
+		class:border-primary-600="{focusedAndValidOrPristine ||
 			(isOpen && !dirtyAndInvalid)}"
-		class:dark:border-blue-500="{focusedAndValidOrPristine ||
+		class:dark:border-primary-500="{focusedAndValidOrPristine ||
 			(isOpen && !dirtyAndInvalid)}"
 		class:border-red-600="{dirtyAndInvalid}"
 		class:dark:border-red-500="{dirtyAndInvalid}"
@@ -121,7 +121,7 @@
 			on:click|preventDefault="{() => (isOpen = !isOpen)}"
 		>
 			<Icon
-				class="fa-icon {isOpen ? 'opacity-100' : 'opacity-70'}"
+				classes="{isOpen ? 'opacity-100' : 'opacity-70'}"
 				icon="{faCaretDown}"
 			/>
 		</button>
@@ -138,12 +138,13 @@
 		data-test="{name}-options"
 		class:hidden="{!isOpen}"
 		class="absolute left-0 w-full py-2 bg-white dark:bg-gray-800 border-b-2 rounded shadow-md border-2 z-10 border-t-0 rounded-tl-none rounded-tr-none"
-		class:border-blue-600="{focusedAndValidOrPristine || !dirtyAndInvalid}"
+		class:border-primary-600="{focusedAndValidOrPristine ||
+			!dirtyAndInvalid}"
 		class:border-red-600="{dirtyAndInvalid}"
 	>
 		{#each options as option (option.name)}
 			<div
-				class="block px-3 py-1 rounded-none font-normal hover:text-white dark:hover:text-gray-800 text-gray-800 dark:text-gray-200 hover:bg-blue-600 dark:hover:bg-blue-500"
+				class="block px-3 py-1 rounded-none font-normal hover:text-white dark:hover:text-gray-800 text-gray-800 dark:text-gray-200 hover:bg-primary-600 dark:hover:bg-primary-500"
 			>
 				<CheckboxControl
 					checked="{value.includes(option.value)}"
@@ -160,7 +161,7 @@
 	<slot message="{message}" dirty="{dirty}" valid="{valid}">
 		{#if dirty && !valid}
 			<div data-test="{name}-error" class="flex items-center">
-				<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+				<Icon classes="mr-2" icon="{faExclamationCircle}" />
 				{message}
 			</div>
 		{:else}&nbsp;{/if}
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/account/Password.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/account/Password.svelte.ejs
index 144d3c811..746b1654f 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/account/Password.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/account/Password.svelte.ejs
@@ -1,8 +1,8 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 
 	import InputControl from '../InputControl.svelte'
+	import Icon from '../Icon.svelte'
 
 	export let name = 'password'
 	export let label = 'Password'
@@ -38,7 +38,7 @@
 	<slot message="{message}" dirty="{dirty}" valid="{valid}">
 		{#if dirty && !valid}
 			<div data-test="{name}-error" class="flex items-center">
-				<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+				<Icon classes="mr-2" icon="{faExclamationCircle}" />
 				{message}
 			</div>
 		{:else}&nbsp;{/if}
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/account/PasswordConfirm.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/account/PasswordConfirm.svelte.ejs
index ea825044c..44f15808f 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/account/PasswordConfirm.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/account/PasswordConfirm.svelte.ejs
@@ -1,9 +1,9 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle'
 
 	import Password from './Password.svelte'
+	import Icon from '../Icon.svelte'
 
 	export let label = 'Password'
 	export let name = 'password'
@@ -59,10 +59,10 @@
 >
 	<div data-test="{name}Confirm-error" class="flex items-center">
 		{#if confirmPasswordMismatch}
-			<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+			<Icon classes="mr-2" icon="{faExclamationCircle}" />
 			Password and its confirmation do not match
 		{:else if dirty && !valid}
-			<Icon class="fa-icon mr-2" icon="{faExclamationCircle}" />
+			<Icon classes="mr-2" icon="{faExclamationCircle}" />
 			{message}
 		{:else}&nbsp;{/if}
 	</div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserDeleteModal.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserDeleteModal.svelte.ejs
index 9fde48605..387b60224 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserDeleteModal.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserDeleteModal.svelte.ejs
@@ -1,11 +1,10 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-
-	import Icon from 'fa-svelte'
 	import { faBan } from '@fortawesome/free-solid-svg-icons/faBan'
 	import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt'
 
 	import Button from '../../Button.svelte'
+	import Icon from '../../Icon.svelte'
 	import Modal from '../../Modal.svelte'
 
 	export let id = ''
@@ -17,11 +16,11 @@
 	<div slot="footer">
 		<Button
 			name="cancelBtn"
-			role="secondary"
+			role="neutral"
 			classes="mr-4"
 			on:click="{() => dispatch('close')}"
 		>
-			<Icon class="fa-icon mr-2" icon="{faBan}" />Cancel
+			<Icon classes="mr-2" icon="{faBan}" />Cancel
 		</Button>
 
 		<Button
@@ -29,7 +28,7 @@
 			role="danger"
 			on:click="{() => dispatch('deleteUser', { id })}"
 		>
-			<Icon class="fa-icon mr-2" icon="{faTrashAlt}" />Delete
+			<Icon classes="mr-2" icon="{faTrashAlt}" />Delete
 		</Button>
 	</div>
 </Modal>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserForm.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserForm.svelte.ejs
index e8885c71b..a4442084c 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserForm.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserForm.svelte.ejs
@@ -1,10 +1,10 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faBan } from '@fortawesome/free-solid-svg-icons/faBan'
 	import { faSave } from '@fortawesome/free-solid-svg-icons/faSave'
 
 	import Button from '../../Button.svelte'
+	import Icon from '../../Icon.svelte'
 	import InputControl from '../../InputControl.svelte'
 	import SelectControl from '../../SelectControl.svelte'
 	import CheckboxControl from '../../CheckboxControl.svelte'
@@ -177,10 +177,10 @@
 		<div class="mr-4">
 			<Button
 				name="cancelBtn"
-				role="secondary"
+				role="neutral"
 				on:click="{() => dispatch('cancel')}"
 			>
-				<Icon class="fa-icon mr-2" icon="{faBan}" />Cancel
+				<Icon classes="mr-2" icon="{faBan}" />Cancel
 			</Button>
 		</div>
 		<div>
@@ -190,7 +190,7 @@
 				on:click="{() => dispatch('saveorupdate', { ...user })}"
 				disabled="{!validForm}"
 			>
-				<Icon class="fa-icon mr-2" icon="{faSave}" />
+				<Icon classes="mr-2" icon="{faSave}" />
 				{user.id ? 'Update ' : 'Create '}
 				user account
 			</Button>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserListActions.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserListActions.svelte.ejs
index a09182853..b4a670f66 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserListActions.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/admin/user-management/UserListActions.svelte.ejs
@@ -1,5 +1,4 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { faEye } from '@fortawesome/free-solid-svg-icons/faEye'
 	import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt'
 	import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt'
@@ -7,6 +6,7 @@
 	import { faToggleOff } from '@fortawesome/free-solid-svg-icons/faToggleOff'
 
 	import Button from '../../Button.svelte'
+	import Icon from '../../Icon.svelte'
 	import { createEventDispatcher } from 'svelte'
 
 	export let user
@@ -40,7 +40,7 @@
 			})
 		}}"
 	>
-		<Icon class="fa-icon" icon="{activationIcon}" />
+		<Icon icon="{activationIcon}" />
 	</Button>
 	<Button
 		name="viewUserBtn"
@@ -53,7 +53,7 @@
 				id: user.login,
 			})}"
 	>
-		<Icon class="fa-icon" icon="{faEye}" />
+		<Icon icon="{faEye}" />
 	</Button>
 	<Button
 		name="editUserBtn"
@@ -67,7 +67,7 @@
 				id: user.login,
 			})}"
 	>
-		<Icon class="fa-icon" icon="{faPencilAlt}" />
+		<Icon icon="{faPencilAlt}" />
 	</Button>
 	<Button
 		name="deleteUserBtn"
@@ -81,6 +81,6 @@
 				id: user.login,
 			})}"
 	>
-		<Icon class="fa-icon" icon="{faTrashAlt}" />
+		<Icon icon="{faTrashAlt}" />
 	</Button>
 </div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/layout/AccountMenu.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/layout/AccountMenu.svelte.ejs
index 63909a6a5..e2ec92a34 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/layout/AccountMenu.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/layout/AccountMenu.svelte.ejs
@@ -1,12 +1,13 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { goto } from '@sapper/app'
 	import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons/faSignOutAlt'
 	import { faLock } from '@fortawesome/free-solid-svg-icons/faLock'
 	import { faWrench } from '@fortawesome/free-solid-svg-icons/faWrench'
 	import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown'
 	import { faUser } from '@fortawesome/free-solid-svg-icons/faUser'
+
 	import MenuItem from './MenuItem.svelte'
+	import Icon from '../Icon.svelte'
 
 	import auth from '../auth/auth-store.js'
 <%_ if (authenticationType === 'session') { _%>
@@ -37,7 +38,7 @@
 	<div
 		class="px-2 py-1 sm:py-0 flex justify-start items-center rounded
 			sm:rounded-none font-semibold hover:text-white hover:bg-gray-700
-			sm:hover:bg-transparent focus:outline-none focus:ring"
+			sm:hover:bg-transparent focus:outline-none focus:ring focus:ring-primary-500"
 	>
 		<button
 			aria-label="Account Menu"
@@ -46,12 +47,12 @@
 			class="sm:z-10 sm:h-8 sm:w-8 sm:flex sm:justify-center
 				sm:items-center sm:rounded-full sm:overflow-hidden border-0
 				sm:border-2 sm:border-gray-600 text-gray-400 focus:text-white
-				focus:outline-none focus:border-white focus:ring"
+				focus:outline-none focus:border-white focus:ring focus:ring-primary-500"
 		>
-			<Icon class="fa-icon" icon="{faUser}" />
+			<Icon icon="{faUser}" />
 			<span class="sm:hidden">{$auth.login}</span>
 			<span class="sm:absolute sm:pl-12">
-				<Icon class="fa-icon" icon="{faCaretDown}" />
+				<Icon icon="{faCaretDown}" />
 			</span>
 		</button>
 	</div>
@@ -72,18 +73,18 @@
 			testId="svlChgPwdLink"
 			link="/account/password"
 			on:click="{() => (isOpen = false)}"
-			><Icon class="fa-icon sm:mr-1" icon="{faLock}" />
+			><Icon classes="sm:mr-1" icon="{faLock}" />
 			Change Password
 		</MenuItem>
 		<MenuItem
 			testId="svlSettingsLink"
 			link="/account/settings"
 			on:click="{() => (isOpen = false)}"
-			><Icon class="fa-icon sm:mr-1" icon="{faWrench}" />
+			><Icon classes="sm:mr-1" icon="{faWrench}" />
 			Settings
 		</MenuItem>
 		<MenuItem testId="svlSignoutLink" link="/" on:click="{logout}"
-			><Icon class="fa-icon sm:mr-1" icon="{faSignOutAlt}" />
+			><Icon classes="sm:mr-1" icon="{faSignOutAlt}" />
 			Sign out
 		</MenuItem>
 	</div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/layout/AdminMenu.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/layout/AdminMenu.svelte.ejs
index 45c880e14..dd3973239 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/layout/AdminMenu.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/layout/AdminMenu.svelte.ejs
@@ -1,33 +1,30 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { faUsersCog } from '@fortawesome/free-solid-svg-icons/faUsersCog'
 	import { faUsers } from '@fortawesome/free-solid-svg-icons/faUsers'
 	import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown'
+
 	import MenuItem from './MenuItem.svelte'
+	import Icon from '../Icon.svelte'
 
 	let isOpen = false
 </script>
 
 <div class="px-2 pt-2 pb-2 sm:p-0 relative sm:flex sm:mr-2">
 	<div
-		class="px-2 py-1 sm:py-0 flex justify-start items-center rounded
-			sm:rounded-none font-semibold hover:text-white hover:bg-gray-700
-			sm:hover:bg-transparent focus:outline-none focus:ring"
+		class="px-2 py-1 sm:py-0 flex justify-start items-center rounded sm:rounded-none font-semibold hover:text-white hover:bg-gray-700 sm:hover:bg-transparent focus:outline-none focus:ring focus:ring-primary-500"
 	>
 		<button
 			aria-label="Administration Menu"
 			data-test="svlAdminLink"
 			on:click="{() => (isOpen = !isOpen)}"
-			class="sm:h-8 sm:px-2 sm:w-auto sm:flex sm:justify-center focus:font-semibold
-				sm:items-center sm:rounded border-0 text-gray-400 focus:text-white
-				focus:outline-none focus:ring"
+			class="sm:h-8 sm:px-2 sm:w-auto sm:flex sm:justify-center focus:font-semibold sm:items-center sm:rounded border-0 text-gray-400 focus:text-white focus:outline-none focus:ring focus:ring-primary-500"
 		>
 			<span class="leading-none">
-				<Icon class="fa-icon sm:mr-1" icon="{faUsersCog}" />
+				<Icon classes="sm:mr-1" icon="{faUsersCog}" />
 			</span>
 			<span>Administration</span>
 			<span>
-				<Icon class="ml-1 fa-icon" icon="{faCaretDown}" />
+				<Icon classes="ml-1" icon="{faCaretDown}" />
 			</span>
 		</button>
 	</div>
@@ -48,7 +45,7 @@
 			link="/admin/user-management"
 			on:click="{() => (isOpen = false)}"
 		>
-			<Icon class="fa-icon sm:mr-1" icon="{faUsers}" />
+			<Icon classes="sm:mr-1" icon="{faUsers}" />
 			User Management
 		</MenuItem>
 	</div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/layout/Footer.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/layout/Footer.svelte.ejs
index 4c6f001b7..3a02bbe0e 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/layout/Footer.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/layout/Footer.svelte.ejs
@@ -1,6 +1,7 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart'
+
+	import Icon from '../Icon.svelte'
 </script>
 
 <footer
@@ -14,7 +15,7 @@
 	<div class="text-base mt-1">
 		<p>
 			Made with
-			<Icon class="fa-icon text-red-700" icon="{faHeart}" />
+			<Icon classes="text-red-700" icon="{faHeart}" />
 			by
 			<a
 				href="https://twitter.com/vishal423"
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/layout/MenuItem.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/layout/MenuItem.svelte.ejs
index c113cd0b0..ef1e0b8a5 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/layout/MenuItem.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/layout/MenuItem.svelte.ejs
@@ -5,7 +5,7 @@
 
 <a
 	data-test="{testId}"
-	class="block px-2 sm:px-4 py-1 rounded sm:rounded-none font-semibold sm:font-normal text-gray-400 hover:text-white hover:bg-gray-700 sm:text-gray-800 sm:dark:text-gray-100 sm:hover:bg-blue-600 sm:dark:hover:bg-blue-500"
+	class="block px-2 sm:px-4 py-1 rounded sm:rounded-none font-semibold sm:font-normal text-gray-400 hover:text-white hover:bg-gray-700 sm:text-gray-800 sm:dark:text-gray-100 sm:hover:bg-primary-600 sm:dark:hover:bg-primary-500"
 	href="{link}"
 	on:click><slot /></a
 >
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/layout/NavItem.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/layout/NavItem.svelte.ejs
index 77a6a077d..e2c21eb4a 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/layout/NavItem.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/layout/NavItem.svelte.ejs
@@ -1,7 +1,8 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { stores } from '@sapper/app'
 
+	import Icon from '../Icon.svelte'
+
 	export let icon
 	export let label
 	export let route
@@ -19,9 +20,9 @@
 		href="{route}"
 		on:click
 		class="flex items-center px-2 py-1 sm:py-1 rounded font-semibold
-			hover:text-white hover:bg-gray-700 focus:outline-none focus:ring {textClass}"
+			hover:text-white hover:bg-gray-700 focus:outline-none focus:ring focus:ring-primary-500 {textClass}"
 	>
-		<Icon class="fa-icon mr-1" icon="{icon}" />
+		<Icon classes="mr-1" icon="{icon}" />
 		{label}</a
 	>
 </div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/layout/Navbar.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/layout/Navbar.svelte.ejs
index 295a21e85..9f1d3cdf4 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/layout/Navbar.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/layout/Navbar.svelte.ejs
@@ -1,10 +1,10 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { faBars } from '@fortawesome/free-solid-svg-icons/faBars'
 	import { faSignInAlt } from '@fortawesome/free-solid-svg-icons/faSignInAlt'
 	import { faUserPlus } from '@fortawesome/free-solid-svg-icons/faUserPlus'
 
 	import applogo from 'images/logo-jhipster.png'
+	import Icon from '../Icon.svelte'
 	import NavItem from './NavItem.svelte'
 	import auth from '../auth/auth-store.js'
 	import AccountMenu from './AccountMenu.svelte'
@@ -51,10 +51,10 @@
 					type="button"
 					aria-label="Toggle Navigation"
 					class="block px-2 py-1 hover:text-white
-						focus:outline-none focus:ring rounded
+						focus:outline-none focus:ring focus:ring-primary-500 rounded
 						focus:text-white text-gray-400 leading-none"
 				>
-					<Icon class="fa-icon" icon="{faBars}" />
+					<Icon icon="{faBars}" />
 				</button>
 			</div>
 		</div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/layout/ThemeModeToggle.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/layout/ThemeModeToggle.svelte.ejs
index 412e5dbbc..7950b1c41 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/layout/ThemeModeToggle.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/layout/ThemeModeToggle.svelte.ejs
@@ -1,8 +1,9 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { faMoon } from '@fortawesome/free-solid-svg-icons/faMoon'
 	import { faSun } from '@fortawesome/free-solid-svg-icons/faSun'
 
+	import Icon from '../Icon.svelte'
+
 	let darkMode = false
 	let focused = false
 	let body = undefined
@@ -52,17 +53,18 @@
 			<span class="opacity-0 absolute">Mode</span>
 			<span
 				class="absolute w-6 top-0 bottom-0 rounded-full bg-white border-2 shadow-md z-10 transition-all duration-200 transform"
-				class:border-blue-500="{focused}"
+				class:border-primary-500="{focused}"
 				class:ring-2="{focused}"
+				class:ring-primary-500="{focused}"
 				class:-translate-x-3="{!darkMode}"
 				class:translate-x-3="{darkMode}"></span>
 			<span class="w-6 h-6">
 				<Icon
-					class="fa-icon absolute top-1/2 transform -translate-x-2 -translate-y-1/2 text-white"
+					classes="absolute top-1/2 transform -translate-x-2 -translate-y-1/2 text-white"
 					icon="{faMoon}"
 				/>
 				<Icon
-					class="fa-icon absolute top-1/2 transform translate-x-4 -translate-y-1/2 text-yellow-500"
+					classes="absolute top-1/2 transform translate-x-4 -translate-y-1/2 text-yellow-500"
 					icon="{faSun}"
 				/>
 			</span>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/table/Pagination.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/table/Pagination.svelte.ejs
index 8d89acc91..b3c4dec17 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/table/Pagination.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/table/Pagination.svelte.ejs
@@ -1,9 +1,10 @@
 <script>
 	import { createEventDispatcher } from 'svelte'
-	import Icon from 'fa-svelte'
 	import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft'
 	import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight'
+
 	import Button from '../Button.svelte'
+	import Icon from '../Icon.svelte'
 
 	const dispatch = createEventDispatcher()
 	export let totalCount = 0
@@ -38,10 +39,10 @@
 			title="Previous"
 			data-test="prevPageCtrl"
 		>
-			<Icon class="fa-icon" icon="{faAngleLeft}" />
+			<Icon icon="{faAngleLeft}" />
 		</Button>
 		<div
-			class="font-bold bg-blue-700 dark:bg-blue-500 text-white py-2 px-4 rounded"
+			class="font-bold bg-primary-700 dark:bg-primary-500 text-white py-2 px-4 rounded"
 		>
 			{page}
 		</div>
@@ -53,7 +54,7 @@
 			title="Next"
 			data-test="nextPageCtrl"
 		>
-			<Icon class="fa-icon" icon="{faAngleRight}" />
+			<Icon icon="{faAngleRight}" />
 		</Button>
 	</div>
 </div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/components/table/Sort.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/components/table/Sort.svelte.ejs
index 95fc61d6a..e4c0f5844 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/components/table/Sort.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/components/table/Sort.svelte.ejs
@@ -1,10 +1,11 @@
 <script>
-	import Icon from 'fa-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import { faSort } from '@fortawesome/free-solid-svg-icons/faSort'
 	import { faSortDown } from '@fortawesome/free-solid-svg-icons/faSortDown'
 	import { faSortUp } from '@fortawesome/free-solid-svg-icons/faSortUp'
 
+	import Icon from '../Icon.svelte'
+
 	export let sortPredicate = ''
 	export let active = false
 	let ascending = true
@@ -29,7 +30,7 @@
 		: 'Click to sort records'}"
 >
 	<Icon
-		class="fa-icon cursor-pointer"
+		classes="cursor-pointer"
 		icon="{active ? (ascending ? faSortUp : faSortDown) : faSort}"
 	/>
 </span>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/routes/admin/user-management/[id]/view.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/routes/admin/user-management/[id]/view.svelte.ejs
index 13513eed9..6b9f58129 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/routes/admin/user-management/[id]/view.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/routes/admin/user-management/[id]/view.svelte.ejs
@@ -2,14 +2,13 @@
 	import { onMount } from 'svelte'
 	import { stores } from '@sapper/app'
 	import { goto } from '@sapper/app'
-	import Icon from 'fa-svelte'
 	import { faArrowLeft } from '@fortawesome/free-solid-svg-icons/faArrowLeft'
 
 	import userService from './../../../../components/user/user-service.js'
 	import Page from './../../../../components/page/Page.svelte'
 	import Record from './../../../../components/page/Record.svelte'
 	import Button from './../../../../components/Button.svelte'
-
+	import Icon from './../../../../components/Icon.svelte'
 	import { formatDate } from '../../../../utils/date'
 
 	const { page } = stores()
@@ -88,7 +87,7 @@
 			name="backBtn"
 			on:click="{() => goto(`/admin/user-management`)}"
 		>
-			<Icon class="fa-icon mr-2" icon="{faArrowLeft}" />
+			<Icon classes="mr-2" icon="{faArrowLeft}" />
 			Back
 		</Button>
 	</div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/routes/admin/user-management/index.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/routes/admin/user-management/index.svelte.ejs
index ffa5fda49..446c4b263 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/routes/admin/user-management/index.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/routes/admin/user-management/index.svelte.ejs
@@ -1,13 +1,13 @@
 <script>
 	import { onMount } from 'svelte'
 	import { goto } from '@sapper/app'
-	import Icon from 'fa-svelte'
 	import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus'
 
 	import auth from '../../../components/auth/auth-store.js'
 	import userService from './../../../components/user/user-service.js'
 	import Page from './../../../components/page/Page.svelte'
 	import Button from './../../../components/Button.svelte'
+	import Icon from './../../../components/Icon.svelte'
 	import Pagination from '../../../components/table/Pagination.svelte'
 	import UserTable from '../../../components/admin/user-management/UserTable.svelte'
 	import UserDeleteModal from '../../../components/admin/user-management/UserDeleteModal.svelte'
@@ -99,7 +99,7 @@
 				classes="sm:my-0"
 				on:click="{() => goto(`/admin/user-management/new`)}"
 			>
-				<Icon class="fa-icon mr-2" icon="{faPlus}" />
+				<Icon classes="mr-2" icon="{faPlus}" />
 				Create user
 			</Button>
 		</div>
diff --git a/generators/client/templates/svelte/src/main/webapp/app/routes/login.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/routes/login.svelte.ejs
index 3812098b1..5988f01b1 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/routes/login.svelte.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/routes/login.svelte.ejs
@@ -51,7 +51,7 @@
 <section class="flex h-screen items-start justify-center">
 	<div class="p-4 w-full sm:w-[450px] mx-4 sm:m-0">
 		<div class="px-4 py-3 mt-4 sm:mx-0 flex justify-center">
-			<div class="w-3/4 dark:text-blue-100">
+			<div class="w-3/4 dark:text-primary-100">
 				<img src="{appLogo}" alt="Application Logo" />
 			</div>
 		</div>
@@ -110,7 +110,7 @@
 		</form>
 
 		<div
-			class="mt-5 px-4 flex justify-between text-blue-700 dark:text-blue-500"
+			class="mt-5 px-4 flex justify-between text-primary-700 dark:text-primary-500"
 		>
 			<div>
 				<a
diff --git a/generators/client/templates/svelte/src/main/webapp/app/tailwind.css.ejs b/generators/client/templates/svelte/src/main/webapp/app/tailwind.css.ejs
index 34a42c1a4..b5c61c956 100644
--- a/generators/client/templates/svelte/src/main/webapp/app/tailwind.css.ejs
+++ b/generators/client/templates/svelte/src/main/webapp/app/tailwind.css.ejs
@@ -1,62 +1,3 @@
 @tailwind base;
 @tailwind components;
-
-@layer components {
-	.fa-icon {
-		@apply w-4 h-4 overflow-visible inline-block fill-current;
-	}
-
-	.btn {
-		@apply py-2 px-6 font-bold rounded transition-colors duration-200;
-	}
-
-	.btn-sm {
-		@apply py-2 px-2 font-semibold rounded transition-colors duration-200;
-	}
-
-	.btn-primary {
-		@apply bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-100;
-	}
-
-	.btn-primary:hover:not(:disabled) {
-		@apply bg-blue-800 dark:bg-blue-400;
-	}
-
-	.btn-primary:disabled {
-		@apply opacity-75 pointer-events-none;
-	}
-
-	.btn-secondary {
-		@apply bg-gray-500 dark:bg-gray-300 text-white dark:text-gray-800;
-	}
-
-	.btn-secondary:hover:not(:disabled) {
-		@apply bg-gray-700 dark:bg-gray-500;
-	}
-
-	.btn-danger {
-		@apply bg-red-700 dark:bg-red-500 text-white;
-	}
-
-	.btn-danger:hover:not(:disabled) {
-		@apply bg-red-800 dark:bg-red-400;
-	}
-
-	.btn-danger:disabled {
-		@apply opacity-75 pointer-events-none;
-	}
-
-	.btn-action {
-		@apply btn-sm px-3 text-gray-600 dark:text-gray-300;
-	}
-
-	.btn-action:hover:not(:disabled) {
-		@apply bg-gray-300 dark:bg-gray-700 text-gray-900 dark:text-gray-100;
-	}
-
-	.btn-action:disabled {
-		@apply opacity-75 pointer-events-none;
-	}
-}
-
 @tailwind utilities;
diff --git a/generators/client/templates/svelte/tailwind.config.js.ejs b/generators/client/templates/svelte/tailwind.config.js.ejs
index 23e0b3ec9..ce988b1b3 100644
--- a/generators/client/templates/svelte/tailwind.config.js.ejs
+++ b/generators/client/templates/svelte/tailwind.config.js.ejs
@@ -31,7 +31,7 @@ module.exports = {
 			current: 'currentColor',
 			gray: colors.trueGray,
 			white: colors.white,
-			blue: colors.lightBlue,
+			primary: colors.lightBlue,
 			green: colors.green,
 			yellow: colors.amber,
 			red: colors.red,