From f8711abbf610b24bd94569b671c93fbb5e914ef7 Mon Sep 17 00:00:00 2001
From: Kenneth Jannette <sj@sjdev.co>
Date: Thu, 25 Jan 2024 15:10:51 -0600
Subject: [PATCH] more

---
 src/pageElements/Radio.js | 24 ++++++++++++++++--------
 src/styles/radio.scss     | 10 ++++++++++
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/pageElements/Radio.js b/src/pageElements/Radio.js
index 45a4310..955c236 100644
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -18,22 +18,30 @@ const Radio = (props) => {
         {value == activeRadioOption ? (
           <>
             <div className="radio-circle-container">
-              <div className="radio-circle-box">
-                <CircleFill />
+              <div className="radio-circle-top">
+                <div className="radio-circle-box">
+                  <CircleFill color="#1a76c7" size="20px" />
+                </div>
+                <div className="radio-name-box"> {`${name}`} </div>
               </div>
-              <div className="radio-name-box"> {`${name}`} </div>
             </div>
-            <div className="radio-description-box"> {`${description}`} </div>
+            <div className="radio-circle-lower">
+              <div className="radio-description-box"> {`${description}`} </div>
+            </div>
           </>
         ) : (
           <>
             <div className="radio-circle-container">
-              <div className="radio-circle-box">
-                <Circle />
+              <div className="radio-circle-top">
+                <div className="radio-circle-box">
+                  <Circle color="#1a76c7" size="20px" />
+                </div>
+                <div className="radio-name-box">{`${name}`} </div>
               </div>
-              <div className="radio-name-box">{`${name}`} </div>
             </div>
-            <div className="radio-description-box"> {`${description}`} </div>
+            <div className="radio-circle-lower">
+              <div className="radio-description-box"> {`${description}`} </div>
+            </div>
           </>
         )}
       </div>
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
index 1a00fab..ba7cce6 100644
--- a/src/styles/radio.scss
+++ b/src/styles/radio.scss
@@ -8,11 +8,21 @@
   border: 1px solid #d4d4d4;
 }
 
+.radio-circle-top {
+  display: flex;
+  flex-direction: row;
+}
+.radio-circle-bottom {
+  display: flex;
+  flex-direction: column;
+}
 .radio-circle-box {
+  height: 40px;
   margin: 12px 8px;
 }
 
 .radio-name-box {
+  height: 40px;
   font-family: var(--main-font);
   font-family: Roboto;
   font-weight: 500;