PROD-2708 #comment Improve readability of the bug hunt package

Author: asadath1395

src-ts/lib/form/form-groups/form-card-set/FormCardSet.module.scss

@@ -17,9 +17,10 @@
         flex: 1 1 0;
         margin-right: $space-xl;
         border-radius: $space-xs;
-        padding: $space-lg 0;
+        padding: $space-xxl 0px 0px;
         background-color: $black-5;
         position: relative;
+        height: calc($space-xl * 30);
 
         .popular-card {
             display: flex;
@@ -61,19 +62,25 @@
             align-items: center;
 
             h3 {
-                margin: $space-lg;
+                margin: $space-xxl $space-lg;
                 font-weight: 500;
-                font-size: $space-mx;
+                font-size: calc($space-mx + $space-xs);
                 line-height: $space-mx;
-                margin-top: $space-xxl;
+            }
+
+            .body-medium-bold {
+                font-weight: 700;
+                font-size: $space-xxl;
+                font-family: "Roboto";
+                padding: 0;
+                line-height: calc($space-xxl - 2px);
             }
 
             &.feature {
                 visibility: hidden;
 
                 h3 {
-                    margin: $space-lg;
-                    margin-top: $space-xxl;
+                    margin: $space-xxl $space-lg;
                     font-size: $space-xxxxl;
                 }
             }
@@ -82,9 +89,15 @@
                 h3 {
                     font-size: $space-xxxxl;
                     line-height: $space-xxxxl;
-                    margin-top: $space-md;
+                    margin-top: $space-sm;
                     margin-bottom: $space-xxl;
                 }
+
+                .body-medium-bold {
+                    font-size: $space-xl;
+                    line-height: $space-xxxxl;
+                    font-style: normal;
+                }
             }
         }
 
@@ -97,24 +110,36 @@
         }
 
         .card-section {
-            margin: $space-lg 0;
+            margin: $space-mx 0;
 
             .row {
                 height: auto;
+
+                &:last-child {
+                    .row-divider {
+                        &:last-child {
+                            display: block;
+                        }
+                    }
+                }
             }
 
             .row-divider {
                 height: $border-xs;
                 border-bottom: $border solid $black-10;
                 width: auto;
                 margin: 0;
+
+                &:last-child {
+                    display: none;
+                }
             }
 
             .card-row {
                 display: flex;
                 padding: $space-md;
                 align-items: center;
-                min-height: calc($space-lg + $space-mx);
+                min-height: calc($space-lg + $space-mx - 2px);
                 position: relative;
 
                 .card-row-col {
@@ -156,6 +181,7 @@
                 }
             }
             &.mobile {
+              margin-bottom: 0;
               .feature-name {
                 width: 100%;
               }
@@ -164,13 +190,14 @@
               }
             }
             &.feature {
-                margin: calc($space-lg - 0.2px) 0;
+                margin-top: $space-mx;
             }
         }
 
         &.feature {
             background-color: $tc-white;
             margin-right: 0;
+            flex-grow: 0.9;
 
             .card-row-col:nth-child(2) {
                 display: none;
@@ -188,9 +215,14 @@
     }
 
     svg.card-row-icon {
-        height: 14px;
-        width: 14px;
+        height: 24px;
+        width: 24px;
         display: inline;
         margin-right: 6px;
+
+        @include ltemd {
+          height: 16px;
+          width: 16px;
+      }
     }
 }

src-ts/lib/form/form-groups/form-card-set/FormCardSet.tsx

@@ -49,7 +49,7 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                         <div key={`card-${index}`}className={cn(styles['card'], selected && styles['selected'],  isMobile && card.mostPopular && styles['mobile-popular'], { [styles.feature]: index === 0, [styles.mobile]: isMobile })}>
                             { card.mostPopular && <div className={styles['popular-card']}>MOST POPULAR</div>}
                             <div className={cn(styles['card-header'], isMobile && styles['mobile'], { [styles.feature]: index === 0 })}>
-                                <div className='body-medium-bold'>{card.title}</div>
+                                <div className={styles['body-medium-bold']}>{card.title}</div>
                                 <h3>{formattedPrice}</h3>
                                 {getButton(card, selected)}
                             </div>
@@ -77,12 +77,13 @@ const FormCardSet: React.FC<FormCardSetProps> = ({ name, cards, onChange, value
                                                 {(
                                                     <span className={cn(styles['card-row-col'], styles['center'])}>
                                                         { row.valueIcon ?
-                                                            <IconOutline.CheckIcon width={18} height={16} /> :
+                                                            <IconOutline.CheckIcon width={28} height={20} /> :
                                                             <span className='body-main'>{row.text}</span>
                                                         }
                                                     </span>
                                                 )}
                                             </div>
+                                            <div className={styles['row-divider']}></div>
                                         </div>
                                     ))}
                                 </div>