Merge pull request #19 from ChangePlusPlusVandy/app-84-button-input-d…

…esigns

APP 84 Update Button, Select, and Input Designs

src/components/ButtonComponent/ButtonComponent.definitions.ts → src/components/Button/Button.definitions.ts

@@ -2,7 +2,7 @@
 export interface ButtonProps {
   variant?: ButtonVariant;
   color?: ButtonColor;
-  onClick: () => void;
+  onClick?: () => void;
   text: string;
   loading?: boolean;
   disabled?: boolean;

src/components/ButtonComponent/ButtonComponent.module.css → src/components/Button/Button.module.css

@@ -1,28 +1,19 @@
 .button {
   font-family: "Inter", sans-serif;
-  font-weight: 600;
-  padding: 10px 20px;
+  padding: 0.625rem 1.25rem;
   border: none;
-  border-radius: 10px;
-  border-radius: 10px;
+  border-radius: var(--border-radius-small);
   cursor: pointer;
-  transition: 0.3s ease-in-out;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+  transition: var(--transition-duration-long) ease-in-out;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
-}
-
-.button:hover {
-  transform: translateY(-1px);
-  transition: 0.3s ease-in-out;
-  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.3);
+  width: fit-content;
 }
 
 .buttonText {
   visibility: visible;
-  margin-right: 10px;
+  margin-right: 0.625rem;
 }
 
 /* Hides the text when loading */
@@ -37,52 +28,52 @@
   align-items: center;
   position: absolute;
   height: 100%;
-  width: 30px;
-  right: 10px;
+  width: 2rem;
+  right: 0.625rem;
 }
 
 .Compact {
-  padding: 5px 10px;
-  font-size: 18px;
+  padding: 0.3125rem 0.625rem;
+  font-size: 1.125rem;
 }
 
 .Regular {
-  padding: 10px 20px;
-  font-size: 20px;
+  padding: 0.625rem 1.25rem;
+  font-size: 1.25rem;
 }
 
 .Large {
-  padding: 15px 20px;
-  font-size: 26px;
+  padding: 0.9375rem 1.25rem;
+  font-size: 1.625rem;
 }
 
 .Blue {
-  background-color: rgb(68, 131, 198);
+  background-color: var(--miracle-color-blue);
   color: white;
 }
 
 .Yellow {
-  background-color: rgb(255, 255, 105);
+  background-color: var(--miracle-color-yellow);
   color: black;
 }
 
 .Green {
-  background-color: rgb(119, 237, 119);
+  background-color: var(--miracle-color-green);
   color: white;
 }
 
 .Grey {
-  background-color: rgb(98, 98, 98);
+  background-color: var(--miracle-color-medium-dark);
   color: white;
 }
 
 .Red {
-  background-color: rgb(250, 117, 117);
+  background-color: var(--miracle-color-red);
   color: white;
 }
 
 .Black {
-  background-color: black;
+  background-color: var(--miracle-color-dark);
   color: white;
 }
 
@@ -95,5 +86,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: 10px;
+  padding-left: 0.625rem;
 }

src/components/ButtonComponent/ButtonComponent.tsx → src/components/Button/Button.tsx

@@ -1,9 +1,9 @@
-import styles from "./ButtonComponent.module.css";
+import styles from "./Button.module.css";
 import {
   ButtonVariant,
   type ButtonProps,
   ButtonColor,
-} from "./ButtonComponent.definitions";
+} from "./Button.definitions";
 import { MoonLoader } from "react-spinners";
 
 const Button = ({
@@ -30,7 +30,7 @@ const Button = ({
       disabled={disabled || loading}
       style={{ ...extraStyles }}
     >
-      {text}
+      <h4>{text}</h4>
       {loading && (
         <div className={styles.spinner}>
           <MoonLoader size={loaderSize} color="#FFFFFF" />

src/components/ButtonComponent/tests/ButtonComponent.test.tsx → src/components/Button/tests/ButtonComponent.test.tsx

@@ -1,5 +1,5 @@
-import Button from "../ButtonComponent";
-import { ButtonColor, ButtonVariant } from "../ButtonComponent.definitions";
+import Button from "../Button";
+import { ButtonColor, ButtonVariant } from "../Button.definitions";
 import { render } from "@testing-library/react";
 const onClick = jest.fn();
 

src/components/InputComponent/InputComponent.definitions.ts → src/components/Input/Input.definitions.ts

@@ -4,8 +4,8 @@ export interface ReusableInputProps {
   name: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: UseFormRegister<any>;
-  error: string | undefined;
-  label: string;
-  type: string;
-  placeholder: string;
+  error?: string;
+  label?: string;
+  type?: string;
+  placeholder?: string;
 }

src/components/Input/Input.module.css

@@ -0,0 +1,55 @@
+.form-field {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  max-width: 100%;
+}
+
+.form-field input {
+  max-width: 100%;
+  padding: 0.625rem;
+  border: 0.0625rem solid var(--miracle-color-medium);
+  font-size: 1rem;
+  transition: 0.2s ease-in-out;
+  font-family: "Inter", sans-serif;
+}
+
+.form-field input:focus {
+  outline: none;
+  border: 0.0625rem solid var(--miracle-color-red-extra-dark);
+  transition: var(--transition-duration-short) ease-in-out;
+}
+
+.form-field input:hover {
+  outline: none;
+  border: 0.0625rem solid var(--miracle-color-red-extra-dark);
+  transition: var(--transition-duration-short) ease-in-out;
+}
+
+.form-field input::placeholder {
+  font-family: "Inter", sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.label-and-error {
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  font-family: "Inter", sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin: 0rem 0rem 0.125rem 0.3125rem;
+  color: var(--miracle-color-medium-dark);
+}
+
+.error-text {
+  color: var(--miracle-color-red-extra-dark);
+  margin-left: 0.375rem;
+  font-size: 0.875rem;
+  font-family: "Inter", sans-serif;
+  margin: 0rem 0rem 0.1825rem 0.3125rem;
+  font-weight: 500;
+}

src/components/InputComponent/InputComponent.tsx → src/components/Input/Input.tsx

@@ -1,23 +1,23 @@
-import styles from "./InputComponent.module.css";
-import type { ReusableInputProps } from "./InputComponent.definitions";
+import styles from "./Input.module.css";
+import type { ReusableInputProps } from "./Input.definitions";
 
-const CustomInput = ({
+const Input = ({
   name,
   register,
   error,
   label,
-  type,
+  type = "text",
   placeholder,
 }: ReusableInputProps) => {
   return (
     <div className={styles["form-field"]}>
       <div className={styles["label-and-error"]}>
-        <p className={styles["label"]}>{label}</p>
+        {label && <p className={styles["label"]}>{label}</p>}
         {error && <p className={styles["error-text"]}>{"(" + error + ")"}</p>}
       </div>
       <input placeholder={placeholder} type={type} {...register(name)} />
     </div>
   );
 };
 
-export default CustomInput;
+export default Input;

src/components/SelectComponent/SelectComponent.definitions.ts → src/components/Select/Select.definitions.ts

@@ -5,7 +5,7 @@ export interface SelectProps {
   name: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   register: UseFormRegister<any>;
-  label: string;
   options: string[];
-  placeholder: string;
+  label?: string;
+  placeholder?: string;
 }

src/components/Select/Select.module.css

@@ -0,0 +1,40 @@
+.selectWrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.selectWrapper label {
+  font-family: "Inter", sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin: 0rem 0rem 0.125rem 0.3125rem;
+  color: var(--miracle-color-medium-dark);
+}
+
+.selectWrapper select {
+  font-family: "Inter", sans-serif;
+  max-width: 100%;
+  padding: 0.5rem;
+  border: 0.0625rem solid var(--miracle-color-medium);
+  font-size: 1rem;
+  transition: var(--transition-duration-short) ease-in-out;
+  color: var(--miracle-color-dark);
+  font-weight: 400;
+  outline: none;
+  height: fit-content;
+  width: 100%;
+}
+
+.selectWrapper select:focus {
+  outline: none;
+  border: 0.0625rem solid var(--miracle-color-red-extra-dark);
+  transition: var(--transition-duration-short) ease-in-out;
+}
+
+.selectWrapper select:hover {
+  outline: none;
+  border: 0.0625rem solid var(--miracle-color-red-extra-dark);
+  transition: var(--transition-duration-short) ease-in-out;
+}

src/components/SelectComponent/SelectComponent.tsx → src/components/Select/Select.tsx

@@ -1,6 +1,6 @@
-import style from "./SelectComponent.module.css";
+import style from "./Select.module.css";
 import type { ReactElement } from "react";
-import type { SelectProps } from "./SelectComponent.definitions.tsx";
+import type { SelectProps } from "./Select.definitions.ts";
 
 const Select = ({
   name,

src/components/SelectComponent/tests/ButtonComponent.test.tsx → src/components/Select/tests/ButtonComponent.test.tsx

@@ -1,4 +1,4 @@
-import Select from "../SelectComponent";
+import Select from "../Select";
 import { render } from "@testing-library/react";
 
 describe("SelectComponent Tests", () => {