Improve badges and work on a more unified color scheme for random colors (#756)

This commit is contained in:
Prospector
2022-11-20 13:57:44 -08:00
committed by GitHub
parent 9849bc055c
commit 88fa103acb
19 changed files with 148 additions and 180 deletions

View File

@@ -179,24 +179,7 @@
<div class="status-info"></div>
<p>
Your project is currently:
<VersionBadge
v-if="project.status === 'approved'"
color="green"
:type="project.status"
/>
<VersionBadge
v-else-if="
project.status === 'processing' || project.status === 'archived'
"
color="yellow"
:type="project.status"
/>
<VersionBadge
v-else-if="project.status === 'rejected'"
color="red"
:type="project.status"
/>
<VersionBadge v-else color="gray" :type="project.status" />
<Badge :type="project.status" />
</p>
<div class="message">
<p v-if="project.status === 'rejected'">
@@ -435,17 +418,17 @@
}}
{{ $formatVersion(version.game_versions) }}
</div>
<VersionBadge
<Badge
v-if="version.version_type === 'release'"
type="release"
color="green"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'beta'"
type="beta"
color="yellow"
color="orange"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'alpha'"
type="alpha"
color="red"
@@ -778,17 +761,17 @@
}}
{{ $formatVersion(version.game_versions) }}
</div>
<VersionBadge
<Badge
v-if="version.version_type === 'release'"
type="release"
color="green"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'beta'"
type="beta"
color="yellow"
color="orange"
/>
<VersionBadge
<Badge
v-else-if="version.version_type === 'alpha'"
type="alpha"
color="red"
@@ -892,7 +875,7 @@ import OpenCollectiveIcon from '~/assets/images/external/opencollective.svg?inli
import UnknownIcon from '~/assets/images/utils/unknown-donation.svg?inline'
import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?inline'
import Advertisement from '~/components/ads/Advertisement'
import VersionBadge from '~/components/ui/Badge'
import Badge from '~/components/ui/Badge'
import Categories from '~/components/ui/search/Categories'
import ModalReport from '~/components/ui/ModalReport'
import NavRow from '~/components/ui/NavRow'
@@ -904,7 +887,7 @@ export default {
Avatar,
CopyCode,
NavRow,
VersionBadge,
Badge,
Advertisement,
ModalReport,
IssuesIcon,

View File

@@ -182,18 +182,18 @@ export default {
padding-left: 1.8rem;
.changelog-bar {
--color: var(--color-badge-green-bg);
--color: var(--color-special-green);
&.alpha {
--color: var(--color-badge-red-bg);
--color: var(--color-special-red);
}
&.release {
--color: var(--color-badge-green-bg);
--color: var(--color-special-green);
}
&.beta {
--color: var(--color-badge-yellow-bg);
--color: var(--color-special-orange);
}
left: 0;

View File

@@ -952,7 +952,7 @@ section.donations {
}
.required {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
}
.vertical-input {

View File

@@ -95,7 +95,7 @@
</div>
<div class="side-buttons">
<Badge v-if="member.accepted" type="accepted" color="green" />
<Badge v-else type="pending" color="yellow" />
<Badge v-else type="pending" color="orange" />
<button
class="dropdown-icon"
@click="

View File

@@ -234,7 +234,7 @@
v-else-if="version.version_type === 'beta'"
class="value"
type="beta"
color="yellow"
color="orange"
/>
<VersionBadge
v-else-if="version.version_type === 'alpha'"
@@ -1125,7 +1125,7 @@ export default {
}
.required {
color: var(--color-badge-red-bg);
color: var(--color-special-red);
}
.version-header {

View File

@@ -55,7 +55,7 @@
<VersionBadge
v-else-if="version.version_type === 'beta'"
type="beta"
color="yellow"
color="orange"
/>
<VersionBadge
v-else-if="version.version_type === 'alpha'"

View File

@@ -359,13 +359,13 @@ export default {
&.completed {
svg {
color: var(--color-brand);
color: var(--color-special-green);
}
}
&.in-progress {
svg {
color: var(--color-badge-yellow-bg);
color: var(--color-special-orange);
}
}
@@ -373,7 +373,7 @@ export default {
p {
user-select: none;
color: transparent;
text-shadow: 0 0 12px var(--color-badge-yellow-bg);
text-shadow: 0 0 12px var(--color-special-orange);
}
}
}

View File

@@ -9,26 +9,7 @@
</p>
<div class="status">
<span>New project status: </span>
<Badge
v-if="currentProject.newStatus === 'approved'"
color="green"
:type="currentProject.newStatus"
/>
<Badge
v-else-if="
currentProject.newStatus === 'processing' ||
currentProject.newStatus === 'unlisted' ||
currentProject.newStatus === 'archived'
"
color="yellow"
:type="currentProject.newStatus"
/>
<Badge
v-else-if="currentProject.newStatus === 'rejected'"
color="red"
:type="currentProject.newStatus"
/>
<Badge v-else color="gray" :type="currentProject.newStatus" />
<Badge :type="currentProject.newStatus" />
</div>
<input
v-model="currentProject.moderation_message"
@@ -155,7 +136,7 @@
class="markdown-body"
v-html="$xss($md.render(item.body))"
/>
<Badge :type="`Marked as ${item.report_type}`" color="yellow" />
<Badge :type="`Marked as ${item.report_type}`" color="orange" />
</div>
<div class="actions">
<button class="iconified-button" @click="deleteReport(index)">

View File

@@ -92,13 +92,11 @@
</template>
<template v-else>
<div class="sidebar__item">
<Badge v-if="user.role === 'admin'" type="admin" color="red" />
<Badge
v-else-if="user.role === 'moderator'"
type="moderator"
color="yellow"
v-if="user.role === 'admin' || user.role === 'moderator'"
:type="user.role"
/>
<Badge v-else type="developer" color="green" />
<Badge v-else-if="projects.length > 0" type="creator" />
</div>
<span v-if="user.bio" class="sidebar__item bio">{{
user.bio