From 4a33fdf82f80387b428bf4cb0bbe892579312e65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5kon=20Harnes?= <account@harnes.me>
Date: Wed, 9 Dec 2020 19:27:39 +0100
Subject: [PATCH] Fixes ESLint for multiple panes

---
 src/components/panes/Forms.style.tsx          |  78 ++++++-----
 .../panes/PaymentPane/PaymentPane.tsx         |  24 ++--
 .../panes/ReferralPane/ReferralPane.style.tsx |  58 ++++----
 .../panes/SharesPane/SharesPane.style.tsx     |  75 +++++-----
 src/components/panes/panes.style.tsx          | 129 ++++++++++--------
 5 files changed, 187 insertions(+), 177 deletions(-)

diff --git a/src/components/panes/Forms.style.tsx b/src/components/panes/Forms.style.tsx
index fc170e9..d410a42 100644
--- a/src/components/panes/Forms.style.tsx
+++ b/src/components/panes/Forms.style.tsx
@@ -1,53 +1,51 @@
-import styled from 'styled-components'
-import { gray18 } from '../../config/colors'
+import styled from "styled-components";
+import { gray18 } from "../../config/colors";
 
 export const Form = styled.form`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
 
 export const InputFieldWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-`
+  display: flex;
+  flex-direction: column;
+`;
 
 export const TextField = styled.input`
-   padding: 20px;
-   display: block;
-   margin: 5px;
-   font-size: 15px;
-   border: 1px solid ${gray18};
-   border-radius: 5px;
-   box-sizing: border-box;
-`
+  padding: 20px;
+  display: block;
+  margin: 5px;
+  font-size: 15px;
+  border: 1px solid ${gray18};
+  border-radius: 5px;
+  box-sizing: border-box;
+`;
 
 export const CheckBox = styled.input`
-    margin-left: 10px;
-    &:hover {
-        cursor: pointer;
-        opacity: 0.5;
-    }
-`
+  margin-left: 10px;
+  &:hover {
+    cursor: pointer;
+    opacity: 0.5;
+  }
+`;
 
-export const RadioWrapper = styled.div`
-    
-`
+export const RadioWrapper = styled.div``;
 
 export const RadioButton = styled.input`
-    margin-left: 10px;
-    &:hover {
-        cursor: pointer;
-    }
-`
+  margin-left: 10px;
+  &:hover {
+    cursor: pointer;
+  }
+`;
 
 export const InputLabel = styled.p`
-    align-self: start;
-    font-size: 12px;
-    display: inline;
-    position: relative;
-    bottom: 2px;
-    margin-left: 5px;
-`
\ No newline at end of file
+  align-self: start;
+  font-size: 12px;
+  display: inline;
+  position: relative;
+  bottom: 2px;
+  margin-left: 5px;
+`;
diff --git a/src/components/panes/PaymentPane/PaymentPane.tsx b/src/components/panes/PaymentPane/PaymentPane.tsx
index fd8db2f..4fb11cb 100644
--- a/src/components/panes/PaymentPane/PaymentPane.tsx
+++ b/src/components/panes/PaymentPane/PaymentPane.tsx
@@ -1,21 +1,21 @@
-import React from 'react'
-import { useSelector } from 'react-redux'
-import { PaymentMethod, State } from '../../../store/state'
-import { ResultPane } from './Bank/ResultPane'
-import { PaypalPane } from './Paypal/PayPalPane'
-import { VippsPane } from './Vipps/VippsPane'
+import React from "react";
+import { useSelector } from "react-redux";
+import { PaymentMethod, State } from "../../../store/state";
+import { ResultPane } from "./Bank/ResultPane";
+import { PaypalPane } from "./Paypal/PayPalPane";
+import { VippsPane } from "./Vipps/VippsPane";
 
 export const PaymentPane: React.FC = () => {
-  const method = useSelector((state: State) => state.donation.method)
+  const method = useSelector((state: State) => state.donation.method);
 
   switch (method) {
     case PaymentMethod.BANK:
-      return <ResultPane />
+      return <ResultPane />;
     case PaymentMethod.PAYPAL:
-      return <PaypalPane />
+      return <PaypalPane />;
     case PaymentMethod.VIPPS:
-      return <VippsPane />
+      return <VippsPane />;
     default:
-      return <div>Invalid payment method</div>
+      return <div>Invalid payment method</div>;
   }
-}
\ No newline at end of file
+};
diff --git a/src/components/panes/ReferralPane/ReferralPane.style.tsx b/src/components/panes/ReferralPane/ReferralPane.style.tsx
index 41e8dc7..7881c02 100644
--- a/src/components/panes/ReferralPane/ReferralPane.style.tsx
+++ b/src/components/panes/ReferralPane/ReferralPane.style.tsx
@@ -1,37 +1,37 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const ReferralsWrapper = styled.div`
-    width: 240px;
-    white-space: normal;
-    display: flex;
-    align-items: space-between;
-    width: 240px;
-    flex-wrap: wrap;
-`
+  width: 240px;
+  white-space: normal;
+  display: flex;
+  align-items: space-between;
+  width: 240px;
+  flex-wrap: wrap;
+`;
 
 export const OtherInputWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
 
 export const OtherInput = styled.textarea`
-    margin-top: 10px;
-    width: 200px;
-    height: 100px;
-    padding: 5px;
-`
+  margin-top: 10px;
+  width: 200px;
+  height: 100px;
+  padding: 5px;
+`;
 
 export const ReferralButton = styled.button`
-    width: 110px;
-    padding: 5px;
-    margin: 5px;
-    background: #f8f1e5;
-    border: 1px solid #dfd2c5;
-    
-    &:hover {
-        cursor: pointer;
-        opacity: 0.5;
-    }
-`
\ No newline at end of file
+  width: 110px;
+  padding: 5px;
+  margin: 5px;
+  background: #f8f1e5;
+  border: 1px solid #dfd2c5;
+
+  &:hover {
+    cursor: pointer;
+    opacity: 0.5;
+  }
+`;
diff --git a/src/components/panes/SharesPane/SharesPane.style.tsx b/src/components/panes/SharesPane/SharesPane.style.tsx
index eee0211..79cfb5f 100644
--- a/src/components/panes/SharesPane/SharesPane.style.tsx
+++ b/src/components/panes/SharesPane/SharesPane.style.tsx
@@ -1,49 +1,48 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const SharesWrapper = styled.div`
-    display: flex;
-    flex-direction: column;
-`
+  display: flex;
+  flex-direction: column;
+`;
 
 export const ShareWrapper = styled.div`
-    text-align: right;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    height: 40px;
-    position: relative;
-
-`
+  text-align: right;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  height: 40px;
+  position: relative;
+`;
 
 export const SmallTextField = styled.input`
-    width: 30px;
-    padding: 8px;
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-    font-size: 14px;
-    background: #eee;
-    border: none;
-    text-align: center;
+  width: 30px;
+  padding: 8px;
+  display: inline-block;
+  margin-left: 5px;
+  margin-right: 5px;
+  font-size: 14px;
+  background: #eee;
+  border: none;
+  text-align: center;
 
-    &:focus::-webkit-input-placeholder {
-        color: transparent;
-    }
-`
+  &:focus::-webkit-input-placeholder {
+    color: transparent;
+  }
+`;
 
 export const OrganizationName = styled.p`
-    width: 120px;
-    font-size: 12px;
-    display: inline-block;
-    margin-right: 5px;
-`
+  width: 120px;
+  font-size: 12px;
+  display: inline-block;
+  margin-right: 5px;
+`;
 
 export const PercentageText = styled.p`
-    margin: 0;
-    margin-top: 3px;
-    color: gray;
-    font-size: 12px;
-    text-align: center;
-`
\ No newline at end of file
+  margin: 0;
+  margin-top: 3px;
+  color: gray;
+  font-size: 12px;
+  text-align: center;
+`;
diff --git a/src/components/panes/panes.style.tsx b/src/components/panes/panes.style.tsx
index 8ccbabd..33e8953 100644
--- a/src/components/panes/panes.style.tsx
+++ b/src/components/panes/panes.style.tsx
@@ -1,79 +1,92 @@
-import styled from 'styled-components'
+import styled from "styled-components";
 
 export const Pane = styled.div`
-    padding: 20px;
-    box-sizing: border-box; 
-    display: flex;
-    flex-direction: column;
-`
+  padding: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+`;
 
-//TODO: REMOVE
+// TODO: REMOVE
 export const PaneContainer = styled.div`
-    align-items: center;
-    justify-content: center;
-    padding: 10px 0;
-`
+  align-items: center;
+  justify-content: center;
+  padding: 10px 0;
+`;
 
 export const PaneTitle = styled.p`
-    font-size: 25px;
-    margin-top: 5px;
-    margin-bottom: 10px;
-    align-self: center;
-`
+  font-size: 25px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  align-self: center;
+`;
 
 export const UnderTitle = styled.p`
-    font-size: 15px;
-    align-self: center;
-    margin: 5px;
-    text-align: center;
-    color: gray;
-`
+  font-size: 15px;
+  align-self: center;
+  margin: 5px;
+  text-align: center;
+  color: gray;
+`;
 
 export const OrangeLink = styled.a`
-    color: #FFAA2B;
-    display: inline;
-    text-decoration-color: #FFAA2B;
-    font-size: 12px;
-    position: relative;
-    bottom: 2px;
-`
+  color: #ffaa2b;
+  display: inline;
+  text-decoration-color: #ffaa2b;
+  font-size: 12px;
+  position: relative;
+  bottom: 2px;
+`;
 
 export const HorizontalLine = styled.div`
-    height: 1px;
-    background-color: #FFAA2B;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    width: 100%;
-`
+  height: 1px;
+  background-color: #ffaa2b;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 100%;
+`;
 
 export const VerticalLine = styled.div`
-    width: 1px;
-    height: 30px;
-    background-color: #FFAA2B;
-    margin-bottom: 5px;
-`
+  width: 1px;
+  height: 30px;
+  background-color: #ffaa2b;
+  margin-bottom: 5px;
+`;
 
 export const ErrorMessage = styled.div`
-    font-size: 12px;
-    color: red;
-    padding-left: 2px;
-`
+  font-size: 12px;
+  color: red;
+  padding-left: 2px;
+`;
 
 export const NavigationWrapper = styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 5px;
-`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5px;
+`;
 
 export const LoadingIcon = styled.img`
-    width: 80px;
-    height: 80px;
-    -webkit-animation:spin 1.5s linear infinite;
-    -moz-animation:spin 1.5s linear infinite;
-    animation:spin 1.5s linear infinite;
+  width: 80px;
+  height: 80px;
+  -webkit-animation: spin 1.5s linear infinite;
+  -moz-animation: spin 1.5s linear infinite;
+  animation: spin 1.5s linear infinite;
 
-    @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-`
+  @-moz-keyframes spin {
+    100% {
+      -moz-transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes spin {
+    100% {
+      -webkit-transform: rotate(360deg);
+    }
+  }
+  @keyframes spin {
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+`;