fix: subscriptions header (#4933)

Author: helenosheaa

src/writeData/subscriptions/components/BrokerDetails.scss

@@ -7,8 +7,7 @@
     position: fixed;
     background-color: $cf-grey-5;
     background-attachment: fixed;
-    width: 61%;
-    z-index: 9999;
+    z-index: 10;
     padding-bottom: 20px;
 
     &__broker-buttons {

src/writeData/subscriptions/components/BrokerDetails.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC} from 'react'
+import React, {FC, useContext} from 'react'
 import {useHistory} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 
@@ -27,6 +27,7 @@ import BrokerFormContent from 'src/writeData/subscriptions/components/BrokerForm
 // Utils
 import {getOrg} from 'src/organizations/selectors'
 import {event} from 'src/cloud/utils/reporting'
+import {AppSettingContext} from 'src/shared/contexts/app'
 
 // Types
 import {SUBSCRIPTIONS, LOAD_DATA} from 'src/shared/constants/routes'
@@ -56,11 +57,18 @@ const BrokerDetails: FC<Props> = ({
 }) => {
   const history = useHistory()
   const org = useSelector(getOrg)
+  const {navbarMode} = useContext(AppSettingContext)
+  const navbarOpen = navbarMode === 'expanded'
   return (
     <div className="update-broker-form" id="broker">
       <SpinnerContainer spinnerComponent={<TechnoSpinner />} loading={loading}>
         <Form onSubmit={() => {}} testID="update-broker-form-overlay">
-          <div className="update-broker-form__fixed">
+          <div
+            className="update-broker-form__fixed"
+            style={{
+              width: navbarOpen ? '61%' : '69%',
+            }}
+          >
             <FlexBox
               className="update-broker-form__fixed__broker-buttons"
               direction={FlexDirection.Row}

src/writeData/subscriptions/components/BrokerForm.scss

@@ -7,9 +7,9 @@
     position: fixed;
     background-color: $cf-grey-5;
     background-attachment: fixed;
-    width: 61%;
-    z-index: 9999;
+    z-index: 10;
     padding-bottom: 20px;
+    right: 0;
 
     &__broker-buttons {
       padding-top: 46px;
@@ -34,6 +34,11 @@
   .cf-overlay--header {
     justify-content: unset;
   }
+
+  &__broker-header {
+    padding-top: 150px;
+    margin-bottom: 25px;
+  }
   .cf-select-group.cf-select-group__stretch {
     margin-bottom: $cf-space-l;
   }

src/writeData/subscriptions/components/BrokerForm.tsx

@@ -1,5 +1,5 @@
 // Libraries
-import React, {FC} from 'react'
+import React, {FC, useContext} from 'react'
 import {useHistory} from 'react-router-dom'
 import {useSelector} from 'react-redux'
 
@@ -35,6 +35,7 @@ import {
   getDataLayerIdentity,
   getExperimentVariantId,
 } from 'src/cloud/utils/experiments'
+import {AppSettingContext} from 'src/shared/contexts/app'
 
 // Constants
 import {CREDIT_250_EXPERIMENT_ID} from 'src/shared/constants'
@@ -61,11 +62,18 @@ const BrokerForm: FC<Props> = ({formContent, updateForm, saveForm}) => {
     !isFlagEnabled('enableFreeSubscriptions')
   const isCredit250ExperienceActive = useSelector(shouldGetCredit250Experience)
   const requiredFields = checkRequiredFields(formContent)
+  const {navbarMode} = useContext(AppSettingContext)
+  const navbarOpen = navbarMode === 'expanded'
   return (
     formContent && (
       <div className="create-broker-form" id="broker">
         <Form onSubmit={() => {}} testID="create-broker-form-overlay">
-          <div className="create-broker-form__fixed">
+          <div
+            className="create-broker-form__fixed"
+            style={{
+              width: navbarOpen ? 'calc(75% - 235px)' : 'calc(100% - 374px)',
+            }}
+          >
             <FlexBox
               className="create-broker-form__fixed__broker-buttons"
               direction={FlexDirection.Row}
@@ -135,7 +143,10 @@ const BrokerForm: FC<Props> = ({formContent, updateForm, saveForm}) => {
               )}
             </FlexBox>
           </div>
-          <Overlay.Header title="Connect to Broker"></Overlay.Header>
+          <Overlay.Header
+            className="create-broker-form__broker-header"
+            title="Connect to Broker"
+          ></Overlay.Header>
           <Overlay.Body>
             <Heading
               element={HeadingElement.H5}