more

src/Components/SignupPage/SignupPage.js

@@ -72,9 +72,11 @@ const SignupPage = () => {
     const temp = value;
     setActiveRadioOption(temp);
   };
+
   signupRadioFields.map((option) => {
     console.log(option.value);
   });
+
   const validateData = () => {
     const newData = getValidatedFormData(data, signupFields);
     const hasErrors = isFormDataHasErrors(newData);

src/pageElements/Radio.js

@@ -16,16 +16,18 @@ const Radio = (props) => {
       >
         {value == activeRadioOption ? (
           <div className="radio-circle-container">
-            <div>
+            <div className="radio-circle-box">
               <CircleFill />
             </div>
 
-            <div> {`checked: ${name}`} </div>
+            <div className="radio-name-box"> {`${name}`} </div>
           </div>
         ) : (
           <div className="radio-circle-container">
-            <Circle />
+            <div className="radio-circle-box">
-            <div> {`unchecked: ${name}`} </div>
+              <Circle />
+            </div>
+            <div className="radio-name-box">{`${name}`} </div>
           </div>
         )}
       </div>

src/styles/radio.scss

@@ -1,5 +1,17 @@
 .radio-circle-container {
   display: flex;
   flex-direction: row;
-  margin: 8px;
+  background-color: #fff;
+  height: 160px;
+  margin: 10px 8px 0px 8px;
+  border-radius: 5px;
+  border: 1px solid #d4d4d4;
+}
+
+.radio-circle-box {
+  margin: 12px 8px;
+}
+
+.radio-name-box {
+  margin: 12px 8px;
 }