Fixes ESlint in files and restructures donation sum pane somewhat

.eslintignore

@@ -0,0 +1 @@
+serviceWorker.ts

src/components/Carousel.style.css

@@ -1,3 +1,3 @@
 .carousel__slide-focus-ring {
     outline: none;
-}
+}

src/components/Host.style.tsx

@@ -7,7 +7,7 @@ export const WidgetWrapper = styled.div`
 `;
 
 export const Splash = styled.div`
-  background-image: url('https://thumb.tildacdn.com/tild3231-3764-4630-b635-313165393338/-/format/webp/SCI2.png');
+  background-image: url("https://thumb.tildacdn.com/tild3231-3764-4630-b635-313165393338/-/format/webp/SCI2.png");
   background-size: cover;
   background-position: center top;
   height: 235px;
@@ -19,7 +19,7 @@ export const Splash = styled.div`
 `;
 
 export const SplashTitle = styled.h1`
-  font-family: 'Georgia';
+  font-family: "Georgia";
   font-weight: 400;
   margin-bottom: 16px;
   font-size: 42px;

src/components/Host.tsx

@@ -1,11 +1,13 @@
-import React from 'react'
-import { Splash, SplashTitle, WidgetWrapper } from './Host.style'
+import React from "react";
+import { Splash, SplashTitle, WidgetWrapper } from "./Host.style";
 
 export const Host: React.FC = ({ children }) => {
-  return (<WidgetWrapper>
-    <Splash>
-      <SplashTitle>Gi Nå</SplashTitle>
-    </Splash>
-    {children}
-  </WidgetWrapper>)
-}
+  return (
+    <WidgetWrapper>
+      <Splash>
+        <SplashTitle>Gi Nå</SplashTitle>
+      </Splash>
+      {children}
+    </WidgetWrapper>
+  );
+};

src/components/Widget.tsx

@@ -1,36 +1,35 @@
-import React from 'react'
-import { DonationPane } from './panes/DonationPane/DonationPane';
-import { DonorPane } from './panes/DonorPane/DonorPane';
-import { MethodPane } from './panes/MethodPane/MethodPane';
-import { PaymentPane } from './panes/PaymentPane/PaymentPane';
-import { ReferralPane } from './panes/ReferralPane/ReferralPane';
-import { Carousel } from 'react-responsive-carousel';
+import React from "react";
+import { useSelector } from "react-redux";
+import { Carousel } from "react-responsive-carousel";
+import { DonationPane } from "./panes/DonationPane/DonationPane";
+import { DonorPane } from "./panes/DonorPane/DonorPane";
+import { MethodPane } from "./panes/MethodPane/MethodPane";
+import { PaymentPane } from "./panes/PaymentPane/PaymentPane";
+import { ReferralPane } from "./panes/ReferralPane/ReferralPane";
 import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
-import { useSelector } from 'react-redux';
-import { State } from '../store/state';
+import { State } from "../store/state";
 
-function Widget() {
-  const currentPane = useSelector((state: State) => state.layout.paneNumber)
+export const Widget: React.FC = () => {
+  const currentPane = useSelector((state: State) => state.layout.paneNumber);
 
   return (
-    <div style={{ display: 'block', maxWidth: '100vw', margin: '0 auto' }}>
-        <Carousel 
-          dynamicHeight={true} 
-          selectedItem={currentPane} 
-          showArrows={false} 
-          showIndicators={false} 
-          showStatus={false}
-          showThumbs={false}
-          transitionTime={200}
-          onChange={() => {}}>
-          <MethodPane />
-          <DonorPane />
-          <DonationPane />
-          <ReferralPane />
-          <PaymentPane />
+    <div style={{ display: "block", maxWidth: "100vw", margin: "0 auto" }}>
+      <Carousel
+        dynamicHeight
+        selectedItem={currentPane}
+        showArrows={false}
+        showIndicators={false}
+        showStatus={false}
+        showThumbs={false}
+        transitionTime={200}
+        onChange={() => {}}
+      >
+        <MethodPane />
+        <DonorPane />
+        <DonationPane />
+        <ReferralPane />
+        <PaymentPane />
       </Carousel>
     </div>
   );
-}
-
-export default Widget;
+};