Skip to content

Commit 9fb28df

Browse files
GurinderRawalaGurinderRawala
authored
dashboard style changes (#179)
1 parent 7f0c432 commit 9fb28df

File tree

12 files changed

+84
-78
lines changed

12 files changed

+84
-78
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
220220
};
221221

222222
background = {
223-
primary: '#FAFAFA',
223+
primary: '#FFFFFF',
224224
canvas: '#FFFFFF',
225225
secondary: '#FAFAFA',
226226
};

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface ThemeShapeInput {
1616
}
1717

1818
export function createShape(options: ThemeShapeInput): ThemeShape {
19-
const baseBorderRadius = options.borderRadius ?? 2;
19+
const baseBorderRadius = options.borderRadius ?? 6;
2020

2121
const radius = {
2222
default: '2px',

‎packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRang
274274
background: theme.colors.background.primary,
275275
boxShadow: theme.shadows.z3,
276276
width: `${isFullscreen ? '546px' : '262px'}`,
277-
borderRadius: '2px',
277+
borderRadius: '6px',
278278
border: `1px solid ${theme.colors.border.weak}`,
279279
[`${isReversed ? 'left' : 'right'}`]: 0,
280280
}),
@@ -283,6 +283,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRang
283283
flexDirection: 'row-reverse',
284284
height: `${isContainerTall ? '281px' : '217px'}`,
285285
maxHeight: '100vh',
286+
'& button': {
287+
borderRadius: '6px',
288+
},
286289
}),
287290
leftSide: css({
288291
display: 'flex',

‎packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,9 @@ const getStyle = stylesFactory((theme: GrafanaTheme2) => {
153153
flexDirection: 'row',
154154
justifyContent: 'space-between',
155155
alignItems: 'center',
156+
'& button': {
157+
borderRadius: '6px',
158+
},
156159
}),
157160
editContainer: css({
158161
borderTop: `1px solid ${theme.colors.border.weak}`,

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React, { forwardRef, ButtonHTMLAttributes, ReactNode } from 'react';
44
import { GrafanaTheme2, IconName, isIconName } from '@grafana/data';
55
import { selectors } from '@grafana/e2e-selectors';
66

7-
import { styleMixins, useStyles2 } from '../../themes';
7+
import { styleMixins, useStyles2, useTheme2 } from '../../themes';
88
import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
99
import { IconSize } from '../../types/icon';
1010
import { getPropertiesForVariant } from '../Button';
@@ -65,6 +65,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
6565
ref
6666
) => {
6767
const styles = useStyles2(getStyles);
68+
const theme2 = useTheme2();
6869

6970
const buttonStyles = cx(
7071
{
@@ -89,7 +90,10 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
8990
aria-label={getButtonAriaLabel(ariaLabel, tooltip)}
9091
aria-expanded={isOpen}
9192
{...rest}
92-
style={{ display: isHidden ? 'none' : '' }}
93+
style={{
94+
display: isHidden ? 'none' : '',
95+
border: `1px solid ${theme2.colors.border.weak}`,
96+
}}
9397
>
9498
{renderIcon(icon, iconSize)}
9599
{imgSrc && <img className={styles.img} src={imgSrc} alt={imgAlt ?? ''} />}

‎public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx

+1-21
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
import FilterListIcon from '@mui/icons-material/FilterList';
2-
import { Box, styled } from '@mui/material';
3-
import React, { FC, useEffect, useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
42

53
import { selectors } from '@grafana/e2e-selectors';
64
import { useSelector } from 'app/types';
@@ -30,7 +28,6 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
3028

3129
return (
3230
<>
33-
<FilterWithIcon />
3431
{visibleVariables.map((variable) => {
3532
return (
3633
<div
@@ -45,20 +42,3 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
4542
</>
4643
);
4744
};
48-
49-
const FilterWithIcon: FC = () => (
50-
<FilterWithIconStyled>
51-
<FilterListIcon sx={{ color: '#3A785E' }} />
52-
FILTERS
53-
</FilterWithIconStyled>
54-
);
55-
56-
const FilterWithIconStyled = styled(Box)({
57-
display: 'flex',
58-
gap: 1,
59-
alignItems: 'center',
60-
color: '#3A785E',
61-
fontWeight: 600,
62-
lineHeight: '160%',
63-
fontSize: 12,
64-
});

‎public/app/features/dashboard/dashgrid/DashboardGrid.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,8 @@ export class Component extends PureComponent<Props> {
153153
this.gridWidth = gridWidth;
154154
}
155155

156+
console.log('this.props.dashboard.panels', config.theme2.shape.radius.default);
157+
156158
for (const panel of this.props.dashboard.panels) {
157159
const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
158160

@@ -241,7 +243,8 @@ export class Component extends PureComponent<Props> {
241243

242244
// Disable draggable if mobile device, solving an issue with unintentionally
243245
// moving panels. https://github.com/grafana/grafana/issues/18497
244-
const draggable = width <= config.theme2.breakpoints.values.md ? false : isEditable;
246+
const isLg = width > config.theme2.breakpoints.values.md;
247+
const draggable = isLg ? false : isEditable;
245248

246249
return (
247250
/**
@@ -252,8 +255,8 @@ export class Component extends PureComponent<Props> {
252255
<div style={{ width: width, height: '100%' }} ref={this.onGetWrapperDivRef}>
253256
<ReactGridLayout
254257
width={width}
255-
isDraggable={draggable}
256-
isResizable={isFnDashboard ? true : isEditable}
258+
isDraggable={(isLg && isFnDashboard) || draggable}
259+
isResizable={isLg && isFnDashboard ? true : isEditable}
257260
containerPadding={[0, 0]}
258261
useCSSTransforms={true}
259262
margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}

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

+25-31
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { css } from '@emotion/css';
1+
// import { css } from '@emotion/css';
22
import React, { CSSProperties, FunctionComponent, PropsWithChildren, ReactElement, useMemo } from 'react';
33
// eslint-disable-next-line no-restricted-imports
44
import { useSelector } from 'react-redux';
@@ -16,27 +16,27 @@ interface Props {
1616
readOnly?: boolean;
1717
}
1818

19-
const renderWrapperStyle = css`
20-
& button,
21-
& span,
22-
& label,
23-
& input {
24-
height: 24px;
25-
font-size: 12px;
26-
line-height: 24px;
27-
}
19+
// not using this style for now.
20+
// const renderWrapperStyle = css`
21+
// & button,
22+
// & span,
23+
// & label,
24+
// & input {
25+
// height: 35px;
26+
// font-size: 14px;
27+
// }
2828

29-
/* Center align filter picker buttons */
30-
& button {
31-
margin-top: 2px;
32-
}
29+
// /* Center align filter picker buttons */
30+
// & button {
31+
// margin-top: 2px;
32+
// }
3333

34-
/* Adhoc filter: Disable green border and make input height similar to others */
35-
& div[class*='input-wrapper'] {
36-
min-height: 0 !important;
37-
box-shadow: none !important;
38-
}
39-
`;
34+
// /* Adhoc filter: Disable green border and make input height similar to others */
35+
// & div[class*='input-wrapper'] {
36+
// min-height: 0 !important;
37+
// box-shadow: none !important;
38+
// }
39+
// `;
4040

4141
export const PickerRenderer: FunctionComponent<Props> = (props) => {
4242
const PickerToRender = useMemo(() => variableAdapters.get(props.variable.type).picker, [props.variable]);
@@ -49,7 +49,7 @@ export const PickerRenderer: FunctionComponent<Props> = (props) => {
4949
<div className="gf-form">
5050
<PickerLabel variable={props.variable} />
5151
{props.variable.hide !== VariableHide.hideVariable && PickerToRender && (
52-
<div className={renderWrapperStyle}>
52+
<div>
5353
<PickerToRender variable={props.variable} readOnly={props.readOnly ?? false} />
5454
</div>
5555
)}
@@ -58,10 +58,9 @@ export const PickerRenderer: FunctionComponent<Props> = (props) => {
5858
};
5959

6060
const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
61-
borderRadius: '2px',
6261
border: 'none',
63-
fontWeight: 400,
64-
fontSize: '12px',
62+
fontWeight: 500,
63+
fontSize: '14px',
6564
padding: '3px 6px',
6665
letterSpacing: '0.15px',
6766
height: '24px',
@@ -75,14 +74,9 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
7574
const fnLabelStyle = useMemo(
7675
() => ({
7776
...COMMON_PICKER_LABEL_STYLE,
78-
...(FNDashboard
79-
? {
80-
color: mode === 'light' ? '#2D333E' : '#DBD9D7',
81-
backgroundColor: mode === 'light' ? '#E0E0E0' : '#56524D',
82-
}
83-
: {}),
77+
color: mode === 'light' ? '#2D333E' : '#DBD9D7',
8478
}),
85-
[mode, FNDashboard]
79+
[mode]
8680
);
8781

8882
if (variable.hide !== VariableHide.dontHide) {

‎public/microfrontends/fn_dashboard/index.html

+23-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,25 @@
1-
<!doctype html><html lang="en"><head><title>CodeRabbit Micro-frontend</title><base href="/"/></head><body class="theme-light app-grafana"><div id="grafanaRoot"></div><script nonce="">window.fnData = {
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>CodeRabbit Micro-frontend</title>
5+
<base href="/" />
6+
</head>
7+
8+
<body class="theme-light app-grafana">
9+
<div id="grafanaRoot"></div>
10+
<script nonce="">
11+
window.fnData = {
212
themePaths: {
3-
light: '../../../public/build/grafana.light.919a2bf9d8d520de3b33.css',
4-
dark: '../../../public/build/grafana.dark.341ec2d9d1b948e9351a.css',
13+
light: '../../../public/build/grafana.light.f8726a58109a7bb444b7.css',
14+
dark: '../../../public/build/grafana.dark.64551cb66c1119442933.css',
515
},
6-
};</script><script nonce="" src="../../../public/build/runtime.e887ee410b04048b93bb.js"></script><script nonce="" src="../../../public/build/9767.5d11687466af2e323217.js"></script><script nonce="" src="../../../public/build/6510.3c0ff62c6be1dabb1076.js"></script><script nonce="" src="../../../public/build/736.a7c1a735dcc89552444b.js"></script><script nonce="" src="../../../public/build/3880.2244b9f025ace4c25949.js"></script><script nonce="" src="../../../public/build/4000.3d7b8c06970ead030ece.js"></script><script nonce="" src="../../../public/build/4161.5d0fee404a7937384676.js"></script><script nonce="" src="../../../public/build/6406.78c224d72f4c255d0cd7.js"></script><script nonce="" src="../../../public/build/2253.8557a4046de15bdfe5f5.js"></script><script nonce="" src="../../../public/build/8200.4f6046fffc2bc4c0e99c.js"></script><script nonce="" src="../../../public/build/9334.3f47b65f852b47933f4e.js"></script><script nonce="" src="../../../public/build/5670.1b6e072b061193be2b12.js"></script><script nonce="" src="../../../public/build/2954.fb78b2a299991850d30f.js"></script><script nonce="" src="../../../public/build/8629.d45179333f04e81d2640.js"></script><script nonce="" src="../../../public/build/5446.061625ba71ddd711a34f.js"></script><script nonce="" src="../../../public/build/fn_dashboard.51fd59d60567e892f3c0.js"></script></body></html>
16+
};
17+
</script>
18+
19+
20+
<script nonce="" src="../../../public/build/runtime~fn_dashboard.512db17f9b8f66891b2c.js" type="text/javascript"></script>
21+
22+
<script nonce="" src="../../../public/build/fn_dashboard.7fe7b3245b6e00cb353f.js" type="text/javascript"></script>
23+
24+
</body>
25+
</html>

‎public/sass/_variables.generated.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -132,9 +132,9 @@ $headings-line-height: 1.5 !default;
132132

133133
$border-width: 1px !default;
134134

135-
$border-radius: 2px !default;
136-
$border-radius-lg: 6px !default;
137-
$border-radius-sm: 2px !default;
135+
$border-radius: 6px !default;
136+
$border-radius-lg: 18px !default;
137+
$border-radius-sm: 6px !default;
138138

139139
// Page
140140

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

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

6060
$layer0: #FFFFFF;
61-
$layer1: #FAFAFA;
61+
$layer1: #FFFFFF;
6262
$layer2: #FAFAFA;
6363

6464
$divider: rgba(45, 51, 62, 0.12);
@@ -128,7 +128,7 @@ $hr-border-color: $gray-4 !default;
128128

129129
// Panel
130130
// -------------------------
131-
$panel-bg: #FAFAFA;
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;
@@ -145,7 +145,7 @@ $divider-border-color: $gray-2;
145145
$tight-form-func-bg: #FAFAFA;
146146
$tight-form-func-highlight-bg: #f5f5f5;
147147

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

@@ -170,8 +170,8 @@ $scrollbarBorder: $gray-7;
170170
// -------------------------
171171
$table-bg-accent: #FAFAFA;
172172
$table-border: rgba(45, 51, 62, 0.30);
173-
$table-bg-odd: rgb(245, 245, 245);
174-
$table-bg-hover: rgb(237, 237, 237);
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: #FAFAFA;
210+
$input-bg: #FFFFFF;
211211
$input-bg-disabled: rgba(45, 51, 62, 0.04);
212212

213213
$input-color: #101828;
@@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow;
229229

230230
// Dropdowns
231231
// -------------------------
232-
$dropdownBackground: #FAFAFA;
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: #FAFAFA;
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

@@ -289,7 +289,7 @@ $tooltipArrowColor: #FAFAFA;
289289
$tooltipBackgroundError: #E0226E;
290290
$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
291291

292-
$popover-bg: #FAFAFA;
292+
$popover-bg: #FFFFFF;
293293
$popover-color: #101828;
294294
$popover-border-color: rgba(45, 51, 62, 0.12);
295295
$popover-header-bg: #FAFAFA;
@@ -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: #FAFAFA;
308+
$popover-code-bg: #FFFFFF;
309309
$popover-code-boxshadow: 0 0 5px $gray60;
310310

311311
// images

‎public/sass/pages/_dashboard.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
background-color: $panel-bg;
1212
border: $panel-border;
1313
position: relative;
14-
border-radius: 2px;
14+
border-radius: 6px;
1515
height: 100%;
1616
width: 100%;
1717
display: flex;

0 commit comments

Comments
 (0)