Clean up spacing within ClusterConnect

gravitational · Oct 30, 2024 · e46eaff · e46eaff
1 parent 0744271
commit e46eaff
Show file tree

Hide file tree

Showing 12 changed files with 165 additions and 86 deletions.
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.story.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.story.tsx
@@ -24,7 +24,7 @@ import { MockAppContextProvider } from 'teleterm/ui/fixtures/MockAppContextProvi
 import { MockAppContext } from 'teleterm/ui/fixtures/mocks';
 import { makeRootCluster } from 'teleterm/services/tshd/testHelpers';
 
-import { dialogCss } from '../ClusterConnect';
+import { dialogCss } from '../spacing';
 
 import { ClusterAdd } from './ClusterAdd';
 

diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterAdd/ClusterAdd.tsx
@@ -16,9 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import * as Alerts from 'design/Alert';
-import { Box, ButtonPrimary, ButtonSecondary, H2 } from 'design';
+import { Box, Flex, ButtonPrimary, ButtonSecondary, H2 } from 'design';
 import FieldInput from 'shared/components/FieldInput';
 import Validation from 'shared/components/Validation';
 import { requiredField } from 'shared/components/Validation/rules';
@@ -27,6 +27,8 @@ import { useAsync } from 'shared/hooks/useAsync';
 
 import { useAppContext } from 'teleterm/ui/appContextProvider';
 
+import { outermostPadding } from '../spacing';
+
 export function ClusterAdd(props: {
   onCancel(): void;
   onSuccess(clusterUri: string): void;
@@ -43,7 +45,7 @@ export function ClusterAdd(props: {
   const [addr, setAddr] = useState(props.prefill.clusterAddress || '');
 
   return (
-    <Box p={4}>
+    <Box px={outermostPadding}>
       <Validation>
         {({ validator }) => (
           <form
@@ -55,25 +57,22 @@ export function ClusterAdd(props: {
             <DialogHeader>
               <H2>Enter cluster address</H2>
             </DialogHeader>
-            <DialogContent mb={2}>
+            <DialogContent mb={0} gap={3}>
               {status === 'error' && (
-                <Alerts.Danger mb={5} details={statusText}>
+                <Alerts.Danger mb={0} details={statusText}>
                   Could not add the cluster
                 </Alerts.Danger>
               )}
               <FieldInput
                 rule={requiredField('Cluster address is required')}
                 value={addr}
                 autoFocus
+                mb={0}
                 onChange={e => setAddr(e.target.value)}
                 placeholder="teleport.example.com"
               />
-              <Box mt="5">
-                <ButtonPrimary
-                  disabled={status === 'processing'}
-                  mr="3"
-                  type="submit"
-                >
+              <Flex gap={3}>
+                <ButtonPrimary disabled={status === 'processing'} type="submit">
                   Next
                 </ButtonPrimary>
                 <ButtonSecondary
@@ -86,7 +85,7 @@ export function ClusterAdd(props: {
                 >
                   Cancel
                 </ButtonSecondary>
-              </Box>
+              </Flex>
             </DialogContent>
           </form>
         )}

diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterConnect.tsx
@@ -26,8 +26,7 @@ import { RootClusterUri } from 'teleterm/ui/uri';
 
 import { ClusterAdd } from './ClusterAdd';
 import { ClusterLogin } from './ClusterLogin';
-
-import type { StyleFunction } from 'styled-components';
+import { dialogCss } from './spacing';
 
 export function ClusterConnect(props: { dialog: DialogClusterConnect }) {
   const [createdClusterUri, setCreatedClusterUri] = useState<
@@ -70,11 +69,3 @@ export function ClusterConnect(props: { dialog: DialogClusterConnect }) {
     </Dialog>
   );
 }
-
-type NoExtraProps = Record<string, never>;
-export const dialogCss: StyleFunction<NoExtraProps> = () =>
-  `
-max-width: 480px;
-width: 100%;
-padding: 0;
-`;
diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/ClusterLogin.tsx
@@ -18,7 +18,15 @@
 
 import React from 'react';
 import * as Alerts from 'design/Alert';
-import { ButtonIcon, Text, Indicator, Box, H2, ButtonPrimary } from 'design';
+import {
+  ButtonIcon,
+  Text,
+  Indicator,
+  Box,
+  Flex,
+  H2,
+  ButtonPrimary,
+} from 'design';
 import * as Icons from 'design/Icon';
 import { DialogHeader, DialogContent } from 'design/Dialog';
 import { PrimaryAuthType } from 'shared/services';
@@ -27,6 +35,8 @@ import { AuthSettings } from 'teleterm/ui/services/clusters/types';
 import { ClusterConnectReason } from 'teleterm/ui/services/modals';
 import { getTargetNameFromUri } from 'teleterm/services/tshd/gateway';
 
+import { outermostPadding } from '../spacing';
+
 import LoginForm from './FormLogin';
 import useClusterLogin, { State, Props } from './useClusterLogin';
 
@@ -58,27 +68,40 @@ export function ClusterLoginPresentation({
 }: ClusterLoginPresentationProps) {
   return (
     <>
-      <DialogHeader px={4} pt={4} mb={0}>
+      <DialogHeader px={outermostPadding}>
         <H2>
           Log in to <b>{title}</b>
         </H2>
         <ButtonIcon ml="auto" p={3} onClick={onCloseDialog} aria-label="Close">
           <Icons.Cross size="medium" />
         </ButtonIcon>
       </DialogHeader>
-      <DialogContent mb={0}>
-        {reason && <Reason reason={reason} />}
+      <DialogContent mb={0} gap={2}>
+        {reason && (
+          <Box px={outermostPadding}>
+            <Reason reason={reason} />
+          </Box>
+        )}
 
         {initAttempt.status === 'error' && (
-          <Box m={4}>
-            <Alerts.Danger details={initAttempt.statusText}>
+          <Flex
+            px={outermostPadding}
+            flexDirection="column"
+            alignItems="flex-start"
+            gap={3}
+          >
+            <Alerts.Danger
+              details={initAttempt.statusText}
+              margin={0}
+              width="100%"
+            >
               Unable to retrieve cluster auth preferences
             </Alerts.Danger>
             <ButtonPrimary onClick={init}>Retry</ButtonPrimary>
-          </Box>
+          </Flex>
         )}
         {initAttempt.status === 'processing' && (
-          <Box textAlign="center" m={4}>
+          <Box px={outermostPadding} textAlign="center">
             <Indicator delay="none" />
           </Box>
         )}
@@ -119,7 +142,7 @@ function Reason({ reason }: { reason: ClusterConnectReason }) {
   const $targetDesc = getTargetDesc(reason);
 
   return (
-    <Text px={4} pt={2} mb={0}>
+    <Text>
       You tried to connect to {$targetDesc} but your session has expired. Please
       log in to refresh the session.
     </Text>

diff --git a/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLocal/FormLocal.tsx b/web/packages/teleterm/src/ui/ClusterConnect/ClusterLogin/FormLogin/FormLocal/FormLocal.tsx
@@ -17,7 +17,7 @@
  */
 
 import React, { useState } from 'react';
-import { ButtonPrimary, Box } from 'design';
+import { ButtonPrimary, Flex } from 'design';
 
 import Validation, { Validator } from 'shared/components/Validation';
 import FieldInput from 'shared/components/FieldInput';
@@ -62,15 +62,15 @@ export const FormLocal = ({
   return (
     <Validation>
       {({ validator }) => (
-        <Box as="form">
+        <Flex as="form" flexDirection="column" gap={3}>
           <FieldInput
             ref={usernameInputRef}
             rule={requiredField('Username is required')}
             label="Username"
             value={user}
             onChange={e => setUser(e.target.value)}
             placeholder="Username"
-            mb={3}
+            mb={0}
             disabled={isProcessing}
           />
           <FieldInput
@@ -81,23 +81,24 @@ export const FormLocal = ({
             onChange={e => setPass(e.target.value)}
             type="password"
             placeholder="Password"
-            mb={3}
+            mb={0}
             width="100%"
             disabled={isProcessing}
           />
-          <LinearProgress absolute={false} hidden={!isProcessing} />
-          <ButtonPrimary
-            width="100%"
-            mt={2}
-            mb={1}
-            type="submit"
-            size="large"
-            onClick={e => onLoginClick(e, validator)}
-            disabled={isProcessing}
-          >
-            Sign In
-          </ButtonPrimary>
-        </Box>
+          <Flex flexDirection="column" gap={2}>
+            <LinearProgress absolute={false} hidden={!isProcessing} />
+            <ButtonPrimary
+              width="100%"
+              mb={0}
+              type="submit"
+              size="large"
+              onClick={e => onLoginClick(e, validator)}
+              disabled={isProcessing}
+            >
+              Sign In
+            </ButtonPrimary>
+          </Flex>
+        </Flex>
       )}
     </Validation>
   );