coderabbitai · GurinderRawala · Aug 8, 2024 · Aug 8, 2024
diff --git a/packages/grafana-data/src/themes/createColors.ts b/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',
   };

diff --git a/packages/grafana-data/src/themes/createShape.ts b/packages/grafana-data/src/themes/createShape.ts
@@ -16,7 +16,7 @@ export interface ThemeShapeInput {
 }
 
 export function createShape(options: ThemeShapeInput): ThemeShape {
-  const baseBorderRadius = options.borderRadius ?? 2;
+  const baseBorderRadius = options.borderRadius ?? 6;
 
   const radius = {
     default: '2px',

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx
@@ -274,7 +274,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRang
       background: theme.colors.background.primary,
       boxShadow: theme.shadows.z3,
       width: `${isFullscreen ? '546px' : '262px'}`,
-      borderRadius: '2px',
+      borderRadius: '6px',
       border: `1px solid ${theme.colors.border.weak}`,
       [`${isReversed ? 'left' : 'right'}`]: 0,
     }),
@@ -283,6 +283,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRang
       flexDirection: 'row-reverse',
       height: `${isContainerTall ? '281px' : '217px'}`,
       maxHeight: '100vh',
+      '& button': {
+        borderRadius: '6px',
+      },
     }),
     leftSide: css({
       display: 'flex',

diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx
@@ -153,6 +153,9 @@ const getStyle = stylesFactory((theme: GrafanaTheme2) => {
       flexDirection: 'row',
       justifyContent: 'space-between',
       alignItems: 'center',
+      '& button': {
+        borderRadius: '6px',
+      },
     }),
     editContainer: css({
       borderTop: `1px solid ${theme.colors.border.weak}`,

diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx
@@ -4,7 +4,7 @@ import React, { forwardRef, ButtonHTMLAttributes, ReactNode } from 'react';
 import { GrafanaTheme2, IconName, isIconName } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { styleMixins, useStyles2 } from '../../themes';
+import { styleMixins, useStyles2, useTheme2 } from '../../themes';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
 import { IconSize } from '../../types/icon';
 import { getPropertiesForVariant } from '../Button';
@@ -65,6 +65,7 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
     ref
   ) => {
     const styles = useStyles2(getStyles);
+    const theme2 = useTheme2();
 
     const buttonStyles = cx(
       {
@@ -89,7 +90,10 @@ export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
         aria-label={getButtonAriaLabel(ariaLabel, tooltip)}
         aria-expanded={isOpen}
         {...rest}
-        style={{ display: isHidden ? 'none' : '' }}
+        style={{
+          display: isHidden ? 'none' : '',
+          border: `1px solid ${theme2.colors.border.weak}`,
+        }}
       >
         {renderIcon(icon, iconSize)}
         {imgSrc && <img className={styles.img} src={imgSrc} alt={imgAlt ?? ''} />}

diff --git a/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx b/public/app/features/dashboard/components/SubMenu/SubMenuItems.tsx
@@ -1,6 +1,4 @@
-import FilterListIcon from '@mui/icons-material/FilterList';
-import { Box, styled } from '@mui/material';
-import React, { FC, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { useSelector } from 'app/types';
@@ -30,7 +28,6 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
 
   return (
     <>
-      <FilterWithIcon />
       {visibleVariables.map((variable) => {
         return (
           <div
@@ -45,20 +42,3 @@ export const SubMenuItems = ({ variables, readOnly }: Props) => {
     </>
   );
 };
-
-const FilterWithIcon: FC = () => (
-  <FilterWithIconStyled>
-    <FilterListIcon sx={{ color: '#3A785E' }} />
-    FILTERS
-  </FilterWithIconStyled>
-);
-
-const FilterWithIconStyled = styled(Box)({
-  display: 'flex',
-  gap: 1,
-  alignItems: 'center',
-  color: '#3A785E',
-  fontWeight: 600,
-  lineHeight: '160%',
-  fontSize: 12,
-});
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/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 });
 
@@ -241,7 +243,8 @@ export class Component extends PureComponent<Props> {
 
             // Disable draggable if mobile device, solving an issue with unintentionally
             // moving panels. https://github.com/grafana/grafana/issues/18497
-            const draggable = width <= config.theme2.breakpoints.values.md ? false : isEditable;
+            const isLg = width > config.theme2.breakpoints.values.md;
+            const draggable = isLg ? false : isEditable;
 
             return (
               /**
@@ -252,8 +255,8 @@ export class Component extends PureComponent<Props> {
               <div style={{ width: width, height: '100%' }} ref={this.onGetWrapperDivRef}>
                 <ReactGridLayout
                   width={width}
-                  isDraggable={draggable}
-                  isResizable={isFnDashboard ? true : isEditable}
+                  isDraggable={(isLg && isFnDashboard) || draggable}
+                  isResizable={isLg && isFnDashboard ? true : isEditable}
                   containerPadding={[0, 0]}
                   useCSSTransforms={true}
                   margin={[GRID_CELL_VMARGIN, GRID_CELL_VMARGIN]}

diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+// import { css } from '@emotion/css';
 import React, { CSSProperties, FunctionComponent, PropsWithChildren, ReactElement, useMemo } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
@@ -16,27 +16,27 @@ interface Props {
   readOnly?: boolean;
 }
 
-const renderWrapperStyle = css`
-  & button,
-  & span,
-  & label,
-  & input {
-    height: 24px;
-    font-size: 12px;
-    line-height: 24px;
-  }
+// not using this style  for now.
+// const renderWrapperStyle = css`
+//   & button,
+//   & span,
+//   & label,
+//   & input {
+//     height: 35px;
+//     font-size: 14px;
+//   }
 
-  /* Center align filter picker buttons */
-  & button {
-    margin-top: 2px;
-  }
+//   /* Center align filter picker buttons */
+//   & button {
+//     margin-top: 2px;
+//   }
 
-  /* Adhoc filter: Disable green border and make input height similar to others */
-  & div[class*='input-wrapper'] {
-    min-height: 0 !important;
-    box-shadow: none !important;
-  }
-`;
+//   /* Adhoc filter: Disable green border and make input height similar to others */
+//   & div[class*='input-wrapper'] {
+//     min-height: 0 !important;
+//     box-shadow: none !important;
+//   }
+// `;
 
 export const PickerRenderer: FunctionComponent<Props> = (props) => {
   const PickerToRender = useMemo(() => variableAdapters.get(props.variable.type).picker, [props.variable]);
@@ -49,7 +49,7 @@ export const PickerRenderer: FunctionComponent<Props> = (props) => {
     <div className="gf-form">
       <PickerLabel variable={props.variable} />
       {props.variable.hide !== VariableHide.hideVariable && PickerToRender && (
-        <div className={renderWrapperStyle}>
+        <div>
           <PickerToRender variable={props.variable} readOnly={props.readOnly ?? false} />
         </div>
       )}
@@ -58,10 +58,9 @@ export const PickerRenderer: FunctionComponent<Props> = (props) => {
 };
 
 const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
-  borderRadius: '2px',
   border: 'none',
-  fontWeight: 400,
-  fontSize: '12px',
+  fontWeight: 500,
+  fontSize: '14px',
   padding: '3px 6px',
   letterSpacing: '0.15px',
   height: '24px',
@@ -75,14 +74,9 @@ function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | nul
   const fnLabelStyle = useMemo(
     () => ({
       ...COMMON_PICKER_LABEL_STYLE,
-      ...(FNDashboard
-        ? {
-            color: mode === 'light' ? '#2D333E' : '#DBD9D7',
-            backgroundColor: mode === 'light' ? '#E0E0E0' : '#56524D',
-          }
-        : {}),
+      color: mode === 'light' ? '#2D333E' : '#DBD9D7',
     }),
-    [mode, FNDashboard]
+    [mode]
   );
 
   if (variable.hide !== VariableHide.dontHide) {

diff --git a/public/microfrontends/fn_dashboard/index.html b/public/microfrontends/fn_dashboard/index.html
@@ -1,6 +1,25 @@
-<!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>
+      };
+    </script>
+
+
+    <script nonce="" src="../../../public/build/runtime~fn_dashboard.512db17f9b8f66891b2c.js" type="text/javascript"></script>
+
+    <script nonce="" src="../../../public/build/fn_dashboard.7fe7b3245b6e00cb353f.js" type="text/javascript"></script>
+
+  </body>
+</html>
diff --git a/public/sass/_variables.generated.scss b/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
 

diff --git a/public/sass/_variables.light.generated.scss b/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

diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
@@ -11,7 +11,7 @@
   background-color: $panel-bg;
   border: $panel-border;
   position: relative;
-  border-radius: 2px;
+  border-radius: 6px;
   height: 100%;
   width: 100%;
   display: flex;