Add sass variable overrides to theme

Necessary to style components that are not yet converted to Emotion (elastic/eui#5685)
guardian · Mar 29, 2023 · 31c7962 · 31c7962
1 parent 5325bc3
commit 31c7962
Show file tree

Hide file tree

Showing 7 changed files with 407 additions and 10 deletions.
diff --git a/apps/rule-manager/client/src/css/theme.scss b/apps/rule-manager/client/src/css/theme.scss
@@ -0,0 +1,6 @@
+/* NB: Anything overridden in here must also be reflected in ts/constants/euiTheme.ts */
+$euiBorderRadius: 0;
+$euiBorderRadiusSmall: 0;
+$euiFontFamily: 'Guardian Agate Sans', BlinkMacSystemFont, Helvetica, Arial, sans-serif;
+
+@import "../../node_modules/@elastic/eui/src/themes/amsterdam/theme_light.scss";
diff --git a/apps/rule-manager/client/src/ts/components/RulesTable.tsx b/apps/rule-manager/client/src/ts/components/RulesTable.tsx
@@ -46,10 +46,7 @@ const columns: Array<EuiBasicTableColumn<Rule>> = [
     },
     {
         field: 'id',
-        name: 'ID',
-        render: (id: Rule['id']) => {
-            return <>{id}</>
-        }
+        name: 'ID'
     },
     {
         field: 'category',
@@ -84,11 +81,11 @@ const RulesTable = () => {
         <EuiFlexGroup>
             <EuiFlexItem grow={false} css={css`padding-bottom: 20px`}>
                 <EuiTitle>
-                    <h1>Current rules ({rules ? rules.length : 'loading...'})</h1>
+                    <h1>Current rules</h1>
                 </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-                <EuiButton fill={true} color={"primary"} onClick={() => refreshRules()} isLoading={isRefreshing}>
+                <EuiButton size="s" fill={true} color={"primary"} onClick={() => refreshRules()} isLoading={isRefreshing}>
                     Refresh{isRefreshing ? "ing" : ""} rules
                 </EuiButton>
             </EuiFlexItem>

diff --git a/apps/rule-manager/client/src/ts/components/pages/Rules.tsx b/apps/rule-manager/client/src/ts/components/pages/Rules.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import '@elastic/eui/dist/eui_theme_light.css';
 import {EuiPageSection} from "@elastic/eui";
 import RulesTable from "../RulesTable";
 

diff --git a/apps/rule-manager/client/src/ts/constants/euiTheme.ts b/apps/rule-manager/client/src/ts/constants/euiTheme.ts
@@ -1,5 +1,12 @@
+/* NB: Anything overridden in here must also be reflected in styles/theme.scss */
 export const euiThemeOverrides = {
   "font": {
     "family": "'Guardian Agate Sans', BlinkMacSystemFont, Helvetica, Arial, sans-serif"
+  },
+  "border": {
+    "radius": {
+      "small": "0",
+      "medium": "0"
+    }
   }
 };
diff --git a/apps/rule-manager/client/src/ts/index.tsx b/apps/rule-manager/client/src/ts/index.tsx
@@ -1,10 +1,12 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import {Page} from "./components/layout/Page";
+import "../css/theme.scss";
 import "../css/reset.css";
 import "../css/typography.css";
 import "./constants/icons";
 
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {Page} from "./components/layout/Page";
+
 // For development mode with Vite
 import 'vite/modulepreload-polyfill';