fix: #1033 update config button (#1365)

packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/aside.test.tsx.snap

@@ -67,47 +67,43 @@ exports[`WebComponentConfig Should match snapshot 1`] = `
   }
 >
   <Component>
-    <Component>
-      <div
-        className="column  "
+    <div>
+      <Component>
+        <h5
+          className="title is-5  "
+          id=""
+        >
+          Settings
+        </h5>
+      </Component>
+      <Component
+        fullWidth={true}
+        onClick={[Function]}
+        type="button"
+        variant="primary"
       >
-        <Component>
-          <h6
-            className="title is-6  "
-            id=""
-          >
-            Settings
-          </h6>
-        </Component>
-        <Component
-          fullWidth={true}
+        <button
+          className="button  is-primary is-fullwidth "
+          data-test=""
+          disabled={false}
           onClick={[Function]}
           type="button"
-          variant="primary"
         >
-          <button
-            className="button  is-primary is-fullwidth "
-            data-test=""
-            disabled={false}
-            onClick={[Function]}
-            type="button"
-          >
-            Configuration
-          </button>
-        </Component>
-      </div>
-    </Component>
-    <Component
-      afterClose={[Function]}
-      closeModal={[Function]}
-      type="BOOK_VIEWING"
-    >
+          Configuration
+        </button>
+      </Component>
       <Component
         afterClose={[Function]}
-        renderChildren={true}
-        visible={true}
-      />
-    </Component>
+        closeModal={[Function]}
+        type="BOOK_VIEWING"
+      >
+        <Component
+          afterClose={[Function]}
+          renderChildren={true}
+          visible={true}
+        />
+      </Component>
+    </div>
   </Component>
 </Provider>
 `;

packages/marketplace/src/components/pages/client-app-detail/aside.tsx

@@ -4,12 +4,13 @@ import standAloneAppDetailStyles from '@/styles/blocks/standalone-app-detail.scs
 import { renderCategory, renderDesktopIntegrationTypes } from '../client-app-detail/app-content'
 import { DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions'
 import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
-import { GridItem, Button, H6 } from '@reapit/elements'
+import { Button, H5 } from '@reapit/elements'
 import { useDispatch, useSelector } from 'react-redux'
 import { selectIsWebComponentOpen } from '@/selector/client'
 import { clientCloseWebComponentConfig, clientOpenWebComponentConfig } from '@/actions/client'
 import { Dispatch } from 'redux'
 import WebComponentModal from '@/components/ui/web-component-config-modal'
+import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
 
 interface AsideProps {
   appDetailData: AppDetailDataNotNull
@@ -29,8 +30,12 @@ export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetail
         <div className={standAloneAppDetailStyles.headerWithoutMargin}>
           {renderDesktopIntegrationTypes(desktopIntegrationTypes)}
         </div>
+        {isWebComponent && (
+          <div className={standAloneAppDetailStyles.headerWithoutMargin}>
+            <WebComponentConfig />
+          </div>
+        )}
       </div>
-      {isWebComponent && <WebComponentConfig />}
     </div>
   )
 }
@@ -49,20 +54,18 @@ export const WebComponentConfig = () => {
   const handleToggleWebComponentModal = toggleWebComponentModal(dispatch)
   const handleCloseWebComponentModal = closeWebComponentModal(dispatch)
   return (
-    <>
-      <GridItem>
-        <H6>Settings</H6>
-        <Button type="button" variant="primary" fullWidth onClick={handleToggleWebComponentModal}>
-          Configuration
-        </Button>
-      </GridItem>
+    <div className={clientAppDetailStyles.gutter}>
+      <H5>Settings</H5>
+      <Button type="button" variant="primary" fullWidth onClick={handleToggleWebComponentModal}>
+        Configuration
+      </Button>
       {isWebComponentOpen && (
         <WebComponentModal
           type="BOOK_VIEWING"
           afterClose={handleCloseWebComponentModal}
           closeModal={handleCloseWebComponentModal}
         />
       )}
-    </>
+    </div>
   )
 }