Create button components

src/Button.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import "./css/Button.css";
+
+import Loader from "./puff-loader.svg";
+
+export default function Button(props) {
+	let newProps = {...props};
+	delete newProps["icon"];
+	delete newProps["className"];
+	delete newProps["children"];
+	delete newProps["loading"];
+	delete newProps["disabled"];
+	return (
+		<button
+			className={`button ${props.className ? props.className : ""} ${props.icon && props.children ? "button--icon-and-text" : ""} ${props.loading ? "button--loading" : ""} ${props.disabled ? "button--disabled" : ""}`}
+			{...newProps}
+		>
+			{ props.loading ? <img className="button-loader" src={Loader} alt="Loading..." /> : "" }
+			{ props.icon
+				?
+				<span className="button-icon">
+					{props.icon}
+				</span>
+				:
+				""
+			}
+			<span className="button-children">
+				{props.children}
+			</span>
+		</button>
+	)
+}

src/LinkButton.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import "./css/Button.css";
+
+import Loader from "./puff-loader.svg";
+
+export default function Button(props) {
+	let newProps = { ...props };
+	delete newProps["icon"];
+	delete newProps["className"];
+	delete newProps["children"];
+	delete newProps["disabled"];
+	delete newProps["loading"];
+	delete newProps["disabled"];
+	return (
+		<Link
+			className={`button ${props.className ? props.className : ""} ${props.icon && props.children ? "button--icon-and-text" : ""} ${props.loading ? "button--loading" : ""} ${props.disabled ? "button--disabled" : ""}`}
+			to={props.to}
+			style={props.disabled ? {pointerEvents: "none"} : null}
+			{...newProps}
+		>
+			{props.loading ? <img className="button-loader" src={Loader} alt="Loading..." /> : ""}
+			{props.icon
+				?
+				<span className="button-icon">
+					{props.icon}
+				</span>
+				:
+				""
+			}
+			<span className="button-children">
+				{props.children}
+			</span>
+		</Link>
+	)
+}

src/css/Button.css

@@ -0,0 +1,110 @@
+.button {
+	text-decoration: none;
+	background-color: var(--primary-color);
+	color: var(--text-color);
+	padding: 10px 16px;
+	border-radius: 30px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: center;
+	align-items: center;
+	transition: 0.2s;
+	width: max-content;
+}
+
+nav .button {
+	margin: 4px;
+}
+
+main .button {
+	margin-top: 8px;
+	margin-bottom: 8px;
+}
+
+.button > span {
+	display: flex;
+}
+
+.button > span.button-children {
+	margin-bottom: -2px;
+}
+
+.button--icon-and-text > span.button-children {
+	margin-left: 5px;
+}
+
+.button:hover {
+	background-color: var(--primary-color-tinted);
+}
+
+.button.button--round {
+	padding: 8px;
+}
+
+.page-header .button.button--round {
+	padding: 10px;
+}
+
+.button.button--disabled {
+	cursor: default;
+	background-color: var(--primary-color-dark);
+	color: var(--text-color-tinted);
+}
+
+.button--loading > span {
+	opacity: 0;
+}
+
+.button--loading > img {
+	height: 24px;
+	margin: auto;
+	position: absolute;
+}
+.button.button--no-background {
+	background: none;
+	padding: 10px;
+}
+
+.button-container {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+}
+
+.button-container > .button {
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+.button-container > .button:first-child {
+	margin-left: 0;
+}
+
+.button-container > .button:last-child {
+	margin-right: 0;
+}
+
+.buttons--mobile {
+	display: none;
+}
+
+@media screen and (max-width: 660px) {
+	.button.button--hide-text-mobile {
+		background: none;
+		padding: 10px;
+	}
+	.button.button--hide-text-mobile .button-children {
+		display: none;
+	}
+}
+
+@media screen and (max-width: 520px) {
+	.buttons--mobile {
+		display: flex;
+	}
+	.buttons--desktop {
+		display: none;
+	}
+}