Loki: Replace hardcoded css values (#57770)

* replace hardcoded margin/padding in getLogRowStyles.ts * replace hardcoded margin/padding in LogDetails.tsx * replace hardcoded values in LogDetailsRow.tsx * replace hardcoded values in LogLabels.tsx * replace hardcoded values in LogLabelStats.tsx * replace hardcoded values in LogLabelStatsRow.tsx * replace hardcoded values in LogRowContext.tsx * replace hardcoded values in LogRowMessage.tsx * replace hardcoded values * remove forced theme spacing values
3 years ago · 4749f45fe8
parent 4758bbcb61
commit 4749f45fe8
8 changed files with 32 additions and 31 deletions
--- a/public/app/features/logs/components/LogDetails.tsx
+++ b/public/app/features/logs/components/LogDetails.tsx
@ -126,7 +126,7 @@ class UnThemedLogDetails extends PureComponent<Props> {
                          name="question-circle"
                          size="xs"
                          className={css`
-                            margin-left: 4px;
+                            margin-left: ${theme.spacing(0.5)};
                          `}
                        />
                      </Tooltip>
--- a/public/app/features/logs/components/LogDetailsRow.tsx
+++ b/public/app/features/logs/components/LogDetailsRow.tsx
@ -57,9 +57,9 @@ const getStyles = (theme: GrafanaTheme2) => {
      position: absolute;
      top: 0px;
      justify-content: center;
-      border-radius: 20px;
-      width: 26px;
-      height: 26px;
+      border-radius: ${theme.shape.borderRadius(10)};
+      width: ${theme.spacing(3.25)};
+      height: ${theme.spacing(3.25)};
    `,
    wrapLine: css`
      label: wrapLine;
@ -67,6 +67,7 @@ const getStyles = (theme: GrafanaTheme2) => {
    `,
  };
 };
+
 class UnThemedLogDetailsRow extends PureComponent<Props, State> {
  state: State = {
    showFieldsStats: false,
--- a/public/app/features/logs/components/LogLabelStats.tsx
+++ b/public/app/features/logs/components/LogLabelStats.tsx
@ -39,7 +39,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => {
    `,
    logsStatsBody: css`
      label: logs-stats__body;
-      padding: 5px 0;
+      padding: 5px 0px;
    `,
  };
 });
--- a/public/app/features/logs/components/LogLabelStatsRow.tsx
+++ b/public/app/features/logs/components/LogLabelStatsRow.tsx
@ -28,23 +28,23 @@ const getStyles = (theme: GrafanaTheme2) => ({
  logsStatsRowCount: css`
    label: logs-stats-row__count;
    text-align: right;
-    margin-left: 0.5em;
+    margin-left: ${theme.spacing(0.75)};
  `,
  logsStatsRowPercent: css`
    label: logs-stats-row__percent;
    text-align: right;
-    margin-left: 0.5em;
-    width: 3em;
+    margin-left: ${theme.spacing(0.75)};
+    width: ${theme.spacing(4.5)};
  `,
  logsStatsRowBar: css`
    label: logs-stats-row__bar;
-    height: 4px;
+    height: ${theme.spacing(0.5)};
    overflow: hidden;
    background: ${theme.colors.text.disabled};
  `,
  logsStatsRowInnerBar: css`
    label: logs-stats-row__innerbar;
-    height: 4px;
+    height: ${theme.spacing(0.5)};
    overflow: hidden;
    background: ${theme.colors.primary.main};
  `,
--- a/public/app/features/logs/components/LogLabels.tsx
+++ b/public/app/features/logs/components/LogLabels.tsx
@ -53,10 +53,10 @@ const getStyles = (theme: GrafanaTheme2) => {
    logsLabel: css`
      label: logs-label;
      display: flex;
-      padding: 0 2px;
+      padding: ${theme.spacing(0, 0.25)};
      background-color: ${theme.colors.background.secondary};
      border-radius: ${theme.shape.borderRadius(1)};
-      margin: 1px 4px 0 0;
+      margin: ${theme.spacing(0.125, 0.5, 0, 0)};
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
@ -64,7 +64,7 @@ const getStyles = (theme: GrafanaTheme2) => {
    logsLabelValue: css`
      label: logs-label__value;
      display: inline-block;
-      max-width: 20em;
+      max-width: ${theme.spacing(25)};
      text-overflow: ellipsis;
      overflow: hidden;
    `,
--- a/public/app/features/logs/components/LogRowContext.tsx
+++ b/public/app/features/logs/components/LogRowContext.tsx
@ -49,7 +49,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
        top: 100%;
      `
    : css`
-        margin-top: 20px;
+        margin-top: ${theme.spacing(2.5)};
      `;
  return {
    width: css`
@ -61,22 +61,22 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
      z-index: ${theme.zIndex.dropdown};
      overflow: hidden;
      background: ${theme.colors.background.primary};
-      box-shadow: 0 0 10px ${theme.v1.palette.black};
+      box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
      border: 1px solid ${theme.colors.background.secondary};
      border-radius: ${theme.shape.borderRadius(2)};
      font-family: ${theme.typography.fontFamily};
    `,
    header: css`
      height: ${headerHeight}px;
-      padding: 0 10px;
+      padding: ${theme.spacing(0, 1.25)};
      display: flex;
      align-items: center;
      background: ${theme.colors.background.canvas};
    `,
    top: css`
      border-radius: 0 0 ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)};
-      box-shadow: 0 0 10px ${theme.v1.palette.black};
-      clip-path: inset(0px -10px -10px -10px);
+      box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
+      clip-path: inset(0px -${theme.spacing(1.25)} -${theme.spacing(1.25)} -${theme.spacing(1.25)});
    `,
    title: css`
      position: absolute;
@ -87,8 +87,8 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
      background: ${theme.colors.background.secondary};
      border: 1px solid ${theme.colors.background.secondary};
      border-radius: ${theme.shape.borderRadius(2)} ${theme.shape.borderRadius(2)} 0 0;
-      box-shadow: 0 0 10px ${theme.v1.palette.black};
-      clip-path: inset(-10px -10px 0px -10px);
+      box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
+      clip-path: inset(-${theme.spacing(1.25)} -${theme.spacing(1.25)} 0px -${theme.spacing(1.25)});
      font-family: ${theme.typography.fontFamily};

      display: flex;
@ -107,11 +107,11 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
      display: flex;
    `,
    headerButton: css`
-      margin-left: 8px;
+      margin-left: ${theme.spacing(1)};
    `,
    logs: css`
      height: ${logsHeight}px;
-      padding: 10px;
+      padding: ${theme.spacing(1.25)};
      font-family: ${theme.typography.fontFamilyMonospace};

      .scrollbar-view {
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@ -64,18 +64,18 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
      position: absolute;
      top: 0;
      bottom: auto;
-      height: 36px;
+      height: ${theme.spacing(4.5)};
      background: ${theme.colors.background.primary};
      box-shadow: ${theme.shadows.z3};
      padding: ${theme.spacing(0, 0, 0, 0.5)};
      z-index: 100;
      visibility: hidden;
-      width: ${showContextButton ? '80px' : '40px'};
+      width: ${showContextButton ? theme.spacing(10) : theme.spacing(5)};
    `,
    logRowMenuCell: css`
      position: absolute;
      right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`};
-      margin-top: -1px;
+      margin-top: -${theme.spacing(0.125)};
    `,
  };
 };
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@ -83,7 +83,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
    `,
    logsRowLevel: css`
      label: logs-row__level;
-      max-width: 10px;
+      max-width: ${theme.spacing(1.25)};
      cursor: default;
      &::after {
        content: '';
@ -92,7 +92,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
        top: 1px;
        bottom: 1px;
        width: 3px;
-        left: 4px;
+        left: ${theme.spacing(0.5)};
        background-color: ${logColor};
      }
    `,
@ -130,8 +130,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
      label: logs-row-details-table;
      border: 1px solid ${theme.colors.border.medium};
      padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
-      border-radius: 3px;
-      margin: 20px 8px 20px 16px;
+      border-radius: ${theme.shape.borderRadius(1.5)};
+      margin: ${theme.spacing(2.5)} ${theme.spacing(1)} ${theme.spacing(2.5)} ${theme.spacing(2)};
      cursor: default;
    `,
    logDetailsTable: css`
@ -146,8 +146,8 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
      label: logs-row-details__icon;
      position: relative;
      color: ${theme.v1.palette.gray3};
-      padding-top: 6px;
-      padding-left: 6px;
+      padding-top: ${theme.spacing(0.75)};
+      padding-left: ${theme.spacing(0.75)};
    `,
    logDetailsLabel: css`
      label: logs-row-details__label;