diff --git a/frontend/components/basic/buttons/Button.js b/frontend/components/basic/buttons/Button.js
deleted file mode 100644
index 92613788e7..0000000000
--- a/frontend/components/basic/buttons/Button.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from "react";
-import Image from "next/image";
-import Link from "next/link";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-var classNames = require("classnames");
-
-export default function Button({
- text,
- onButtonPressed,
- link,
- loading,
- color,
- size,
- icon,
- active = true,
- iconDisabled,
- textDisabled,
-}) {
- let styleButton = classNames(
- "group m-auto md:m-0 inline-block rounded-md duration-200",
-
- // Setting background colors and hover modes
- color == "mineshaft" && active && "bg-mineshaft-700 hover:bg-primary",
- color == "mineshaft" && !active && "bg-mineshaft",
- (color == "primary" || !color) && active && "bg-primary hover:opacity-80",
- (color == "primary" || !color) && !active && "bg-primary",
- color == "red" && "bg-red",
-
- // Changing the opacity when active vs when not
- active ? "opacity-100 cursor-pointer" : "opacity-40",
-
- // Setting the button sizes
- size == "md" && "h-10 w-full px-2 md:px-4",
- size == "lg" && "h-12 w-full px-2 md:px-8",
- !size && "md:py-1 px-3 md:px-8",
- size == "icon-md" && "h-10 w-10 flex items-center justify-center",
- size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
- );
-
- let styleMainDiv = classNames(
- "relative font-medium flex items-center",
-
- // Setting the text color for the text and icon
- color == "mineshaft" && "text-gray-400",
- color != "mineshaft" && color != "red" && "text-black",
- color == "red" && "text-gray-200",
- active && color != "red" ? "group-hover:text-black" : "",
-
- size == "icon" && "flex items-center justify-center"
- );
-
- let textStyle = classNames(
- "relative duration-200",
-
- // Show the loading sign if the loading indicator is on
- loading == true ? "opacity-0" : "opacity-100",
- size == "md" && "text-sm",
- size == "lg" && "text-lg"
- );
-
- const button = (
-
- );
-
- if (link) {
- return {button};
- }
-
- return button;
-}
diff --git a/frontend/components/basic/buttons/Button.tsx b/frontend/components/basic/buttons/Button.tsx
new file mode 100644
index 0000000000..c0db709c1e
--- /dev/null
+++ b/frontend/components/basic/buttons/Button.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import Image from "next/image";
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+var classNames = require("classnames");
+
+type ButtonProps = {
+ text: string;
+ onButtonPressed: () => void;
+ loading: boolean;
+ color: string;
+ size: string;
+ icon: IconProp;
+ active: boolean;
+ iconDisabled: string;
+ textDisabled: string;
+}
+
+export default function Button (props: ButtonProps): JSX.Element {
+ // Check if the button show always be 'active' - then true;
+ // or if it should switch between 'active' and 'disabled' - then give the status
+ const activityStatus = props.active || (props.text != "" && props.textDisabled == undefined)
+
+ let styleButton = classNames(
+ "group m-auto md:m-0 inline-block rounded-md duration-200",
+
+ // Setting background colors and hover modes
+ props.color == "mineshaft" && activityStatus && "bg-mineshaft-700 hover:bg-primary",
+ props.color == "mineshaft" && !activityStatus && "bg-mineshaft",
+ (props.color == "primary" || !props.color) && activityStatus && "bg-primary hover:opacity-80",
+ (props.color == "primary" || !props.color) && !activityStatus && "bg-primary",
+ props.color == "red" && "bg-red",
+
+ // Changing the opacity when active vs when not
+ activityStatus ? "opacity-100 cursor-pointer" : "opacity-40",
+
+ // Setting the button sizes
+ props.size == "md" && "h-10 w-full px-2 md:px-4",
+ props.size == "lg" && "h-12 w-full px-2 md:px-8",
+ !props.size && "md:py-1 px-3 md:px-8",
+ props.size == "icon-md" && "h-10 w-10 flex items-center justify-center",
+ props.size == "icon-sm" && "h-9 w-9 flex items-center justify-center"
+ );
+
+ let styleMainDiv = classNames(
+ "relative font-medium flex items-center",
+
+ // Setting the text color for the text and icon
+ props.color == "mineshaft" && "text-gray-400",
+ props.color != "mineshaft" && props.color != "red" && "text-black",
+ props.color == "red" && "text-gray-200",
+ activityStatus && props.color != "red" ? "group-hover:text-black" : "",
+
+ props.size == "icon" && "flex items-center justify-center"
+ );
+
+ let textStyle = classNames(
+ "relative duration-200",
+
+ // Show the loading sign if the loading indicator is on
+ props.loading == true ? "opacity-0" : "opacity-100",
+ props.size == "md" && "text-sm",
+ props.size == "lg" && "text-lg"
+ );
+
+ const button = (
+
+ );
+
+ return button;
+}
diff --git a/frontend/components/basic/table/UserTable.js b/frontend/components/basic/table/UserTable.js
index 3f54682880..5b2634d94f 100644
--- a/frontend/components/basic/table/UserTable.js
+++ b/frontend/components/basic/table/UserTable.js
@@ -185,7 +185,7 @@ const UserTable = ({
)}
{(row.status == "invited" ||
row.status == "verified") && (
-
+