dashboard style changes (#179)

Author: GurinderRawala

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

@@ -220,7 +220,7 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   background = {
-    primary: '#FAFAFA',
+    primary: '#FFFFFF',
     canvas: '#FFFFFF',
     secondary: '#FAFAFA',
   };

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

@@ -19,7 +19,7 @@ export interface ThemeShapeInput {
 }
 
 export function createShape(options: ThemeShapeInput): ThemeShape {
-  const baseBorderRadius = options.borderRadius ?? 2;
+  const baseBorderRadius = options.borderRadius ?? 6;
 
   const radius = {
     default: '2px',

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

@@ -277,42 +277,43 @@ const useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOptio
 
 const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall, isFullscreen) => {
   return {
-    container: css`
-      background: ${theme.colors.background.primary};
-      box-shadow: ${theme.shadows.z3};
-      position: absolute;
-      z-index: ${theme.zIndex.dropdown};
-      width: ${isFullscreen ? '546px' : '262px'};
-      top: 116%;
-      border-radius: 2px;
-      border: 1px solid ${theme.colors.border.weak};
-      ${isReversed ? 'left' : 'right'}: 0;
-    `,
-    body: css`
-      display: flex;
-      flex-direction: row-reverse;
-      height: ${isContainerTall ? '281px' : '217px'};
-    `,
-    leftSide: css`
-      display: flex;
-      flex-direction: column;
-      border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`};
-      width: ${!hideQuickRanges ? '50%' : '100%'};
-      overflow: auto;
-      order: ${isReversed ? 1 : 0};
-    `,
-    rightSide: css`
-      width: ${isFullscreen ? '50%' : '100%'}; !important;
-      border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
-      display: flex;
-      flex-direction: column;
-    `,
-    timeRangeFilter: css`
-      padding: ${theme.spacing(1)};
-    `,
-    spacing: css`
-      margin-top: 16px;
-    `,
+    container: css({
+      background: theme.colors.background.primary,
+      boxShadow: theme.shadows.z3,
+      width: `${isFullscreen ? '546px' : '262px'}`,
+      borderRadius: '6px',
+      border: `1px solid ${theme.colors.border.weak}`,
+      [`${isReversed ? 'left' : 'right'}`]: 0,
+    }),
+    body: css({
+      display: 'flex',
+      flexDirection: 'row-reverse',
+      height: `${isContainerTall ? '281px' : '217px'}`,
+      maxHeight: '100vh',
+      '& button': {
+        borderRadius: '6px',
+      },
+    }),
+    leftSide: css({
+      display: 'flex',
+      flexDirection: 'column',
+      borderRight: `${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`}`,
+      width: `${!hideQuickRanges ? '60%' : '100%'}`,
+      overflow: 'hidden',
+      order: isReversed ? 1 : 0,
+    }),
+    rightSide: css({
+      width: `${isFullscreen ? '40%' : '100%'}; !important`,
+      borderRight: isReversed ? `1px solid ${theme.colors.border.weak}` : 'none',
+      display: 'flex',
+      flexDirection: 'column',
+    }),
+    timeRangeFilter: css({
+      padding: theme.spacing(1),
+    }),
+    spacing: css({
+      marginTop: '16px',
+    }),
   };
 });
 

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

@@ -166,43 +166,44 @@ export const TimePickerFooter = (props: Props) => {
 
 const getStyle = stylesFactory((theme: GrafanaTheme2) => {
   return {
-    container: css`
-      border-top: 1px solid ${theme.colors.border.weak};
-      padding: 11px;
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      height: 60px;
-    `,
-    editContainer: css`
-      border-top: 1px solid ${theme.colors.border.weak};
-      padding: 11px;
-      justify-content: space-between;
-      align-items: center;
-      padding: 7px;
-    `,
-    spacer: css`
-      margin-left: 7px;
-    `,
-    timeSettingContainer: css`
-      padding-top: ${theme.spacing(1)};
-    `,
-    fiscalYearField: css`
-      margin-bottom: 0px;
-    `,
-    timeZoneContainer: css`
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      flex-grow: 1;
-    `,
-    timeZone: css`
-      display: flex;
-      flex-direction: row;
-      align-items: baseline;
-      flex-grow: 1;
-    `,
+    container: css({
+      borderTop: `1px solid ${theme.colors.border.weak}`,
+      padding: '11px',
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      '& button': {
+        borderRadius: '6px',
+      },
+    }),
+    editContainer: css({
+      borderTop: `1px solid ${theme.colors.border.weak}`,
+      padding: '11px',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    }),
+    spacer: css({
+      marginLeft: '7px',
+    }),
+    timeSettingContainer: css({
+      paddingTop: theme.spacing(1),
+    }),
+    fiscalYearField: css({
+      marginBottom: 0,
+    }),
+    timeZoneContainer: css({
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      flexGrow: 1,
+    }),
+    timeZone: css({
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'baseline',
+      flexGrow: 1,
+    }),
   };
 });

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

@@ -153,6 +153,8 @@ export class Component extends PureComponent<Props> {
       this.gridWidth = gridWidth;
     }
 
+    console.log('this.props.dashboard.panels', config.theme2.shape.radius.default);
+
     for (const panel of this.props.dashboard.panels) {
       const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
 

public/microfrontends/fn_dashboard/index.html

@@ -1,6 +1,16 @@
-<!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 = {
+<!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 = {
         themePaths: {
-          light: '../../../public/build/grafana.light.919a2bf9d8d520de3b33.css',
-          dark: '../../../public/build/grafana.dark.341ec2d9d1b948e9351a.css',
+          light: '../../../public/build/grafana.light.f8726a58109a7bb444b7.css',
+          dark: '../../../public/build/grafana.dark.64551cb66c1119442933.css',
         },
       };</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>

public/sass/_variables.generated.scss

@@ -132,9 +132,9 @@ $headings-line-height: 1.5 !default;
 
 $border-width: 1px !default;
 
-$border-radius: 2px !default;
-$border-radius-lg: 6px !default;
-$border-radius-sm: 2px !default;
+$border-radius: 6px !default;
+$border-radius-lg: 18px !default;
+$border-radius-sm: 6px !default;
 
 // Page
 

public/sass/_variables.light.generated.scss

@@ -58,7 +58,7 @@ $gray-7: #fbfbfb;
 $white: #ffffff;
 
 $layer0: #FFFFFF;
-$layer1: #FAFAFA;
+$layer1: #FFFFFF;
 $layer2: #FAFAFA;
 
 $divider: rgba(45, 51, 62, 0.12);
@@ -128,7 +128,7 @@ $hr-border-color: $gray-4 !default;
 
 // Panel
 // -------------------------
-$panel-bg: #FAFAFA;
+$panel-bg: #FFFFFF;
 $panel-border: 1px solid rgba(45, 51, 62, 0.12);
 $panel-header-hover-bg: rgba(45, 51, 62, 0.12);
 $panel-box-shadow: none;
@@ -145,7 +145,7 @@ $divider-border-color: $gray-2;
 $tight-form-func-bg: #FAFAFA;
 $tight-form-func-highlight-bg: #f5f5f5;
 
-$modal-backdrop-bg: #FAFAFA;
+$modal-backdrop-bg: #FFFFFF;
 $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
@@ -170,8 +170,8 @@ $scrollbarBorder: $gray-7;
 // -------------------------
 $table-bg-accent: #FAFAFA;
 $table-border: rgba(45, 51, 62, 0.30);
-$table-bg-odd: rgb(245, 245, 245);
-$table-bg-hover: rgb(237, 237, 237);
+$table-bg-odd: rgb(249, 249, 249);
+$table-bg-hover: rgb(242, 242, 242);
 
 // Buttons
 // -------------------------
@@ -207,7 +207,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
 
 // Forms
 // -------------------------
-$input-bg: #FAFAFA;
+$input-bg: #FFFFFF;
 $input-bg-disabled: rgba(45, 51, 62, 0.04);
 
 $input-color: #101828;
@@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: #FAFAFA;
+$dropdownBackground: #FFFFFF;
 $dropdownBorder: rgba(45, 51, 62, 0.12);
 $dropdownDividerTop: rgba(45, 51, 62, 0.12);
 $dropdownDividerBottom: rgba(45, 51, 62, 0.12);
@@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2;
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: #FAFAFA;
+$menu-dropdown-bg: #FFFFFF;
 $menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12);
 $menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
@@ -289,7 +289,7 @@ $tooltipArrowColor: #FAFAFA;
 $tooltipBackgroundError: #E0226E;
 $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
 
-$popover-bg: #FAFAFA;
+$popover-bg: #FFFFFF;
 $popover-color: #101828;
 $popover-border-color: rgba(45, 51, 62, 0.12);
 $popover-header-bg: #FAFAFA;
@@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg;
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $tooltipColor;
 
-$popover-code-bg: #FAFAFA;
+$popover-code-bg: #FFFFFF;
 $popover-code-boxshadow: 0 0 5px $gray60;
 
 // images

public/sass/pages/_dashboard.scss

@@ -0,0 +1,90 @@
+.panel {
+  height: 100%;
+}
+
+.panel-height-helper {
+  display: block;
+  height: 100%;
+}
+
+.panel-container {
+  background-color: $panel-bg;
+  border: $panel-border;
+  position: relative;
+  border-radius: 6px;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  box-shadow: $panel-box-shadow;
+
+  &--transparent {
+    background-color: transparent;
+    border: 1px solid transparent;
+    box-shadow: none;
+  }
+
+  &:hover {
+    .panel-menu-toggle {
+      visibility: visible;
+      transition: opacity 0.1s ease-in 0.2s;
+      opacity: 1;
+    }
+  }
+
+  &--is-editing {
+    height: auto;
+  }
+
+  &--absolute {
+    position: absolute;
+  }
+}
+
+.panel-content {
+  padding: $panel-padding;
+  width: 100%;
+  flex-grow: 1;
+  contain: strict;
+  height: calc(100% - #{$panel-header-height});
+
+  &--no-padding {
+    padding: 0;
+  }
+}
+
+div.flot-text {
+  color: $text-color !important;
+}
+
+.dashboard-solo {
+  .footer,
+  .sidemenu {
+    display: none;
+  }
+}
+
+.template-variable {
+  color: $variable;
+}
+
+.panel-solo {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+  left: 0;
+  top: 0;
+  width: '100%';
+  height: '100%';
+
+  .panel-container {
+    border: none;
+  }
+
+  .panel-menu-toggle,
+  .panel-menu {
+    display: none;
+  }
+}