Skip to content

Commit 92f3a37

Browse files
greatyaocursoragent
greatyao
and
cursoragent
committed
feat(frontend): themed presets, picker, favicon, chat input polish
Add DESIGN_* reference specs plus CSS tokens (design-tokens + theme-presets) for Claude, Apple, Notion, Airbnb; uiTheme applies data-ui-theme, Element primary, and SVG favicon. Appearance favicon respects uploads. User menu: theme selector below language; i18n for appearance/theme labels. Default logos use logo-custom_small; themed chrome across login, layout, chat row, bubbles. Chat footer: conditional textarea padding for datasource/quick question overlay; quieter placeholder; misc layout/List styling. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent c6f41d7 commit 92f3a37

25 files changed

Lines changed: 2083 additions & 256 deletions

‎DESIGN_AIRBNB.md‎

Lines changed: 217 additions & 0 deletions
Large diffs are not rendered by default.

‎DESIGN_APPLE.md‎

Lines changed: 287 additions & 0 deletions
Large diffs are not rendered by default.

‎DESIGN_CLAUDE.md‎

Lines changed: 289 additions & 0 deletions
Large diffs are not rendered by default.

‎DESIGN_NOTION.md‎

Lines changed: 376 additions & 0 deletions
Large diffs are not rendered by default.

‎frontend/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,21 @@
55
<link rel="icon" type="image/svg+xml" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>SQLBot</title>
8+
<script>
9+
try {
10+
var k = 'sqlbot-ui-theme'
11+
var v = localStorage.getItem(k)
12+
if (v === 'claude' || v === 'apple' || v === 'notion' || v === 'airbnb') {
13+
document.documentElement.setAttribute('data-ui-theme', v)
14+
}
15+
} catch (e) {}
16+
</script>
17+
<link rel="preconnect" href="https://fonts.googleapis.com" />
18+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
19+
<link
20+
href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
21+
rel="stylesheet"
22+
/>
823
</head>
924
<body>
1025
<div id="app"></div>

‎frontend/src/components/layout/LayoutDsl.vue‎

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Menu from './Menu.vue'
44
import custom_small from '@/assets/svg/logo-custom_small.svg'
55
import Workspace from './Workspace.vue'
66
import Person from './Person.vue'
7-
import LOGO_fold from '@/assets/LOGO-fold.svg'
87
import icon_moments_categories_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
98
import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
109
import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
@@ -131,15 +130,10 @@ onBeforeMount(() => {
131130
@click="toChatIndex"
132131
/>
133132
<custom_small
134-
v-else-if="appearanceStore.themeColor !== 'default'"
135-
:style="{ marginLeft: collapse ? '5px' : 0 }"
136-
:class="!collapse && 'collapse-icon'"
137-
></custom_small>
138-
<LOGO_fold
139133
v-else
140134
:style="{ marginLeft: collapse ? '5px' : 0 }"
141135
:class="!collapse && 'collapse-icon'"
142-
></LOGO_fold>
136+
></custom_small>
143137
<span v-if="!collapse">{{ $t('training.system_management') }}</span>
144138
</div>
145139
</template>
@@ -238,13 +232,13 @@ onBeforeMount(() => {
238232
appearanceStore.name
239233
}}</span>
240234
</div>
241-
<LOGO_fold
235+
<custom_small
242236
v-else-if="collapse"
243237
style="margin: 0 0 6px 5px; cursor: pointer"
244238
@click="toChatIndex"
245-
></LOGO_fold>
239+
></custom_small>
246240
<div v-else class="default-sqlbot">
247-
<LOGO_fold class="collapse-icon" @click="toChatIndex"></LOGO_fold>
241+
<custom_small class="collapse-icon" @click="toChatIndex"></custom_small>
248242
<span style="max-width: 150px" :title="appearanceStore.name" class="ellipsis">{{
249243
appearanceStore.name
250244
}}</span>
@@ -300,7 +294,7 @@ onBeforeMount(() => {
300294
.system-layout {
301295
width: 100vw;
302296
height: 100vh;
303-
background-color: #f1f4f3;
297+
background-color: var(--color-canvas-parchment);
304298
display: flex;
305299
306300
@keyframes rotate {
@@ -318,12 +312,17 @@ onBeforeMount(() => {
318312
padding: 16px;
319313
position: relative;
320314
min-width: 240px;
315+
background-color: var(--color-canvas);
316+
border-right: 1px solid var(--color-hairline);
321317
322318
.default-sqlbot {
323319
display: flex;
324320
align-items: center;
325-
font-weight: 500;
326-
font-size: 16px;
321+
font-family: var(--font-sans);
322+
font-weight: 600;
323+
font-size: 17px;
324+
letter-spacing: -0.374px;
325+
color: var(--color-ink);
327326
cursor: pointer;
328327
margin-bottom: 12px;
329328
.collapse-icon {
@@ -334,8 +333,11 @@ onBeforeMount(() => {
334333
.sys-management {
335334
display: flex;
336335
align-items: center;
337-
font-weight: 500;
338-
font-size: 16px;
336+
font-family: var(--font-sans);
337+
font-weight: 600;
338+
font-size: 17px;
339+
letter-spacing: -0.374px;
340+
color: var(--color-ink);
339341
cursor: pointer;
340342
margin-bottom: 12px;
341343
.collapse-icon {
@@ -355,19 +357,19 @@ onBeforeMount(() => {
355357
display: flex;
356358
align-items: center;
357359
justify-content: center;
358-
border-radius: 6px;
360+
border-radius: 8px;
359361
height: 40px;
360362
cursor: pointer;
361363
362364
&:not(.collapse) {
363-
background: #1f23290a;
364-
border: 1px solid #d9dcdf;
365+
background: var(--overlay-hover);
366+
border: 1px solid var(--color-hairline);
365367
}
366368
&:hover {
367-
background-color: #1f23291a;
369+
background-color: var(--overlay-hover);
368370
}
369371
&:active {
370-
background-color: #1f232926;
372+
background-color: var(--overlay-pressed);
371373
}
372374
.ed-icon {
373375
margin-right: 4.95px;
@@ -382,16 +384,16 @@ onBeforeMount(() => {
382384
.fold {
383385
cursor: pointer;
384386
margin-left: auto;
385-
border-radius: 6px;
387+
border-radius: 8px;
386388
width: 40px;
387389
height: 40px;
388390
&:hover,
389391
&:focus {
390-
background: #1f23291a;
392+
background: var(--overlay-hover);
391393
}
392394
393395
&:active {
394-
background: #1f232933;
396+
background: var(--overlay-strong);
395397
}
396398
}
397399
}
@@ -401,7 +403,6 @@ onBeforeMount(() => {
401403
width: 64px;
402404
min-width: 64px;
403405
padding: 16px 12px;
404-
// animation: rotate 0.1s ease-in-out;
405406
406407
.ed-menu--collapse {
407408
--ed-menu-icon-width: 32px;
@@ -443,9 +444,10 @@ onBeforeMount(() => {
443444
width: 100%;
444445
height: 100%;
445446
padding: 16px 24px;
446-
background-color: #fff;
447-
border-radius: 12px;
448-
box-shadow: 0px 2px 4px 0px #1f23291f;
447+
background-color: var(--color-canvas);
448+
border: 1px solid var(--color-hairline);
449+
border-radius: 18px;
450+
box-shadow: none;
449451
overflow-x: auto;
450452
451453
&:has(.no-padding) {
@@ -469,7 +471,7 @@ onBeforeMount(() => {
469471
transition: background 0.15s;
470472
471473
&:hover {
472-
background: rgba(31, 35, 41, 0.08);
474+
background: var(--overlay-hover);
473475
}
474476
}
475477
@@ -505,7 +507,7 @@ onBeforeMount(() => {
505507
flex-shrink: 0;
506508
height: 1px;
507509
margin: 0 12px;
508-
background: rgba(31, 35, 41, 0.12);
510+
background: var(--color-hairline);
509511
}
510512
511513
.layout-chat-history-heading {
@@ -514,7 +516,7 @@ onBeforeMount(() => {
514516
font-size: 12px;
515517
font-weight: 600;
516518
line-height: 18px;
517-
color: rgba(100, 106, 115, 1);
519+
color: var(--color-muted);
518520
letter-spacing: 0.02em;
519521
}
520522

‎frontend/src/components/layout/Menu.vue‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -87,56 +87,71 @@ const routerList = computed(() => {
8787
border-right: none;
8888
.ed-menu-item {
8989
height: 40px !important;
90-
border-radius: 6px !important;
90+
border-radius: 8px !important;
9191
margin-bottom: 2px;
92+
font-size: 14px;
93+
font-weight: 400;
94+
letter-spacing: -0.224px;
95+
color: var(--color-muted);
9296
&.is-active {
93-
background-color: #fff !important;
94-
border-radius: 6px;
95-
font-weight: 500;
97+
background-color: rgba(0, 102, 204, 0.1) !important;
98+
border-radius: 8px;
99+
font-weight: 600;
100+
color: var(--color-ink);
96101
}
97102
}
98103
99104
.ed-sub-menu .ed-sub-menu__title {
100-
border-radius: 6px;
105+
border-radius: 8px;
106+
color: var(--color-muted);
107+
font-size: 14px;
108+
font-weight: 400;
109+
letter-spacing: -0.224px;
101110
}
102111
103112
.ed-sub-menu.is-active:not(.is-opened) {
104113
.ed-sub-menu__title {
105-
background-color: #fff !important;
106-
color: var(--ed-color-primary) !important;
107-
font-weight: 500;
114+
background-color: rgba(0, 102, 204, 0.1) !important;
115+
color: #0066cc !important;
116+
font-weight: 600;
108117
}
109118
}
110119
111120
.ed-sub-menu.is-active.is-opened {
112121
.ed-sub-menu__title {
113-
color: var(--ed-color-primary) !important;
114-
font-weight: 500;
122+
color: #0066cc !important;
123+
font-weight: 600;
115124
}
116125
}
117126
118127
.ed-sub-menu .ed-icon {
119128
margin-right: 8px;
129+
color: var(--color-muted);
120130
}
121131
}
122132
.ed-popper.is-light:has(.ed-menu--popup) {
123-
border: 1px solid #dee0e3;
124-
border-radius: 6px;
125-
box-shadow: 0px 4px 8px 0px #1f23291a;
126-
background: #eff1f0;
133+
border: 1px solid var(--color-hairline);
134+
border-radius: 8px;
135+
box-shadow: none;
136+
background: var(--color-canvas);
127137
overflow: hidden;
128138
}
129139
.ed-menu--popup {
130140
padding: 8px;
131-
background: #eff1f0;
141+
background: var(--color-canvas);
132142
133143
.ed-menu-item {
134144
padding: 9px 16px;
135145
height: 40px !important;
136-
border-radius: 6px;
146+
border-radius: 8px;
147+
font-size: 14px;
148+
font-weight: 400;
149+
letter-spacing: -0.224px;
150+
color: var(--color-muted);
137151
&.is-active {
138-
background-color: #fff !important;
139-
font-weight: 500;
152+
background-color: rgba(0, 102, 204, 0.1) !important;
153+
font-weight: 600;
154+
color: var(--color-ink);
140155
}
141156
}
142157
}
@@ -152,7 +167,7 @@ const routerList = computed(() => {
152167
}
153168
154169
.ed-menu--popup-container .subTitleMenu {
155-
color: #646a73 !important;
170+
color: var(--color-muted) !important;
156171
pointer-events: none;
157172
}
158173
</style>

0 commit comments

Comments
 (0)