From ab06f8264469c32a2e927b7a8ca18c8641f9ad47 Mon Sep 17 00:00:00 2001
From: Tanya Dolgopolova <tetiana.dolgopolova@gmail.com>
Date: Fri, 30 Oct 2020 18:11:09 +0200
Subject: [PATCH 1/2] feat(Settings): added settings layout comp Fixed design
 on general settings

---
 src/components/Sidebar.tsx                    |   2 +-
 src/modules/settings/LayoutSettings.tsx       |   6 -
 src/modules/settings/Settings.tsx             |  15 +-
 .../{ => components}/DiscountSettings.tsx     |   0
 .../{ => components}/GenericSettings.tsx      | 129 +++++++++---
 .../settings/components/LayoutSettings.tsx    | 191 ++++++++++++++++++
 .../PaymentMethodSettings.tsx                 |   2 +-
 .../{ => components}/ShippingSettings.tsx     |   0
 8 files changed, 302 insertions(+), 43 deletions(-)
 delete mode 100644 src/modules/settings/LayoutSettings.tsx
 rename src/modules/settings/{ => components}/DiscountSettings.tsx (100%)
 rename src/modules/settings/{ => components}/GenericSettings.tsx (58%)
 create mode 100644 src/modules/settings/components/LayoutSettings.tsx
 rename src/modules/settings/{ => components}/PaymentMethodSettings.tsx (96%)
 rename src/modules/settings/{ => components}/ShippingSettings.tsx (100%)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 96d7dd3..ea7a0f2 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -39,7 +39,7 @@ const Sidebar: React.FC = () => {
         <NavLink to="/page">
           <icons.ListIcon /> Sider
         </NavLink>
-        <NavLink to="/settings">
+        <NavLink to="/settings/generic">
           <icons.SettingsIcon /> Innstillinger
         </NavLink>
         <NavLink to="/support">
diff --git a/src/modules/settings/LayoutSettings.tsx b/src/modules/settings/LayoutSettings.tsx
deleted file mode 100644
index bacdb1a..0000000
--- a/src/modules/settings/LayoutSettings.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import TabetaltLayout from '../../components/Layout';
-
-const Layout: React.FC = () => <TabetaltLayout>Layout</TabetaltLayout>;
-
-export default Layout;
diff --git a/src/modules/settings/Settings.tsx b/src/modules/settings/Settings.tsx
index 2ea0a43..9aa2595 100644
--- a/src/modules/settings/Settings.tsx
+++ b/src/modules/settings/Settings.tsx
@@ -3,10 +3,11 @@ import { PartialRouteObject } from 'react-router';
 import { NavLink, useRoutes } from 'react-router-dom';
 import { Box } from 'theme-ui';
 import Layout from '../../components/Layout';
-import ShippingSettings from './ShippingSettings';
-import GenericSettings from './GenericSettings';
-import DiscountSettings from './DiscountSettings';
-import PaymentMethodSettings from './PaymentMethodSettings';
+import ShippingSettings from './components/ShippingSettings';
+import GenericSettings from './components/GenericSettings';
+import DiscountSettings from './components/DiscountSettings';
+import PaymentMethodSettings from './components/PaymentMethodSettings';
+import LayoutSettings from './components/LayoutSettings';
 
 const Settings: React.FC = () => {
   const routes = useRoutes([
@@ -14,6 +15,7 @@ const Settings: React.FC = () => {
     // https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#use-useroutes-instead-of-react-router-config
     /* { path: '/', redirectTo: 'shipping' }, */
     { path: 'shipping', element: <ShippingSettings /> },
+    { path: 'layout', element: <LayoutSettings /> },
     { path: 'generic', element: <GenericSettings /> },
     { path: 'discount', element: <DiscountSettings /> },
     { path: 'payment-method', element: <PaymentMethodSettings /> },
@@ -35,9 +37,10 @@ const Settings: React.FC = () => {
             },
           }}
         >
-          <NavLink to="shipping">Leveringsmetoder</NavLink>
-          <NavLink to="generic">Butikkinformasjon</NavLink>
+          <NavLink to="generic">Generelt</NavLink>
+          <NavLink to="layout">Utseende</NavLink>
           <NavLink to="discount">Rabatter</NavLink>
+          <NavLink to="shipping">Leveringsmetoder</NavLink>
           <NavLink to="payment-method">Betalingsmetoder</NavLink>
         </Box>
         {routes}
diff --git a/src/modules/settings/DiscountSettings.tsx b/src/modules/settings/components/DiscountSettings.tsx
similarity index 100%
rename from src/modules/settings/DiscountSettings.tsx
rename to src/modules/settings/components/DiscountSettings.tsx
diff --git a/src/modules/settings/GenericSettings.tsx b/src/modules/settings/components/GenericSettings.tsx
similarity index 58%
rename from src/modules/settings/GenericSettings.tsx
rename to src/modules/settings/components/GenericSettings.tsx
index 1d9daa5..288476d 100644
--- a/src/modules/settings/GenericSettings.tsx
+++ b/src/modules/settings/components/GenericSettings.tsx
@@ -1,4 +1,5 @@
-import { Field } from '@tabetalt/kit';
+import { Field, LabeledSelect, PrefilledInput } from '@tabetalt/kit';
+import { TextPosition } from '@tabetalt/kit/build/components/Input/components/prefilled-input-props';
 import React from 'react';
 import {
   Box,
@@ -16,14 +17,43 @@ type GenericSettingsProps = any;
 const GenericSettings: React.FC<GenericSettingsProps> = ({ tenant = {} }) => (
   <>
     <Box sx={{ maxWidth: 820 }}>
-      <Heading>Butikkinformasjon</Heading>
+      <Heading sx={{ mb: '44px' }}>Butikkinformasjon</Heading>
       <Box sx={{ '>div': { mb: 3 } }}>
-        <Field label="Navn på butikken" name="title" value={tenant.title} />
-        <Field label="Butikkens URL" name="url" value={tenant.url} />
-        <Field as={Select} label="Språk" name="lang">
+        <Field
+          label="Navn på butikken"
+          placeholder="Butikknavn"
+          name="title"
+          value={tenant.title}
+        />
+        <Flex sx={{ alignItems: 'center' }}>
+          <Box sx={{ flexGrow: 4 }}>
+            <PrefilledInput
+              label="Butikkens URL"
+              name="url"
+              prefilledText=".tabetalt.no"
+              prefilledTextPosition={TextPosition.RIGHT}
+              placeholder="butikknavnet"
+              text={tenant.url}
+            />
+          </Box>
+          <Button
+            sx={{ ml: '12px', height: '45px', flexGrow: 1 }}
+            variant="outline"
+          >
+            Legg til eget domene
+          </Button>
+        </Flex>
+        <LabeledSelect label="Språk og valuta" name="lang">
           <option>Norsk</option>
-        </Field>
-        <Field label="MVA-sats" name="vatSats" value={tenant.vatSats} />
+        </LabeledSelect>
+        <PrefilledInput
+          label="MVA-sats"
+          name="vatSats"
+          prefilledText="%"
+          prefilledTextPosition={TextPosition.RIGHT}
+          placeholder="XX"
+          text={tenant.vatSats}
+        />
         <Flex sx={{ alignItems: 'center' }}>
           <Label htmlFor="" sx={{ width: 'auto', minWidth: '8.75rem' }}>
             Pris og valuta
@@ -39,25 +69,33 @@ const GenericSettings: React.FC<GenericSettingsProps> = ({ tenant = {} }) => (
               <option>NOK</option>
             </Select>
           </Box>
-          {/* <Field label="Språk" name="lang" placeholder="Velg språk" as={Select}>
-            <option>Hello</option>
-          </Field> */}
         </Flex>
       </Box>
-      <Heading>Kontaktinformasjon</Heading>
-      <Text sx={{ mb: 3 }}>
+      <Heading sx={{ mt: '60px' }}>Kontaktinformasjon</Heading>
+      <Text sx={{ mb: 3, mt: '6px', color: '#9AA0B5' }}>
         Denne informasjonen vises i nettbutikken, samt på kvitteringer og
         ordrebekreftelser.
       </Text>
       <Box sx={{ '>div': { mb: 3, mt: 3 } }}>
+        <Flex sx={{ alignItems: 'center', mt: '26px' }}>
+          <Input placeholder="Hent fra Brønnøysund" value={tenant.name} />
+          <Button
+            sx={{ ml: '12px', width: '90px', height: '45px' }}
+            variant="outline"
+          >
+            Søk
+          </Button>
+        </Flex>
         <Field
           label="Firmanavn"
           name="companyName"
+          placeholder="Butikknavn"
           value={tenant.companyName}
         />
         <Field
           label="Gateadresse"
           name="companyAddress"
+          placeholder="Adresse"
           value={tenant.companyAddress}
         />
         <Flex sx={{ alignItems: 'center' }}>
@@ -92,8 +130,8 @@ const GenericSettings: React.FC<GenericSettingsProps> = ({ tenant = {} }) => (
           value={tenant.email}
         />
       </Box>
-      <Heading>Angrerettskjema</Heading>
-      <Text sx={{ mb: 3 }}>
+      <Heading sx={{ mt: '60px' }}>Angrerettskjema</Heading>
+      <Text sx={{ mb: 3, mt: '6px', color: '#9AA0B5' }}>
         Angrerettsskjemaet vil etter opplastning bli vedlagt med
         ordrebekreftelsen til kunden. Husk å legg inn din virksomhets
         informasjon på skjemaet. Du kan laste ned standard norsk
@@ -101,36 +139,69 @@ const GenericSettings: React.FC<GenericSettingsProps> = ({ tenant = {} }) => (
         rettigheter og angrerettsskjema.
       </Text>
       <Box sx={{ '>div': { mb: 3 } }}>
-        <Field
-          label="Last opp"
-          name="angrerettskjema"
-          value={tenant.angrerettskjema}
-        />
+        <Flex sx={{ alignItems: 'center' }}>
+          <Box sx={{ ml: '12px', height: '45px', flexGrow: 3 }}>
+            <Field
+              label="Last opp"
+              name="angrerettskjema"
+              value={tenant.angrerettskjema}
+            />
+          </Box>
+          <Button sx={{ ml: '12px', height: '45px', flexGrow: 1 }}>
+            Last opp
+          </Button>
+        </Flex>
       </Box>
-      <Heading>Sosiale Medier</Heading>
-      <Text sx={{ mb: 3 }}>
+      <Heading sx={{ mt: '45px' }}>Sosiale Medier</Heading>
+      <Text sx={{ mb: 3, mt: '6px', color: '#9AA0B5' }}>
         Denne informasjonen vises i footer i nettbutikken.
       </Text>
       <Box sx={{ '>div': { mb: 3 } }}>
-        <Field label="Facebook" name="facebook" value={tenant.facebook} />
-        <Field label="Twitter" name="twitter" value={tenant.twitter} />
-        <Field label="Google +" name="googlePlus" value={tenant.googlePlus} />
-        <Field label="Instagram" name="instagram" value={tenant.instagram} />
-        <Field label="LinkedIn" name="linkedin" value={tenant.linkedin} />
+        <Field
+          label="Facebook"
+          name="facebook"
+          placeholder="Din Facebook-side"
+          value={tenant.facebook}
+        />
+        <Field
+          label="Twitter"
+          name="twitter"
+          placeholder="Twitter konto"
+          value={tenant.twitter}
+        />
+        <Field
+          label="Google +"
+          name="googlePlus"
+          placeholder="Din Google+ side ID"
+          value={tenant.googlePlus}
+        />
+        <Field
+          label="Instagram"
+          name="instagram"
+          placeholder="Din Instagram konto"
+          value={tenant.instagram}
+        />
+        <Field
+          label="LinkedIn"
+          name="linkedin"
+          placeholder="Din LinkedIn konto"
+          value={tenant.linkedin}
+        />
       </Box>
-      <Heading>Google Analytics</Heading>
-      <Text sx={{ mb: 3 }}>
+      <Heading sx={{ mt: '51px' }}>Google Analytics</Heading>
+      <Text sx={{ mb: 3, mt: '6px', color: '#9AA0B5' }}>
         Koble nettbutikken din opp mot Google Analytics.
       </Text>
       <Box sx={{ '>div': { mb: 3 } }}>
         <Field
           label="Tracking-ID"
           name="trackingId"
+          placeholder="Butikknavn"
           value={tenant.trackingId}
         />
       </Box>
     </Box>
-    <Box sx={{ border: '1px solid', m: 5, p: 5, borderColor: 'error' }}>
+    <Box sx={{ border: '1px solid', p: 5, borderColor: 'error' }}>
       <Heading sx={{ fontWeight: 'normal', mb: 4 }}>FARESONEN</Heading>
       <Flex>
         <Box sx={{ flex: 1 }}>
diff --git a/src/modules/settings/components/LayoutSettings.tsx b/src/modules/settings/components/LayoutSettings.tsx
new file mode 100644
index 0000000..f67fe13
--- /dev/null
+++ b/src/modules/settings/components/LayoutSettings.tsx
@@ -0,0 +1,191 @@
+import { Field, OptionView, Switch } from '@tabetalt/kit';
+import React from 'react';
+import { Box, Flex, Heading, Text } from 'theme-ui';
+
+type LayoutSettingsProps = any;
+
+// TODO: add list component of option views
+// TODO: add children components for option view. Do it need to be in kti project?
+// TODO: make methods optionally
+const LayoutSettings: React.FC<LayoutSettingsProps> = ({ tenant = {} }) => {
+  const handleThemeChoose = (
+    event: React.FormEvent<Element>,
+    done: () => void
+  ) => {
+    done();
+  };
+  const handleFontChoose = (
+    event: React.FormEvent<Element>,
+    done: () => void
+  ) => {
+    done();
+  };
+  const handleColorChoose = (
+    event: React.FormEvent<Element>,
+    done: () => void
+  ) => {
+    done();
+  };
+
+  const handleThemePreview = (event: React.FormEvent<Element>) => {
+    console.log(event);
+  };
+  const handleFontPreview = (event: React.FormEvent<Element>) => {
+    console.log(event);
+  };
+  const handleColorPreview = (event: React.FormEvent<Element>) => {
+    console.log(event);
+  };
+  return (
+    <>
+      <Box sx={{ maxWidth: 820 }}>
+        <Heading sx={{ mb: '44px' }}>Logo og favicon</Heading>
+        <Box sx={{ '>div': { mb: '80px' } }}>
+          <Flex>
+            <Text sx={{ mr: '107px' }}>Logo</Text>
+            <Text sx={{ color: '#9AA0B5' }}>
+              Logo mangler, ditt butikknavn vil bli benyttet i stedet.
+            </Text>
+          </Flex>
+        </Box>
+        <Heading sx={{ mb: '40px' }}>Visningsvalg</Heading>
+        <Box sx={{ '>div': { mb: 3 } }}>
+          <Field
+            as={Switch}
+            label="Menyvisning"
+            name="menuDisplay"
+            value={tenant.menuDisplay}
+          />
+          <Field
+            as={Switch}
+            label="Produktsøk"
+            name="productSearch"
+            value={tenant.productSearch}
+          />
+          <Field
+            as={Switch}
+            label="Produktsortering"
+            name="productSort"
+            value={tenant.productSort}
+          />
+          <Field
+            as={Switch}
+            label="Produktfiltrering"
+            name="productFiltration"
+            value={tenant.productFiltration}
+          />
+        </Box>
+        <Heading sx={{ mt: '60px' }}>Tema</Heading>
+        <Text sx={{ mb: 3, mt: '6px', color: '#9AA0B5' }}>
+          Her kan du velge tema for din nettbutikk.
+        </Text>
+        <Flex>
+          <OptionView
+            completedText="Valgt"
+            contentName="Fonts"
+            loadingText="Bruk"
+            onPreviewClick={handleThemePreview}
+            onSelectClick={handleThemeChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+          <OptionView
+            completedText="Valgt"
+            contentName="Fonts"
+            loadingText="Bruk"
+            onPreviewClick={handleThemePreview}
+            onSelectClick={handleThemeChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+          <OptionView
+            completedText="Valgt"
+            contentName="Fonts"
+            loadingText="Bruk"
+            onPreviewClick={handleThemePreview}
+            onSelectClick={handleThemeChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+        </Flex>
+        <Heading sx={{ mt: '80px' }}>Fonter</Heading>
+        <Text sx={{ mb: 3, mt: '6px', color: '#9AA0B5' }}>
+          Her kan du bytte fonter. Dette påvirker ikke valgt tema.
+        </Text>
+        <Flex>
+          <OptionView
+            completedText="Valgt"
+            contentName="IBM Plex Sans + IBM Plex Serif"
+            loadingText="Bruk"
+            onPreviewClick={handleFontPreview}
+            onSelectClick={handleFontChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+          <OptionView
+            completedText="Valgt"
+            contentName="IBM Plex Sans + IBM Plex Serif"
+            loadingText="Bruk"
+            onPreviewClick={handleFontPreview}
+            onSelectClick={handleFontChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+          <OptionView
+            completedText="Valgt"
+            contentName="Work Sans + Roboto"
+            loadingText="Bruk"
+            onPreviewClick={handleFontPreview}
+            onSelectClick={handleFontChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+        </Flex>
+        <Heading sx={{ mt: '80px' }}>Farger</Heading>
+        <Text sx={{ mb: 3, mt: '6px', color: '#9AA0B5' }}>
+          Her kan du bytte farger. Dette påvirker ikke valgt tema.
+        </Text>
+        <Flex>
+          <OptionView
+            completedText="Valgt"
+            contentName=""
+            loadingText="Bruk"
+            onPreviewClick={handleColorPreview}
+            onSelectClick={handleColorChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+          <OptionView
+            completedText="Valgt"
+            contentName=""
+            loadingText="Bruk"
+            onPreviewClick={handleColorPreview}
+            onSelectClick={handleColorChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+          <OptionView
+            completedText="Valgt"
+            contentName=""
+            loadingText="Bruk"
+            onPreviewClick={handleColorPreview}
+            onSelectClick={handleColorChoose}
+            previewText="Forhåndsvis"
+          >
+            <></>
+          </OptionView>
+        </Flex>
+      </Box>
+    </>
+  );
+};
+
+export default LayoutSettings;
diff --git a/src/modules/settings/PaymentMethodSettings.tsx b/src/modules/settings/components/PaymentMethodSettings.tsx
similarity index 96%
rename from src/modules/settings/PaymentMethodSettings.tsx
rename to src/modules/settings/components/PaymentMethodSettings.tsx
index 9df82c3..822b9f3 100644
--- a/src/modules/settings/PaymentMethodSettings.tsx
+++ b/src/modules/settings/components/PaymentMethodSettings.tsx
@@ -9,7 +9,7 @@ const PaymentMethod: React.FC = () => (
       Hvilke betalingsmetoder vil du tilby? Her kan du administrere, sortere,
       legge til eller slette betalingsmetoder som kundene dine kan bruke.
     </Text>
-    <Flex sx={{ bg: 'gray3', p: 4 }}>
+    <Flex sx={{ bg: 'gray3', p: 4, border: '2px solid #9AA0B5' }}>
       <Box sx={{ flexGrow: 1 }}>
         <Heading>Manuell fakturering</Heading>
         <Text>
diff --git a/src/modules/settings/ShippingSettings.tsx b/src/modules/settings/components/ShippingSettings.tsx
similarity index 100%
rename from src/modules/settings/ShippingSettings.tsx
rename to src/modules/settings/components/ShippingSettings.tsx

From 8e85fd8a10875825bc424188406c736920717a70 Mon Sep 17 00:00:00 2001
From: Tanya Dolgopolova <tetiana.dolgopolova@gmail.com>
Date: Mon, 2 Nov 2020 14:33:21 +0200
Subject: [PATCH 2/2] fix(Header): added under link to theader

---
 src/components/Header.tsx         | 30 +++++++++++---
 src/modules/settings/Settings.tsx | 65 +++++++++++++++++++------------
 yarn.lock                         |  6 +--
 3 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index fb368ce..fdc072c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -9,9 +9,17 @@ export interface HeaderProps {
     name: string;
     to: string;
   }[];
+  underLinks?: {
+    name: string;
+    to: string;
+  }[];
 }
 
-const Header: React.FC<HeaderProps> = ({ children, links = [] }) => {
+const Header: React.FC<HeaderProps> = ({
+  children,
+  links = [],
+  underLinks = [],
+}) => {
   return (
     <Flex
       sx={{
@@ -21,9 +29,8 @@ const Header: React.FC<HeaderProps> = ({ children, links = [] }) => {
     >
       <Box
         sx={{
-          px: 5,
+          px: 4,
           py: 4,
-          fontSize: 2,
           '> a': {
             color: 'text',
             textDecoration: 'none',
@@ -35,14 +42,27 @@ const Header: React.FC<HeaderProps> = ({ children, links = [] }) => {
             to={link.to}
             key={i}
             activeStyle={{
-              color: '#1D1D1D',
+              color: 'text',
             }}
             style={{ color: '#9AA0B5' }}
-            sx={{ marginLeft: i !== 0 ? '20%' : '0%' }}
+            sx={{ fontSize: 2, marginLeft: i !== 0 ? '20%' : '0%' }}
           >
             {link.name}
           </NavLink>
         ))}
+        {(underLinks || []).map((underLink, i) => (
+          <NavLink
+            to={underLink.to}
+            key={i}
+            activeStyle={{
+              color: 'text',
+            }}
+            style={{ color: '#9AA0B5' }}
+            sx={{ marginLeft: '8%' }}
+          >
+            {underLink.name}
+          </NavLink>
+        ))}
       </Box>
       <Box sx={{ px: 5, py: 4 }}>{children}</Box>
     </Flex>
diff --git a/src/modules/settings/Settings.tsx b/src/modules/settings/Settings.tsx
index 9aa2595..8b9927a 100644
--- a/src/modules/settings/Settings.tsx
+++ b/src/modules/settings/Settings.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { PartialRouteObject } from 'react-router';
-import { NavLink, useRoutes } from 'react-router-dom';
-import { Box } from 'theme-ui';
+import { useRoutes } from 'react-router-dom';
+import { Box, Button } from 'theme-ui';
 import Layout from '../../components/Layout';
 import ShippingSettings from './components/ShippingSettings';
 import GenericSettings from './components/GenericSettings';
@@ -22,29 +22,44 @@ const Settings: React.FC = () => {
   ] as PartialRouteObject[]);
 
   return (
-    <Layout>
-      <Box sx={{ p: 5 }}>
-        <Box
-          sx={{
-            mt: 3,
-            mb: 5,
-            '>a': {
-              mr: 4,
-              color: 'muted',
-              fontWeight: 'normal',
-              textDecoration: 'none',
-              '&.active': { color: 'text' },
-            },
-          }}
-        >
-          <NavLink to="generic">Generelt</NavLink>
-          <NavLink to="layout">Utseende</NavLink>
-          <NavLink to="discount">Rabatter</NavLink>
-          <NavLink to="shipping">Leveringsmetoder</NavLink>
-          <NavLink to="payment-method">Betalingsmetoder</NavLink>
-        </Box>
-        {routes}
-      </Box>
+    <Layout
+      header={{
+        links: [
+          {
+            name: 'Innstillinger',
+            to: '/settings/generic',
+          },
+        ],
+        underLinks: [
+          {
+            name: 'Generelt',
+            to: '/settings/generic',
+          },
+          {
+            name: 'Utseende',
+            to: '/settings/layout',
+          },
+          {
+            name: 'Rabatter',
+            to: '/settings/discount',
+          },
+          {
+            name: 'Leveringsmetoder',
+            to: '/settings/shipping',
+          },
+          {
+            name: 'Betalingsmetoder',
+            to: '/settings/payment-method',
+          },
+        ],
+        children: (
+          <Box>
+            <Button>Lagre endringer</Button>
+          </Box>
+        ),
+      }}
+    >
+      <Box sx={{ p: 5 }}>{routes}</Box>
     </Layout>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index 8c4596e..97de250 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10947,9 +10947,9 @@ react-app-polyfill@^1.0.6:
     whatwg-fetch "^3.0.0"
 
 react-content-loader@^5.1.1:
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-5.1.3.tgz#776c0fc56e9c2d5961d8b0fb8a8a1d7cc87f41c9"
-  integrity sha512-OZ95FmbcXx07avgPOf4A/S0/WFv3yWXR+u6wmD/0MQ39X2XKIpNYClnJD4OkSZTk0VfBawq2SR64B9GcqiRG0A==
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-5.1.4.tgz#854bafe4415dd9de07174621375bc308edd0ebb5"
+  integrity sha512-hTq7pZi2GKCK6a9d3u6XStozm0QGCEjw8cSqQReiWnh2up6IwCha5R5TF0o6SY5qUDpByloEZEZtnFxpJyENFw==
 
 react-dev-utils@^10.2.1:
   version "10.2.1"