Descriptions added

Workly/src/pages/Signup/components/ButtonGroup.Modules.css

@@ -15,7 +15,7 @@
     background-color: #ffffff;
     color: white;
     border: 1px solid lightgray;
-    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 1);
+    box-shadow: 0 2px 5px -2px rgb(0, 0, 0, 1);
     cursor: pointer;
     display: flex;
     justify-content: center;
@@ -68,12 +68,26 @@
 .round-button.active {
     animation: fill-border 0.1s cubic-bezier(0.42, 0, 1, 1) forwards;
     transform: scale(1.1);
+    box-shadow: 0 5px 5px -2px rgb(0, 0, 0, 1);
+}
+
+.description{
+    font-size: 1rem;
+    text-align: center;
+    padding-top: 1rem;
+    color: rgb(78, 78, 78);
+}
+
+.button-div{
+    display: grid;
+    align-items: center;
+    justify-content: center;
 }
 
 .continue-button{
     width: 12rem;
     height: 3rem;
-    border-radius: 5%; /* Makes it round */
+    border-radius: 5px;
     border: none;
     background-color: black;
     color: white;

Workly/src/pages/Signup/components/ButtonGroup.tsx

@@ -7,29 +7,37 @@ const ButtonGroup = () => {
   return (
     <>
     <div className={"Div2"}>
-      <button
-        className={`round-button ${activeButton === "IAPPLY" ? "active" : ""}`}
-        onClick={() => setActiveButton("IAPPLY")}
-      >
-        <div className={"buttonTitle"}>
-            IAPPLY
+        <div className={"button-div"}>
+        <button
+            className={`round-button ${activeButton === "IAPPLY" ? "active" : ""}`}
+            onClick={() => setActiveButton("IAPPLY")}
+        >
+            <div className={"buttonTitle"}>
+                IAPPLY
+            </div>
+            {activeButton === "IAPPLY" && (
+                <span className="ic--baseline-check-circle"></span>
+            )}
+        </button>
+        <text className={"description"}>For applicants</text>
         </div>
-        {activeButton === "IAPPLY" && (
-              <span className="ic--baseline-check-circle"></span>
-        )}
-      </button>
-      <button
-        className={`round-button ${activeButton === "IHIRE" ? "active" : ""}`}
-        onClick={() => setActiveButton("IHIRE")}
-      >
-        <div className={"buttonTitle"}>
-            IHIRE
+        
+        <div className={"button-div"}>
+            <button
+                className={`round-button ${activeButton === "IHIRE" ? "active" : ""}`}
+                onClick={() => setActiveButton("IHIRE")}
+            >
+                <div className={"buttonTitle"}>
+                    IHIRE
+                </div>
+                {activeButton === "IHIRE" && (
+                    <span className="ic--baseline-check-circle"></span>
+                )}
+            </button>
+            <text className={"description"}>For recruiters</text>
         </div>
-        {activeButton === "IHIRE" && (
-              <span className="ic--baseline-check-circle"></span>
-        )}
-      </button>
     </div>
+
     <button className={`continue-button ${activeButton ? "active" : "inactive"}`}>
         <div className="buttonTitle">
             CONTINUE <span className="line-md--arrow-up"></span>