chore: remove react-feather icon library (#2471)

* chore: remove react-feather icon library * chore: remove react-feather icon library
theopensystemslab · Nov 22, 2023 · f22eaf2 · f22eaf2
1 parent 9bbb4d8
commit f22eaf2
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 28 deletions.
diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
@@ -70,7 +70,6 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^3.1.4",
-    "react-feather": "^2.0.10",
     "react-html-parser": "^2.0.2",
     "react-markdown": "^8.0.7",
     "react-navi": "^0.15.0",

diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx b/editor.planx.uk/src/pages/FlowEditor/components/PreviewBrowser.tsx
@@ -1,3 +1,8 @@
+import LanguageIcon from "@mui/icons-material/Language";
+import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import SignalCellularAltIcon from "@mui/icons-material/SignalCellularAlt";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
@@ -10,13 +15,6 @@ import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import formatDistanceToNow from "date-fns/formatDistanceToNow";
 import React, { useState } from "react";
-import {
-  BarChart,
-  ExternalLink,
-  Globe,
-  RefreshCw,
-  Terminal,
-} from "react-feather";
 import { useAsync } from "react-use";
 import Input from "ui/Input";
 
@@ -146,7 +144,7 @@ const PreviewBrowser: React.FC<{
             value={props.url.replace("/preview", "/unpublished")}
           />
           <Tooltip arrow title="Refresh preview">
-            <RefreshCw
+            <RefreshIcon
               onClick={() => {
                 resetPreview();
                 setKey((a) => !a);
@@ -155,7 +153,7 @@ const PreviewBrowser: React.FC<{
           </Tooltip>
 
           <Tooltip arrow title="Toggle debug console">
-            <Terminal
+            <MenuOpenIcon
               onClick={() => setDebugConsoleVisibility(!showDebugConsole)}
             />
           </Tooltip>
@@ -168,14 +166,14 @@ const PreviewBrowser: React.FC<{
                 rel="noopener noreferrer"
                 color="inherit"
               >
-                <BarChart />
+                <SignalCellularAltIcon />
               </Link>
             </Tooltip>
           ) : (
             <Tooltip arrow title="Analytics page unavailable">
               <Box>
                 <Link component={"button"} disabled aria-disabled={true}>
-                  <BarChart />
+                  <SignalCellularAltIcon />
                 </Link>
               </Box>
             </Tooltip>
@@ -188,7 +186,7 @@ const PreviewBrowser: React.FC<{
               rel="noopener noreferrer"
               color="inherit"
             >
-              <ExternalLink />
+              <OpenInNewIcon />
             </Link>
           </Tooltip>
 
@@ -199,7 +197,7 @@ const PreviewBrowser: React.FC<{
               rel="noopener noreferrer"
               color="inherit"
             >
-              <Globe />
+              <LanguageIcon />
             </Link>
           </Tooltip>
         </Box>

diff --git a/editor.planx.uk/src/pages/FlowEditor/floweditor.scss b/editor.planx.uk/src/pages/FlowEditor/floweditor.scss
@@ -47,14 +47,15 @@ $pixel: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAA
     input {
       flex: 1;
       padding: 5px;
+      margin-right: 5px;
       background: white;
       border: 1px solid rgba(0, 0, 0, 0.2);
     }
     svg {
       cursor: pointer;
       opacity: 0.7;
-      padding: 6px 0 3px 5px;
-      // height: 20px;
+      margin: 6px 4px 1px 4px;
+      font-size: 1.2rem;
     }
     display: flex;
     background: #ddd;