Skip to content

Commit 415aea8

Browse files
IMB11IMB11
committed
fix: colors and gaps
1 parent dcfa34f commit 415aea8

File tree

7 files changed

+42
-23
lines changed

7 files changed

+42
-23
lines changed

‎apps/frontend/src/components/ui/NavTabs.vue‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,17 @@
1212
ref="tabLinkElements"
1313
:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
1414
class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
15-
:class="{
16-
'text-button-textSelected': currentActiveIndex === index && !subpageSelected,
17-
'text-contrast':
18-
(currentActiveIndex === index && subpageSelected) || currentActiveIndex !== index,
19-
}"
2015
>
21-
<component :is="link.icon" v-if="link.icon" class="size-5" />
22-
<span class="text-nowrap">{{ link.label }}</span>
16+
<component
17+
:is="link.icon"
18+
v-if="link.icon"
19+
class="size-5"
20+
:class="{
21+
'text-brand': currentActiveIndex === index && !subpageSelected,
22+
'text-secondary': currentActiveIndex !== index || subpageSelected,
23+
}"
24+
/>
25+
<span class="text-nowrap text-contrast">{{ link.label }}</span>
2326
</NuxtLink>
2427
</template>
2528
<template v-else>
@@ -29,15 +32,18 @@
2932
:key="link.href"
3033
ref="tabLinkElements"
3134
class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 hover:cursor-pointer focus:rounded-full"
32-
:class="{
33-
'text-button-textSelected': currentActiveIndex === index && !subpageSelected,
34-
'text-contrast':
35-
(currentActiveIndex === index && subpageSelected) || currentActiveIndex !== index,
36-
}"
3735
@click="emit('tabClick', index, link)"
3836
>
39-
<component :is="link.icon" v-if="link.icon" class="size-5" />
40-
<span class="text-nowrap">{{ link.label }}</span>
37+
<component
38+
:is="link.icon"
39+
v-if="link.icon"
40+
class="size-5"
41+
:class="{
42+
'text-brand': currentActiveIndex === index && !subpageSelected,
43+
'text-secondary': currentActiveIndex !== index || subpageSelected,
44+
}"
45+
/>
46+
<span class="text-nowrap text-contrast">{{ link.label }}</span>
4147
</div>
4248
</template>
4349
<div
@@ -58,6 +64,7 @@
5864
</template>
5965

6066
<script setup lang="ts">
67+
import type { Component } from 'vue'
6168
import { computed, nextTick, onMounted, ref, watch } from 'vue'
6269
6370
const route = useNativeRoute()
@@ -66,7 +73,7 @@ interface Tab {
6673
label: string
6774
href: string
6875
shown?: boolean
69-
icon?: string
76+
icon?: Component
7077
subpages?: string[]
7178
}
7279

‎apps/frontend/src/pages/moderation.vue‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
</template>
1818

1919
<script setup lang="ts">
20+
import { FolderIcon, ReportIcon, ShieldCheckIcon } from '@modrinth/assets'
2021
import { Chips } from '@modrinth/ui'
2122
import { defineMessages, useVIntl } from '@vintl/vintl'
2223
@@ -46,9 +47,13 @@ const messages = defineMessages({
4647
})
4748
4849
const moderationLinks = [
49-
{ label: formatMessage(messages.projectsTitle), href: '/moderation' },
50-
{ label: formatMessage(messages.technicalReviewTitle), href: '/moderation/technical-review' },
51-
{ label: formatMessage(messages.reportsTitle), href: '/moderation/reports' },
50+
{ label: formatMessage(messages.projectsTitle), href: '/moderation', icon: FolderIcon },
51+
{
52+
label: formatMessage(messages.technicalReviewTitle),
53+
href: '/moderation/technical-review',
54+
icon: ShieldCheckIcon,
55+
},
56+
{ label: formatMessage(messages.reportsTitle), href: '/moderation/reports', icon: ReportIcon },
5257
]
5358
5459
const mobileNavOptions = [

‎apps/frontend/src/pages/moderation/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="flex flex-col gap-3">
2+
<div class="flex flex-col gap-4">
33
<div class="flex flex-col justify-between gap-3 lg:flex-row">
44
<div class="iconified-input flex-1 lg:max-w-md">
55
<SearchIcon aria-hidden="true" class="text-lg" />
@@ -79,7 +79,7 @@
7979
<ConfettiExplosion v-if="visible" />
8080
</div>
8181

82-
<div class="mt-4 flex flex-col gap-4">
82+
<div class="flex flex-col gap-4">
8383
<div v-if="paginatedProjects.length === 0" class="universal-card h-24 animate-pulse"></div>
8484
<ModerationQueueCard
8585
v-for="item in paginatedProjects"

‎apps/frontend/src/pages/moderation/reports/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div class="flex flex-col gap-3">
2+
<div class="flex flex-col gap-4">
33
<div class="flex flex-col justify-between gap-3 lg:flex-row">
44
<div class="iconified-input flex-1 lg:max-w-md">
55
<SearchIcon aria-hidden="true" class="text-lg" />
@@ -64,7 +64,7 @@
6464
<Pagination :page="currentPage" :count="totalPages" @switch-page="goToPage" />
6565
</div>
6666

67-
<div class="mt-4 flex flex-col gap-4">
67+
<div class="flex flex-col gap-4">
6868
<div v-if="paginatedReports.length === 0" class="universal-card h-24 animate-pulse"></div>
6969
<ReportCard v-for="report in paginatedReports" v-else :key="report.id" :report="report" />
7070
</div>

‎apps/frontend/src/pages/moderation/technical-review.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -447,7 +447,7 @@ watch(currentSortType, () => {
447447
</script>
448448

449449
<template>
450-
<div class="flex flex-col gap-6">
450+
<div class="flex flex-col gap-4">
451451
<!-- TODO: Reimpl when backend is available -->
452452
<!-- <BatchScanProgressAlert
453453
v-if="batchScanProgressInformation"

‎packages/assets/generated-icons.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ import _FileImageIcon from './icons/file-image.svg?component'
7575
import _FileTextIcon from './icons/file-text.svg?component'
7676
import _FilterIcon from './icons/filter.svg?component'
7777
import _FilterXIcon from './icons/filter-x.svg?component'
78+
import _FolderIcon from './icons/folder.svg?component'
7879
import _FolderArchiveIcon from './icons/folder-archive.svg?component'
7980
import _FolderOpenIcon from './icons/folder-open.svg?component'
8081
import _FolderSearchIcon from './icons/folder-search.svg?component'
@@ -299,6 +300,7 @@ export const FilterIcon = _FilterIcon
299300
export const FolderArchiveIcon = _FolderArchiveIcon
300301
export const FolderOpenIcon = _FolderOpenIcon
301302
export const FolderSearchIcon = _FolderSearchIcon
303+
export const FolderIcon = _FolderIcon
302304
export const GameIcon = _GameIcon
303305
export const GapIcon = _GapIcon
304306
export const GaugeIcon = _GaugeIcon

‎packages/assets/icons/folder.svg‎

Lines changed: 5 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)