feat: background to match app, fixed status/edit buttons (#4819)

Author: helenosheaa

src/writeData/subscriptions/components/BrokerDetails.scss

@@ -2,6 +2,9 @@
 .update-broker-form {
   float: right;
   width: 75%;
+  .cf-overlay--body {
+    padding-top: 50px;
+  }
   button {
     margin-left: 4px;
   }
@@ -82,12 +85,22 @@
     margin-right: 12px;
   }
 
-  &__broker-buttons {
-    padding-top: 46px;
-    padding-right: 19px;
+  &__fixed {
+    position: fixed;
+    background-color: $cf-grey-5;
+    background-attachment: fixed;
+    width: 61%;
+    z-index: 9999;
+    padding-bottom: 20px;
+
+    &__broker-buttons {
+      padding-top: 46px;
+      padding-left: 24px;
+      padding-right: 24px;
 
-    button {
-      margin-left: 8px;
+      button {
+        margin-left: 8px;
+      }
     }
   }
 }

src/writeData/subscriptions/components/CreateSubscriptionPage.scss

@@ -1,11 +1,7 @@
 @import '@influxdata/clockface/dist/variables.scss';
 .create-subscription-page {
   display: flex;
-  background: linear-gradient(
-    45deg,
-    rgba(33, 173, 246, 0.13) 0%,
-    rgba(147, 148, 255, 0.13) 100%
-  );
+  background-color: $cf-grey-5;
   .cf-flex-box.cf-flex-box__stretch-h {
     padding-top: $cf-space-m;
   }

src/writeData/subscriptions/components/ParsingDetails.scss

@@ -2,12 +2,14 @@
 .update-parsing-form {
   float: right;
   width: 75%;
+  .cf-form--wrapper {
+    padding-bottom: 650px;
+  }
+
   .cf-overlay--header {
     justify-content: unset;
   }
-  .cf-form--wrapper {
-    padding-bottom: 800px;
-  }
+
   &__text {
     color: $cf-grey-95;
     margin-left: $cf-space-s;

src/writeData/subscriptions/components/SinglePageBrokerDetails.tsx

@@ -60,67 +60,77 @@ const SinglePageBrokerDetails: FC<Props> = ({
     <div className="update-broker-form" id="broker">
       <SpinnerContainer spinnerComponent={<TechnoSpinner />} loading={loading}>
         <Form onSubmit={() => {}} testID="update-broker-form-overlay">
-          <div>
+          <div className="update-broker-form__fixed">
             <FlexBox
-              className="update-broker-form__broker-buttons"
+              className="update-broker-form__fixed__broker-buttons"
               direction={FlexDirection.Row}
               margin={ComponentSize.Medium}
-              justifyContent={JustifyContent.FlexEnd}
+              justifyContent={JustifyContent.SpaceBetween}
             >
-              <Button
-                text="Close"
-                color={ComponentColor.Tertiary}
-                onClick={() => {
-                  event('close button clicked', {}, {feature: 'subscriptions'})
-                  history.push(`/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`)
-                }}
-                titleText="Cancel update of Subscription and return to list"
-                type={ButtonType.Button}
-                testID="update-broker-form--cancel"
+              <StatusHeader
+                currentSubscription={currentSubscription}
+                setStatus={setStatus}
               />
-              <Button
-                text="Edit"
-                color={edit ? ComponentColor.Success : ComponentColor.Secondary}
-                onClick={() => {
-                  event('edit button clicked', {}, {feature: 'subscriptions'})
-                  setEdit(!edit)
-                }}
-                type={ButtonType.Button}
-                titleText="Edit"
-                testID="update-broker-form--edit"
-              />
-              {edit ? (
+              <div>
                 <Button
-                  type={ButtonType.Button}
-                  text="Save Changes"
-                  color={ComponentColor.Success}
-                  onClick={() => {
-                    saveForm(currentSubscription)
-                  }}
-                  testID="update-broker-form--submit"
-                />
-              ) : (
-                <Button
-                  text="View Data"
-                  color={ComponentColor.Success}
+                  text="Close"
+                  color={ComponentColor.Tertiary}
                   onClick={() => {
                     event(
-                      'view data button clicked',
+                      'close button clicked',
                       {},
                       {feature: 'subscriptions'}
                     )
-                    history.push(`/orgs/${org.id}/notebooks`)
+                    history.push(
+                      `/orgs/${org.id}/${LOAD_DATA}/${SUBSCRIPTIONS}`
+                    )
                   }}
+                  titleText="Cancel update of Subscription and return to list"
                   type={ButtonType.Button}
-                  testID="update-broker-form--view-data"
-                  status={ComponentStatus.Default}
+                  testID="update-broker-form--cancel"
                 />
-              )}
+                <Button
+                  text="Edit"
+                  color={
+                    edit ? ComponentColor.Success : ComponentColor.Secondary
+                  }
+                  onClick={() => {
+                    event('edit button clicked', {}, {feature: 'subscriptions'})
+                    setEdit(!edit)
+                  }}
+                  type={ButtonType.Button}
+                  titleText="Edit"
+                  testID="update-broker-form--edit"
+                />
+                {edit ? (
+                  <Button
+                    type={ButtonType.Button}
+                    text="Save Changes"
+                    color={ComponentColor.Success}
+                    onClick={() => {
+                      saveForm(currentSubscription)
+                    }}
+                    testID="update-broker-form--submit"
+                  />
+                ) : (
+                  <Button
+                    text="View Data"
+                    color={ComponentColor.Success}
+                    onClick={() => {
+                      event(
+                        'view data button clicked',
+                        {},
+                        {feature: 'subscriptions'}
+                      )
+                      history.push(`/orgs/${org.id}/notebooks`)
+                    }}
+                    type={ButtonType.Button}
+                    testID="update-broker-form--view-data"
+                    status={ComponentStatus.Default}
+                  />
+                )}
+              </div>
             </FlexBox>
-            <StatusHeader
-              currentSubscription={currentSubscription}
-              setStatus={setStatus}
-            />
           </div>
           <Overlay.Body>
             <Heading

src/writeData/subscriptions/components/SinglePageSubDetails.tsx

@@ -93,7 +93,7 @@ const SinglePageSubDetails: FC = () => {
   const handleClick = (step: number) => {
     document
       .getElementById(navigationSteps[step - 1].type)
-      ?.scrollIntoView({behavior: 'smooth', block: 'start'})
+      ?.scrollIntoView({behavior: 'smooth', block: 'center'})
     setFormActive(navigationSteps[step - 1].type as Steps)
   }
 

src/writeData/subscriptions/components/StatusHeader.tsx

@@ -4,8 +4,6 @@ import React, {FC} from 'react'
 // Components
 import {
   FlexBox,
-  JustifyContent,
-  AlignItems,
   Heading,
   HeadingElement,
   FontWeight,
@@ -27,11 +25,7 @@ interface Props {
 }
 
 const StatusHeader: FC<Props> = ({currentSubscription, setStatus}) => (
-  <FlexBox
-    justifyContent={JustifyContent.SpaceBetween}
-    alignItems={AlignItems.FlexEnd}
-    stretchToFitHeight={true}
-  >
+  <FlexBox>
     <Heading
       element={HeadingElement.H3}
       weight={FontWeight.Regular}

src/writeData/subscriptions/components/SubscriptionDetailsPage.scss

@@ -1,11 +1,6 @@
 @import '@influxdata/clockface/dist/variables.scss';
 .subscription-details-page {
-  display: flex;
-  background: linear-gradient(
-    45deg,
-    rgba(33, 173, 246, 0.13) 0%,
-    rgba(147, 148, 255, 0.13) 100%
-  );
+  background-color: $cf-grey-5;
   .cf-flex-box.cf-flex-box__stretch-h {
     padding-top: $cf-space-m;
   }
@@ -53,8 +48,7 @@
     }
   }
   &__status {
-    padding-left: 24px;
-    padding-top: 64px;
+    margin-right: 20px;
     text-transform: uppercase;
 
     &--RUNNING {