Enforce linting in loot-design (#233)

* build: add linter to loot-design package

* style: automated fixes

* style: manual linter fixes

packages/loot-design/package.json

@@ -12,6 +12,8 @@
     "chroma-js": "^1.3.3",
     "date-fns": "2.0.0-alpha.27",
     "downshift": "1.31.16",
+    "eslint": "5.6.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "fast-glob": "^2.2.2",
     "formik": "^0.11.10",
     "glamor": "^2.20.40",
@@ -48,7 +50,8 @@
     "start:mobile": "IS_REACT_NATIVE=1 react-scripts start",
     "test": "npm-run-all -cp 'test:*'",
     "test:web": "jest -c jest.config.js",
-    "test:react-native": "jest -c jest.rn.config.js"
+    "test:react-native": "jest -c jest.rn.config.js",
+    "lint": "eslint src"
   },
   "homepage": "./",
   "manifest": "manifest.json",
@@ -61,8 +64,5 @@
   },
   "browserslist": [
     "electron 3.0"
-  ],
+  ]
-  "eslintConfig": {
-    "extends": "react-app"
-  }
 }

packages/loot-design/src/components/PayeeAutocomplete.js

@@ -183,7 +183,9 @@ export default function PayeeAutocomplete({
   let payees = useCachedPayees();
   let accounts = useCachedAccounts();
 
-  let [focusTransferPayees, setFocusTransferPayees] = useState(defaultFocusTransferPayees);
+  let [focusTransferPayees, setFocusTransferPayees] = useState(
+    defaultFocusTransferPayees
+  );
   let payeeSuggestions = useMemo(
     () => [
       { id: 'new', name: '' },

packages/loot-design/src/components/View.mobile.js

@@ -1,3 +1,3 @@
 import { View } from 'react-native';
 
-export default View
+export default View;

packages/loot-design/src/components/budget/report/components.js

@@ -33,7 +33,7 @@ export const BudgetTotalsMonth = React.memo(function BudgetTotalsMonth() {
           binding={reportBudget.totalBudgetedExpense}
           type="financial"
           style={{ color: colors.n4, fontWeight: 600 }}
-          formatter={(value) => {
+          formatter={value => {
             return format(parseFloat(value || '0'), 'financial');
           }}
         />
@@ -136,7 +136,7 @@ function BalanceTooltip({ categoryId, tooltip, monthIndex, onBudgetAction }) {
       onClose={tooltip.close}
     >
       <Menu
-        onMenuSelect={(type) => {
+        onMenuSelect={type => {
           onBudgetAction(monthIndex, 'carryover', {
             category: categoryId,
             flag: !carryover
@@ -199,10 +199,10 @@ export const CategoryMonth = React.memo(function CategoryMonth({
           binding: reportBudget.catBudgeted(category.id),
           type: 'financial',
           getValueStyle: makeAmountGrey,
-          formatExpr: (expr) => {
+          formatExpr: expr => {
             return integerToCurrency(expr);
           },
-          unformatExpr: (expr) => {
+          unformatExpr: expr => {
             return amountToInteger(evalArithmetic(expr, 0));
           }
         }}
@@ -211,7 +211,7 @@ export const CategoryMonth = React.memo(function CategoryMonth({
             onEdit(null);
           }
         }}
-        onSave={(amount) => {
+        onSave={amount => {
           onBudgetAction(monthIndex, 'budget-amount', {
             category: category.id,
             amount

packages/loot-design/src/components/common.js

@@ -3,7 +3,7 @@ import React, {
   useEffect,
   useLayoutEffect,
   useState,
-  useCallback,
+  useCallback
 } from 'react';
 import { css } from 'glamor';
 import mergeRefs from 'react-merge-refs';

packages/loot-design/src/components/hooks.js

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
 export function useScrollFlasher() {
   let scrollRef = useRef(null);

packages/loot-design/src/components/manager/ImportYNAB4.js

@@ -1,14 +1,7 @@
 import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { importBudget } from 'loot-core/src/client/actions/budgets';
-import {
+import { View, Block, Modal, Button, ButtonWithLoading, P } from '../common';
-  View,
-  Block,
-  Modal,
-  Button,
-  ButtonWithLoading,
-  P
-} from '../common';
 import { styles, colors } from '../../style';
 
 function getErrorMessage(error) {
@@ -67,10 +60,10 @@ function Import({ modalProps, availableImports }) {
             </P>
             <P>
               When you've located your data,{' '}
-              <strong>compress it into a zip file</strong>. On macOS, right-click
+              <strong>compress it into a zip file</strong>. On macOS,
-              the folder and select "Compress". On Windows, right-click and
+              right-click the folder and select "Compress". On Windows,
-              select "Send to > Compressed (zipped) folder". Upload the zipped
+              right-click and select "Send to > Compressed (zipped) folder".
-              folder for importing.
+              Upload the zipped folder for importing.
             </P>
             <View>
               <ButtonWithLoading loading={importing} primary onClick={onImport}>

packages/loot-design/src/components/mobile/ScalableImage.js

@@ -64,7 +64,7 @@ export default function ScalableImage(props) {
           width: scalableWidth,
           height: scalableHeight,
           flex: -1,
-          overflow: 'hidden',
+          overflow: 'hidden'
         },
         props.style
       ]}

packages/loot-design/src/components/mobile/account.js

@@ -64,7 +64,7 @@ export function AccountDetails({
     return prependTransactions.concat(transactions);
   }, [prependTransactions, transactions]);
 
-  console.log('rendering')
+  console.log('rendering');
 
   return (
     <View style={{ flex: 1, backgroundColor: 'white' }}>

packages/loot-design/src/components/mobile/budget.js

@@ -123,7 +123,7 @@ export class BudgetCell extends React.PureComponent {
 
     return (
       <SheetValue binding={binding}>
-        {(node) => {
+        {node => {
           return (
             <View style={style}>
               <AmountInput
@@ -140,7 +140,7 @@ export class BudgetCell extends React.PureComponent {
                 scrollIntoView={Platform.OS === 'android'}
                 textStyle={[styles.smallText, textStyle]}
                 animationColor="white"
-                onBlur={(value) => {
+                onBlur={value => {
                   onBudgetAction(month, 'budget-amount', {
                     category: categoryId,
                     amount: amountToInteger(value)
@@ -288,7 +288,7 @@ export class BudgetCategory extends React.PureComponent {
 
     let content = (
       <ListItem
-        ref={(el) => (this.container = el)}
+        ref={el => (this.container = el)}
         style={[
           {
             backgroundColor: editing ? colors.p11 : 'transparent',
@@ -323,7 +323,7 @@ export class BudgetCategory extends React.PureComponent {
             name="balance"
             binding={balance}
             style={[styles.smallText, { width: 90, textAlign: 'right' }]}
-            getStyle={(value) => value < 0 && { color: colors.r4 }}
+            getStyle={value => value < 0 && { color: colors.r4 }}
             type="financial"
           />
         </Animated.View>
@@ -487,8 +487,14 @@ export class TotalsRow extends React.PureComponent {
 
 export class IncomeCategory extends React.PureComponent {
   render() {
-    const { name, budget, balance, style, nameTextStyle, amountTextStyle } =
+    const {
-      this.props;
+      name,
+      budget,
+      balance,
+      style,
+      nameTextStyle,
+      amountTextStyle
+    } = this.props;
     return (
       <ListItem
         style={[
@@ -717,10 +723,10 @@ export class IncomeBudgetGroup extends React.Component {
 }
 
 export class BudgetGroups extends React.Component {
-  getGroups = memoizeOne((groups) => {
+  getGroups = memoizeOne(groups => {
     return {
-      incomeGroup: groups.find((group) => group.is_income),
+      incomeGroup: groups.find(group => group.is_income),
-      expenseGroups: groups.filter((group) => !group.is_income)
+      expenseGroups: groups.filter(group => !group.is_income)
     };
   });
 
@@ -742,7 +748,7 @@ export class BudgetGroups extends React.Component {
 
     return (
       <View style={{ marginBottom: 15 }}>
-        {expenseGroups.map((group) => {
+        {expenseGroups.map(group => {
           return (
             <BudgetGroup
               key={group.id}
@@ -800,7 +806,7 @@ export class BudgetTable extends React.Component {
       }
     });
 
-    const keyboardWillHide = (e) => {
+    const keyboardWillHide = e => {
       if (ACTScrollViewManager) {
         ACTScrollViewManager.setFocused(-1);
       }
@@ -831,7 +837,7 @@ export class BudgetTable extends React.Component {
     this.cleanup();
   }
 
-  onEditCategory = (id) => {
+  onEditCategory = id => {
     this.setState({ editingCategory: id });
   };
 
@@ -849,11 +855,9 @@ export class BudgetTable extends React.Component {
   onMoveUp = () => {
     const { categories } = this.props;
     const { editingCategory } = this.state;
-    const expenseCategories = categories.filter((cat) => !cat.is_income);
+    const expenseCategories = categories.filter(cat => !cat.is_income);
 
-    const idx = expenseCategories.findIndex(
+    const idx = expenseCategories.findIndex(cat => editingCategory === cat.id);
-      (cat) => editingCategory === cat.id
-    );
     if (idx - 1 >= 0) {
       this.onEditCategory(expenseCategories[idx - 1].id);
     }
@@ -862,11 +866,9 @@ export class BudgetTable extends React.Component {
   onMoveDown = () => {
     const { categories } = this.props;
     const { editingCategory } = this.state;
-    const expenseCategories = categories.filter((cat) => !cat.is_income);
+    const expenseCategories = categories.filter(cat => !cat.is_income);
 
-    const idx = expenseCategories.findIndex(
+    const idx = expenseCategories.findIndex(cat => editingCategory === cat.id);
-      (cat) => editingCategory === cat.id
-    );
     if (idx + 1 < expenseCategories.length) {
       this.onEditCategory(expenseCategories[idx + 1].id);
     }
@@ -937,7 +939,7 @@ export class BudgetTable extends React.Component {
                   styles.smallText,
                   { color: colors.n1, textAlign: 'right', fontWeight: '500' }
                 ]}
-                formatter={(value) => {
+                formatter={value => {
                   return format(-parseFloat(value || '0'), 'financial');
                 }}
               />
@@ -958,7 +960,7 @@ export class BudgetTable extends React.Component {
           <AndroidKeyboardAvoidingView includeStatusBar={true}>
             {!editMode ? (
               <ScrollView
-                ref={(el) => (this.list = el)}
+                ref={el => (this.list = el)}
                 keyboardShouldPersistTaps="always"
                 refreshControl={refreshControl}
                 style={{ backgroundColor: colors.n10 }}
@@ -993,7 +995,7 @@ export class BudgetTable extends React.Component {
                     ref={this.gestures.scroll}
                   >
                     <Animated.ScrollView
-                      ref={(el) => {
+                      ref={el => {
                         scrollRef.current = el;
                         this.list = el;
                       }}

packages/loot-design/src/components/mobile/budget.test.js

@@ -178,7 +178,7 @@ describe('Budget', () => {
     expectToBeEditingRow(container, 1);
 
     // It should never go past the last expense category
-    let lastCat = categories.findIndex((c) => c.is_income) - 1;
+    let lastCat = categories.findIndex(c => c.is_income) - 1;
     editRow(container, lastCat);
     expectToBeEditingRow(container, lastCat);
     fireEvent.press(getButton(container, 'down'));
@@ -247,7 +247,7 @@ describe('Budget', () => {
     fireEvent.press(getButton(container, 'done'));
     expectToNotBeEditing(container);
 
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    await new Promise(resolve => setTimeout(resolve, 100));
     expect(getField(container, 1, 'budgeted').textContent).toBe('22.00');
   });
 });

packages/loot-design/src/components/mobile/dragdrop.js

@@ -173,7 +173,7 @@ export function DragDrop({ makeHighlight, children, style }) {
             A.set(ax, absoluteX),
             A.set(ay, absoluteY),
 
-           A.call([ax, ay], onDragMove),
+            A.call([ax, ay], onDragMove)
           ])
         ])
     }

packages/loot-design/src/components/mobile/transaction.js

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
+import { View, Text, SectionList, ScrollView, Animated } from 'react-native';
-  View,
-  Text,
-  SectionList,
-  ScrollView,
-  Animated
-} from 'react-native';
 import memoizeOne from 'memoize-one';
 import {
   format as formatDate,

packages/loot-design/src/components/modals/CloseAccount.js

@@ -1,14 +1,6 @@
 import React, { useState } from 'react';
 import { Formik } from 'formik';
-import {
+import { View, Text, Modal, Button, P, Select, FormError } from '../common';
-  View,
-  Text,
-  Modal,
-  Button,
-  P,
-  Select,
-  FormError,
-} from '../common';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { colors } from '../../style';
 

packages/loot-design/src/components/modals/PlaidExternalMsg.js

@@ -1,12 +1,5 @@
 import React, { useState, useRef } from 'react';
-import {
+import { View, Text, Modal, Button, P, ModalButtons } from '../common';
-  View,
-  Text,
-  Modal,
-  Button,
-  P,
-  ModalButtons
-} from '../common';
 import { Error } from '../alerts';
 import { colors } from '../../style';
 import AnimatedLoading from '../../svg/v1/AnimatedLoading';

packages/loot-design/src/components/payees.usage.js

@@ -95,7 +95,12 @@ export default () => (
                     onClose: () => setState({ isCurrent: true })
                   }}
                   payees={state.payees}
-                  ruleCounts={new Map([['three', 1], ['tw', 3]])}
+                  ruleCounts={
+                    new Map([
+                      ['three', 1],
+                      ['tw', 3]
+                    ])
+                  }
                   categoryGroups={categoryGroups}
                   onBatchChange={changes => {
                     setState({ payees: applyChanges(changes, state.payees) });

packages/loot-design/src/components/spreadsheet/CellDebugger.js

@@ -34,9 +34,7 @@ class CellDebugger extends Component {
   render() {
     return (
       <tr>
-        <td>
+        <td>{this.props.name}: </td>
-          {this.props.name}:{' '}
-        </td>
         <td>
           <input
             type="text"

packages/loot-design/src/components/spreadsheet/SheetValue.js

@@ -47,8 +47,7 @@ export default function SheetValue({
     latestValue.current = result.value;
   });
 
-  useLayoutEffect(
+  useLayoutEffect(() => {
-    () => {
     if (binding.query) {
       spreadsheet.createQuery(sheetName, binding.name, binding.query);
     }
@@ -62,9 +61,7 @@ export default function SheetValue({
         setResult(newResult);
       }
     });
-    },
+  }, [sheetName, binding.name]);
-    [sheetName, binding.name]
-  );
 
   return result.value != null ? children(result, setCell) : null;
 }

packages/loot-design/src/components/spreadsheet/useSheetValue.js

@@ -51,8 +51,7 @@ export default function useSheetValue(binding, onChange) {
     latestValue.current = result.value;
   });
 
-  useLayoutEffect(
+  useLayoutEffect(() => {
-    () => {
     if (binding.query) {
       spreadsheet.createQuery(sheetName, binding.name, binding.query);
     }
@@ -66,9 +65,7 @@ export default function useSheetValue(binding, onChange) {
         setResult(newResult);
       }
     });
-    },
+  }, [sheetName, binding.name]);
-    [sheetName, binding.name]
-  );
 
   return result.value;
 }

packages/loot-design/src/components/table.js

@@ -31,10 +31,7 @@ import SheetValue from './spreadsheet/SheetValue';
 import DateSelect from './DateSelect';
 import format from './spreadsheet/format';
 import { keys } from '../util/keys';
-import {
+import { AvoidRefocusScrollProvider, useProperFocus } from './useProperFocus';
-  AvoidRefocusScrollProvider,
-  useProperFocus,
-} from './useProperFocus';
 import { useSelectedItems } from './useSelected';
 
 export const ROW_HEIGHT = 32;
@@ -250,8 +247,7 @@ export function Row({
   let rowRef = useRef(null);
   let timer = useRef(null);
 
-  useEffect(
+  useEffect(() => {
-    () => {
     if (highlighted && !prevHighlighted.current && rowRef.current) {
       rowRef.current.classList.add('animated');
       setShouldHighlight(true);
@@ -267,9 +263,7 @@ export function Row({
         }, 500);
       }, 500);
     }
-    },
+  }, [highlighted]);
-    [highlighted]
-  );
 
   useEffect(() => {
     prevHighlighted.current = highlighted;

packages/loot-design/src/components/tooltips.js

@@ -189,7 +189,8 @@ export class Tooltip extends React.Component {
         // If it doesn't fit below it, switch it above only if it does
         // fit above it
         (this.position.indexOf('bottom') !== -1 &&
-          (testBottom > containerRect.height && testTop > 0))
+          testBottom > containerRect.height &&
+          testTop > 0)
       ) {
         // Invert the position
         this.position = this.getOppositePosition(this.position);

packages/loot-design/src/parse-figma-theme.js

@@ -1,7 +1,7 @@
 let fs = require('fs');
 
 let contents = fs.readFileSync(process.argv[2], 'utf8');
-let list = contents.match(/(\#[0-9a-fA-F]*)/g);
+let list = contents.match(/(#[0-9a-fA-F]*)/g);
 
 let groups = ['y', 'r', 'b', 'n', 'g', 'p'];
 let colors = {};

packages/loot-design/src/setupTests.js

@@ -53,7 +53,7 @@ process.on('unhandledRejection', reason => {
 });
 
 global.afterEach(() => {
-  __resetWorld();
+  global.__resetWorld();
 });
 
 // https://github.com/testing-library/react-testing-library#suppressing-unnecessary-warnings-on-react-dom-168

packages/loot-design/src/svg/Add.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Add({ width, height, style, color = "black", ...props }) {
+function Add({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}
@@ -34,13 +34,11 @@ function Add({ width, height, style, color = "black", ...props }) {
       <Path
         fill={color}
         className="path"
-        className="path"
         d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z"
       />
       <Path
         fill={color}
         className="path"
-        className="path"
         d="M11.5,23 C10.6715729,23 10,22.3284271 10,21.5 L10,1.5 C10,0.671572875 10.6715729,1.52179594e-16 11.5,0 C12.3284271,-1.52179594e-16 13,0.671572875 13,1.5 L13,21.5 C13,22.3284271 12.3284271,23 11.5,23 Z"
       />
     </Svg>

packages/loot-design/src/svg/Add.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Add({ width, height, style, color = "black", ...props }) {
+function Add({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}
@@ -16,13 +16,11 @@ function Add({ width, height, style, color = "black", ...props }) {
       <path
         fill={color}
         className="path"
-        className="path"
         d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z"
       />
       <path
         fill={color}
         className="path"
-        className="path"
         d="M11.5,23 C10.6715729,23 10,22.3284271 10,21.5 L10,1.5 C10,0.671572875 10.6715729,1.52179594e-16 11.5,0 C12.3284271,-1.52179594e-16 13,0.671572875 13,1.5 L13,21.5 C13,22.3284271 12.3284271,23 11.5,23 Z"
       />
     </svg>

packages/loot-design/src/svg/Bank.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Bank({ width, height, style, color = "black", ...props }) {
+function Bank({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Bank.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Bank({ width, height, style, color = "black", ...props }) {
+function Bank({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Budget.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Budget({ width, height, style, color = "black", ...props }) {
+function Budget({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Budget.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Budget({ width, height, style, color = "black", ...props }) {
+function Budget({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Check.mobile.js

@@ -1 +1,2 @@
-null
+// eslint-disable-next-line no-unused-expressions
+null;

packages/loot-design/src/svg/Check.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Check({ width, height, style, color = "black", ...props }) {
+function Check({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Delete.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Delete({ width, height, style, color = "black", ...props }) {
+function Delete({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Delete.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Delete({ width, height, style, color = "currentColor", ...props }) {
+function Delete({ width, height, style, color = 'currentColor', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/DownArrow.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function DownArrow({ width, height, style, color = "black", ...props }) {
+function DownArrow({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/DownArrow.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function DownArrow({ width, height, style, color = "black", ...props }) {
+function DownArrow({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/DragIOS.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function DragIos({ width, height, style, color = "black", ...props }) {
+function DragIos({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/DragIOS.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function DragIos({ width, height, style, color = "black", ...props }) {
+function DragIos({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/ExpandArrow.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function ExpandArrow({ width, height, style, color = "black", ...props }) {
+function ExpandArrow({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/ExpandArrow.web.js

@@ -1,8 +1,14 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function ExpandArrow({ width, height, style, color = "currentColor", ...props }) {
+function ExpandArrow({
+  width,
+  height,
+  style,
+  color = 'currentColor',
+  ...props
+}) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/LeftArrow.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function LeftArrow({ width, height, style, color = "black", ...props }) {
+function LeftArrow({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}
@@ -35,7 +35,6 @@ function LeftArrow({ width, height, style, color = "black", ...props }) {
         className="path"
         fill="none"
         stroke={color}
-        className="path"
         strokeWidth="4"
         strokeLinecap="round"
         strokeLinejoin="round"

packages/loot-design/src/svg/LeftArrow.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function LeftArrow({ width, height, style, color = "black", ...props }) {
+function LeftArrow({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}
@@ -17,7 +17,6 @@ function LeftArrow({ width, height, style, color = "black", ...props }) {
         className="path"
         fill="none"
         stroke={color}
-        className="path"
         strokeWidth="4"
         strokeLinecap="round"
         strokeLinejoin="round"

packages/loot-design/src/svg/LeftArrow2.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function LeftArrow2({ width, height, style, color = "black", ...props }) {
+function LeftArrow2({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/LeftArrow2.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function LeftArrow2({ width, height, style, color = "black", ...props }) {
+function LeftArrow2({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/LeftArrow3.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function LeftArrow3({ width, height, style, color = "black", ...props }) {
+function LeftArrow3({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/LeftArrow3.web.js

@@ -1,10 +1,10 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
 let x = <div />;
 
-function LeftArrow3({ width, height, style, color = "black", ...props }) {
+function LeftArrow3({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Loading.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Loading({ width, height, style, color = "black", ...props }) {
+function Loading({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Loading.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Loading({ width, height, style, color = "black", ...props }) {
+function Loading({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Logo.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Logo({ width, height, style, color = "black", ...props }) {
+function Logo({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Logo.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Logo({ width, height, style, color = "black", ...props }) {
+function Logo({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Math.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Math({ width, height, style, color = "black", ...props }) {
+function Math({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Math.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Math({ width, height, style, color = "black", ...props }) {
+function Math({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Pencil.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Pencil({ width, height, style, color = "black", ...props }) {
+function Pencil({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}
@@ -34,7 +34,6 @@ function Pencil({ width, height, style, color = "black", ...props }) {
       <Path
         className="path"
         fill={color}
-        className="path"
         d="M14.396342,5.02634944 C13.7681487,4.39744238 12.7495316,4.39744238 12.1214275,5.02634944 L11.5527435,5.59565799 L3.59054275,13.5662454 L3.5925948,13.5682974 L3.34171004,13.8198959 C3.34171004,13.8198959 2.54159108,14.6257249 0.735078067,20.4577249 C0.722408922,20.4984981 0.709828996,20.5390037 0.697070632,20.5803123 C0.664862454,20.6847881 0.632297398,20.7909591 0.599464684,20.8985576 C0.570379182,20.9936654 0.540936803,21.0907361 0.511405204,21.1884312 C0.486513011,21.2707807 0.461799257,21.3522379 0.436550186,21.4363717 C0.379271375,21.6273011 0.32127881,21.8216208 0.262126394,22.0222751 C0.132312268,22.4627509 -0.184773234,23.4560297 0.173799257,23.8155836 C0.519078067,24.1619331 1.52279554,23.8572491 1.9620223,23.7269888 C2.16115985,23.6679257 2.35414126,23.6100223 2.54364312,23.5528327 C2.63116729,23.5264238 2.71601487,23.5005502 2.80157621,23.4744981 C2.89356134,23.4464833 2.98510037,23.4186468 3.0747658,23.3910781 C3.18798513,23.3562825 3.29959851,23.3219331 3.40933829,23.2878513 C3.44208178,23.2776803 3.47420074,23.2675985 3.50667658,23.2575167 C9.0554052,21.5297844 10.051539,20.7189591 10.1343346,20.6448178 C10.1349591,20.6443717 10.1349591,20.6443717 10.1354052,20.6439257 C10.1388848,20.6407138 10.1412937,20.6385725 10.1412937,20.6385725 L10.3981561,20.3810855 L10.4153755,20.3983048 L18.3777546,12.4277175 L18.3776654,12.4276283 L18.9463494,11.8583197 C19.5745428,11.2295019 19.5745428,10.2099033 18.9463494,9.58099628 L14.396342,5.02634944 Z M9.22518959,19.608803 C9.21823048,19.6135316 9.20877323,19.6196877 9.19878067,19.6260223 C9.19324907,19.6295911 9.18655762,19.6337844 9.17995539,19.6378885 C9.17326394,19.6420818 9.16594796,19.646632 9.15818587,19.6513606 C9.15131599,19.6555539 9.14417844,19.6598364 9.13650558,19.6644758 C8.87161338,19.8230186 8.09424535,20.2320892 6.20761338,20.9150632 C5.98715242,20.9948253 5.7470632,21.0794052 5.4955539,21.1665725 L2.81362082,18.4818736 C2.90105576,18.2284907 2.98572491,17.9866171 3.06575465,17.764461 C3.7472119,15.8698885 4.15592565,15.0902007 4.31357621,14.8256654 C4.31741264,14.8193309 4.32089219,14.8135316 4.32437175,14.8078216 C4.32990335,14.7987212 4.33507807,14.7902454 4.33989591,14.7824833 C4.34373234,14.7763271 4.34774721,14.7699033 4.35113755,14.7646394 C4.35747212,14.7547361 4.36362825,14.7452788 4.36835688,14.7382305 L4.56463941,14.5414126 L9.42575465,19.4076134 L9.22518959,19.608803 Z M23.496,5.02634944 L18.9460818,0.471702602 C18.3178885,-0.157115242 17.2994498,-0.157115242 16.6711673,0.471702602 L15.5337993,1.61040892 C14.9056059,2.23922677 14.9056059,3.25882528 15.5337993,3.88764312 L20.0836283,8.44228996 C20.7117323,9.07110781 21.7303494,9.07110781 22.3585428,8.44228996 L23.496,7.30367286 C24.1241933,6.6747658 24.1241933,5.65516729 23.496,5.02634944 Z"
       />
     </Svg>

packages/loot-design/src/svg/Pencil.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Pencil({ width, height, style, color = "black", ...props }) {
+function Pencil({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}
@@ -16,7 +16,6 @@ function Pencil({ width, height, style, color = "black", ...props }) {
       <path
         className="path"
         fill={color}
-        className="path"
         d="M14.396342,5.02634944 C13.7681487,4.39744238 12.7495316,4.39744238 12.1214275,5.02634944 L11.5527435,5.59565799 L3.59054275,13.5662454 L3.5925948,13.5682974 L3.34171004,13.8198959 C3.34171004,13.8198959 2.54159108,14.6257249 0.735078067,20.4577249 C0.722408922,20.4984981 0.709828996,20.5390037 0.697070632,20.5803123 C0.664862454,20.6847881 0.632297398,20.7909591 0.599464684,20.8985576 C0.570379182,20.9936654 0.540936803,21.0907361 0.511405204,21.1884312 C0.486513011,21.2707807 0.461799257,21.3522379 0.436550186,21.4363717 C0.379271375,21.6273011 0.32127881,21.8216208 0.262126394,22.0222751 C0.132312268,22.4627509 -0.184773234,23.4560297 0.173799257,23.8155836 C0.519078067,24.1619331 1.52279554,23.8572491 1.9620223,23.7269888 C2.16115985,23.6679257 2.35414126,23.6100223 2.54364312,23.5528327 C2.63116729,23.5264238 2.71601487,23.5005502 2.80157621,23.4744981 C2.89356134,23.4464833 2.98510037,23.4186468 3.0747658,23.3910781 C3.18798513,23.3562825 3.29959851,23.3219331 3.40933829,23.2878513 C3.44208178,23.2776803 3.47420074,23.2675985 3.50667658,23.2575167 C9.0554052,21.5297844 10.051539,20.7189591 10.1343346,20.6448178 C10.1349591,20.6443717 10.1349591,20.6443717 10.1354052,20.6439257 C10.1388848,20.6407138 10.1412937,20.6385725 10.1412937,20.6385725 L10.3981561,20.3810855 L10.4153755,20.3983048 L18.3777546,12.4277175 L18.3776654,12.4276283 L18.9463494,11.8583197 C19.5745428,11.2295019 19.5745428,10.2099033 18.9463494,9.58099628 L14.396342,5.02634944 Z M9.22518959,19.608803 C9.21823048,19.6135316 9.20877323,19.6196877 9.19878067,19.6260223 C9.19324907,19.6295911 9.18655762,19.6337844 9.17995539,19.6378885 C9.17326394,19.6420818 9.16594796,19.646632 9.15818587,19.6513606 C9.15131599,19.6555539 9.14417844,19.6598364 9.13650558,19.6644758 C8.87161338,19.8230186 8.09424535,20.2320892 6.20761338,20.9150632 C5.98715242,20.9948253 5.7470632,21.0794052 5.4955539,21.1665725 L2.81362082,18.4818736 C2.90105576,18.2284907 2.98572491,17.9866171 3.06575465,17.764461 C3.7472119,15.8698885 4.15592565,15.0902007 4.31357621,14.8256654 C4.31741264,14.8193309 4.32089219,14.8135316 4.32437175,14.8078216 C4.32990335,14.7987212 4.33507807,14.7902454 4.33989591,14.7824833 C4.34373234,14.7763271 4.34774721,14.7699033 4.35113755,14.7646394 C4.35747212,14.7547361 4.36362825,14.7452788 4.36835688,14.7382305 L4.56463941,14.5414126 L9.42575465,19.4076134 L9.22518959,19.608803 Z M23.496,5.02634944 L18.9460818,0.471702602 C18.3178885,-0.157115242 17.2994498,-0.157115242 16.6711673,0.471702602 L15.5337993,1.61040892 C14.9056059,2.23922677 14.9056059,3.25882528 15.5337993,3.88764312 L20.0836283,8.44228996 C20.7117323,9.07110781 21.7303494,9.07110781 22.3585428,8.44228996 L23.496,7.30367286 C24.1241933,6.6747658 24.1241933,5.65516729 23.496,5.02634944 Z"
       />
     </svg>

packages/loot-design/src/svg/Reports.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Reports({ width, height, style, color = "black", ...props }) {
+function Reports({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Reports.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Reports({ width, height, style, color = "black", ...props }) {
+function Reports({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/RightArrow.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function RightArrow({ width, height, style, color = "black", ...props }) {
+function RightArrow({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}
@@ -35,7 +35,6 @@ function RightArrow({ width, height, style, color = "black", ...props }) {
         className="path"
         fill="none"
         stroke={color}
-        className="path"
         strokeWidth="4"
         strokeLinecap="round"
         strokeLinejoin="round"

packages/loot-design/src/svg/RightArrow.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function RightArrow({ width, height, style, color = "black", ...props }) {
+function RightArrow({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}
@@ -17,7 +17,6 @@ function RightArrow({ width, height, style, color = "black", ...props }) {
         className="path"
         fill="none"
         stroke={color}
-        className="path"
         strokeWidth="4"
         strokeLinecap="round"
         strokeLinejoin="round"

packages/loot-design/src/svg/RightArrow2.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function RightArrow2({ width, height, style, color = "black", ...props }) {
+function RightArrow2({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/RightArrow2.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function RightArrow2({ width, height, style, color = "black", ...props }) {
+function RightArrow2({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Search.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Search({ width, height, style, color = "black", ...props }) {
+function Search({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Search.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Search({ width, height, style, color = "black", ...props }) {
+function Search({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Settings.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Settings({ width, height, style, color = "black", ...props }) {
+function Settings({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Settings.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Settings({ width, height, style, color = "black", ...props }) {
+function Settings({ width, height, style, color = 'black', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/Subtract.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Add({ width, height, style, color = "black", ...props }) {
+function Add({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/Subtract.web.js

@@ -16,7 +16,6 @@ function Subtract({ width, height, style, color = 'black', ...props }) {
       <path
         fill={color}
         className="path"
-        className="path"
         d="M23,11.5 L23,11.5 L23,11.5 C23,12.3284271 22.3284271,13 21.5,13 L1.5,13 L1.5,13 C0.671572875,13 1.01453063e-16,12.3284271 0,11.5 L0,11.5 L0,11.5 C-1.01453063e-16,10.6715729 0.671572875,10 1.5,10 L21.5,10 L21.5,10 C22.3284271,10 23,10.6715729 23,11.5 Z"
       />
     </svg>

packages/loot-design/src/svg/logo/Logo.ios.js

@@ -1,5 +1,5 @@
-import React from "react";
+import React from 'react';
-import Svg, { Path } from "react-native-svg";
+import Svg, { Path } from 'react-native-svg';
 
 const SvgLogo = props => (
   <Svg
@@ -8,7 +8,7 @@ const SvgLogo = props => (
     height={32}
     fill="none"
     style={{
-      color: "#242134",
+      color: '#242134',
       ...props.style
     }}
   >

packages/loot-design/src/svg/merge.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Merge({ width, height, style, color = "black", ...props }) {
+function Merge({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/merge.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Merge({ width, height, style, color = "currentColor", ...props }) {
+function Merge({ width, height, style, color = 'currentColor', ...props }) {
   return (
     <svg
       width={width}

packages/loot-design/src/svg/split.mobile.js

@@ -1,5 +1,5 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
 
 import {
   Svg,
@@ -18,9 +18,9 @@ import {
   Use,
   Defs,
   Stop
-} from "mobile/node_modules/react-native-svg";
+} from 'mobile/node_modules/react-native-svg';
 
-function Split({ width, height, style, color = "black", ...props }) {
+function Split({ width, height, style, color = 'black', ...props }) {
   return (
     <Svg
       width={width}

packages/loot-design/src/svg/split.web.js

@@ -1,8 +1,8 @@
 /* This file is auto-generated, do not touch! Please edit the SVG file instead. */
-import React from "react";
+import React from 'react';
-import { css } from "glamor";
+import { css } from 'glamor';
 
-function Split({ width, height, style, color = "currentColor", ...props }) {
+function Split({ width, height, style, color = 'currentColor', ...props }) {
   return (
     <svg
       width={width}

yarn.lock

@@ -14622,6 +14622,8 @@ jest-snapshot@test:
     chroma-js: ^1.3.3
     date-fns: 2.0.0-alpha.27
     downshift: 1.31.16
+    eslint: 5.6.0
+    eslint-plugin-prettier: ^3.1.4
     fast-glob: ^2.2.2
     formik: ^0.11.10
     glamor: ^2.20.40