Skip to content

Commit 54ec4a0

Browse files
youngbeom-shin申永范-UX
youngbeom-shin
and
申永范-UX
authored
feat(navbar): update styles and improve UI (#1143)
* feat(navbar): update styles and improve UI * feat(navbar): update styles and improve UI * fix(navbar): adjust menu item height Reduced height of menu items from 48px to 46px. Updated styles for all affected menu items. --------- Co-authored-by: 申永范-UX <yf.shen@opencsg.com>
1 parent 0b95059 commit 54ec4a0

File tree

6 files changed

+83
-30
lines changed

6 files changed

+83
-30
lines changed

‎frontend/src/assets/stylesheets/element-plus/menu.css

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:root {
22
--el-menu-hover-bg-color: var(--Gray-50);
3-
--el-menu-hover-text-color: var(--Brand-400);
3+
--el-menu-hover-text-color: var(--Brand-600);
44
--el-menu-active-color: var(--Brand-600);
55
.el-menu-item {
66
padding: 8px 14px;
@@ -10,9 +10,20 @@
1010
font-weight: var(--el-menu-item-font-weight);
1111
line-height: 20px;
1212
};
13+
.el-menu-item:hover {
14+
color: var(--Brand-600) !important;
15+
};
16+
.el-menu-item.is-active {
17+
font-weight: 400 !important;
18+
};
1319
.el-sub-menu .el-sub-menu__title{
1420
font-weight: var(--el-menu-item-font-weight);
1521
};
22+
.el-sub-menu__title:hover,
23+
.el-tooltip__trigger:hover,
24+
.el-sub-menu__title.el-tooltip__trigger:hover {
25+
color: var(--Brand-600) !important;
26+
};
1627
.el-menu--popup {
1728
border-radius: var(--border-radius-xl);
1829
padding: 12px 0;
@@ -23,12 +34,19 @@
2334
.el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover {
2435
background-color: var(--el-menu-hover-bg-color);
2536
border-radius: var(--el-border-radius-base);
37+
color: var(--Brand-600) !important;
2638
};
2739
.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
2840
border: none;
41+
border-bottom: none !important;
42+
color: var(--Brand-600) !important;
43+
};
44+
.el-menu--horizontal>.el-sub-menu .el-sub-menu__title {
45+
border-bottom: none !important;
2946
};
3047
.el-menu--vertical .el-sub-menu__title:hover {
3148
background-color: white;
49+
color: var(--Brand-600) !important;
3250
};
3351
.el-menu--horizontal.el-menu {
3452
border: none;

‎frontend/src/components/navbar/MenuItems.vue

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
<template #title>
5151
<SvgIcon
5252
name="more_menu"
53-
class="p-[4px]" />
53+
class="p-1" />
5454
{{ $t('navbar.more') }}
5555
</template>
5656

@@ -134,20 +134,20 @@
134134
title: t('navbar.models'),
135135
index: '/models',
136136
class: menuItemClass,
137-
style: 'border:none; height: 48px; border-radius: 4px; padding: 12px 16px;',
137+
style: 'border:none; height: 46px; border-radius: 4px; padding: 12px 16px;',
138138
},
139139
{
140140
title: t('navbar.datasets'),
141141
index: '/datasets',
142142
class: menuItemClass,
143-
style: 'border:none; height: 48px; border-radius: 4px; padding: 12px 16px;',
143+
style: 'border:none; height: 46px; border-radius: 4px; padding: 12px 16px;',
144144
},
145145
{
146146
title: t('navbar.mcp'),
147147
index: '/mcp/servers',
148148
class: menuItemClass,
149149
style:
150-
'border:none; height: 48px; border-radius: 4px; padding: 12px 16px;',
150+
'border:none; height: 46px; border-radius: 4px; padding: 12px 16px;',
151151
items: [
152152
{
153153
title: t('navbar.mcpText'),
@@ -173,25 +173,25 @@
173173
title: t('navbar.spaces'),
174174
index: '/spaces',
175175
class: menuItemClass,
176-
style: 'border:none; height: 48px; border-radius: 4px; padding: 12px 16px;',
176+
style: 'border:none; height: 46px; border-radius: 4px; padding: 12px 16px;',
177177
},
178178
{
179179
title: t('navbar.codes'),
180180
index: '/codes',
181181
class: menuItemClass,
182-
style: 'border:none; height: 48px; border-radius: 4px; padding: 12px 16px;',
182+
style: 'border:none; height: 46px; border-radius: 4px; padding: 12px 16px;',
183183
},
184184
{
185185
title: t('collections.collection'),
186186
index: '/collections',
187187
class: menuItemClass,
188-
style: 'border:none; height: 48px; border-radius: 4px; padding: 12px 16px;',
188+
style: 'border:none; height: 46px; border-radius: 4px; padding: 12px 16px;',
189189
},
190190
{
191191
title: t('prompts.promptLibrary'),
192192
index: '/prompts/library',
193193
class: menuItemClass,
194-
style: 'border:none; height: 48px; border-radius: 4px; padding: 12px 16px;',
194+
style: 'border:none; height: 46px; border-radius: 4px; padding: 12px 16px;',
195195
}
196196
]
197197
@@ -241,22 +241,24 @@
241241
}
242242
243243
const menuItemClass =
244-
'md:!px-[12px] md:!py-[16px] md:!h-auto js-menu-item-width'
245-
const subMenuClass = 'md:!h-auto md:!py-[16px] js-menu-item-width'
246-
const subMenuItemClass = 'mx-[12px] md:mx-0 md:!px-[12px]'
244+
'md:!px-3 md:!py-4 md:!h-auto js-menu-item-width'
245+
const subMenuClass = 'md:!h-auto md:!py-4 js-menu-item-width'
246+
const subMenuItemClass = 'mx-3 md:mx-0 md:!px-3'
247247
const popperClass = 'popper-submenu'
248248
</script>
249249

250250
<style scoped>
251251
:deep(.el-sub-menu__title) {
252252
/* padding: 16px; */
253+
color: var(--Gray-600);
253254
}
254255
:deep(.popper-submenu .el-menu) {
255256
min-width: 200px;
256257
padding: var(--el-menu-base-level-padding);
257258
}
258259
:deep(.popper-submenu .el-menu .el-menu-item) {
259260
font-size: 16px;
261+
font-weight: 400;
260262
height: 46px;
261263
line-height: 24px;
262264
}

‎frontend/src/components/navbar/Navbar.vue

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<template>
22
<UpdateUsername />
3-
<div class="border-b sticky top-0 z-[999] csg-navbar bg-white border-gray-200">
3+
<div
4+
class="border-b sticky top-0 z-[999]"
5+
:class="`bg-${theme} ${
6+
theme === 'black' ? 'border-gray-950' : 'border-gray-200'
7+
}`"
8+
>
49
<div
510
class="page-responsive-width flex text-gray-700 justify-between items-center h-20 sm:h-15 gap-6 md:px-5">
611
<!-- pc logo -->
@@ -65,25 +70,35 @@
6570
v-if="false"
6671
class="el-dropdown-link relative">
6772
<el-avatar
68-
:size="35"
73+
:size="36"
6974
:src="avatar">
7075
</el-avatar>
71-
<SvgIcon name="verified_company" height="15px" width="15px" class="absolute right-0 top-[25px]" />
76+
<SvgIcon
77+
name="verified_company"
78+
height="15px"
79+
width="15px"
80+
class="absolute right-0 top-6"
81+
/>
7282
</span>
7383
<span
7484
v-else-if="false"
7585
class="el-dropdown-link relative">
7686
<el-avatar
77-
:size="35"
87+
:size="36"
7888
:src="avatar">
7989
</el-avatar>
80-
<SvgIcon name="company" height="15px" width="15px" class="absolute right-0 top-[25px]" />
90+
<SvgIcon
91+
name="company"
92+
height="15px"
93+
width="15px"
94+
class="absolute right-0 top-6"
95+
/>
8196
</span>
8297
<span
8398
v-else
8499
class="el-dropdown-link">
85100
<el-avatar
86-
:size="35"
101+
:size="36"
87102
:src="avatar">
88103
</el-avatar>
89104
</span>
@@ -275,15 +290,15 @@
275290
<el-menu
276291
:default-active="activeIndex"
277292
:ellipsis="false"
278-
class="w-full flex flex-col justify-center gap-4 pt-16"
293+
class="w-full flex flex-col justify-center pt-16"
279294
unique-opened
280295
style="
281296
--el-menu-base-level-padding: 12px;
282297
--el-menu-item-font-size: 16px;
283298
--el-menu-item-font-weight: 400;
284299
--el-menu-item-height: auto;
285300
"
286-
text-color="#475467"
301+
text-color="gray-600"
287302
>
288303
<MenuItems
289304
:isLoggedInBoolean="isLoggedIn"

‎frontend/src/components/navbar/menuItem/Mcp.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<div class="menuItem min-h-max flex md:items-center gap-[16px] py-[10px]">
3-
<div class="pt-[6px] md:pt-0">
4-
<SvgIcon name="space_mcp" />
2+
<div class="menuItem min-h-max flex md:items-center gap-4 py-2.5">
3+
<div class="pt-0.5 md:pt-0">
4+
<SvgIcon name="space_mcp" width="20px" />
55
</div>
66
<div class="max-w-[247px] flex flex-col whitespace-normal">
7-
<div class="text-[#101828] text-[16px]">{{ $t('navbar.mcpText') }}</div>
7+
<div class="text-gray-900 text-md">{{ $t('navbar.mcp') }}</div>
88
<div
9-
class="text-[14px] w-[247px] md:w-[unset] text-[#475467] font-light leading-[20px] md:hidden"
9+
class="text-sm w-[247px] md:w-[unset] text-gray-600 font-light leading-5 md:hidden"
1010
>
1111
{{ $t('navbar.mcpText') }}
1212
</div>

‎frontend/src/components/navbar/menuItem/McpTools.vue

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<template>
2-
<div class="menuItem min-h-max flex md:items-center gap-[16px] py-[10px]">
3-
<div class="pt-[6px] md:pt-0">
4-
<SvgIcon name="space_mcp" />
2+
<div class="menuItem min-h-max flex md:items-center gap-4 py-2.5">
3+
<div class="pt-0.5 md:pt-0">
4+
<SvgIcon name="space_mcp" width="20px" />
55
</div>
66
<div class="max-w-[247px] flex flex-col whitespace-normal">
7-
<div class="text-[#101828] text-[16px]">{{ $t('navbar.mcpTools') }}</div>
7+
<div class="text-gray-900 text-md">{{ $t('navbar.mcpTools') }}</div>
88
<div
9-
class="text-[14px] w-[247px] md:w-[unset] text-[#475467] font-light leading-[20px] md:hidden"
9+
class="text-sm w-[247px] md:w-[unset] text-gray-600 font-light leading-5 md:hidden"
1010
>
1111
{{ $t('navbar.mcpToolsText') }}
1212
</div>

‎frontend/src/style.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,4 +143,22 @@ img, video {
143143
.admin-field {
144144
@apply text-sm text-gray-600;
145145
}
146+
147+
.el-menu-item.is-active {
148+
font-weight: 400 !important;
149+
}
150+
151+
.el-menu-item:hover {
152+
color: #3250BD !important;
153+
}
154+
155+
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
156+
border-bottom: none !important;
157+
}
158+
159+
.el-sub-menu__title:hover,
160+
.el-tooltip__trigger:hover,
161+
.el-sub-menu__title.el-tooltip__trigger:hover {
162+
color: #3250BD !important;
163+
}
146164
}

0 commit comments

Comments
 (0)