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

chore: use px values instead oftheme.spacing andtheme.shape.borderRadius#10519

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 6 commits intomainfromaxe-theme-spacing
Nov 6, 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
30 changes: 15 additions & 15 deletionssite/src/components/Avatar/Avatar.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,24 +11,24 @@ export type AvatarProps = MuiAvatarProps & {
};

const sizeStyles = {
xs:(theme) => ({
width:theme.spacing(2),
height:theme.spacing(2),
fontSize:theme.spacing(1),
xs: {
width:16,
height:16,
fontSize:8,
fontWeight: 700,
}),
sm:(theme) => ({
width:theme.spacing(3),
height:theme.spacing(3),
fontSize:theme.spacing(1.5),
},
sm: {
width:24,
height:24,
fontSize:12,
fontWeight: 600,
}),
},
md: {},
xl:(theme) => ({
width:theme.spacing(6),
height:theme.spacing(6),
fontSize:theme.spacing(3),
}),
xl: {
width:48,
height:48,
fontSize:24,
},
} satisfies Record<string, Interpolation<Theme>>;

const colorStyles = {
Expand Down
2 changes: 1 addition & 1 deletionsite/src/components/AvatarData/AvatarData.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -28,7 +28,7 @@ export const AvatarData: FC<AvatarDataProps> = ({
direction="row"
alignItems="center"
css={{
minHeight:theme.spacing(5), // Make it predictable for the skeleton
minHeight:40, // Make it predictable for the skeleton
width: "100%",
lineHeight: "150%",
}}
Expand Down
6 changes: 3 additions & 3 deletionssite/src/components/CodeExample/CodeExample.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,16 +26,16 @@ export const CodeExample: FC<CodeExampleProps> = (props) => {
color: theme.palette.primary.contrastText,
fontFamily: MONOSPACE_FONT_FAMILY,
fontSize: 14,
borderRadius:theme.shape.borderRadius,
padding:theme.spacing(1),
borderRadius:8,
padding:8,
lineHeight: "150%",
border: `1px solid ${theme.palette.divider}`,
}}
className={className}
>
<code
css={{
padding:theme.spacing(0, 1),
padding:"0 8px",
width: "100%",
display: "flex",
alignItems: "center",
Expand Down
14 changes: 3 additions & 11 deletionssite/src/components/CopyButton/CopyButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -46,8 +46,8 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
<IconButton
className={buttonClassName}
css={(theme) => css`
border-radius:${theme.shape.borderRadius}px;
padding:${theme.spacing(0.85)};
border-radius:8px;
padding:8px;
min-width: 32px;

&:hover {
Expand All@@ -64,15 +64,7 @@ export const CopyButton: React.FC<React.PropsWithChildren<CopyButtonProps>> = ({
) : (
<FileCopyIcon css={fileCopyIconStyles} />
)}
{ctaCopy && (
<div
css={(theme) => ({
marginLeft: theme.spacing(1),
})}
>
{ctaCopy}
</div>
)}
{ctaCopy && <div css={{ marginLeft: 8 }}>{ctaCopy}</div>}
</IconButton>
</div>
</Tooltip>
Expand Down
2 changes: 1 addition & 1 deletionsite/src/components/Dashboard/DashboardLayout.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -60,7 +60,7 @@ export const DashboardLayout: FC = () => {
sx: (theme) => ({
background: theme.palette.background.paper,
color: theme.palette.text.primary,
maxWidth:theme.spacing(55),
maxWidth:440,
flexDirection: "row",
borderColor: theme.palette.info.light,

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -46,18 +46,18 @@ const styles = {
align-items: center;
`,
category: (theme) => ({
marginRight:theme.spacing(2),
marginRight:16,
color: theme.palette.text.primary,
}),
values: (theme) => ({
display: "flex",
gap:theme.spacing(1),
gap:8,
color: theme.palette.text.secondary,
}),
value:(theme) =>css`
value: css`
display: flex;
align-items: center;
gap:${theme.spacing(0.5)};
gap:4px;

& svg {
width: 12px;
Expand DownExpand Up@@ -129,7 +129,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
align-items: center;
justify-content: center;
background-color: ${unhealthy ? colors.red[10] : undefined};
padding:${theme.spacing(0, 1.5)};
padding:0 12px;
height: ${bannerHeight}px;
color: #fff;

Expand All@@ -142,9 +142,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
const statusSummaryStyle = className`
${theme.typography.body2 as CSSObject}

margin:${theme.spacing(0, 0, 0.5, 1.5)};
width:${theme.spacing(50)};
padding:${theme.spacing(2)};
margin:0 0 4px 12px;
width:400px;
padding:16px;
color: ${theme.palette.text.primary};
background-color: ${theme.palette.background.paper};
border: 1px solid ${theme.palette.divider};
Expand All@@ -158,13 +158,13 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
height: bannerHeight,
bottom: 0,
zIndex: 1,
paddingRight:theme.spacing(2),
paddingRight:16,
backgroundColor: theme.palette.background.paper,
display: "flex",
alignItems: "center",
fontFamily: MONOSPACE_FONT_FAMILY,
fontSize: 12,
gap:theme.spacing(4),
gap:32,
borderTop: `1px solid ${theme.palette.divider}`,
overflowX: "auto",
whiteSpace: "nowrap",
Expand DownExpand Up@@ -204,7 +204,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
)
}
open={process.env.STORYBOOK === "true" ? true : undefined}
css={{ marginRight:theme.spacing(-2) }}
css={{ marginRight:-16 }}
>
{unhealthy ? (
<Link component={RouterLink} to="/health" css={statusBadgeStyle}>
Expand DownExpand Up@@ -323,7 +323,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {
marginLeft: "auto",
display: "flex",
alignItems: "center",
gap:theme.spacing(2),
gap:16,
}}
>
<Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
Expand All@@ -335,23 +335,24 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = (props) => {

<Tooltip title="A countdown until stats are fetched again. Click to refresh!">
<Button
css={css`
${styles.value(theme)}
css={[
styles.value,
css`
margin: 0;
padding: 0 8px;
height: unset;
min-height: unset;
font-size: unset;
color: unset;
border: 0;
min-width: unset;
font-family: inherit;

margin: 0;
padding: 0 8px;
height: unset;
min-height: unset;
font-size: unset;
color: unset;
border: 0;
min-width: unset;
font-family: inherit;

& svg {
margin-right: ${theme.spacing(0.5)};
}
`}
& svg {
margin-right: 4px;
}
`,
]}
onClick={() => {
if (fetchStats) {
fetchStats();
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,10 +21,10 @@ export const Language = {
};

const styles = {
leftContent:(theme) => ({
marginRight:theme.spacing(1),
marginLeft:theme.spacing(1),
}),
leftContent: {
marginRight:8,
marginLeft:8,
},
} satisfies Record<string, Interpolation<Theme>>;

export interface LicenseBannerViewProps {
Expand All@@ -47,7 +47,7 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({

display: flex;
align-items: center;
padding:${theme.spacing(1.5)};
padding:12px;
background-color: ${type === "error"
? colors.red[12]
: theme.palette.warning.main};
Expand DownExpand Up@@ -84,9 +84,9 @@ export const LicenseBannerView: React.FC<LicenseBannerViewProps> = ({
</Link>
</div>
<Expander expanded={showDetails} setExpanded={setShowDetails}>
<ul css={{ padding:theme.spacing(1), margin: 0 }}>
<ul css={{ padding:8, margin: 0 }}>
{messages.map((message) => (
<li css={{ margin:theme.spacing(0.5) }} key={message}>
<li css={{ margin:4 }} key={message}>
{message}
</li>
))}
Expand Down
23 changes: 12 additions & 11 deletionssite/src/components/Dashboard/Navbar/NavbarView.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -70,17 +70,17 @@ const styles = {
justify-content: flex-start;
}
`,
drawerHeader:(theme) => ({
padding:theme.spacing(2),
paddingTop:theme.spacing(4),
paddingBottom:theme.spacing(4),
}),
drawerHeader: {
padding:16,
paddingTop:32,
paddingBottom:32,
},
logo: (theme) => css`
align-items: center;
display: flex;
height: ${navHeight}px;
color: ${theme.palette.text.primary};
padding:${theme.spacing(2)};
padding:16px;

// svg is for the Coder logo, img is for custom images
& svg,
Expand All@@ -89,10 +89,10 @@ const styles = {
object-fit: contain;
}
`,
drawerLogo:(theme) => ({
drawerLogo: {
padding: 0,
maxHeight:theme.spacing(5),
}),
maxHeight:40,
},
item: {
padding: 0,
},
Expand All@@ -102,7 +102,7 @@ const styles = {
display: flex;
flex: 1;
font-size: 16px;
padding:${theme.spacing(1.5)} ${theme.spacing(2)};
padding:12px 16px;
text-decoration: none;
transition: background-color 0.15s ease-in-out;

Expand All@@ -117,7 +117,7 @@ const styles = {

${theme.breakpoints.up("md")} {
height: ${navHeight}px;
padding: 0${theme.spacing(3)};
padding: 024px;
}
`,
} satisfies Record<string, Interpolation<Theme>>;
Expand DownExpand Up@@ -171,6 +171,7 @@ const NavItems: React.FC<NavItemsProps> = (props) => {
</nav>
);
};

export const NavbarView: FC<NavbarViewProps> = ({
user,
logo_url,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
import Badge from "@mui/material/Badge";
import { FC, PropsWithChildren } from "react";
import {typeFC, type PropsWithChildren } from "react";
import { colors } from "theme/colors";
import * as TypesGen from "api/typesGenerated";
importtype* as TypesGen from "api/typesGenerated";
import { navHeight } from "theme/constants";
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
import { UserAvatar } from "components/UserAvatar/UserAvatar";
Expand DownExpand Up@@ -35,12 +35,12 @@ export const UserDropdown: FC<PropsWithChildren<UserDropdownProps>> = ({
<>
<PopoverTrigger>
<button
css={(theme) =>css`
css={css`
background: none;
border: 0;
cursor: pointer;
height: ${navHeight}px;
padding:${theme.spacing(1.5, 0)};
padding:12px 0;

&:hover {
background-color: transparent;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -28,7 +28,7 @@ const styles = {
info: (theme) => [
theme.typography.body2 as CSSObject,
{
padding:theme.spacing(2.5),
padding:20,
},
],
userName: {
Expand All@@ -45,8 +45,8 @@ const styles = {
color: "inherit",
},
menuItem: (theme) => css`
gap:${theme.spacing(2.5)};
padding:${theme.spacing(1, 2.5)};
gap:20px;
padding:8px 20px;

&:hover {
background-color: ${theme.palette.action.hover};
Expand All@@ -55,8 +55,8 @@ const styles = {
`,
menuItemIcon: (theme) => ({
color: theme.palette.text.secondary,
width:theme.spacing(2.5),
height:theme.spacing(2.5),
width:20,
height:20,
}),
menuItemText: {
fontSize: 14,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -33,7 +33,7 @@ export const ServiceBannerView: React.FC<ServiceBannerViewProps> = ({
return (
<div
css={css`
padding:${theme.spacing(1.5)};
padding:12px;
background-color: ${backgroundColor ?? theme.palette.warning.main};
display: flex;
align-items: center;
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp