Adjusted styling for user role badges in light and dark mode for improved consistency

This commit is contained in:
Sanne de Vries 2020-09-03 13:28:43 +02:00
parent a8ce77b1f7
commit 0b27a366ff
2 changed files with 25 additions and 18 deletions

View File

@ -13,10 +13,10 @@
<div class="apps-card-right"> <div class="apps-card-right">
<div class="apps-configured"> <div class="apps-configured">
{{#if user.isSuspended}} {{#if user.isSuspended}}
<span class="gh-badge author">Suspended</span> <span class="gh-badge suspended">Suspended</span>
{{else}} {{else}}
{{#if user.isLocked}} {{#if user.isLocked}}
<span class="gh-badge author">Locked</span> <span class="gh-badge locked">Locked</span>
{{/if}} {{/if}}
{{#unless this.session.user.isAuthorOrContributor}} {{#unless this.session.user.isAuthorOrContributor}}
{{#each user.roles as |role|}} {{#each user.roles as |role|}}

View File

@ -107,41 +107,48 @@
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.gh-badge.owner { .gh-badge.owner {
background: var(--darkgrey); background: var(--middarkgrey);
text-transform: uppercase; text-transform: uppercase;
color: var(--white); color: var(--white);
} }
.gh-badge.administrator { .gh-badge.administrator {
background: var(--red); background: color-mod(var(--purple) a(15%));
text-transform: uppercase; text-transform: uppercase;
color: var(--white); color: var(--purple-d2);
} }
.gh-badge.editor { .gh-badge.editor {
background: var(--blue); background: color-mod(var(--blue) a(20%));
text-transform: uppercase; text-transform: uppercase;
color: var(--white); color: var(--blue-d2);
}
.gh-badge.contributor {
background: var(--lightgrey);
text-transform: uppercase;
color: var(--middarkgrey);
} }
.gh-badge.author { .gh-badge.author {
background: color-mod(var(--green) a(20%));
text-transform: uppercase;
color: var(--green-d2);
}
.gh-badge.suspended {
background: var(--lightgrey);
text-transform: uppercase;
color: var(--middarkgrey);
}
.gh-badge.locked {
border: color-mod(var(--lightgrey) blackness(+8%)) 1px solid; border: color-mod(var(--lightgrey) blackness(+8%)) 1px solid;
color: color-mod(var(--midgrey) l(+5%)); color: color-mod(var(--midgrey) l(+5%));
background: #fff; background: #fff;
text-transform: uppercase; text-transform: uppercase;
} }
.gh-badge.suspended {
font-size: 13px;
margin-left: 16px;
margin-top: 1px;
padding: 6px 8px;
border: color-mod(var(--midlightgrey) l(+10%)) 1px solid;
background: transparent;
color: var(--midgrey);
}
/* User invitation modal /* User invitation modal
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */