Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 872efb6

Browse files
Patrick-ErichsenPatrick-Erichsen
authored
Merge pull request continuedev#3324 from continuedev/pe/account-dialog-cleanup
feat: better buttons for account dialog
2 parents 6f59292 + 2a4c69f commit 872efb6

File tree

2 files changed

+32
-120
lines changed

2 files changed

+32
-120
lines changed

‎gui/src/components/AccountDialog.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Listbox, Transition } from "@headlessui/react";
22
import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
3-
import { UserCircleIcon } from "@heroicons/react/24/solid";
43
import { Fragment, useContext } from "react";
54
import styled from "styled-components";
65
import {
@@ -14,6 +13,7 @@ import { IdeMessengerContext } from "../context/IdeMessenger";
1413
import { useAuth } from "../context/Auth";
1514
import { setSelectedProfileId } from "../redux/slices/sessionSlice";
1615
import { useDispatch } from "react-redux";
16+
import { setDialogMessage, setShowDialog } from "../redux/slices/uiSlice";
1717

1818
const StyledListboxOption = styled(Listbox.Option)<{ selected: boolean }>`
1919
background-color: ${({ selected }) =>
@@ -137,9 +137,18 @@ export default function AccountDialog() {
137137
</Listbox>
138138
</div>
139139

140-
<div className="flex w-full justify-end">
141-
<Button className="w-auto" onClick={logout}>
140+
<div className="flex w-full justify-end gap-2">
141+
<SecondaryButton className="w-auto" onClick={logout}>
142142
Sign out
143+
</SecondaryButton>
144+
<Button
145+
className="w-auto"
146+
onClick={() => {
147+
dispatch(setDialogMessage(undefined));
148+
dispatch(setShowDialog(false));
149+
}}
150+
>
151+
Done
143152
</Button>
144153
</div>
145154
</div>

‎gui/src/components/index.ts‎

Lines changed: 20 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,6 @@ export const vscInputBackground = `var(${VSC_INPUT_BACKGROUND_VAR}, rgb(45 45 45
5858
export const vscQuickInputBackground = `var(${VSC_QUICK_INPUT_BACKGROUND_VAR}, ${VSC_INPUT_BACKGROUND_VAR}, rgb(45 45 45))`;
5959
export const vscBackground = `var(${VSC_BACKGROUND_VAR}, rgb(30 30 30))`;
6060
export const vscForeground = `var(${VSC_FOREGROUND_VAR}, #fff)`;
61-
export const vscForegroundMuted = `var(${VSC_FOREGROUND_MUTED_VAR}, #999)`;
62-
export const vscDescriptionForeground = `var(${VSC_DESCRIPTION_FOREGROUND}, #999)`;
63-
export const vscInputPlaceholderForeground = `var(${VSC_INPUT_PLACEHOLDER_FOREGROUND}, #999)`;
6461
export const vscButtonBackground = `var(${VSC_BUTTON_BACKGROUND_VAR}, #1bbe84)`;
6562
export const vscButtonForeground = `var(${VSC_BUTTON_FOREGROUND_VAR}, #ffffff)`;
6663
export const vscEditorBackground = `var(${VSC_EDITOR_BACKGROUND_VAR}, ${VSC_BACKGROUND_VAR}, rgb(30 30 30))`;
@@ -70,10 +67,6 @@ export const vscListActiveForeground = `var(${VSC_LIST_ACTIVE_FOREGROUND_VAR}, $
7067
export const vscInputBorder = `var(${VSC_INPUT_BORDER_VAR}, ${lightGray})`;
7168
export const vscInputBorderFocus = `var(${VSC_INPUT_BORDER_FOCUS_VAR}, ${lightGray})`;
7269
export const vscBadgeBackground = `var(${VSC_BADGE_BACKGROUND_VAR}, #1bbe84)`;
73-
export const vscBadgeForeground = `var(${VSC_BADGE_FOREGROUND_VAR}, #fff)`;
74-
export const vscSidebarBorder = `var(${VSC_SIDEBAR_BORDER_VAR}, transparent)`;
75-
export const vscDiffRemovedLineBackground = `var(${VSC_DIFF_REMOVED_LINE_BACKGROUND_VAR}, #808080)`;
76-
export const vscDiffInsertedLineBackground = `var(${VSC_DIFF_INSERTED_LINE_BACKGROUND_VAR}, #28a745)`;
7770

7871
if (typeof document !== "undefined") {
7972
for (const colorVar of VSC_THEME_COLOR_VARS) {
@@ -181,6 +174,26 @@ export const SecondaryButton = styled.button`
181174
}
182175
`;
183176

177+
export const GhostButton = styled.button`
178+
padding: 10px 12px;
179+
margin: 8px 0;
180+
border-radius: ${defaultBorderRadius};
181+
182+
border: none;
183+
color: ${vscForeground};
184+
background-color: transparent;
185+
186+
&:disabled {
187+
color: gray;
188+
pointer-events: none;
189+
}
190+
191+
&:hover:enabled {
192+
cursor: pointer;
193+
background-color: rgba(255, 255, 255, 0.08); /* Subtle hover effect */
194+
}
195+
`;
196+
184197
export const InputSubtext = styled.span`
185198
font-size: 0.75rem;
186199
line-height: 1rem;
@@ -216,64 +229,6 @@ export const CustomScrollbarDiv = styled.div`
216229
}
217230
`;
218231

219-
export const TextArea = styled.textarea`
220-
padding: 8px;
221-
font-family: inherit;
222-
border-radius: ${defaultBorderRadius};
223-
margin: 16px auto;
224-
height: auto;
225-
width: calc(100% - 32px);
226-
background-color: ${vscInputBackground};
227-
color: ${vscForeground};
228-
z-index: 1;
229-
border: 1px solid transparent;
230-
231-
resize: vertical;
232-
233-
&:focus {
234-
outline: 1px solid ${lightGray};
235-
border: 1px solid transparent;
236-
}
237-
238-
&::placeholder {
239-
color: ${lightGray}80;
240-
}
241-
`;
242-
243-
export const Pre = styled.pre`
244-
border-radius: ${defaultBorderRadius};
245-
padding: 8px;
246-
max-height: 150px;
247-
overflow-y: scroll;
248-
margin: 0;
249-
background-color: ${vscBackground};
250-
border: none;
251-
252-
/* text wrapping */
253-
white-space: pre-wrap; /* Since CSS 2.1 */
254-
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
255-
white-space: -pre-wrap; /* Opera 4-6 */
256-
white-space: -o-pre-wrap; /* Opera 7 */
257-
word-wrap: break-word; /* Internet Explorer 5.5+ */
258-
`;
259-
260-
export const H3 = styled.h3`
261-
background-color: ${vscInputBackground};
262-
border-radius: ${defaultBorderRadius};
263-
padding: 4px 8px;
264-
width: fit-content;
265-
`;
266-
267-
export const Hr = styled.hr`
268-
border: 0.5px solid ${lightGray};
269-
`;
270-
271-
export const HelperText = styled.p`
272-
margin-top: 2.5px;
273-
font-size: ${getFontSize() - 2}px;
274-
color: ${lightGray};
275-
`;
276-
277232
export const Input = styled.input`
278233
width: 100%;
279234
padding: 8px 12px;
@@ -295,21 +250,6 @@ export const Input = styled.input`
295250
}
296251
`;
297252

298-
export const NumberInput = styled.input.attrs({ type: "number" })`
299-
padding: 8px 12px;
300-
margin: 8px 4px;
301-
box-sizing: border-box;
302-
border-radius: ${defaultBorderRadius};
303-
outline: 1px solid ${lightGray};
304-
border: none;
305-
background-color: ${vscBackground};
306-
color: ${vscForeground};
307-
308-
&:focus {
309-
background: ${vscInputBackground};
310-
}
311-
`;
312-
313253
export const Select = styled.select`
314254
padding: 8px 12px;
315255
margin: 8px 0;
@@ -325,43 +265,6 @@ export const Label = styled.label<{ fontSize?: number }>`
325265
font-size: ${(props) => props.fontSize || getFontSize()}px;
326266
`;
327267

328-
const spin = keyframes`
329-
from {
330-
-webkit-transform: rotate(0deg);
331-
}
332-
to {
333-
-webkit-transform: rotate(360deg);
334-
}
335-
`;
336-
337-
export const Loader = styled.div`
338-
border: 4px solid transparent;
339-
border-radius: 50%;
340-
border-top: 4px solid white;
341-
width: 36px;
342-
height: 36px;
343-
-webkit-animation: ${spin} 1s ease-in-out infinite;
344-
animation: ${spin} 1s ease-in-out infinite;
345-
margin: auto;
346-
`;
347-
348-
export const MainContainerWithBorder = styled.div<{ borderWidth?: string }>`
349-
border-radius: ${defaultBorderRadius};
350-
padding: ${(props) => props.borderWidth || "1px"};
351-
background-color: white;
352-
`;
353-
354-
export const appear = keyframes`
355-
from {
356-
opacity: 0;
357-
transform: translateY(-10px);
358-
}
359-
to {
360-
opacity: 1;
361-
transform: translateY(0px);
362-
}
363-
`;
364-
365268
export const HeaderButton = styled.button<{
366269
inverted: boolean | undefined;
367270
backgroundColor?: string;

0 commit comments

Comments
 (0)