get rid of unused bulma styles. small UI refactoring (#2130)

* Get rid of bulma

* Refactor SecondaryTabs

* Refactor Messages View

* Refactor Inputs

* get rid of unused components

* refactoring

* Remove unused bulma styles

kafka-ui-react-app/src/components/App.styled.ts

@@ -14,6 +14,7 @@ export const Container = styled.main(
     margin-top: ${theme.layout.navBarHeight};
     margin-left: ${theme.layout.navBarWidth};
     position: relative;
+    padding-bottom: 30px;
     z-index: 20;
 
     @media screen and (max-width: 1023px) {

kafka-ui-react-app/src/components/Connect/Details/Details.tsx

@@ -74,6 +74,7 @@ const Details: React.FC<DetailsProps> = ({
             connectorName
           )}
           className={({ isActive }) => (isActive ? 'is-active' : '')}
+          end
         >
           Overview
         </NavLink>

kafka-ui-react-app/src/components/Connect/New/New.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const NewConnectFormStyled = styled.form`
   padding: 0 16px 16px;
@@ -10,3 +10,11 @@ export const NewConnectFormStyled = styled.form`
     align-self: flex-start;
   }
 `;
+
+export const Filed = styled.div<{ $hidden: boolean }>(
+  ({ $hidden }) =>
+    $hidden &&
+    css`
+      display: none;
+    `
+);

kafka-ui-react-app/src/components/Connect/New/New.tsx

@@ -10,7 +10,6 @@ import { clusterConnectConnectorPath, ClusterNameRoute } from 'lib/paths';
 import yup from 'lib/yupExtended';
 import Editor from 'components/common/Editor/Editor';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import { InputLabel } from 'components/common/Input/InputLabel.styled';
 import Select from 'components/common/Select/Select';
 import { FormError } from 'components/common/Input/Input.styled';
 import Input from 'components/common/Input/Input';
@@ -18,6 +17,7 @@ import { Button } from 'components/common/Button/Button';
 import PageHeading from 'components/common/PageHeading/PageHeading';
 import { createConnector } from 'redux/reducers/connect/connectSlice';
 import { useAppDispatch } from 'lib/hooks/redux';
+import Heading from 'components/common/heading/Heading.styled';
 
 import * as S from './New.styled';
 
@@ -74,11 +74,6 @@ const New: React.FC<NewProps> = ({
     }
   }, [connects, getValues, setValue]);
 
-  const connectNameFieldClassName = React.useMemo(
-    () => (connects.length > 1 ? '' : 'is-hidden'),
-    [connects]
-  );
-
   const onSubmit = async (values: FormValues) => {
     const { connector } = await dispatch(
       createConnector({
@@ -121,8 +116,8 @@ const New: React.FC<NewProps> = ({
         onSubmit={handleSubmit(onSubmit)}
         aria-label="Create connect form"
       >
-        <div className={['field', connectNameFieldClassName].join(' ')}>
-          <InputLabel>Connect *</InputLabel>
+        <S.Filed $hidden={connects.length <= 1}>
+          <Heading level={3}>Connect *</Heading>
           <Controller
             defaultValue={connectOptions[0].value}
             control={control}
@@ -142,10 +137,10 @@ const New: React.FC<NewProps> = ({
           <FormError>
             <ErrorMessage errors={errors} name="connectName" />
           </FormError>
-        </div>
+        </S.Filed>
 
         <div>
-          <InputLabel>Name *</InputLabel>
+          <Heading level={3}>Name</Heading>
           <Input
             inputSize="M"
             placeholder="Connector Name"
@@ -159,7 +154,7 @@ const New: React.FC<NewProps> = ({
         </div>
 
         <div>
-          <InputLabel>Config *</InputLabel>
+          <Heading level={3}>Config</Heading>
           <Controller
             control={control}
             name="config"

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.styled.ts

@@ -1,6 +1,7 @@
+import ReactDatePicker from 'react-datepicker';
 import styled from 'styled-components';
 
-export const ResetOffsetsStyledWrapper = styled.div`
+export const Wrapper = styled.div`
   padding: 16px;
   padding-top: 0;
 
@@ -23,32 +24,32 @@ export const ResetOffsetsStyledWrapper = styled.div`
       }
     }
   }
+`;
 
-  & .date-picker {
-    height: 32px;
-    border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
-    border-radius: 4px;
-    font-size: 14px;
-    width: 50%;
-    padding-left: 12px;
-    color: ${(props) => props.theme.select.color.normal};
+export const DatePickerInput = styled(ReactDatePicker)`
+  height: 32px;
+  border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
+  border-radius: 4px;
+  font-size: 14px;
+  width: 50%;
+  padding-left: 12px;
+  color: ${(props) => props.theme.select.color.normal};
 
-    background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
-    background-repeat: no-repeat !important;
-    background-position-x: 96% !important;
-    background-position-y: 55% !important;
-    appearance: none !important;
+  background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
+  background-repeat: no-repeat !important;
+  background-position-x: 96% !important;
+  background-position-y: 55% !important;
+  appearance: none !important;
 
-    &:hover {
-      cursor: pointer;
-    }
-    &:focus {
-      outline: none;
-    }
+  &:hover {
+    cursor: pointer;
+  }
+  &:focus {
+    outline: none;
   }
 `;
 
-export const MainSelectorsWrapperStyled = styled.div`
+export const MainSelectors = styled.div`
   display: flex;
   gap: 16px;
   & > * {
@@ -56,14 +57,14 @@ export const MainSelectorsWrapperStyled = styled.div`
   }
 `;
 
-export const OffsetsWrapperStyled = styled.div`
+export const OffsetsWrapper = styled.div`
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   gap: 16px;
 `;
 
-export const OffsetsTitleStyled = styled.h1`
+export const OffsetsTitle = styled.h1`
   font-size: 18px;
   font-weight: 500;
 `;

kafka-ui-react-app/src/components/ConsumerGroups/Details/ResetOffsets/ResetOffsets.tsx

@@ -32,12 +32,7 @@ import { useAppDispatch, useAppSelector } from 'lib/hooks/redux';
 import useAppParams from 'lib/hooks/useAppParams';
 import { resetLoaderById } from 'redux/reducers/loader/loaderSlice';
 
-import {
-  MainSelectorsWrapperStyled,
-  OffsetsWrapperStyled,
-  ResetOffsetsStyledWrapper,
-  OffsetsTitleStyled,
-} from './ResetOffsets.styled';
+import * as S from './ResetOffsets.styled';
 
 interface FormType {
   topic: string;
@@ -176,9 +171,9 @@ const ResetOffsets: React.FC = () => {
   return (
     <FormProvider {...methods}>
       <PageHeading text="Reset offsets" />
-      <ResetOffsetsStyledWrapper>
+      <S.Wrapper>
         <form onSubmit={handleSubmit(onSubmit)}>
-          <MainSelectorsWrapperStyled>
+          <S.MainSelectors>
             <div>
               <InputLabel id="topicLabel">Topic</InputLabel>
               <Controller
@@ -239,7 +234,7 @@ const ResetOffsets: React.FC = () => {
                 labelledBy="Select partitions"
               />
             </div>
-          </MainSelectorsWrapperStyled>
+          </S.MainSelectors>
           {resetTypeValue === ConsumerGroupOffsetsResetType.TIMESTAMP &&
             selectedPartitions.length > 0 && (
               <div>
@@ -256,7 +251,6 @@ const ResetOffsets: React.FC = () => {
                       showTimeInput
                       timeInputLabel="Time:"
                       dateFormat="MMMM d, yyyy h:mm aa"
-                      className="date-picker"
                     />
                   )}
                 />
@@ -270,8 +264,8 @@ const ResetOffsets: React.FC = () => {
           {resetTypeValue === ConsumerGroupOffsetsResetType.OFFSET &&
             selectedPartitions.length > 0 && (
               <div>
-                <OffsetsTitleStyled>Offsets</OffsetsTitleStyled>
-                <OffsetsWrapperStyled>
+                <S.OffsetsTitle>Offsets</S.OffsetsTitle>
+                <S.OffsetsWrapper>
                   {fields.map((field, index) => (
                     <div key={field.id}>
                       <InputLabel htmlFor={`partitionsOffsets.${index}.offset`}>
@@ -299,7 +293,7 @@ const ResetOffsets: React.FC = () => {
                       />
                     </div>
                   ))}
-                </OffsetsWrapperStyled>
+                </S.OffsetsWrapper>
               </div>
             )}
           <Button
@@ -311,7 +305,7 @@ const ResetOffsets: React.FC = () => {
             Submit
           </Button>
         </form>
-      </ResetOffsetsStyledWrapper>
+      </S.Wrapper>
     </FormProvider>
   );
 };

kafka-ui-react-app/src/components/Topics/List/List.styled.ts

@@ -26,3 +26,7 @@ export const ActionsTd = styled(Td)`
   overflow: visible;
   width: 50px;
 `;
+
+export const ActionsContainer = styled.div`
+  text-align: right !important;
+`;

kafka-ui-react-app/src/components/Topics/List/List.tsx

@@ -46,7 +46,7 @@ import {
   TitleCell,
   TopicSizeCell,
 } from './TopicsTableCells';
-import { ActionsTd } from './List.styled';
+import * as S from './List.styled';
 
 export interface TopicsListProps {
   areTopicsFetching: boolean;
@@ -239,7 +239,7 @@ const List: React.FC<TopicsListProps> = ({
 
       return (
         <>
-          <div className="has-text-right">
+          <S.ActionsContainer>
             {!isHidden && (
               <Dropdown label={<VerticalElipsisIcon />} right>
                 {cleanUpPolicy === CleanUpPolicy.DELETE && (
@@ -257,7 +257,7 @@ const List: React.FC<TopicsListProps> = ({
                 </DropdownItem>
               </Dropdown>
             )}
-          </div>
+          </S.ActionsContainer>
           <ConfirmationModal
             isOpen={isClearMessagesModalOpen}
             onCancel={closeClearMessagesModal}
@@ -404,7 +404,7 @@ const List: React.FC<TopicsListProps> = ({
             <TableColumn
               maxWidth="4%"
               cell={ActionsCell}
-              customTd={ActionsTd}
+              customTd={S.ActionsTd}
             />
           </SmartTable>
         </div>

kafka-ui-react-app/src/components/Topics/Topic/Details/Details.tsx

@@ -189,7 +189,8 @@ const Details: React.FC<Props> = ({
       <Navbar role="navigation">
         <NavLink
           to="."
-          className={({ isActive }) => (isActive ? 'is-active is-primary' : '')}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+          end
         >
           Overview
         </NavLink>

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.styled.ts

@@ -1,5 +1,7 @@
+import Input from 'components/common/Input/Input';
 import Select from 'components/common/Select/Select';
 import styled, { css } from 'styled-components';
+import DatePicker from 'react-datepicker';
 
 interface SavedFilterProps {
   selected: boolean;
@@ -44,34 +46,34 @@ export const SeekTypeSelectorWrapper = styled.div`
       border-radius: 4px 0 0 4px !important;
     }
   }
+`;
 
-  & .offset-selector {
-    border-radius: 0 4px 4px 0 !important;
-    border-left: none;
-  }
+export const OffsetSelector = styled(Input)`
+  border-radius: 0 4px 4px 0 !important;
+  border-left: none;
+`;
 
-  & .date-picker {
-    height: 32px;
-    border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
-    border-left: none;
-    border-radius: 0 4px 4px 0;
-    font-size: 14px;
-    width: 100%;
-    padding-left: 12px;
-    color: ${(props) => props.theme.select.color.normal};
-
-    background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
-    background-repeat: no-repeat !important;
-    background-position-x: 96% !important;
-    background-position-y: 55% !important;
-    appearance: none !important;
-
-    &:hover {
-      cursor: pointer;
-    }
-    &:focus {
-      outline: none;
-    }
+export const DatePickerInput = styled(DatePicker)`
+  height: 32px;
+  border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  font-size: 14px;
+  width: 100%;
+  padding-left: 12px;
+  color: ${(props) => props.theme.select.color.normal};
+
+  background-image: url('data:image/svg+xml,%3Csvg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 1L5 5L9 1" stroke="%23454F54"/%3E%3C/svg%3E%0A') !important;
+  background-repeat: no-repeat !important;
+  background-position-x: 96% !important;
+  background-position-y: 55% !important;
+  appearance: none !important;
+
+  &:hover {
+    cursor: pointer;
+  }
+  &:focus {
+    outline: none;
   }
 `;
 

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx

@@ -13,12 +13,10 @@ import {
 import React, { useContext } from 'react';
 import { omitBy } from 'lodash';
 import { useNavigate, useLocation } from 'react-router-dom';
-import DatePicker from 'react-datepicker';
 import MultiSelect from 'components/common/MultiSelect/MultiSelect.styled';
 import { Option } from 'react-multi-select-component/dist/lib/interfaces';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import { BASE_PARAMS } from 'lib/constants';
-import Input from 'components/common/Input/Input';
 import Select from 'components/common/Select/Select';
 import { Button } from 'components/common/Button/Button';
 import Search from 'components/common/Search/Search';
@@ -398,24 +396,22 @@ const Filters: React.FC<FiltersProps> = ({
               disabled={isTailing}
             />
             {currentSeekType === SeekType.OFFSET ? (
-              <Input
+              <S.OffsetSelector
                 id="offset"
                 type="text"
                 inputSize="M"
                 value={offset}
-                className="offset-selector"
                 placeholder="Offset"
                 onChange={({ target: { value } }) => setOffset(value)}
                 disabled={isTailing}
               />
             ) : (
-              <DatePicker
+              <S.DatePickerInput
                 selected={timestamp}
                 onChange={(date: Date | null) => setTimestamp(date)}
                 showTimeInput
                 timeInputLabel="Time:"
                 dateFormat="MMMM d, yyyy HH:mm"
-                className="date-picker"
                 placeholderText="Select timestamp"
                 disabled={isTailing}
               />

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.styled.ts

@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import * as SEditorViewer from 'components/common/EditorViewer/EditorViewer.styled';
 
 export const Wrapper = styled.tr`
   background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
@@ -25,9 +26,15 @@ export const ContentBox = styled.div`
   padding: 24px;
   border-radius: 8px 0 0 8px;
   flex-grow: 3;
+  display: flex;
+  flex-direction: column;
   & nav {
     padding-bottom: 16px;
   }
+
+  ${SEditorViewer.Wrapper} {
+    flex-grow: 1;
+  }
 `;
 
 export const MetadataWrapper = styled.div`
@@ -77,3 +84,31 @@ export const PaginationButton = styled.button`
   cursor: pointer;
   font-size: 14px;
 `;
+
+export const Tab = styled.button<{ $active?: boolean }>(
+  ({ theme, $active }) => css`
+    background-color: ${theme.secondaryTab.backgroundColor[
+      $active ? 'active' : 'normal'
+    ]};
+    color: ${theme.secondaryTab.color[$active ? 'active' : 'normal']};
+    padding: 6px 16px;
+    height: 32px;
+    border: 1px solid ${theme.layout.stuffBorderColor};
+    cursor: pointer;
+    &:hover {
+      background-color: ${theme.secondaryTab.backgroundColor.hover};
+      color: ${theme.secondaryTab.color.hover};
+    }
+    &:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+    &:last-child {
+      border-radius: 0 4px 4px 0;
+    }
+    &:not(:last-child) {
+      border-right: 0px;
+    }
+  `
+);
+
+export const Tabs = styled.nav``;

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/MessageContent.tsx

@@ -1,7 +1,6 @@
 import { TopicMessageTimestampTypeEnum, SchemaType } from 'generated-sources';
 import React from 'react';
 import EditorViewer from 'components/common/EditorViewer/EditorViewer';
-import { SecondaryTabs } from 'components/common/Tabs/SecondaryTabs.styled';
 import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 import dayjs from 'dayjs';
 
@@ -62,29 +61,29 @@ const MessageContent: React.FC<MessageContentProps> = ({
       <td colSpan={10}>
         <S.Section>
           <S.ContentBox>
-            <SecondaryTabs>
-              <button
+            <S.Tabs>
+              <S.Tab
                 type="button"
-                className={activeTab === 'key' ? 'is-active' : ''}
+                $active={activeTab === 'key'}
                 onClick={handleKeyTabClick}
               >
                 Key
-              </button>
-              <button
-                className={activeTab === 'content' ? 'is-active' : ''}
+              </S.Tab>
+              <S.Tab
+                $active={activeTab === 'content'}
                 type="button"
                 onClick={handleContentTabClick}
               >
                 Content
-              </button>
-              <button
-                className={activeTab === 'headers' ? 'is-active' : ''}
+              </S.Tab>
+              <S.Tab
+                $active={activeTab === 'headers'}
                 type="button"
                 onClick={handleHeadersTabClick}
               >
                 Headers
-              </button>
-            </SecondaryTabs>
+              </S.Tab>
+            </S.Tabs>
             <EditorViewer
               data={activeTabContent() || ''}
               maxLines={28}

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessageContent/__tests__/MessageContent.spec.tsx

@@ -8,6 +8,7 @@ import MessageContent, {
 import { TopicMessageTimestampTypeEnum } from 'generated-sources';
 import userEvent from '@testing-library/user-event';
 import { render } from 'lib/testHelpers';
+import theme from 'theme/theme';
 
 const setupWrapper = (props?: Partial<MessageContentProps>) => {
   return (
@@ -49,26 +50,34 @@ describe('MessageContent screen', () => {
   });
 
   describe('when switched to display the key', () => {
-    it('has a tab with is-active classname', () => {
+    it('makes key tab active', () => {
       const keyTab = screen.getAllByText('Key');
       userEvent.click(keyTab[0]);
-      expect(keyTab[0]).toHaveClass('is-active');
+      expect(keyTab[0]).toHaveStyleRule(
+        'background-color',
+        theme.secondaryTab.backgroundColor.active
+      );
     });
   });
 
   describe('when switched to display the headers', () => {
-    it('has a tab with is-active classname', () => {
+    it('makes Headers tab active', () => {
       userEvent.click(screen.getByText('Headers'));
-      expect(screen.getByText('Headers')).toHaveClass('is-active');
+      expect(screen.getByText('Headers')).toHaveStyleRule(
+        'background-color',
+        theme.secondaryTab.backgroundColor.active
+      );
     });
   });
 
   describe('when switched to display the content', () => {
-    it('has a tab with is-active classname', () => {
-      userEvent.click(screen.getByText('Headers'));
+    it('makes content tab active', () => {
       const contentTab = screen.getAllByText('Content');
       userEvent.click(contentTab[0]);
-      expect(contentTab[0]).toHaveClass('is-active');
+      expect(contentTab[0]).toHaveStyleRule(
+        'background-color',
+        theme.secondaryTab.backgroundColor.active
+      );
     });
   });
 });

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/ConfigListItem.tsx

@@ -13,17 +13,11 @@ const ConfigListItem: React.FC<ListItemProps> = ({
   const hasCustomValue = !!defaultValue && value !== defaultValue;
 
   return (
-    <S.ConfigList>
-      <S.ConfigItemCell $hasCustomValue={hasCustomValue}>
-        {name}
-      </S.ConfigItemCell>
-      <S.ConfigItemCell $hasCustomValue={hasCustomValue}>
-        {value}
-      </S.ConfigItemCell>
-      <td className="has-text-grey" title="Default Value">
-        {hasCustomValue && defaultValue}
-      </td>
-    </S.ConfigList>
+    <S.Row $hasCustomValue={hasCustomValue}>
+      <td>{name}</td>
+      <td>{value}</td>
+      <td title="Default Value">{hasCustomValue && defaultValue}</td>
+    </S.Row>
   );
 };
 

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.styled.ts

@@ -1,10 +1,13 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const ConfigList = styled.tr`
-  & > td:last-child {
-    color: ${({ theme }) => theme.configList.color};
-  }
-`;
-export const ConfigItemCell = styled.td<{ $hasCustomValue: boolean }>`
-  font-weight: ${(props) => (props.$hasCustomValue ? 500 : 400)} !important;
-`;
+export const Row = styled.tr<{ $hasCustomValue?: boolean }>(
+  ({ theme, $hasCustomValue }) => css`
+    & > td {
+      font-weight: ${$hasCustomValue ? 500 : 400};
+      &:last-child {
+        color: ${theme.configList.color};
+        font-weight: 400;
+      }
+    }
+  `
+);

kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/__test__/Settings.styled.spec.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { render } from 'lib/testHelpers';
-import { ConfigItemCell } from 'components/Topics/Topic/Details/Settings/Settings.styled';
-
-describe('Settings styled Components', () => {
-  describe('ConfigItemCell Component', () => {
-    const renderComponent = (
-      props: Partial<{ $hasCustomValue: boolean }> = {}
-    ) => {
-      return render(
-        <table>
-          <tbody>
-            <tr>
-              <ConfigItemCell
-                $hasCustomValue={
-                  '$hasCustomValue' in props ? !!props.$hasCustomValue : false
-                }
-              />
-            </tr>
-          </tbody>
-        </table>
-      );
-    };
-    it('should check the true rendering ConfigItemList', () => {
-      renderComponent({ $hasCustomValue: true });
-      expect(screen.getByRole('cell')).toHaveStyleRule(
-        'font-weight',
-        '500 !important'
-      );
-    });
-
-    it('should check the true rendering ConfigItemList', () => {
-      renderComponent();
-      expect(screen.getByRole('cell')).toHaveStyleRule(
-        'font-weight',
-        '400 !important'
-      );
-    });
-  });
-});

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.styled.tsx

@@ -5,3 +5,19 @@ export const Wrapper = styled.div`
   padding: 1.25rem;
   border-radius: 6px;
 `;
+
+export const Columns = styled.div`
+  margin: -0.75rem;
+  margin-bottom: 0.75rem;
+
+  @media screen and (min-width: 769px) {
+    display: flex;
+  }
+`;
+
+export const Column = styled.div`
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 0.75rem;
+`;

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/SendMessage.tsx

@@ -24,6 +24,7 @@ import {
 } from 'redux/reducers/topics/selectors';
 import Select, { SelectOption } from 'components/common/Select/Select';
 import useAppParams from 'lib/hooks/useAppParams';
+import Heading from 'components/common/heading/Heading.styled';
 
 import validateMessage from './validateMessage';
 import * as S from './SendMessage.styled';
@@ -166,15 +167,9 @@ const SendMessage: React.FC = () => {
   return (
     <S.Wrapper>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <div className="columns">
-          <div>
-            <label
-              className="label"
-              id="selectPartitionOptions"
-              htmlFor="selectPartitionOptions"
-            >
-              Partition
-            </label>
+        <S.Columns>
+          <S.Column>
+            <Heading level={3}>Partition</Heading>
             <Controller
               control={control}
               name="partition"
@@ -191,12 +186,12 @@ const SendMessage: React.FC = () => {
                 />
               )}
             />
-          </div>
-        </div>
+          </S.Column>
+        </S.Columns>
 
-        <div className="columns">
-          <div className="column is-one-half">
-            <label className="label">Key</label>
+        <S.Columns>
+          <S.Column>
+            <Heading level={3}>Key</Heading>
             <Controller
               control={control}
               name="key"
@@ -209,9 +204,9 @@ const SendMessage: React.FC = () => {
                 />
               )}
             />
-          </div>
-          <div className="column is-one-half">
-            <label className="label">Content</label>
+          </S.Column>
+          <S.Column>
+            <Heading level={3}>Content</Heading>
             <Controller
               control={control}
               name="content"
@@ -224,11 +219,11 @@ const SendMessage: React.FC = () => {
                 />
               )}
             />
-          </div>
-        </div>
-        <div className="columns">
-          <div className="column">
-            <label className="label">Headers</label>
+          </S.Column>
+        </S.Columns>
+        <S.Columns>
+          <S.Column>
+            <Heading level={3}>Headers</Heading>
             <Controller
               control={control}
               name="headers"
@@ -242,8 +237,8 @@ const SendMessage: React.FC = () => {
                 />
               )}
             />
-          </div>
-        </div>
+          </S.Column>
+        </S.Columns>
         <Button
           buttonSize="M"
           buttonType="primary"

kafka-ui-react-app/src/components/Topics/Topic/SendMessage/__test__/SendMessage.spec.tsx

@@ -64,7 +64,7 @@ const renderAndSubmitData = async (error: string[] = []) => {
   await renderComponent();
   expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
   await act(() => {
-    userEvent.click(screen.getByLabelText('Partition'));
+    userEvent.click(screen.getByRole('listbox'));
   });
   await act(() => {
     userEvent.click(screen.getAllByRole('option')[1]);
@@ -108,7 +108,8 @@ describe('SendMessage', () => {
   });
 
   describe('when schema is fetched', () => {
-    const url = `/api/clusters/${clusterName}/topics/${topicName}/messages`;
+    const messagesUrl = `/api/clusters/${clusterName}/topics/${topicName}/messages`;
+    const detailsUrl = `/api/clusters/${clusterName}/topics/${topicName}`;
 
     beforeEach(() => {
       fetchMock.getOnce(
@@ -118,20 +119,25 @@ describe('SendMessage', () => {
     });
 
     it('calls sendTopicMessage on submit', async () => {
-      const sendTopicMessageMock = fetchMock.postOnce(url, 200);
+      const sendTopicMessageMock = fetchMock.postOnce(messagesUrl, 200);
+      const fetchTopicDetailsMock = fetchMock.getOnce(detailsUrl, 200);
+
       await renderAndSubmitData();
-      expect(sendTopicMessageMock.called(url)).toBeTruthy();
+      expect(sendTopicMessageMock.called(messagesUrl)).toBeTruthy();
+      expect(fetchTopicDetailsMock.called(detailsUrl)).toBeTruthy();
       expect(mockNavigate).toHaveBeenLastCalledWith(
         `../${clusterTopicMessagesRelativePath}`
       );
     });
 
     it('should make the sendTopicMessage but most find an error within it', async () => {
-      const sendTopicMessageMock = fetchMock.postOnce(url, {
+      const sendTopicMessageMock = fetchMock.postOnce(messagesUrl, {
         throws: 'Error',
       });
+      const fetchTopicDetailsMock = fetchMock.getOnce(detailsUrl, 200);
       await renderAndSubmitData();
-      expect(sendTopicMessageMock.called(url)).toBeTruthy();
+      expect(sendTopicMessageMock.called()).toBeTruthy();
+      expect(fetchTopicDetailsMock.called(detailsUrl)).toBeFalsy();
       expect(screen.getByRole('alert')).toBeInTheDocument();
       expect(mockNavigate).toHaveBeenLastCalledWith(
         `../${clusterTopicMessagesRelativePath}`
@@ -139,9 +145,9 @@ describe('SendMessage', () => {
     });
 
     it('should check and view validation error message when is not valid', async () => {
-      const sendTopicMessageMock = fetchMock.postOnce(url, 200);
+      const sendTopicMessageMock = fetchMock.postOnce(messagesUrl, 200);
       await renderAndSubmitData(['error']);
-      expect(sendTopicMessageMock.called(url)).toBeFalsy();
+      expect(sendTopicMessageMock.called(messagesUrl)).toBeFalsy();
       expect(mockNavigate).not.toHaveBeenCalled();
     });
   });

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

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
-import cn from 'classnames';
 import { clusterPath } from 'lib/paths';
 import { BREADCRUMB_DEFINITIONS } from 'lib/constants';
 
@@ -40,11 +39,7 @@ const Breadcrumb: React.FC = () => {
           </Link>
         </li>
       ))}
-      <li
-        className={cn('is-active', {
-          'is-size-4 has-text-weight-medium is-capitalized': links.length < 2,
-        })}
-      >
+      <li>
         <span>{links[links.length - 1]}</span>
       </li>
     </BreadcrumbWrapper>

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

@@ -1,43 +0,0 @@
-import React, { useRef } from 'react';
-import cx from 'classnames';
-
-interface DynamicTextButtonProps {
-  onClick(): void;
-  className?: string;
-  title: string;
-  delay?: number;
-  render(clicked: boolean): React.ReactNode;
-}
-
-const DynamicTextButton: React.FC<DynamicTextButtonProps> = ({
-  onClick,
-  className,
-  title,
-  render,
-  delay = 3000,
-}) => {
-  const [clicked, setClicked] = React.useState(false);
-
-  const timeout = useRef(0);
-
-  const clickHandler = () => {
-    onClick();
-    setClicked(true);
-    timeout.current = window.setTimeout(() => setClicked(false), delay);
-  };
-
-  React.useEffect(() => () => window.clearTimeout(timeout.current));
-
-  return (
-    <button
-      className={cx('button', className)}
-      title={title}
-      type="button"
-      onClick={clickHandler}
-    >
-      {render(clicked)}
-    </button>
-  );
-};
-
-export default DynamicTextButton;

kafka-ui-react-app/src/components/common/DynamicTextButton/__tests__/DynamicTextButton.spec.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import DynamicTextButton from 'components/common/DynamicTextButton/DynamicTextButton';
-import { render } from 'lib/testHelpers';
-import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/react';
-
-describe('DynamicButton', () => {
-  const mockCallback = jest.fn();
-  it('exectutes callback', () => {
-    render(
-      <DynamicTextButton
-        onClick={mockCallback}
-        title="title"
-        render={() => 'text'}
-      />
-    );
-
-    userEvent.click(screen.getByTitle('title'));
-    expect(mockCallback).toBeCalled();
-  });
-
-  it('changes the text', () => {
-    render(
-      <DynamicTextButton
-        onClick={mockCallback}
-        title="title"
-        render={(clicked) => (clicked ? 'active' : 'default')}
-      />
-    );
-
-    const button = screen.getByTitle('title');
-    expect(button).toHaveTextContent('default');
-    userEvent.click(button);
-    expect(button).toHaveTextContent('active');
-  });
-});

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

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  background-color: ${({ theme }) => theme.viewer.wrapper};
+  padding: 8px 16px;
+`;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import Editor from 'components/common/Editor/Editor';
 import { SchemaType } from 'generated-sources';
 
-import { StyledWrapper } from './StyledWrapper.styled';
+import * as S from './EditorViewer.styled';
 
 export interface FullMessageProps {
   data: string;
@@ -23,7 +23,7 @@ const EditorViewer: React.FC<FullMessageProps> = ({
 }) => {
   try {
     return (
-      <StyledWrapper>
+      <S.Wrapper>
         <Editor
           isFixedHeight
           schemaType={schemaType}
@@ -36,13 +36,13 @@ const EditorViewer: React.FC<FullMessageProps> = ({
           }}
           readOnly
         />
-      </StyledWrapper>
+      </S.Wrapper>
     );
   } catch (e) {
     return (
-      <StyledWrapper>
+      <S.Wrapper>
         <p>{data}</p>
-      </StyledWrapper>
+      </S.Wrapper>
     );
   }
 };

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

@@ -1,8 +0,0 @@
-import styled, { css } from 'styled-components';
-
-export const StyledWrapper = styled.div(
-  ({ theme }) => css`
-    background-color: ${theme.viewer.wrapper};
-    padding: 8px 16px;
-  `
-);

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

@@ -5,41 +5,45 @@ export interface InputProps {
   hasLeftIcon: boolean;
 }
 
+export const Wrapper = styled.div`
+  position: relative;
+`;
+
 export const Input = styled.input<InputProps>(
-  ({ theme, ...props }) => css`
-    border: 1px ${theme.input.borderColor.normal} solid;
+  ({ theme: { input }, inputSize, hasLeftIcon }) => css`
+    border: 1px ${input.borderColor.normal} solid;
     border-radius: 4px;
-    height: ${props.inputSize === 'M' ? '32px' : '40px'};
+    height: ${inputSize === 'M' ? '32px' : '40px'};
     width: 100%;
-    padding-left: ${props.hasLeftIcon ? '36px' : '12px'};
+    padding-left: ${hasLeftIcon ? '36px' : '12px'};
     font-size: 14px;
 
     &::placeholder {
-      color: ${theme.input.color.placeholder.normal};
+      color: ${input.color.placeholder.normal};
       font-size: 14px;
     }
     &:hover {
-      border-color: ${theme.input.borderColor.hover};
+      border-color: ${input.borderColor.hover};
     }
     &:focus {
       outline: none;
-      border-color: ${theme.input.borderColor.focus};
+      border-color: ${input.borderColor.focus};
       &::placeholder {
         color: transparent;
       }
     }
     &:disabled {
-      color: ${theme.input.color.disabled};
-      border-color: ${theme.input.borderColor.disabled};
+      color: ${input.color.disabled};
+      border-color: ${input.borderColor.disabled};
       cursor: not-allowed;
     }
     &:read-only {
-      color: ${theme.input.color.readOnly};
+      color: ${input.color.readOnly};
       border: none;
-      background-color: ${theme.input.backgroundColor.readOnly};
+      background-color: ${input.backgroundColor.readOnly};
       &:focus {
         &::placeholder {
-          color: ${theme.input.color.placeholder.readOnly};
+          color: ${input.color.placeholder.readOnly};
         }
       }
       cursor: not-allowed;
@@ -51,3 +55,21 @@ export const FormError = styled.p`
   color: ${({ theme }) => theme.input.error};
   font-size: 12px;
 `;
+
+interface InputIconProps {
+  className: string;
+  position: 'left' | 'right';
+  inputSize: 'M' | 'L';
+}
+
+export const InputIcon = styled.i<InputIconProps>`
+  position: absolute;
+  top: 50%;
+  line-height: 0;
+  z-index: 1;
+  left: ${({ position }) => (position === 'left' ? '12px' : 'unset')};
+  right: ${({ position }) => (position === 'right' ? '15px' : 'unset')};
+  height: 11px;
+  width: 11px;
+  color: ${({ theme }) => theme.input.icon.color};
+`;

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { RegisterOptions, useFormContext } from 'react-hook-form';
-import styled from 'styled-components';
 
-import { InputIcon } from './InputIcon.styled';
 import * as S from './Input.styled';
 
 export interface InputProps
@@ -15,7 +13,6 @@ export interface InputProps
 }
 
 const Input: React.FC<InputProps> = ({
-  className,
   name,
   hookFormOptions,
   leftIcon,
@@ -25,39 +22,33 @@ const Input: React.FC<InputProps> = ({
 }) => {
   const methods = useFormContext();
   return (
-    <div className={className}>
+    <S.Wrapper>
       {leftIcon && (
-        <InputIcon className={leftIcon} position="left" inputSize={inputSize} />
+        <S.InputIcon
+          className={leftIcon}
+          position="left"
+          inputSize={inputSize}
+        />
       )}
       {name ? (
         <S.Input
-          className={className}
           inputSize={inputSize}
           {...methods.register(name, { ...hookFormOptions })}
           hasLeftIcon={!!leftIcon}
           {...rest}
         />
       ) : (
-        <S.Input
-          className={className}
-          inputSize={inputSize}
-          hasLeftIcon={!!leftIcon}
-          {...rest}
-        />
+        <S.Input inputSize={inputSize} hasLeftIcon={!!leftIcon} {...rest} />
       )}
       {rightIcon && (
-        <InputIcon
+        <S.InputIcon
           className={rightIcon}
           position="right"
           inputSize={inputSize}
         />
       )}
-    </div>
+    </S.Wrapper>
   );
 };
 
-const InputWrapper = styled(Input)`
-  position: relative;
-`;
-
-export default InputWrapper;
+export default Input;

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

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-interface Props {
-  className: string;
-  position: 'left' | 'right';
-  inputSize: 'M' | 'L';
-}
-
-export const InputIcon = styled.i<Props>`
-  position: absolute;
-  top: 50%;
-  line-height: 0;
-  z-index: 1;
-  left: ${(props) => (props.position === 'left' ? '12px' : 'unset')};
-  right: ${(props) => (props.position === 'right' ? '15px' : 'unset')};
-  height: 11px;
-  width: 11px;
-  color: ${({ theme }) => theme.input.icon.color};
-`;

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

@@ -90,7 +90,7 @@ const Pagination: React.FC<PaginationProps> = ({ totalPages }) => {
           )}
           {!pages.includes(2) && (
             <li>
-              <span className="pagination-ellipsis">&hellip;</span>
+              <span>&hellip;</span>
             </li>
           )}
           {pages.map((p) => (
@@ -103,7 +103,7 @@ const Pagination: React.FC<PaginationProps> = ({ totalPages }) => {
           ))}
           {!pages.includes(totalPages - 1) && (
             <li>
-              <span className="pagination-ellipsis">&hellip;</span>
+              <span>&hellip;</span>
             </li>
           )}
           {!pages.includes(totalPages) && (

kafka-ui-react-app/src/components/common/Pagination/__tests__/Pagination.spec.tsx

@@ -50,17 +50,11 @@ describe('Pagination', () => {
     it('renders 1 spread element after first page control', () => {
       setupComponent('?page=8');
       expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('…');
-      expect(screen.getAllByRole('listitem')[1].firstChild).toHaveClass(
-        'pagination-ellipsis'
-      );
     });
 
     it('renders 1 spread element before last spread control', () => {
       setupComponent('?page=2');
       expect(screen.getAllByRole('listitem')[7]).toHaveTextContent('…');
-      expect(screen.getAllByRole('listitem')[7].firstChild).toHaveClass(
-        'pagination-ellipsis'
-      );
     });
 
     it('renders 2 spread elements', () => {

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

@@ -1,38 +0,0 @@
-import styled from 'styled-components';
-
-export const SecondaryTabs = styled.nav`
-  & button {
-    background-color: ${(props) =>
-      props.theme.secondaryTab.backgroundColor.normal};
-    color: ${(props) => props.theme.secondaryTab.color.normal};
-    padding: 6px;
-    height: 32px;
-    min-width: 57px;
-    border: 1px solid ${(props) => props.theme.layout.stuffBorderColor};
-    cursor: pointer;
-
-    &:hover {
-      background-color: ${(props) =>
-        props.theme.secondaryTab.backgroundColor.hover};
-      color: ${(props) => props.theme.secondaryTab.color.hover};
-    }
-
-    &.is-active {
-      background-color: ${(props) =>
-        props.theme.secondaryTab.backgroundColor.active};
-      color: ${(props) => props.theme.secondaryTab.color.active};
-    }
-  }
-
-  & > * {
-    &:first-child {
-      border-radius: 4px 0 0 4px;
-    }
-    &:last-child {
-      border-radius: 0 4px 4px 0;
-    }
-    &:not(:last-child) {
-      border-right: 0px;
-    }
-  }
-`;

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

@@ -1,55 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import React, { PropsWithChildren } from 'react';
-import classNames from 'classnames';
-
-interface TabsProps {
-  tabs: string[];
-  defaultSelectedIndex?: number;
-  onChange?(index: number): void;
-}
-
-const Tabs: React.FC<PropsWithChildren<TabsProps>> = ({
-  tabs,
-  defaultSelectedIndex = 0,
-  onChange,
-  children,
-}) => {
-  const [selectedIndex, setSelectedIndex] =
-    React.useState(defaultSelectedIndex);
-
-  React.useEffect(() => {
-    setSelectedIndex(defaultSelectedIndex);
-  }, [defaultSelectedIndex]);
-
-  const handleChange = (index: number) => {
-    setSelectedIndex(index);
-    onChange?.(index);
-  };
-
-  return (
-    <>
-      <div className="tabs">
-        <ul>
-          {tabs.map((tab, index) => (
-            <li
-              key={tab}
-              className={classNames({ 'is-active': index === selectedIndex })}
-            >
-              <a
-                role="button"
-                tabIndex={index}
-                onClick={() => handleChange(index)}
-                onKeyDown={() => handleChange(index)}
-              >
-                {tab}
-              </a>
-            </li>
-          ))}
-        </ul>
-      </div>
-      {React.Children.toArray(children)[selectedIndex]}
-    </>
-  );
-};
-
-export default Tabs;

kafka-ui-react-app/src/components/common/Tabs/__tests__/Tabs.spec.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import Tabs from 'components/common/Tabs/Tabs';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-describe('Tabs component', () => {
-  const tabs: string[] = ['Tab 1', 'Tab 2', 'Tab 3'];
-
-  const child1 = <div data-testid="child_1" />;
-  const child2 = <div data-testid="child_2" />;
-  const child3 = <div data-testid="child_3" />;
-
-  beforeEach(() =>
-    render(
-      <Tabs tabs={tabs}>
-        {child1}
-        {child2}
-        {child3}
-      </Tabs>
-    )
-  );
-
-  it('renders the tabs with default index 0', () => {
-    expect(screen.getAllByRole('listitem')[0]).toHaveClass('is-active');
-  });
-  it('renders the list of tabs', () => {
-    screen.queryAllByRole('button').forEach((link, idx) => {
-      expect(link).toHaveTextContent(tabs[idx]);
-    });
-  });
-  it('expects list items to be in the document', () => {
-    screen.queryAllByRole('button').forEach((link, idx) => {
-      userEvent.click(link);
-      expect(screen.getByTestId(`child_${idx + 1}`)).toBeInTheDocument();
-    });
-  });
-});

kafka-ui-react-app/src/components/common/table/SortableCulumnHeader/SortableColumnHeader.tsx

@@ -1,26 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import cx from 'classnames';
-
-export interface ListHeaderProps {
-  value: any;
-  title: string;
-  orderBy: any;
-  setOrderBy: React.Dispatch<React.SetStateAction<any>>;
-}
-
-const ListHeaderCell: React.FC<ListHeaderProps> = ({
-  value,
-  title,
-  orderBy,
-  setOrderBy,
-}) => (
-  <th
-    className={cx('is-clickable', orderBy === value && 'has-text-link-dark')}
-    onClick={() => setOrderBy(value)}
-  >
-    {title}
-  </th>
-);
-
-export default ListHeaderCell;

kafka-ui-react-app/src/components/common/table/__tests__/SortableColumnHeader.spec.tsx

@@ -1,32 +0,0 @@
-import SortableColumnHeader from 'components/common/table/SortableCulumnHeader/SortableColumnHeader';
-import { TopicColumnsToSort } from 'generated-sources';
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-describe('ListHeader', () => {
-  const setOrderBy = jest.fn();
-  const component = (
-    <table>
-      <thead>
-        <tr>
-          <SortableColumnHeader
-            value={TopicColumnsToSort.NAME}
-            title="Name"
-            orderBy={null}
-            setOrderBy={setOrderBy}
-          />
-        </tr>
-      </thead>
-    </table>
-  );
-
-  describe('on column click', () => {
-    it('calls setOrderBy', () => {
-      render(component);
-      userEvent.click(screen.getByRole('columnheader'));
-      expect(setOrderBy).toHaveBeenCalledTimes(1);
-      expect(setOrderBy).toHaveBeenCalledWith(TopicColumnsToSort.NAME);
-    });
-  });
-});

kafka-ui-react-app/src/theme/bulma_overrides.scss

@@ -1,95 +0,0 @@
-.has {
-  &-text-overflow-ellipsis {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &-text-nowrap {
-    white-space: nowrap;
-  }
-
-  &-content-overflow-ellipsis {
-    max-height: 73px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    background-color: #fff;
-
-    background: -webkit-linear-gradient(
-      90deg,
-      rgba(0, 0, 0, 0.1) 0%,
-      rgba(0, 0, 0, 1) 40%
-    );
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-}
-
-.breadcrumb li {
-  &.is-active > span {
-    padding: 0 0.75em;
-  }
-
-  &:first-child > span {
-    padding-left: 0;
-  }
-}
-
-.section {
-  animation: fadein 0.5s;
-}
-
-.select.is-block select {
-  width: 100%;
-}
-
-.notification {
-  &.is-light {
-    &.is-primary {
-      background-color: #ebfffc;
-      color: #00947e;
-    }
-
-    &.is-danger {
-      background-color: #feecf0;
-      color: #cc0f35;
-    }
-  }
-}
-
-.is-family-code {
-  font-family: 'Roboto Mono', sans-serif !important;
-  font-size: 0.9rem;
-  line-height: 1.5em;
-}
-
-@keyframes fadein {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.level.level-multiline {
-  flex-wrap: wrap;
-  .level-item.is-one-third {
-    flex-basis: 26%;
-  }
-  .level-item.is-one-third:nth-child(n + 4) {
-    margin-top: 10px;
-  }
-}
-
-.is-size-8 {
-  font-size: $size-8;
-}
-
-.tag:not(body) {
-  font-size: 0.75rem;
-  height: 1.75em;
-  line-height: 1.75;
-}

kafka-ui-react-app/src/theme/index.scss

@@ -1,59 +1,11 @@
 @import '@fortawesome/fontawesome-free/css/all.min.css';
-@import 'src/theme/variables';
-
-// utilities
-@import "bulma/sass/utilities/initial-variables";
-@import "bulma/sass/utilities/functions";
-@import "bulma/sass/utilities/derived-variables";
-@import "bulma/sass/utilities/mixins";
-@import "bulma/sass/utilities/controls";
-@import "bulma/sass/utilities/extends";
 
 // Base
 @import "bulma/sass/base/minireset";
 @import "bulma/sass/base/generic";
-@import "bulma/sass/base/animations";
-
-// Elements
-
-// Form
-@import "bulma/sass/form/shared";
-@import "bulma/sass/form/input-textarea";
-@import "bulma/sass/form/checkbox-radio";
-@import "bulma/sass/form/select";
-@import "bulma/sass/form/file";
-@import "bulma/sass/form/tools";
 
 // Components
-@import "bulma/sass/components/breadcrumb";
-@import "bulma/sass/components/card";
 @import "bulma/sass/components/dropdown";
-@import "bulma/sass/components/level";
-@import "bulma/sass/components/media";
-@import "bulma/sass/components/menu";
-@import "bulma/sass/components/message";
-@import "bulma/sass/components/modal";
-@import "bulma/sass/components/navbar";
-@import "bulma/sass/components/pagination";
-@import "bulma/sass/components/panel";
-@import "bulma/sass/components/tabs";
-
-// Grid
-@import "bulma/sass/grid/columns";
-@import "bulma/sass/grid/tiles";
-
-// Helpers
-@import "bulma/sass/helpers/color";
-@import "bulma/sass/helpers/flexbox";
-@import "bulma/sass/helpers/float";
-@import "bulma/sass/helpers/other";
-@import "bulma/sass/helpers/overflow";
-@import "bulma/sass/helpers/position";
-@import "bulma/sass/helpers/spacing";
-@import "bulma/sass/helpers/typography";
-@import "bulma/sass/helpers/visibility";
-
-@import 'src/theme/bulma_overrides';
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');
@@ -77,3 +29,12 @@ input, select, textarea, button {
 code {
   font-family: 'Roboto Mono', sans-serif;
 }
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

kafka-ui-react-app/src/theme/theme.ts

@@ -115,6 +115,8 @@ const theme = {
       3: {
         fontSize: '16px',
         lineHeight: '24px',
+        fontWeight: 400,
+        marginBottom: '16px',
       },
       4: {
         fontSize: '14px',

kafka-ui-react-app/src/theme/variables.scss

@@ -1,12 +0,0 @@
-// Typography
-$size-7: 0.875rem;
-$size-8: 0.75rem;
-$body-line-height: 1.34;
-$body-color: hsl(0, 100%, 0%);
-
-// Section
-$section-padding-desktop: 0 0 0.5rem;
-$section-padding: 1rem 1.5rem 3rem;
-
-// Tag
-$tag-radius: 16px;