Add sass variable overrides to theme

Necessary to style components that are not yet converted to Emotion (elastic/eui#5685)

apps/rule-manager/client/package.json

@@ -18,6 +18,7 @@
     "@types/react": "~17.0.53",
     "@types/react-dom": "~17.0.19",
     "@vitejs/plugin-react-swc": "^3.0.0",
+    "sass": "^1.60.0",
     "typescript": "4.5",
     "utility-types": "^3.10.0",
     "vite": "^4.2.0"

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";

apps/rule-manager/client/src/ts/components/RulesTable.tsx

@@ -45,10 +45,7 @@ const columns: Array<EuiBasicTableColumn<Rule>> = [
     },
     {
         field: 'id',
-        name: 'ID',
-        render: (id: Rule['id']) => {
-            return <>{id}</>
-        }
+        name: 'ID'
     },
     {
         field: 'category',
@@ -80,11 +77,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>

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";
 

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"
+    }
   }
 };

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';