Skip to content

Commit bd5556c

Browse files
robertpiosikrobertpiosik
committed
Standardize color variables and add themed styling to the prompt field and status bar
- when no instructions, instead of 'response preview', show em dash - prompt field should accept color of active border in props, either blue or purple (depending on the active prompt type) - 'prompt attachments' should follow the prompt-type driven blue/purple coloring (when showing Attaching...) - we need additional dimmed colors for description that follow the theme choice ├── apps │ └── editor │ └── src │ ├── commands │ │ └── generate-commit-message-commands │ │ ├── actions │ │ │ ├── get-prompt-data.ts │ │ │ └── run-generate-action.ts │ │ ├── generate-commit-message-commands.ts │ │ ├── index.ts │ │ └── utils │ │ ├── build-commit-message-prompt.ts │ │ ├── generate-commit-message-with-api.ts │ │ ├── get-commit-message-config.ts │ │ └── strip-wrapping-quotes.ts │ └── views │ └── prompt │ └── frontend │ └── Main │ └── MainView │ ├── MainView.tsx │ └── components │ ├── Header │ │ └── Header.tsx │ └── PromptAttachments │ └── PromptAttachments.tsx └── packages └── ui └── src ├── components │ └── editor │ ├── common │ │ └── prompts │ │ ├── PromptField │ │ │ ├── PromptField.module.scss │ │ │ ├── PromptField.stories.tsx │ │ │ ├── PromptField.tsx │ │ │ ├── hooks │ │ │ │ ├── use-drag-drop.ts │ │ │ │ ├── use-dropdown.ts │ │ │ │ ├── use-ghost-text.ts │ │ │ │ ├── use-handlers │ │ │ │ │ ├── handle-copy.ts │ │ │ │ │ ├── handle-cut.ts │ │ │ │ │ ├── handle-input-change.ts │ │ │ │ │ ├── handle-input-click.ts │ │ │ │ │ ├── handle-key-down.ts │ │ │ │ │ ├── handle-paste.ts │ │ │ │ │ ├── handle-submit.ts │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── types.ts │ │ │ │ │ ├── use-handlers.ts │ │ │ │ │ └── utils.ts │ │ │ │ └── use-keyboard-shortcuts.ts │ │ │ └── index.ts │ │ ├── Template │ │ │ ├── Template.module.scss │ │ │ ├── Template.tsx │ │ │ └── index.ts │ │ └── shared │ │ └── symbols │ │ ├── caret.ts │ │ ├── get-highlighted-text.tsx │ │ ├── index.ts │ │ ├── position-mapping.ts │ │ ├── prompt-symbols.module.scss │ │ ├── reconstruct-raw-value.ts │ │ └── use-symbol-deletion.ts │ └── prompt │ ├── IconAccentButton │ │ ├── IconAccentButton.module.scss │ │ ├── IconAccentButton.stories.tsx │ │ ├── IconAccentButton.tsx │ │ └── index.ts │ ├── Responses │ │ └── Responses.module.scss │ └── StatusBar │ ├── StatusBar.module.scss │ ├── StatusBar.tsx │ └── index.ts └── styles └── foundation └── _colors.scss
1 parent 8d1c2fc commit bd5556c

21 files changed

Lines changed: 183 additions & 100 deletions

File tree

‎apps/editor/src/views/prompt/frontend/Home/Home.module.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@
8787
&-divider {
8888
width: 1px;
8989
height: 16px;
90-
background-color: var(--cwc-bg-purple);
90+
background-color: var(--cwc-purple-background);
9191
}
9292
}
9393
}
@@ -132,7 +132,7 @@
132132
transform: translate(-50%, -50%);
133133
width: 1px;
134134
height: 35px;
135-
background-color: var(--cwc-bg-purple);
135+
background-color: var(--cwc-purple-background);
136136
pointer-events: none;
137137
}
138138
}

‎apps/editor/src/views/prompt/frontend/Main/MainView/MainView.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,15 @@ export const MainView: React.FC<Props> = (props) => {
336336
on_open_website={props.on_open_website}
337337
target={props.target}
338338
on_target_change={(target) => props.on_target_change(target)}
339+
active_border_color={
340+
props.target == TARGET.WEB
341+
? props.web_prompt_type == 'edit-files'
342+
? 'blue'
343+
: 'purple'
344+
: props.api_prompt_type == 'edit-files'
345+
? 'blue'
346+
: 'purple'
347+
}
339348
on_paste_image={props.on_paste_image}
340349
on_open_image={props.on_open_image}
341350
on_paste_long_text={props.on_paste_long_text}
@@ -388,6 +397,15 @@ export const MainView: React.FC<Props> = (props) => {
388397
files_count={
389398
context_is_empty_warning ? undefined : props.selected_files.length
390399
}
400+
theme={
401+
props.target == TARGET.WEB
402+
? props.web_prompt_type == 'edit-files'
403+
? 'blue'
404+
: 'purple'
405+
: props.api_prompt_type == 'edit-files'
406+
? 'blue'
407+
: 'purple'
408+
}
391409
translations={{
392410
warning: context_is_empty_warning
393411
? t('common.context-is-empty')

‎apps/editor/src/views/prompt/frontend/Main/MainView/components/Header/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const Header: React.FC<Props> = (props) => {
6363
label={web_prompt_type_labels['ask-about-files']}
6464
icon="chat-sparkle"
6565
is_active={props.web_prompt_type == 'ask-about-files'}
66-
active_color="green"
66+
active_color="purple"
6767
is_compact={
6868
props.web_prompt_type == 'ask-about-files'
6969
? compact_step >= 2

‎apps/editor/src/views/prompt/frontend/Main/MainView/components/PromptAttachments/PromptAttachments.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { display_token_count } from '@shared/utils/display-token-count'
55
type Props = {
66
token_count?: number
77
files_count?: number
8+
theme?: 'default' | 'warning' | 'success' | 'error' | 'blue' | 'purple'
89
translations: {
910
warning?: string
1011
attaching_file: string
@@ -36,7 +37,7 @@ export const PromptAttachments: React.FC<Props> = (props) => {
3637
{props.files_count !== undefined && (
3738
<StatusBar
3839
placement="bottom"
39-
theme="default"
40+
theme={props.theme ?? 'default'}
4041
icon="codicon-attach"
4142
label={attaching_files_label}
4243
description={

‎packages/ui/.storybook/styles.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
var(--vscode-foreground) 75%,
66
transparent
77
);
8-
--cwc-text-color-green: var(
8+
--cwc-green-foreground: var(
99
--vscode-gitDecoration-untrackedResourceForeground
1010
);
11-
--cwc-text-color-yellow: var(
11+
--cwc-yellow-foreground: var(
1212
--vscode-gitDecoration-modifiedResourceForeground
1313
);
14-
--cwc-text-color-red: var(--vscode-gitDecoration-deletedResourceForeground);
14+
--cwc-red-foreground: var(--vscode-gitDecoration-deletedResourceForeground);
1515

1616
--cwc-bg-primary: color-mix(
1717
in srgb,

‎packages/ui/src/components/editor/common/prompts/PromptField/PromptField.module.scss‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
border-radius: 10px;
99
background-color: var(--vscode-input-background);
1010
cursor: text;
11-
border: 1px solid var(--cwc-border-color);
11+
border: 0.5px solid var(--cwc-border-color);
1212
position: relative;
1313

1414
&:hover {
@@ -19,6 +19,18 @@
1919
border-color: var(--vscode-focusBorder);
2020
}
2121

22+
&--active-border-blue {
23+
&:focus-within {
24+
border-color: var(--cwc-blue-foreground);
25+
}
26+
}
27+
28+
&--active-border-purple {
29+
&:focus-within {
30+
border-color: var(--cwc-purple-foreground);
31+
}
32+
}
33+
2234
&--selecting {
2335
.keyword {
2436
pointer-events: none;
@@ -269,14 +281,14 @@
269281
}
270282

271283
&--recording {
272-
background-color: var(--cwc-bg-red);
284+
background-color: var(--cwc-red-background);
273285

274286
&:hover {
275-
background-color: var(--cwc-bg-red-dark) !important;
287+
background-color: var(--cwc-red-background-dark) !important;
276288
}
277289

278290
&::before {
279-
color: var(--cwc-text-color-red);
291+
color: var(--cwc-red-foreground);
280292
}
281293
}
282294

‎packages/ui/src/components/editor/common/prompts/PromptField/PromptField.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ export type PromptFieldProps = {
8383
is_copy_only?: boolean
8484
target: Target
8585
on_target_change: (target: Target) => void
86+
active_border_color?: 'blue' | 'purple'
8687
translations: {
8788
voice_input: string
8889
stop_recording: string
@@ -864,7 +865,9 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
864865
<div
865866
ref={container_inner_ref}
866867
className={cn(styles.container__inner, {
867-
[styles['container__inner--selecting']]: is_text_selecting
868+
[styles['container__inner--selecting']]: is_text_selecting,
869+
[styles['container__inner--active-border-blue']]: props.active_border_color === 'blue',
870+
[styles['container__inner--active-border-purple']]: props.active_border_color === 'purple'
868871
})}
869872
onKeyDown={handle_container_key_down}
870873
onClick={() => input_ref.current?.focus()}

‎packages/ui/src/components/editor/prompt/AsciiArtEffect/AsciiArtEffect.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
.inner {
2222
position: absolute;
2323
inset: 0;
24-
background-color: var(--cwc-text-color-purple);
24+
background-color: var(--cwc-purple-foreground);
2525
opacity: var(--dimmed-opacity);
2626

2727
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='15' y='25' fill='black' font-family='monospace' font-size='12'%3E%2B%3C/text%3E%3Ctext x='55' y='45' fill='black' font-family='monospace' font-size='16'%3E*%3C/text%3E%3Ctext x='85' y='85' fill='black' font-family='monospace' font-size='14'%3E%C2%B7%3C/text%3E%3Ctext x='25' y='85' fill='black' font-family='monospace' font-size='10'%3E%C3%97%3C/text%3E%3Ctext x='85' y='25' fill='black' font-family='monospace' font-size='12'%3E%C2%B0%3C/text%3E%3Ctext x='10' y='65' fill='black' font-family='monospace' font-size='14'%3E%C2%B7%3C/text%3E%3Ctext x='45' y='95' fill='black' font-family='monospace' font-size='12'%3E%2B%3C/text%3E%3Ctext x='95' y='55' fill='black' font-family='monospace' font-size='10'%3E%C3%97%3C/text%3E%3C/svg%3E");

‎packages/ui/src/components/editor/prompt/IconAccentButton/IconAccentButton.module.scss‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -31,67 +31,67 @@
3131
}
3232

3333
&.button--blue {
34-
background-color: var(--cwc-bg-blue);
34+
background-color: var(--cwc-blue-background);
3535

3636
.button__icon,
3737
.button__label {
38-
color: var(--cwc-text-color-blue);
38+
color: var(--cwc-blue-foreground);
3939
}
4040

4141
&:hover {
42-
background-color: var(--cwc-bg-blue);
42+
background-color: var(--cwc-blue-background);
4343
}
4444
}
4545

4646
&.button--green {
47-
background-color: var(--cwc-bg-green);
47+
background-color: var(--cwc-green-background);
4848

4949
.button__icon,
5050
.button__label {
51-
color: var(--cwc-text-color-green);
51+
color: var(--cwc-green-foreground);
5252
}
5353

5454
&:hover {
55-
background-color: var(--cwc-bg-green);
55+
background-color: var(--cwc-green-background);
5656
}
5757
}
5858

5959
&.button--red {
60-
background-color: var(--cwc-bg-red);
60+
background-color: var(--cwc-red-background);
6161

6262
.button__icon,
6363
.button__label {
64-
color: var(--cwc-text-color-red);
64+
color: var(--cwc-red-foreground);
6565
}
6666

6767
&:hover {
68-
background-color: var(--cwc-bg-red);
68+
background-color: var(--cwc-red-background);
6969
}
7070
}
7171

7272
&.button--purple {
73-
background-color: var(--cwc-bg-purple);
73+
background-color: var(--cwc-purple-background);
7474

7575
.button__icon,
7676
.button__label {
77-
color: var(--cwc-text-color-purple);
77+
color: var(--cwc-purple-foreground);
7878
}
7979

8080
&:hover {
81-
background-color: var(--cwc-bg-purple);
81+
background-color: var(--cwc-purple-background);
8282
}
8383
}
8484

8585
&.button--yellow {
86-
background-color: var(--cwc-bg-yellow);
86+
background-color: var(--cwc-yellow-background);
8787

8888
.button__icon,
8989
.button__label {
90-
color: var(--cwc-text-color-yellow);
90+
color: var(--cwc-yellow-foreground);
9191
}
9292

9393
&:hover {
94-
background-color: var(--cwc-bg-yellow);
94+
background-color: var(--cwc-yellow-background);
9595
}
9696
}
9797
}

‎packages/ui/src/components/editor/prompt/ResponsePreview/ResponsePreview.module.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,20 @@
2424
}
2525

2626
&--error {
27-
color: var(--cwc-text-color-red);
28-
background-color: var(--cwc-bg-red);
27+
color: var(--cwc-red-foreground);
28+
background-color: var(--cwc-red-background);
2929

3030
.info__action:hover {
31-
background-color: var(--cwc-bg-red);
31+
background-color: var(--cwc-red-background);
3232
}
3333
}
3434

3535
&--warning {
36-
color: var(--cwc-text-color-yellow);
37-
background-color: var(--cwc-bg-yellow);
36+
color: var(--cwc-yellow-foreground);
37+
background-color: var(--cwc-yellow-background);
3838

3939
.info__action:hover {
40-
background-color: var(--cwc-bg-yellow);
40+
background-color: var(--cwc-yellow-background);
4141
}
4242
}
4343

0 commit comments

Comments
 (0)