m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fixing horizontal line for gas recommendations (#11890)

Browse Source 
* 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>
This commit is contained in:
ryanml 2021-09-02 10:12:47 -07:00 committed by GitHub
parent 8d9989cea0
commit cce623f5b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
ui/components/ui/radio-group/index.scss
View File

@ -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;
margin: 0 auto;
border-left: 1px solid $ui-2;
}
&__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;
}
}

29
ui/components/ui/radio-group/radio-group.component.js
View File

@ -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>
<div className="radio-group__column-horizontal-line"></div>
<Connector
isFirst={index === 0}
isLast={index === options.length - 1}
/>
<Typography
color={checked ? COLORS.BLACK : COLORS.UI4}
fontWeight={FONT_WEIGHT.BOLD}