Skip to content

Commit 5853a55

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Fix styles
1 parent 2a39826 commit 5853a55

File tree

6 files changed

+44
-68
lines changed

6 files changed

+44
-68
lines changed

‎site/src/components/Button/Button.tsx

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ const buttonVariants = cva(
1313
text-sm font-semibold font-medium cursor-pointer no-underline
1414
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
1515
disabled:pointer-events-none disabled:text-content-disabled
16+
[&:is(a):not([href])]:pointer-events-none [&:is(a):not([href])]:text-content-disabled
1617
[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5
17-
[&_img]:pointer-events-none [&_img]:shrink-0 [&_img]:p-0.5`,
18+
[&>img]:pointer-events-none [&>img]:shrink-0 [&>img]:p-0.5`,
1819
{
1920
variants: {
2021
variant: {
@@ -29,11 +30,11 @@ const buttonVariants = cva(
2930
},
3031

3132
size: {
32-
lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg",
33-
sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm [&_img]:size-icon-sm",
33+
lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg [&>img]:size-icon-lg",
34+
sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm [&>img]:size-icon-sm",
3435
xs: "min-w-8 py-1 px-2 text-2xs rounded-md",
35-
icon: "size-8 px-1.5 [&_svg]:size-icon-sm [&_img]:size-icon-sm",
36-
"icon-lg": "size-10 px-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg",
36+
icon: "size-8 px-1.5 [&_svg]:size-icon-sm [&>img]:size-icon-sm",
37+
"icon-lg": "size-10 px-2 [&_svg]:size-icon-lg [&>img]:size-icon-lg",
3738
},
3839
},
3940
defaultVariants: {

‎site/src/modules/dashboard/Navbar/ProxyMenu.tsx

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -81,32 +81,25 @@ export const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
8181
</span>
8282

8383
{selectedProxy ? (
84-
<div css={{ display: "flex", gap: 8, alignItems: "center" }}>
85-
<div css={{ width: 16, height: 16, lineHeight: 0 }}>
86-
<img
87-
// Empty alt text used because we don't want to double up on
88-
// screen reader announcements from visually-hidden span
89-
alt=""
90-
src={selectedProxy.icon_url}
91-
css={{
92-
objectFit: "contain",
93-
width: "100%",
94-
height: "100%",
95-
}}
96-
/>
97-
</div>
84+
<>
85+
<img
86+
// Empty alt text used because we don't want to double up on
87+
// screen reader announcements from visually-hidden span
88+
alt=""
89+
src={selectedProxy.icon_url}
90+
/>
9891

9992
<Latency
10093
latency={latencies?.[selectedProxy.id]?.latencyMS}
10194
isLoading={proxyLatencyLoading(selectedProxy)}
10295
size={24}
10396
/>
104-
</div>
97+
</>
10598
) : (
10699
"Select Proxy"
107100
)}
108101

109-
<ChevronDownIcon className="text-content-primary !size-icon-xs" />
102+
<ChevronDownIcon className="text-content-primary !size-icon-sm" />
110103
</Button>
111104

112105
<Menu

‎site/src/modules/management/OrganizationSidebarView.tsx

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -62,25 +62,23 @@ export const OrganizationSidebarView: FC<
6262
<Button
6363
variant="outline"
6464
aria-expanded={isPopoverOpen}
65-
className="w-60 justify-between p-2 h-11"
65+
className="w-60 gap-2 justify-start"
6666
>
67-
<div className="flex flex-row gap-2 items-center p-2 truncate">
68-
{activeOrganization ? (
69-
<>
70-
<Avatar
71-
size="sm"
72-
src={activeOrganization.icon}
73-
fallback={activeOrganization.display_name}
74-
/>
75-
<span className="truncate">
76-
{activeOrganization.display_name || activeOrganization.name}
77-
</span>
78-
</>
79-
) : (
80-
<span className="truncate">No organization selected</span>
81-
)}
82-
</div>
83-
<ChevronDown />
67+
{activeOrganization ? (
68+
<>
69+
<Avatar
70+
size="sm"
71+
src={activeOrganization.icon}
72+
fallback={activeOrganization.display_name}
73+
/>
74+
<span className="truncate">
75+
{activeOrganization.display_name || activeOrganization.name}
76+
</span>
77+
</>
78+
) : (
79+
<span className="truncate">No organization selected</span>
80+
)}
81+
<ChevronDown className="ml-auto !size-icon-sm" />
8482
</Button>
8583
</PopoverTrigger>
8684
<PopoverContent align="start" className="w-60">

‎site/src/modules/resources/AppLink/AppLink.tsx

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useTheme } from "@emotion/react";
22
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
3-
import CircularProgress from "@mui/material/CircularProgress";
43
import { API } from "api/api";
54
import type * as TypesGen from "api/typesGenerated";
65
import { displayError } from "components/GlobalSnackbar/utils";
6+
import { Spinner } from "components/Spinner/Spinner";
77
import {
88
Tooltip,
99
TooltipContent,
@@ -79,21 +79,7 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
7979

8080
let primaryTooltip = "";
8181
if (app.health === "initializing") {
82-
icon = (
83-
// This is a hack to make the spinner appear in the center of the start
84-
// icon space
85-
<span
86-
css={{
87-
display: "flex",
88-
width: "100%",
89-
height: "100%",
90-
alignItems: "center",
91-
justifyContent: "center",
92-
}}
93-
>
94-
<CircularProgress size={14} />
95-
</span>
96-
);
82+
icon = <Spinner loading />;
9783
primaryTooltip = "Initializing...";
9884
}
9985
if (app.health === "unhealthy") {
@@ -119,9 +105,9 @@ export const AppLink: FC<AppLinkProps> = ({ app, workspace, agent }) => {
119105
const canShare = app.sharing_level !== "owner";
120106

121107
const button = (
122-
<AgentButton disabled={!canClick} asChild>
108+
<AgentButton asChild>
123109
<a
124-
href={href}
110+
href={canClick ? href : undefined}
125111
onClick={async (event) => {
126112
if (!canClick) {
127113
return;

‎site/src/modules/resources/VSCodeDesktopButton/VSCodeDesktopButton.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
2-
import ButtonGroup from "@mui/material/ButtonGroup";
32
import Menu from "@mui/material/Menu";
43
import MenuItem from "@mui/material/MenuItem";
54
import { API } from "api/api";
@@ -43,8 +42,8 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
4342
const includesVSCodeInsiders = props.displayApps.includes("vscode_insiders");
4443

4544
return includesVSCodeDesktop && includesVSCodeInsiders ? (
46-
<div>
47-
<ButtonGroup ref={menuAnchorRef} variant="outlined">
45+
<>
46+
<div ref={menuAnchorRef} className="flex items-center gap-1">
4847
{variant === "vscode" ? (
4948
<VSCodeButton {...props} />
5049
) : (
@@ -61,11 +60,11 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
6160
onClick={() => {
6261
setIsVariantMenuOpen(true);
6362
}}
64-
css={{ paddingLeft: 0, paddingRight: 0 }}
63+
size="icon-lg"
6564
>
6665
<KeyboardArrowDownIcon css={{ fontSize: 16 }} />
6766
</AgentButton>
68-
</ButtonGroup>
67+
</div>
6968

7069
<Menu
7170
open={isVariantMenuOpen}
@@ -96,7 +95,7 @@ export const VSCodeDesktopButton: FC<VSCodeDesktopButtonProps> = (props) => {
9695
{DisplayAppNameMap.vscode_insiders}
9796
</MenuItem>
9897
</Menu>
99-
</div>
98+
</>
10099
) : includesVSCodeDesktop ? (
101100
<VSCodeButton {...props} />
102101
) : (

‎site/src/modules/resources/VSCodeDevContainerButton/VSCodeDevContainerButton.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
2-
import ButtonGroup from "@mui/material/ButtonGroup";
32
import Menu from "@mui/material/Menu";
43
import MenuItem from "@mui/material/MenuItem";
54
import { API } from "api/api";
@@ -46,8 +45,8 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
4645
const includesVSCodeInsiders = props.displayApps.includes("vscode_insiders");
4746

4847
return includesVSCodeDesktop && includesVSCodeInsiders ? (
49-
<div>
50-
<ButtonGroup ref={menuAnchorRef} variant="outlined">
48+
<>
49+
<div ref={menuAnchorRef} className="flex items-center gap-1">
5150
{variant === "vscode" ? (
5251
<VSCodeButton {...props} />
5352
) : (
@@ -68,7 +67,7 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
6867
>
6968
<KeyboardArrowDownIcon css={{ fontSize: 16 }} />
7069
</AgentButton>
71-
</ButtonGroup>
70+
</div>
7271

7372
<Menu
7473
open={isVariantMenuOpen}
@@ -99,7 +98,7 @@ export const VSCodeDevContainerButton: FC<VSCodeDevContainerButtonProps> = (
9998
{DisplayAppNameMap.vscode_insiders}
10099
</MenuItem>
101100
</Menu>
102-
</div>
101+
</>
103102
) : includesVSCodeDesktop ? (
104103
<VSCodeButton {...props} />
105104
) : (

0 commit comments

Comments
 (0)