diff --git a/.storybook/main.js b/.storybook/main.js index 650dde405..187ee41dd 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -3,6 +3,11 @@ module.exports = { framework: { name: "@storybook/react-webpack5", }, + previewBody: (body) => ` + ${body} + `, babel: { presets: ["@babel/preset-react"] }, webpackFinal: async (config, { configType }) => { config.module.rules = config.module.rules.filter( diff --git a/.storybook/preview.js b/.storybook/preview.js index 861ed2db7..a2af837bc 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -5,13 +5,15 @@ import React from "react"; import { Providers } from "../src/Providers/Providers"; export const decorators = [ - (Story) => ( - - - - - - ), + (Story) => { + return ( + + + + + + ); + }, ]; export const parameters = { diff --git a/local_modules/styles/mixins.less b/local_modules/styles/mixins.less index 13e408c36..d183e54ca 100644 --- a/local_modules/styles/mixins.less +++ b/local_modules/styles/mixins.less @@ -43,3 +43,13 @@ color: @colorGrey; height: 100vh - 50px; } + +.dropdown-checkbox { + display: flex; + align-items: center; + padding: 0; +} + +.dropdown-checkbox-item { + padding: 6px 8px; +} diff --git a/local_modules/styles/variables.less b/local_modules/styles/variables.less index 62d684c02..49c9993c0 100644 --- a/local_modules/styles/variables.less +++ b/local_modules/styles/variables.less @@ -10,3 +10,65 @@ @moira-brand-color: #00bfa5; @moira-color-dev: #9780b3; @moira-color-staging: #809cb3; + +body[data-theme="Light Theme"] { + --background-primary: #ffffff; + --background-tertiary: #dddddd; + --background-secondary: #f2f2f2; + --background-plate: #f3f3f3; + + --divider: rgba(0, 0, 0, 0.15); + + --header-menu-buttons: #ffffff; + + --inverted: #151515; + + --item-hover: #f2f2f2; + + --text-primary: #151515; + --text-secondary: @colorGrey; + + --icon-checked-color: #00a8ff; + --icon-hover-color: #000; + --icon-color: #858585; + + --search-selector: #ffffff; + + // code editor light theme colors + --background-gutter: #f5f5f5; + --line-number-gutter: #6c6c6c; + --active-line-gutter: #e2f2ff; + --active-line: #cceeff44; + --border-gutter: #ddd; +} + +body[data-theme="Dark Theme"] { + --background-primary: #151515; + --background-secondary: #232323; + --background-tertiary: #505050; + --background-plate: transparent; + + --divider: #505050; + + --header-menu-buttons: #ffffff; + + --inverted: #fff; + + --item-hover: #232323; + + --text-primary: #e6e6e6; + --text-secondary: @colorGrey; + + --icon-checked-color: #00a8ff; + --icon-hover-color: #ffffff; + --icon-color: #858585; + + --search-selector: #232323; + + // code editor dark theme colors + --background-gutter: #585858; + --line-number-gutter: #151515; + --active-line-gutter: #cbcbcb; + --active-line: rgba(255, 255, 255, 0.16); + --border-gutter: #979797; +} diff --git a/package.json b/package.json index 7a1dfd0d1..2c24eae4b 100644 --- a/package.json +++ b/package.json @@ -24,10 +24,10 @@ "screenshots": "start-server-and-test storybook:ci http://localhost:9001 pw:screenshotTest" }, "dependencies": { - "@skbkontur-moira/codemirror-metricsql": "0.0.1-dev.1809240003", "@lezer/highlight": "1.1.6", "@reduxjs/toolkit": "2.2.1", "@sentry/react": "7.81.1", + "@skbkontur-moira/codemirror-metricsql": "0.0.1-dev.1809240003", "@skbkontur/react-icons": "5.2.9", "@skbkontur/react-stack-layout": "1.0.3", "@skbkontur/react-ui": "4.16.0", diff --git a/playwright/snapshots/ContactEditForm/contacteditform--filled.png b/playwright/snapshots/ContactEditForm/contacteditform--filled.png index ca272fd19..9fcea9789 100644 Binary files a/playwright/snapshots/ContactEditForm/contacteditform--filled.png and b/playwright/snapshots/ContactEditForm/contacteditform--filled.png differ diff --git a/playwright/snapshots/ContactList/contactlist--few-items.png b/playwright/snapshots/ContactList/contactlist--few-items.png index e13392818..dfe619b97 100644 Binary files a/playwright/snapshots/ContactList/contactlist--few-items.png and b/playwright/snapshots/ContactList/contactlist--few-items.png differ diff --git a/playwright/snapshots/ContactList/contactlist--one-item.png b/playwright/snapshots/ContactList/contactlist--one-item.png index 6ecece1db..d3d363b9e 100644 Binary files a/playwright/snapshots/ContactList/contactlist--one-item.png and b/playwright/snapshots/ContactList/contactlist--one-item.png differ diff --git a/playwright/snapshots/ContactSelect/contactselect--default.png b/playwright/snapshots/ContactSelect/contactselect--default.png index f796dde81..bf0316d24 100644 Binary files a/playwright/snapshots/ContactSelect/contactselect--default.png and b/playwright/snapshots/ContactSelect/contactselect--default.png differ diff --git a/playwright/snapshots/ContactTypeIcon/contacttypeicon--all-icons-in-list.png b/playwright/snapshots/ContactTypeIcon/contacttypeicon--all-icons-in-list.png index e6aa0e721..b14cd62f4 100644 Binary files a/playwright/snapshots/ContactTypeIcon/contacttypeicon--all-icons-in-list.png and b/playwright/snapshots/ContactTypeIcon/contacttypeicon--all-icons-in-list.png differ diff --git a/playwright/snapshots/Header/header--default.png b/playwright/snapshots/Header/header--default.png index d557235ee..96963f38e 100644 Binary files a/playwright/snapshots/Header/header--default.png and b/playwright/snapshots/Header/header--default.png differ diff --git a/playwright/snapshots/NotificationList/notificationlist--default.png b/playwright/snapshots/NotificationList/notificationlist--default.png index 4cacd6ccc..c0533065b 100644 Binary files a/playwright/snapshots/NotificationList/notificationlist--default.png and b/playwright/snapshots/NotificationList/notificationlist--default.png differ diff --git a/playwright/snapshots/PatternList/patternlist--default.png b/playwright/snapshots/PatternList/patternlist--default.png index 5221072bb..d48617bc6 100644 Binary files a/playwright/snapshots/PatternList/patternlist--default.png and b/playwright/snapshots/PatternList/patternlist--default.png differ diff --git a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-data.png b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-data.png index 599b7f79c..45a4d56a0 100644 Binary files a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-data.png and b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-data.png differ diff --git a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-degradation.png b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-degradation.png index a59df6c13..b80fbda07 100644 Binary files a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-degradation.png and b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-degradation.png differ diff --git a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-graph-in-dark-theme.png b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-graph-in-dark-theme.png index ad389341e..c03f1ba50 100644 Binary files a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-graph-in-dark-theme.png and b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-graph-in-dark-theme.png differ diff --git a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-graph-in-light-theme.png b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-graph-in-light-theme.png index 599b7f79c..45a4d56a0 100644 Binary files a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-graph-in-light-theme.png and b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--with-graph-in-light-theme.png differ diff --git a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--without-graph.png b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--without-graph.png index 2800bf14f..372589903 100644 Binary files a/playwright/snapshots/SubscriptionEditor/subscriptioneditor--without-graph.png and b/playwright/snapshots/SubscriptionEditor/subscriptioneditor--without-graph.png differ diff --git a/playwright/snapshots/SubscriptionList/subscriptionlist--defualt.png b/playwright/snapshots/SubscriptionList/subscriptionlist--defualt.png index 74b092df8..4794bec35 100644 Binary files a/playwright/snapshots/SubscriptionList/subscriptionlist--defualt.png and b/playwright/snapshots/SubscriptionList/subscriptionlist--defualt.png differ diff --git a/playwright/snapshots/SubscriptionList/subscriptionlist--few-channels-for-subscription.png b/playwright/snapshots/SubscriptionList/subscriptionlist--few-channels-for-subscription.png index 0f425dbc4..8aef39579 100644 Binary files a/playwright/snapshots/SubscriptionList/subscriptionlist--few-channels-for-subscription.png and b/playwright/snapshots/SubscriptionList/subscriptionlist--few-channels-for-subscription.png differ diff --git a/playwright/snapshots/SubscriptionList/subscriptionlist--with-disabled-item.png b/playwright/snapshots/SubscriptionList/subscriptionlist--with-disabled-item.png index b72869e0d..8c62c1dd4 100644 Binary files a/playwright/snapshots/SubscriptionList/subscriptionlist--with-disabled-item.png and b/playwright/snapshots/SubscriptionList/subscriptionlist--with-disabled-item.png differ diff --git a/playwright/snapshots/SubscriptionList/subscriptionlist--with-many-tags.png b/playwright/snapshots/SubscriptionList/subscriptionlist--with-many-tags.png index 5efa51e93..e6934933f 100644 Binary files a/playwright/snapshots/SubscriptionList/subscriptionlist--with-many-tags.png and b/playwright/snapshots/SubscriptionList/subscriptionlist--with-many-tags.png differ diff --git a/src/Components/AddingButton/AddingButton.less b/src/Components/AddingButton/AddingButton.less index aa861c9a1..5eecabc6f 100644 --- a/src/Components/AddingButton/AddingButton.less +++ b/src/Components/AddingButton/AddingButton.less @@ -1,12 +1,12 @@ -@import '~styles/variables.less'; -@import '~styles/mixins.less'; +@import "~styles/variables.less"; +@import "~styles/mixins.less"; .button { display: block; padding-top: 10px; padding-bottom: 10px; border: 2px dashed #eee; - color: #000; + color: var(--text-primary); font-size: 16px; line-height: 20px; text-align: center; diff --git a/src/Components/AllContatcsTable/AllContactsTable.less b/src/Components/AllContatcsTable/AllContactsTable.less index e3506fad6..11ea9f54d 100644 --- a/src/Components/AllContatcsTable/AllContactsTable.less +++ b/src/Components/AllContatcsTable/AllContactsTable.less @@ -50,7 +50,7 @@ .clickable { &:hover { - background-color: rgba(0, 0, 0, 0.05); + background-color: var(--item-hover); cursor: pointer; } } diff --git a/src/Components/CodeRef/CodeRef.less b/src/Components/CodeRef/CodeRef.less index c9c61c940..5d3368917 100644 --- a/src/Components/CodeRef/CodeRef.less +++ b/src/Components/CodeRef/CodeRef.less @@ -1,4 +1,4 @@ .code-ref { font-family: "Consolas", monospace; - background-color: #eee; + background-color: var(--background-tertiary); } diff --git a/src/Components/ContactEventStats/Components/ContactEventsChart.tsx b/src/Components/ContactEventStats/Components/ContactEventsChart.tsx index 776e187c9..aa1e5a3e4 100644 --- a/src/Components/ContactEventStats/Components/ContactEventsChart.tsx +++ b/src/Components/ContactEventStats/Components/ContactEventsChart.tsx @@ -12,6 +12,7 @@ import { Select } from "@skbkontur/react-ui/components/Select"; import zoomPlugin from "chartjs-plugin-zoom"; import { getContactEventsChartOptions } from "../../../helpers/getChartOptions"; import { Flexbox } from "../../Flexbox/FlexBox"; +import { useTheme } from "../../../Themes"; ChartJS.register(...registerables); @@ -21,6 +22,7 @@ interface IContactEventsBarChartProps { export const ContactEventsChart: React.FC = ({ events }) => { const [interval, setInterval] = useState(EContactEventsInterval.hour); + const theme = useTheme(); const groupedTransitions = useMemo(() => groupEventsByInterval(events, interval), [ events, @@ -62,7 +64,12 @@ export const ContactEventsChart: React.FC = ({ even } + options={ + getContactEventsChartOptions( + interval, + theme.chartGridLinesColor + ) as ChartOptions<"bar"> + } /> ); diff --git a/src/Components/ContactEventStats/Components/TriggerEventsChart.tsx b/src/Components/ContactEventStats/Components/TriggerEventsChart.tsx index 4a24a0d1a..e46130b7e 100644 --- a/src/Components/ContactEventStats/Components/TriggerEventsChart.tsx +++ b/src/Components/ContactEventStats/Components/TriggerEventsChart.tsx @@ -7,6 +7,7 @@ import { getColor } from "../../Tag/Tag"; import { createHtmlLegendPlugin } from "./htmlLegendPlugin"; import { triggerEventsChartOptions } from "../../../helpers/getChartOptions"; import { Flexbox } from "../../Flexbox/FlexBox"; +import { useTheme } from "../../../Themes"; ChartJS.register(...registerables); @@ -24,6 +25,8 @@ export const TriggerEventsChart: React.FC = ({ even [events] ); + const theme = useTheme(); + const sortedEvents = useMemo(() => { return Object.entries(groupedEvents).sort(([, a], [, b]) => b - a); }, [events]); @@ -46,7 +49,9 @@ export const TriggerEventsChart: React.FC = ({ even } + options={ + triggerEventsChartOptions(theme.chartGridLinesColor) as ChartOptions<"bar"> + } /> ); diff --git a/src/Components/ContactList/ContactList.less b/src/Components/ContactList/ContactList.less index 4ffe3c9d9..4160f2d9c 100644 --- a/src/Components/ContactList/ContactList.less +++ b/src/Components/ContactList/ContactList.less @@ -27,9 +27,6 @@ .item { cursor: pointer; - &:hover { - background-color: #f8f8f8; - } td { padding: 10px; @@ -45,6 +42,7 @@ } &:hover { + background-color: var(--item-hover); .actions { display: inline; } diff --git a/src/Components/ContactList/ContactList.tsx b/src/Components/ContactList/ContactList.tsx index 0dfef95e5..7fdf83131 100644 --- a/src/Components/ContactList/ContactList.tsx +++ b/src/Components/ContactList/ContactList.tsx @@ -23,6 +23,90 @@ import styles from "./ContactList.less"; const cn = classNames.bind(styles); +interface IContactItemProps { + contact: Omit; + contactDescriptions: ContactConfig[]; + onEdit: (contact: Omit) => void; + onEventsClick: ( + event: React.MouseEvent, + contact: Omit + ) => void; + onDeleteContact: () => void; +} + +const ContactItem: React.FC = ({ + contact, + contactDescriptions, + onEdit, + onEventsClick, + onDeleteContact, +}) => { + const { id, name, value, type } = contact; + + const isContactTypeSupported = contactDescriptions.some( + (description) => description.type === type + ); + + return ( + <> + {isContactTypeSupported ? ( + + onEdit({ + name, + value, + type, + id, + }) + } + > + + + + + {isEmptyString(name) ? ( + value + ) : ( + + )} + + + + + + ) : ( + + + + + + {isEmptyString(name) ? value : name} + + Contact type {type} not more support.{" "} + + + + + + )} + + ); +}; + interface IContactListProps { contacts: Array; contactDescriptions: Array; @@ -31,6 +115,7 @@ interface IContactListProps { const ContactList: React.FC = ({ contacts, contactDescriptions, settings }) => { const { teamId } = useParams<{ teamId: string }>(); + const { isModalOpen: contactEventsVisible, openModal: openContactEventsSidePage, @@ -78,85 +163,23 @@ const ContactList: React.FC = ({ contacts, contactDescription
- {contacts.map(({ name, value, type, id }) => { - if ( - contactDescriptions.some( - (description) => description.type === type - ) - ) { - return ( - - handleBeginEditContact({ - name, - value, - type, - id, - }) - } - > - - - - - ); - } - - return ( - - - - - ); - })} + {contacts.map(({ name, value, type, id }) => ( + + deleteContact({ + id, + tagsToInvalidate: [ + teamId ? "TeamSettings" : "UserSettings", + ], + }) + } + /> + ))}
- - - {isEmptyString(name) ? ( - value - ) : ( - - )} - - -
- - - {isEmptyString(name) ? value : name} - - Contact type {type} not more support.{" "} - - -
diff --git a/src/Components/ContactTypeIcon/ContactIcons.tsx b/src/Components/ContactTypeIcon/ContactIcons.tsx new file mode 100644 index 000000000..844f5dc10 --- /dev/null +++ b/src/Components/ContactTypeIcon/ContactIcons.tsx @@ -0,0 +1,502 @@ +import React from "react"; + +export const TelegramIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + +); + +export const DiscordIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + + +); + +export const FacebookIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + +); + +export const MailIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + +); + +export const MattermostIcon = ({ + color = "black", + size = 16, +}: { + color?: string; + size?: number; +}) => ( + <> + + + + + +); + +export const MsteamsIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + + + + + + + + + +); + +export const OpsgenieIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + +); + +export const PagerDutyIcon = ({ + color = "black", + size = 16, +}: { + color?: string; + size?: number; +}) => ( + + + + + + + + + +); + +export const PhoneIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + +); + +export const PushoverIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + + + + + + + +); + +export const SlackIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + + + + +); + +export const SmsIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + +); + +export const TwilioIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + + + + +); + +export const TwitterIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + +); + +export const ViberIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + + + + + + + + +); + +export const VictoropsIcon = ({ + color = "black", + size = 16, +}: { + color?: string; + size?: number; +}) => ( + + + + + + + + + +); + +export const WebhookIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + + + +); + +export const WhatsappIcon = ({ color = "black", size = 16 }: { color?: string; size?: number }) => ( + + + +); + +export const icons: { [key: string]: React.ComponentType<{ color?: string; size?: number }> } = { + telegram: TelegramIcon, + discord: DiscordIcon, + facebook: FacebookIcon, + mail: MailIcon, + email: MailIcon, + mattermost: MattermostIcon, + msteams: MsteamsIcon, + opsgenie: OpsgenieIcon, + pagerduty: PagerDutyIcon, + phone: PhoneIcon, + pushover: PushoverIcon, + slack: SlackIcon, + sms: SmsIcon, + twilio: TwilioIcon, + twitter: TwitterIcon, + viber: ViberIcon, + victorops: VictoropsIcon, + webhook: WebhookIcon, + whatsapp: WhatsappIcon, +}; diff --git a/src/Components/ContactTypeIcon/ContactTypeIcon.tsx b/src/Components/ContactTypeIcon/ContactTypeIcon.tsx index d99564b81..512d16763 100644 --- a/src/Components/ContactTypeIcon/ContactTypeIcon.tsx +++ b/src/Components/ContactTypeIcon/ContactTypeIcon.tsx @@ -1,40 +1,53 @@ -import React, { useState, useEffect } from "react"; -import SvgIcon from "../SvgIcon/SvgIcon"; -import MailLogo from "./mail-logo.svg"; +import React, { useState, useLayoutEffect } from "react"; import { useAppSelector } from "../../store/hooks"; import { ConfigState } from "../../store/selectors"; -import { DefaultTypeToIcon } from "./DefaultTypeToIcon"; +import { icons } from "./ContactIcons"; +import { useTheme } from "../../Themes"; type Props = { type: string; }; -export default function ContactTypeIcon({ type }: Props): React.ReactElement { +export default function ContactTypeIcon({ type }: Props): React.ReactElement | null { const { config } = useAppSelector(ConfigState); const contact = config?.contacts.find((contact) => type.includes(contact.type)); - const [svgPath, setSvgPath] = useState(null); - - useEffect(() => { - import(`./${contact?.logo_uri}`) - .then((module) => { - setSvgPath(module.default); - }) - .catch((error) => { - console.error(`Failed to load SVG: ${error.message}`); - setSvgPath(null); - }); + const [iconKey, setIconKey] = useState(null); + const theme = useTheme(); + + useLayoutEffect(() => { + if (contact?.logo_uri) { + const keyword = contact.logo_uri.toLowerCase(); + const matchingIcon = Object.keys(icons).find((name) => + name.toLowerCase().includes(keyword) + ); + if (matchingIcon) { + setIconKey(matchingIcon); + return; + } + } + + if (type in icons) { + setIconKey(type); + } else { + setIconKey("mail"); + } }, [contact?.logo_uri]); - const getDefaultIcons = () => { - const iconKey = Object.keys(DefaultTypeToIcon).find((key) => type.includes(key)); - return iconKey ? ( - DefaultTypeToIcon[iconKey] - ) : ( - - ); - }; + if (!iconKey) return null; + + const IconComponent = icons[iconKey]; - return svgPath ? : getDefaultIcons(); + return ( +
+ +
+ ); } diff --git a/src/Components/ContactTypeIcon/discord-logo.svg b/src/Components/ContactTypeIcon/discord-logo.svg deleted file mode 100644 index 9084f5046..000000000 --- a/src/Components/ContactTypeIcon/discord-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/facebook-logo.svg b/src/Components/ContactTypeIcon/facebook-logo.svg deleted file mode 100644 index a69dc6d0a..000000000 --- a/src/Components/ContactTypeIcon/facebook-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/mail-logo.svg b/src/Components/ContactTypeIcon/mail-logo.svg deleted file mode 100644 index 8d085f136..000000000 --- a/src/Components/ContactTypeIcon/mail-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/mattermost-logo.svg b/src/Components/ContactTypeIcon/mattermost-logo.svg deleted file mode 100644 index 9f5817e0a..000000000 --- a/src/Components/ContactTypeIcon/mattermost-logo.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/src/Components/ContactTypeIcon/msteams-logo.svg b/src/Components/ContactTypeIcon/msteams-logo.svg deleted file mode 100644 index 53e7e9bde..000000000 --- a/src/Components/ContactTypeIcon/msteams-logo.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - diff --git a/src/Components/ContactTypeIcon/opsgenie-logo.svg b/src/Components/ContactTypeIcon/opsgenie-logo.svg deleted file mode 100644 index fdc94b6e4..000000000 --- a/src/Components/ContactTypeIcon/opsgenie-logo.svg +++ /dev/null @@ -1,146 +0,0 @@ - - - - -Created by potrace 1.15, written by Peter Selinger 2001-2017 - - - - - - diff --git a/src/Components/ContactTypeIcon/pagerduty-logo.svg b/src/Components/ContactTypeIcon/pagerduty-logo.svg deleted file mode 100644 index 8cc8f24ac..000000000 --- a/src/Components/ContactTypeIcon/pagerduty-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/phone-logo.svg b/src/Components/ContactTypeIcon/phone-logo.svg deleted file mode 100644 index 0f65522ca..000000000 --- a/src/Components/ContactTypeIcon/phone-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/pushover-logo.svg b/src/Components/ContactTypeIcon/pushover-logo.svg deleted file mode 100644 index 7c7d53abe..000000000 --- a/src/Components/ContactTypeIcon/pushover-logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/slack-logo.svg b/src/Components/ContactTypeIcon/slack-logo.svg deleted file mode 100644 index b6804d68d..000000000 --- a/src/Components/ContactTypeIcon/slack-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/sms-logo.svg b/src/Components/ContactTypeIcon/sms-logo.svg deleted file mode 100644 index 2a715b360..000000000 --- a/src/Components/ContactTypeIcon/sms-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/telegram-logo.svg b/src/Components/ContactTypeIcon/telegram-logo.svg deleted file mode 100644 index 2d7ace33f..000000000 --- a/src/Components/ContactTypeIcon/telegram-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/twilio-logo.svg b/src/Components/ContactTypeIcon/twilio-logo.svg deleted file mode 100644 index 6e933f161..000000000 --- a/src/Components/ContactTypeIcon/twilio-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/twitter-logo.svg b/src/Components/ContactTypeIcon/twitter-logo.svg deleted file mode 100644 index a43d876cc..000000000 --- a/src/Components/ContactTypeIcon/twitter-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/viber-logo.svg b/src/Components/ContactTypeIcon/viber-logo.svg deleted file mode 100644 index b9763ed2c..000000000 --- a/src/Components/ContactTypeIcon/viber-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/victorops-logo.svg b/src/Components/ContactTypeIcon/victorops-logo.svg deleted file mode 100644 index 7b61001d9..000000000 --- a/src/Components/ContactTypeIcon/victorops-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/ContactTypeIcon/webhook-logo.svg b/src/Components/ContactTypeIcon/webhook-logo.svg deleted file mode 100644 index 1a2158108..000000000 --- a/src/Components/ContactTypeIcon/webhook-logo.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/Components/ContactTypeIcon/whatsapp-logo.svg b/src/Components/ContactTypeIcon/whatsapp-logo.svg deleted file mode 100644 index ce4692aa3..000000000 --- a/src/Components/ContactTypeIcon/whatsapp-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/Components/DateAndTimeMenu/DateAndTimeMenu.less b/src/Components/DateAndTimeMenu/DateAndTimeMenu.less deleted file mode 100644 index fb989b3d4..000000000 --- a/src/Components/DateAndTimeMenu/DateAndTimeMenu.less +++ /dev/null @@ -1,19 +0,0 @@ -@import "~styles/variables.less"; -@import "~styles/mixins.less"; - -.calendar-icon { - display: inline-block; - border-top: 1px solid rgba(0, 0, 0, 0.16); - border-right: 1px solid rgba(0, 0, 0, 0.16); - border-bottom: 1px solid rgba(0, 0, 0, 0.16); - box-sizing: border-box; - padding: 5px; - &:hover { - background-color: rgba(0, 0, 0, 0.16); - cursor: pointer; - } -} - -.input-container { - display: inline-flex; -} diff --git a/src/Components/DateAndTimeMenu/DateAndTimeMenu.tsx b/src/Components/DateAndTimeMenu/DateAndTimeMenu.tsx index 4800833ad..d9094b5f1 100644 --- a/src/Components/DateAndTimeMenu/DateAndTimeMenu.tsx +++ b/src/Components/DateAndTimeMenu/DateAndTimeMenu.tsx @@ -8,11 +8,6 @@ import { format, parse } from "date-fns"; import { ValidationInfo, ValidationWrapperV1 } from "@skbkontur/react-ui-validations"; import { Nullable } from "@skbkontur/react-ui-validations/typings/Types"; import { useModal } from "../../hooks/useModal"; -import classNames from "classnames/bind"; - -import styles from "./DateAndTimeMenu.less"; - -const cn = classNames.bind(styles); interface IDateAndTimeMenuProps { date?: Date | null; @@ -56,20 +51,20 @@ export const DateAndTimeMenu: FC = ({ return (
-
- - - - -
+ + } + onClick={openMenu} + /> + + {isMenuOpen && (
diff --git a/src/Components/FilterStatusSelect/FilterStatusSelect.less b/src/Components/FilterStatusSelect/FilterStatusSelect.less index caa2e02c3..429247da0 100644 --- a/src/Components/FilterStatusSelect/FilterStatusSelect.less +++ b/src/Components/FilterStatusSelect/FilterStatusSelect.less @@ -1,12 +1,5 @@ -@import "~styles/variables.less"; @import "~styles/mixins.less"; .filter-status-icon:not(:last-child) { margin-right: 5px; } - -.filter-status-checkbox { - display: flex; - align-items: center; - padding: 0; -} diff --git a/src/Components/FilterStatusSelect/FilterStatusSelect.tsx b/src/Components/FilterStatusSelect/FilterStatusSelect.tsx index cea897bbd..a10804b61 100644 --- a/src/Components/FilterStatusSelect/FilterStatusSelect.tsx +++ b/src/Components/FilterStatusSelect/FilterStatusSelect.tsx @@ -1,11 +1,10 @@ import React, { FC } from "react"; import StatusIcon from "../StatusIcon/StatusIcon"; import { getStatusCaption, Status } from "../../Domain/Status"; -import { Checkbox } from "@skbkontur/react-ui/components/Checkbox"; -import { DropdownMenu, ThemeContext, ThemeFactory } from "@skbkontur/react-ui"; -import { MenuItem } from "@skbkontur/react-ui/components/MenuItem"; +import { DropdownMenu } from "@skbkontur/react-ui"; import { Button } from "@skbkontur/react-ui/components/Button"; import Filter from "@skbkontur/react-icons/Filter"; +import { Checkbox } from "@skbkontur/react-ui/components/Checkbox"; import classNames from "classnames/bind"; import styles from "./FilterStatusSelect.less"; @@ -44,24 +43,17 @@ export const FilterStatusSelect: FC = ({ )} > {availableStatuses.map((status) => ( - - - handleSetSelectedStatuses(status, value)} - > - -   - {getStatusCaption(status)} - - - +
+ handleSetSelectedStatuses(status, value)} + > + +   + {getStatusCaption(status)} + +
))} ); diff --git a/src/Components/Footer/Footer.less b/src/Components/Footer/Footer.less index bd45901c4..6dfc108d9 100644 --- a/src/Components/Footer/Footer.less +++ b/src/Components/Footer/Footer.less @@ -1,11 +1,11 @@ -@import '~styles/variables.less'; -@import '~styles/mixins.less'; +@import "~styles/variables.less"; +@import "~styles/mixins.less"; .footer { padding-top: 40px; padding-bottom: 40px; - background-color: #efefef; - color: @colorGrey; + background-color: var(--background-secondary); + color: var(--text-secondary); } .container { diff --git a/src/Components/Footer/Footer.tsx b/src/Components/Footer/Footer.tsx index 444ae1fd7..7a2d7289e 100644 --- a/src/Components/Footer/Footer.tsx +++ b/src/Components/Footer/Footer.tsx @@ -11,6 +11,7 @@ type Props = { export default function Footer(props: Props): React.ReactElement { const { className } = props; + return (