refactor(frontend): migrate .box to Card and drop Bulma elements/box (#2640)

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'
 

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";

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'

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 {

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)
 		}
 	})