Skip to content

Commit fef88a7

Browse files
alyssajoyneralyssajoyner
committed
Update styles
1 parent 35bd14c commit fef88a7

File tree

6 files changed

+79
-79
lines changed

6 files changed

+79
-79
lines changed

‎src/components/configEditor/LabeledInput.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export function LabeledInput(props: LabeledInputProps) {
1515
const { label, tooltip, placeholder, disabled, value, onChange } = props;
1616

1717
return (
18-
<div className={styles.Common.flexContainer}>
18+
<div className={styles.Common.flex}>
1919
<InlineFormLabel width={12} className="query-keyword" tooltip={tooltip || label}>
2020
{label}
2121
</InlineFormLabel>

‎src/components/queryBuilder/DatabaseTableSelect.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const DatabaseSelect = (props: DatabaseSelectProps) => {
3434
}, [datasource, database, onDatabaseChange]);
3535

3636
return (
37-
<>
37+
<div className={styles.Common.flex}>
3838
<InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
3939
{label}
4040
</InlineFormLabel>
@@ -46,7 +46,7 @@ export const DatabaseSelect = (props: DatabaseSelectProps) => {
4646
createCustomValue={true}
4747
></Combobox>
4848
</div>
49-
</>
49+
</div>
5050
);
5151
};
5252

‎src/components/queryBuilder/EditorTypeSwitcher.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { EditorType, CHQuery, defaultCHBuilderQuery } from 'types/sql';
88
import { QueryBuilderOptions } from 'types/queryBuilder';
99
import { mapQueryTypeToGrafanaFormat } from 'data/utils';
1010
import { Datasource } from 'data/CHDatasource';
11+
import { styles } from 'styles';
1112

1213
interface CHEditorTypeSwitcherProps {
1314
query: CHQuery;
@@ -85,7 +86,7 @@ export const EditorTypeSwitcher = (props: CHEditorTypeSwitcherProps) => {
8586
setCannotConvertModalState(false);
8687
};
8788
return (
88-
<span>
89+
<span className={styles.Common.flexContainer}>
8990
<InlineFormLabel width={8} className="query-keyword" tooltip={tooltip}>
9091
{label}
9192
</InlineFormLabel>

‎src/components/queryBuilder/OrderByEditor.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,6 @@ export const OrderByEditor = (props: OrderByEditorProps) => {
122122
size="sm"
123123
onClick={addOrderByItem}
124124
className={styles.Common.smallBtn}
125-
style={{ margin: '4px 0 0 0' }}
126125
>
127126
{addLabel}
128127
</Button>

‎src/components/queryBuilder/views/TraceQueryBuilder.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
181181
onVersionChange={(v) => builderOptionsDispatch(setOtelVersion(v))}
182182
wide
183183
/>
184-
<div className={styles.Common.flexContainer}>
184+
<div className={styles.Common.flex}>
185185
<ColumnSelect
186186
disabled={builderState.otelEnabled}
187187
allColumns={allColumns}
@@ -205,7 +205,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
205205
wide
206206
/>
207207
</div>
208-
<div className={styles.Common.flexContainer}>
208+
<div className={styles.Common.flex}>
209209
<ColumnSelect
210210
disabled={builderState.otelEnabled}
211211
allColumns={allColumns}
@@ -229,7 +229,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
229229
wide
230230
/>
231231
</div>
232-
<div className={styles.Common.flexContainer}>
232+
<div className={styles.Common.flex}>
233233
<ColumnSelect
234234
disabled={builderState.otelEnabled}
235235
allColumns={allColumns}
@@ -253,7 +253,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
253253
wide
254254
/>
255255
</div>
256-
<div className={styles.Common.flexContainer}>
256+
<div className={styles.Common.flex}>
257257
<ColumnSelect
258258
disabled={builderState.otelEnabled}
259259
allColumns={allColumns}
@@ -271,7 +271,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
271271
onChange={onOptionChange('durationUnit')}
272272
/>
273273
</div>
274-
<div className={styles.Common.flexContainer}>
274+
<div className={styles.Common.flex}>
275275
<ColumnSelect
276276
disabled={builderState.otelEnabled}
277277
allColumns={allColumns}
@@ -295,7 +295,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
295295
wide
296296
/>
297297
</div>
298-
<div className={styles.Common.flexContainer}>
298+
<div className={styles.Common.flex}>
299299
<ColumnSelect
300300
disabled={builderState.otelEnabled}
301301
allColumns={allColumns}
@@ -319,7 +319,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
319319
wide
320320
/>
321321
</div>
322-
<div className={styles.Common.flexContainer}>
322+
<div className={styles.Common.flex}>
323323
<ColumnSelect
324324
disabled={builderState.otelEnabled}
325325
allColumns={allColumns}
@@ -343,7 +343,7 @@ export const TraceQueryBuilder = (props: TraceQueryBuilderProps) => {
343343
wide
344344
/>
345345
</div>
346-
<div className={styles.Common.flexContainer}>
346+
<div className={styles.Common.flex}>
347347
<ColumnSelect
348348
disabled={builderState.otelEnabled}
349349
allColumns={allColumns}

‎src/styles.ts‎

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,78 +2,78 @@ import { css } from '@emotion/css';
22

33
export const styles = {
44
Common: {
5-
check: css`
6-
margin-top: 5px;
7-
`,
8-
wrapper: css`
9-
position: relative;
10-
width: 100%;
11-
`,
12-
smallBtn: css`
13-
margin-top: 5px;
14-
margin-inline: 5px;
15-
`,
16-
selectWrapper: css`
17-
width: 100%;
18-
`,
19-
inlineSelect: css`
20-
margin-right: 5px;
21-
`,
22-
firstLabel: css`
23-
margin-right: 5px;
24-
`,
25-
expand: css`
26-
position: absolute;
27-
top: 2px;
28-
left: 6px;
29-
z-index: 100;
30-
color: gray;
31-
`,
32-
flexContainer: css`
33-
display: 'flex',
34-
marginBottom: '4px'
35-
`,
36-
flex: css`
37-
display: flex;
38-
`,
39-
flexColumn: css`
40-
display: flex;
41-
flex-direction: column;
42-
`,
5+
check: css({
6+
marginTop: '5px',
7+
}),
8+
wrapper: css({
9+
position: 'relative',
10+
width: '100%',
11+
}),
12+
smallBtn: css({
13+
marginTop: '5px',
14+
marginInline: '5px',
15+
}),
16+
selectWrapper: css({
17+
width: '100%',
18+
}),
19+
inlineSelect: css({
20+
marginRight: '5px',
21+
}),
22+
firstLabel: css({
23+
marginRight: '5px',
24+
}),
25+
expand: css({
26+
position: 'absolute',
27+
top: '2px',
28+
left: '6px',
29+
zIndex: 100,
30+
color: 'gray',
31+
}),
32+
flexContainer: css({
33+
display: 'flex',
34+
marginBottom: '4px',
35+
}),
36+
flex: css({
37+
display: 'flex',
38+
}),
39+
flexColumn: css({
40+
display: 'flex',
41+
flexDirection: 'column',
42+
}),
4343
},
4444
ConfigEditor: {
45-
container: css`
46-
justify-content: space-between;
47-
h5 {
48-
line-height: 34px;
49-
margin-bottom: 5px;
50-
}
51-
button {
52-
margin-right: 5px;
53-
}
54-
`,
55-
wide: css`
56-
width: 75%;
57-
`,
58-
subHeader: css`
59-
padding: 5px 0 5px 0;
60-
`,
45+
container: css({
46+
justifyContent: 'space-between',
47+
'& h5': {
48+
lineHeight: '34px',
49+
marginBottom: '5px',
50+
},
51+
'& button': {
52+
marginRight: '5px',
53+
},
54+
}),
55+
wide: css({
56+
width: '75%',
57+
}),
58+
subHeader: css({
59+
padding: '5px 0 5px 0',
60+
}),
6161
},
6262
QueryEditor: {
63-
queryType: css`
64-
justify-content: space-between;
65-
span {
66-
display: flex;
67-
}
68-
`,
69-
inlineField: css`
70-
margin-left: 7px;
71-
`,
63+
queryType: css({
64+
justifyContent: 'space-between',
65+
'& span': {
66+
display: 'flex',
67+
},
68+
}),
69+
inlineField: css({
70+
marginLeft: '7px',
71+
}),
7272
},
7373
FormatSelector: {
74-
formatSelector: css`
75-
display: flex;
76-
`,
74+
formatSelector: css({
75+
display: 'flex',
76+
}),
7777
},
7878
VariablesEditor: {},
7979
};

0 commit comments

Comments
 (0)