mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 01:13:23 -04:00
[Defend Workflows][Eui Visual Refresh] Basic theme update (#204892)
## Summary For the most part, all of our colors translated fine into Borealis when testing our pages. There will be more changes needed in the future to completely replace all of the `euiThemeVars` usages, especially in components that are shared with other teams. There are also quite a few exported custom styled components that can't easily use the `useEuiTheme` hook since they are not inside a react component. I didn't want to touch those at this time. - [x] Replace deprecated tokens to use new naming scheme ( like successText --> textSuccess) - [x] Use the hook `useEuiTheme()` over other methods --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Candace Park
GitHub
parent
666cceffe0
commit
4162fe07ef
3 changed files with 13 additions and 11 deletions
|
|
@ -436,7 +436,6 @@ module.exports = {
|
|||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]components[\/\\]user_command_input.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]console[\/\\]console.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]context_menu_with_router_support[\/\\]context_menu_item_nav_by_router.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]effected_policy_select[\/\\]effected_policy_select.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]endpoint_response_actions_list[\/\\]components[\/\\]actions_log_empty_state.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]management_empty_state_wrapper.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]components[\/\\]package_action_item[\/\\]package_action_item_error.tsx/,
|
||||
|
|
@ -457,7 +456,6 @@ module.exports = {
|
|||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]policy[\/\\]view[\/\\]ingest_manager_integration[\/\\]endpoint_policy_create_extension[\/\\]components[\/\\]help_text_with_padding.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]policy[\/\\]view[\/\\]ingest_manager_integration[\/\\]endpoint_policy_create_multi_step_extension.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]policy[\/\\]view[\/\\]policy_settings_form[\/\\]components[\/\\]event_collection_card.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]policy[\/\\]view[\/\\]policy_settings_form[\/\\]components[\/\\]setting_card.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]policy[\/\\]view[\/\\]policy_settings_form[\/\\]components[\/\\]setting_locked_card.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]policy[\/\\]view[\/\\]protection_updates[\/\\]protection_updates_layout.tsx/,
|
||||
/x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]management[\/\\]pages[\/\\]trusted_apps[\/\\]view[\/\\]components[\/\\]condition_entry_input[\/\\]index.tsx/,
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import type { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import styled from 'styled-components';
|
||||
import styled from '@emotion/styled';
|
||||
import { useUserPrivileges } from '../../../common/components/user_privileges';
|
||||
import type { PolicyData } from '../../../../common/endpoint/types';
|
||||
import { LinkToApp } from '../../../common/components/endpoint/link_to_app';
|
||||
|
|
@ -47,7 +47,7 @@ const StyledEuiSelectable = styled.div`
|
|||
`;
|
||||
|
||||
const StyledEuiFlexItemButtonGroup = styled(EuiFlexItem)`
|
||||
@media only screen and (max-width: ${(props) => props.theme.eui.euiBreakpoints.m}) {
|
||||
@media only screen and (max-width: ${({ theme }) => theme.euiTheme.breakpoint.m}) {
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
|
@ -56,14 +56,14 @@ const StyledButtonGroup = styled(EuiButtonGroup)`
|
|||
display: flex;
|
||||
justify-content: right;
|
||||
.euiButtonGroupButton {
|
||||
padding-right: ${(props) => props.theme.eui.euiSizeL};
|
||||
padding-right: ${({ theme }) => theme.euiTheme.size.l};
|
||||
}
|
||||
`;
|
||||
|
||||
const EffectivePolicyFormContainer = styled.div`
|
||||
.policy-name .euiSelectableListItem__text {
|
||||
text-decoration: none !important;
|
||||
color: ${(props) => props.theme.eui.euiTextColor} !important;
|
||||
color: ${({ theme }) => theme.euiTheme.colors.textParagraph} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
|
||||
import type { FC, ReactNode } from 'react';
|
||||
import React, { memo, useContext } from 'react';
|
||||
import React, { memo } from 'react';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n-react';
|
||||
import {
|
||||
|
|
@ -22,7 +22,6 @@ import {
|
|||
EuiSpacer,
|
||||
} from '@elastic/eui';
|
||||
|
||||
import { ThemeContext } from 'styled-components';
|
||||
import type { OperatingSystem } from '@kbn/securitysolution-utils';
|
||||
import { useTestIdGenerator } from '../../../../../hooks/use_test_id_generator';
|
||||
import { OS_TITLES } from '../../../../../common/translations';
|
||||
|
|
@ -73,7 +72,6 @@ export const SettingCard: FC<SettingCardProps> = memo(
|
|||
selected = true,
|
||||
mode = 'edit',
|
||||
}) => {
|
||||
const paddingSize = useContext(ThemeContext).eui.euiPanelPaddingModifiers.paddingMedium;
|
||||
const getTestId = useTestIdGenerator(dataTestSubj);
|
||||
|
||||
return (
|
||||
|
|
@ -82,7 +80,9 @@ export const SettingCard: FC<SettingCardProps> = memo(
|
|||
direction="row"
|
||||
gutterSize="none"
|
||||
alignItems="center"
|
||||
style={{ padding: `${paddingSize} ${paddingSize} 0 ${paddingSize}` }}
|
||||
css={({ euiTheme }) => ({
|
||||
padding: `${euiTheme.size.base} ${euiTheme.size.base} 0 ${euiTheme.size.base}`,
|
||||
})}
|
||||
>
|
||||
<EuiFlexItem grow={1}>
|
||||
<SettingCardHeader>{TITLES.type}</SettingCardHeader>
|
||||
|
|
@ -146,7 +146,11 @@ export const SettingCard: FC<SettingCardProps> = memo(
|
|||
{mode === 'edit' || selected ? (
|
||||
<>
|
||||
<EuiHorizontalRule margin="m" />
|
||||
<div style={{ padding: `0 ${paddingSize} ${paddingSize} ${paddingSize}` }}>
|
||||
<div
|
||||
css={({ euiTheme }) => ({
|
||||
padding: `${euiTheme.size.base} ${euiTheme.size.base} 0 ${euiTheme.size.base}`,
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue