FE: Redesign buttons (#200)

kafbat · Mar 12, 2024 · 6e9bbcd · 6e9bbcd
1 parent 14084f4
commit 6e9bbcd
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 130 deletions.
diff --git a/frontend/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx b/frontend/src/components/KsqlDb/Query/QueryForm/QueryForm.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { FormError } from 'components/common/Input/Input.styled';
 import { ErrorMessage } from '@hookform/error-message';
 import {
-  useForm,
   Controller,
-  useFieldArray,
   FormProvider,
+  useFieldArray,
+  useForm,
 } from 'react-hook-form';
 import { Button } from 'components/common/Button/Button';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
@@ -24,6 +24,7 @@ interface QueryFormProps {
   resetResults: () => void;
   submitHandler: (values: FormValues) => void;
 }
+
 type StreamsPropertiesType = {
   key: string;
   value: string;
@@ -118,7 +119,6 @@ const QueryForm: React.FC<QueryFormProps> = ({
                   onClick={() => setValue('ksql', '')}
                   buttonType="primary"
                   buttonSize="S"
-                  isInverted
                 >
                   Clear
                 </Button>

diff --git a/frontend/src/components/NavBar/UserInfo/UserInfo.styled.ts b/frontend/src/components/NavBar/UserInfo/UserInfo.styled.ts
@@ -1,19 +1,23 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 export const Wrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 5px;
+
   svg {
     position: relative;
   }
 `;
 
-export const Text = styled.div(
-  ({ theme }) => css`
-    color: ${theme.button.primary.invertedColors.normal};
-  `
-);
+export const Text = styled.div`
+  color: ${({ theme }) => theme.user.color};
+
+  &:hover {
+    color: ${({ theme }) => theme.user.hoverColor};
+  }
+}
+`;
 
 export const LogoutLink = styled.a``;
diff --git a/frontend/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx b/frontend/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx
@@ -4,7 +4,7 @@ import { screen } from '@testing-library/react';
 import TimeToRetainBtn, {
   Props,
 } from 'components/Topics/shared/Form/TimeToRetainBtn';
-import { useForm, FormProvider } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { theme } from 'theme/theme';
 import userEvent from '@testing-library/user-event';
 
@@ -61,7 +61,7 @@ describe('TimeToRetainBtn', () => {
       SetUpComponent({ value: 604800000 });
       const buttonElement = screen.getByRole('button');
       expect(buttonElement).toHaveStyle(
-        `background-color:${theme.button.secondary.invertedColors.normal}`
+        `background-color:${theme.chips.backgroundColor.active}`
       );
       expect(buttonElement).toHaveStyle(`border:none`);
     });

diff --git a/frontend/src/components/common/Button/Button.styled.ts b/frontend/src/components/common/Button/Button.styled.ts
@@ -3,52 +3,39 @@ import styled from 'styled-components';
 export interface ButtonProps {
   buttonType: 'primary' | 'secondary' | 'danger';
   buttonSize: 'S' | 'M' | 'L';
-  isInverted?: boolean;
 }
 
 const StyledButton = styled.button<ButtonProps>`
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  padding: 0 12px;
+  padding: ${({ buttonSize }) => (buttonSize === 'S' ? '0 8px' : '0 12px')};
   border: none;
   border-radius: 4px;
   white-space: nowrap;
 
-  background: ${({ isInverted, buttonType, theme }) =>
-    isInverted
-      ? 'transparent'
-      : theme.button[buttonType].backgroundColor.normal};
-  color: ${({ isInverted, buttonType, theme }) =>
-    isInverted
-      ? theme.button[buttonType].invertedColors.normal
-      : theme.button[buttonType].color.normal};
+  background: ${({ buttonType, theme }) =>
+    theme.button[buttonType].backgroundColor.normal};
+
+  color: ${({ buttonType, theme }) => theme.button[buttonType].color.normal};
+  height: ${({ theme, buttonSize }) => theme.button.height[buttonSize]};
   font-size: ${({ theme, buttonSize }) => theme.button.fontSize[buttonSize]};
   font-weight: 500;
-  height: ${({ theme, buttonSize }) => theme.button.height[buttonSize]};
 
   &:hover:enabled {
-    background: ${({ isInverted, buttonType, theme }) =>
-      isInverted
-        ? 'transparent'
-        : theme.button[buttonType].backgroundColor.hover};
-    color: ${({ isInverted, buttonType, theme }) =>
-      isInverted
-        ? theme.button[buttonType].invertedColors.hover
-        : theme.button[buttonType].color};
+    background: ${({ buttonType, theme }) =>
+      theme.button[buttonType].backgroundColor.hover};
+    color: ${({ buttonType, theme }) => theme.button[buttonType].color.normal};
     cursor: pointer;
   }
+
   &:active:enabled {
-    background: ${({ isInverted, buttonType, theme }) =>
-      isInverted
-        ? 'transparent'
-        : theme.button[buttonType].backgroundColor.active};
-    color: ${({ isInverted, buttonType, theme }) =>
-      isInverted
-        ? theme.button[buttonType].invertedColors.active
-        : theme.button[buttonType].color};
+    background: ${({ buttonType, theme }) =>
+      theme.button[buttonType].backgroundColor.active};
+    color: ${({ buttonType, theme }) => theme.button[buttonType].color.normal};
   }
+
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
@@ -59,11 +46,11 @@ const StyledButton = styled.button<ButtonProps>`
   }
 
   & a {
-    color: ${({ theme }) => theme.button.primary.color};
+    color: ${({ theme }) => theme.button.primary.color.normal};
   }
 
   & svg {
-    margin-right: 7px;
+    margin-right: 4px;
     fill: ${({ theme, disabled, buttonType }) =>
       disabled
         ? theme.button[buttonType].color.disabled

diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
@@ -1,35 +1,37 @@
-import StyledButton, {
-  ButtonProps,
-} from 'components/common/Button/Button.styled';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import Spinner from 'components/common/Spinner/Spinner';
 
+import StyledButton, { ButtonProps } from './Button.styled';
+
 export interface Props
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     ButtonProps {
   to?: string | object;
   inProgress?: boolean;
 }
 
-export const Button: React.FC<Props> = ({ to, ...props }) => {
+export const Button: React.FC<Props> = ({
+  to,
+  children,
+  disabled,
+  inProgress,
+  ...props
+}) => {
   if (to) {
     return (
       <Link to={to}>
-        <StyledButton type="button" {...props}>
-          {props.children}
+        <StyledButton disabled={disabled} type="button" {...props}>
+          {children}
         </StyledButton>
       </Link>
     );
   }
+
   return (
-    <StyledButton
-      type="button"
-      disabled={props.disabled || props.inProgress}
-      {...props}
-    >
-      {props.children}{' '}
-      {props.inProgress ? (
+    <StyledButton type="button" disabled={disabled || inProgress} {...props}>
+      {children}{' '}
+      {inProgress ? (
         <Spinner size={16} borderWidth={2} marginLeft={2} emptyBorderColor />
       ) : null}
     </StyledButton>

diff --git a/frontend/src/components/common/Button/__tests__/Button.spec.tsx b/frontend/src/components/common/Button/__tests__/Button.spec.tsx
@@ -50,14 +50,6 @@ describe('Button', () => {
     );
   });
 
-  it('renders inverted color Button', () => {
-    render(<Button buttonType="primary" buttonSize="S" isInverted />);
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByRole('button')).toHaveStyleRule(
-      'color',
-      theme.button.primary.invertedColors.normal
-    );
-  });
   it('renders disabled button and spinner when inProgress truthy', () => {
     render(<Button buttonType="primary" buttonSize="M" inProgress />);
     expect(screen.getByRole('button')).toBeInTheDocument();