From b0440112d3458a99fa85b584282c1c2e6bcbe2a1 Mon Sep 17 00:00:00 2001
From: Rory Doak <rory@opensystemslab.io>
Date: Thu, 21 Nov 2024 14:07:28 +0000
Subject: [PATCH] restyle ext portal as well

---
 .../components/ExternalPortal/Editor.tsx      | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx
index 07c796c529..629fb1488b 100644
--- a/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx
+++ b/editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx
@@ -1,3 +1,4 @@
+import MenuItem from "@mui/material/MenuItem";
 import {
   ComponentType as TYPES,
   NodeTag,
@@ -7,6 +8,7 @@ import React from "react";
 import { ComponentTagSelect } from "ui/editor/ComponentTagSelect";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
+import SelectInput from "ui/editor/SelectInput/SelectInput";
 
 import { ICONS } from "../shared/icons";
 
@@ -50,19 +52,25 @@ const ExternalPortalForm: React.FC<{
           </span>
         </ModalSectionContent>
         <ModalSectionContent title="Pick a flow">
-          <select
+          <SelectInput
             data-testid="flowId"
             name="flowId"
             value={formik.values.flowId}
             onChange={formik.handleChange}
           >
             {!id && <option value="" />}
-            {flows.map((flow) => (
-              <option key={flow.id} value={flow.id}>
-                {flow.text}
-              </option>
-            ))}
-          </select>
+            {flows.map((flow) => {
+              return (
+                <MenuItem
+                  sx={(theme) => ({ fontSize: theme.typography.body3 })}
+                  key={flow.id}
+                  value={flow.id}
+                >
+                  {flow.text}
+                </MenuItem>
+              );
+            })}
+          </SelectInput>
         </ModalSectionContent>
         <ComponentTagSelect
           value={formik.values.tags}