RI-7681: Polish Add Cluster DB form (#5158)

* remove no longer needed padding as it is handled in the FormDialog

* polish the add cluster db modal form

* remove size medium from buttons as it is default

Author: dantovska

redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx

@@ -137,7 +137,6 @@ const AddDatabaseScreen = (props: Props) => {
             <Row responsive gap="l">
               <FlexItem>
                 <SecondaryButton
-                  size="medium"
                   onClick={() => handleProceedForm(AddDbType.manual)}
                   data-testid="btn-connection-settings"
                 >
@@ -151,7 +150,6 @@ const AddDatabaseScreen = (props: Props) => {
                   content={isInvalid ? <span>{ConnectionUrlError}</span> : null}
                 >
                   <PrimaryButton
-                    size="medium"
                     type="submit"
                     disabled={!!isInvalid}
                     icon={isInvalid ? InfoIcon : undefined}

redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx

@@ -10,7 +10,7 @@ import validationErrors from 'uiSrc/constants/validationErrors'
 import { ICredentialsRedisCluster } from 'uiSrc/slices/interfaces'
 
 import { MessageEnterpriceSoftware } from 'uiSrc/pages/home/components/form/Messages'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent'
 import {
   PrimaryButton,
@@ -134,12 +134,7 @@ const ClusterConnectionForm = (props: Props) => {
   }
 
   const CancelButton = ({ onClick }: { onClick: () => void }) => (
-    <SecondaryButton
-      size="s"
-      className="btn-cancel"
-      onClick={onClick}
-      style={{ marginRight: 12 }}
-    >
+    <SecondaryButton className="btn-cancel" onClick={onClick}>
       Cancel
     </SecondaryButton>
   )
@@ -162,7 +157,6 @@ const ClusterConnectionForm = (props: Props) => {
       }
     >
       <PrimaryButton
-        size="s"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}
@@ -179,13 +173,13 @@ const ClusterConnectionForm = (props: Props) => {
     const footerEl = document.getElementById('footerDatabaseForm')
     if (footerEl) {
       return ReactDOM.createPortal(
-        <div className="footerAddDatabase">
+        <Row justify="end" gap="m">
           {onClose && <CancelButton onClick={onClose} />}
           <SubmitButton
             onClick={formik.submitForm}
             submitIsDisabled={!submitIsEnable()}
           />
-        </div>,
+        </Row>,
         footerEl,
       )
     }
@@ -199,80 +193,77 @@ const ClusterConnectionForm = (props: Props) => {
 
       <form>
         <WindowEvent event="keydown" handler={onKeyDown} />
-        <Row responsive>
-          <FlexItem grow={4}>
-            <FormField label="Cluster Host" required infoIconProps={hostInfo}>
-              <TextInput
-                name="host"
-                id="host"
-                data-testid="host"
-                maxLength={200}
-                placeholder="Enter Cluster Host"
-                value={formik.values.host}
-                onChange={value => {
-                  formik.setFieldValue(
-                    'host',
-                    validateField(value.trim()),
-                  )
-                }}
-                onPaste={(event: React.ClipboardEvent<HTMLInputElement>) =>
-                  handlePasteHostName(onHostNamePaste, event)
-                }
-              />
-            </FormField>
-          </FlexItem>
 
-          <FlexItem grow={2}>
-            <FormField
-              label="Cluster Port*"
-              additionalText="Should not exceed 65535."
-            >
-              <NumericInput
-                autoValidate
-                min={0}
-                max={MAX_PORT_NUMBER}
-                name="port"
-                id="port"
-                data-testid="port"
-                placeholder="Enter Cluster Port"
-                value={Number(formik.values.port)}
-                onChange={(value) => formik.setFieldValue('port', value)}
-              />
-            </FormField>
-          </FlexItem>
-        </Row>
+        <Col gap="l">
+          <Row gap="m" responsive>
+            <FlexItem grow={4}>
+              <FormField label="Cluster Host" required infoIconProps={hostInfo}>
+                <TextInput
+                  name="host"
+                  id="host"
+                  data-testid="host"
+                  maxLength={200}
+                  placeholder="Enter Cluster Host"
+                  value={formik.values.host}
+                  onChange={(value) => {
+                    formik.setFieldValue('host', validateField(value.trim()))
+                  }}
+                  onPaste={(event: React.ClipboardEvent<HTMLInputElement>) =>
+                    handlePasteHostName(onHostNamePaste, event)
+                  }
+                />
+              </FormField>
+            </FlexItem>
+
+            <FlexItem grow={2}>
+              <FormField label="Cluster Port" required>
+                <NumericInput
+                  autoValidate
+                  min={0}
+                  max={MAX_PORT_NUMBER}
+                  name="port"
+                  id="port"
+                  data-testid="port"
+                  placeholder="Enter Cluster Port"
+                  value={Number(formik.values.port)}
+                  onChange={(value) => formik.setFieldValue('port', value)}
+                />
+              </FormField>
+            </FlexItem>
+          </Row>
 
-        <Row responsive>
-          <FlexItem grow>
-            <FormField label="Admin Username*">
-              <TextInput
-                name="username"
-                id="username"
-                data-testid="username"
-                maxLength={200}
-                placeholder="Enter Admin Username"
-                value={formik.values.username}
-                onChange={(value) => formik.setFieldValue('username', value)}
-              />
-            </FormField>
-          </FlexItem>
+          <Row gap="m" responsive>
+            <FlexItem grow>
+              <FormField label="Admin Username" required>
+                <TextInput
+                  name="username"
+                  id="username"
+                  data-testid="username"
+                  maxLength={200}
+                  placeholder="Enter Admin Username"
+                  value={formik.values.username}
+                  onChange={(value) => formik.setFieldValue('username', value)}
+                />
+              </FormField>
+            </FlexItem>
 
-          <FlexItem grow>
-            <FormField label="Admin Password*">
-              <PasswordInput
-                type="dual"
-                name="password"
-                id="password"
-                data-testid="password"
-                maxLength={200}
-                placeholder="Enter Password"
-                value={formik.values.password}
-                onChange={(value) => formik.setFieldValue('password', value)}
-                autoComplete="new-password"
-              />
-            </FormField>
-          </FlexItem>
-        </Row>
+            <FlexItem grow>
+              <FormField label="Admin Password" required>
+                <PasswordInput
+                  type="dual"
+                  name="password"
+                  id="password"
+                  data-testid="password"
+                  maxLength={200}
+                  placeholder="Enter Password"
+                  value={formik.values.password}
+                  onChange={(value) => formik.setFieldValue('password', value)}
+                  autoComplete="new-password"
+                />
+              </FormField>
+            </FlexItem>
+          </Row>
+        </Col>
       </form>
       <Footer />
     </div>

redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx

@@ -43,7 +43,6 @@ import { Title } from 'uiSrc/components/base/text'
 const ScrollableWrapper = styled.div`
   height: 100%;
   overflow: scroll;
-  padding-top: ${({ theme }: { theme: Theme }) => theme.core.space.space400};
 `
 
 export interface Props {

redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/CloneConnection.tsx

@@ -27,7 +27,6 @@ const CloneConnection = (props: Props) => {
       <Row gap="m" justify="end" style={{ flexGrow: 0 }}>
         <FlexItem>
           <SecondaryButton
-            size="medium"
             aria-label="Clone database"
             data-testid="clone-db-btn"
             onClick={handleClickClone}

redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/components/FooterActions.tsx

@@ -50,7 +50,6 @@ const FooterActions = (props: Props) => {
       content={getSubmitButtonContent(errors, submitIsDisabled)}
     >
       <PrimaryButton
-        size="medium"
         type="submit"
         onClick={onClick}
         disabled={submitIsDisabled}
@@ -77,7 +76,6 @@ const FooterActions = (props: Props) => {
           content={getSubmitButtonContent(errors, submitIsDisable())}
         >
           <EmptyButton
-            size="medium"
             className="empty-btn"
             disabled={submitIsDisable()}
             icon={submitIsDisable() ? InfoIcon : undefined}
@@ -94,7 +92,6 @@ const FooterActions = (props: Props) => {
         <Row>
           {onClose && (
             <SecondaryButton
-              size="medium"
               onClick={onClose}
               className="btn-cancel"
               data-testid="btn-cancel"