Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitebd6c1b

Browse files
authored
feat(site): bring back dark blue (#11071)
1 parent716759a commitebd6c1b

File tree

36 files changed

+1762
-932
lines changed

36 files changed

+1762
-932
lines changed

‎site/.storybook/main.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
importturbosnapfrom"vite-plugin-turbosnap";
2-
import{mergeConfig}from"vite";
32

43
module.exports={
54
stories:["../src/**/*.stories.tsx"],

‎site/.storybook/preview.jsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,16 @@ import {
66
import{ThemeProviderasEmotionThemeProvider}from"@emotion/react";
77
import{withRouter}from"storybook-addon-react-router-v6";
88
import{HelmetProvider}from"react-helmet-async";
9-
import{dark}from"theme/mui";
10-
import{darkasexperimental}from"theme/experimental";
9+
importthemefrom"theme";
1110
importcolorsfrom"theme/tailwind";
1211
import"theme/globalFonts";
1312
import{QueryClient,QueryClientProvider}from"react-query";
1413

15-
consttheme={
16-
...dark,
17-
experimental,
18-
};
19-
2014
exportconstdecorators=[
2115
(Story)=>(
2216
<StyledEngineProviderinjectFirst>
23-
<MuiThemeProvidertheme={theme}>
24-
<EmotionThemeProvidertheme={theme}>
17+
<MuiThemeProvidertheme={theme.dark}>
18+
<EmotionThemeProvidertheme={theme.dark}>
2519
<CssBaseline/>
2620
<Story/>
2721
</EmotionThemeProvider>

‎site/src/@types/emotion.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
importtype{ThemeasMuiTheme}from"@mui/material/styles";
1+
importtype{ThemeasCoderTheme}from"theme";
22

33
declare module"@emotion/react"{
4-
interfaceThemeextendsMuiTheme{}
4+
interfaceThemeextendsCoderTheme{}
55
}

‎site/src/@types/mui.d.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,3 @@ declare module "@mui/material/Button" {
2424
xlarge:true;
2525
}
2626
}
27-
28-
declare module"@mui/system"{
29-
interfaceTheme{
30-
experimental:NewTheme;
31-
}
32-
}

‎site/src/App.tsx

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import { HelmetProvider } from "react-helmet-async";
66
import{AppRouter}from"./AppRouter";
77
import{ErrorBoundary}from"./components/ErrorBoundary/ErrorBoundary";
88
import{GlobalSnackbar}from"./components/GlobalSnackbar/GlobalSnackbar";
9-
import{dark}from"./theme/mui";
10-
import{darkasexperimental}from"./theme/experimental";
9+
importthemefrom"./theme";
1110
import"./theme/globalFonts";
1211
import{
1312
StyledEngineProvider,
@@ -30,16 +29,11 @@ const defaultQueryClient = new QueryClient({
3029
},
3130
});
3231

33-
consttheme={
34-
...dark,
35-
experimental,
36-
};
37-
3832
exportconstThemeProviders:FC<PropsWithChildren>=({ children})=>{
3933
return(
4034
<StyledEngineProviderinjectFirst>
41-
<MuiThemeProvidertheme={theme}>
42-
<EmotionThemeProvidertheme={theme}>
35+
<MuiThemeProvidertheme={theme.dark}>
36+
<EmotionThemeProvidertheme={theme.dark}>
4337
<CssBaselineenableColorScheme/>
4438
{children}
4539
</EmotionThemeProvider>

‎site/src/components/Dashboard/DeploymentBanner/DeploymentBannerView.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ import { RocketIcon } from "components/Icons/RocketIcon";
3737
importErrorIconfrom"@mui/icons-material/ErrorOutline";
3838
import{MONOSPACE_FONT_FAMILY}from"theme/constants";
3939
import{getDisplayWorkspaceStatus}from"utils/workspace";
40-
import{colors}from"theme/colors";
4140
import{HelpTooltipTitle}from"components/HelpTooltip/HelpTooltip";
4241
import{Stack}from"components/Stack/Stack";
4342
import{typeClassName,useClassName}from"hooks/useClassName";
@@ -373,9 +372,14 @@ const ValueSeparator: FC = () => {
373372
};
374373

375374
constHealthIssue:FC<PropsWithChildren>=({ children})=>{
375+
consttheme=useTheme();
376+
376377
return(
377378
<Stackdirection="row"spacing={1}alignItems="center">
378-
<ErrorIconcss={{width:16,height:16}}htmlColor={colors.red[10]}/>
379+
<ErrorIcon
380+
css={{width:16,height:16}}
381+
htmlColor={theme.colors.red[10]}
382+
/>
379383
{children}
380384
</Stack>
381385
);
@@ -435,8 +439,8 @@ const styles = {
435439
height:16px;
436440
}
437441
`,
438-
unhealthy:css`
439-
background-color:${colors.red[10]};
442+
unhealthy:(theme)=>css`
443+
background-color:${theme.colors.red[10]};
440444
`,
441445
group:css`
442446
display: flex;

‎site/src/components/Dashboard/LicenseBanner/LicenseBannerView.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
1+
importLinkfrom"@mui/material/Link";
12
import{
3+
css,
24
typeCSSObject,
35
typeInterpolation,
46
typeTheme,
57
useTheme,
68
}from"@emotion/react";
7-
importLinkfrom"@mui/material/Link";
8-
import{css}from"@emotion/react";
9-
import{useState}from"react";
9+
import{typeFC,useState}from"react";
1010
import{Expander}from"components/Expander/Expander";
1111
import{Pill}from"components/Pill/Pill";
12-
import{colors}from"theme/colors";
1312

1413
exportconstLanguage={
1514
licenseIssue:"License Issue",
@@ -32,7 +31,7 @@ export interface LicenseBannerViewProps {
3231
warnings:string[];
3332
}
3433

35-
exportconstLicenseBannerView:React.FC<LicenseBannerViewProps>=({
34+
exportconstLicenseBannerView:FC<LicenseBannerViewProps>=({
3635
errors,
3736
warnings,
3837
})=>{
@@ -48,7 +47,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
4847
display: flex;
4948
align-items: center;
5049
padding:12px;
51-
background-color:${type==="error" ?colors.red[10] :colors.orange[10]};
50+
background-color:${type==="error"
51+
?theme.colors.red[10]
52+
:theme.colors.orange[10]};
5253
`;
5354

5455
if(messages.length===1){

‎site/src/components/Dashboard/Navbar/NavbarView.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,12 @@ import MenuIcon from "@mui/icons-material/Menu";
1010
import{css,typeInterpolation,typeTheme,useTheme}from"@emotion/react";
1111
import{typeFC,typeReactNode,useRef,useState}from"react";
1212
import{NavLink,useLocation,useNavigate}from"react-router-dom";
13-
import{colors}from"theme/colors";
14-
importtype*asTypesGenfrom"api/typesGenerated";
1513
import{BUTTON_SM_HEIGHT,navHeight}from"theme/constants";
16-
import{ProxyContextValue}from"contexts/ProxyContext";
14+
importtype*asTypesGenfrom"api/typesGenerated";
15+
importtype{ProxyContextValue}from"contexts/ProxyContext";
1716
import{displayError}from"components/GlobalSnackbar/utils";
18-
import{CoderIcon}from"components/Icons/CoderIcon";
1917
import{ProxyStatusLatency}from"components/ProxyStatusLatency/ProxyStatusLatency";
18+
import{CoderIcon}from"components/Icons/CoderIcon";
2019
import{usePermissions}from"hooks/usePermissions";
2120
import{UserDropdown}from"./UserDropdown/UserDropdown";
2221

@@ -124,8 +123,8 @@ export const NavbarView: FC<NavbarViewProps> = ({
124123
<nav
125124
css={{
126125
height:navHeight,
127-
borderBottom:`1px solid${theme.palette.divider}`,
128126
backgroundColor:theme.palette.background.paper,
127+
borderBottom:`1px solid${theme.palette.divider}`,
129128
}}
130129
>
131130
<divcss={styles.wrapper}>
@@ -290,9 +289,9 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
290289
<div
291290
css={{
292291
width:"100%",
292+
maxWidth:"320px",
293293
fontSize:14,
294294
padding:16,
295-
maxWidth:"320px",
296295
lineHeight:"140%",
297296
}}
298297
>
@@ -308,12 +307,12 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
308307
Select a region nearest to you
309308
</h4>
310309
<p
311-
css={(theme)=>({
310+
css={{
312311
fontSize:13,
313312
color:theme.palette.text.secondary,
314313
lineHeight:"inherit",
315314
marginTop:0.5,
316-
})}
315+
}}
317316
>
318317
Workspace proxies improve terminal and web app connections to
319318
workspaces. This does not apply to CLI connections. A region must be
@@ -457,7 +456,7 @@ const styles = {
457456
},
458457
link:(theme)=>css`
459458
align-items: center;
460-
color:${colors.gray[6]};
459+
color:${theme.colors.gray[6]};
461460
display: flex;
462461
flex:1;
463462
font-size:16px;
Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
importBadgefrom"@mui/material/Badge";
2-
import{typeFC,typePropsWithChildren}from"react";
3-
import{colors}from"theme/colors";
2+
import{typeFC,typeReactNode}from"react";
43
importtype*asTypesGenfrom"api/typesGenerated";
54
import{BUTTON_SM_HEIGHT,navHeight}from"theme/constants";
65
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
76
import{UserAvatar}from"components/UserAvatar/UserAvatar";
87
import{UserDropdownContent}from"./UserDropdownContent";
9-
import{css}from"@emotion/react";
8+
import{css,typeInterpolation,typeTheme,useTheme}from"@emotion/react";
109
import{
1110
Popover,
1211
PopoverContent,
@@ -19,67 +18,49 @@ export interface UserDropdownProps {
1918
supportLinks?:TypesGen.LinkConfig[];
2019
onSignOut:()=>void;
2120
isDefaultOpen?:boolean;
21+
children?:ReactNode;
2222
}
2323

24-
exportconstUserDropdown:FC<PropsWithChildren<UserDropdownProps>>=({
24+
exportconstUserDropdown:FC<UserDropdownProps>=({
2525
buildInfo,
2626
user,
2727
supportLinks,
2828
onSignOut,
2929
isDefaultOpen,
30-
}:UserDropdownProps)=>{
30+
})=>{
31+
consttheme=useTheme();
32+
3133
return(
3234
<PopoverisDefaultOpen={isDefaultOpen}>
3335
{(popover)=>(
3436
<>
3537
<PopoverTrigger>
36-
<button
37-
css={css`
38-
background: none;
39-
border:0;
40-
cursor: pointer;
41-
height:${navHeight}px;
42-
padding:12px0;
43-
44-
&:hover {
45-
background-color: transparent;
46-
}
47-
`}
48-
data-testid="user-dropdown-trigger"
49-
>
50-
<div
51-
css={{
52-
display:"flex",
53-
alignItems:"center",
54-
minWidth:0,
55-
maxWidth:300,
56-
}}
57-
>
38+
<buttoncss={styles.button}data-testid="user-dropdown-trigger">
39+
<divcss={styles.badgeContainer}>
5840
<Badgeoverlap="circular">
5941
<UserAvatar
60-
css={{
61-
width:BUTTON_SM_HEIGHT,
62-
height:BUTTON_SM_HEIGHT,
63-
fontSize:16,
64-
}}
42+
css={styles.avatar}
6543
username={user.username}
6644
avatarURL={user.avatar_url}
6745
/>
6846
</Badge>
69-
<DropdownArrowcolor={colors.gray[6]}close={popover.isOpen}/>
47+
<DropdownArrow
48+
color={theme.colors.gray[6]}
49+
close={popover.isOpen}
50+
/>
7051
</div>
7152
</button>
7253
</PopoverTrigger>
7354

7455
<PopoverContent
7556
horizontal="right"
76-
css={(theme)=>({
57+
css={{
7758
".MuiPaper-root":{
7859
minWidth:"auto",
7960
width:260,
8061
boxShadow:theme.shadows[6],
8162
},
82-
})}
63+
}}
8364
>
8465
<UserDropdownContent
8566
user={user}
@@ -93,3 +74,30 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
9374
</Popover>
9475
);
9576
};
77+
78+
conststyles={
79+
button:css`
80+
background: none;
81+
border:0;
82+
cursor: pointer;
83+
height:${navHeight}px;
84+
padding:12px0;
85+
86+
&:hover {
87+
background-color: transparent;
88+
}
89+
`,
90+
91+
badgeContainer:{
92+
display:"flex",
93+
alignItems:"center",
94+
minWidth:0,
95+
maxWidth:300,
96+
},
97+
98+
avatar:{
99+
width:BUTTON_SM_HEIGHT,
100+
height:BUTTON_SM_HEIGHT,
101+
fontSize:16,
102+
},
103+
}satisfiesRecord<string,Interpolation<Theme>>;

‎site/src/components/Dashboard/ServiceBanner/ServiceBannerView.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import{Pill}from"components/Pill/Pill";
22
importReactMarkdownfrom"react-markdown";
3-
import{colors}from"theme/colors";
43
import{css,useTheme}from"@emotion/react";
54
import{readableForegroundColor}from"utils/colors";
65

@@ -38,7 +37,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
3837
align-items: center;
3938
4039
&.error {
41-
background-color:${colors.red[12]};
40+
background-color:${theme.colors.red[12]};
4241
}
4342
`}
4443
>

‎site/src/components/IconField/IconField.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import Picker from "@emoji-mart/react";
66
import{typeFC}from"react";
77
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
88
import{Stack}from"components/Stack/Stack";
9-
import{colors}from"theme/colors";
109
importdatafrom"@emoji-mart/data/sets/14/twitter.json";
1110
importiconsfrom"theme/icons.json";
1211
import{
@@ -103,8 +102,8 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
103102
styles={css`
104103
em-emoji-picker {
105104
--rgb-background:${theme.palette.background.paper};
106-
--rgb-input:${colors.gray[17]};
107-
--rgb-color:${colors.gray[4]};
105+
--rgb-input:${theme.colors.gray[17]};
106+
--rgb-color:${theme.colors.gray[4]};
108107
109108
// Hack to prevent the right side from being cut off
110109
width:350px;

‎site/src/components/Pill/Pill.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import{typeFC,typeReactNode,useMemo,forwardRef}from"react";
22
import{css,typeInterpolation,typeTheme}from"@emotion/react";
3-
import{colors}from"theme/colors";
43
importtype{ThemeRole}from"theme/experimental";
54

65
exporttypePillType=ThemeRole|keyoftypeofthemeOverrides;
@@ -14,10 +13,10 @@ export interface PillProps {
1413
}
1514

1615
constthemeOverrides={
17-
neutral:{
18-
backgroundColor:colors.gray[13],
19-
borderColor:colors.gray[6],
20-
},
16+
neutral:(theme)=>({
17+
backgroundColor:theme.colors.gray[13],
18+
borderColor:theme.colors.gray[6],
19+
}),
2120
}satisfiesRecord<string,Interpolation<Theme>>;
2221

2322
constthemeStyles=(type:ThemeRole)=>(theme:Theme)=>{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp