MP-84 fix space settings section without items

Author: kkartunov

src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.module.scss

@@ -41,6 +41,10 @@
             grid-template-columns: 1fr 1fr;
             margin: $sp-13 0 $sp-4;
 
+            &.formNoTop {
+                margin-top: 0;
+            }
+
             .formCTAs {
                 display: flex;
                 align-items: center;

src/apps/accounts/src/settings/tabs/tools/service-provider/ServiceProvider.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { bind, isEmpty, reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import classNames from 'classnames'
 
 import { updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
 import { Button, Collapsible, ConfirmModal, IconOutline, InputSelect, InputText } from '~/libs/ui'
@@ -288,7 +289,7 @@ const ServiceProvider: FC<ServiceProviderProps> = (props: ServiceProviderProps)
 
             <form
                 ref={formElRef}
-                className={styles.formWrap}
+                className={classNames(styles.formWrap, !serviceProviderTypesData?.length ? styles.formNoTop : '')}
             >
                 <p>Add a new service provider</p>
                 <div className={styles.form}>

src/apps/accounts/src/settings/tabs/tools/software/Software.module.scss

@@ -41,6 +41,10 @@
             grid-template-columns: 1fr 1fr;
             margin: $sp-13 0 $sp-4;
 
+            &.formNoTop {
+                margin-top: 0;
+            }
+
             .formCTAs {
                 display: flex;
                 align-items: center;

src/apps/accounts/src/settings/tabs/tools/software/Software.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { bind, isEmpty, reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import classNames from 'classnames'
 
 import { updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
 import { Button, Collapsible, ConfirmModal, IconOutline, InputSelect, InputText } from '~/libs/ui'
@@ -267,7 +268,7 @@ const Software: FC<SoftwareProps> = (props: SoftwareProps) => {
 
             <form
                 ref={formElRef}
-                className={styles.formWrap}
+                className={classNames(styles.formWrap, !softwareTypesData?.length ? styles.formNoTop : '')}
             >
                 <p>Add a new software</p>
                 <div className={styles.form}>

src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.module.scss

@@ -41,6 +41,10 @@
             grid-template-columns: 1fr 1fr;
             margin: $sp-13 0 $sp-4;
 
+            &.formNoTop {
+                margin-top: 0;
+            }
+
             .formCTAs {
                 display: flex;
                 align-items: center;

src/apps/accounts/src/settings/tabs/tools/subscriptions/Subscriptions.tsx

@@ -1,6 +1,7 @@
 import { Dispatch, FC, MutableRefObject, SetStateAction, useEffect, useRef, useState } from 'react'
 import { bind, isEmpty, reject, trim } from 'lodash'
 import { toast } from 'react-toastify'
+import classNames from 'classnames'
 
 import { updateMemberTraitsAsync, UserProfile, UserTrait } from '~/libs/core'
 import { Button, Collapsible, ConfirmModal, IconOutline, InputText } from '~/libs/ui'
@@ -251,7 +252,7 @@ const Subscriptions: FC<SubscriptionsProps> = (props: SubscriptionsProps) => {
 
             <form
                 ref={formElRef}
-                className={styles.formWrap}
+                className={classNames(styles.formWrap, !subscriptionsTypesData?.length ? styles.formNoTop : '')}
             >
                 <p>Add a new subscription</p>
                 <div className={styles.form}>