About info and donate

crabfit-frontend/src/components/Button/buttonStyle.ts

@@ -20,7 +20,7 @@ export const Top = styled.button`
 	color: #FFF;
 	font-weight: 600;
 	text-shadow: 0 -1.5px .5px ${props => props.theme.primaryDark};
-	padding: ${props => props.padding || '10px 14px'};
+	padding: 0;
 	border-radius: 3px;
 	height: var(--btn-height);
 	width: var(--btn-width);

crabfit-frontend/src/components/CalendarField/CalendarField.tsx

@@ -112,7 +112,6 @@ const CalendarField = ({
 				<Button
 					buttonHeight="30px"
 					buttonWidth="30px"
-					padding="0"
 					title="Previous month"
 					type="button"
 					onClick={() => {
@@ -128,7 +127,6 @@ const CalendarField = ({
 				<Button
 					buttonHeight="30px"
 					buttonWidth="30px"
-					padding="0"
 					title="Next month"
 					type="button"
 					onClick={() => {

crabfit-frontend/src/components/Donate/Donate.tsx

@@ -0,0 +1,14 @@
+import { Button } from 'components';
+
+const Donate = () => (
+	<div style={{ marginTop: 6, marginLeft: 12 }}>
+		<a href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation&currency_code=AUD" target="_blank" rel="noreferrer">
+			<Button
+				buttonHeight="30px"
+				buttonWidth="90px"
+			>Donate</Button>
+		</a>
+	</div>
+);
+
+export default Donate;

crabfit-frontend/src/components/index.ts

@@ -2,5 +2,8 @@ export { default as TextField } from './TextField/TextField';
 export { default as SelectField } from './SelectField/SelectField';
 export { default as CalendarField } from './CalendarField/CalendarField';
 export { default as TimeRangeField } from './TimeRangeField/TimeRangeField';
+
 export { default as Button } from './Button/Button';
+
 export { default as Center } from './Center/Center';
+export { default as Donate } from './Donate/Donate';