Add styling to Heading component

weaveworks · Mar 2, 2022 · 13947c0 · 13947c0
1 parent 6c4e4a6
commit 13947c0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 28 deletions.
diff --git a/ui/components/Heading.tsx b/ui/components/Heading.tsx
@@ -8,9 +8,31 @@ type Props = {
 };
 
 function Heading({ className, children, level }: Props) {
-  return React.createElement(`h${level}`, { className }, children);
+  return React.createElement(
+    `h${level}`,
+    { className: `${className} h${level}` },
+    children
+  );
 }
 
 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;
+    margin-top: 0;
+    margin-bottom: 24px;
+    font-weight: 400;
+    color: #737373;
+  }
+
+  &.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={1}>{s.name}</Heading>
         <div className="page-status">
           {ok ? (
             <Icon
@@ -78,7 +76,7 @@ function SourceDetail({ className, name, info }: Props) {
         <Alert severity="error" title="Error" message={error.message} />
       )}
       <div>
-        <Heading level={3}>{s.type}</Heading>
+        <Heading level={2}>{s.type}</Heading>
       </div>
       <div>
         <InfoList items={items} />
@@ -96,14 +94,6 @@ export default styled(SourceDetail).attrs({ className: SourceDetail.name })`
     margin-bottom: 12px;
   }
 
-  h3 {
-    font-size: 20px;
-    margin-top: 0;
-    margin-bottom: 24px;
-    font-weight: 400;
-    color: #737373;
-  }
-
   ${InfoList} {
     margin-bottom: 60px;
   }

diff --git a/ui/pages/v2/KustomizationDetail.tsx b/ui/pages/v2/KustomizationDetail.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import styled from "styled-components";
 import Flex from "../../components/Flex";
+import Heading from "../../components/Heading";
 import InfoList from "../../components/InfoList";
 import Interval from "../../components/Interval";
 import KubeStatusIndicator from "../../components/KubeStatusIndicator";
@@ -27,14 +28,10 @@ function KustomizationDetail({ className, name }: Props) {
   const kustomization = data?.kustomization;
 
   return (
-    <Page
-      title={kustomization?.name}
-      loading={isLoading}
-      error={error}
-      className={className}
-    >
+    <Page loading={isLoading} error={error} className={className}>
       <Info>
-        <h3>{kustomization?.namespace}</h3>
+        <Heading level={1}>{kustomization?.name}</Heading>
+        <Heading level={2}>{kustomization?.namespace}</Heading>
         <InfoList
           items={[
             [
@@ -75,10 +72,4 @@ function KustomizationDetail({ className, name }: Props) {
 
 export default styled(KustomizationDetail).attrs({
   className: KustomizationDetail.name,
-})`
-  h3 {
-    color: #737373;
-    font-weight: 200;
-    margin-top: 12px;
-  }
-`;
+})``;