chore: Align pagination controls with back to top styling

src/components/PaginationControls.vue

@@ -2,10 +2,10 @@
 	<nav v-if="totalPages > 1" class="flex flex-wrap items-center justify-start gap-3 text-sm text-slate-500 dark:text-slate-400" :aria-label="ariaLabel">
 		<p class="font-medium">Page {{ currentPage }} of {{ totalPages }}</p>
 		<div class="flex items-center gap-2">
-			<button type="button" class="btn paginatation-buttons" :disabled="isFirstPage" @click="$emit('previous')">
+			<button type="button" class="pill-button" :disabled="isFirstPage" @click="$emit('previous')">
 				{{ previousLabel }}
 			</button>
-			<button type="button" class="btn paginatation-buttons" :disabled="isLastPage" @click="$emit('next')">
+			<button type="button" class="pill-button" :disabled="isLastPage" @click="$emit('next')">
 				{{ nextLabel }}
 			</button>
 		</div>

src/css/support/blog.css

@@ -4,19 +4,10 @@
 	@apply dark:text-teal-500 dark:hover:text-teal-600;
 }
 
-.paginatation-buttons {
-	@apply h-10 w-32 cursor-pointer border border-fuchsia-500 bg-fuchsia-500 text-white;
-	@apply transition-colors duration-150 ease-in-out hover:bg-fuchsia-500/90 hover:text-white;
-	@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-300;
-	@apply dark:border-teal-500 dark:bg-teal-600 dark:text-slate-900 dark:hover:bg-teal-500;
-	@apply disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-200 disabled:text-slate-400;
-	@apply dark:disabled:border-slate-700 dark:disabled:bg-slate-700 dark:disabled:text-slate-500;
-}
-
 .recommendations-list {
-	height: calc(var(--recommendations-section-min) * 0.8);
+	height: calc(var(--recommendations-section-min) * 1.04);
 	@apply overflow-y-auto pr-2;
-	@apply scroll-smooth;
+	@apply scroll-smooth custom-scrollbar;
 }
 
 .blog-h1 {

src/css/support/utility-patterns.css

@@ -43,6 +43,14 @@
 	@apply px-3 py-1.5 text-indigo-100 bg-indigo-500 hover:bg-indigo-600;
 }
 
+.pill-button {
+	@apply inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100;
+}
+
+.pill-button:disabled {
+	@apply cursor-not-allowed opacity-60;
+}
+
 /* Forms */
 input[type='search']::-webkit-search-decoration,
 input[type='search']::-webkit-search-cancel-button,

src/pages/ResumePage.vue

@@ -44,7 +44,7 @@
 											</div>
 											<div :class="resumeSectionHeights.recommendations">
 												<span id="recommendations" class="block h-0" aria-hidden="true"></span>
-												<RecommendationPartial v-if="recommendations" :recommendations="recommendations" back-to-top-target="#resume-top" />
+												<RecommendationPartial v-if="recommendations" :recommendations="recommendations" />
 											</div>
 										</div>
 									</div>
@@ -98,7 +98,7 @@
 	{ href: '#recommendations', text: 'Recommendations' },
 ] as const;
 
 const resumeSectionMinHeights = Heights.resumeSectionMinHeights();
 const resumeSectionHeights = Heights.resumeSectionHeights();
 const resumeSectionsTotalHeight = Heights.resumeSectionsTotalHeight();
 

src/partials/BackToTopLink.vue

@@ -1,8 +1,5 @@
 <template>
-	<a
-		class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
-		:href="target"
-	>
+	<a class="pill-button" :href="target">
 		<span aria-hidden="true">{{ icon }}</span>
 		{{ label }}
 	</a>

src/partials/RecommendationPartial.vue

@@ -2,7 +2,6 @@
 	<section class="space-y-8" :style="recommendationsSectionStyle">
 		<div class="flex flex-wrap items-center justify-between gap-4">
 			<h2 class="h3 font-aspekta text-slate-800 dark:text-slate-100">Recommendations</h2>
-			<BackToTopLink :target="backToTopTarget" />
 		</div>
 		<ul class="recommendations-list custom-scrollbar space-y-8">
 			<!-- Item -->
@@ -44,7 +43,6 @@
 <script setup lang="ts">
 import { computed, toRefs } from 'vue';
 import DOMPurify from 'dompurify';
-import BackToTopLink from '@partials/BackToTopLink.vue';
 import PaginationControls from '@components/PaginationControls.vue';
 import { image, date } from '@/public.ts';
 import type { RecommendationsResponse } from '@api/response/recommendations-response.ts';
@@ -54,10 +52,9 @@ import { Heights } from '@/support/heights.ts';
 
 const props = defineProps<{
 	recommendations: Array<RecommendationsResponse>;
-	backToTopTarget: string;
 }>();
 
-const { recommendations, backToTopTarget } = toRefs(props);
+const { recommendations } = toRefs(props);
 
 const ITEMS_PER_PAGE = 3;
 

tests/partials/RecommendationPartial.test.ts

@@ -30,7 +30,7 @@ describe('RecommendationPartial', () => {
 
 	it('sanitises and formats recommendation', () => {
 		const wrapper = mount(RecommendationPartial, {
-			props: { recommendations: data, backToTopTarget: '#top' },
+			props: { recommendations: data },
 		});
 		expect(renderMarkdown).toHaveBeenCalledWith('**great**');
 		expect(wrapper.html()).toContain('<strong>great</strong>');
@@ -51,7 +51,6 @@ describe('RecommendationPartial', () => {
 						},
 					},
 				],
-				backToTopTarget: '#top',
 			},
 		});
 
@@ -69,7 +68,7 @@ describe('RecommendationPartial', () => {
 		}));
 
 		const wrapper = mount(RecommendationPartial, {
-			props: { recommendations, backToTopTarget: '#top' },
+			props: { recommendations },
 		});
 
 		const pageIndicator = () => wrapper.get('[aria-label="Recommendations pagination"] p');