diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx index c6391a4ccc..7bd26e02a8 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentsSettings.tsx @@ -12,7 +12,9 @@ import { EuiToolTip, EuiForm, EuiHorizontalRule, + EuiCallOut, } from '@elastic/eui' +import cx from 'classnames' import parse from 'html-react-parser' import { compareConsents } from 'uiSrc/utils' @@ -149,34 +151,38 @@ const ConsentsSettings = ({ liveEditMode = false }: Props) => { return ( - {!!nonRequiredConsents.length && ( - <> - - - To improve your experience, we use third party tools in RedisInsight. All data collected - are completely anonymized, but we will not use these data for any purpose that you do - not consent to. - - - - )} - { - nonRequiredConsents - .map((consent: IConsent) => renderConsentOption(consent, nonRequiredConsents.length > 1)) - } - - {!liveEditMode && ( - <> - - While adding new plugins for Workbench, use files only from trusted authors - to avoid automatic execution of malicious code. - - - - )} - +
+ {!!nonRequiredConsents.length && ( + <> + + + To improve your experience, we use third party tools in RedisInsight. All data collected + are completely anonymized, but we will not use these data for any purpose that you do + not consent to. + + + + )} + { + nonRequiredConsents + .map((consent: IConsent) => renderConsentOption(consent, nonRequiredConsents.length > 1)) + } + + {!liveEditMode && ( + <> + + + While adding new visualization plugins, use files only from trusted authors + to avoid automatic execution of malicious code. + + + + + )} +
{!!requiredConsents.length && ( <> + To use RedisInsight, please accept the terms and conditions: @@ -185,39 +191,42 @@ const ConsentsSettings = ({ liveEditMode = false }: Props) => { )} {requiredConsents.map((consent: IConsent) => renderConsentOption(consent))} + {!liveEditMode && ( - - - - - {Object.values(errors).map((err) => [ - spec?.agreements[err as string]?.requiredText, -
, - ])} - - ) : null - } - > - {}} - disabled={submitIsDisabled()} - iconType={submitIsDisabled() ? 'iInCircle' : undefined} - data-testid="btn-submit" + <> + {!requiredConsents.length && ()} + + + + {Object.values(errors).map((err) => [ + spec?.agreements[err as string]?.requiredText, +
, + ])} + + ) : null + } > - Submit -
-
-
-
+ {}} + disabled={submitIsDisabled()} + iconType={submitIsDisabled() ? 'iInCircle' : undefined} + data-testid="btn-submit" + > + Submit + + + + + )}
) diff --git a/redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx b/redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx index de51924dd5..ec5183f101 100644 --- a/redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx +++ b/redisinsight/ui/src/components/consents-settings/ConsentsSettingsPopup/ConsentsSettingsPopup.tsx @@ -8,8 +8,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle, - EuiSpacer, - EuiText, } from '@elastic/eui' import { Theme } from 'uiSrc/constants' @@ -35,7 +33,12 @@ const ConsentsSettingsPopup = () => { {}} data-testid="consents-settings-popup"> - + + + +

EULA and Privacy Settings

+
+
{
- - EULA and Privacy Settings - - -
diff --git a/redisinsight/ui/src/components/consents-settings/styles.module.scss b/redisinsight/ui/src/components/consents-settings/styles.module.scss index ee59691463..b20208be0b 100644 --- a/redisinsight/ui/src/components/consents-settings/styles.module.scss +++ b/redisinsight/ui/src/components/consents-settings/styles.module.scss @@ -1,3 +1,6 @@ +@import '@elastic/eui/src/global_styling/mixins/helpers'; +@import '@elastic/eui/src/global_styling/index'; + .redisIcon { width: 140px; height: auto; @@ -13,6 +16,9 @@ .euiModal__closeIcon { display: none; } + .euiModal__flex { + max-height: 84vh !important; + } } a { @@ -28,9 +34,21 @@ padding-bottom: 4px; } +.consentsWrapper { + @include euiScrollBar; + overflow-x: hidden; + overflow-y: auto; + max-height: calc(84vh - 260px); +} + +.pluginWarningHR { + margin-bottom: 0 !important; +} + .consentsPopupTitle { color: var(--euiTextSubduedColorHover); font-weight: 500 !important; + font-size: 18px !important; } .switchOption { diff --git a/redisinsight/ui/src/styles/base/_overrides.scss b/redisinsight/ui/src/styles/base/_overrides.scss index b10dd52943..4eb5b21b8e 100644 --- a/redisinsight/ui/src/styles/base/_overrides.scss +++ b/redisinsight/ui/src/styles/base/_overrides.scss @@ -47,3 +47,7 @@ margin-bottom: 0 !important; } } + +.euiOverlayMask { + padding-bottom: 0 !important; +} diff --git a/redisinsight/ui/src/styles/components/_callout.scss b/redisinsight/ui/src/styles/components/_callout.scss new file mode 100644 index 0000000000..c617c6f61e --- /dev/null +++ b/redisinsight/ui/src/styles/components/_callout.scss @@ -0,0 +1,11 @@ +.euiCallOut { + padding: 12px 24px !important; + &--primary { + background-color: var(--euiTooltipBackgroundColor) !important; + border-color: var(--euiColorPrimary) !important; + .euiText { + color: var(--euiTooltipTextColor) !important; + line-height: 24px; + } + } +} diff --git a/redisinsight/ui/src/styles/components/_components.scss b/redisinsight/ui/src/styles/components/_components.scss index b14fbe8cbc..95cb4268e2 100644 --- a/redisinsight/ui/src/styles/components/_components.scss +++ b/redisinsight/ui/src/styles/components/_components.scss @@ -12,3 +12,4 @@ @import 'resizable_container'; @import 'database'; @import 'switch'; +@import "callout";