Fixing horizontal line for gas recommendations (#11890)

* Fixing horizontal line for gas recommendations

* Unify browser differences between Chrome and FF

* Remove duplicate style

* Remove browser hacks

Co-authored-by: Elliot Winkler <elliot.winkler@gmail.com>

ui/components/ui/radio-group/index.scss

@@ -20,33 +20,51 @@
     height: 20px;
   }
 
-  &__column-line {
+  &__column-inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &__column-line,
+  &__column-horizontal-line,
+  &__column-radio,
+  &__column-label {
+    flex: 1 1 auto;
+  }
+
+  &__column-start-connector {
+    width: calc(50% + 0.5px);
+    height: 6px;
+    border-left: 1px solid $ui-2;
+    border-bottom: 1px solid $ui-2;
+    align-self: flex-end;
+  }
+
+  &__column-end-connector {
+    width: calc(50% + 0.5px);
+    height: 6px;
+    border-right: 1px solid $ui-2;
+    border-bottom: 1px solid $ui-2;
+    align-self: flex-start;
+  }
+
+  &__column-vertical-line {
     width: 1px;
     height: 5px;
-    background-color: $ui-2;
+    border-left: 1px solid $ui-2;
-    margin: 0 auto;
   }
 
   &__column-horizontal-line {
     height: 1px;
-    background-color: $ui-2;
+    border-bottom: 1px solid $ui-2;
     width: 100%;
   }
 
-  &__column:first-child &__column-horizontal-line {
-    width: 50px;
-    margin-left: 50px;
-  }
-
-  &__column:last-child &__column-horizontal-line {
-    width: 51px;
-  }
-
   &__column-radio {
-    margin-inline-end: 1px;
-
     input {
       cursor: pointer;
+      margin: 0;
     }
   }
 

ui/components/ui/radio-group/radio-group.component.js

@@ -9,6 +9,25 @@ import {
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
 
+function Connector({ isFirst, isLast }) {
+  if (isFirst) {
+    return <div className="radio-group__column-start-connector" />;
+  } else if (isLast) {
+    return <div className="radio-group__column-end-connector" />;
+  }
+  return (
+    <>
+      <div className="radio-group__column-vertical-line" />
+      <div className="radio-group__column-horizontal-line" />
+    </>
+  );
+}
+
+Connector.propTypes = {
+  isFirst: PropTypes.boolean,
+  isLast: PropTypes.boolean,
+};
+
 export default function RadioGroup({ options, name, selectedValue, onChange }) {
   const t = useContext(I18nContext);
 
@@ -22,11 +41,11 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
         'radio-group--has-recommendation': hasRecommendation,
       })}
     >
-      {options.map((option) => {
+      {options.map((option, index) => {
         const checked = option.value === selectedValue;
         return (
           <div className="radio-group__column" key={`${name}-${option.value}`}>
-            <label>
+            <label className="radio-group__column-inner">
               {hasRecommendation && (
                 <Typography
                   color={COLORS.SUCCESS3}
@@ -45,8 +64,10 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
                   onChange={() => onChange?.(option.value)}
                 />
               </div>
-              <div className="radio-group__column-line"></div>
+              <Connector
-              <div className="radio-group__column-horizontal-line"></div>
+                isFirst={index === 0}
+                isLast={index === options.length - 1}
+              />
               <Typography
                 color={checked ? COLORS.BLACK : COLORS.UI4}
                 fontWeight={FONT_WEIGHT.BOLD}