make dashboard elements smaller, add logo to login/register

This commit is contained in:
Gregor Vostrak
2024-03-14 22:57:35 +01:00
parent 5a733b17aa
commit 81e133528a
19 changed files with 66 additions and 42 deletions

View File

@@ -8,7 +8,8 @@ defineProps<{
</script>
<template>
<h3 class="text-white font-bold pb-4 text-lg flex items-center space-x-2.5">
<h3
class="text-white font-bold pb-4 text-base flex items-center space-x-2.5">
<component
v-if="icon"
:is="icon"

View File

@@ -22,8 +22,8 @@ const indicatorClasses = {
};
const badgeClasses = {
base: 'py-1 px-2 space-x-1.5 text-sm',
large: 'py-1.5 px-3 space-x-2 text-base text-muted',
base: 'py-1 px-2 space-x-1.5 text-xs',
large: 'py-1.5 px-3 space-x-2 text-sm text-muted',
};
</script>

View File

@@ -108,7 +108,7 @@ const selectedProjectColor = computed(() => {
<ComboboxInput
@keydown.enter="addProjectIfNoneExists"
ref="searchInput"
class="bg-card-background border-0 placeholder-muted text-white py-2.5 focus:ring-0 border-b border-card-background-seperator focus:border-card-background-seperator w-full"
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-seperator focus:border-card-background-seperator w-full"
placeholder="Search for a project..." />
</ComboboxAnchor>
<ComboboxContent>
@@ -144,7 +144,7 @@ const selectedProjectColor = computed(() => {
"
class="bg-card-background-active">
<div
class="flex space-x-3 items-center px-4 py-3 text-sm font-medium border-t rounded-b-lg border-card-background-seperator">
class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-seperator">
<PlusCircleIcon
class="w-5 flex-shrink-0"></PlusCircleIcon>
<span

View File

@@ -8,10 +8,10 @@ defineProps<{
<template>
<div
class="flex items-center space-x-3 w-full px-4 py-2.5 text-start text-base font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
<div
:style="{ backgroundColor: color }"
class="w-4 h-4 rounded-full"></div>
class="w-3 h-3 rounded-full"></div>
<span>{{ name }}</span>
</div>
</template>

View File

@@ -7,9 +7,9 @@ defineProps<{
<template>
<div
class="rounded-lg bg-card-background border-card-border border px-4 py-3">
<dt class="font-bold text-muted">{{ title }}</dt>
<dd class="text-3xl text-white pt-1 font-bold">
class="rounded-lg bg-card-background border-card-border border px-3.5 py-2.5">
<dt class="font-bold text-sm text-muted">{{ title }}</dt>
<dd class="text-2xl text-white pt-1 font-bold">
{{ value }}
</dd>
</div>

View File

@@ -172,7 +172,7 @@ function updateValue(e: string[]) {
@keydown.enter="addTagIfNoneExists"
data-testid="tag_dropdown_search"
ref="searchInput"
class="bg-card-background border-0 placeholder-muted text-white py-2.5 focus:ring-0 border-b border-card-background-seperator focus:border-card-background-seperator w-full"
class="bg-card-background border-0 placeholder-muted text-sm text-white py-2.5 focus:ring-0 border-b border-card-background-seperator focus:border-card-background-seperator w-full"
placeholder="Search for a tag..." />
</ComboboxAnchor>
<ComboboxContent>
@@ -182,7 +182,7 @@ function updateValue(e: string[]) {
v-if="searchValue.length > 0"
class="bg-card-background-active">
<div
class="flex space-x-3 items-center px-4 py-3 text-sm font-medium border-t rounded-b-lg border-card-background-seperator">
class="flex space-x-3 items-center px-4 py-3 text-xs font-medium border-t rounded-b-lg border-card-background-seperator">
<PlusCircleIcon
class="w-5 flex-shrink-0"></PlusCircleIcon>
<span

View File

@@ -19,8 +19,8 @@ const iconClasses = computed(() => {
<template>
<div
class="flex items-center space-x-3 w-full px-4 py-2.5 text-start text-base font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
<CheckCircleIcon :class="twMerge(iconClasses, 'w-6')"></CheckCircleIcon>
class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
<CheckCircleIcon :class="twMerge(iconClasses, 'w-5')"></CheckCircleIcon>
<span>{{ name }}</span>
</div>
</template>