Skip to content

Commit 3fe8d3f

Browse files
NamesMTNamesMT
committed
refactor: update layouts, add font size tokens
1 parent 42c8b84 commit 3fe8d3f

8 files changed

Lines changed: 76 additions & 24 deletions

File tree

‎apps/frontend/app/components/chat/LanguageDropdown.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script setup lang="ts">
2+
const { locale, locales, setLocale } = useI18n()
3+
</script>
4+
5+
<template>
6+
<DropdownMenu :modal="true">
7+
<DropdownMenuTrigger>
8+
<Button
9+
class="h-fit w-11.5 px-2 py-1 font-medium uppercase text-h-4!"
10+
variant="ghost"
11+
>
12+
{{ locale.substring(0, 2) }}
13+
</Button>
14+
</DropdownMenuTrigger>
15+
<DropdownMenuContent>
16+
<DropdownMenuItem
17+
v-for="l of locales" :key="l.code"
18+
class="font-medium uppercase"
19+
@click="setLocale(l.code)"
20+
>
21+
{{ l.code }} ({{ l.name }})
22+
</DropdownMenuItem>
23+
</DropdownMenuContent>
24+
</DropdownMenu>
25+
</template>

‎apps/frontend/app/components/chat/settings/GeneralSettingsSheet.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const [DefineShortcutLi, ReuseShortcutLi] = createReusableTemplate<{ title: stri
5454
<div class="flex items-center gap-2">
5555
<Button class="w-fit uppercase" variant="outline" @pointerdown="setLocale(computedNextLocale)">
5656
<div class="flex items-center text-mainGradient">
57-
<div i-hugeicons:translate class="bg-mainGradient" />: <p class="ml-1">
57+
<div class="i-hugeicons:translate bg-mainGradient" />: <p class="ml-1">
5858
{{ locale.substring(0, 2) }}
5959
</p>
6060
</div>

‎apps/frontend/app/components/layouts/default/DefaultHeader.vue‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,44 @@ const convexVueContext = inject<ConvexVueContext>('convex-vue')
66
</script>
77

88
<template>
9-
<header class="grid grid-cols-12 h-73px items-center border-b bg-surface-100 px-2 transition-background-color view-transition-header xl:gap-10 dark:bg-surface-800 lg:px-8 md:px-6 sm:px-4">
9+
<header class="grid grid-cols-12 h-73px items-center text-h-4 view-transition-header xl:gap-10">
1010
<div class="col-span-3 h-full flex items-center justify-start gap-2 py-4 text-xl">
11-
<NuxtLink to="/" class="h-full">
11+
<NuxtLink to="https://github.com/NamesMT/starter-monorepo" external target="_blank" class="h-full flex items-center gap-3 text-h-3 font-black">
1212
<Logo class="h-full text-surface-900 dark:text-surface-0" />
13+
<h1 class="whitespace-nowrap max-sm:hidden">
14+
starter-monorepo
15+
</h1>
1316
</NuxtLink>
1417
</div>
1518

1619
<div
17-
class="col-span-6 h-full flex flex-row justify-center gap-2 text-surface-700 font-medium 2xl:gap-10 lg:gap-6 md:gap-5 sm:gap-4 xl:gap-7 [&>*]:(px-4 md:px-6 xl:px-8) dark:text-surface-300"
20+
class="col-span-6 flex flex-row justify-center gap-2 py-2.5 text-surface-700 font-medium 2xl:gap-8 lg:gap-5 md:gap-4 sm:gap-3 xl:gap-6 [&>*]:(px-2) dark:text-surface-300"
1821
>
1922
<NuxtLink
2023
to="/" class="group flex items-center"
21-
exact-active-class="text-accent-foreground font-semibold border-t-2px border-primary bg-gradient-to-b from-primary/20"
24+
exact-active-class="text-secondary border-b-2px border-secondary"
2225
>
23-
<span class="group-hover:text-mainGradient">{{ $t('pages.home.title') }}</span>
26+
<span class="transition-all group-hover:text-h-3 group-hover:text-accent-foreground">{{ $t('pages.home.title') }}</span>
2427
</NuxtLink>
25-
2628
<NuxtLink
2729
to="/test" class="group flex items-center"
28-
active-class="text-accent-foreground font-semibold border-t-2px border-primary bg-gradient-to-b from-primary/20"
30+
exact-active-class="text-secondary border-b-2px border-secondary"
2931
>
30-
<span class="group-hover:text-primary">{{ $t('pages.test.title') }}</span>
32+
<span class="transition-all group-hover:text-h-3 group-hover:text-accent-foreground">{{ $t('pages.test.title') }}</span>
3133
</NuxtLink>
32-
3334
<NuxtLink
3435
v-if="convexVueContext?.clientRef?.value"
3536
to="/chat" class="group flex items-center"
36-
active-class="text-accent-foreground font-semibold border-t-2px border-primary bg-gradient-to-b from-primary/20"
37+
exact-active-class="text-secondary border-b-2px border-secondary"
3738
>
38-
<span class="group-hover:text-primary">{{ $t('pages.chat.title') }}</span>
39+
<span class="transition-all group-hover:text-h-3 group-hover:text-accent-foreground">{{ $t('pages.chat.title') }}</span>
3940
</NuxtLink>
4041
</div>
4142

4243
<div class="col-span-3 flex">
43-
<div class="flex grow items-center justify-end gap-5" />
44+
<div class="flex grow items-center justify-end gap-4">
45+
<LanguageDropdown />
46+
</div>
4447
</div>
4548
</header>
4649
</template>

‎apps/frontend/app/layouts/basic.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ const title = computed(() => route.meta.title && t(route.meta.title))
1111
<div>
1212
<Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir" class="font-sans">
1313
<Head>
14-
<Title>{{ title }}</Title>
14+
<Title>
15+
{{ title }}
16+
</Title>
1517
<template v-for="link in head.link" :key="link.id">
1618
<Link :id="link.id" :rel="link.rel" :href="link.href" :hreflang="link.hreflang" />
1719
</template>

‎apps/frontend/app/layouts/default.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<script setup>
1+
<script setup lang="ts">
22
const route = useRoute()
33
const { t } = useI18n()
44
const head = useLocaleHead({
5-
key: 'id',
65
})
7-
const title = computed(() => route.meta.title && t(route.meta.title))
6+
7+
const title = computed(() => route.meta.title && t(route.meta.title as string))
88
99
const windowsScroll = useWindowScroll()
1010
useEventListener('resize', () => { windowsScroll.measure() })
@@ -15,7 +15,9 @@ watch(() => route.name, () => { windowsScroll.measure() })
1515
<div>
1616
<Html :lang="head.htmlAttrs.lang" :dir="head.htmlAttrs.dir" class="font-sans">
1717
<Head>
18-
<Title>{{ title }}</Title>
18+
<Title>
19+
{{ title }}
20+
</Title>
1921
<template v-for="link in head.link" :key="link.id">
2022
<Link :id="link.id" :rel="link.rel" :href="link.href" :hreflang="link.hreflang" />
2123
</template>
@@ -32,7 +34,7 @@ watch(() => route.name, () => { windowsScroll.measure() })
3234
class="fixed w-full pr-[--scrollbar-width] transition-top"
3335
:class="windowsScroll.arrivedState.top ? 'top-0' : '-top-20'"
3436
>
35-
<DefaultHeader />
37+
<DefaultHeader class="px-5 2xl:px-20 lg:px-10 xl:px-15" />
3638
</div>
3739

3840
<!-- NuxtPage -->

‎apps/frontend/app/pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const { isPending, isError, data, error } = useQuery({
3434
</script>
3535

3636
<template>
37-
<div class="w-full flex flex-col items-center justify-center gap-6 px-4 py-8 text-center">
37+
<div class="w-full flex flex-col items-center justify-center gap-6 text-center">
3838
<!-- GridMaker Section -->
3939
<div class="max-w-2xl w-full border rounded-lg p-4 shadow">
4040
<h2 class="mb-3 text-xl font-semibold">

‎apps/frontend/app/pages/test.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const convexVueContext = inject<ConvexVueContext>('convex-vue')
99
</script>
1010

1111
<template>
12-
<div class="w-full flex flex-col items-center justify-center gap-6 px-4 py-8 text-center">
12+
<div class="w-full flex flex-col items-center justify-center gap-6 text-center">
1313
<div class="max-w-2xl w-full border rounded-lg p-4 shadow">
1414
<h2 class="mb-2 text-2xl font-semibold">
1515
{{ $t('pages.test.title') }}

‎apps/frontend/uno.config.ts‎

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {
22
defineConfig,
3-
presetAttributify,
43
presetIcons,
54
presetTypography,
65
presetWebFonts,
@@ -49,6 +48,17 @@ function commonColorVarsGen(varName: string, additionalVars?: Array<string>) {
4948

5049
export default defineConfig({
5150
theme: {
51+
fontSize: {
52+
'h-1': ['40px', '48px'],
53+
'h-2': ['32px', '40px'],
54+
'h-3': ['24px', '32px'],
55+
'h-4': ['20px', '28px'],
56+
57+
'body-1': ['18px', '26px'],
58+
'body-2': ['16px', '24px'],
59+
'body-3': ['14px', '20px'],
60+
'body-4': ['12px', '16px'],
61+
},
5262
ringWidth: {
5363
DEFAULT: '3px',
5464
},
@@ -81,11 +91,22 @@ export default defineConfig({
8191
]),
8292
},
8393
},
94+
extendTheme: (theme) => {
95+
return {
96+
...theme,
97+
breakpoints: {
98+
...theme.breakpoints,
99+
xs: '380px',
100+
fhd: '1920px',
101+
qhd: '2560px',
102+
},
103+
}
104+
},
84105
safelist: [
85106
...Object.values(codeIconMap).map(i => `i-${i}`),
86107
],
87108
shortcuts: [
88-
['bg-mainGradient', 'bg-gradient-to-b from-primary via-primary to-violet-400'],
109+
['bg-mainGradient', 'bg-gradient-to-b from-primary via-primary to-secondary'],
89110
['text-mainGradient', 'bg-mainGradient bg-clip-text text-transparent transition-color duration-200'],
90111
],
91112
rules: [
@@ -122,7 +143,6 @@ export default defineConfig({
122143
],
123144
presets: [
124145
presetWind3(),
125-
presetAttributify(),
126146
presetIcons({
127147
scale: 1.2,
128148
cdn: 'https://esm.sh/',

0 commit comments

Comments
 (0)