Add styling to Heading component

weaveworks · Mar 2, 2022 · bfb57cc · bfb57cc
1 parent 1926245
commit bfb57cc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/ui/components/Heading.tsx b/ui/components/Heading.tsx
@@ -8,9 +8,27 @@ type Props = {
 };
 
 function Heading({ className, children, level }: Props) {
-  return React.createElement(`h${level}`, { className }, children);
+  return (
+    <div className={className}>
+      {React.createElement(`h${level}`, { className }, children)}
+    </div>
+  );
 }
 
 export default styled(Heading).attrs({ className: Heading.name })`
-  font-size: 20px;
+  h1 {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  h2 {
+    font-size: 20px;
+    line-height: 24px;
+  }
+
+  h3 {
+    font-size: 14px;
+    line-height: 17px;
+  }
 `;
diff --git a/ui/components/SourceDetail.tsx b/ui/components/SourceDetail.tsx
@@ -53,9 +53,7 @@ function SourceDetail({ className, name, info }: Props) {
   return (
     <div className={className}>
       <Flex align wide between>
-        <div>
-          <Heading level={2}>{s.name}</Heading>
-        </div>
+        <Heading level={2}>{s.name}</Heading>
         <div className="page-status">
           {ok ? (
             <Icon