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") && ( -
+