Prefer icons from modrinth/assets (#3394)

Replaced all icon usages of `apps/frontend/src/assets/image/utils` for `@modrinth/assets`.

The only icon which has been changed is the `WorldIcon`, which has been replaced by the `GlobeIcon`.
This commit is contained in:
Erb3
2025-03-19 02:28:23 +01:00
committed by GitHub
parent a19bf3dc0e
commit c4b60f1720
142 changed files with 373 additions and 661 deletions

View File

@@ -15,7 +15,7 @@
</template>
<script setup>
import ChevronRightIcon from "~/assets/images/utils/chevron-right.svg?component";
import { ChevronRightIcon } from "@modrinth/assets";
defineProps({
linkStack: {

View File

@@ -25,8 +25,7 @@
</template>
<script>
import CheckIcon from "~/assets/images/utils/check.svg?component";
import DropdownIcon from "~/assets/images/utils/dropdown.svg?component";
import { CheckIcon, DropdownIcon } from "@modrinth/assets";
export default {
components: {

View File

@@ -14,7 +14,7 @@
</template>
<script>
import CheckIcon from "~/assets/images/utils/check.svg?component";
import { CheckIcon } from "@modrinth/assets";
export default {
components: {

View File

@@ -7,8 +7,7 @@
</template>
<script>
import CheckIcon from "~/assets/images/utils/check.svg?component";
import ClipboardCopyIcon from "~/assets/images/utils/clipboard-copy.svg?component";
import { CheckIcon, ClipboardCopyIcon } from "@modrinth/assets";
export default {
components: {

View File

@@ -47,11 +47,9 @@
</template>
</span>
</template>
<script setup>
import InfoIcon from "~/assets/images/utils/info.svg?component";
import ClientIcon from "~/assets/images/utils/client.svg?component";
import GlobeIcon from "~/assets/images/utils/globe.svg?component";
import ServerIcon from "~/assets/images/utils/server.svg?component";
import { InfoIcon, ClientIcon, GlobeIcon, ServerIcon } from "@modrinth/assets";
defineProps({
type: {
@@ -99,6 +97,7 @@ const tags = useTags();
display: flex;
color: var(--color-text) !important;
font-weight: bold;
svg {
margin-right: 0.2rem;
}

View File

@@ -13,7 +13,7 @@
<div v-if="header" class="header">
<strong>{{ header }}</strong>
<button class="iconified-button icon-only transparent" @click="hide">
<CrossIcon />
<XIcon />
</button>
</div>
<div class="content">
@@ -26,11 +26,11 @@
</template>
<script>
import CrossIcon from "~/assets/images/utils/x.svg?component";
import { XIcon } from "@modrinth/assets";
export default {
components: {
CrossIcon,
XIcon,
},
props: {
header: {
@@ -104,6 +104,7 @@ export default {
&.shown {
visibility: visible;
.modal-body {
opacity: 1;
visibility: visible;

View File

@@ -21,7 +21,7 @@
</div>
<div class="button-group">
<button class="iconified-button" @click="cancel">
<CrossIcon />
<XIcon />
Cancel
</button>
<button class="iconified-button danger-button" :disabled="action_disabled" @click="proceed">
@@ -35,13 +35,12 @@
<script>
import { renderString } from "@modrinth/utils";
import CrossIcon from "~/assets/images/utils/x.svg?component";
import TrashIcon from "~/assets/images/utils/trash.svg?component";
import { TrashIcon, XIcon } from "@modrinth/assets";
import Modal from "~/components/ui/Modal.vue";
export default {
components: {
CrossIcon,
XIcon,
TrashIcon,
Modal,
},

View File

@@ -23,7 +23,7 @@
</template>
<script>
import ChevronRightIcon from "~/assets/images/utils/chevron-right.svg?component";
import { ChevronRightIcon } from "@modrinth/assets";
export default {
components: {

View File

@@ -13,7 +13,7 @@
class="notification__icon backed-svg"
:class="{ raised: raised }"
>
<NotificationIcon />
<BellIcon />
</nuxt-link>
<DoubleIcon v-else class="notification__icon">
<template #primary>
@@ -33,24 +33,24 @@
<Avatar v-else size="xs" :raised="raised" no-shadow />
</template>
<template #secondary>
<ModerationIcon
<ScaleIcon
v-if="type === 'moderator_message' || type === 'status_change'"
class="moderation-color"
/>
<InvitationIcon v-else-if="type === 'team_invite' && project" class="creator-color" />
<InvitationIcon
<UserPlusIcon v-else-if="type === 'team_invite' && project" class="creator-color" />
<UserPlusIcon
v-else-if="type === 'organization_invite' && organization"
class="creator-color"
/>
<VersionIcon v-else-if="type === 'project_update' && project && version" />
<NotificationIcon v-else />
<BellIcon v-else />
</template>
</DoubleIcon>
<div class="notification__title">
<template v-if="type === 'project_update' && project && version">
A project you follow,
<nuxt-link :to="getProjectLink(project)" class="title-link">{{ project.title }}</nuxt-link
>, has been updated:
<nuxt-link :to="getProjectLink(project)" class="title-link">{{ project.title }}</nuxt-link>
, has been updated:
</template>
<template v-else-if="type === 'team_invite' && project">
<nuxt-link
@@ -103,7 +103,8 @@
{{ project.title }}
</nuxt-link>
<template v-if="tags.rejectedStatuses.includes(notification.body.new_status)">
has been <Badge :type="notification.body.new_status" />
has been
<Badge :type="notification.body.new_status" />
</template>
<template v-else>
updated from
@@ -115,9 +116,9 @@
</template>
<template v-else-if="type === 'moderator_message' && thread && project && !report">
Your project,
<nuxt-link :to="getProjectLink(project)" class="title-link">{{ project.title }}</nuxt-link
>, has received
<template v-if="notification.grouped_notifs"> messages </template>
<nuxt-link :to="getProjectLink(project)" class="title-link">{{ project.title }}</nuxt-link>
, has received
<template v-if="notification.grouped_notifs"> messages</template>
<template v-else>a message</template>
from the moderators.
</template>
@@ -134,8 +135,9 @@
{{ project.title }}
</nuxt-link>
<nuxt-link v-else-if="user" :to="getUserLink(user)" class="title-link">
{{ user.username }} </nuxt-link
>.
{{ user.username }}
</nuxt-link>
.
</template>
<nuxt-link v-else :to="notification.link" class="title-link">
<span v-html="renderString(notification.title)" />
@@ -192,7 +194,9 @@
</template>
</div>
<span class="notification__date">
<span v-if="notification.read" class="read-badge inline-flex"> <ReadIcon /> Read </span>
<span v-if="notification.read" class="read-badge inline-flex">
<CheckCircleIcon /> Read
</span>
<span
v-tooltip="$dayjs(notification.created).format('MMMM D, YYYY [at] h:mm A')"
class="inline-flex"
@@ -224,7 +228,7 @@
}
"
>
<CrossIcon />
<XIcon />
</button>
</template>
<button
@@ -233,7 +237,7 @@
class="iconified-button square-button button-transparent"
@click="read()"
>
<CrossIcon />
<XIcon />
</button>
</div>
<div v-else class="notification__actions">
@@ -250,7 +254,8 @@
}
"
>
<CheckIcon /> Accept
<CheckIcon />
Accept
</button>
<button
class="iconified-button danger-button"
@@ -261,7 +266,8 @@
}
"
>
<CrossIcon /> Decline
<XIcon />
Decline
</button>
</template>
<button
@@ -270,7 +276,8 @@
:class="{ 'raised-button': raised }"
@click="read()"
>
<CheckIcon /> Mark as read
<CheckIcon />
Mark as read
</button>
<CopyCode v-if="flags.developerMode" :text="notification.id" />
</div>
@@ -293,7 +300,7 @@
@click="performAction(notification, actionIndex)"
>
<CheckIcon v-if="action.title === 'Accept'" />
<CrossIcon v-else-if="action.title === 'Deny'" />
<XIcon v-else-if="action.title === 'Deny'" />
{{ action.title }}
</button>
<button
@@ -302,7 +309,8 @@
:class="{ 'raised-button': raised }"
@click="performAction(notification, null)"
>
<CheckIcon /> Mark as read
<CheckIcon />
Mark as read
</button>
<CopyCode v-if="flags.developerMode" :text="notification.id" />
</div>
@@ -312,15 +320,17 @@
<script setup>
import { renderString } from "@modrinth/utils";
import InvitationIcon from "~/assets/images/utils/user-plus.svg?component";
import ModerationIcon from "~/assets/images/sidebar/admin.svg?component";
import NotificationIcon from "~/assets/images/sidebar/notifications.svg?component";
import ReadIcon from "~/assets/images/utils/check-circle.svg?component";
import CalendarIcon from "~/assets/images/utils/calendar.svg?component";
import VersionIcon from "~/assets/images/utils/version.svg?component";
import CheckIcon from "~/assets/images/utils/check.svg?component";
import CrossIcon from "~/assets/images/utils/x.svg?component";
import ExternalIcon from "~/assets/images/utils/external.svg?component";
import {
UserPlusIcon,
ScaleIcon,
BellIcon,
CheckCircleIcon,
CalendarIcon,
VersionIcon,
CheckIcon,
XIcon,
ExternalIcon,
} from "@modrinth/assets";
import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
import { getProjectLink, getVersionLink } from "~/helpers/projects.js";
import { getUserLink } from "~/helpers/users.js";
@@ -513,6 +523,7 @@ function getMessages() {
}
}
}
.notification__body {
grid-area: body;
@@ -583,6 +594,7 @@ function getMessages() {
&:not(:hover) {
text-decoration: none;
}
font-weight: bold;
}

View File

@@ -51,9 +51,7 @@
</template>
<script>
import GapIcon from "~/assets/images/utils/gap.svg?component";
import LeftArrowIcon from "~/assets/images/utils/left-arrow.svg?component";
import RightArrowIcon from "~/assets/images/utils/right-arrow.svg?component";
import { GapIcon, LeftArrowIcon, RightArrowIcon } from "@modrinth/assets";
export default {
components: {
@@ -151,6 +149,7 @@ a {
.has-icon {
display: flex;
align-items: center;
svg {
width: 1em;
}
@@ -167,6 +166,7 @@ a,
.paginates {
height: 2em;
margin: 0.5rem 0;
> div,
.has-icon {
margin: 0 0.3em;

View File

@@ -74,7 +74,7 @@
v-tooltip="$dayjs(updatedAt).format('MMMM D, YYYY [at] h:mm A')"
class="stat date"
>
<EditIcon aria-hidden="true" />
<UpdatedIcon aria-hidden="true" />
<span class="date-label">Updated </span>{{ fromNow(updatedAt) }}
</div>
<div
@@ -90,14 +90,10 @@
</template>
<script>
import { CalendarIcon, UpdatedIcon, DownloadIcon, HeartIcon } from "@modrinth/assets";
import Categories from "~/components/ui/search/Categories.vue";
import Badge from "~/components/ui/Badge.vue";
import EnvironmentIndicator from "~/components/ui/EnvironmentIndicator.vue";
import CalendarIcon from "~/assets/images/utils/calendar.svg?component";
import EditIcon from "~/assets/images/utils/updated.svg?component";
import DownloadIcon from "~/assets/images/utils/download.svg?component";
import HeartIcon from "~/assets/images/utils/heart.svg?component";
import Avatar from "~/components/ui/Avatar.vue";
export default {
@@ -107,7 +103,7 @@ export default {
Categories,
Badge,
CalendarIcon,
EditIcon,
UpdatedIcon,
DownloadIcon,
HeartIcon,
},

View File

@@ -6,10 +6,12 @@
</p>
<div class="input-group">
<button class="iconified-button brand-button" @click="acceptInvite()">
<CheckIcon />Accept
<CheckIcon />
Accept
</button>
<button class="iconified-button danger-button" @click="declineInvite()">
<CrossIcon />Decline
<XIcon />
Decline
</button>
</div>
</div>
@@ -32,21 +34,21 @@
:key="`checklist-${nag.id}`"
v-tooltip="nag.title"
:aria-label="nag.title"
class="circle"
:class="'circle ' + (!nag.condition ? 'done' : '') + nag.status"
class="circle"
>
<CheckIcon v-if="!nag.condition" />
<RequiredIcon v-else-if="nag.status === 'required'" />
<SuggestionIcon v-else-if="nag.status === 'suggestion'" />
<ModerationIcon v-else-if="nag.status === 'review'" />
<AsteriskIcon v-else-if="nag.status === 'required'" />
<LightBulbIcon v-else-if="nag.status === 'suggestion'" />
<ScaleIcon v-else-if="nag.status === 'review'" />
</div>
</div>
</div>
</div>
<div class="input-group">
<button
class="square-button"
:class="{ 'not-collapsed': !collapsed }"
class="square-button"
@click="toggleCollapsed()"
>
<DropdownIcon />
@@ -60,41 +62,41 @@
class="grid-display__item"
>
<span class="label">
<RequiredIcon
<AsteriskIcon
v-if="nag.status === 'required'"
v-tooltip="'Required'"
aria-label="Required"
:class="nag.status"
aria-label="Required"
/>
<SuggestionIcon
<LightBulbIcon
v-else-if="nag.status === 'suggestion'"
v-tooltip="'Suggestion'"
aria-label="Suggestion"
:class="nag.status"
aria-label="Suggestion"
/>
<ModerationIcon
<ScaleIcon
v-else-if="nag.status === 'review'"
v-tooltip="'Review'"
aria-label="Review"
:class="nag.status"
aria-label="Review"
/>{{ nag.title }}</span
>
{{ nag.description }}
<NuxtLink
v-if="nag.link"
:class="{ invisible: nag.link.hide }"
class="goto-link"
:to="`/${project.project_type}/${project.slug ? project.slug : project.id}/${
nag.link.path
}`"
class="goto-link"
>
{{ nag.link.title }}
<ChevronRightIcon class="featured-header-chevron" aria-hidden="true" />
<ChevronRightIcon aria-hidden="true" class="featured-header-chevron" />
</NuxtLink>
<button
v-else-if="nag.action"
class="btn btn-orange"
:disabled="nag.action.disabled()"
class="btn btn-orange"
@click="nag.action.onClick"
>
<SendIcon />
@@ -107,15 +109,15 @@
<script setup>
import { formatProjectType } from "~/plugins/shorthands.js";
import ChevronRightIcon from "~/assets/images/utils/chevron-right.svg?component";
import DropdownIcon from "~/assets/images/utils/dropdown.svg?component";
import CheckIcon from "~/assets/images/utils/check.svg?component";
import CrossIcon from "~/assets/images/utils/x.svg?component";
import RequiredIcon from "~/assets/images/utils/asterisk.svg?component";
import SuggestionIcon from "~/assets/images/utils/lightbulb.svg?component";
import ModerationIcon from "~/assets/images/sidebar/admin.svg?component";
import SendIcon from "~/assets/images/utils/send.svg?component";
import {
ChevronRightIcon,
CheckIcon,
XIcon,
AsteriskIcon,
LightBulbIcon,
SendIcon,
ScaleIcon,
} from "@modrinth/assets";
import { acceptTeamInvite, removeTeamMember } from "~/helpers/teams.js";
const props = defineProps({

View File

@@ -31,7 +31,9 @@
</div>
</nuxt-link>
<div v-else class="item-info">
<div class="backed-svg" :class="{ raised: raised }"><UnknownIcon /></div>
<div class="backed-svg" :class="{ raised: raised }">
<UnknownIcon />
</div>
<span>Reported user not found: <CopyCode :text="report.item_id" /> </span>
</div>
</div>
@@ -40,7 +42,9 @@
:to="`/project/${report.project.slug}/version/${report.version.id}`"
class="iconified-link"
>
<div class="backed-svg" :class="{ raised: raised }"><VersionIcon /></div>
<div class="backed-svg" :class="{ raised: raised }">
<VersionIcon />
</div>
<span class="title">{{ report.version.name }}</span>
</nuxt-link>
of
@@ -57,7 +61,9 @@
</nuxt-link>
</div>
<div v-else class="item-info">
<div class="backed-svg" :class="{ raised: raised }"><UnknownIcon /></div>
<div class="backed-svg" :class="{ raised: raised }">
<UnknownIcon />
</div>
<span>Unknown report type: {{ report.item_type }}</span>
</div>
<div class="report-type">
@@ -74,7 +80,8 @@
:auth="auth"
/>
<div class="reporter-info">
<ReportIcon class="inline-svg" /> Reported by
<ReportIcon class="inline-svg" />
Reported by
<span v-if="auth.user.id === report.reporterUser.id">you</span>
<nuxt-link v-else :to="`/user/${report.reporterUser.username}`" class="iconified-link">
<Avatar
@@ -96,12 +103,10 @@
</template>
<script setup>
import { ReportIcon, UnknownIcon, VersionIcon } from "@modrinth/assets";
import { renderHighlightedString } from "~/helpers/highlight.js";
import Avatar from "~/components/ui/Avatar.vue";
import Badge from "~/components/ui/Badge.vue";
import ReportIcon from "~/assets/images/utils/report.svg?component";
import UnknownIcon from "~/assets/images/utils/unknown.svg?component";
import VersionIcon from "~/assets/images/utils/version.svg?component";
import ThreadSummary from "~/components/ui/thread/ThreadSummary.vue";
import CopyCode from "~/components/ui/CopyCode.vue";

View File

@@ -17,7 +17,7 @@
</div>
<h3 class="flex items-center gap-2 text-base font-normal text-secondary">
{{ metric.title }}
<WarningIcon
<IssuesIcon
v-if="metric.warning"
v-tooltip="metric.warning"
class="size-5"
@@ -58,10 +58,9 @@
<script setup lang="ts">
import { ref, computed, shallowRef } from "vue";
import { FolderOpenIcon, CPUIcon, DBIcon } from "@modrinth/assets";
import { FolderOpenIcon, CPUIcon, DBIcon, IssuesIcon } from "@modrinth/assets";
import { useStorage } from "@vueuse/core";
import type { Stats } from "~/types/servers";
import WarningIcon from "~/assets/images/utils/issues.svg?component";
const route = useNativeRoute();
const serverId = route.params.id;

View File

@@ -28,13 +28,15 @@
:disabled="!submissionConfirmation"
@click="resubmit()"
>
<ModerationIcon aria-hidden="true" /> Resubmit for review
<ScaleIcon aria-hidden="true" />
Resubmit for review
</button>
</div>
</div>
</Modal>
<div v-if="flags.developerMode" class="thread-id">
Thread ID: <CopyCode :text="thread.id" />
Thread ID:
<CopyCode :text="thread.id" />
</div>
<div v-if="sortedMessages.length > 0" class="messages universal-card recessed">
<ThreadMessage
@@ -52,7 +54,8 @@
<template v-if="report && report.closed">
<p>This thread is closed and new messages cannot be sent to it.</p>
<button v-if="isStaff(auth.user)" class="iconified-button" @click="reopenReport()">
<CloseIcon aria-hidden="true" /> Reopen thread
<CheckCircleIcon aria-hidden="true" />
Reopen thread
</button>
</template>
<template v-else-if="!report || !report.closed">
@@ -70,10 +73,12 @@
:disabled="!replyBody"
@click="sendReply()"
>
<ReplyIcon aria-hidden="true" /> Reply
<ReplyIcon aria-hidden="true" />
Reply
</button>
<button v-else class="btn btn-primary" :disabled="!replyBody" @click="sendReply()">
<SendIcon aria-hidden="true" /> Send
<SendIcon aria-hidden="true" />
Send
</button>
<button
v-if="isStaff(auth.user)"
@@ -81,7 +86,8 @@
:disabled="!replyBody"
@click="sendReply(null, true)"
>
<ModerationIcon aria-hidden="true" /> Add private note
<ScaleIcon aria-hidden="true" />
Add private note
</button>
<template v-if="currentMember && !isStaff(auth.user)">
<template v-if="isRejected(project)">
@@ -90,14 +96,16 @@
class="iconified-button moderation-button"
@click="openResubmitModal(true)"
>
<ModerationIcon aria-hidden="true" /> Resubmit for review with reply
<ScaleIcon aria-hidden="true" />
Resubmit for review with reply
</button>
<button
v-else
class="iconified-button moderation-button"
@click="openResubmitModal(false)"
>
<ModerationIcon aria-hidden="true" /> Resubmit for review
<ScaleIcon aria-hidden="true" />
Resubmit for review
</button>
</template>
</template>
@@ -110,10 +118,12 @@
class="iconified-button danger-button"
@click="closeReport(true)"
>
<CloseIcon aria-hidden="true" /> Close with reply
<CheckCircleIcon aria-hidden="true" />
Close with reply
</button>
<button v-else class="iconified-button danger-button" @click="closeReport()">
<CloseIcon aria-hidden="true" /> Close thread
<CheckCircleIcon aria-hidden="true" />
Close thread
</button>
</template>
</template>
@@ -125,7 +135,8 @@
:disabled="isApproved(project)"
@click="sendReply(requestedStatus)"
>
<CheckIcon aria-hidden="true" /> Approve with reply
<CheckIcon aria-hidden="true" />
Approve with reply
</button>
<button
v-else
@@ -133,7 +144,8 @@
:disabled="isApproved(project)"
@click="setStatus(requestedStatus)"
>
<CheckIcon aria-hidden="true" /> Approve
<CheckIcon aria-hidden="true" />
Approve
</button>
<div class="joined-buttons">
<button
@@ -142,7 +154,8 @@
:disabled="project.status === 'rejected'"
@click="sendReply('rejected')"
>
<CrossIcon aria-hidden="true" /> Reject with reply
<XIcon aria-hidden="true" />
Reject with reply
</button>
<button
v-else
@@ -150,7 +163,8 @@
:disabled="project.status === 'rejected'"
@click="setStatus('rejected')"
>
<CrossIcon aria-hidden="true" /> Reject
<XIcon aria-hidden="true" />
Reject
</button>
<OverflowMenu
class="btn btn-danger btn-dropdown-animation icon-only"
@@ -182,9 +196,13 @@
>
<DropdownIcon style="rotate: 180deg" aria-hidden="true" />
<template #withhold-reply>
<EyeOffIcon aria-hidden="true" /> Withhold with reply
<EyeOffIcon aria-hidden="true" />
Withhold with reply
</template>
<template #withhold>
<EyeOffIcon aria-hidden="true" />
Withhold
</template>
<template #withhold> <EyeOffIcon aria-hidden="true" /> Withhold </template>
</OverflowMenu>
</div>
</template>
@@ -197,16 +215,18 @@
<script setup>
import { OverflowMenu, MarkdownEditor } from "@modrinth/ui";
import { DropdownIcon } from "@modrinth/assets";
import {
DropdownIcon,
ReplyIcon,
SendIcon,
CheckCircleIcon,
XIcon,
EyeOffIcon,
CheckIcon,
ScaleIcon,
} from "@modrinth/assets";
import { useImageUpload } from "~/composables/image-upload.ts";
import CopyCode from "~/components/ui/CopyCode.vue";
import ReplyIcon from "~/assets/images/utils/reply.svg?component";
import SendIcon from "~/assets/images/utils/send.svg?component";
import CloseIcon from "~/assets/images/utils/check-circle.svg?component";
import CrossIcon from "~/assets/images/utils/x.svg?component";
import EyeOffIcon from "~/assets/images/utils/eye-off.svg?component";
import CheckIcon from "~/assets/images/utils/check.svg?component";
import ModerationIcon from "~/assets/images/sidebar/admin.svg?component";
import ThreadMessage from "~/components/ui/thread/ThreadMessage.vue";
import { isStaff } from "~/helpers/users.js";
import { isApproved, isRejected } from "~/helpers/projects.js";

View File

@@ -24,7 +24,7 @@
</template>
<script setup>
import ChevronRightIcon from "~/assets/images/utils/chevron-right.svg?component";
import { ChevronRightIcon } from "@modrinth/assets";
import ThreadMessage from "~/components/ui/thread/ThreadMessage.vue";
const props = defineProps({