Add ProgressBar and BackButton Components (#129)

* Add ProgressBar Component

* Add changes to ProgressBar and BackButton

* Use colors from tailwind config for back button

* remove unnecessary stroke property on chevron

* Fix silly little mistake with class names

web/components/atoms/BackButton.tsx

@@ -0,0 +1,37 @@
+import { MouseEventHandler } from "react";
+
+interface Props {
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+}
+
+export default function BackButton({ onClick, disabled }: Props) {
+  return (
+    <button
+      className="group flex items-center gap-[2px] text-medium-gray"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M15 18L9 12L15 6"
+          className={`stroke-medium-gray ${disabled ? "stroke-dark-gray" : "group-hover:stroke-dark-gray"}`}
+          strokeWidth="3"
+          strokeLinecap="square"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <div
+        className={`${disabled ? "text-dark-gray" : "group-hover:text-dark-gray"}`}
+      >
+        Back
+      </div>
+    </button>
+  );
+}

web/components/atoms/ProgressBar.tsx

@@ -0,0 +1,15 @@
+interface Props {
+  /** A number between 0 and 100 indicating the progress percentage */
+  progress: number;
+}
+
+export default function ProgressBar({ progress }: Props) {
+  return (
+    <div className="h-[6px] relative rounded-full bg-empty-gray">
+      <div
+        style={{ width: `${progress}%` }}
+        className="rounded-full bg-mbb-pink absolute top-0 left-0 bottom-0 transition-all"
+      />
+    </div>
+  );
+}

web/tailwind.config.js

@@ -25,6 +25,7 @@ module.exports = {
         "dark-gray": "#666666",
         "icon-gray": "#BFBFBF",
         "icon-light-gray": "#DFE3E8",
+        "empty-gray": "#E3E3E3",
         dark: {
           100: "#BFBFBF",
           400: "#666666",