fix: templates page font sizes (#3182)

Author: ChitlangeSahas

src/templates/components/CommunityTemplateHumanReadableResource.tsx

@@ -11,17 +11,18 @@ import {event} from 'src/cloud/utils/reporting'
 // Types
 import {
   AppState,
-  Dashboard,
-  Task,
-  Label,
   Bucket,
-  Telegraf,
-  Variable,
-  ResourceType,
   Check,
+  Dashboard,
+  Label,
   NotificationEndpoint,
   NotificationRule,
+  ResourceType,
+  Task,
+  Telegraf,
+  Variable,
 } from 'src/types'
+import {Heading, HeadingElement} from '@influxdata/clockface'
 
 interface ComponentProps {
   link: string
@@ -51,7 +52,9 @@ const CommunityTemplateHumanReadableResourceUnconnected: FC<Props> = ({
 
   return (
     <Link to={link} onClick={recordClick}>
-      <code>{humanName}</code>
+      <Heading element={HeadingElement.H5}>
+        <code>{humanName}</code>
+      </Heading>
     </Link>
   )
 }

src/templates/components/CommunityTemplatesResourceSummary.tsx

@@ -3,7 +3,7 @@ import React, {FC, useState} from 'react'
 import classnames from 'classnames'
 
 // Components
-import {Icon, IconFont} from '@influxdata/clockface'
+import {Heading, HeadingElement, Icon, IconFont} from '@influxdata/clockface'
 import {CommunityTemplateHumanReadableResource} from 'src/templates/components/CommunityTemplateHumanReadableResource'
 
 // Types
@@ -49,7 +49,9 @@ export const CommunityTemplatesResourceSummary: FC<Props> = ({
       case 'Bucket': {
         return (
           <tr key={`${resource.templateMetaName}-${stackID}-${resource.kind}`}>
-            <td>{resource.kind}</td>
+            <td>
+              <Heading element={HeadingElement.H5}>{resource.kind}</Heading>
+            </td>
             <td>
               <CommunityTemplateHumanReadableResource
                 link={`/orgs/${orgID}/load-data/buckets`}
@@ -194,7 +196,9 @@ export const CommunityTemplatesResourceSummary: FC<Props> = ({
         onClick={handleToggleTable}
       >
         <Icon className={caretClassName} glyph={IconFont.CaretRight} />
-        <h6>{toggleText}</h6>
+        <Heading element={HeadingElement.H4} style={{lineHeight: '40px'}}>
+          {toggleText}
+        </Heading>
       </div>
       {summaryState === 'expanded' && (
         <table className="community-templates--resources-table">

src/templates/containers/CommunityTemplates.scss

@@ -99,6 +99,7 @@
 }
 
 .community-templates--resources-table {
+  margin-left: 1.4em;
   & > tbody > tr > td {
     padding-right: $cf-space-2xs;
     font-size: 13px;
@@ -109,10 +110,6 @@
   display: flex;
   align-items: center;
 
-  h6 {
-    margin: 0;
-  }
-
   &:hover {
     cursor: pointer;
   }