Enforce linting in loot-design (#233)

* build: add linter to loot-design package * style: automated fixes * style: manual linter fixes
2022-09-01 12:47:34 +01:00 · 2022-09-01 12:47:34 +01:00 · 4c0bd80f24
commit 4c0bd80f24
parent 01d0eb2f0a
72 changed files with 259 additions and 293 deletions
--- a/packages/loot-design/package.json
+++ b/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"
-  }
+  ]
 }
--- a/packages/loot-design/src/components/PayeeAutocomplete.js
+++ b/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: '' },
--- a/packages/loot-design/src/components/View.mobile.js
+++ b/packages/loot-design/src/components/View.mobile.js
@ -1,3 +1,3 @@
 import { View } from 'react-native';

-export default View
+export default View;
--- a/packages/loot-design/src/components/budget/report/components.js
+++ b/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
--- a/packages/loot-design/src/components/common.js
+++ b/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';
--- a/packages/loot-design/src/components/hooks.js
+++ b/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);
--- a/packages/loot-design/src/components/manager/ImportYNAB4.js
+++ b/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 {
-  View,
-  Block,
-  Modal,
-  Button,
-  ButtonWithLoading,
-  P
-} from '../common';
+import { 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
-              the folder and select "Compress". On Windows, right-click and
-              select "Send to > Compressed (zipped) folder". Upload the zipped
-              folder for importing.
+              <strong>compress it into a zip file</strong>. On macOS,
+              right-click the folder and select "Compress". On Windows,
+              right-click and select "Send to > Compressed (zipped) folder".
+              Upload the zipped folder for importing.
            </P>
            <View>
              <ButtonWithLoading loading={importing} primary onClick={onImport}>
--- a/packages/loot-design/src/components/mobile/ScalableImage.js
+++ b/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
      ]}
--- a/packages/loot-design/src/components/mobile/account.js
+++ b/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' }}>
--- a/packages/loot-design/src/components/mobile/budget.js
+++ b/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 } =
-      this.props;
+    const {
+      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),
-      expenseGroups: groups.filter((group) => !group.is_income)
+      incomeGroup: groups.find(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(
-      (cat) => editingCategory === cat.id
-    );
+    const idx = expenseCategories.findIndex(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(
-      (cat) => editingCategory === cat.id
-    );
+    const idx = expenseCategories.findIndex(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;
                      }}
--- a/packages/loot-design/src/components/mobile/budget.test.js
+++ b/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');
  });
 });
--- a/packages/loot-design/src/components/mobile/dragdrop.js
+++ b/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)
          ])
        ])
    }
--- a/packages/loot-design/src/components/mobile/transaction.js
+++ b/packages/loot-design/src/components/mobile/transaction.js
@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  View,
-  Text,
-  SectionList,
-  ScrollView,
-  Animated
-} from 'react-native';
+import { View, Text, SectionList, ScrollView, Animated } from 'react-native';
 import memoizeOne from 'memoize-one';
 import {
  format as formatDate,
--- a/packages/loot-design/src/components/modals/CloseAccount.js
+++ b/packages/loot-design/src/components/modals/CloseAccount.js
@ -1,14 +1,6 @@
 import React, { useState } from 'react';
 import { Formik } from 'formik';
-import {
-  View,
-  Text,
-  Modal,
-  Button,
-  P,
-  Select,
-  FormError,
-} from '../common';
+import { View, Text, Modal, Button, P, Select, FormError } from '../common';
 import { integerToCurrency } from 'loot-core/src/shared/util';
 import { colors } from '../../style';

--- a/packages/loot-design/src/components/modals/PlaidExternalMsg.js
+++ b/packages/loot-design/src/components/modals/PlaidExternalMsg.js
@ -1,12 +1,5 @@
 import React, { useState, useRef } from 'react';
-import {
-  View,
-  Text,
-  Modal,
-  Button,
-  P,
-  ModalButtons
-} from '../common';
+import { View, Text, Modal, Button, P, ModalButtons } from '../common';
 import { Error } from '../alerts';
 import { colors } from '../../style';
 import AnimatedLoading from '../../svg/v1/AnimatedLoading';
--- a/packages/loot-design/src/components/payees.usage.js
+++ b/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) });
--- a/packages/loot-design/src/components/spreadsheet/CellDebugger.js
+++ b/packages/loot-design/src/components/spreadsheet/CellDebugger.js
@ -34,9 +34,7 @@ class CellDebugger extends Component {
  render() {
    return (
      <tr>
-        <td>
-          {this.props.name}:{' '}
-        </td>
+        <td>{this.props.name}: </td>
        <td>
          <input
            type="text"
--- a/packages/loot-design/src/components/spreadsheet/SheetValue.js
+++ b/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;
 }
--- a/packages/loot-design/src/components/spreadsheet/useSheetValue.js
+++ b/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;
 }
--- a/packages/loot-design/src/components/table.js
+++ b/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 {
-  AvoidRefocusScrollProvider,
-  useProperFocus,
-} from './useProperFocus';
+import { 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;
--- a/packages/loot-design/src/components/tooltips.js
+++ b/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);
--- a/packages/loot-design/src/parse-figma-theme.js
+++ b/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 = {};
--- a/packages/loot-design/src/setupTests.js
+++ b/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
--- a/packages/loot-design/src/svg/Add.mobile.js
+++ b/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>
--- a/packages/loot-design/src/svg/Add.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+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>
--- a/packages/loot-design/src/svg/Bank.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Bank.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Bank({ width, height, style, color = "black", ...props }) {
+function Bank({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Budget.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Budget.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Budget({ width, height, style, color = "black", ...props }) {
+function Budget({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Check.mobile.js
+++ b/packages/loot-design/src/svg/Check.mobile.js
@ -1 +1,2 @@
-null
+// eslint-disable-next-line no-unused-expressions
+null;
--- a/packages/loot-design/src/svg/Check.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Check({ width, height, style, color = "black", ...props }) {
+function Check({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Delete.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Delete.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Delete({ width, height, style, color = "currentColor", ...props }) {
+function Delete({ width, height, style, color = 'currentColor', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/DownArrow.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/DownArrow.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function DownArrow({ width, height, style, color = "black", ...props }) {
+function DownArrow({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/DragIOS.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/DragIOS.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function DragIos({ width, height, style, color = "black", ...props }) {
+function DragIos({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/ExpandArrow.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/ExpandArrow.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function ExpandArrow({ width, height, style, color = "currentColor", ...props }) {
+function ExpandArrow({
+  width,
+  height,
+  style,
+  color = 'currentColor',
+  ...props
+}) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/LeftArrow.mobile.js
+++ b/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"
--- a/packages/loot-design/src/svg/LeftArrow.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+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"
--- a/packages/loot-design/src/svg/LeftArrow2.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/LeftArrow2.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function LeftArrow2({ width, height, style, color = "black", ...props }) {
+function LeftArrow2({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/LeftArrow3.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/LeftArrow3.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+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}
--- a/packages/loot-design/src/svg/Loading.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Loading.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Loading({ width, height, style, color = "black", ...props }) {
+function Loading({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Logo.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Logo.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Logo({ width, height, style, color = "black", ...props }) {
+function Logo({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Math.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Math.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Math({ width, height, style, color = "black", ...props }) {
+function Math({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Pencil.mobile.js
+++ b/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>
--- a/packages/loot-design/src/svg/Pencil.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+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>
--- a/packages/loot-design/src/svg/Reports.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Reports.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Reports({ width, height, style, color = "black", ...props }) {
+function Reports({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/RightArrow.mobile.js
+++ b/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"
--- a/packages/loot-design/src/svg/RightArrow.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+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"
--- a/packages/loot-design/src/svg/RightArrow2.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/RightArrow2.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function RightArrow2({ width, height, style, color = "black", ...props }) {
+function RightArrow2({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Search.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Search.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Search({ width, height, style, color = "black", ...props }) {
+function Search({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Settings.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Settings.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Settings({ width, height, style, color = "black", ...props }) {
+function Settings({ width, height, style, color = 'black', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/Subtract.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/Subtract.web.js
+++ b/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>
--- a/packages/loot-design/src/svg/logo/Logo.ios.js
+++ b/packages/loot-design/src/svg/logo/Logo.ios.js
@ -1,5 +1,5 @@
-import React from "react";
-import Svg, { Path } from "react-native-svg";
+import React from 'react';
+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
    }}
  >
--- a/packages/loot-design/src/svg/merge.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/merge.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Merge({ width, height, style, color = "currentColor", ...props }) {
+function Merge({ width, height, style, color = 'currentColor', ...props }) {
  return (
    <svg
      width={width}
--- a/packages/loot-design/src/svg/split.mobile.js
+++ b/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}
--- a/packages/loot-design/src/svg/split.web.js
+++ b/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 { css } from "glamor";
+import React from 'react';
+import { css } from 'glamor';

-function Split({ width, height, style, color = "currentColor", ...props }) {
+function Split({ width, height, style, color = 'currentColor', ...props }) {
  return (
    <svg
      width={width}
--- a/yarn.lock
+++ b/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