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

Update slider.component.js (#19035)

This commit is contained in:
Harsh Shukla 2023-05-08 19:04:24 +05:30 committed by GitHub
parent da8cb0bbc0
commit 46f717feef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -4,13 +4,12 @@ import MaterialSlider from '@material-ui/core/Slider';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import { import {
Color, TextColor,
FONT_WEIGHT, TextVariant,
TypographyVariant,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import InfoTooltip from '../info-tooltip/info-tooltip'; import InfoTooltip from '../info-tooltip/info-tooltip';
import Typography from '../typography/typography'; import { Text } from '../../component-library';
const styles = { const styles = {
root: { root: {
@ -68,34 +67,24 @@ const Slider = ({
<div className="slider__heading"> <div className="slider__heading">
<div className="slider__heading-title"> <div className="slider__heading-title">
{titleText && ( {titleText && (
<Typography <Text variant={TextVariant.bodySmBold} as="h6">
tag={TypographyVariant.H6}
fontWeight={FONT_WEIGHT.BOLD}
variant={TypographyVariant.H6}
>
{titleText} {titleText}
</Typography> </Text>
)} )}
{tooltipText && ( {tooltipText && (
<InfoTooltip position="top" contentText={tooltipText} /> <InfoTooltip position="top" contentText={tooltipText} />
)} )}
{valueText && ( {valueText && (
<Typography <Text tag={TextVariant.bodyMd} color={TextColor.textAlternative}>
tag={TypographyVariant.paragraph}
color={Color.textAlternative}
>
{valueText} {valueText}
</Typography> </Text>
)} )}
</div> </div>
{titleDetail && ( {titleDetail && (
<div className="slider__heading-detail"> <div className="slider__heading-detail">
<Typography <Text tag={TextVariant.bodyMd} color={TextColor.textAlternative}>
tag={TypographyVariant.paragraph}
color={Color.textAlternative}
>
{titleDetail} {titleDetail}
</Typography> </Text>
</div> </div>
)} )}
</div> </div>
@ -103,12 +92,9 @@ const Slider = ({
<div className="slider__footer"> <div className="slider__footer">
<div className="slider__footer-info"> <div className="slider__footer-info">
{infoText && ( {infoText && (
<Typography <Text tag={TextVariant.bodyMd} color={TextColor.textAlternative}>
tag={TypographyVariant.paragraph}
color={Color.textAlternative}
>
{infoText} {infoText}
</Typography> </Text>
)} )}
</div> </div>
<div className="slider__footer-edit"> <div className="slider__footer-edit">