From d73294569837e4ce6d38c09e5eda28569d0f0b73 Mon Sep 17 00:00:00 2001
From: Abderrahmane Smimite <smimite@gmail.com>
Date: Sat, 19 Oct 2024 18:46:45 +0200
Subject: [PATCH 1/2] Model buttons improvement

---
 .../TableRowActions/TableRowActions.svelte    |  4 +-
 .../(internal)/[model=urlmodel]/+page.svelte  | 63 +++++++++++--------
 2 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/frontend/src/lib/components/TableRowActions/TableRowActions.svelte b/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
index 66cdc381f..01e013c9f 100644
--- a/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
+++ b/frontend/src/lib/components/TableRowActions/TableRowActions.svelte
@@ -69,9 +69,7 @@
 	$: displayDelete = canDeleteObject && deleteForm !== undefined;
 </script>
 
-<span
-	class="space-x-2 whitespace-nowrap flex flex-row items-center text-xl text-surface-700 justify-end"
->
+<span class="space-x-2 whitespace-nowrap flex flex-row items-center text-surface-700 justify-end">
 	<slot name="head" />
 	<slot name="body" />
 	{#if !hasBody}
diff --git a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/+page.svelte b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/+page.svelte
index 5212eb855..d3385cf5f 100644
--- a/frontend/src/routes/(app)/(internal)/[model=urlmodel]/+page.svelte
+++ b/frontend/src/routes/(app)/(internal)/[model=urlmodel]/+page.svelte
@@ -50,35 +50,46 @@
 		{#key URLModel}
 			<ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel}>
 				<div slot="addButton">
-					{#if !['risk-matrices', 'frameworks', 'requirement-mapping-sets', 'user-groups', 'role-assignments'].includes(URLModel)}
-						<button
-							class="btn variant-filled-primary self-end"
-							data-testid="add-button"
-							on:click={modalCreateForm}
-							><i class="fa-solid fa-plus mr-2" />
-							{safeTranslate('add' + capitalizeFirstLetter(data.model.localName))}
-						</button>
-						{#if URLModel === 'applied-controls'}
+					<span class="inline-flex overflow-hidden rounded-md border bg-white shadow-sm">
+						{#if !['risk-matrices', 'frameworks', 'requirement-mapping-sets', 'user-groups', 'role-assignments'].includes(URLModel)}
+							<button
+								class="inline-block border-e p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+								data-testid="add-button"
+								title={safeTranslate('add' + capitalizeFirstLetter(data.model.localName))}
+								on:click={modalCreateForm}
+								><i class="fa-solid fa-file-circle-plus"></i>
+							</button>
+							{#if URLModel === 'applied-controls'}
+								<a
+									href="{URLModel}/export/"
+									class="inline-block p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+									title={m.exportButton()}
+									data-testid="export-button"><i class="fa-solid fa-download mr-2" /></a
+								>
+							{/if}
+						{:else if URLModel === 'risk-matrices'}
 							<a
-								href="{URLModel}/export/"
-								class="btn variant-filled-surface"
-								data-testid="export-button"
-								><i class="fa-solid fa-download mr-2" />{m.exportButton()}</a
+								href="/libraries"
+								class="inline-block p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+								data-testid="add-button"
+								title={m.importMatrices()}><i class="fa-solid fa-file-import mr-2" /></a
+							>
+						{:else if URLModel === 'frameworks'}
+							<a
+								href="/libraries"
+								class="inline-block p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+								data-testid="add-button"
+								title={m.importFrameworks()}><i class="fa-solid fa-file-import mr-2" /></a
+							>
+						{:else if URLModel === 'requirement-mapping-sets'}
+							<a
+								href="/libraries"
+								class="inline-block p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+								data-testid="add-button"
+								title={m.importMappings()}><i class="fa-solid fa-file-import mr-2" /></a
 							>
 						{/if}
-					{:else if URLModel === 'risk-matrices'}
-						<a href="/libraries" class="btn variant-filled-primary" data-testid="add-button"
-							><i class="fa-solid fa-file-import mr-2" />{m.importMatrices()}</a
-						>
-					{:else if URLModel === 'frameworks'}
-						<a href="/libraries" class="btn variant-filled-primary" data-testid="add-button"
-							><i class="fa-solid fa-file-import mr-2" />{m.importFrameworks()}</a
-						>
-					{:else if URLModel === 'requirement-mapping-sets'}
-						<a href="/libraries" class="btn variant-filled-primary" data-testid="add-button"
-							><i class="fa-solid fa-file-import mr-2" />{m.importMappings()}</a
-						>
-					{/if}
+					</span>
 				</div>
 			</ModelTable>
 		{/key}

From b21dc2313f649721f28efd605eb4c7d2dbaa290d Mon Sep 17 00:00:00 2001
From: Mohamed-Hacene <mohamedhacene.b@gmail.com>
Date: Mon, 21 Oct 2024 12:03:17 +0200
Subject: [PATCH 2/2] third-party route model buttons improvement

---
 .../[model=thirdparty_urlmodels]/+page.svelte | 59 ++++++++++++-------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/frontend/src/routes/(app)/(third-party)/[model=thirdparty_urlmodels]/+page.svelte b/frontend/src/routes/(app)/(third-party)/[model=thirdparty_urlmodels]/+page.svelte
index dcf49cb4b..d3385cf5f 100644
--- a/frontend/src/routes/(app)/(third-party)/[model=thirdparty_urlmodels]/+page.svelte
+++ b/frontend/src/routes/(app)/(third-party)/[model=thirdparty_urlmodels]/+page.svelte
@@ -50,31 +50,46 @@
 		{#key URLModel}
 			<ModelTable source={data.table} deleteForm={data.deleteForm} {URLModel}>
 				<div slot="addButton">
-					{#if !['risk-matrices', 'frameworks', 'user-groups', 'role-assignments'].includes(URLModel)}
-						<button
-							class="btn variant-filled-primary self-end"
-							data-testid="add-button"
-							on:click={modalCreateForm}
-							><i class="fa-solid fa-plus mr-2" />
-							{safeTranslate('add' + capitalizeFirstLetter(data.model.localName))}
-						</button>
-						{#if URLModel === 'applied-controls'}
+					<span class="inline-flex overflow-hidden rounded-md border bg-white shadow-sm">
+						{#if !['risk-matrices', 'frameworks', 'requirement-mapping-sets', 'user-groups', 'role-assignments'].includes(URLModel)}
+							<button
+								class="inline-block border-e p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+								data-testid="add-button"
+								title={safeTranslate('add' + capitalizeFirstLetter(data.model.localName))}
+								on:click={modalCreateForm}
+								><i class="fa-solid fa-file-circle-plus"></i>
+							</button>
+							{#if URLModel === 'applied-controls'}
+								<a
+									href="{URLModel}/export/"
+									class="inline-block p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+									title={m.exportButton()}
+									data-testid="export-button"><i class="fa-solid fa-download mr-2" /></a
+								>
+							{/if}
+						{:else if URLModel === 'risk-matrices'}
 							<a
-								href="{URLModel}/export/"
-								class="btn variant-filled-surface"
-								data-testid="export-button"
-								><i class="fa-solid fa-download mr-2" />{m.exportButton()}</a
+								href="/libraries"
+								class="inline-block p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+								data-testid="add-button"
+								title={m.importMatrices()}><i class="fa-solid fa-file-import mr-2" /></a
+							>
+						{:else if URLModel === 'frameworks'}
+							<a
+								href="/libraries"
+								class="inline-block p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+								data-testid="add-button"
+								title={m.importFrameworks()}><i class="fa-solid fa-file-import mr-2" /></a
+							>
+						{:else if URLModel === 'requirement-mapping-sets'}
+							<a
+								href="/libraries"
+								class="inline-block p-3 text-gray-50 bg-pink-500 hover:bg-pink-400 w-12 focus:relative"
+								data-testid="add-button"
+								title={m.importMappings()}><i class="fa-solid fa-file-import mr-2" /></a
 							>
 						{/if}
-					{:else if URLModel === 'risk-matrices'}
-						<a href="/libraries" class="btn variant-filled-primary" data-testid="add-button"
-							><i class="fa-solid fa-file-import mr-2" />{m.importMatrices()}</a
-						>
-					{:else if URLModel === 'frameworks'}
-						<a href="/libraries" class="btn variant-filled-primary" data-testid="add-button"
-							><i class="fa-solid fa-file-import mr-2" />{m.importFrameworks()}</a
-						>
-					{/if}
+					</span>
 				</div>
 			</ModelTable>
 		{/key}