Skip to content

Commit 89880f7

Browse files
robertpiosikrobertpiosik
committed
Refactor and standardize UI components by removing redundant styles, consolidating response history display, and simplifying button appearances
1 parent 589513d commit 89880f7

8 files changed

Lines changed: 69 additions & 73 deletions

File tree

‎packages/ui/src/components/editor/panel/BrowserExtensionMessage/BrowserExtensionMessage.module.scss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
flex-direction: column;
44
align-items: flex-start;
55
gap: var(--padding-4px);
6-
padding: var(--padding-6px) var(--padding-8px) var(--padding-10px)
7-
var(--padding-8px);
6+
padding: var(--padding-6px) var(--padding-8px);
87
background: linear-gradient(
98
150deg,
109
var(--vscode-inputOption-activeBackground),

‎packages/ui/src/components/editor/panel/Configurations/Configurations.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,8 @@
8080
line-height: 1.2;
8181

8282
> span:nth-child(2) {
83+
color: var(--vscode-descriptionForeground);
8384
margin-left: 0.5em;
84-
opacity: 0.7;
8585
font-size: 0.9em;
8686
}
8787
}

‎packages/ui/src/components/editor/panel/Presets/Presets.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,8 +93,8 @@
9393
line-height: 1.2;
9494

9595
> span:nth-child(2) {
96+
color: var(--vscode-descriptionForeground);
9697
margin-left: 0.5em;
97-
opacity: 0.7;
9898
font-size: 0.9em;
9999
}
100100
}

‎packages/ui/src/components/editor/panel/ResponseReview/ResponseReview.module.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.container {
22
display: flex;
33
flex-direction: column;
4-
padding-top: 6px;
4+
padding-top: var(--padding-4px);
55
}
66

77
.info {

‎packages/ui/src/components/editor/panel/ResponseReview/ResponseReview.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,14 +201,12 @@ export const ResponseReview: FC<Props> = ({
201201
</div>
202202
<div className={styles.footer}>
203203
<Button on_click={on_discard} is_secondary>
204-
<span className="codicon codicon-close" />
205204
Discard
206205
</Button>
207206
<Button
208207
on_click={handle_approve}
209208
disabled={files.filter((f) => f.is_checked).length == 0}
210209
>
211-
<span className="codicon codicon-check" />
212210
Approve
213211
</Button>
214212
</div>

‎packages/vscode/src/views/panel/frontend/Main/MainView/MainView.module.scss‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -62,19 +62,26 @@
6262
}
6363

6464
.responses {
65-
padding: 0 var(--padding-12px);
65+
margin: 0 var(--padding-16px);
6666
display: flex;
6767
flex-direction: column;
68+
border-top-left-radius: var(--border-radius-5px);
69+
border-top-right-radius: var(--border-radius-5px);
70+
border: 1px solid var(--vscode-commandCenter-inactiveBorder);
71+
border-bottom: 0px;
72+
overflow: hidden;
73+
74+
&:hover {
75+
border-color: var(--vscode-commandCenter-activeBorder);
76+
}
6877

6978
&__item {
7079
display: flex;
7180
align-items: center;
7281
justify-content: space-between;
73-
gap: var(--padding-8px);
74-
padding: var(--padding-5px) var(--padding-8px);
75-
border-radius: var(--border-radius-4px);
82+
gap: var(--padding-4px);
83+
padding: var(--padding-3px) var(--padding-4px);
7684
width: 100%;
77-
text-align: left;
7885

7986
&:hover {
8087
background-color: var(--vscode-list-hoverBackground);
@@ -88,7 +95,8 @@
8895
}
8996

9097
&__instruction {
91-
flex-grow: 1;
98+
text-align: left;
99+
font-size: var(--font-size-12px);
92100
white-space: nowrap;
93101
overflow: hidden;
94102
text-overflow: ellipsis;
@@ -97,20 +105,19 @@
97105
&__right {
98106
display: flex;
99107
align-items: center;
100-
gap: var(--padding-8px);
108+
gap: var(--padding-4px);
101109
flex-shrink: 0;
110+
font-size: var(--font-size-11px);
102111
}
103112

104113
&__date {
105114
flex-shrink: 0;
106-
opacity: 0.7;
107-
font-size: var(--font-size-11px);
115+
color: var(--vscode-descriptionForeground);
108116
}
109117

110118
&__stats {
111119
display: flex;
112120
gap: var(--padding-4px);
113-
font-size: var(--font-size-11px);
114121
flex-shrink: 0;
115122

116123
&--added {
@@ -133,12 +140,6 @@
133140
padding: var(--padding-8px) var(--padding-12px);
134141
border-top: 1px solid var(--vscode-sideBarSectionHeader-border);
135142

136-
&__left {
137-
display: flex;
138-
gap: var(--padding-4px);
139-
overflow: hidden;
140-
}
141-
142143
&__right {
143144
display: flex;
144145
gap: var(--padding-4px);
@@ -235,13 +236,11 @@
235236

236237
> span {
237238
font-size: var(--font-size-12px);
238-
color: var(--vscode-foreground);
239-
opacity: 0.7;
239+
color: var(--vscode-descriptionForeground);
240240
}
241241
}
242242

243243
.browser-extension-message {
244244
padding: 0 var(--padding-16px);
245-
margin-bottom: -4px;
246245
position: relative;
247246
}

‎packages/vscode/src/views/panel/frontend/Main/MainView/MainView.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -314,17 +314,18 @@ export const MainView: React.FC<Props> = (props) => {
314314
</div>
315315
<Scrollable scroll_to_top_key={scroll_to_top_key}>
316316
<div className={styles.content}>
317+
<UiSeparator height={4} />
317318
{props.response_history.length > 0 && (
318319
<>
319-
<UiSeparator height={4} />
320320
<div className={styles.responses}>
321321
{props.response_history.map((item) => (
322322
<button
323323
key={item.created_at}
324324
className={cn(styles['responses__item'], {
325325
[styles['responses__item--selected']]:
326+
props.response_history.length > 1 &&
326327
props.selected_history_item_created_at ==
327-
item.created_at
328+
item.created_at
328329
})}
329330
title={item.raw_instructions}
330331
onClick={() => {
@@ -362,13 +363,14 @@ export const MainView: React.FC<Props> = (props) => {
362363
</>
363364
)}
364365

365-
<UiSeparator height={4} />
366-
367366
{!props.is_connected &&
368-
props.home_view_type == HOME_VIEW_TYPES.WEB && (
369-
<div className={styles['browser-extension-message']}>
370-
<UiBrowserExtensionMessage />
371-
</div>
367+
props.home_view_type == HOME_VIEW_TYPES.WEB &&
368+
!props.response_history.length && (
369+
<>
370+
<div className={styles['browser-extension-message']}>
371+
<UiBrowserExtensionMessage />
372+
</div>
373+
</>
372374
)}
373375

374376
<div className={styles['chat-input']}>
@@ -504,20 +506,18 @@ export const MainView: React.FC<Props> = (props) => {
504506
</Scrollable>
505507

506508
<div className={styles.footer}>
507-
<div className={styles.footer__left}>
508-
<a
509-
className={cn(
510-
styles.footer__button,
511-
styles['footer__button--buy-me-a-coffee']
512-
)}
513-
href="https://buymeacoffee.com/robertpiosik"
514-
title="Support author"
515-
onMouseEnter={() => set_is_buy_me_coffee_hovered(true)}
516-
onMouseLeave={() => set_is_buy_me_coffee_hovered(false)}
517-
>
518-
<Icon variant="BUY_ME_A_COFFEE_LOGO" />
519-
</a>
520-
</div>
509+
<a
510+
className={cn(
511+
styles.footer__button,
512+
styles['footer__button--buy-me-a-coffee']
513+
)}
514+
href="https://buymeacoffee.com/robertpiosik"
515+
title="Support author"
516+
onMouseEnter={() => set_is_buy_me_coffee_hovered(true)}
517+
onMouseLeave={() => set_is_buy_me_coffee_hovered(false)}
518+
>
519+
<Icon variant="BUY_ME_A_COFFEE_LOGO" />
520+
</a>
521521
<div className={styles.footer__right}>
522522
{props.home_view_type == HOME_VIEW_TYPES.WEB && (
523523
<button

‎packages/vscode/src/views/panel/frontend/Panel.tsx‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,6 @@ export const Panel = () => {
175175
set_commit_button_enabling_trigger_count((k) => k + 1)
176176
} else if (message.command == 'NEW_RESPONSE_RECEIVED') {
177177
const now = Date.now()
178-
179178
if (!response_history.length) {
180179
set_selected_history_item_created_at(now)
181180
set_response_history([
@@ -187,32 +186,33 @@ export const Panel = () => {
187186
lines_removed: message.lines_removed
188187
}
189188
])
190-
}
191-
const is_duplicate = response_history.some(
192-
(item) =>
193-
item.response == message.response &&
194-
item.raw_instructions == message.raw_instructions
195-
)
196-
if (!is_duplicate) {
197-
const new_item = {
198-
response: message.response,
199-
raw_instructions: message.raw_instructions,
200-
created_at: now,
201-
lines_added: message.lines_added,
202-
lines_removed: message.lines_removed
203-
}
204-
set_response_history([...response_history, new_item])
205-
if (!files_to_review) {
206-
set_selected_history_item_created_at(now)
207-
}
208189
} else {
209-
set_selected_history_item_created_at(
210-
response_history.find(
211-
(item) =>
212-
item.response == message.response &&
213-
item.raw_instructions == message.raw_instructions
214-
)?.created_at
190+
const is_duplicate = response_history.some(
191+
(item) =>
192+
item.response == message.response &&
193+
item.raw_instructions == message.raw_instructions
215194
)
195+
if (!is_duplicate) {
196+
const new_item = {
197+
response: message.response,
198+
raw_instructions: message.raw_instructions,
199+
created_at: now,
200+
lines_added: message.lines_added,
201+
lines_removed: message.lines_removed
202+
}
203+
set_response_history([...response_history, new_item])
204+
if (!files_to_review) {
205+
set_selected_history_item_created_at(now)
206+
}
207+
} else {
208+
set_selected_history_item_created_at(
209+
response_history.find(
210+
(item) =>
211+
item.response == message.response &&
212+
item.raw_instructions == message.raw_instructions
213+
)?.created_at
214+
)
215+
}
216216
}
217217
}
218218
}

0 commit comments

Comments
 (0)