Skip to content

Commit 3dcf553

Browse files
GurinderRawalaGurinderRawala
authored
style fixes for dashboards (#197)
1 parent 9086dab commit 3dcf553

File tree

8 files changed

+57
-48
lines changed

8 files changed

+57
-48
lines changed

‎packages/grafana-data/src/themes/createColors.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -172,13 +172,13 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
172172

173173
primary = {
174174
main: '#FF570AE5',
175-
border: '#D9D9C8',
175+
border: '#D7D7C7',
176176
text: '#101828',
177177
};
178178

179179
text = {
180180
primary: '#101828',
181-
secondary: '#344054',
181+
secondary: '#363636',
182182
disabled: '#9DA7B8',
183183
link: '#FF4702',
184184
maxContrast: palette.black,
@@ -220,9 +220,9 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
220220
};
221221

222222
background = {
223-
primary: '#F5F5F5',
223+
primary: '#FFFFFF',
224224
canvas: '#F5F5F5',
225-
secondary: '#F5f5f5',
225+
secondary: '#FFFFFF',
226226
};
227227

228228
action = {

‎packages/grafana-data/src/themes/createTypography.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ export interface ThemeTypographyInput {
5353
htmlFontSize?: number;
5454
}
5555

56-
const defaultFontFamily = '"Poppins", Inter, Satoshi, sans-serif'; //'"Roboto", "Helvetica", "Arial", sans-serif';
57-
const defaultFontFamilyMonospace = '"SatoshiLight", "FigtreeLight", monospace'; // "'Roboto Mono', monospace";
56+
const defaultFontFamily = '"Work Sans", Inter, Satoshi, sans-serif';
57+
const defaultFontFamilyMonospace = '"SatoshiLight", "FigtreeLight", monospace';
5858

5959
export function createTypography(colors: ThemeColors, typographyInput: ThemeTypographyInput = {}): ThemeTypography {
6060
const {

‎packages/grafana-ui/src/components/Pagination/Pagination.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
22
import { useMemo } from 'react';
33

44
import { useStyles2 } from '../../themes';
5-
import { Button, ButtonVariant } from '../Button';
5+
import { Button } from '../Button';
66
import { Icon } from '../Icon/Icon';
77

88
export interface Props {
@@ -34,17 +34,17 @@ export const Pagination = ({
3434
const pages = [...new Array(numberOfPages).keys()];
3535

3636
const condensePages = numberOfPages > pageLengthToCondense;
37-
const getListItem = (page: number, variant: 'primary' | 'secondary') => (
37+
const getListItem = (page: number, fill?: 'outline') => (
3838
<li key={page} className={styles.item}>
39-
<Button size="sm" variant={variant} onClick={() => onNavigate(page)}>
39+
<Button size="sm" onClick={() => onNavigate(page)} fill={fill}>
4040
{page}
4141
</Button>
4242
</li>
4343
);
4444

4545
return pages.reduce<JSX.Element[]>((pagesToRender, pageIndex) => {
4646
const page = pageIndex + 1;
47-
const variant: ButtonVariant = page === currentPage ? 'primary' : 'secondary';
47+
const fill: 'outline' | undefined = page === currentPage ? undefined : 'outline';
4848

4949
// The indexes at which to start and stop condensing pages
5050
const lowerBoundIndex = pageLengthToCondense;
@@ -72,7 +72,7 @@ export const Pagination = ({
7272
(currentPageIsBetweenBounds && page >= currentPage - pageOffset && page <= currentPage + pageOffset)
7373
) {
7474
// Renders a button for the page
75-
pagesToRender.push(getListItem(page, variant));
75+
pagesToRender.push(getListItem(page, fill));
7676
} else if (
7777
(page === lowerBoundIndex && currentPage < lowerBoundIndex) ||
7878
(page === upperBoundIndex && currentPage > upperBoundIndex) ||
@@ -87,7 +87,7 @@ export const Pagination = ({
8787
);
8888
}
8989
} else {
90-
pagesToRender.push(getListItem(page, variant));
90+
pagesToRender.push(getListItem(page, fill));
9191
}
9292
return pagesToRender;
9393
}, []);
@@ -104,9 +104,9 @@ export const Pagination = ({
104104
<Button
105105
aria-label={`previous page`}
106106
size="sm"
107-
variant="secondary"
108107
onClick={() => onNavigate(currentPage - 1)}
109108
disabled={currentPage === 1}
109+
fill="outline"
110110
>
111111
<Icon name="angle-left" />
112112
</Button>
@@ -116,7 +116,7 @@ export const Pagination = ({
116116
<Button
117117
aria-label={`next page`}
118118
size="sm"
119-
variant="secondary"
119+
fill="outline"
120120
onClick={() => onNavigate(currentPage + 1)}
121121
disabled={currentPage === numberOfPages}
122122
>

‎packages/grafana-ui/src/themes/GlobalStyles/dashboardGrid.ts

+10-1
Original file line numberDiff line numberDiff line change
@@ -31,14 +31,18 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
3131
position: 'unset !important' as 'unset',
3232
transform: 'translate(0px, 0px) !important',
3333
marginBottom: theme.spacing(2),
34+
boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
35+
borderRadius: theme.shape.borderRadius(2),
3436
},
3537
'.panel-repeater-grid-item': {
3638
height: 'auto !important',
39+
boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
40+
borderRadius: theme.shape.borderRadius(2),
3741
},
3842
},
3943

4044
'.react-grid-item.react-grid-placeholder': {
41-
boxShadow: `0 0 4px ${theme.colors.primary.border} !important`,
45+
boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
4246
background: `${theme.colors.primary.transparent} !important`,
4347
zIndex: '-1 !important',
4448
opacity: 'unset !important',
@@ -49,6 +53,11 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
4953
borderBottom: `2px solid ${theme.isDark ? theme.v1.palette.gray1 : theme.v1.palette.gray3} !important`,
5054
},
5155

56+
'.react-grid-item > div:first-of-type': {
57+
boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
58+
borderRadius: theme.shape.borderRadius(2),
59+
},
60+
5261
// Hack for preventing panel menu overlapping.
5362
'.react-grid-item.resizing.panel, .react-grid-item.panel.dropdown-menu-open, .react-grid-item.react-draggable-dragging.panel':
5463
{

‎public/app/features/variables/pickers/PickerRenderer.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -62,10 +62,9 @@ const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
6262
border: 'none',
6363
fontWeight: 500,
6464
fontSize: '14px',
65-
padding: '3px 6px',
66-
letterSpacing: '0.15px',
67-
height: '24px',
68-
marginTop: '2px',
65+
padding: '12px 6px',
66+
display: 'flex',
67+
alignItems: 'center',
6968
};
7069

7170
function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
@@ -76,6 +75,7 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
7675
() => ({
7776
...COMMON_PICKER_LABEL_STYLE,
7877
color: mode === 'light' ? '#2D333E' : '#DBD9D7',
78+
backgroundColor: '#F6F6F1',
7979
}),
8080
[mode]
8181
);

‎public/microfrontends/fn_dashboard/index.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
<script nonce="">
1111
window.fnData = {
1212
themePaths: {
13-
light: '../../../public/build/grafana.light.11edba0e518ac6df7727.css',
14-
dark: '../../../public/build/grafana.dark.75e907ac2464bdcdeb20.css',
13+
light: '../../../public/build/grafana.light.1225898111a2fd093893.css',
14+
dark: '../../../public/build/grafana.dark.cd0ed8a9f2cb3824f581.css',
1515
}
1616
};
1717
</script>
1818

1919

20-
<script nonce="" src="../../../public/build/runtime~fn_dashboard.832e70d83875a90e9629.js" type="text/javascript"></script>
20+
<script nonce="" src="../../../public/build/runtime~fn_dashboard.c72758889b72f840d29c.js" type="text/javascript"></script>
2121

22-
<script nonce="" src="../../../public/build/fn_dashboard.0ebf23b22c9b8b6b19b9.js" type="text/javascript"></script>
22+
<script nonce="" src="../../../public/build/fn_dashboard.5bf65485c5298da38ca6.js" type="text/javascript"></script>
2323

2424
</body>
2525
</html>

‎public/sass/_variables.generated.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ $height-lg: 48;
9999
// Typography
100100
// -------------------------
101101
/* stylelint-disable-next-line string-quotes */
102-
$font-family-sans-serif: "Poppins", Inter, Satoshi, sans-serif;
102+
$font-family-sans-serif: "Work Sans", Inter, Satoshi, sans-serif;
103103
/* stylelint-disable-next-line string-quotes */
104104
$font-family-monospace: "SatoshiLight", "FigtreeLight", monospace;
105105

‎public/sass/_variables.light.generated.scss

+24-24
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,8 @@ $gray-7: #fbfbfb;
5858
$white: #ffffff;
5959

6060
$layer0: #F5F5F5;
61-
$layer1: #F5F5F5;
62-
$layer2: #F5f5f5;
61+
$layer1: #FFFFFF;
62+
$layer2: #FFFFFF;
6363

6464
$divider: rgba(45, 51, 62, 0.12);
6565
$border0: rgba(45, 51, 62, 0.12);
@@ -99,8 +99,8 @@ $dashboard-bg: #F5F5F5;
9999

100100
$text-color: #101828;
101101
$text-color-strong: #000000;
102-
$text-color-semi-weak: #344054;
103-
$text-color-weak: #344054;
102+
$text-color-semi-weak: #363636;
103+
$text-color-weak: #363636;
104104
$text-color-faint: #9DA7B8;
105105
$text-color-emphasis: #000000;
106106
$text-blue: #101828;
@@ -128,7 +128,7 @@ $hr-border-color: $gray-4 !default;
128128

129129
// Panel
130130
// -------------------------
131-
$panel-bg: #F5F5F5;
131+
$panel-bg: #FFFFFF;
132132
$panel-border: 1px solid rgba(45, 51, 62, 0.12);
133133
$panel-header-hover-bg: rgba(45, 51, 62, 0.12);
134134
$panel-box-shadow: none;
@@ -142,16 +142,16 @@ $page-header-border-color: #F5F5F5;
142142
$divider-border-color: $gray-2;
143143

144144
// Graphite Target Editor
145-
$tight-form-func-bg: #F5f5f5;
146-
$tight-form-func-highlight-bg: #f0f0f0;
145+
$tight-form-func-bg: #FFFFFF;
146+
$tight-form-func-highlight-bg: #fafafa;
147147

148-
$modal-backdrop-bg: #F5F5F5;
148+
$modal-backdrop-bg: #FFFFFF;
149149
$code-tag-bg: $gray-6;
150150
$code-tag-border: $gray-4;
151151

152152
// cards
153-
$card-background: #F5f5f5;
154-
$card-background-hover: #F5f5f5;
153+
$card-background: #FFFFFF;
154+
$card-background-hover: #FFFFFF;
155155
$card-shadow: none;
156156

157157
// Lists
@@ -168,10 +168,10 @@ $scrollbarBorder: $gray-7;
168168

169169
// Tables
170170
// -------------------------
171-
$table-bg-accent: #F5f5f5;
171+
$table-bg-accent: #FFFFFF;
172172
$table-border: rgba(45, 51, 62, 0.30);
173-
$table-bg-odd: rgb(240, 240, 240);
174-
$table-bg-hover: rgb(232, 232, 232);
173+
$table-bg-odd: rgb(249, 249, 249);
174+
$table-bg-hover: rgb(242, 242, 242);
175175

176176
// Buttons
177177
// -------------------------
@@ -207,7 +207,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
207207

208208
// Forms
209209
// -------------------------
210-
$input-bg: #F5F5F5;
210+
$input-bg: #FFFFFF;
211211
$input-bg-disabled: rgba(45, 51, 62, 0.04);
212212

213213
$input-color: #101828;
@@ -216,7 +216,7 @@ $input-box-shadow: none;
216216
$input-border-focus: #5794f2;
217217
$input-box-shadow-focus: #5794f2;
218218
$input-color-placeholder: #9DA7B8;
219-
$input-label-bg: #F5f5f5;
219+
$input-label-bg: #FFFFFF;
220220
$input-color-select-arrow: #7b8087;
221221

222222
// search
@@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow;
229229

230230
// Dropdowns
231231
// -------------------------
232-
$dropdownBackground: #F5F5F5;
232+
$dropdownBackground: #FFFFFF;
233233
$dropdownBorder: rgba(45, 51, 62, 0.12);
234234
$dropdownDividerTop: rgba(45, 51, 62, 0.12);
235235
$dropdownDividerBottom: rgba(45, 51, 62, 0.12);
@@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2;
263263

264264
// Menu dropdowns
265265
// -------------------------
266-
$menu-dropdown-bg: #F5F5F5;
266+
$menu-dropdown-bg: #FFFFFF;
267267
$menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12);
268268
$menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
269269

@@ -283,16 +283,16 @@ $alert-warning-bg: #F3D086;
283283
$alert-info-bg: #F3D086;
284284

285285
// Tooltips and popovers
286-
$tooltipBackground: #F5f5f5;
286+
$tooltipBackground: #FFFFFF;
287287
$tooltipColor: #101828;
288-
$tooltipArrowColor: #F5f5f5;
288+
$tooltipArrowColor: #FFFFFF;
289289
$tooltipBackgroundError: #E0226E;
290290
$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
291291

292-
$popover-bg: #F5F5F5;
292+
$popover-bg: #FFFFFF;
293293
$popover-color: #101828;
294294
$popover-border-color: rgba(45, 51, 62, 0.12);
295-
$popover-header-bg: #F5f5f5;
295+
$popover-header-bg: #FFFFFF;
296296
$popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
297297

298298
$graph-tooltip-bg: $gray-5;
@@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg;
305305
$popover-help-bg: $tooltipBackground;
306306
$popover-help-color: $tooltipColor;
307307

308-
$popover-code-bg: #F5F5F5;
308+
$popover-code-bg: #FFFFFF;
309309
$popover-code-boxshadow: 0 0 5px $gray60;
310310

311311
// images
@@ -338,9 +338,9 @@ $diff-label-bg: rgba(45, 51, 62, 0.12);
338338
$diff-label-fg: $gray-2;
339339

340340
$diff-arrow-color: $dark-2;
341-
$diff-group-bg: #F5f5f5;
341+
$diff-group-bg: #FFFFFF;
342342

343-
$diff-json-bg: #F5f5f5;
343+
$diff-json-bg: #FFFFFF;
344344
$diff-json-fg: #101828;
345345

346346
$diff-json-added: $blue-shade;

0 commit comments

Comments
 (0)