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

feat(site): bring back dark blue#11071

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
aslilac merged 2 commits intomainfrombbdb
Dec 8, 2023
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletionsite/.storybook/main.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
import turbosnap from "vite-plugin-turbosnap";
import { mergeConfig } from "vite";

module.exports = {
stories: ["../src/**/*.stories.tsx"],
Expand Down
12 changes: 3 additions & 9 deletionssite/.storybook/preview.jsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,22 +6,16 @@ import {
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import { withRouter } from "storybook-addon-react-router-v6";
import { HelmetProvider } from "react-helmet-async";
import { dark } from "theme/mui";
import { dark as experimental } from "theme/experimental";
import theme from "theme";
import colors from "theme/tailwind";
import "theme/globalFonts";
import { QueryClient, QueryClientProvider } from "react-query";

const theme = {
...dark,
experimental,
};

export const decorators = [
(Story) => (
<StyledEngineProvider injectFirst>
<MuiThemeProvider theme={theme}>
<EmotionThemeProvider theme={theme}>
<MuiThemeProvider theme={theme.dark}>
<EmotionThemeProvider theme={theme.dark}>
<CssBaseline />
<Story />
</EmotionThemeProvider>
Expand Down
4 changes: 2 additions & 2 deletionssite/src/@types/emotion.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
import type { Theme asMuiTheme } from "@mui/material/styles";
import type { Theme asCoderTheme } from "theme";

declare module "@emotion/react" {
interface Theme extendsMuiTheme {}
interface Theme extendsCoderTheme {}
}
6 changes: 0 additions & 6 deletionssite/src/@types/mui.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -24,9 +24,3 @@ declare module "@mui/material/Button" {
xlarge: true;
}
}

declare module "@mui/system" {
interface Theme {
experimental: NewTheme;
}
}
12 changes: 3 additions & 9 deletionssite/src/App.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,8 +6,7 @@ import { HelmetProvider } from "react-helmet-async";
import { AppRouter } from "./AppRouter";
import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
import { dark } from "./theme/mui";
import { dark as experimental } from "./theme/experimental";
import theme from "./theme";
import "./theme/globalFonts";
import {
StyledEngineProvider,
Expand All@@ -30,16 +29,11 @@ const defaultQueryClient = new QueryClient({
},
});

const theme = {
...dark,
experimental,
};

export const ThemeProviders: FC<PropsWithChildren> = ({ children }) => {
return (
<StyledEngineProvider injectFirst>
<MuiThemeProvider theme={theme}>
<EmotionThemeProvider theme={theme}>
<MuiThemeProvider theme={theme.dark}>
<EmotionThemeProvider theme={theme.dark}>
<CssBaseline enableColorScheme />
{children}
</EmotionThemeProvider>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -36,7 +36,6 @@ import { RocketIcon } from "components/Icons/RocketIcon";
import ErrorIcon from "@mui/icons-material/ErrorOutline";
import { MONOSPACE_FONT_FAMILY } from "theme/constants";
import { getDisplayWorkspaceStatus } from "utils/workspace";
import { colors } from "theme/colors";
import { HelpTooltipTitle } from "components/HelpTooltip/HelpTooltip";
import { Stack } from "components/Stack/Stack";
import { type ClassName, useClassName } from "hooks/useClassName";
Expand DownExpand Up@@ -372,9 +371,14 @@ const ValueSeparator: FC = () => {
};

const HealthIssue: FC<PropsWithChildren> = ({ children }) => {
const theme = useTheme();

return (
<Stack direction="row" spacing={1} alignItems="center">
<ErrorIcon css={{ width: 16, height: 16 }} htmlColor={colors.red[10]} />
<ErrorIcon
css={{ width: 16, height: 16 }}
htmlColor={theme.colors.red[10]}
/>
{children}
</Stack>
);
Expand DownExpand Up@@ -408,8 +412,8 @@ const styles = {
height: 16px;
}
`,
unhealthy: css`
background-color: ${colors.red[10]};
unhealthy:(theme) =>css`
background-color: ${theme.colors.red[10]};
`,
group: css`
display: flex;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
import Link from "@mui/material/Link";
import {
css,
type CSSObject,
type Interpolation,
type Theme,
useTheme,
} from "@emotion/react";
import Link from "@mui/material/Link";
import { css } from "@emotion/react";
import { useState } from "react";
import { type FC, useState } from "react";
import { Expander } from "components/Expander/Expander";
import { Pill } from "components/Pill/Pill";
import { colors } from "theme/colors";

export const Language = {
licenseIssue: "License Issue",
Expand All@@ -32,7 +31,7 @@ export interface LicenseBannerViewProps {
warnings: string[];
}

export const LicenseBannerView:React.FC<LicenseBannerViewProps> = ({
export const LicenseBannerView: FC<LicenseBannerViewProps> = ({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Do you know of a way to get our linter to enforce this?

Copy link
MemberAuthor

@aslilacaslilacDec 8, 2023•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

no, I wish 😪

errors,
warnings,
}) => {
Expand All@@ -48,7 +47,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
display: flex;
align-items: center;
padding: 12px;
background-color: ${type === "error" ? colors.red[10] : colors.orange[10]};
background-color: ${type === "error"
? theme.colors.red[10]
: theme.colors.orange[10]};
`;

if (messages.length === 1) {
Expand Down
17 changes: 8 additions & 9 deletionssite/src/components/Dashboard/Navbar/NavbarView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,13 +10,12 @@ import MenuIcon from "@mui/icons-material/Menu";
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
import { type FC, type ReactNode, useRef, useState } from "react";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { colors } from "theme/colors";
import type * as TypesGen from "api/typesGenerated";
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
import { ProxyContextValue } from "contexts/ProxyContext";
import type * as TypesGen from "api/typesGenerated";
import type { ProxyContextValue } from "contexts/ProxyContext";
import { displayError } from "components/GlobalSnackbar/utils";
import { CoderIcon } from "components/Icons/CoderIcon";
import { ProxyStatusLatency } from "components/ProxyStatusLatency/ProxyStatusLatency";
import { CoderIcon } from "components/Icons/CoderIcon";
import { usePermissions } from "hooks/usePermissions";
import { UserDropdown } from "./UserDropdown/UserDropdown";

Expand DownExpand Up@@ -124,8 +123,8 @@ export const NavbarView: FC<NavbarViewProps> = ({
<nav
css={{
height: navHeight,
borderBottom: `1px solid ${theme.palette.divider}`,
backgroundColor: theme.palette.background.paper,
borderBottom: `1px solid ${theme.palette.divider}`,
}}
>
<div css={styles.wrapper}>
Expand DownExpand Up@@ -290,9 +289,9 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
<div
css={{
width: "100%",
maxWidth: "320px",
fontSize: 14,
padding: 16,
maxWidth: "320px",
lineHeight: "140%",
}}
>
Expand All@@ -308,12 +307,12 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
Select a region nearest to you
</h4>
<p
css={(theme) => ({
css={{
fontSize: 13,
color: theme.palette.text.secondary,
lineHeight: "inherit",
marginTop: 0.5,
})}
}}
>
Workspace proxies improve terminal and web app connections to
workspaces. This does not apply to CLI connections. A region must be
Expand DownExpand Up@@ -457,7 +456,7 @@ const styles = {
},
link: (theme) => css`
align-items: center;
color: ${colors.gray[6]};
color: ${theme.colors.gray[6]};
display: flex;
flex: 1;
font-size: 16px;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
import Badge from "@mui/material/Badge";
import { type FC, type PropsWithChildren } from "react";
import { colors } from "theme/colors";
import { type FC, type ReactNode } from "react";
import type * as TypesGen from "api/typesGenerated";
import { BUTTON_SM_HEIGHT, navHeight } from "theme/constants";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
import { UserDropdownContent } from "./UserDropdownContent";
import { css } from "@emotion/react";
import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
import {
Popover,
PopoverContent,
Expand All@@ -19,67 +18,49 @@ export interface UserDropdownProps {
supportLinks?: TypesGen.LinkConfig[];
onSignOut: () => void;
isDefaultOpen?: boolean;
children?: ReactNode;
}

export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
export const UserDropdown: FC<UserDropdownProps> = ({
buildInfo,
user,
supportLinks,
onSignOut,
isDefaultOpen,
}: UserDropdownProps) => {
}) => {
const theme = useTheme();

return (
<Popover isDefaultOpen={isDefaultOpen}>
{(popover) => (
<>
<PopoverTrigger>
<button
css={css`
background: none;
border: 0;
cursor: pointer;
height: ${navHeight}px;
padding: 12px 0;

&:hover {
background-color: transparent;
}
`}
data-testid="user-dropdown-trigger"
>
<div
css={{
display: "flex",
alignItems: "center",
minWidth: 0,
maxWidth: 300,
}}
>
<button css={styles.button} data-testid="user-dropdown-trigger">
<div css={styles.badgeContainer}>
<Badge overlap="circular">
<UserAvatar
css={{
width: BUTTON_SM_HEIGHT,
height: BUTTON_SM_HEIGHT,
fontSize: 16,
}}
css={styles.avatar}
username={user.username}
avatarURL={user.avatar_url}
/>
</Badge>
<DropdownArrow color={colors.gray[6]} close={popover.isOpen} />
<DropdownArrow
color={theme.colors.gray[6]}
close={popover.isOpen}
/>
</div>
</button>
</PopoverTrigger>

<PopoverContent
horizontal="right"
css={(theme) => ({
css={{
".MuiPaper-root": {
minWidth: "auto",
width: 260,
boxShadow: theme.shadows[6],
},
})}
}}
>
<UserDropdownContent
user={user}
Expand All@@ -93,3 +74,30 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
</Popover>
);
};

const styles = {
button: css`
background: none;
border: 0;
cursor: pointer;
height: ${navHeight}px;
padding: 12px 0;

&:hover {
background-color: transparent;
}
`,

badgeContainer: {
display: "flex",
alignItems: "center",
minWidth: 0,
maxWidth: 300,
},

avatar: {
width: BUTTON_SM_HEIGHT,
height: BUTTON_SM_HEIGHT,
fontSize: 16,
},
} satisfies Record<string, Interpolation<Theme>>;
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { Pill } from "components/Pill/Pill";
import ReactMarkdown from "react-markdown";
import { colors } from "theme/colors";
import { css, useTheme } from "@emotion/react";
import { readableForegroundColor } from "utils/colors";

Expand DownExpand Up@@ -38,7 +37,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
align-items: center;

&.error {
background-color: ${colors.red[12]};
background-color: ${theme.colors.red[12]};
}
`}
>
Expand Down
5 changes: 2 additions & 3 deletionssite/src/components/IconField/IconField.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -6,7 +6,6 @@ import Picker from "@emoji-mart/react";
import { type FC } from "react";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { Stack } from "components/Stack/Stack";
import { colors } from "theme/colors";
import data from "@emoji-mart/data/sets/14/twitter.json";
import icons from "theme/icons.json";
import {
Expand DownExpand Up@@ -103,8 +102,8 @@ const IconField: FC<IconFieldProps> = ({ onPickEmoji, ...textFieldProps }) => {
styles={css`
em-emoji-picker {
--rgb-background: ${theme.palette.background.paper};
--rgb-input: ${colors.gray[17]};
--rgb-color: ${colors.gray[4]};
--rgb-input: ${theme.colors.gray[17]};
--rgb-color: ${theme.colors.gray[4]};

// Hack to prevent the right side from being cut off
width: 350px;
Expand Down
9 changes: 4 additions & 5 deletionssite/src/components/Pill/Pill.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
import { type FC, type ReactNode, useMemo, forwardRef } from "react";
import { css, type Interpolation, type Theme } from "@emotion/react";
import { colors } from "theme/colors";
import type { ThemeRole } from "theme/experimental";

export type PillType = ThemeRole | keyof typeof themeOverrides;
Expand All@@ -14,10 +13,10 @@ export interface PillProps {
}

const themeOverrides = {
neutral: {
backgroundColor: colors.gray[13],
borderColor: colors.gray[6],
},
neutral:(theme) => ({
backgroundColor:theme.colors.gray[13],
borderColor:theme.colors.gray[6],
}),
} satisfies Record<string, Interpolation<Theme>>;

const themeStyles = (type: ThemeRole) => (theme: Theme) => {
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp