diff --git a/assets/images/close.svg b/assets/images/close.svg new file mode 100644 index 000000000000..de1a4693afb6 --- /dev/null +++ b/assets/images/close.svg @@ -0,0 +1,8 @@ + + + + + diff --git a/assets/images/icon-paper-clip.png b/assets/images/icon-paper-clip.png deleted file mode 100644 index bafeaeef63ac..000000000000 Binary files a/assets/images/icon-paper-clip.png and /dev/null differ diff --git a/assets/images/icon-pencil.png b/assets/images/icon-pencil.png deleted file mode 100644 index c63acae209e5..000000000000 Binary files a/assets/images/icon-pencil.png and /dev/null differ diff --git a/assets/images/icon-send.png b/assets/images/icon-send.png deleted file mode 100644 index d943835597ef..000000000000 Binary files a/assets/images/icon-send.png and /dev/null differ diff --git a/assets/images/icon-x--20x20.png b/assets/images/icon-x--20x20.png deleted file mode 100644 index de40ebbf8642..000000000000 Binary files a/assets/images/icon-x--20x20.png and /dev/null differ diff --git a/assets/images/icon-x.png b/assets/images/icon-x.png deleted file mode 100644 index 3d4a9a082e38..000000000000 Binary files a/assets/images/icon-x.png and /dev/null differ diff --git a/assets/images/paperclip.svg b/assets/images/paperclip.svg new file mode 100644 index 000000000000..b5331b7b4585 --- /dev/null +++ b/assets/images/paperclip.svg @@ -0,0 +1,4 @@ + + paper-clip + + diff --git a/assets/images/pencil.svg b/assets/images/pencil.svg new file mode 100644 index 000000000000..9c27bd52986d --- /dev/null +++ b/assets/images/pencil.svg @@ -0,0 +1,8 @@ + + + + + + diff --git a/assets/images/send.svg b/assets/images/send.svg new file mode 100644 index 000000000000..c5a0f52a01bf --- /dev/null +++ b/assets/images/send.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/package.json b/package.json index c496c97cff58..55d60d68a357 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,6 @@ "html-entities": "^1.3.1", "lodash.get": "^4.4.2", "lodash.has": "^4.5.2", - "lodash.merge": "^4.6.2", "lodash.orderby": "^4.6.0", "metro-config": "^0.64.0", "mime-types": "^2.1.28", diff --git a/src/components/CreateMenu.js b/src/components/CreateMenu.js index 31ea03298a3e..a8532ac7aba6 100644 --- a/src/components/CreateMenu.js +++ b/src/components/CreateMenu.js @@ -8,7 +8,8 @@ import styles from '../styles/styles'; import CONST from '../CONST'; import themeColors from '../styles/themes/default'; import colors from '../styles/colors'; -import {ChatBubbleIcon, UsersIcon} from './Expensicons'; +import Icon from './Icon'; +import {ChatBubble, Users} from './Icon/Expensicons'; import variables from '../styles/variables'; const propTypes = { @@ -28,8 +29,8 @@ const CreateMenu = (props) => { // This format allows to set individual callbacks to each item // while including mutual callbacks first const menuItemData = [ - {IconComponent: ChatBubbleIcon, text: 'New Chat', onPress: () => {}}, - {IconComponent: UsersIcon, text: 'New Group', onPress: () => {}}, + {icon: ChatBubble, text: 'New Chat', onPress: () => {}}, + {icon: Users, text: 'New Group', onPress: () => {}}, ].map(item => ({ ...item, onPress: () => { @@ -48,7 +49,7 @@ const CreateMenu = (props) => { : CONST.MODAL.MODAL_TYPE.POPOVER } > - {menuItemData.map(({IconComponent, text, onPress}) => ( + {menuItemData.map(({icon, text, onPress}) => ( { ])} > - + diff --git a/src/components/Expensicons/ChatBubbleIcon.js b/src/components/Expensicons/ChatBubbleIcon.js deleted file mode 100644 index c3e626a6f926..000000000000 --- a/src/components/Expensicons/ChatBubbleIcon.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ChatBubbleSvg from '../../../assets/images/chatbubble.svg'; -import themeColors from '../../styles/themes/default'; - -const propTypes = { - // Width of the icon - width: PropTypes.number, - - // Height of the icon - height: PropTypes.number, - - // Fill of the icon - fill: PropTypes.string, -}; - -const defaultProps = { - width: 20, - height: 20, - fill: themeColors.icon, -}; - -const ChatBubbleIcon = props => ( - -); - -ChatBubbleIcon.propTypes = propTypes; -ChatBubbleIcon.defaultProps = defaultProps; - -export default ChatBubbleIcon; diff --git a/src/components/Expensicons/ExpensifyCashLogoIcon.js b/src/components/Expensicons/ExpensifyCashLogoIcon.js deleted file mode 100644 index b98978600d42..000000000000 --- a/src/components/Expensicons/ExpensifyCashLogoIcon.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import ExpensifyCashLogoSVG from '../../../assets/images/expensify-cash.svg'; -import variables from '../../styles/variables'; - -const propTypes = { - height: PropTypes.number, - width: PropTypes.number, -}; - -const defaultProps = { - height: variables.componentSizeNormal, - width: variables.componentSizeNormal, -}; - -const ExpensifyCashLogoIcon = props => ( - -); - -ExpensifyCashLogoIcon.propTypes = propTypes; -ExpensifyCashLogoIcon.defaultProps = defaultProps; - -export default ExpensifyCashLogoIcon; diff --git a/src/components/Expensicons/MagnifyingGlassIcon.js b/src/components/Expensicons/MagnifyingGlassIcon.js deleted file mode 100644 index 09a416a2f0b1..000000000000 --- a/src/components/Expensicons/MagnifyingGlassIcon.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import MagnifyingGlassSvg from '../../../assets/images/magnifyingglass.svg'; -import themeColors from '../../styles/themes/default'; - -const propTypes = { - height: PropTypes.number, - width: PropTypes.number, -}; - -const defaultProps = { - height: 20, - width: 20, -}; - -const MagnifyingGlassIcon = props => ( - -); - -MagnifyingGlassIcon.propTypes = propTypes; -MagnifyingGlassIcon.defaultProps = defaultProps; - -export default MagnifyingGlassIcon; diff --git a/src/components/Expensicons/PinIcon.js b/src/components/Expensicons/PinIcon.js deleted file mode 100644 index 2b7dfdb9484f..000000000000 --- a/src/components/Expensicons/PinIcon.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import PinSvg from '../../../assets/images/pin.svg'; -import themeColors from '../../styles/themes/default'; - -const propTypes = { - isEnabled: PropTypes.bool.isRequired, - height: PropTypes.number, - width: PropTypes.number, -}; - -const defaultProps = { - height: 20, - width: 20, -}; - -const PinIcon = props => ( - -); - -PinIcon.propTypes = propTypes; -PinIcon.defaultProps = defaultProps; - -export default PinIcon; diff --git a/src/components/Expensicons/PlusIcon.js b/src/components/Expensicons/PlusIcon.js deleted file mode 100644 index a72d4f379b60..000000000000 --- a/src/components/Expensicons/PlusIcon.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import PlusSvg from '../../../assets/images/plus.svg'; -import colors from '../../styles/colors'; - -const propTypes = { - // Fill of the icon - fill: PropTypes.string, - - // Height of the icon - height: PropTypes.number, - - // Width of the icon - width: PropTypes.number, -}; - -const defaultProps = { - height: 20, - width: 20, - fill: colors.black, -}; - -// We must use a class component to create an animatable component with the Animated API -// eslint-disable-next-line react/prefer-stateless-function -class PlusIcon extends React.Component { - render() { - return ( - - ); - } -} - -PlusIcon.propTypes = propTypes; -PlusIcon.defaultProps = defaultProps; - -export default PlusIcon; diff --git a/src/components/Expensicons/UsersIcon.js b/src/components/Expensicons/UsersIcon.js deleted file mode 100644 index 36d828677d02..000000000000 --- a/src/components/Expensicons/UsersIcon.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import UsersSvg from '../../../assets/images/users.svg'; -import themeColors from '../../styles/themes/default'; - -const propTypes = { - // Width of the icon - width: PropTypes.number, - - // Height of the icon - height: PropTypes.number, - - // Fill of the icon - fill: PropTypes.string, -}; - -const defaultProps = { - width: 20, - height: 20, - fill: themeColors.icon, -}; - -const UsersIcon = props => ( - -); - -UsersIcon.propTypes = propTypes; -UsersIcon.defaultProps = defaultProps; - -export default UsersIcon; diff --git a/src/components/Expensicons/index.js b/src/components/Expensicons/index.js deleted file mode 100644 index e4d0af99640c..000000000000 --- a/src/components/Expensicons/index.js +++ /dev/null @@ -1,15 +0,0 @@ -import ExpensifyCashLogoIcon from './ExpensifyCashLogoIcon'; -import MagnifyingGlassIcon from './MagnifyingGlassIcon'; -import PinIcon from './PinIcon'; -import PlusIcon from './PlusIcon'; -import UsersIcon from './UsersIcon'; -import ChatBubbleIcon from './ChatBubbleIcon'; - -export { - ExpensifyCashLogoIcon, - MagnifyingGlassIcon, - PinIcon, - PlusIcon, - UsersIcon, - ChatBubbleIcon, -}; diff --git a/src/components/FAB.js b/src/components/FAB.js index 3bd89d4411b0..218edb0ff095 100644 --- a/src/components/FAB.js +++ b/src/components/FAB.js @@ -1,11 +1,12 @@ import React from 'react'; import {Pressable, Animated, Easing} from 'react-native'; import PropTypes from 'prop-types'; -import {PlusIcon} from './Expensicons'; +import Icon from './Icon'; +import {Plus} from './Icon/Expensicons'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; -const AnimatedPlusIcon = Animated.createAnimatedComponent(PlusIcon); +const AnimatedIcon = Animated.createAnimatedComponent(Icon); const AnimatedPressable = Animated.createAnimatedComponent(Pressable); const propTypes = { @@ -67,7 +68,7 @@ class FAB extends React.Component { {transform: [{rotate}], backgroundColor}, ]} > - + ); } diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js index 4356e0f2b43e..df3d4b278792 100644 --- a/src/components/HeaderWithCloseButton.js +++ b/src/components/HeaderWithCloseButton.js @@ -1,11 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { - View, Image, TouchableOpacity, + View, TouchableOpacity, } from 'react-native'; import styles from '../styles/styles'; -import exitIcon from '../../assets/images/icon-x--20x20.png'; import Header from './Header'; +import Icon from './Icon'; +import {Close} from './Icon/Expensicons'; const propTypes = { /** Title of the Header */ @@ -37,11 +38,7 @@ const HeaderWithCloseButton = props => ( onPress={props.onCloseButtonPress} style={[styles.touchableButtonImage]} > - + diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js new file mode 100644 index 000000000000..779aee2c7fd0 --- /dev/null +++ b/src/components/Icon/Expensicons.js @@ -0,0 +1,23 @@ +import BackArrow from '../../../assets/images/back-left.svg'; +import ChatBubble from '../../../assets/images/chatbubble.svg'; +import Close from '../../../assets/images/close.svg'; +import MagnifyingGlass from '../../../assets/images/magnifyingglass.svg'; +import Paperclip from '../../../assets/images/paperclip.svg'; +import Pencil from '../../../assets/images/pencil.svg'; +import Pin from '../../../assets/images/pin.svg'; +import Plus from '../../../assets/images/plus.svg'; +import Send from '../../../assets/images/send.svg'; +import Users from '../../../assets/images/users.svg'; + +export { + BackArrow, + ChatBubble, + Close, + MagnifyingGlass, + Paperclip, + Pencil, + Pin, + Plus, + Send, + Users, +}; diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js new file mode 100644 index 000000000000..34e1b6c410fd --- /dev/null +++ b/src/components/Icon/index.js @@ -0,0 +1,47 @@ +import _ from 'underscore'; +import React, {PureComponent} from 'react'; +import PropTypes from 'prop-types'; +import themeColors from '../../styles/themes/default'; +import variables from '../../styles/variables'; +import * as Expensicons from './Expensicons'; + +const propTypes = { + // The asset to render. + src: PropTypes.oneOf(_.values(Expensicons)).isRequired, + + // The width of the icon. + width: PropTypes.number, + + // The height of the icon. + height: PropTypes.number, + + // The fill color for the icon. + // Can be provided in hex, rgb, rgba, or as a valid react-native named color such as 'red' or 'blue'. + fill: PropTypes.string, +}; + +const defaultProps = { + width: variables.iconSizeNormal, + height: variables.iconSizeNormal, + fill: themeColors.icon, +}; + +// We must use a class component to create an animatable component with the Animated API +// eslint-disable-next-line react/prefer-stateless-function +class Icon extends PureComponent { + render() { + const IconToRender = this.props.src; + return ( + + ); + } +} + +Icon.propTypes = propTypes; +Icon.defaultProps = defaultProps; + +export default Icon; diff --git a/src/components/PillWithCancelButton.js b/src/components/PillWithCancelButton.js index 4fa8fa8a7b5c..38886a973617 100644 --- a/src/components/PillWithCancelButton.js +++ b/src/components/PillWithCancelButton.js @@ -1,8 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {Text, Image, TouchableOpacity} from 'react-native'; +import {Text, TouchableOpacity} from 'react-native'; import styles from '../styles/styles'; -import iconX from '../../assets/images/icon-x.png'; +import Icon from './Icon'; +import {Close} from './Icon/Expensicons'; +import variables from '../styles/variables'; const propTypes = { text: PropTypes.string.isRequired, @@ -20,11 +22,7 @@ const PillWithCancelButton = props => ( > {props.text} - + ); diff --git a/src/pages/SetPasswordPage.js b/src/pages/SetPasswordPage.js index 3ba4ed234523..b259139e69bb 100644 --- a/src/pages/SetPasswordPage.js +++ b/src/pages/SetPasswordPage.js @@ -13,7 +13,7 @@ import lodashHas from 'lodash.has'; import compose from '../libs/compose'; import {Redirect, withRouter} from '../libs/Router'; import styles from '../styles/styles'; -import {ExpensifyCashLogoIcon} from '../components/Expensicons'; +import ExpensifyCashLogo from '../../assets/images/expensify-cash.svg'; import CustomStatusBar from '../components/CustomStatusBar'; import {setPassword} from '../libs/actions/Session'; import ONYXKEYS from '../ONYXKEYS'; @@ -94,7 +94,7 @@ class SetPasswordPage extends Component { - diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 8205434799f2..9c53c591d606 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -6,9 +6,9 @@ import Header from '../../components/Header'; import styles from '../../styles/styles'; import ONYXKEYS from '../../ONYXKEYS'; import {withRouter} from '../../libs/Router'; -import BackArrow from '../../../assets/images/back-left.svg'; import themeColors from '../../styles/themes/default'; -import {PinIcon} from '../../components/Expensicons'; +import Icon from '../../components/Icon'; +import {BackArrow, Pin} from '../../components/Icon/Expensicons'; import compose from '../../libs/compose'; import {togglePinnedState} from '../../libs/actions/Report'; @@ -45,7 +45,7 @@ const HeaderView = props => ( onPress={props.onNavigationMenuButtonClicked} style={[styles.LHNToggle]} > - + )} {props.report && props.report.reportName ? ( @@ -63,7 +63,7 @@ const HeaderView = props => ( onPress={() => togglePinnedState(props.report)} style={[styles.touchableButtonImage, styles.mr0]} > - + diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index d145d4130eb1..e89dd3206c4c 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -1,15 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; -import {View, Image, TouchableOpacity} from 'react-native'; +import {View, TouchableOpacity} from 'react-native'; import _ from 'underscore'; import lodashGet from 'lodash.get'; import {withOnyx} from 'react-native-onyx'; import styles from '../../../styles/styles'; import themeColors from '../../../styles/themes/default'; import TextInputFocusable from '../../../components/TextInputFocusable'; -import sendIcon from '../../../../assets/images/icon-send.png'; import ONYXKEYS from '../../../ONYXKEYS'; -import paperClipIcon from '../../../../assets/images/icon-paper-clip.png'; +import Icon from '../../../components/Icon'; +import {Paperclip, Send} from '../../../components/Icon/Expensicons'; import AttachmentPicker from '../../../components/AttachmentPicker'; import {addAction, saveReportComment, broadcastUserIsTyping} from '../../../libs/actions/Report'; import ReportTypingIndicator from './ReportTypingIndicator'; @@ -168,11 +168,7 @@ class ReportActionCompose extends React.Component { style={[styles.chatItemAttachButton]} underlayColor={themeColors.componentBG} > - + )} @@ -218,11 +214,7 @@ class ReportActionCompose extends React.Component { underlayColor={themeColors.componentBG} disabled={this.state.isCommentEmpty} > - + diff --git a/src/pages/home/sidebar/ChatLinkRow.js b/src/pages/home/sidebar/ChatLinkRow.js index b5d6bad40a79..f73de46fa4ea 100644 --- a/src/pages/home/sidebar/ChatLinkRow.js +++ b/src/pages/home/sidebar/ChatLinkRow.js @@ -2,7 +2,6 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; import { - Image, Text, TouchableOpacity, View, @@ -10,8 +9,10 @@ import { } from 'react-native'; import styles from '../../../styles/styles'; import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes'; -import pencilIcon from '../../../../assets/images/icon-pencil.png'; +import Icon from '../../../components/Icon'; +import {Pencil} from '../../../components/Icon/Expensicons'; import MultipleAvatars from '../../../components/MultipleAvatars'; +import variables from '../../../styles/variables'; const propTypes = { // Option to allow the user to choose from can be type 'report' or 'user' @@ -119,11 +120,7 @@ const ChatLinkRow = ({ )} {option.hasDraftComment && ( - + )} ); diff --git a/src/pages/home/sidebar/ChatSwitcherSearchForm.js b/src/pages/home/sidebar/ChatSwitcherSearchForm.js index c77318e37d25..678dcad69206 100644 --- a/src/pages/home/sidebar/ChatSwitcherSearchForm.js +++ b/src/pages/home/sidebar/ChatSwitcherSearchForm.js @@ -1,7 +1,6 @@ import _ from 'underscore'; import React from 'react'; import { - Image, TouchableOpacity, View, Text, @@ -9,11 +8,13 @@ import { import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; import themeColors from '../../../styles/themes/default'; +import Icon from '../../../components/Icon'; +import {Close} from '../../../components/Icon/Expensicons'; import TextInputWithFocusStyles from '../../../components/TextInputWithFocusStyles'; -import iconX from '../../../../assets/images/icon-x.png'; import {getDisplayName} from '../../../libs/actions/PersonalDetails'; import PillWithCancelButton from '../../../components/PillWithCancelButton'; import ChatSwitcherOptionPropTypes from './ChatSwitcherOptionPropTypes'; +import variables from '../../../styles/variables'; const propTypes = { // A ref to forward to the text input @@ -135,11 +136,7 @@ const ChatSwitcherSearchForm = props => ( onPress={props.onClearButtonClick} underlayColor={themeColors.componentBG} > - + ); diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index b80c9d4068fc..4f7ada9657e6 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -12,7 +12,8 @@ import {withRouter} from '../../../libs/Router'; import {redirect} from '../../../libs/actions/App'; import ROUTES from '../../../ROUTES'; import * as ChatSwitcher from '../../../libs/actions/ChatSwitcher'; -import {MagnifyingGlassIcon} from '../../../components/Expensicons'; +import Icon from '../../../components/Icon'; +import {MagnifyingGlass} from '../../../components/Icon/Expensicons'; import Header from '../../../components/Header'; import AvatarWithIndicator from '../../../components/AvatarWithIndicator'; import OptionsList from '../../../components/OptionsList'; @@ -120,7 +121,7 @@ const SidebarLinks = (props) => { style={[styles.flexRow, styles.sidebarHeaderTop]} onPress={() => ChatSwitcher.show()} > - + ( - + diff --git a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js index ec8a7e2a605f..d2bfce6cdb44 100644 --- a/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js +++ b/src/pages/signin/SignInPageLayout/SignInPageLayoutWide.js @@ -4,7 +4,7 @@ import { } from 'react-native'; import PropTypes from 'prop-types'; import styles from '../../../styles/styles'; -import {ExpensifyCashLogoIcon} from '../../../components/Expensicons'; +import ExpensifyCashLogo from '../../../../assets/images/expensify-cash.svg'; import welcomeScreenshot from '../../../../assets/images/welcome-screenshot-wide.png'; import variables from '../../../styles/variables'; @@ -27,10 +27,7 @@ const SignInPageLayoutWide = ({children}) => ( - + diff --git a/src/styles/styles.js b/src/styles/styles.js index 090610232244..3d3227c6e184 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -272,11 +272,6 @@ const styles = { marginTop: 20, }, - signinLogo: { - height: variables.componentSizeLarge, - width: variables.componentSizeLarge, - }, - signinWelcomeScreenshot: { height: 354, width: 295, @@ -525,17 +520,6 @@ const styles = { width: 18, }, - LHNPencilIcon: { - height: 16, - width: 16, - }, - - attachmentCloseIcon: { - height: 20, - width: 20, - padding: 0, - }, - chatContent: { flex: 4, justifyContent: 'flex-end', @@ -662,19 +646,14 @@ const styles = { alignSelf: 'flex-end', borderRadius: 6, height: 32, - paddingTop: 8, + paddingTop: 6, paddingRight: 6, - paddingBottom: 8, + paddingBottom: 6, paddingLeft: 6, margin: 3, justifyContent: 'center', }, - chatItemSubmitButtonIcon: { - height: 20, - width: 20, - }, - chatItemAttachButton: { alignItems: 'center', alignSelf: 'flex-end', @@ -704,11 +683,6 @@ const styles = { justifyContent: 'center', }, - chatSwitcherInputClearIcon: { - height: 24, - width: 24, - }, - chatSwitcherGroupDMContainer: { flexDirection: 'row', flexWrap: 'wrap', diff --git a/src/styles/variables.js b/src/styles/variables.js index d464dcd0d667..3cf47cc19803 100644 --- a/src/styles/variables.js +++ b/src/styles/variables.js @@ -9,6 +9,10 @@ export default { fontSizeNormal: 15, fontSizeLarge: 17, fontSizeh1: 19, + iconSizeExtraSmall: 12, + iconSizeSmall: 16, + iconSizeNormal: 20, + iconSizeLarge: 24, mobileResponsiveWidthBreakpoint: 800, safeInsertPercentage: 0.7, sideBarWidth: 300,