mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2025-01-30 14:30:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update primary palette across project and improve icon colours

Browse Source 
Palette generated by putting #004EE9 into https://tailwind-color-palette.netlify.app/
This commit is contained in:
MD 2022-04-03 14:16:31 +01:00
parent 4cf99b8fcd
commit a4ca48c299
5 changed files with 37 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend-new/src/components/design/Button.vue
View File

@ -8,7 +8,7 @@ const props = withDefaults(
defineProps<{
disabled?: boolean;
size?: "small" | "medium" | "large";
type?: "primary" | "gray";
type?: "primary" | "gray" | "red";
}>(),
{
disabled: false,
@ -20,13 +20,13 @@ const paddingClass = computed(() => {
switch (props.size) {
default:
case "small": {
return "p-1";
return "p-1 space-x-0.7";
}
case "medium": {
return "p-2";
return "p-2 space-x-0.7";
}
case "large": {
return "p-3";
return "p-3 space-x-1.2";
}
}
});
@ -35,7 +35,6 @@ const paddingClass = computed(() => {
<template>
<button
:class="'rounded-md text-white font-semibold h-min inline-flex items-center ' + paddingClass + ' button-' + type"
:hover="disabled ? '' : 'bg-primary-50 text-primary-100'"
:disabled="disabled"
v-bind="$attrs"
@click="$emit('click')"

4
frontend-new/src/components/design/DropdownButton.vue
View File

@ -16,13 +16,13 @@ const props = withDefaults(
<template>
<Menu v-slot="{ open }">
<div>
<MenuButton class="p-2 rounded bg-primary-100 text-white font-semibold inline-flex items-center" hover="bg-primary-50 text-primary-100">
<MenuButton class="p-2 rounded bg-primary-400 text-white font-semibold inline-flex items-center" hover="bg-primary-0 text-primary-400">
<span class="mx-1">{{ props.name }}</span>
<IconMdiMenuUp v-if="open" class="text-lg"></IconMdiMenuUp>
<IconMdiMenuDown v-else class="text-lg"></IconMdiMenuDown>
</MenuButton>
<MenuItems
class="absolute flex flex-col mt-1 z-10 py-1 rounded border-t-2 border-primary-100 bg-background-light-0 dark:bg-background-dark-80 drop-shadow-xl"
class="absolute flex flex-col mt-1 z-10 py-1 rounded border-t-2 border-primary-400 bg-background-light-0 dark:bg-background-dark-80 drop-shadow-xl"
>
<slot></slot>
</MenuItems>

6
frontend-new/src/components/layout/Footer.vue
View File

@ -4,9 +4,9 @@
<div class="footerBar flex items-center justify-around mt-4 max-w-1200px m-auto text-sm">
<p>Copyright © <a href="https://papermc.io/">PaperMC</a> 2016 - 2022</p>
<div class="footerBarLinks flex">
<router-link :to="{ name: 'staff' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-100 bg-primary-50">About Hangar </router-link>
<router-link :to="{ name: 'staff' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-100 bg-primary-50">Imprint </router-link>
<router-link :to="{ name: 'staff' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-100 bg-primary-50"
<router-link :to="{ name: 'staff' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-400 bg-primary-0">About Hangar </router-link>
<router-link :to="{ name: 'staff' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-400 bg-primary-0">Imprint </router-link>
<router-link :to="{ name: 'staff' }" class="flex items-center rounded-md px-6 py-2" hover="text-primary-400 bg-primary-0"
>Privacy Policy
</router-link>
</div>

14
frontend-new/src/components/layout/Header.vue
View File

@ -92,7 +92,7 @@ authLog("render with user " + authStore.user?.name);
:key="link.label"
:to="{ name: link.link }"
class="flex items-center rounded-md px-6 py-2"
hover="text-primary-100 bg-primary-50"
hover="text-primary-400 bg-primary-0"
>
<component :is="link.icon" class="mr-3 text-[1.2em]" />
{{ link.label }}
@ -106,7 +106,7 @@ authLog("render with user " + authStore.user?.name);
:key="link.label"
class="flex items-center rounded-md px-6 py-2"
:href="link.link"
hover="text-primary-100 bg-primary-50"
hover="text-primary-400 bg-primary-0"
>
<component :is="link.icon" class="mr-3 text-[1.2em]" />
{{ link.label }}
@ -143,7 +143,7 @@ authLog("render with user " + authStore.user?.name);
<DropdownItem to="/organizations/new">{{ t("nav.new.organization") }}</DropdownItem>
</DropdownButton>
</div>
<button class="flex rounded-md p-2" hover="text-primary-100 bg-primary-50" @click="settings.toggleDarkMode()">
<button class="flex rounded-md p-2" hover="text-primary-400 bg-primary-0" @click="settings.toggleDarkMode()">
<icon-mdi-weather-night v-if="settings.darkMode" class="text-[1.2em]"></icon-mdi-weather-night>
<icon-mdi-white-balance-sunny v-else class="text-[1.2em]"></icon-mdi-white-balance-sunny>
</button>
@ -151,13 +151,13 @@ authLog("render with user " + authStore.user?.name);
<div v-if="authStore.user">
<Menu>
<MenuButton>
<div class="flex items-center gap-2 rounded-md p-2" hover="text-primary-100 bg-primary-50">
<div class="flex items-center gap-2 rounded-md p-2" hover="text-primary-400 bg-primary-0">
<UserAvatar :username="authStore.user.name" size="xs" :background="false"></UserAvatar>
{{ authStore.user.name }}
</div>
</MenuButton>
<MenuItems
class="absolute flex flex-col mt-1 z-10 py-1 rounded border-t-2 border-primary-100 bg-background-light-0 dark:bg-background-dark-80 drop-shadow-xl"
class="absolute flex flex-col mt-1 z-10 py-1 rounded border-t-2 border-primary-400 bg-background-light-0 dark:bg-background-dark-80 drop-shadow-xl"
>
<DropdownItem :to="'/' + authStore.user.name">{{ t("nav.user.profile") }}</DropdownItem>
<DropdownItem to="/notifications">{{ t("nav.user.notifications") }}</DropdownItem>
@ -181,11 +181,11 @@ authLog("render with user " + authStore.user?.name);
<!-- Login/register buttons -->
<div v-else class="flex gap-2">
<a class="flex items-center rounded-md p-2" :href="auth.loginUrl($route.fullPath)" hover="text-primary-100 bg-primary-50">
<a class="flex items-center rounded-md p-2" :href="auth.loginUrl($route.fullPath)" hover="text-primary-400 bg-primary-0">
<icon-mdi-key-outline class="mr-1 text-[1.2em]" />
{{ t("nav.login") }}
</a>
<router-link class="flex items-center rounded-md p-2" to="/signup" hover="text-primary-100 bg-primary-50">
<router-link class="flex items-center rounded-md p-2" to="/signup" hover="text-primary-400 bg-primary-0">
<icon-mdi-clipboard-outline class="mr-1 text-[1.2em]" />
{{ t("nav.signup") }}
</router-link>

29
frontend-new/windi.config.ts
View File

@ -4,7 +4,7 @@ import typography from "windicss/plugin/typography";
export default defineConfig({
darkMode: "class",
safelist: "order-last button-primary button-gray",
safelist: "order-last button-primary button-gray button-red",
attributify: true,
plugins: [typography()],
theme: {
@ -58,22 +58,35 @@ export default defineConfig({
},
},
colors: {
primary: {
0: "#E6EDFD", // old primary-50
50: "#CCDCFB",
100: "#99B8F6", // old primary-70
200: "#6695F2",
300: "#3371ED",
400: "#004EE9", // old primary-100
500: "#003EBA",
600: "#002F8C",
700: "#001F5D",
800: "#00102F",
900: "#000817",
},
"background-dark-90": "#111111",
"background-dark-80": "#181a1b",
"background-light-10": "#f8faff",
"background-light-0": "#ffffff",
"primary-100": "#004ee9",
"primary-70": "#aec9ff",
"primary-50": "#ecf2fb",
},
},
},
shortcuts: {
"background-header": "bg-background-light-0 dark:bg-background-dark-90",
"background-body": "bg-background-light-10 dark:bg-background-dark-80",
"color-primary": "text-primary-100 dark:text-primary-70",
"border-top-primary": "border-solid border-t-4 border-t-primary-100",
"button-gray": "bg-zinc-500 dark:bg-slate-700 disabled:(bg-gray-300 text-neutral-500 cursor-not-allowed)",
"button-primary": "bg-primary-100 disabled:(bg-gray-300 text-neutral-500 cursor-not-allowed)",
"color-primary": "text-primary-400 dark:text-primary-100",
"border-top-primary": "border-solid border-t-4 border-t-primary-400",
"button-primary": "bg-primary-400 disabled:(bg-primary-100 dark:(bg-primary-800 text-neutral-500) cursor-not-allowed) enabled:hover:bg-primary-300",
"button-red":
"bg-red-500 dark:bg-red-600 disabled:(bg-red-300 dark:(bg-red-900 text-neutral-400) cursor-not-allowed) enabled:hover:(bg-red-400 dark:bg-red-500)",
"button-gray":
"bg-zinc-500 dark:bg-slate-700 disabled:(bg-zinc-300 text-neutral-500 dark:bg-zinc-800 cursor-not-allowed) enabled:hover:(bg-zinc-400 dark:bg-slate-600)",
},
});