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
+ return ;
case PaymentMethod.PAYPAL:
- return
+ return ;
case PaymentMethod.VIPPS:
- return
+ return ;
default:
- return
Invalid payment method
+ return Invalid payment method
;
}
-}
\ 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);
+ }
+ }
+`;