diff --git a/site/src/components/Resources/PortForwardButton.tsx b/site/src/components/Resources/PortForwardButton.tsx index 2e9089649e808..0209f4bd9a9c8 100644 --- a/site/src/components/Resources/PortForwardButton.tsx +++ b/site/src/components/Resources/PortForwardButton.tsx @@ -58,9 +58,10 @@ export const PortForwardButton: React.FC = (props) => { sx={{ fontSize: 12, fontWeight: 500, - height: 16, - padding: (theme) => theme.spacing(0, 1), - borderRadius: 7, + height: 20, + minWidth: 20, + padding: (theme) => theme.spacing(0, 0.5), + borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", @@ -82,11 +83,11 @@ export const PortForwardButton: React.FC = (props) => { onClose={onClose} anchorOrigin={{ vertical: "bottom", - horizontal: "left", + horizontal: "right", }} transformOrigin={{ vertical: "top", - horizontal: "left", + horizontal: "right", }} > @@ -210,7 +211,7 @@ export const PortForwardPopoverView: React.FC< max={65535} required sx={{ - fontSize: 12, + fontSize: 14, height: 34, p: (theme) => theme.spacing(0, 1.5), background: "none", @@ -248,7 +249,7 @@ const useStyles = makeStyles((theme) => ({ padding: 0, width: theme.spacing(38), color: theme.palette.text.secondary, - marginTop: theme.spacing(0.25), + marginTop: theme.spacing(0.5), }, openUrlButton: { diff --git a/site/src/theme/theme.ts b/site/src/theme/theme.ts index 48adafe05408d..354ade445fee9 100644 --- a/site/src/theme/theme.ts +++ b/site/src/theme/theme.ts @@ -92,6 +92,10 @@ dark = createTheme(dark, { input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 100px ${dark.palette.background.default} inset !important; } + + ::placeholder { + color: ${dark.palette.text.disabled}; + } `, }, MuiAvatar: {