Merge pull request #2215 from bakdata/feature/fix-input-range-header-…

…styles Fix input range header style - reuse Label
ingef · Nov 17, 2021 · 2ceef5c · 2ceef5c
2 parents 7a5bd5c + 55e7e72
commit 2ceef5c
Showing 1 changed file with 4 additions and 11 deletions.
diff --git a/frontend/src/js/ui-components/InputRangeHeader.tsx b/frontend/src/js/ui-components/InputRangeHeader.tsx
@@ -1,10 +1,11 @@
-import styled from "@emotion/styled";
 import { FC } from "react";
 
 import { IndexPrefix } from "../common/components/IndexPrefix";
 import { exists } from "../common/helpers/exists";
 import InfoTooltip from "../tooltip/InfoTooltip";
 
+import Label from "./Label";
+
 interface PropsT {
   className?: string;
   label: string;
@@ -14,14 +15,6 @@ interface PropsT {
   disabled?: boolean;
 }
 
-const Container = styled("p")<{ disabled?: boolean }>`
-  font-size: ${({ theme }) => theme.font.sm};
-  margin: 6px 0 3px;
-  color: ${({ theme, disabled }) => (disabled ? theme.col.gray : "initial")};
-  display: flex;
-  align-items: center;
-`;
-
 const InputRangeHeader: FC<PropsT> = ({
   label,
   indexPrefix,
@@ -31,12 +24,12 @@ const InputRangeHeader: FC<PropsT> = ({
   disabled,
 }) => {
   return (
-    <Container className={className} disabled={disabled}>
+    <Label className={className} disabled={disabled}>
       {exists(indexPrefix) && <IndexPrefix># {indexPrefix}</IndexPrefix>}
       {label}
       {unit && ` ( ${unit} )`}
       {tooltip && <InfoTooltip text={tooltip} />}
-    </Container>
+    </Label>
   );
 };