From 95ec3325c2ce48384c5cdaae2fc92289e61fcc9b Mon Sep 17 00:00:00 2001
From: Tink <tink-bot@kolaente.de>
Date: Thu, 16 Apr 2026 14:14:36 +0200
Subject: [PATCH] refactor(frontend): migrate .box to Card and drop Bulma
 elements/box (#2640)

---
 .../src/components/home/ContentLinkShare.vue  |  5 +--
 frontend/src/styles/global.scss               |  2 +-
 .../src/views/sharing/LinkSharingAuth.vue     |  8 ++---
 frontend/src/views/teams/ListTeams.vue        | 32 +++++++++++--------
 frontend/tests/e2e/sharing/team.spec.ts       |  4 +--
 5 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/home/ContentLinkShare.vue b/frontend/src/components/home/ContentLinkShare.vue
index b59e0fc48..9f7e1a8d5 100644
--- a/frontend/src/components/home/ContentLinkShare.vue
+++ b/frontend/src/components/home/ContentLinkShare.vue
@@ -44,10 +44,10 @@
 			>
 				{{ $t('misc.loading') }}
 			</h1>
-			<div class="box has-text-start view">
+			<Card class="has-text-start view">
 				<RouterView />
 				<PoweredByLink utm-medium="link_share" />
-			</div>
+			</Card>
 		</div>
 	</div>
 </template>
@@ -64,6 +64,7 @@ import {useAuthStore} from '@/stores/auth'
 import Logo from '@/components/home/Logo.vue'
 import PoweredByLink from './PoweredByLink.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
+import Card from '@/components/misc/Card.vue'
 import Message from '@/components/misc/Message.vue'
 import {PROJECT_VIEW_KINDS} from '@/modelTypes/IProjectView'
 
diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index a97a5ae72..89db4fce8 100644
--- a/frontend/src/styles/global.scss
+++ b/frontend/src/styles/global.scss
@@ -17,7 +17,7 @@
 
 
 // imports from "bulma-css-variables/sass/elements/_all";
-@import "bulma-css-variables/sass/elements/box";
+// @import "bulma-css-variables/sass/elements/box"; // not used; migrated to <Card>
 // @import "bulma-css-variables/sass/elements/button"; // Moved to Button.vue component
 @import "bulma-css-variables/sass/elements/container";
 @import "bulma-css-variables/sass/elements/content";
diff --git a/frontend/src/views/sharing/LinkSharingAuth.vue b/frontend/src/views/sharing/LinkSharingAuth.vue
index 50793e99e..16d9e8b06 100644
--- a/frontend/src/views/sharing/LinkSharingAuth.vue
+++ b/frontend/src/views/sharing/LinkSharingAuth.vue
@@ -3,10 +3,7 @@
 		<Message v-if="loading">
 			{{ $t('sharing.authenticating') }}
 		</Message>
-		<div
-			v-if="authenticateWithPassword"
-			class="box"
-		>
+		<Card v-if="authenticateWithPassword">
 			<p class="pbe-2">
 				{{ $t('sharing.passwordRequired') }}
 			</p>
@@ -33,7 +30,7 @@
 			>
 				{{ errorMessage }}
 			</Message>
-		</div>
+		</Card>
 	</div>
 </template>
 
@@ -43,6 +40,7 @@ import {useRoute, useRouter} from 'vue-router'
 import {useI18n} from 'vue-i18n'
 import {useTitle} from '@vueuse/core'
 
+import Card from '@/components/misc/Card.vue'
 import Message from '@/components/misc/Message.vue'
 import FormField from '@/components/input/FormField.vue'
 import {LINK_SHARE_HASH_PREFIX} from '@/constants/linkShareHash'
diff --git a/frontend/src/views/teams/ListTeams.vue b/frontend/src/views/teams/ListTeams.vue
index e4b1ee8b5..5b5d8077d 100644
--- a/frontend/src/views/teams/ListTeams.vue
+++ b/frontend/src/views/teams/ListTeams.vue
@@ -12,21 +12,24 @@
 		</XButton>
 
 		<h1>{{ $t('team.title') }}</h1>
-		<ul
+		<Card
 			v-if="teams.length > 0"
-			class="teams box"
+			:padding="false"
+			:has-content="false"
 		>
-			<li
-				v-for="team in teams"
-				:key="team.id"
-			>
-				<RouterLink :to="{name: 'teams.edit', params: {id: team.id}}">
-					<p>
-						{{ team.name }}
-					</p>
-				</RouterLink>
-			</li>
-		</ul>
+			<ul class="teams">
+				<li
+					v-for="team in teams"
+					:key="team.id"
+				>
+					<RouterLink :to="{name: 'teams.edit', params: {id: team.id}}">
+						<p>
+							{{ team.name }}
+						</p>
+					</RouterLink>
+				</li>
+			</ul>
+		</Card>
 		<p
 			v-else-if="!teamService.loading"
 			class="has-text-centered has-text-grey is-italic"
@@ -43,6 +46,7 @@
 import {ref, shallowReactive} from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import Card from '@/components/misc/Card.vue'
 import TeamService from '@/services/team'
 import { useTitle } from '@/composables/useTitle'
 
@@ -59,7 +63,9 @@ teamService.getAll().then((result) => {
 <style lang="scss" scoped>
 ul.teams {
   padding: 0;
+  margin-block-start: 0;
   margin-inline-start: 0;
+  border-radius: $radius;
   overflow: hidden;
 
   li {
diff --git a/frontend/tests/e2e/sharing/team.spec.ts b/frontend/tests/e2e/sharing/team.spec.ts
index 432f78af2..19bfbcee8 100644
--- a/frontend/tests/e2e/sharing/team.spec.ts
+++ b/frontend/tests/e2e/sharing/team.spec.ts
@@ -29,9 +29,9 @@ test.describe('Team', () => {
 
 		await page.goto('/teams')
 
-		await expect(page.locator('.teams.box')).not.toBeEmpty()
+		await expect(page.locator('ul.teams')).not.toBeEmpty()
 		for (const t of teams) {
-			await expect(page.locator('.teams.box')).toContainText(t.name)
+			await expect(page.locator('ul.teams')).toContainText(t.name)
 		}
 	})