Added Button Components

frontend/src/components/Button.tsx

@@ -0,0 +1,79 @@
+import { Poppins } from "next/font/google";
+import React from "react";
+
+import styles from "../styles/Button.module.css";
+
+type ButtonStyles = {
+  button: string;
+  disabled: string;
+  secondary: string;
+  destructive: string;
+  destructiveSecondary: string;
+  primary: string;
+  small: string;
+  default: string;
+};
+
+const poppins = Poppins({ weight: "400", style: "normal", subsets: [] });
+
+export type ButtonProps = {
+  label: string;
+  kind?: "primary" | "secondary" | "destructive" | "destructive-secondary";
+  size?: "default" | "small";
+  disabled?: boolean;
+} & React.ComponentProps<"button">;
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { label, kind = "primary", size = "default", disabled = false, className, ...props }: ButtonProps,
+  ref,
+) {
+  const buttonStyles: ButtonStyles = styles as ButtonStyles;
+
+  let buttonClass = buttonStyles.button;
+
+  // All disabled buttons have same style, so we can ignore kind
+  if (disabled) {
+    buttonClass += ` ${buttonStyles.disabled}`;
+  }
+
+  // If not disabled, assign style based on kind
+  else {
+    switch (kind) {
+      case "secondary":
+        buttonClass += ` ${buttonStyles.secondary}`;
+        break;
+      case "destructive":
+        buttonClass += ` ${buttonStyles.destructive}`;
+        break;
+      case "destructive-secondary":
+        buttonClass += ` ${buttonStyles.destructiveSecondary}`;
+        break;
+      default:
+        buttonClass += ` ${buttonStyles.primary}`;
+    }
+  }
+
+  // button size styling depends on size
+  switch (size) {
+    case "small":
+      buttonClass += ` ${buttonStyles.small}`;
+      break;
+    default:
+      buttonClass += ` ${buttonStyles.default}`;
+      break;
+  }
+
+  // Lets developers apply their own styling
+  if (className) {
+    buttonClass += ` ${className}`;
+  }
+
+  // Set font to poppins
+  buttonClass += ` ${poppins.className}`;
+
+  return (
+    <button ref={ref} className={buttonClass} {...props}>
+      {label}
+    </button>
+  );
+});

frontend/src/components/TagButton.tsx

@@ -0,0 +1,47 @@
+import { Poppins } from "next/font/google";
+import React from "react";
+
+import styles from "../styles/TagButton.module.css";
+
+type TagButtonStyles = {
+  button: string;
+  tagButton: string;
+  disabled: string;
+};
+
+const poppins = Poppins({ weight: "400", style: "normal", subsets: [] });
+
+export type TagButtonProps = {
+  label: string;
+  disabled?: boolean;
+} & React.ComponentProps<"button">;
+
+export const TagButton = React.forwardRef<HTMLButtonElement, TagButtonProps>(function TagButton(
+  { label, disabled = false, className, ...props }: TagButtonProps,
+  ref,
+) {
+  const tagButtonStyles: TagButtonStyles = styles as TagButtonStyles;
+
+  let buttonClass = tagButtonStyles.button;
+
+  // disabled buttons have different styling
+  if (disabled) {
+    buttonClass += ` ${tagButtonStyles.disabled}`;
+  } else {
+    buttonClass += ` ${tagButtonStyles.tagButton}`;
+  }
+
+  // Lets developers apply their own styling
+  if (className) {
+    buttonClass += ` ${className}`;
+  }
+
+  // Set font to Poppins
+  buttonClass += ` ${poppins.className}`;
+
+  return (
+    <button ref={ref} disabled={disabled} className={buttonClass} {...props}>
+      {label}
+    </button>
+  );
+});

frontend/src/pages/_app.tsx

@@ -1,5 +1,6 @@
 // These styles apply to every route in the application
 import "../styles/global.css";
+import "../styles/globals.css";
 
 import { Poppins } from "next/font/google";
 

frontend/src/styles/Button.module.css

@@ -0,0 +1,75 @@
+.button {
+  width: auto;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  letter-spacing: 2%;
+  line-height: 150%;
+  font-size: 16px;
+}
+
+/* styling for default size */
+.default {
+  height: 3rem;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.small {
+  height: 2.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.disabled {
+  background-color: rgb(var(--gray-2));
+  color: rgb(--var(white));
+  border: none;
+}
+
+.primary {
+  background-color: rgb(var(--primary-dark-green));
+  color: rgb(var(--white));
+  border: none;
+}
+.primary:hover {
+  background-color: rgba(var(--primary-dark-green), 80%);
+}
+.primary:active {
+  background-color: rgba(var(--primary-dark-green), 88%);
+}
+
+.secondary {
+  background-color: rgb(var(--white));
+  color: rgb(var(--primary-dark-green));
+  border: 0.0625rem solid rgb(var(--primary-dark-green));
+}
+.secondary:hover {
+  background-color: rgba(var(--primary-dark-green), 22%);
+}
+.secondary:active {
+  background-color: rgba(var(--primary-dark-green), 20%);
+}
+
+.destructive {
+  background-color: rgb(var(--error-red));
+  color: rgb(var(--white));
+  border: none;
+}
+.destructive:hover {
+  background-color: rgba(var(--error-red), 88%);
+}
+.destructive:active {
+  background-color: rgba(var(--error-red), 92%);
+}
+
+.destructiveSecondary {
+  background-color: rgb(var(--white));
+  color: rgb(var(--error-red));
+  border: 0.0625rem solid rgb(var(--error-red));
+}
+.destructiveSecondary:hover {
+  background-color: rgba(var(--error-red), 22%);
+}
+.destructiveSecondary:active {
+  background-color: rgba(var(--error-red), 20%);
+}

frontend/src/styles/TagButton.module.css

@@ -0,0 +1,28 @@
+.button {
+  width: auto;
+  height: 2.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 4rem;
+  cursor: pointer;
+  letter-spacing: 2%;
+  line-height: 150%;
+  font-size: 16px;
+}
+
+.tagButton {
+  border: 1px solid rgb(var(--black));
+  background-color: rgb(var(--white));
+}
+.tagButton:hover {
+  background-color: rgba(var(--white), 22%);
+}
+.tagButton:active {
+  background-color: rgba(var(--white), 20%);
+}
+
+.disabled {
+  background-color: rgb(var(--gray-2));
+  color: rgb(var(--white));
+  border: none;
+}

frontend/src/styles/globals.css

@@ -0,0 +1,9 @@
+:root {
+  --primary-light-green: 238, 247, 247;
+  --primary-dark-green: 0, 104, 103;
+  --primary-text: 32, 33, 36;
+  --white: 255, 255, 255;
+  --error-red: 185, 59, 69;
+  --gray-2: 216, 216, 216;
+  --black: 0, 0, 0;
+}