fix: transparent background for docs panel (#4494)

Author: ChitlangeSahas

src/homepageExperience/containers/HomepageContainer.tsx

@@ -62,8 +62,13 @@ export const HomepageContainer: FC = () => {
     <>
       <Page titleTag={pageTitleSuffixer(['Get Started'])}>
         <Page.Header fullWidth={false}>
-          {/* Need an empty div so the upgrade button aligns to the right. (Because clockface uses space-between to justifyContent)*/}
-          <div />
+          <Heading
+            id="first-mile--header"
+            element={HeadingElement.H1}
+            testID="home-page--header"
+          >
+            Get Started
+          </Heading>
           <RateLimitAlert location="firstMile.homepage" />
         </Page.Header>
         <Page.Contents scrollable={true} fullWidth={false}>
@@ -74,13 +79,6 @@ export const HomepageContainer: FC = () => {
                   direction={FlexDirection.Column}
                   alignItems={AlignItems.Stretch}
                 >
-                  <Heading
-                    id="first-mile--header"
-                    element={HeadingElement.H1}
-                    testID="home-page--header"
-                  >
-                    Get Started
-                  </Heading>
                   <h5>
                     Write and query data using the programming language of your
                     choice
@@ -176,14 +174,14 @@ export const HomepageContainer: FC = () => {
               <Grid.Column
                 widthSM={Columns.Four}
                 widthMD={Columns.Three}
-                style={{marginTop: '40px'}}
+                style={{marginTop: '-8px'}}
               >
                 {isFlagEnabled('uiUnificationFlag') ? (
                   <UsageProvider>
-                    <Resources />
+                    <Resources style={{backgroundColor: InfluxColors.Grey5}} />
                   </UsageProvider>
                 ) : (
-                  <Resources />
+                  <Resources style={{backgroundColor: InfluxColors.Grey5}} />
                 )}
               </Grid.Column>
             </Grid.Row>

src/me/components/Resources.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC, memo, useContext} from 'react'
+import React, {CSSProperties, FC, memo, useContext} from 'react'
 import {
   Panel,
   FlexBox,
@@ -17,7 +17,11 @@ import UsagePanel from 'src/me/components/UsagePanel'
 import DocSearchWidget from 'src/me/components/DocSearchWidget'
 import VersionInfo from 'src/shared/components/VersionInfo'
 
-const ResourceLists: FC = () => {
+type OwnProps = {
+  style?: CSSProperties
+}
+
+const ResourceLists: FC<OwnProps> = (props: OwnProps) => {
   const {paygCreditEnabled} = useContext(UsageContext)
 
   return (
@@ -28,15 +32,15 @@ const ResourceLists: FC = () => {
       margin={ComponentSize.Small}
     >
       <Panel testID="documentation--panel">
-        <Panel.Body>
+        <Panel.Body style={props.style}>
           <DocSearchWidget />
         </Panel.Body>
       </Panel>
       {isFlagEnabled('uiUnificationFlag') && paygCreditEnabled && (
         <UsagePanel />
       )}
       <Panel>
-        <Panel.Footer>
+        <Panel.Footer style={props.style}>
           <VersionInfo />
         </Panel.Footer>
       </Panel>