Fix IE11 UI Elements

package.json

@@ -40,7 +40,6 @@
     "babel-polyfill": "^6.26.0",
     "bcrypt": "^3.0.6",
     "body-parser": "^1.18.3",
-    "boxicons": "^2.0.5",
     "classnames": "^2.2.6",
     "connect-redis": "^3.4.1",
     "cookie-session": "^1.4.0",

src/client/components/BaseLayout/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import 'boxicons'
 import { CssBaseline, createStyles, makeStyles } from '@material-ui/core'
 import Masthead from './Masthead'
 import BaseLayoutHeader from './BaseLayoutHeader'

src/client/components/HomePage/index.jsx

@@ -2,7 +2,6 @@ import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
 import { Redirect, withRouter } from 'react-router-dom'
-import 'boxicons'
 
 import homeActions from '~/actions/home'
 import loginActions from '~/actions/login'

src/client/components/MessageSnackbar.jsx

@@ -5,9 +5,9 @@ import Snackbar from '@material-ui/core/Snackbar'
 import SnackbarContent from '@material-ui/core/SnackbarContent'
 import IconButton from '@material-ui/core/IconButton'
 import { withStyles } from '@material-ui/core/styles'
+import CloseIcon from './widgets/CloseIcon'
 import rootActions from '~/actions/root'
 import { snackbarVariants } from '~/util/types'
-import 'boxicons'
 
 const snackbarStyle = (theme) => ({
   error: {
@@ -49,7 +49,7 @@ const MessageSnackbar = ({ classes, variant, message, closeSnackbar }) => {
             onClick={closeSnackbar}
             size="small"
           >
-            <box-icon name="x" color="white" size="sm" />
+            <CloseIcon color="#fff" size={24} />
           </IconButton>,
         ]}
       />

src/client/components/UserPage/CreateUrlModal/CreateLinkForm.jsx

@@ -16,6 +16,7 @@ import {
   isValidShortUrl,
 } from '../../../../shared/util/validation'
 import ModalMargins from './ModalMargins'
+import refreshIcon from './assets/refresh-icon.svg'
 
 // Height of the text field in the create link dialog.
 const TEXT_FIELD_HEIGHT = 44
@@ -97,13 +98,13 @@ export default function CreateLinkForm({
                 </FormStartAdorment>
               ),
               endAdornment: (
-                <InputAdornment position="end">
+                <InputAdornment position="end" className={classes.endAdornment}>
                   <IconButton
                     className={classes.refreshIcon}
                     onClick={setRandomShortUrl}
                     size="small"
                   >
-                    <box-icon name="refresh" />
+                    <img src={refreshIcon} alt="Get new short link" />
                   </IconButton>
                 </InputAdornment>
               ),

src/client/components/UserPage/CreateUrlModal/index.jsx

@@ -8,6 +8,7 @@ import {
   createStyles,
   makeStyles,
 } from '@material-ui/core'
+import CloseIcon from '../../widgets/CloseIcon'
 
 import userActions from '../../../actions/user'
 import CreateLinkForm from './CreateLinkForm'
@@ -86,7 +87,7 @@ const CreateUrlModal = ({
             onClick={closeCreateUrlModal}
             size="small"
           >
-            <box-icon size={isFullScreenDialog ? 'md' : 'sm'} name="x" />
+            <CloseIcon size={isFullScreenDialog ? 36 : 24} />
           </IconButton>
         </div>
       </ModalMargins>

src/client/components/UserPage/CreateUrlModal/styles/createLinkForm.ts

@@ -11,6 +11,10 @@ const useCreateLinkFormStyles = makeStyles((theme) =>
       backgroundColor: '#f0f0f0',
       paddingRight: theme.spacing(1.5),
       borderRight: `1px solid ${theme.palette.divider}`,
+      flexShrink: 0,
+    },
+    endAdornment: {
+      flexShrink: 0,
     },
     startAdormentText: {
       width: '87px',

src/client/components/UserPage/Drawer/ControlPanel/LinkAnalytics.tsx

@@ -23,6 +23,7 @@ const useStyles = makeStyles((theme) =>
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
+      marginBottom: '141px',
     },
     linkAnalyticsText: {
       marginTop: 20,

src/client/components/UserPage/Drawer/ControlPanel/index.tsx

@@ -14,7 +14,7 @@ import {
 import DrawerActions from './helpers/reducers'
 import { useDrawerState, useDrawerDispatch } from '..'
 import DrawerMargin from './DrawerMargin'
-import closeIcon from '~/assets/icons/close-icon.svg'
+import CloseIcon from '../../../widgets/CloseIcon'
 import LinkAnalytics from './LinkAnalytics'
 import DrawerHeader from './DrawerHeader'
 import ConfigOption, { TrailingPosition } from './widgets/ConfigOption'
@@ -35,7 +35,6 @@ const useStyles = makeStyles((theme) =>
     },
     dialogContents: {
       marginTop: theme.spacing(6.5),
-      marginBottom: 141,
       [theme.breakpoints.up('md')]: {
         marginTop: 116,
       },
@@ -165,7 +164,7 @@ export default function ControlPanel() {
           <div className={classes.topBar} />
         </Hidden>
         <IconButton className={classes.closeIcon} onClick={handleClose}>
-          <img src={closeIcon} alt="Close" draggable={false} />
+          <CloseIcon size={24} />
         </IconButton>
         <DrawerMargin>
           <DrawerHeader />

src/client/components/UserPage/Drawer/ControlPanel/widgets/ConfigOption.tsx

@@ -20,7 +20,9 @@ const useStyles = makeStyles((theme) =>
     leadingContainer: {
       flex: 1,
       marginBottom: 8,
+      flexBasis: '100%',
       [theme.breakpoints.up('md')]: {
+        flexBasis: 0,
         marginBottom: 0,
         marginRight: 19,
       },

src/client/components/UserPage/UserLinkTable/ToolBar/Buttons/CreateLinkButton.jsx

@@ -6,11 +6,13 @@ import userActions from '../../../../../actions/user'
 import ContainedIconButton from './templates/ContainedIconButton'
 import useMinifiedActions from '../../../CreateUrlModal/helpers/minifiedActions'
 import OvalContainedButton from './templates/OvalContainedButton'
+import addIcon from '../assets/add-icon.svg'
 
 const useStyles = makeStyles((theme) =>
   createStyles({
     createLinkButtonContainer: {
       marginLeft: theme.spacing(1.5),
+      flexShrink: 0,
     },
   }),
 )
@@ -23,7 +25,7 @@ export default function CreateLinkButton() {
     <span className={classes.createLinkButtonContainer}>
       {useMinifiedActions() ? (
         <ContainedIconButton onClick={openCreateUrlModal}>
-          <box-icon name="plus" />
+          <img src={addIcon} alt="Create link" />
         </ContainedIconButton>
       ) : (
         <OvalContainedButton onClick={openCreateUrlModal}>

src/client/components/UserPage/UserLinkTable/ToolBar/Buttons/DownloadButton.jsx

@@ -10,6 +10,7 @@ const useStyles = makeStyles(() =>
     downloadButtonContainer: {
       marginLeft: 20,
       width: '150px',
+      flexShrink: 0,
     },
     downloadButton: {
       border: 'solid 1px #456682',

src/client/components/UserPage/UserLinkTable/ToolBar/FilterSortPanel/FilterPanel/FilterCheckbox/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { IconButton, createStyles, makeStyles } from '@material-ui/core'
-import checkIcon from '~/assets/icons/check-icon.svg'
+import CheckIcon from '../../widgets/CheckIcon'
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -37,7 +37,7 @@ export default ({ checked, className, onClick }: FilterCheckboxProps) => {
     <IconButton className={className} onClick={onClick}>
       {checked ? (
         <div className={`${classes.uncheckedIcon} ${classes.filled}`}>
-          <img src={checkIcon} className={classes.icon} />
+          <CheckIcon size={24} color="#fff" />
         </div>
       ) : (
         <div className={classes.uncheckedIcon} />

src/client/components/UserPage/UserLinkTable/ToolBar/FilterSortPanel/SortPanel/SortButton/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, Typography } from '@material-ui/core'
 import useStyles from '../../styles'
-import checkIcon from '~/assets/icons/check-icon.svg'
+import CheckIcon from '../../widgets/CheckIcon'
 
 export type SortButtonProps = {
   columnLabel: string
@@ -13,15 +13,15 @@ const SortButton = ({ columnLabel, isSelected, onClick }: SortButtonProps) => {
   const classes = useStyles()
   return (
     <Button
-      classes={{ root: classes.sortButtonRoot }}
+      classes={{ root: classes.sortButtonRoot, label: classes.sortButtonLabel }}
       className={isSelected ? classes.sortButtonSelected : classes.sortButton}
       fullWidth
       onClick={() => onClick()}
     >
       <Typography variant="body2" className={classes.columnLabel}>
         {columnLabel}
       </Typography>
-      {isSelected && <img src={checkIcon} className={classes.checkIcon} />}
+      {isSelected && <CheckIcon size={24} className={classes.checkIcon} />}
     </Button>
   )
 }