Skip to content

Commit 8111b1c

Browse files
NickLanamNickLanam
authored
Update dropdown styling (#1345)
Summary: Rounds off borders, changes colors somewhat, and visually connects the dropdown with its anchor. https://github.com/pixie-io/pixie/assets/314133/5d48cee2-4230-4474-b11d-7bb2e1556d0a Relevant Issues: #1174 Type of change: /kind cleanup Test Plan: In the Live view, play with the cluster selector, the script selector, and the arguments. Try scripts that have several arguments, too. --------- Signed-off-by: Nick Lanam <nlanam@pixielabs.ai>
1 parent 6f15b36 commit 8111b1c

8 files changed

Lines changed: 263 additions & 107 deletions

File tree

‎src/ui/src/components/autocomplete/autocomplete.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@ import { Key } from './key';
3838

3939
const useStyles = makeStyles((theme: Theme) => createStyles({
4040
root: {
41-
backgroundColor: theme.palette.background.five,
41+
backgroundColor: theme.palette.background.one,
4242
cursor: 'text',
4343
display: 'flex',
4444
flexDirection: 'column',
4545
...scrollbarStyles(theme),
4646
},
4747
input: {
48-
backgroundColor: theme.palette.background.four,
48+
backgroundColor: theme.palette.background.three,
4949
},
5050
completions: {
5151
flex: 1,
@@ -67,6 +67,7 @@ interface AutoCompleteProps {
6767
placeholder?: string;
6868
prefix?: React.ReactNode;
6969
className?: string;
70+
hint?: React.ReactNode;
7071
}
7172

7273
type ItemsMap = Map<CompletionId, { title: CompletionTitle; index: number }>;
@@ -107,6 +108,7 @@ export const Autocomplete = React.memo<AutoCompleteProps>(({
107108
placeholder,
108109
prefix,
109110
className,
111+
hint,
110112
}) => {
111113
const classes = useStyles();
112114
const {
@@ -203,6 +205,7 @@ export const Autocomplete = React.memo<AutoCompleteProps>(({
203205
Showing top matches
204206
</div>
205207
)}
208+
{hint}
206209
</div>
207210
);
208211
});

‎src/ui/src/components/autocomplete/completions.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
7373
},
7474
},
7575
description: {
76+
backgroundColor: theme.palette.background.one,
7677
flex: 2,
7778
borderLeftStyle: 'solid',
7879
borderLeftWidth: '1px',
@@ -88,17 +89,18 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
8889
opacity: 0.3,
8990
},
9091
completion: {
91-
...theme.typography.body1,
92+
color: theme.palette.text.disabled,
93+
backgroundColor: theme.palette.background.one,
9294
paddingTop: theme.spacing(1),
9395
paddingBottom: theme.spacing(1),
9496
cursor: 'pointer',
97+
'& > span': {
98+
...theme.typography.body1,
99+
fontFamily: theme.typography.monospace.fontFamily,
100+
},
95101
'&.active': {
96-
backgroundColor: theme.palette.action.active,
97-
color: theme.palette.text.secondary,
98-
borderLeftStyle: 'solid',
99-
borderLeftWidth: theme.spacing(0.5),
100-
borderLeftColor: theme.palette.primary.main,
101-
paddingLeft: theme.spacing(1.5),
102+
color: theme.palette.text.primary,
103+
backgroundColor: theme.palette.background.five,
102104
},
103105
display: 'flex',
104106
alignItems: 'center',

‎src/ui/src/components/autocomplete/input.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,11 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
3131
...theme.typography.h6,
3232
position: 'relative',
3333
cursor: 'text',
34-
padding: theme.spacing(2.5),
34+
padding: `${theme.spacing(1.25)} ${theme.spacing(3)}`,
3535
fontWeight: theme.typography.fontWeightLight,
3636
display: 'flex',
3737
flexDirection: 'row',
3838
alignItems: 'baseline',
39-
40-
'> *': {
41-
flex: '1',
42-
},
4339
},
4440
inputWrapper: {
4541
position: 'relative',

‎src/ui/src/components/breadcrumbs/__snapshots__/breadcrumbs-test.tsx.snap‎

Lines changed: 28 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,35 @@
33
exports[`<Breadcrumbs/> renders correctly 1`] = `
44
<div>
55
<div
6-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation2 css-2psz7m-MuiPaper-root"
6+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 Breadcrumbs-triggerWrapper-1 css-zsf01h-MuiPaper-root"
77
>
88
<div
9-
class="Breadcrumbs-breadcrumbs-1"
9+
class="Breadcrumbs-breadcrumbs-2"
1010
>
1111
<div
12-
class="Breadcrumbs-breadcrumb-2"
12+
class="Breadcrumbs-breadcrumb-3"
1313
>
1414
<div
15-
class="Breadcrumbs-body-6"
15+
class="Breadcrumbs-body-8"
1616
>
1717
<div
18-
class="Breadcrumbs-content-7"
18+
class="Breadcrumbs-content-9"
1919
>
2020
<span
21-
class="Breadcrumbs-title-3"
21+
class="Breadcrumbs-title-5"
2222
>
2323
cluster:
2424
</span>
2525
<span
26-
class="Breadcrumbs-selectable-5"
26+
class="Breadcrumbs-selectable-7"
2727
>
2828
<span
29-
class="Breadcrumbs-value-4"
29+
class="Breadcrumbs-value-6"
3030
>
3131
gke-prod
3232
</span>
3333
<div
34-
class="Breadcrumbs-dropdownArrow-8"
34+
class="Breadcrumbs-dropdownArrow-10"
3535
>
3636
<svg
3737
aria-hidden="true"
@@ -50,29 +50,32 @@ exports[`<Breadcrumbs/> renders correctly 1`] = `
5050
</div>
5151
</div>
5252
<div
53-
class="Breadcrumbs-breadcrumb-2"
53+
class="Breadcrumbs-divider-12 Breadcrumbs-dividerHidden-13"
54+
/>
55+
<div
56+
class="Breadcrumbs-breadcrumb-3"
5457
>
5558
<div
56-
class="Breadcrumbs-body-6"
59+
class="Breadcrumbs-body-8"
5760
>
5861
<div
59-
class="Breadcrumbs-content-7"
62+
class="Breadcrumbs-content-9"
6063
>
6164
<span
62-
class="Breadcrumbs-title-3"
65+
class="Breadcrumbs-title-5"
6366
>
6467
pod:
6568
</span>
6669
<span
67-
class="Breadcrumbs-selectable-5"
70+
class="Breadcrumbs-selectable-7"
6871
>
6972
<span
70-
class="Breadcrumbs-value-4"
73+
class="Breadcrumbs-value-6"
7174
>
7275
pod-123
7376
</span>
7477
<div
75-
class="Breadcrumbs-dropdownArrow-8"
78+
class="Breadcrumbs-dropdownArrow-10"
7679
>
7780
<svg
7881
aria-hidden="true"
@@ -91,30 +94,33 @@ exports[`<Breadcrumbs/> renders correctly 1`] = `
9194
</div>
9295
</div>
9396
<div
94-
class="Breadcrumbs-breadcrumb-2"
97+
class="Breadcrumbs-divider-12 Breadcrumbs-dividerHidden-13"
98+
/>
99+
<div
100+
class="Breadcrumbs-breadcrumb-3"
95101
>
96102
<div
97-
class="Breadcrumbs-body-6"
103+
class="Breadcrumbs-body-8"
98104
>
99105
<div
100-
class="Breadcrumbs-content-7"
106+
class="Breadcrumbs-content-9"
101107
>
102108
<span
103-
class="Breadcrumbs-title-3"
109+
class="Breadcrumbs-title-5"
104110
>
105111
script:
106112
</span>
107113
<span
108114
class=""
109115
>
110116
<span
111-
class="Breadcrumbs-value-4"
117+
class="Breadcrumbs-value-6"
112118
>
113119
px/pod
114120
</span>
115121
</span>
116122
<div
117-
class="Breadcrumbs-spacer-9"
123+
class="Breadcrumbs-spacer-11"
118124
/>
119125
</div>
120126
</div>

0 commit comments

Comments
 (0)