Dashboard improvements, fixes and consistency

apps/frontend/src/assets/styles/layout.scss

@@ -40,6 +40,7 @@
 .normal-page {
 	display: grid;
 	padding: 0 1.5rem;
+	padding-bottom: 1rem;
 
 	grid-template:
 		'header'
@@ -82,13 +83,15 @@
 		column-gap: 0.75rem;
 
 		grid-template:
+			'header header' auto
 			'sidebar content' auto
 			'info content' auto
 			'dummy content' 1fr
 			/ 18.75rem 1fr;
 
 		&.alt-layout {
 			grid-template:
+				'header header' auto
 				'content sidebar' auto
 				'content info' auto
 				'content dummy' 1fr

apps/frontend/src/components/ui/charts/ChartDisplay.vue

@@ -9,9 +9,10 @@
 			</div>
 		</div>
 		<div v-else-if="!isInitialized || analytics.loading.value" class="universal-card">
-			<h2>
+			<div class="flex items-center justify-center gap-2">
+				<SpinnerIcon class="h-6 w-6 animate-spin" />
 				<span class="label__title">Loading analytics...</span>
-			</h2>
+			</div>
 		</div>
 		<div v-else class="graphs">
 			<div class="graphs__vertical-bar">
@@ -309,7 +310,7 @@
 </template>
 
 <script setup lang="ts">
-import { DownloadIcon, UpdatedIcon } from '@modrinth/assets'
+import { DownloadIcon, SpinnerIcon, UpdatedIcon } from '@modrinth/assets'
 import { Button, Card, DropdownSelect } from '@modrinth/ui'
 import { formatCategoryHeader, formatMoney, formatNumber } from '@modrinth/utils'
 import dayjs from 'dayjs'
@@ -837,10 +838,6 @@ const defaultRanges: RangeObject[] = [
 }
 
 .graphs {
-	// Pages clip so we need to add a margin
-	margin-left: 0.25rem;
-	margin-top: 0.25rem;
-
 	display: flex;
 	flex-direction: column;
 

apps/frontend/src/pages/dashboard.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="normal-page !mt-8">
+	<div class="normal-page">
+		<div class="normal-page__header">
+			<h1>{{ formatMessage(commonMessages.dashboardLabel) }}</h1>
+		</div>
 		<div class="normal-page__sidebar">
 			<NavStack
 				:items="[

apps/frontend/src/pages/dashboard/notifications.vue

@@ -49,9 +49,13 @@
 				/>
 			</template>
 			<p v-else>You don't have any unread notifications.</p>
-			<div class="flex justify-end">
-				<Pagination :page="page" :count="pages" @switch-page="changePage" />
-			</div>
+			<Pagination
+				v-if="pages > 1"
+				class="mt-4 justify-end"
+				:page="page"
+				:count="pages"
+				@switch-page="changePage"
+			/>
 		</section>
 	</div>
 </template>

apps/frontend/src/pages/dashboard/organizations.vue

@@ -11,7 +11,10 @@
 					</button>
 				</div>
 			</div>
-			<template v-if="orgs?.length > 0">
+			<p v-if="orgs?.length < 1">
+				You don't have any organizations yet. Click the green button above to begin.
+			</p>
+			<template v-else>
 				<div class="orgs-grid">
 					<nuxt-link
 						v-for="org in sortedOrgs"
@@ -43,7 +46,6 @@
 					</nuxt-link>
 				</div>
 			</template>
-			<template v-else> Make an organization! </template>
 		</section>
 	</div>
 </template>

apps/frontend/src/pages/settings.vue

@@ -1,85 +1,83 @@
 <template>
-	<div>
-		<div class="normal-page no-sidebar">
+	<div class="normal-page">
+		<div class="normal-page__header">
 			<h1>{{ formatMessage(commonMessages.settingsLabel) }}</h1>
 		</div>
-		<div class="normal-page">
-			<div class="normal-page__sidebar">
-				<NavStack
-					:items="
-						[
-							{ type: 'heading', label: 'Display' },
-							{
-								link: '/settings',
-								label: formatMessage(commonSettingsMessages.appearance),
-								icon: PaintbrushIcon,
-							},
-							isStaging
-								? {
-										link: '/settings/language',
-										label: formatMessage(commonSettingsMessages.language),
-										icon: LanguagesIcon,
-										badge: `${formatMessage(commonMessages.beta)}`,
-									}
-								: null,
-							auth.user ? { type: 'heading', label: 'Account' } : null,
-							auth.user
-								? {
-										link: '/settings/profile',
-										label: formatMessage(commonSettingsMessages.profile),
-										icon: UserIcon,
-									}
-								: null,
-							auth.user
-								? {
-										link: '/settings/account',
-										label: formatMessage(commonSettingsMessages.account),
-										icon: ShieldIcon,
-									}
-								: null,
-							auth.user
-								? {
-										link: '/settings/authorizations',
-										label: formatMessage(commonSettingsMessages.authorizedApps),
-										icon: GridIcon,
-									}
-								: null,
-							auth.user
-								? {
-										link: '/settings/sessions',
-										label: formatMessage(commonSettingsMessages.sessions),
-										icon: MonitorSmartphoneIcon,
-									}
-								: null,
-							auth.user
-								? {
-										link: '/settings/billing',
-										label: formatMessage(commonSettingsMessages.billing),
-										icon: CardIcon,
-									}
-								: null,
-							auth.user ? { type: 'heading', label: 'Developer' } : null,
-							auth.user
-								? {
-										link: '/settings/pats',
-										label: formatMessage(commonSettingsMessages.pats),
-										icon: KeyIcon,
-									}
-								: null,
-							auth.user
-								? {
-										link: '/settings/applications',
-										label: formatMessage(commonSettingsMessages.applications),
-										icon: ServerIcon,
-									}
-								: null,
-						].filter(Boolean)
-					"
-				/>
-			</div>
-			<div class="normal-page__content mt-3 lg:mt-0">
-				<NuxtPage :route="route" />
-			</div>
+		<div class="normal-page__sidebar">
+			<NavStack
+				:items="
+					[
+						{ type: 'heading', label: 'Display' },
+						{
+							link: '/settings',
+							label: formatMessage(commonSettingsMessages.appearance),
+							icon: PaintbrushIcon,
+						},
+						isStaging
+							? {
+									link: '/settings/language',
+									label: formatMessage(commonSettingsMessages.language),
+									icon: LanguagesIcon,
+									badge: `${formatMessage(commonMessages.beta)}`,
+								}
+							: null,
+						auth.user ? { type: 'heading', label: 'Account' } : null,
+						auth.user
+							? {
+									link: '/settings/profile',
+									label: formatMessage(commonSettingsMessages.profile),
+									icon: UserIcon,
+								}
+							: null,
+						auth.user
+							? {
+									link: '/settings/account',
+									label: formatMessage(commonSettingsMessages.account),
+									icon: ShieldIcon,
+								}
+							: null,
+						auth.user
+							? {
+									link: '/settings/authorizations',
+									label: formatMessage(commonSettingsMessages.authorizedApps),
+									icon: GridIcon,
+								}
+							: null,
+						auth.user
+							? {
+									link: '/settings/sessions',
+									label: formatMessage(commonSettingsMessages.sessions),
+									icon: MonitorSmartphoneIcon,
+								}
+							: null,
+						auth.user
+							? {
+									link: '/settings/billing',
+									label: formatMessage(commonSettingsMessages.billing),
+									icon: CardIcon,
+								}
+							: null,
+						auth.user ? { type: 'heading', label: 'Developer' } : null,
+						auth.user
+							? {
+									link: '/settings/pats',
+									label: formatMessage(commonSettingsMessages.pats),
+									icon: KeyIcon,
+								}
+							: null,
+						auth.user
+							? {
+									link: '/settings/applications',
+									label: formatMessage(commonSettingsMessages.applications),
+									icon: ServerIcon,
+								}
+							: null,
+					].filter(Boolean)
+				"
+			/>
+		</div>
+		<div class="normal-page__content mt-3 lg:mt-0">
+			<NuxtPage :route="route" />
 		</div>
 	</div>
 </template>