Add types to the styles

kafka-ui-react-app/src/components/common/Button/Button.styled.ts

@@ -1,12 +1,12 @@
-import styled from 'styled-components';
+import { styled } from 'lib/themedStyles';
 
-export interface Props {
+export interface ButtonProps {
   buttonType: 'primary' | 'secondary';
   buttonSize: 'S' | 'M' | 'L';
   isInverted?: boolean;
 }
 
-const StyledButton = styled('button')<Props>`
+const StyledButton = styled('button')<ButtonProps>`
   display: flex;
   flex-direction: row;
   align-items: center;

kafka-ui-react-app/src/components/common/Button/Button.tsx

@@ -1,11 +1,10 @@
 import StyledButton, {
-  Props as ButtonProps,
+  ButtonProps,
 } from 'components/common/Button/Button.styled';
 import React from 'react';
 
 type Props = ButtonProps;
 
 export const Button: React.FC<Props> = (props) => {
-  // Later we can add other logic here
   return <StyledButton {...props} />;
 };

kafka-ui-react-app/src/lib/themedStyles.ts

@@ -0,0 +1,10 @@
+import baseStyled, {
+  useTheme as baseUseTheme,
+  ThemedStyledInterface,
+} from 'styled-components';
+import theme from 'theme/theme';
+
+type ThemeInterface = typeof theme;
+
+export const styled = baseStyled as ThemedStyledInterface<ThemeInterface>;
+export const useTheme = () => baseUseTheme() as ThemeInterface;