0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[ISSUE 1406] Get rid of direct use of colors map. Refactoring.

Browse source 
* Get rid of direct use of colors map

* Edited direct using color map in styled component

* Resolved conflicts, refactored Dropdown component

* resolved feedback

* refactoring

Co-authored-by: Oleg Shur <workshur@gmail.com>
This commit is contained in:
Zorii4 2022-01-25 18:10:02 +03:00 • committed by GitHub
parent 315a3612c1
commit c116c844bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
61 changed files with 1187 additions and 560 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -35,7 +35,7 @@ export const Sidebar = styled.div<{ $visible: boolean }>(
overflow-y: scroll;
transition: width 0.25s, opacity 0.25s, transform 0.25s,
-webkit-transform 0.25s;
background: ${theme.menuStyles.backgroundColor.normal};
background: ${theme.menu.backgroundColor.normal};
@media screen and (max-width: 1023px) {
${$visible &&
`transform: translate3d(${theme.layout.navBarWidth}, 0, 0)`};
@ -99,7 +99,7 @@ export const Navbar = styled.nav(
left: 0;
right: 0;
z-index: 30;
background-color: ${theme.menuStyles.backgroundColor.normal};
background-color: ${theme.menu.backgroundColor.normal};
min-height: 3.25rem;
`
);
@ -132,7 +132,7 @@ export const NavbarBurger = styled.div(
padding: 0;
&:hover {
background-color: ${theme.menuStyles.backgroundColor.hover};
background-color: ${theme.menu.backgroundColor.hover};
}
@media screen and (min-width: 1024px) {
@ -145,7 +145,7 @@ export const Span = styled.span(
({ theme }) => css`
display: block;
position: absolute;
background: ${theme.menuStyles.color.active};
background: ${theme.menu.color.active};
height: 1px;
left: calc(50% - 8px);
transform-origin: center;
@ -174,7 +174,7 @@ export const Hyperlink = styled.a(
flex-shrink: 0;
align-items: center;
margin: 0;
color: ${theme.menuStyles.color.active};
color: ${theme.menu.color.active};
font-size: 1.25rem;
font-weight: 600;
cursor: pointer;

3
kafka-ui-react-app/src/components/Connect/Details/Config/Config.tsx
View file

@ -9,7 +9,6 @@ import {
import PageLoader from 'components/common/PageLoader/PageLoader';
import Editor from 'components/common/Editor/Editor';
import styled from 'styled-components';
import { Colors } from 'theme/theme';
interface RouterParams {
clusterName: ClusterName;
@ -31,7 +30,7 @@ export interface ConfigProps {
const ConnectConfigWrapper = styled.div`
padding: 16px;
margin: 16px;
border: 1px solid ${Colors.neutral[10]};
border: 1px solid ${({ theme }) => theme.layout.stuffColor};
border-radius: 8px;
`;

16
kafka-ui-react-app/src/components/Connect/Details/Config/__test__/Config.spec.tsx
View file

@ -6,6 +6,8 @@ import { clusterConnectConnectorConfigPath } from 'lib/paths';
import ConfigContainer from 'components/Connect/Details/Config/ConfigContainer';
import Config, { ConfigProps } from 'components/Connect/Details/Config/Config';
import { connector } from 'redux/reducers/connect/__test__/fixtures';
import { ThemeProvider } from 'styled-components';
import theme from 'theme/theme';
jest.mock('components/common/PageLoader/PageLoader', () => 'mock-PageLoader');
@ -29,12 +31,14 @@ describe('Config', () => {
pathname={pathname}
urlParams={{ clusterName, connectName, connectorName }}
>
<Config
fetchConfig={jest.fn()}
isConfigFetching={false}
config={connector.config}
{...props}
/>
<ThemeProvider theme={theme}>
<Config
fetchConfig={jest.fn()}
isConfigFetching={false}
config={connector.config}
{...props}
/>
</ThemeProvider>
</TestRouterWrapper>
);

2
kafka-ui-react-app/src/components/Connect/Details/Config/__test__/__snapshots__/Config.spec.tsx.snap
View file

@ -4,7 +4,7 @@ exports[`Config view matches snapshot 1`] = `
.c0 {
padding: 16px;
margin: 16px;
border: 1px solid #E3E6E8;
border: 1px solid #F1F2F3;
border-radius: 8px;
}

2
kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/ListItem.tsx
View file

@ -41,7 +41,7 @@ const ListItem: React.FC<ListItemProps> = ({ task, restartTask }) => {
<td style={{ width: '5%' }}>
<div>
<Dropdown label={<VerticalElipsisIcon />} right>
<DropdownItem onClick={restartTaskHandler}>
<DropdownItem onClick={restartTaskHandler} danger>
<span>Clear Messages</span>
</DropdownItem>
</Dropdown>

24
kafka-ui-react-app/src/components/Connect/Details/Tasks/ListItem/__tests__/__snapshots__/ListItem.spec.tsx.snap
View file

@ -1,6 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ListItem view matches snapshot 1`] = `
.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.c2 {
background: transparent;
border: none;
@ -22,14 +32,8 @@ exports[`ListItem view matches snapshot 1`] = `
cursor: pointer;
}
.c1 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
.c3 {
color: #E51A1A;
}
.c0 {
@ -81,8 +85,6 @@ exports[`ListItem view matches snapshot 1`] = `
className="c1"
>
<button
aria-controls="dropdown-menu"
aria-haspopup="true"
className="c2"
onClick={[Function]}
type="button"
@ -110,7 +112,7 @@ exports[`ListItem view matches snapshot 1`] = `
className="dropdown-content has-text-left"
>
<a
className="dropdown-item is-link"
className="c3 dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"

3
kafka-ui-react-app/src/components/Connect/Edit/Edit.styled.ts
View file

@ -1,5 +1,4 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
export const ConnectEditWrapperStyled = styled.div`
margin: 16px;
@ -13,7 +12,7 @@ export const ConnectEditWarningMessageStyled = styled.div`
height: 48px;
display: flex;
align-items: center;
background-color: ${Colors.yellow[10]};
background-color: ${({ theme }) => theme.connectEditWarning};
border-radius: 8px;
padding: 8px;
margin-bottom: 16px;

6
kafka-ui-react-app/src/components/Connect/List/List.styled.ts Normal file
View file

@ -0,0 +1,6 @@
import styled from 'styled-components';
export const TagsWrapper = styled.div`
display: flex;
flex-wrap: wrap;
`;

16
kafka-ui-react-app/src/components/Connect/List/ListItem.tsx
View file

@ -12,19 +12,14 @@ import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationM
import { Tag } from 'components/common/Tag/Tag.styled';
import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
import { Colors } from 'theme/theme';
import styled from 'styled-components';
import * as S from './List.styled';
export interface ListItemProps {
clusterName: ClusterName;
connector: FullConnectorInfo;
}
const TopicTagsWrapper = styled.div`
display: flex;
flex-wrap: wrap;
`;
const ListItem: React.FC<ListItemProps> = ({
clusterName,
connector: {
@ -84,13 +79,13 @@ const ListItem: React.FC<ListItemProps> = ({
<td>{type}</td>
<td>{connectorClass}</td>
<td>
<TopicTagsWrapper>
<S.TagsWrapper>
{topics?.map((t) => (
<Tag key={t} color="gray">
<Link to={clusterTopicPath(clusterName, t)}>{t}</Link>
</Tag>
))}
</TopicTagsWrapper>
</S.TagsWrapper>
</td>
<td>{status && <Tag color={stateColor}>{status.state}</Tag>}</td>
<td>
@ -106,8 +101,9 @@ const ListItem: React.FC<ListItemProps> = ({
<DropdownDivider />
<DropdownItem
onClick={() => setDeleteConnectorConfirmationVisible(true)}
danger
>
<span style={{ color: Colors.red[50] }}>Remove Connector</span>
Remove Connector
</DropdownItem>
</Dropdown>
</div>

254
kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap
View file

@ -1,6 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Connectors ListItem matches snapshot 1`] = `
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.c5 {
background: transparent;
border: none;
@ -22,14 +32,8 @@ exports[`Connectors ListItem matches snapshot 1`] = `
cursor: pointer;
}
.c4 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
.c6 {
color: #E51A1A;
}
.c2 {
@ -61,7 +65,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
}
.c0 > a {
color: #171A1C;
color: normal:#171A1C;
font-weight: 500;
text-overflow: ellipsis;
}
@ -88,7 +92,13 @@ exports[`Connectors ListItem matches snapshot 1`] = `
},
"shadow": "rgba(0, 0, 0, 0.1)",
},
"buttonStyles": Object {
"breadcrumb": "#ABB5BA",
"button": Object {
"border": Object {
"active": "#171A1C",
"hover": "#454F54",
"normal": "#73848C",
},
"fontSize": Object {
"L": "16px",
"M": "14px",
@ -134,11 +144,21 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"warning": "#FFEECC",
},
},
"confirmationModal": Object {
"overlay": "rgba(10, 10, 10, 0.1)",
"shadow": "rgba(0, 0, 0, 0.1)",
"configList": Object {
"color": "#ABB5BA",
},
"headingStyles": Object {
"connectEditWarning": "#FFEECC",
"consumerTopicContent": Object {
"backgroundColor": "#F1F2F3",
},
"dangerZone": Object {
"borderColor": "#E3E6E8",
"color": "#E51A1A",
},
"dropdown": Object {
"color": "#E51A1A",
},
"heading": Object {
"h1": Object {
"color": "#171A1C",
},
@ -157,6 +177,32 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"messageToggleIconOpened": "#171A1C",
"verticalElipsisIcon": "#73848C",
},
"input": Object {
"backgroundColor": Object {
"readOnly": "#F1F2F3",
},
"borderColor": Object {
"disabled": "#E3E6E8",
"focus": "#454F54",
"hover": "#73848C",
"normal": "#ABB5BA",
},
"color": Object {
"disabled": "#ABB5BA",
"placeholder": Object {
"normal": "#ABB5BA",
"readOnly": "#ABB5BA",
},
"readOnly": "#171A1C",
},
"error": "#E51A1A",
"icon": Object {
"color": "#454F54",
},
"label": Object {
"color": "#454F54",
},
},
"layout": Object {
"minWidth": "1200px",
"navBarHeight": "3.25rem",
@ -167,7 +213,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"stuffBorderColor": "#E3E6E8",
"stuffColor": "#F1F2F3",
},
"menuStyles": Object {
"menu": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
@ -186,6 +232,12 @@ exports[`Connectors ListItem matches snapshot 1`] = `
},
"metrics": Object {
"backgroundColor": "#F1F2F3",
"filters": Object {
"color": Object {
"icon": "#171A1C",
"normal": "#73848C",
},
},
"indicator": Object {
"backgroundColor": "#FFFFFF",
"lightTextColor": "#ABB5BA",
@ -193,11 +245,20 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"warningTextColor": "#E51A1A",
},
},
"modal": Object {
"backgroundColor": "#FFFFFF",
"border": Object {
"bottom": "#F1F2F3",
"top": "#F1F2F3",
},
"overlay": "rgba(10, 10, 10, 0.1)",
"shadow": "rgba(0, 0, 0, 0.1)",
},
"pageLoader": Object {
"borderBottomColor": "#FFFFFF",
"borderColor": "#4F4FFF",
},
"paginationStyles": Object {
"pagination": Object {
"backgroundColor": "#FFFFFF",
"borderColor": Object {
"active": "#454F54",
@ -214,10 +275,11 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"currentPage": "#E3E6E8",
},
"panelColor": "#FFFFFF",
"primaryTabStyles": Object {
"primaryTab": Object {
"borderColor": Object {
"active": "#4F4FFF",
"hover": "transparent",
"nav": "#E3E6E8",
"normal": "transparent",
},
"color": Object {
@ -226,6 +288,12 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"normal": "#73848C",
},
},
"schema": Object {
"backgroundColor": Object {
"div": "#FFFFFF",
"tr": "#F1F2F3",
},
},
"scrollbar": Object {
"thumbColor": Object {
"active": "#73848C",
@ -236,7 +304,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"normal": "#FFFFFF",
},
},
"secondaryTabStyles": Object {
"secondaryTab": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
@ -248,7 +316,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"normal": "#73848C",
},
},
"selectStyles": Object {
"select": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#E3E6E8",
@ -272,7 +340,37 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"circle": "#FFFFFF",
"unchecked": "#ABB5BA",
},
"tagStyles": Object {
"table": Object {
"link": Object {
"color": Object {
"normal": "#171A1C",
},
},
"td": Object {
"color": Object {
"normal": "#171A1C",
},
},
"th": Object {
"backgroundColor": Object {
"normal": "#FFFFFF",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"normal": "#73848C",
},
"previewColor": Object {
"normal": "#4F4FFF",
},
},
"tr": Object {
"backgroundColor": Object {
"hover": "#F1F2F3",
},
},
},
"tag": Object {
"backgroundColor": Object {
"blue": "#e3f2fd",
"gray": "#F1F2F3",
@ -283,20 +381,48 @@ exports[`Connectors ListItem matches snapshot 1`] = `
},
"color": "#171A1C",
},
"textarea": Object {
"focus": "transparent",
},
"thStyles": Object {
"textArea": Object {
"backgroundColor": Object {
"normal": "#FFFFFF",
"readOnly": "#F1F2F3",
},
"borderColor": Object {
"disabled": "#E3E6E8",
"focus": "#454F54",
"hover": "#73848C",
"normal": "#ABB5BA",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"normal": "#73848C",
"disabled": "#ABB5BA",
"placeholder": Object {
"focus": Object {
"normal": "transparent",
"readOnly": "#ABB5BA",
},
"normal": "#ABB5BA",
},
"readOnly": "#171A1C",
},
"previewColor": Object {
"normal": "#4F4FFF",
},
"topicFormLabel": Object {
"color": "#73848C",
},
"topicMetaData": Object {
"backgroundColor": "#F1F2F3",
"color": Object {
"label": "#73848C",
"meta": "#ABB5BA",
"value": "#2F3639",
},
},
"topicsList": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
},
"color": Object {
"active": "#171A1C",
"hover": "#73848C",
"normal": "#171A1C",
},
},
"viewer": Object {
@ -471,37 +597,30 @@ exports[`Connectors ListItem matches snapshot 1`] = `
<div
className="c4"
>
<Styled(DropdownTrigger)
<styled.button
onClick={[Function]}
>
<DropdownTrigger
<button
className="c5"
onClick={[Function]}
type="button"
>
<button
aria-controls="dropdown-menu"
aria-haspopup="true"
className="c5"
onClick={[Function]}
type="button"
>
<VerticalElipsisIcon>
<svg
fill="none"
height="16"
viewBox="0 0 4 16"
width="4"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
fill="#73848C"
/>
</svg>
</VerticalElipsisIcon>
</button>
</DropdownTrigger>
</Styled(DropdownTrigger)>
<VerticalElipsisIcon>
<svg
fill="none"
height="16"
viewBox="0 0 4 16"
width="4"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
fill="#73848C"
/>
</svg>
</VerticalElipsisIcon>
</button>
</styled.button>
</div>
</styled.div>
<div
@ -518,25 +637,24 @@ exports[`Connectors ListItem matches snapshot 1`] = `
/>
</DropdownDivider>
<DropdownItem
danger={true}
onClick={[Function]}
>
<a
<styled.a
$isDanger={true}
className="dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
<span
style={
Object {
"color": "#E51A1A",
}
}
<a
className="c6 dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Remove Connector
</span>
</a>
</a>
</styled.a>
</DropdownItem>
</div>
</div>

3
kafka-ui-react-app/src/components/ConsumerGroups/Details/Details.tsx
View file

@ -15,7 +15,6 @@ import * as Metrics from 'components/common/Metrics';
import { Tag } from 'components/common/Tag/Tag.styled';
import Dropdown from 'components/common/Dropdown/Dropdown';
import DropdownItem from 'components/common/Dropdown/DropdownItem';
import { Colors } from 'theme/theme';
import { groupBy } from 'lodash';
import { Table } from 'components/common/table/Table/Table.styled';
import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
@ -79,8 +78,8 @@ const Details: React.FC = () => {
<Dropdown label={<VerticalElipsisIcon />} right>
<DropdownItem onClick={onResetOffsets}>Reset offset</DropdownItem>
<DropdownItem
style={{ color: Colors.red[50] }}
onClick={() => setIsConfirmationModalVisible(true)}
danger
>
Delete consumer group
</DropdownItem>

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

@ -26,12 +26,12 @@ export const ResetOffsetsStyledWrapper = styled.div`
& .date-picker {
height: 32px;
border: 1px ${(props) => props.theme.selectStyles.borderColor.normal} solid;
border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
border-radius: 4px;
font-size: 14px;
width: 50%;
padding-left: 12px;
color: ${(props) => props.theme.selectStyles.color.normal};
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;

6
kafka-ui-react-app/src/components/ConsumerGroups/Details/TopicContents/TopicContent.styled.ts
View file

@ -1,8 +1,8 @@
import styled, { css } from 'styled-components';
import { Colors } from 'theme/theme';
export const TopicContentWrapper = styled.tr`
background-color: ${Colors.neutral[5]};
background-color: ${({ theme }) =>
theme.consumerTopicContent.backgroundColor};
& > td {
padding: 16px !important;
}
@ -10,7 +10,7 @@ export const TopicContentWrapper = styled.tr`
export const ContentBox = styled.div(
({ theme }) => css`
background-color: ${theme.menuStyles.backgroundColor.normal};
background-color: ${theme.menu.backgroundColor.normal};
padding: 20px;
border-radius: 8px;
`

14
kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
View file

@ -18,12 +18,12 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })(
margin: 0;
line-height: 20px;
align-items: center;
color: ${theme.menuStyles.color.normal};
background-color: ${theme.menuStyles.backgroundColor.normal};
color: ${theme.menu.color.normal};
background-color: ${theme.menu.backgroundColor.normal};
&:hover {
background-color: ${theme.menuStyles.backgroundColor.hover};
color: ${theme.menuStyles.color.hover};
background-color: ${theme.menu.backgroundColor.hover};
color: ${theme.menu.color.hover};
}
`
);
@ -49,8 +49,8 @@ export const StatusIcon = styled.circle.attrs({
})<{ status: ServerStatus }>(
({ theme, status }) => css`
fill: ${status === ServerStatus.ONLINE
? theme.menuStyles.statusIconColor.online
: theme.menuStyles.statusIconColor.offline};
? theme.menu.statusIconColor.online
: theme.menu.statusIconColor.offline};
`
);
@ -69,5 +69,5 @@ type ChevronIconProps = { $open: boolean };
export const ChevronIcon = styled.path.attrs<ChevronIconProps>(({ $open }) => ({
d: $open ? 'M8.99988 5L4.99988 1L0.999878 5' : 'M1 1L5 5L9 1',
}))<ChevronIconProps>`
stroke: ${({ theme }) => theme.menuStyles.chevronIconColor};
stroke: ${({ theme }) => theme.menu.chevronIconColor};
`;

12
kafka-ui-react-app/src/components/Nav/Nav.styled.ts
View file

@ -21,17 +21,17 @@ export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })(
cursor: pointer;
text-decoration: none;
margin: 0px 0px;
background-color: ${theme.menuStyles.backgroundColor.normal};
color: ${theme.menuStyles.color.normal};
background-color: ${theme.menu.backgroundColor.normal};
color: ${theme.menu.color.normal};
&:hover {
background-color: ${theme.menuStyles.backgroundColor.hover};
color: ${theme.menuStyles.color.hover};
background-color: ${theme.menu.backgroundColor.hover};
color: ${theme.menu.color.hover};
}
&.${activeClassName} {
background-color: ${theme.menuStyles.backgroundColor.active};
color: ${theme.menuStyles.color.active};
background-color: ${theme.menu.backgroundColor.active};
color: ${theme.menu.color.active};
}
`
);

1
kafka-ui-react-app/src/components/Schemas/Details/Details.tsx
View file

@ -82,6 +82,7 @@ const Details: React.FC = () => {
<Dropdown label={<VerticalElipsisIcon />} right>
<DropdownItem
onClick={() => setDeleteSchemaConfirmationVisible(true)}
danger
>
Remove schema
</DropdownItem>

4
kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.styled.ts
View file

@ -40,7 +40,7 @@ export const LatestVersionWrapper = styled.div`
`;
export const MetaDataLabel = styled.h3`
color: ${theme.headingStyles.h3.color};
color: ${theme.heading.h3.color};
width: 110px;
font-size: ${theme.headingStyles.h3.fontSize};
font-size: ${theme.heading.h3.fontSize};
`;

5
kafka-ui-react-app/src/components/Schemas/Details/SchemaVersion/SchemaVersion.styled.ts
View file

@ -1,12 +1,11 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
export const SchemaVersionWrapper = styled.tr`
background-color: ${Colors.neutral[5]};
background-color: ${({ theme }) => theme.schema.backgroundColor.tr};
& > td {
padding: 16px !important;
& > div {
background-color: ${Colors.neutral[0]};
background-color: ${({ theme }) => theme.schema.backgroundColor.div};
border-radius: 8px;
padding: 24px;
}

164
kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap
View file

@ -13,7 +13,13 @@ exports[`LatestVersionItem matches snapshot 1`] = `
},
"shadow": "rgba(0, 0, 0, 0.1)",
},
"buttonStyles": Object {
"breadcrumb": "#ABB5BA",
"button": Object {
"border": Object {
"active": "#171A1C",
"hover": "#454F54",
"normal": "#73848C",
},
"fontSize": Object {
"L": "16px",
"M": "14px",
@ -59,11 +65,21 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"warning": "#FFEECC",
},
},
"confirmationModal": Object {
"overlay": "rgba(10, 10, 10, 0.1)",
"shadow": "rgba(0, 0, 0, 0.1)",
"configList": Object {
"color": "#ABB5BA",
},
"headingStyles": Object {
"connectEditWarning": "#FFEECC",
"consumerTopicContent": Object {
"backgroundColor": "#F1F2F3",
},
"dangerZone": Object {
"borderColor": "#E3E6E8",
"color": "#E51A1A",
},
"dropdown": Object {
"color": "#E51A1A",
},
"heading": Object {
"h1": Object {
"color": "#171A1C",
},
@ -82,6 +98,32 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"messageToggleIconOpened": "#171A1C",
"verticalElipsisIcon": "#73848C",
},
"input": Object {
"backgroundColor": Object {
"readOnly": "#F1F2F3",
},
"borderColor": Object {
"disabled": "#E3E6E8",
"focus": "#454F54",
"hover": "#73848C",
"normal": "#ABB5BA",
},
"color": Object {
"disabled": "#ABB5BA",
"placeholder": Object {
"normal": "#ABB5BA",
"readOnly": "#ABB5BA",
},
"readOnly": "#171A1C",
},
"error": "#E51A1A",
"icon": Object {
"color": "#454F54",
},
"label": Object {
"color": "#454F54",
},
},
"layout": Object {
"minWidth": "1200px",
"navBarHeight": "3.25rem",
@ -92,7 +134,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"stuffBorderColor": "#E3E6E8",
"stuffColor": "#F1F2F3",
},
"menuStyles": Object {
"menu": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
@ -111,6 +153,12 @@ exports[`LatestVersionItem matches snapshot 1`] = `
},
"metrics": Object {
"backgroundColor": "#F1F2F3",
"filters": Object {
"color": Object {
"icon": "#171A1C",
"normal": "#73848C",
},
},
"indicator": Object {
"backgroundColor": "#FFFFFF",
"lightTextColor": "#ABB5BA",
@ -118,11 +166,20 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"warningTextColor": "#E51A1A",
},
},
"modal": Object {
"backgroundColor": "#FFFFFF",
"border": Object {
"bottom": "#F1F2F3",
"top": "#F1F2F3",
},
"overlay": "rgba(10, 10, 10, 0.1)",
"shadow": "rgba(0, 0, 0, 0.1)",
},
"pageLoader": Object {
"borderBottomColor": "#FFFFFF",
"borderColor": "#4F4FFF",
},
"paginationStyles": Object {
"pagination": Object {
"backgroundColor": "#FFFFFF",
"borderColor": Object {
"active": "#454F54",
@ -139,10 +196,11 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"currentPage": "#E3E6E8",
},
"panelColor": "#FFFFFF",
"primaryTabStyles": Object {
"primaryTab": Object {
"borderColor": Object {
"active": "#4F4FFF",
"hover": "transparent",
"nav": "#E3E6E8",
"normal": "transparent",
},
"color": Object {
@ -151,6 +209,12 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"normal": "#73848C",
},
},
"schema": Object {
"backgroundColor": Object {
"div": "#FFFFFF",
"tr": "#F1F2F3",
},
},
"scrollbar": Object {
"thumbColor": Object {
"active": "#73848C",
@ -161,7 +225,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"normal": "#FFFFFF",
},
},
"secondaryTabStyles": Object {
"secondaryTab": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
@ -173,7 +237,7 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"normal": "#73848C",
},
},
"selectStyles": Object {
"select": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#E3E6E8",
@ -197,7 +261,37 @@ exports[`LatestVersionItem matches snapshot 1`] = `
"circle": "#FFFFFF",
"unchecked": "#ABB5BA",
},
"tagStyles": Object {
"table": Object {
"link": Object {
"color": Object {
"normal": "#171A1C",
},
},
"td": Object {
"color": Object {
"normal": "#171A1C",
},
},
"th": Object {
"backgroundColor": Object {
"normal": "#FFFFFF",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"normal": "#73848C",
},
"previewColor": Object {
"normal": "#4F4FFF",
},
},
"tr": Object {
"backgroundColor": Object {
"hover": "#F1F2F3",
},
},
},
"tag": Object {
"backgroundColor": Object {
"blue": "#e3f2fd",
"gray": "#F1F2F3",
@ -208,20 +302,48 @@ exports[`LatestVersionItem matches snapshot 1`] = `
},
"color": "#171A1C",
},
"textarea": Object {
"focus": "transparent",
},
"thStyles": Object {
"textArea": Object {
"backgroundColor": Object {
"normal": "#FFFFFF",
"readOnly": "#F1F2F3",
},
"borderColor": Object {
"disabled": "#E3E6E8",
"focus": "#454F54",
"hover": "#73848C",
"normal": "#ABB5BA",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"normal": "#73848C",
"disabled": "#ABB5BA",
"placeholder": Object {
"focus": Object {
"normal": "transparent",
"readOnly": "#ABB5BA",
},
"normal": "#ABB5BA",
},
"readOnly": "#171A1C",
},
"previewColor": Object {
"normal": "#4F4FFF",
},
"topicFormLabel": Object {
"color": "#73848C",
},
"topicMetaData": Object {
"backgroundColor": "#F1F2F3",
"color": Object {
"label": "#73848C",
"meta": "#ABB5BA",
"value": "#2F3639",
},
},
"topicsList": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
},
"color": Object {
"active": "#171A1C",
"hover": "#73848C",
"normal": "#171A1C",
},
},
"viewer": Object {

164
kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/SchemaVersion.spec.tsx.snap
View file

@ -13,7 +13,13 @@ exports[`SchemaVersion matches snapshot 1`] = `
},
"shadow": "rgba(0, 0, 0, 0.1)",
},
"buttonStyles": Object {
"breadcrumb": "#ABB5BA",
"button": Object {
"border": Object {
"active": "#171A1C",
"hover": "#454F54",
"normal": "#73848C",
},
"fontSize": Object {
"L": "16px",
"M": "14px",
@ -59,11 +65,21 @@ exports[`SchemaVersion matches snapshot 1`] = `
"warning": "#FFEECC",
},
},
"confirmationModal": Object {
"overlay": "rgba(10, 10, 10, 0.1)",
"shadow": "rgba(0, 0, 0, 0.1)",
"configList": Object {
"color": "#ABB5BA",
},
"headingStyles": Object {
"connectEditWarning": "#FFEECC",
"consumerTopicContent": Object {
"backgroundColor": "#F1F2F3",
},
"dangerZone": Object {
"borderColor": "#E3E6E8",
"color": "#E51A1A",
},
"dropdown": Object {
"color": "#E51A1A",
},
"heading": Object {
"h1": Object {
"color": "#171A1C",
},
@ -82,6 +98,32 @@ exports[`SchemaVersion matches snapshot 1`] = `
"messageToggleIconOpened": "#171A1C",
"verticalElipsisIcon": "#73848C",
},
"input": Object {
"backgroundColor": Object {
"readOnly": "#F1F2F3",
},
"borderColor": Object {
"disabled": "#E3E6E8",
"focus": "#454F54",
"hover": "#73848C",
"normal": "#ABB5BA",
},
"color": Object {
"disabled": "#ABB5BA",
"placeholder": Object {
"normal": "#ABB5BA",
"readOnly": "#ABB5BA",
},
"readOnly": "#171A1C",
},
"error": "#E51A1A",
"icon": Object {
"color": "#454F54",
},
"label": Object {
"color": "#454F54",
},
},
"layout": Object {
"minWidth": "1200px",
"navBarHeight": "3.25rem",
@ -92,7 +134,7 @@ exports[`SchemaVersion matches snapshot 1`] = `
"stuffBorderColor": "#E3E6E8",
"stuffColor": "#F1F2F3",
},
"menuStyles": Object {
"menu": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
@ -111,6 +153,12 @@ exports[`SchemaVersion matches snapshot 1`] = `
},
"metrics": Object {
"backgroundColor": "#F1F2F3",
"filters": Object {
"color": Object {
"icon": "#171A1C",
"normal": "#73848C",
},
},
"indicator": Object {
"backgroundColor": "#FFFFFF",
"lightTextColor": "#ABB5BA",
@ -118,11 +166,20 @@ exports[`SchemaVersion matches snapshot 1`] = `
"warningTextColor": "#E51A1A",
},
},
"modal": Object {
"backgroundColor": "#FFFFFF",
"border": Object {
"bottom": "#F1F2F3",
"top": "#F1F2F3",
},
"overlay": "rgba(10, 10, 10, 0.1)",
"shadow": "rgba(0, 0, 0, 0.1)",
},
"pageLoader": Object {
"borderBottomColor": "#FFFFFF",
"borderColor": "#4F4FFF",
},
"paginationStyles": Object {
"pagination": Object {
"backgroundColor": "#FFFFFF",
"borderColor": Object {
"active": "#454F54",
@ -139,10 +196,11 @@ exports[`SchemaVersion matches snapshot 1`] = `
"currentPage": "#E3E6E8",
},
"panelColor": "#FFFFFF",
"primaryTabStyles": Object {
"primaryTab": Object {
"borderColor": Object {
"active": "#4F4FFF",
"hover": "transparent",
"nav": "#E3E6E8",
"normal": "transparent",
},
"color": Object {
@ -151,6 +209,12 @@ exports[`SchemaVersion matches snapshot 1`] = `
"normal": "#73848C",
},
},
"schema": Object {
"backgroundColor": Object {
"div": "#FFFFFF",
"tr": "#F1F2F3",
},
},
"scrollbar": Object {
"thumbColor": Object {
"active": "#73848C",
@ -161,7 +225,7 @@ exports[`SchemaVersion matches snapshot 1`] = `
"normal": "#FFFFFF",
},
},
"secondaryTabStyles": Object {
"secondaryTab": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
@ -173,7 +237,7 @@ exports[`SchemaVersion matches snapshot 1`] = `
"normal": "#73848C",
},
},
"selectStyles": Object {
"select": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#E3E6E8",
@ -197,7 +261,37 @@ exports[`SchemaVersion matches snapshot 1`] = `
"circle": "#FFFFFF",
"unchecked": "#ABB5BA",
},
"tagStyles": Object {
"table": Object {
"link": Object {
"color": Object {
"normal": "#171A1C",
},
},
"td": Object {
"color": Object {
"normal": "#171A1C",
},
},
"th": Object {
"backgroundColor": Object {
"normal": "#FFFFFF",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"normal": "#73848C",
},
"previewColor": Object {
"normal": "#4F4FFF",
},
},
"tr": Object {
"backgroundColor": Object {
"hover": "#F1F2F3",
},
},
},
"tag": Object {
"backgroundColor": Object {
"blue": "#e3f2fd",
"gray": "#F1F2F3",
@ -208,20 +302,48 @@ exports[`SchemaVersion matches snapshot 1`] = `
},
"color": "#171A1C",
},
"textarea": Object {
"focus": "transparent",
},
"thStyles": Object {
"textArea": Object {
"backgroundColor": Object {
"normal": "#FFFFFF",
"readOnly": "#F1F2F3",
},
"borderColor": Object {
"disabled": "#E3E6E8",
"focus": "#454F54",
"hover": "#73848C",
"normal": "#ABB5BA",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"normal": "#73848C",
"disabled": "#ABB5BA",
"placeholder": Object {
"focus": Object {
"normal": "transparent",
"readOnly": "#ABB5BA",
},
"normal": "#ABB5BA",
},
"readOnly": "#171A1C",
},
"previewColor": Object {
"normal": "#4F4FFF",
},
"topicFormLabel": Object {
"color": "#73848C",
},
"topicMetaData": Object {
"backgroundColor": "#F1F2F3",
"color": Object {
"label": "#73848C",
"meta": "#ABB5BA",
"value": "#2F3639",
},
},
"topicsList": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
},
"color": Object {
"active": "#171A1C",
"hover": "#73848C",
"normal": "#171A1C",
},
},
"viewer": Object {

22
kafka-ui-react-app/src/components/Topics/List/List.styled.ts Normal file
View file

@ -0,0 +1,22 @@
import { NavLink } from 'react-router-dom';
import styled, { css } from 'styled-components';
export const Link = styled(NavLink).attrs({ activeClassName: 'is-active' })<{
$isInternal?: boolean;
}>(
({ theme, activeClassName, $isInternal }) => css`
color: ${theme.topicsList.color.normal};
font-weight: 500;
padding-left: ${$isInternal ? '5px' : 0};
&:hover {
background-color: ${theme.topicsList.backgroundColor.hover};
color: ${theme.topicsList.color.hover};
}
&.${activeClassName} {
background-color: ${theme.topicsList.backgroundColor.active};
color: ${theme.topicsList.color.active};
}
`
);

24
kafka-ui-react-app/src/components/Topics/List/ListItem.tsx
View file

@ -1,5 +1,4 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
import {
ClusterName,
TopicName,
@ -10,11 +9,12 @@ import Dropdown from 'components/common/Dropdown/Dropdown';
import ConfirmationModal from 'components/common/ConfirmationModal/ConfirmationModal';
import ClusterContext from 'components/contexts/ClusterContext';
import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
import { Colors } from 'theme/theme';
import { Tag } from 'components/common/Tag/Tag.styled';
import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
import * as S from './List.styled';
export interface ListItemProps {
topic: TopicWithDetailedInfo;
selected: boolean;
@ -90,18 +90,9 @@ const ListItem: React.FC<ListItemProps> = ({
)}
<TableKeyLink style={{ width: '44%' }}>
{internal && <Tag color="gray">IN</Tag>}
<NavLink
exact
to={`topics/${name}`}
activeClassName="is-active"
style={{
color: Colors.neutral[90],
fontWeight: 500,
paddingLeft: internal ? '5px' : 0,
}}
>
<S.Link exact to={`topics/${name}`} $isInternal={internal}>
{name}
</NavLink>
</S.Link>
</TableKeyLink>
<td>{partitions?.length}</td>
<td>{outOfSyncReplicas}</td>
@ -114,14 +105,15 @@ const ListItem: React.FC<ListItemProps> = ({
{!internal && !isReadOnly && vElipsisVisble ? (
<div className="has-text-right">
<Dropdown label={<VerticalElipsisIcon />} right>
<DropdownItem onClick={clearTopicMessagesHandler}>
<span className="has-text-danger">Clear Messages</span>
<DropdownItem onClick={clearTopicMessagesHandler} danger>
Clear Messages
</DropdownItem>
{isTopicDeletionAllowed && (
<DropdownItem
onClick={() => setDeleteTopicConfirmationVisible(true)}
danger
>
<span className="has-text-danger">Remove Topic</span>
Remove Topic
</DropdownItem>
)}
</Dropdown>

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

@ -21,7 +21,6 @@ import Dropdown from 'components/common/Dropdown/Dropdown';
import VerticalElipsisIcon from 'components/common/Icons/VerticalElipsisIcon';
import DropdownItem from 'components/common/Dropdown/DropdownItem';
import styled from 'styled-components';
import { Colors } from 'theme/theme';
import Navbar from 'components/common/Navigation/Navbar.styled';
import OverviewContainer from './Overview/OverviewContainer';
@ -105,15 +104,15 @@ const Details: React.FC<Props> = ({
Edit settings
</DropdownItem>
<DropdownItem
style={{ color: Colors.red[50] }}
onClick={() => setClearTopicConfirmationVisible(true)}
danger
>
Clear messages
</DropdownItem>
{isTopicDeletionAllowed && (
<DropdownItem
style={{ color: Colors.red[50] }}
onClick={() => setDeleteTopicConfirmationVisible(true)}
danger
>
Remove topic
</DropdownItem>

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

@ -1,5 +1,4 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
export const FiltersWrapper = styled.div`
display: flex;
@ -41,13 +40,13 @@ export const SeekTypeSelectorWrapper = styled.div`
& .date-picker {
height: 32px;
border: 1px ${(props) => props.theme.selectStyles.borderColor.normal} solid;
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.selectStyles.color.normal};
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;
@ -74,13 +73,13 @@ export const FiltersMetrics = styled.div`
`;
export const Metric = styled.div`
color: ${Colors.neutral[50]};
color: ${({ theme }) => theme.metrics.filters.color.normal};
font-size: 12px;
display: flex;
`;
export const MetricsIcon = styled.div`
color: ${Colors.neutral[90]};
color: ${({ theme }) => theme.metrics.filters.color.icon};
padding-right: 6px;
height: 12px;
`;

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

@ -1,8 +1,7 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
export const Wrapper = styled.tr`
background-color: ${Colors.neutral[5]};
background-color: ${({ theme }) => theme.topicMetaData.backgroundColor};
& > td {
padding: 16px;
&:first-child {
@ -48,17 +47,17 @@ export const Metadata = styled.span`
`;
export const MetadataLabel = styled.p`
color: ${Colors.neutral[50]};
color: ${({ theme }) => theme.topicMetaData.color.label};
font-size: 14px;
width: 80px;
`;
export const MetadataValue = styled.p`
color: ${Colors.neutral[80]};
color: ${({ theme }) => theme.topicMetaData.color.value};
font-size: 14px;
`;
export const MetadataMeta = styled.p`
color: ${Colors.neutral[30]};
color: ${({ theme }) => theme.topicMetaData.color.meta};
font-size: 12px;
`;

3
kafka-ui-react-app/src/components/Topics/Topic/Details/Overview/Overview.tsx
View file

@ -110,8 +110,9 @@ const Overview: React.FC<Props> = ({
partition,
])
}
danger
>
<Metrics.RedText>Clear Messages</Metrics.RedText>
Clear Messages
</DropdownItem>
</Dropdown>
) : null}

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

@ -1,36 +1,25 @@
import { TopicConfig } from 'generated-sources';
import styled from 'styled-components';
import React from 'react';
import { Colors } from 'theme/theme';
import * as S from './Settings.styled';
interface ListItemProps {
config: TopicConfig;
}
const ConfigListItemStyled = styled.tr`
& > td:last-child {
color: ${Colors.neutral[30]};
}
`;
const ConfigListItemCellStyled = styled.td<{ hasCustomValue: boolean }>`
font-weight: ${(props) => (props.hasCustomValue ? 500 : 400)};
`;
const ConfigListItem: React.FC<ListItemProps> = ({
config: { name, value, defaultValue },
}) => {
const hasCustomValue = value !== defaultValue;
return (
<ConfigListItemStyled>
<ConfigListItemCellStyled hasCustomValue>{name}</ConfigListItemCellStyled>
<ConfigListItemCellStyled hasCustomValue>
{value}
</ConfigListItemCellStyled>
<S.ConfigList>
<S.ConfigItemCell $hasCustomValue>{name}</S.ConfigItemCell>
<S.ConfigItemCell $hasCustomValue>{value}</S.ConfigItemCell>
<td className="has-text-grey" title="Default Value">
{hasCustomValue && defaultValue}
</td>
</ConfigListItemStyled>
</S.ConfigList>
);
};

10
kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.styled.ts Normal file
View file

@ -0,0 +1,10 @@
import styled 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)};
`;

164
kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap
View file

@ -99,7 +99,13 @@ exports[`Details when it has readonly flag does not render the Action button a T
},
"shadow": "rgba(0, 0, 0, 0.1)",
},
"buttonStyles": Object {
"breadcrumb": "#ABB5BA",
"button": Object {
"border": Object {
"active": "#171A1C",
"hover": "#454F54",
"normal": "#73848C",
},
"fontSize": Object {
"L": "16px",
"M": "14px",
@ -145,11 +151,21 @@ exports[`Details when it has readonly flag does not render the Action button a T
"warning": "#FFEECC",
},
},
"confirmationModal": Object {
"overlay": "rgba(10, 10, 10, 0.1)",
"shadow": "rgba(0, 0, 0, 0.1)",
"configList": Object {
"color": "#ABB5BA",
},
"headingStyles": Object {
"connectEditWarning": "#FFEECC",
"consumerTopicContent": Object {
"backgroundColor": "#F1F2F3",
},
"dangerZone": Object {
"borderColor": "#E3E6E8",
"color": "#E51A1A",
},
"dropdown": Object {
"color": "#E51A1A",
},
"heading": Object {
"h1": Object {
"color": "#171A1C",
},
@ -168,6 +184,32 @@ exports[`Details when it has readonly flag does not render the Action button a T
"messageToggleIconOpened": "#171A1C",
"verticalElipsisIcon": "#73848C",
},
"input": Object {
"backgroundColor": Object {
"readOnly": "#F1F2F3",
},
"borderColor": Object {
"disabled": "#E3E6E8",
"focus": "#454F54",
"hover": "#73848C",
"normal": "#ABB5BA",
},
"color": Object {
"disabled": "#ABB5BA",
"placeholder": Object {
"normal": "#ABB5BA",
"readOnly": "#ABB5BA",
},
"readOnly": "#171A1C",
},
"error": "#E51A1A",
"icon": Object {
"color": "#454F54",
},
"label": Object {
"color": "#454F54",
},
},
"layout": Object {
"minWidth": "1200px",
"navBarHeight": "3.25rem",
@ -178,7 +220,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
"stuffBorderColor": "#E3E6E8",
"stuffColor": "#F1F2F3",
},
"menuStyles": Object {
"menu": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
@ -197,6 +239,12 @@ exports[`Details when it has readonly flag does not render the Action button a T
},
"metrics": Object {
"backgroundColor": "#F1F2F3",
"filters": Object {
"color": Object {
"icon": "#171A1C",
"normal": "#73848C",
},
},
"indicator": Object {
"backgroundColor": "#FFFFFF",
"lightTextColor": "#ABB5BA",
@ -204,11 +252,20 @@ exports[`Details when it has readonly flag does not render the Action button a T
"warningTextColor": "#E51A1A",
},
},
"modal": Object {
"backgroundColor": "#FFFFFF",
"border": Object {
"bottom": "#F1F2F3",
"top": "#F1F2F3",
},
"overlay": "rgba(10, 10, 10, 0.1)",
"shadow": "rgba(0, 0, 0, 0.1)",
},
"pageLoader": Object {
"borderBottomColor": "#FFFFFF",
"borderColor": "#4F4FFF",
},
"paginationStyles": Object {
"pagination": Object {
"backgroundColor": "#FFFFFF",
"borderColor": Object {
"active": "#454F54",
@ -225,10 +282,11 @@ exports[`Details when it has readonly flag does not render the Action button a T
"currentPage": "#E3E6E8",
},
"panelColor": "#FFFFFF",
"primaryTabStyles": Object {
"primaryTab": Object {
"borderColor": Object {
"active": "#4F4FFF",
"hover": "transparent",
"nav": "#E3E6E8",
"normal": "transparent",
},
"color": Object {
@ -237,6 +295,12 @@ exports[`Details when it has readonly flag does not render the Action button a T
"normal": "#73848C",
},
},
"schema": Object {
"backgroundColor": Object {
"div": "#FFFFFF",
"tr": "#F1F2F3",
},
},
"scrollbar": Object {
"thumbColor": Object {
"active": "#73848C",
@ -247,7 +311,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
"normal": "#FFFFFF",
},
},
"secondaryTabStyles": Object {
"secondaryTab": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
@ -259,7 +323,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
"normal": "#73848C",
},
},
"selectStyles": Object {
"select": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#E3E6E8",
@ -283,7 +347,37 @@ exports[`Details when it has readonly flag does not render the Action button a T
"circle": "#FFFFFF",
"unchecked": "#ABB5BA",
},
"tagStyles": Object {
"table": Object {
"link": Object {
"color": Object {
"normal": "#171A1C",
},
},
"td": Object {
"color": Object {
"normal": "#171A1C",
},
},
"th": Object {
"backgroundColor": Object {
"normal": "#FFFFFF",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"normal": "#73848C",
},
"previewColor": Object {
"normal": "#4F4FFF",
},
},
"tr": Object {
"backgroundColor": Object {
"hover": "#F1F2F3",
},
},
},
"tag": Object {
"backgroundColor": Object {
"blue": "#e3f2fd",
"gray": "#F1F2F3",
@ -294,20 +388,48 @@ exports[`Details when it has readonly flag does not render the Action button a T
},
"color": "#171A1C",
},
"textarea": Object {
"focus": "transparent",
},
"thStyles": Object {
"textArea": Object {
"backgroundColor": Object {
"normal": "#FFFFFF",
"readOnly": "#F1F2F3",
},
"borderColor": Object {
"disabled": "#E3E6E8",
"focus": "#454F54",
"hover": "#73848C",
"normal": "#ABB5BA",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"normal": "#73848C",
"disabled": "#ABB5BA",
"placeholder": Object {
"focus": Object {
"normal": "transparent",
"readOnly": "#ABB5BA",
},
"normal": "#ABB5BA",
},
"readOnly": "#171A1C",
},
"previewColor": Object {
"normal": "#4F4FFF",
},
"topicFormLabel": Object {
"color": "#73848C",
},
"topicMetaData": Object {
"backgroundColor": "#F1F2F3",
"color": Object {
"label": "#73848C",
"meta": "#ABB5BA",
"value": "#2F3639",
},
},
"topicsList": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
},
"color": Object {
"active": "#171A1C",
"hover": "#73848C",
"normal": "#171A1C",
},
},
"viewer": Object {

5
kafka-ui-react-app/src/components/Topics/Topic/Edit/DangerZone/DangerZone.styled.tsx
View file

@ -1,10 +1,9 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
export const DangerZoneWrapperStyled = styled.div`
margin-top: 16px;
padding: 8px 16px;
border: 1px solid ${Colors.neutral[10]};
border: 1px solid ${({ theme }) => theme.dangerZone.borderColor};
box-sizing: border-box;
border-radius: 8px;
margin-bottom: 16px;
@ -17,7 +16,7 @@ export const DangerZoneWrapperStyled = styled.div`
`;
export const DangerZoneTitleStyled = styled.h1`
color: ${Colors.red[50]};
color: ${({ theme }) => theme.dangerZone.color};
font-size: 20px;
padding-bottom: 16px;
`;

18
kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetain.tsx
View file

@ -6,26 +6,14 @@ import { MILLISECONDS_IN_WEEK, MILLISECONDS_IN_SECOND } from 'lib/constants';
import { InputLabel } from 'components/common/Input/InputLabel.styled';
import Input from 'components/common/Input/Input';
import { FormError } from 'components/common/Input/Input.styled';
import styled from 'styled-components';
import { Colors } from 'theme/theme';
import * as S from './TopicForm.styled';
import TimeToRetainBtns from './TimeToRetainBtns';
interface Props {
isSubmitting: boolean;
}
const TimeToRetainLabel = styled.div`
display: flex;
gap: 16px;
align-items: center;
& > span {
font-size: 12px;
color: ${Colors.neutral[50]};
}
`;
const TimeToRetain: React.FC<Props> = ({ isSubmitting }) => {
const {
watch,
@ -42,10 +30,10 @@ const TimeToRetain: React.FC<Props> = ({ isSubmitting }) => {
return (
<>
<TimeToRetainLabel>
<S.Label>
<InputLabel>Time to retain data (in ms)</InputLabel>
{valueHint && <span>{valueHint}</span>}
</TimeToRetainLabel>
</S.Label>
<Input
id="timeToRetain"
type="number"

21
kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx
View file

@ -1,8 +1,8 @@
import React from 'react';
import { useFormContext } from 'react-hook-form';
import { MILLISECONDS_IN_WEEK } from 'lib/constants';
import styled from 'styled-components';
import { Colors } from 'theme/theme';
import * as S from './TopicForm.styled';
interface Props {
inputName: string;
@ -10,31 +10,18 @@ interface Props {
value: number;
}
const TimeToRetainBtnStyled = styled.button<{ isActive: boolean }>`
background-color: ${(props) =>
props.isActive ? Colors.neutral[10] : Colors.neutral[0]};
height: 32px;
width: 46px;
border: 1px solid
${(props) => (props.isActive ? Colors.neutral[90] : Colors.neutral[40])};
border-radius: 6px;
&:hover {
cursor: pointer;
}
`;
const TimeToRetainBtn: React.FC<Props> = ({ inputName, text, value }) => {
const { setValue, watch } = useFormContext();
const watchedValue = watch(inputName, MILLISECONDS_IN_WEEK.toString());
return (
<TimeToRetainBtnStyled
<S.Button
isActive={watchedValue === value}
type="button"
onClick={() => setValue(inputName, value)}
>
{text}
</TimeToRetainBtnStyled>
</S.Button>
);
};

27
kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts
View file

@ -14,3 +14,30 @@ export const NameField = styled.div`
export const CustomParamsHeading = styled.h4`
font-weight: 500;
`;
export const Label = styled.div`
display: flex;
gap: 16px;
align-items: center;
& > span {
font-size: 12px;
color: ${({ theme }) => theme.topicFormLabel.color};
}
`;
export const Button = styled.button<{ isActive: boolean }>`
background-color: ${({ theme, ...props }) =>
props.isActive
? theme.button.primary.backgroundColor.active
: theme.button.primary.color};
height: 32px;
width: 46px;
border: 1px solid
${({ theme, ...props }) =>
props.isActive ? theme.button.border.active : theme.button.primary.color};
border-radius: 6px;
&:hover {
cursor: pointer;
}
`;

3
kafka-ui-react-app/src/components/common/Breadcrumb/Breadcrumb.styled.ts
View file

@ -1,5 +1,4 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
export const BreadcrumbWrapper = styled.ul`
display: flex;
@ -10,7 +9,7 @@ export const BreadcrumbWrapper = styled.ul`
& li:not(:last-child)::after {
content: '/';
color: ${Colors.neutral[30]};
color: ${({ theme }) => theme.breadcrumb};
margin: 0 8px;
}
`;

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

@ -19,35 +19,35 @@ const StyledButton = styled.button<ButtonProps>`
background: ${(props) =>
props.isInverted
? 'transparent'
: props.theme.buttonStyles[props.buttonType].backgroundColor.normal};
: props.theme.button[props.buttonType].backgroundColor.normal};
color: ${(props) =>
props.isInverted
? props.theme.buttonStyles[props.buttonType].invertedColors.normal
: props.theme.buttonStyles[props.buttonType].color};
font-size: ${(props) => props.theme.buttonStyles.fontSize[props.buttonSize]};
? props.theme.button[props.buttonType].invertedColors.normal
: props.theme.button[props.buttonType].color};
font-size: ${(props) => props.theme.button.fontSize[props.buttonSize]};
font-weight: 500;
height: ${(props) => props.theme.buttonStyles.height[props.buttonSize]};
height: ${(props) => props.theme.button.height[props.buttonSize]};
&:hover:enabled {
background: ${(props) =>
props.isInverted
? 'transparent'
: props.theme.buttonStyles[props.buttonType].backgroundColor.hover};
: props.theme.button[props.buttonType].backgroundColor.hover};
color: ${(props) =>
props.isInverted
? props.theme.buttonStyles[props.buttonType].invertedColors.hover
: props.theme.buttonStyles[props.buttonType].color};
? props.theme.button[props.buttonType].invertedColors.hover
: props.theme.button[props.buttonType].color};
cursor: pointer;
}
&:active:enabled {
background: ${(props) =>
props.isInverted
? 'transparent'
: props.theme.buttonStyles[props.buttonType].backgroundColor.active};
: props.theme.button[props.buttonType].backgroundColor.active};
color: ${(props) =>
props.isInverted
? props.theme.buttonStyles[props.buttonType].invertedColors.active
: props.theme.buttonStyles[props.buttonType].color};
? props.theme.button[props.buttonType].invertedColors.active
: props.theme.button[props.buttonType].color};
}
&:disabled {
opacity: 0.5;
@ -55,7 +55,7 @@ const StyledButton = styled.button<ButtonProps>`
}
& a {
color: ${(props) => props.theme.buttonStyles.primary.color};
color: ${(props) => props.theme.button.primary.color};
}
& i {

11
kafka-ui-react-app/src/components/common/ConfirmationModal/ConfirmationModal.styled.tsx
View file

@ -1,5 +1,4 @@
import styled, { css } from 'styled-components';
import { Colors } from 'theme/theme';
export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
({ theme }) => css`
@ -15,7 +14,7 @@ export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
right: 0;
top: 0;
& div:first-child {
background-color: ${theme.confirmationModal.overlay};
background-color: ${theme.modal.overlay};
bottom: 0;
left: 0;
position: absolute;
@ -30,8 +29,8 @@ export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
width: 560px;
border-radius: 8px;
background-color: ${Colors.neutral[0]};
filter: drop-shadow(0px 4px 16px ${theme.confirmationModal.shadow});
background-color: ${theme.modal.backgroundColor};
filter: drop-shadow(0px 4px 16px ${theme.modal.shadow});
& > * {
padding: 16px;
@ -45,8 +44,8 @@ export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
}
& > section {
border-top: 1px solid ${Colors.neutral[5]};
border-bottom: 1px solid ${Colors.neutral[5]};
border-top: 1px solid ${theme.modal.border.top};
border-bottom: 1px solid ${theme.modal.border.bottom};
}
& > footer {

30
kafka-ui-react-app/src/components/common/Dropdown/Dropdown.styled.ts Normal file
View file

@ -0,0 +1,30 @@
import styled from 'styled-components';
export const TriggerWrapper = styled.div`
display: flex;
align-self: center;
`;
export const Trigger = styled.button.attrs({
type: 'button',
ariaHaspopup: 'true',
ariaControls: 'dropdown-menu',
})`
background: transparent;
border: none;
display: flex;
align-items: 'center';
justify-content: 'center';
&:hover {
cursor: pointer;
}
`;
export const Item = styled.a.attrs({
href: '#end',
role: 'menuitem',
type: 'button',
})<{ $isDanger: boolean }>`
color: ${({ $isDanger, theme }) =>
$isDanger ? theme.dropdown.color : 'initial'};
`;

14
kafka-ui-react-app/src/components/common/Dropdown/Dropdown.tsx
View file

@ -1,9 +1,8 @@
import useOutsideClickRef from '@rooks/use-outside-click-ref';
import cx from 'classnames';
import styled from 'styled-components';
import React, { useCallback, useMemo, useState } from 'react';
import DropdownTrigger from './DropdownTrigger';
import * as S from './Dropdown.styled';
export interface DropdownProps {
label: React.ReactNode;
@ -11,11 +10,6 @@ export interface DropdownProps {
up?: boolean;
}
const DropdowTriggerWrapper = styled.div`
display: flex;
align-self: center;
`;
const Dropdown: React.FC<DropdownProps> = ({ label, right, up, children }) => {
const [active, setActive] = useState<boolean>(false);
const [wrapperRef] = useOutsideClickRef(() => setActive(false));
@ -32,9 +26,9 @@ const Dropdown: React.FC<DropdownProps> = ({ label, right, up, children }) => {
);
return (
<div className={classNames} ref={wrapperRef}>
<DropdowTriggerWrapper>
<DropdownTrigger onClick={onClick}>{label}</DropdownTrigger>
</DropdowTriggerWrapper>
<S.TriggerWrapper>
<S.Trigger onClick={onClick}>{label}</S.Trigger>
</S.TriggerWrapper>
<div className="dropdown-menu" id="dropdown-menu" role="menu">
<div className="dropdown-content has-text-left">{children}</div>
</div>

29
kafka-ui-react-app/src/components/common/Dropdown/DropdownItem.tsx
View file

@ -1,33 +1,30 @@
import React, { useCallback } from 'react';
import React from 'react';
import * as S from './Dropdown.styled';
export interface DropdownItemProps {
onClick(): void;
style?: React.CSSProperties;
danger?: boolean;
}
const DropdownItem: React.FC<DropdownItemProps> = ({
onClick,
style,
danger,
children,
}) => {
const onClickHandler = useCallback(
(e: React.MouseEvent) => {
e.preventDefault();
onClick();
},
[onClick]
);
const onClickHandler = (e: React.MouseEvent) => {
e.preventDefault();
onClick();
};
return (
<a
href="#end"
<S.Item
$isDanger={!!danger}
onClick={onClickHandler}
className="dropdown-item is-link"
role="menuitem"
type="button"
style={style}
>
{children}
</a>
</S.Item>
);
};

32
kafka-ui-react-app/src/components/common/Dropdown/DropdownTrigger.tsx
View file

@ -1,32 +0,0 @@
import styled from 'styled-components';
import React from 'react';
interface Props {
className?: string;
onClick: () => void;
}
const DropdownTrigger: React.FC<Props> = ({ onClick, className, children }) => {
return (
<button
className={className}
type="button"
aria-haspopup="true"
aria-controls="dropdown-menu"
onClick={onClick}
>
{children}
</button>
);
};
export default styled(DropdownTrigger)`
background: transparent;
border: none;
display: flex;
align-items: 'center';
justify-content: 'center';
&:hover {
cursor: pointer;
}
`;

2
kafka-ui-react-app/src/components/common/Dropdown/__tests__/Dropdown.spec.tsx
View file

@ -39,7 +39,7 @@ describe('Dropdown', () => {
it('renders custom children', () => {
const wrapper = mount(setupWrapper({}, dummyChildren));
expect(wrapper.exists('.dropdown-content')).toBeTruthy();
expect(wrapper.find('.dropdown-item').length).toEqual(3);
expect(wrapper.find('a.dropdown-item').length).toEqual(3);
expect(wrapper.find('.dropdown-divider').length).toEqual(1);
});

93
kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/Dropdown.spec.tsx.snap
View file

@ -1,6 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Dropdown matches snapshot 1`] = `
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
}
.c1 {
background: transparent;
border: none;
@ -22,14 +32,8 @@ exports[`Dropdown matches snapshot 1`] = `
cursor: pointer;
}
.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center;
.c2 {
color: initial;
}
<Dropdown
@ -44,24 +48,17 @@ exports[`Dropdown matches snapshot 1`] = `
<div
className="c0"
>
<Styled(DropdownTrigger)
<styled.button
onClick={[Function]}
>
<DropdownTrigger
<button
className="c1"
onClick={[Function]}
type="button"
>
<button
aria-controls="dropdown-menu"
aria-haspopup="true"
className="c1"
onClick={[Function]}
type="button"
>
My Test Label
</button>
</DropdownTrigger>
</Styled(DropdownTrigger)>
My Test Label
</button>
</styled.button>
</div>
</styled.div>
<div
@ -75,28 +72,40 @@ exports[`Dropdown matches snapshot 1`] = `
<DropdownItem
onClick={[MockFunction]}
>
<a
<styled.a
$isDanger={false}
className="dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Child 1
</a>
<a
className="c2 dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Child 1
</a>
</styled.a>
</DropdownItem>
<DropdownItem
onClick={[MockFunction]}
>
<a
<styled.a
$isDanger={false}
className="dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Child 2
</a>
<a
className="c2 dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Child 2
</a>
</styled.a>
</DropdownItem>
<DropdownDivider>
<hr
@ -106,15 +115,21 @@ exports[`Dropdown matches snapshot 1`] = `
<DropdownItem
onClick={[MockFunction]}
>
<a
<styled.a
$isDanger={false}
className="dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Child 3
</a>
<a
className="c2 dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Child 3
</a>
</styled.a>
</DropdownItem>
</div>
</div>

22
kafka-ui-react-app/src/components/common/Dropdown/__tests__/__snapshots__/DropdownItem.spec.tsx.snap
View file

@ -1,17 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DropdownItem matches snapshot 1`] = `
.c0 {
color: initial;
}
<DropdownItem
onClick={[MockFunction]}
>
<a
<styled.a
$isDanger={false}
className="dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Item 1
</a>
<a
className="c0 dropdown-item is-link"
href="#end"
onClick={[Function]}
role="menuitem"
type="button"
>
Item 1
</a>
</styled.a>
</DropdownItem>
`;

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

@ -1,52 +1,53 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
import styled, { css } from 'styled-components';
export interface InputProps {
inputSize?: 'M' | 'L';
hasLeftIcon: boolean;
}
export const Input = styled.input<InputProps>`
border: 1px ${Colors.neutral[30]} solid;
border-radius: 4px;
height: ${(props) => (props.inputSize === 'M' ? '32px' : '40px')};
width: 100%;
padding-left: ${(props) => (props.hasLeftIcon ? '36px' : '12px')};
font-size: 14px;
&::placeholder {
color: ${Colors.neutral[30]};
export const Input = styled.input<InputProps>(
({ theme, ...props }) => css`
border: 1px ${theme.input.borderColor.normal} solid;
border-radius: 4px;
height: ${props.inputSize === 'M' ? '32px' : '40px'};
width: 100%;
padding-left: ${props.hasLeftIcon ? '36px' : '12px'};
font-size: 14px;
}
&:hover {
border-color: ${Colors.neutral[50]};
}
&:focus {
outline: none;
border-color: ${Colors.neutral[70]};
&::placeholder {
color: transparent;
color: ${theme.input.color.placeholder.normal};
font-size: 14px;
}
&:hover {
border-color: ${theme.input.borderColor.hover};
}
}
&:disabled {
color: ${Colors.neutral[30]};
border-color: ${Colors.neutral[10]};
cursor: not-allowed;
}
&:read-only {
color: ${Colors.neutral[90]};
border: none;
background-color: ${Colors.neutral[5]};
&:focus {
outline: none;
border-color: ${theme.input.borderColor.focus};
&::placeholder {
color: ${Colors.neutral[30]};
color: transparent;
}
}
cursor: not-allowed;
}
`;
&:disabled {
color: ${theme.input.color.disabled};
border-color: ${theme.input.borderColor.disabled};
cursor: not-allowed;
}
&:read-only {
color: ${theme.input.color.readOnly};
border: none;
background-color: ${theme.input.backgroundColor.readOnly};
&:focus {
&::placeholder {
color: ${theme.input.color.placeholder.readOnly};
}
}
cursor: not-allowed;
}
`
);
export const FormError = styled.p`
color: ${Colors.red[50]};
color: ${({ theme }) => theme.input.error};
font-size: 12px;
`;

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

@ -1,5 +1,4 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
interface Props {
className: string;
@ -16,5 +15,5 @@ export const InputIcon = styled.i<Props>`
right: ${(props) => (props.position === 'right' ? '15px' : 'unset')};
height: 11px;
width: 11px;
color: ${Colors.neutral[70]};
color: ${({ theme }) => theme.input.icon.color};
`;

3
kafka-ui-react-app/src/components/common/Input/InputLabel.styled.ts
View file

@ -1,9 +1,8 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
export const InputLabel = styled.label`
font-weight: 500;
font-size: 12px;
line-height: 20px;
color: ${Colors.neutral[70]};
color: ${({ theme }) => theme.input.label.color};
`;

21
kafka-ui-react-app/src/components/common/Navigation/Navbar.styled.ts
View file

@ -1,9 +1,8 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
const Navbar = styled.nav`
display: flex;
border-bottom: 1px ${Colors.neutral[10]} solid;
border-bottom: 1px ${({ theme }) => theme.primaryTab.borderColor.nav} solid;
& a {
height: 40px;
width: 96px;
@ -12,18 +11,18 @@ const Navbar = styled.nav`
align-items: center;
font-weight: 500;
font-size: 14px;
color: ${(props) => props.theme.primaryTabStyles.color.normal};
border-bottom: 1px
${(props) => props.theme.primaryTabStyles.borderColor.normal} solid;
color: ${(props) => props.theme.primaryTab.color.normal};
border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.normal}
solid;
&.is-active {
border-bottom: 1px
${(props) => props.theme.primaryTabStyles.borderColor.active} solid;
color: ${(props) => props.theme.primaryTabStyles.color.active};
border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.active}
solid;
color: ${(props) => props.theme.primaryTab.color.active};
}
&:hover:not(.is-active) {
border-bottom: 1px
${(props) => props.theme.primaryTabStyles.borderColor.hover} solid;
color: ${(props) => props.theme.primaryTabStyles.color.hover};
border-bottom: 1px ${(props) => props.theme.primaryTab.borderColor.hover}
solid;
color: ${(props) => props.theme.primaryTab.color.hover};
}
}
`;

2
kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx
View file

@ -26,7 +26,7 @@ export default styled(PageHeading)(
font-size: 24px;
font-weight: 500;
line-height: 32px;
color: ${theme.headingStyles.h1.color};
color: ${theme.heading.h1.color};
}
& > div {
display: flex;

38
kafka-ui-react-app/src/components/common/Pagination/Pagination.styled.ts
View file

@ -30,21 +30,21 @@ export const PaginationLink = styled(Link)<{ $isCurrent: boolean }>`
border: 1px solid
${({ $isCurrent }) =>
$isCurrent
? theme.paginationStyles.currentPage
: theme.paginationStyles.borderColor.normal};
? theme.pagination.currentPage
: theme.pagination.borderColor.normal};
background-color: ${({ $isCurrent }) =>
$isCurrent
? theme.paginationStyles.currentPage
: theme.paginationStyles.backgroundColor};
color: ${theme.paginationStyles.color.normal};
? theme.pagination.currentPage
: theme.pagination.backgroundColor};
color: ${theme.pagination.color.normal};
&:hover {
border: 1px solid
${({ $isCurrent }) =>
$isCurrent
? theme.paginationStyles.currentPage
: theme.paginationStyles.borderColor.hover};
color: ${(props) => props.theme.paginationStyles.color.hover};
? theme.pagination.currentPage
: theme.pagination.borderColor.hover};
color: ${(props) => props.theme.pagination.color.hover};
cursor: ${({ $isCurrent }) => ($isCurrent ? 'default' : 'pointer')};
}
`;
@ -54,22 +54,22 @@ export const PaginationButton = styled(Link)`
align-items: center;
padding: 6px 12px;
height: 32px;
border: 1px solid ${theme.paginationStyles.borderColor.normal};
border: 1px solid ${theme.pagination.borderColor.normal};
border-radius: 4px;
color: ${theme.paginationStyles.color.normal};
color: ${theme.pagination.color.normal};
&:hover {
border: 1px solid ${theme.paginationStyles.borderColor.hover};
color: ${theme.paginationStyles.color.hover};
border: 1px solid ${theme.pagination.borderColor.hover};
color: ${theme.pagination.color.hover};
cursor: pointer;
}
&:active {
border: 1px solid ${theme.paginationStyles.borderColor.active};
color: ${theme.paginationStyles.color.active};
border: 1px solid ${theme.pagination.borderColor.active};
color: ${theme.pagination.color.active};
}
&:disabled {
border: 1px solid ${theme.paginationStyles.borderColor.disabled};
color: ${theme.paginationStyles.color.disabled};
border: 1px solid ${theme.pagination.borderColor.disabled};
color: ${theme.pagination.color.disabled};
cursor: not-allowed;
}
`;
@ -79,9 +79,9 @@ export const DisabledButton = styled.button`
align-items: center;
padding: 6px 12px;
height: 32px;
border: 1px solid ${theme.paginationStyles.borderColor.disabled};
background-color: ${theme.paginationStyles.backgroundColor};
border: 1px solid ${theme.pagination.borderColor.disabled};
background-color: ${theme.pagination.backgroundColor};
border-radius: 4px;
font-size: 16px;
color: ${theme.paginationStyles.color.disabled};
color: ${theme.pagination.color.disabled};
`;

4
kafka-ui-react-app/src/components/common/Pagination/__tests__/PageControl.spec.tsx
View file

@ -15,14 +15,14 @@ describe('PageControl', () => {
it('renders current page', () => {
setupComponent({ current: true });
expect(screen.getByRole('button')).toHaveStyle(
`background-color: ${theme.paginationStyles.currentPage}`
`background-color: ${theme.pagination.currentPage}`
);
});
it('renders non-current page', () => {
setupComponent({ current: false });
expect(screen.getByRole('button')).toHaveStyle(
`background-color: ${theme.paginationStyles.backgroundColor}`
`background-color: ${theme.pagination.backgroundColor}`
);
});

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

@ -80,14 +80,14 @@ describe('Pagination', () => {
it('check if it sets page 8 as current when page param is set', () => {
setupComponent('?page=8');
expect(screen.getByText('8')).toHaveStyle(
`background-color: ${theme.paginationStyles.currentPage}`
`background-color: ${theme.pagination.currentPage}`
);
});
it('check if it sets first page as current when page param not set', () => {
setupComponent('', { totalPages: 8 });
expect(screen.getByText('1')).toHaveStyle(
`background-color: ${theme.paginationStyles.currentPage}`
`background-color: ${theme.pagination.currentPage}`
);
});
});

14
kafka-ui-react-app/src/components/common/Search/__tests__/Search.spec.tsx
View file

@ -1,6 +1,8 @@
import { shallow, mount } from 'enzyme';
import Search from 'components/common/Search/Search';
import React from 'react';
import { ThemeProvider } from 'styled-components';
import theme from 'theme/theme';
jest.mock('use-debounce', () => ({
useDebouncedCallback: (fn: (e: Event) => void) => fn,
@ -10,11 +12,13 @@ describe('Search', () => {
const handleSearch = jest.fn();
it('calls handleSearch on input', () => {
const component = mount(
<Search
handleSearch={handleSearch}
value=""
placeholder="Search bt the Topic name"
/>
<ThemeProvider theme={theme}>
<Search
handleSearch={handleSearch}
value=""
placeholder="Search bt the Topic name"
/>
</ThemeProvider>
);
component.find('input').simulate('change', { target: { value: 'test' } });
expect(handleSearch).toHaveBeenCalledTimes(1);

33
kafka-ui-react-app/src/components/common/Select/Select.styled.ts
View file

@ -20,8 +20,8 @@ export const Select = styled.ul<Props>`
border: 1px
${({ theme, disabled }) =>
disabled
? theme.selectStyles.borderColor.disabled
: theme.selectStyles.borderColor.normal}
? theme.select.borderColor.disabled
: theme.select.borderColor.normal}
solid;
border-radius: 4px;
font-size: 14px;
@ -29,9 +29,7 @@ export const Select = styled.ul<Props>`
padding-left: ${(props) => (props.isLive ? '36px' : '12px')};
padding-right: 16px;
color: ${({ theme, disabled }) =>
disabled
? theme.selectStyles.color.disabled
: theme.selectStyles.color.normal};
disabled ? theme.select.color.disabled : theme.select.color.normal};
min-width: ${({ minWidth }) => minWidth || 'auto'};
background-image: ${({ disabled }) =>
`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="${
@ -42,17 +40,17 @@ export const Select = styled.ul<Props>`
background-position-y: 55% !important;
&:hover {
color: ${(props) => props.theme.selectStyles.color.hover};
border-color: ${(props) => props.theme.selectStyles.borderColor.hover};
color: ${(props) => props.theme.select.color.hover};
border-color: ${(props) => props.theme.select.borderColor.hover};
}
&:focus {
outline: none;
color: ${(props) => props.theme.selectStyles.color.active};
border-color: ${(props) => props.theme.selectStyles.borderColor.active};
color: ${(props) => props.theme.select.color.active};
border-color: ${(props) => props.theme.select.borderColor.active};
}
&:disabled {
color: ${(props) => props.theme.selectStyles.color.disabled};
border-color: ${(props) => props.theme.selectStyles.borderColor.disabled};
color: ${(props) => props.theme.select.color.disabled};
border-color: ${(props) => props.theme.select.borderColor.disabled};
cursor: not-allowed;
}
`;
@ -63,14 +61,13 @@ export const OptionList = styled.ul`
left: 0;
max-height: 114px;
margin-top: 4px;
background-color: ${(props) =>
props.theme.selectStyles.backgroundColor.normal};
border: 1px ${(props) => props.theme.selectStyles.borderColor.normal} solid;
background-color: ${(props) => props.theme.select.backgroundColor.normal};
border: 1px ${(props) => props.theme.select.borderColor.normal} solid;
border-radius: 4px;
font-size: 14px;
line-height: 18px;
width: 100%;
color: ${(props) => props.theme.selectStyles.color.normal};
color: ${(props) => props.theme.select.color.normal};
overflow-y: scroll;
z-index: 10;
`;
@ -82,13 +79,11 @@ export const Option = styled.li<OptionProps>`
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
&:hover {
background-color: ${(props) =>
props.theme.selectStyles.backgroundColor.hover};
background-color: ${(props) => props.theme.select.backgroundColor.hover};
}
&:active {
background-color: ${(props) =>
props.theme.selectStyles.backgroundColor.active};
background-color: ${(props) => props.theme.select.backgroundColor.active};
}
`;

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

@ -3,8 +3,8 @@ import styled from 'styled-components';
export const SecondaryTabs = styled.nav`
& button {
background-color: ${(props) =>
props.theme.secondaryTabStyles.backgroundColor.normal};
color: ${(props) => props.theme.secondaryTabStyles.color.normal};
props.theme.secondaryTab.backgroundColor.normal};
color: ${(props) => props.theme.secondaryTab.color.normal};
padding: 6px;
height: 32px;
min-width: 57px;
@ -13,14 +13,14 @@ export const SecondaryTabs = styled.nav`
&:hover {
background-color: ${(props) =>
props.theme.secondaryTabStyles.backgroundColor.hover};
color: ${(props) => props.theme.secondaryTabStyles.color.hover};
props.theme.secondaryTab.backgroundColor.hover};
color: ${(props) => props.theme.secondaryTab.color.hover};
}
&.is-active {
background-color: ${(props) =>
props.theme.secondaryTabStyles.backgroundColor.active};
color: ${(props) => props.theme.secondaryTabStyles.color.active};
props.theme.secondaryTab.backgroundColor.active};
color: ${(props) => props.theme.secondaryTab.color.active};
}
}

5
kafka-ui-react-app/src/components/common/Tag/Tag.styled.tsx
View file

@ -9,9 +9,8 @@ export const Tag = styled.p<Props>`
border-radius: 16px;
height: 20px;
line-height: 20px;
background-color: ${(props) =>
props.theme.tagStyles.backgroundColor[props.color]};
color: ${(props) => props.theme.tagStyles.color};
background-color: ${(props) => props.theme.tag.backgroundColor[props.color]};
color: ${(props) => props.theme.tag.color};
font-size: 12px;
display: inline-block;
padding-left: 0.75em;

24
kafka-ui-react-app/src/components/common/Textbox/Textarea.styled.ts
View file

@ -1,40 +1,38 @@
import styled, { css } from 'styled-components';
import { Colors } from 'theme/theme';
export const Textarea = styled.textarea(
({ theme }) => css`
border: 1px ${Colors.neutral[30]} solid;
({ theme: { textArea } }) => css`
border: 1px ${textArea.borderColor.normal} solid;
border-radius: 4px;
width: 100%;
padding: 12px;
padding-top: 6px;
&::placeholder {
color: ${Colors.neutral[30]};
color: ${textArea.color.placeholder.normal};
font-size: 14px;
}
&:hover {
border-color: ${Colors.neutral[50]};
border-color: ${textArea.borderColor.hover};
}
&:focus {
outline: none;
border-color: ${Colors.neutral[70]};
border-color: ${textArea.borderColor.focus};
&::placeholder {
color: ${theme.textarea.focus};
color: ${textArea.color.placeholder.normal};
}
}
&:disabled {
color: ${Colors.neutral[30]};
border-color: ${Colors.neutral[10]};
color: ${textArea.color.disabled};
border-color: ${textArea.borderColor.disabled};
cursor: not-allowed;
}
&:read-only {
color: ${Colors.neutral[90]};
color: ${textArea.color.readOnly};
border: none;
background-color: ${Colors.neutral[5]};
background-color: ${textArea.backgroundColor.readOnly};
&:focus {
&::placeholder {
color: ${Colors.neutral[30]};
color: ${textArea.color.placeholder.focus.readOnly};
}
}
cursor: not-allowed;

5
kafka-ui-react-app/src/components/common/table/Table/Table.styled.ts
View file

@ -1,5 +1,4 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
interface Props {
isFullwidth?: boolean;
@ -13,13 +12,13 @@ export const Table = styled.table<Props>`
font-size: 14px;
font-weight: 400;
padding: 8px 8px 8px 24px;
color: ${Colors.neutral[90]};
color: ${({ theme }) => theme.table.td.color.normal};
vertical-align: middle;
}
& tbody > tr {
&:hover {
background-color: ${Colors.neutral[5]};
background-color: ${({ theme }) => theme.table.tr.backgroundColor.hover};
}
}
`;

3
kafka-ui-react-app/src/components/common/table/Table/TableKeyLink.styled.ts
View file

@ -1,9 +1,8 @@
import styled from 'styled-components';
import { Colors } from 'theme/theme';
export const TableKeyLink = styled.td`
& > a {
color: ${Colors.neutral[90]};
color: ${({ theme }) => theme.table.link.color};
font-weight: 500;
text-overflow: ellipsis;
}

12
kafka-ui-react-app/src/components/common/table/TableHeaderCell/TableHeaderCell.styled.ts
View file

@ -9,7 +9,7 @@ const isOrderableStyles = css`
cursor: pointer;
&:hover {
color: ${(props) => props.theme.thStyles.color.hover};
color: ${(props) => props.theme.table.th.color.hover};
}
`;
@ -21,11 +21,11 @@ export const Title = styled.span<TitleProps>`
line-height: 16px;
letter-spacing: 0em;
text-align: left;
background: ${(props) => props.theme.thStyles.backgroundColor.normal};
background: ${(props) => props.theme.table.th.backgroundColor.normal};
color: ${(props) =>
props.isOrdered
? props.theme.thStyles.color.active
: props.theme.thStyles.color.normal};
? props.theme.table.th.color.active
: props.theme.table.th.color.normal};
cursor: default;
${(props) => props.isOrderable && isOrderableStyles}
@ -39,9 +39,9 @@ export const Preview = styled.span`
line-height: 16px;
letter-spacing: 0em;
text-align: left;
background: ${(props) => props.theme.thStyles.backgroundColor.normal};
background: ${(props) => props.theme.table.th.backgroundColor.normal};
font-size: 14px;
color: ${(props) => props.theme.thStyles.previewColor.normal};
color: ${(props) => props.theme.table.th.previewColor.normal};
cursor: pointer;
`;

10
kafka-ui-react-app/src/components/common/table/__tests__/TableHeaderCell.spec.tsx
View file

@ -23,7 +23,7 @@ describe('TableHeaderCell', () => {
<table>
<thead>
<tr>
<TableHeaderCell {...props} />
<TableHeaderCell {...props} />;
</tr>
</thead>
</table>
@ -57,7 +57,7 @@ describe('TableHeaderCell', () => {
expect(title).toBeInTheDocument();
expect(title).toHaveTextContent(testTitle);
expect(within(title).getByTitle(sortIconTitle)).toBeInTheDocument();
expect(title).toHaveStyle(`color: ${theme.thStyles.color.active};`);
expect(title).toHaveStyle(`color: ${theme.table.th.color.active};`);
expect(title).toHaveStyle('cursor: pointer;');
});
@ -133,7 +133,7 @@ describe('TableHeaderCell', () => {
});
const columnheader = screen.getByRole('columnheader');
const title = within(columnheader).getByText(testTitle);
expect(title).toHaveStyle(`color: ${theme.thStyles.color.active};`);
expect(title).toHaveStyle(`color: ${theme.table.th.color.active};`);
});
it('renders without hightlighted title when orderBy and orderValue are not equal', () => {
@ -144,7 +144,7 @@ describe('TableHeaderCell', () => {
});
const columnheader = screen.getByRole('columnheader');
const title = within(columnheader).getByText(testTitle);
expect(title).toHaveStyle(`color: ${theme.thStyles.color.normal}`);
expect(title).toHaveStyle(`color: ${theme.table.th.color.normal}`);
});
it('renders with default (primary) theme', () => {
@ -155,7 +155,7 @@ describe('TableHeaderCell', () => {
const columnheader = screen.getByRole('columnheader');
const title = within(columnheader).getByText(testTitle);
expect(title).toHaveStyle(
`background: ${theme.thStyles.backgroundColor.normal};`
`background: ${theme.table.th.backgroundColor.normal};`
);
});
});

170
kafka-ui-react-app/src/theme/theme.ts
View file

@ -60,7 +60,12 @@ const theme = {
},
},
panelColor: Colors.neutral[0],
headingStyles: {
breadcrumb: Colors.neutral[30],
connectEditWarning: Colors.yellow[10],
dropdown: {
color: Colors.red[50],
},
heading: {
h1: {
color: Colors.neutral[90],
},
@ -86,7 +91,7 @@ const theme = {
info: Colors.neutral[10],
},
},
buttonStyles: {
button: {
primary: {
backgroundColor: {
normal: Colors.brand[50],
@ -123,8 +128,13 @@ const theme = {
M: '14px',
L: '16px',
},
border: {
normal: Colors.neutral[50],
hover: Colors.neutral[70],
active: Colors.neutral[90],
},
},
menuStyles: {
menu: {
backgroundColor: {
normal: Colors.neutral[0],
hover: Colors.neutral[5],
@ -141,20 +151,52 @@ const theme = {
},
chevronIconColor: Colors.neutral[50],
},
thStyles: {
schema: {
backgroundColor: {
normal: Colors.neutral[0],
},
color: {
normal: Colors.neutral[50],
hover: Colors.brand[50],
active: Colors.brand[50],
},
previewColor: {
normal: Colors.brand[50],
tr: Colors.neutral[5],
div: Colors.neutral[0],
},
},
primaryTabStyles: {
modal: {
backgroundColor: Colors.neutral[0],
border: {
top: Colors.neutral[5],
bottom: Colors.neutral[5],
},
overlay: Colors.transparency[10],
shadow: Colors.transparency[20],
},
table: {
th: {
backgroundColor: {
normal: Colors.neutral[0],
},
color: {
normal: Colors.neutral[50],
hover: Colors.brand[50],
active: Colors.brand[50],
},
previewColor: {
normal: Colors.brand[50],
},
},
td: {
color: {
normal: Colors.neutral[90],
},
},
tr: {
backgroundColor: {
hover: Colors.neutral[5],
},
},
link: {
color: {
normal: Colors.neutral[90],
},
},
},
primaryTab: {
color: {
normal: Colors.neutral[50],
hover: Colors.neutral[90],
@ -164,9 +206,10 @@ const theme = {
normal: 'transparent',
hover: 'transparent',
active: Colors.brand[50],
nav: Colors.neutral[10],
},
},
secondaryTabStyles: {
secondaryTab: {
backgroundColor: {
normal: Colors.neutral[0],
hover: Colors.neutral[5],
@ -178,7 +221,7 @@ const theme = {
active: Colors.neutral[90],
},
},
selectStyles: {
select: {
backgroundColor: {
normal: Colors.neutral[0],
hover: Colors.neutral[10],
@ -197,7 +240,55 @@ const theme = {
disabled: Colors.neutral[10],
},
},
tagStyles: {
input: {
borderColor: {
normal: Colors.neutral[30],
hover: Colors.neutral[50],
focus: Colors.neutral[70],
disabled: Colors.neutral[10],
},
color: {
placeholder: {
normal: Colors.neutral[30],
readOnly: Colors.neutral[30],
},
disabled: Colors.neutral[30],
readOnly: Colors.neutral[90],
},
backgroundColor: {
readOnly: Colors.neutral[5],
},
error: Colors.red[50],
icon: {
color: Colors.neutral[70],
},
label: {
color: Colors.neutral[70],
},
},
textArea: {
borderColor: {
normal: Colors.neutral[30],
hover: Colors.neutral[50],
focus: Colors.neutral[70],
disabled: Colors.neutral[10],
},
color: {
placeholder: {
normal: Colors.neutral[30],
focus: {
normal: 'transparent',
readOnly: Colors.neutral[30],
},
},
disabled: Colors.neutral[30],
readOnly: Colors.neutral[90],
},
backgroundColor: {
readOnly: Colors.neutral[5],
},
},
tag: {
backgroundColor: {
green: Colors.green[10],
gray: Colors.neutral[5],
@ -208,7 +299,7 @@ const theme = {
},
color: Colors.neutral[90],
},
paginationStyles: {
pagination: {
backgroundColor: Colors.neutral[0],
currentPage: Colors.neutral[10],
borderColor: {
@ -241,6 +332,12 @@ const theme = {
warningTextColor: Colors.red[50],
lightTextColor: Colors.neutral[30],
},
filters: {
color: {
icon: Colors.neutral[90],
normal: Colors.neutral[50],
},
},
},
scrollbar: {
trackColor: {
@ -252,9 +349,37 @@ const theme = {
active: Colors.neutral[50],
},
},
confirmationModal: {
overlay: Colors.transparency[10],
shadow: Colors.transparency[20],
consumerTopicContent: {
backgroundColor: Colors.neutral[5],
},
topicFormLabel: {
color: Colors.neutral[50],
},
topicMetaData: {
backgroundColor: Colors.neutral[5],
color: {
label: Colors.neutral[50],
value: Colors.neutral[80],
meta: Colors.neutral[30],
},
},
dangerZone: {
borderColor: Colors.neutral[10],
color: Colors.red[50],
},
configList: {
color: Colors.neutral[30],
},
topicsList: {
color: {
normal: Colors.neutral[90],
hover: Colors.neutral[50],
active: Colors.neutral[90],
},
backgroundColor: {
hover: Colors.neutral[5],
active: Colors.neutral[10],
},
},
icons: {
closeIcon: Colors.neutral[30],
@ -269,9 +394,6 @@ const theme = {
viewer: {
wrapper: Colors.neutral[3],
},
textarea: {
focus: 'transparent',
},
};
export type ThemeType = typeof theme;