Fix UI issues after introducing new button design system

web/packages/design/src/Button/buttons.story.tsx

@@ -47,7 +47,7 @@ export default {
 export const Buttons = () => {
   const fills: ButtonFill[] = ['filled', 'minimal', 'border'];
   return (
-    <Flex gap={4} flexDirection="column" alignItems="flex-start">
+    <Flex gap={5} flexDirection="column" alignItems="flex-start">
       <Table>
         <thead>
           <tr>
@@ -100,19 +100,24 @@ export const Buttons = () => {
         <Button size="medium">Medium</Button>
         <Button size="small">Small</Button>
       </Flex>
-      <Input defaultValue="Some text" />
-      <Button size="extra-large" inputAlignment>
-        Extra large with input alignment
-      </Button>
-      <Button size="large" inputAlignment>
-        Large with input alignment
-      </Button>
-      <Button size="medium" inputAlignment>
-        Medium with input alignment
-      </Button>
-      <Button size="small" inputAlignment>
-        Small with input alignment
-      </Button>
+      <Flex flexDirection="column" gap={3} alignItems="flex-start">
+        <Input
+          defaultValue="Padding of buttons below should match padding of this input"
+          width="480px"
+        />
+        <Button size="extra-large" inputAlignment>
+          Extra large with input alignment
+        </Button>
+        <Button size="large" inputAlignment>
+          Large with input alignment
+        </Button>
+        <Button size="medium" inputAlignment>
+          Medium with input alignment
+        </Button>
+        <Button size="small" inputAlignment>
+          Small with input alignment
+        </Button>
+      </Flex>
       <Button block>block = true</Button>
       <Flex gap={3}>
         <Button disabled>Disabled</Button>
@@ -167,19 +172,21 @@ export const Buttons = () => {
         <ButtonLink href="">Button Link</ButtonLink>
         <ButtonText>Button Text</ButtonText>
       </Flex>
-      {[2, 1, 0].map(size => (
-        <Flex gap={3} key={`size-${size}`}>
-          <ButtonIcon size={size}>
-            <icons.AddUsers />
-          </ButtonIcon>
-          <ButtonIcon size={size}>
-            <icons.Ellipsis />
-          </ButtonIcon>
-          <ButtonIcon size={size} disabled>
-            <icons.Trash />
-          </ButtonIcon>
-        </Flex>
-      ))}
+      <Flex gap={3} flexDirection="column" alignItems="flex-start">
+        {[2, 1, 0].map(size => (
+          <Flex gap={3} key={`size-${size}`}>
+            <ButtonIcon size={size}>
+              <icons.AddUsers />
+            </ButtonIcon>
+            <ButtonIcon size={size}>
+              <icons.Ellipsis />
+            </ButtonIcon>
+            <ButtonIcon size={size} disabled>
+              <icons.Trash />
+            </ButtonIcon>
+          </Flex>
+        ))}
+      </Flex>
     </Flex>
   );
 };

web/packages/design/src/ButtonLink/ButtonLink.jsx

@@ -42,6 +42,7 @@ const StyledButtonLink = styled.a`
   &:hover,
   &:focus {
     color: ${({ theme }) => theme.colors.buttons.link.hover};
+    box-shadow: none;
   }
 
   &:active {

web/packages/shared/components/ButtonSso/ButtonSso.tsx

@@ -30,7 +30,7 @@ const ButtonSso = forwardRef<HTMLInputElement, Props>((props: Props, ref) => {
   const { color, Icon } = getSSOIcon(ssoType);
 
   return (
-    <StyledButton color={color} block {...rest} ref={ref}>
+    <StyledButton size="extra-large" color={color} block {...rest} ref={ref}>
       {Boolean(Icon) && (
         <IconBox>
           <Icon data-testid="icon" color="white" />

web/packages/shared/components/ButtonTextWithAddIcon/ButtonTextWithAddIcon.tsx

@@ -32,19 +32,7 @@ export const ButtonTextWithAddIcon = ({
   iconSize?: number | 'small' | 'medium' | 'large' | 'extraLarge';
 }) => {
   return (
-    <ButtonText
-      onClick={onClick}
-      css={`
-        padding-left: 0px;
-        &:disabled {
-          .icon-add {
-            opacity: 0.35;
-          }
-          pointer-events: none;
-        }
-      `}
-      disabled={disabled}
-    >
+    <ButtonText onClick={onClick} inputAlignment disabled={disabled}>
       <AddIcon
         className="icon-add"
         size={iconSize}

web/packages/shared/components/ClusterDropdown/ClusterDropdown.tsx

@@ -150,15 +150,7 @@ export function ClusterDropdown({
   return (
     <Flex textAlign="center" alignItems="center" mb={mb}>
       <HoverTooltip tipContent={'Select cluster'}>
-        <ButtonSecondary
-          px={2}
-          css={`
-            border-color: ${props => props.theme.colors.spotBackground[0]};
-          `}
-          textTransform="none"
-          size="small"
-          onClick={handleOpen}
-        >
+        <ButtonSecondary size="small" onClick={handleOpen}>
           Cluster: {selectedOption.label}
           <ChevronDown ml={2} size="small" color="text.slightlyMuted" />
         </ButtonSecondary>

web/packages/shared/components/FileTransfer/FileTransferRequests.story.tsx

@@ -0,0 +1,62 @@
+/**
+ * Teleport
+ * Copyright (C) 2024 Gravitational, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import ConsoleContextProvider from 'teleport/Console/consoleContextProvider';
+import ConsoleContext from 'teleport/Console/consoleContext';
+import { FileTransferRequest } from 'teleport/Console/DocumentSsh/useFileTransfer';
+
+import { FileTransferRequests } from './';
+
+export default {
+  title: 'Shared/FileTransfer',
+};
+
+export const Requests = () => {
+  const conCtx = new ConsoleContext();
+  conCtx.storeUser.setState({ username: 'bob' });
+  return (
+    <ConsoleContextProvider value={conCtx}>
+      <FileTransferRequests
+        requests={requests}
+        onApprove={() => {}}
+        onDeny={() => {}}
+      />
+    </ConsoleContextProvider>
+  );
+};
+
+const requests: FileTransferRequest[] = [
+  {
+    sid: 'dummy-sid',
+    requestID: 'dummy-request-id',
+    requester: 'alice',
+    approvers: [],
+    location: '/etc/teleport.yaml',
+    download: true,
+  },
+  {
+    sid: 'dummy-sid',
+    requestID: 'dummy-request-id',
+    requester: 'john',
+    approvers: ['bob'],
+    location: '/home/alice/.ssh/config',
+    download: true,
+  },
+];

web/packages/shared/components/FileTransfer/FileTransferRequests.tsx

@@ -18,7 +18,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { ButtonBorder, Box, Flex, Text } from 'design';
+import { ButtonBorder, Box, Flex, Text, Button } from 'design';
 import * as Icons from 'design/Icon';
 import {
   FileTransferRequest,
@@ -130,18 +130,25 @@ const ResponseForm = ({
         {getPendingText(request)}
       </Text>
       <Flex gap={2}>
-        <ButtonBorder
+        <Button
+          fill="border"
+          intent="success"
           disabled={request.approvers.includes(currentUser.username)}
           block
           onClick={() => onApprove(request.requestID, true)}
         >
           <Icons.Check size="small" mr={2} />
           Approve
-        </ButtonBorder>
-        <ButtonBorder block onClick={() => onDeny(request.requestID, false)}>
+        </Button>
+        <Button
+          fill="border"
+          intent="danger"
+          block
+          onClick={() => onDeny(request.requestID, false)}
+        >
           <Icons.Cross size="small" mr={2} />
           Deny
-        </ButtonBorder>
+        </Button>
       </Flex>
     </Box>
   );

web/packages/shared/components/MenuAction/MenuActionButton.tsx

@@ -59,14 +59,13 @@ export default class MenuActionIcon extends React.Component<
     return (
       <>
         <ButtonBorder
-          height="24px"
           size="small"
           setRef={e => (this.anchorEl = e)}
           onClick={this.onOpen}
           {...buttonProps}
         >
-          {this.props.buttonText || 'OPTIONS'}
-          <ChevronDown ml={2} mr={-2} size="small" color="text.slightlyMuted" />
+          {this.props.buttonText || 'Options'}
+          <ChevronDown ml={2} size="small" color="text.slightlyMuted" />
         </ButtonBorder>
         <Menu
           getContentAnchorEl={null}

web/packages/shared/components/MenuLogin/MenuLogin.tsx

@@ -80,13 +80,12 @@ export const MenuLogin = React.forwardRef<MenuLoginHandle, MenuLoginProps>(
         <ButtonBorder
           width={alignButtonWidthToMenu ? width : null}
           textTransform={props.textTransform}
-          height="24px"
           size="small"
           setRef={anchorRef}
           onClick={onOpen}
         >
           Connect
-          <ChevronDown ml={1} mr={-2} size="small" color="text.slightlyMuted" />
+          <ChevronDown ml={1} size="small" color="text.slightlyMuted" />
         </ButtonBorder>
         <Menu
           anchorOrigin={anchorOrigin}

web/packages/shared/components/UnifiedResources/FilterPanel.tsx

@@ -267,15 +267,7 @@ const FilterTypesMenu = ({
   return (
     <Flex textAlign="center" alignItems="center">
       <HoverTooltip tipContent={'Filter by resource type'}>
-        <ButtonSecondary
-          px={2}
-          css={`
-            border-color: ${props => props.theme.colors.spotBackground[0]};
-          `}
-          textTransform="none"
-          size="small"
-          onClick={handleOpen}
-        >
+        <ButtonSecondary size="small" onClick={handleOpen}>
           Types{' '}
           {kindsFromParams.length > 0 ? `(${kindsFromParams.length})` : ''}
           <ChevronDown ml={2} size="small" color="text.slightlyMuted" />
@@ -446,7 +438,6 @@ const SortMenu: React.FC<SortMenuProps> = props => {
           onClick={onDirChange}
           textTransform="none"
           css={`
-            width: 0px; // remove extra width around the button icon
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
             border-color: ${props => props.theme.colors.spotBackground[2]};

web/packages/shared/components/UnifiedResources/UnifiedResources.tsx

@@ -27,14 +27,7 @@ import React, {
 } from 'react';
 
 import styled from 'styled-components';
-import {
-  Box,
-  Flex,
-  ButtonLink,
-  ButtonSecondary,
-  Text,
-  ButtonBorder,
-} from 'design';
+import { Box, Flex, Button, ButtonSecondary, Text, ButtonBorder } from 'design';
 import { Icon, Magnifier, PushPin } from 'design/Icon';
 import { Danger } from 'design/Alert';
 
@@ -455,7 +448,9 @@ export function UnifiedResources(props: UnifiedResourcesProps) {
             {resourcesFetchAttempt.statusCode !== 400 &&
               resourcesFetchAttempt.statusCode !== 403 && (
                 <Box flex="0 0 auto" ml={2}>
-                  <ButtonLink onClick={onRetryClicked}>Retry</ButtonLink>
+                  <Button type="button" onClick={onRetryClicked}>
+                    Retry
+                  </Button>
                 </Box>
               )}
           </Danger>

web/packages/teleport/src/AuthConnectors/ConnectorList/ConnectorList.tsx

@@ -76,7 +76,7 @@ function ConnectorListItem({ name, id, onEdit, onDelete }) {
         </Text>
       </Flex>
       <ButtonPrimary mt="auto" size="medium" block onClick={onClickEdit}>
-        EDIT CONNECTOR
+        Edit Connector
       </ButtonPrimary>
     </ResponsiveConnector>
   );

web/packages/teleport/src/Bots/List/BotList.test.tsx

@@ -72,7 +72,7 @@ test('renders View options if type is github actions ssh', async () => {
   const props = makeProps();
   props.bots = [bot];
   render(<BotList {...props} />);
-  fireEvent.click(await screen.findByText('OPTIONS'));
+  fireEvent.click(await screen.findByText('Options'));
   expect(screen.getByText('View...')).toBeInTheDocument();
 });
 
@@ -95,6 +95,6 @@ test('doesnt renders View options if bot type is not github actions', async () =
   const props = makeProps();
   props.bots = [bot];
   render(<BotList {...props} />);
-  fireEvent.click(await screen.findByText('OPTIONS'));
+  fireEvent.click(await screen.findByText('Options'));
   expect(screen.queryByText('View...')).not.toBeInTheDocument();
 });

web/packages/teleport/src/Bots/List/Bots.test.tsx

@@ -64,7 +64,7 @@ test('calls edit endpoint', async () => {
     ).toBeInTheDocument();
   });
 
-  const actionCells = screen.queryAllByRole('button', { name: 'OPTIONS' });
+  const actionCells = screen.queryAllByRole('button', { name: 'Options' });
   expect(actionCells).toHaveLength(botsApiResponseFixture.items.length);
   await userEvent.click(actionCells[0]);
 
@@ -96,7 +96,7 @@ test('calls delete endpoint', async () => {
     ).toBeInTheDocument();
   });
 
-  const actionCells = screen.queryAllByRole('button', { name: 'OPTIONS' });
+  const actionCells = screen.queryAllByRole('button', { name: 'Options' });
   expect(actionCells).toHaveLength(botsApiResponseFixture.items.length);
   await userEvent.click(actionCells[0]);
 

web/packages/teleport/src/Bots/List/Bots.tsx

@@ -20,7 +20,7 @@ import React, { useEffect, useState } from 'react';
 import { useAttemptNext } from 'shared/hooks';
 import { Link } from 'react-router-dom';
 import { HoverTooltip } from 'shared/components/ToolTip';
-import { Alert, Box, ButtonPrimary, Indicator } from 'design';
+import { Alert, Box, Button, Indicator } from 'design';
 
 import {
   FeatureBox,
@@ -120,15 +120,21 @@ export function Bots() {
     to request bot creation permissions.`
             }
           >
-            <ButtonPrimary
+            <Button
+              intent="primary"
+              fill={
+                fetchAttempt.status === 'success' && bots.length === 0
+                  ? 'filled'
+                  : 'border'
+              }
               ml="auto"
               width="240px"
               as={Link}
               to={cfg.getBotsNewRoute()}
               disabled={!hasAddBotPermissions}
             >
               Enroll New Bot
-            </ButtonPrimary>
+            </Button>
           </HoverTooltip>
         </Box>
       </FeatureHeader>