From b586ad1213d6b0cd4995e39a81c4230011169e0e Mon Sep 17 00:00:00 2001
From: Ben Whitmore <ben.whitmore0@gmail.com>
Date: Mon, 12 Apr 2021 14:28:08 +1200
Subject: [PATCH] fix(form-builder): use icons that aren't font-dependent

---
 .../src/components/FormBuilder.js             | 17 ++++++++--
 .../src/components/FormBuilderLayout.js       | 33 +++++++++++++++----
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/app/components/component-formbuilder/src/components/FormBuilder.js b/app/components/component-formbuilder/src/components/FormBuilder.js
index 2df31a905a..ca58305e20 100644
--- a/app/components/component-formbuilder/src/components/FormBuilder.js
+++ b/app/components/component-formbuilder/src/components/FormBuilder.js
@@ -33,6 +33,17 @@ const StatusIcon = withTheme(({ children, theme }) => (
   <Icon color={theme.colorPrimary}>{children}</Icon>
 ))
 
+const UnpaddedIcon = styled(Icon)`
+  padding: 0;
+  vertical-align: text-top;
+`
+
+const SmallIcon = withTheme(({ children, theme }) => (
+  <UnpaddedIcon color={theme.colorPrimary} size={2.5}>
+    {children}
+  </UnpaddedIcon>
+))
+
 const Status = styled.div`
   align-items: center;
   color: ${th('colorPrimary')};
@@ -101,14 +112,14 @@ const BuilderElement = ({
           moveFieldUp(element.id)
         }}
       >
-        â–²
+        <SmallIcon>arrowUp</SmallIcon>
       </IconAction>
       <IconAction
         onClick={event => {
           moveFieldDown(element.id)
         }}
       >
-        â–¼
+        <SmallIcon>arrowDown</SmallIcon>
       </IconAction>
       <IconAction
         onClick={event => {
@@ -118,7 +129,7 @@ const BuilderElement = ({
           })
         }}
       >
-        🗙
+        <SmallIcon>x</SmallIcon>
       </IconAction>
     </Element>
   )
diff --git a/app/components/component-formbuilder/src/components/FormBuilderLayout.js b/app/components/component-formbuilder/src/components/FormBuilderLayout.js
index a8920a0c73..c4095c9d07 100644
--- a/app/components/component-formbuilder/src/components/FormBuilderLayout.js
+++ b/app/components/component-formbuilder/src/components/FormBuilderLayout.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { forEach } from 'lodash'
-import styled from 'styled-components'
-import { Tabs, Action } from '@pubsweet/ui'
+import styled, { withTheme } from 'styled-components'
+import { Tabs, Action, Icon } from '@pubsweet/ui'
 import { Columns, Details, Form } from './style'
 import ComponentProperties from './ComponentProperties'
 import FormBuilder from './FormBuilder'
@@ -14,11 +14,25 @@ import {
   SectionRow,
 } from '../../../shared'
 
-const DeleteIcon = styled(Action)`
+const IconAction = styled(Action)`
   line-height: 1.15;
+  vertical-align: text-top;
+`
+
+const RightIconAction = styled(IconAction)`
   margin-left: 10px;
 `
 
+const UnpaddedIcon = styled(Icon)`
+  line-height: 1.15;
+  padding: 0;
+  vertical-align: text-top;
+`
+
+const ControlIcon = withTheme(({ children, theme }) => (
+  <UnpaddedIcon color={theme.colorPrimary}>{children}</UnpaddedIcon>
+))
+
 const FormBuilderLayout = ({
   forms,
   activeFormId,
@@ -54,7 +68,7 @@ const FormBuilderLayout = ({
       key: `${form.id}`,
       label: [
         form.name,
-        <DeleteIcon
+        <RightIconAction
           key="delete-form"
           onClick={e => {
             e.preventDefault()
@@ -65,8 +79,8 @@ const FormBuilderLayout = ({
             setActiveFormId(forms.find(f => f.id !== form.id)?.id ?? 'new')
           }}
         >
-          🗙
-        </DeleteIcon>,
+          <ControlIcon size={2.5}>x</ControlIcon>
+        </RightIconAction>,
       ],
     })
   })
@@ -74,7 +88,12 @@ const FormBuilderLayout = ({
   sections.push({
     content: <SectionContent />,
     key: 'new',
-    label: '✚ Add Form',
+    label: [
+      <ControlIcon key="new-form" size={2.5}>
+        plus
+      </ControlIcon>,
+      ' New Form',
+    ],
   })
 
   const activeForm = forms.find(f => f.id === activeFormId) ?? {
-- 
GitLab