Skip to content

Commit e33f3e9

Browse files
AmirAllayarovSofteqAmirAllayarovSofteq
authored
#RI-4533-4528 - fix styles (#2102)
* #RI-4533-4528 - fix styles
1 parent ff580f5 commit e33f3e9

File tree

4 files changed

+117
-110
lines changed

4 files changed

+117
-110
lines changed

‎redisinsight/ui/src/components/recommendation-voting/components/vote-option/VoteOption.tsx‎

Lines changed: 69 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -84,19 +84,19 @@ const VoteOption = (props: Props) => {
8484
: 'Enable Analytics on the Settings page to vote for a recommendation')
8585

8686
return (
87-
<EuiToolTip
88-
content={getTooltipContent(voteOption)}
89-
position="bottom"
90-
data-testid={`${voteOption}-vote-tooltip`}
91-
>
92-
<EuiPopover
93-
initialFocus={false}
94-
anchorPosition="rightCenter"
95-
isOpen={popover === voteOption}
96-
closePopover={() => setPopover('')}
97-
anchorClassName={styles.popoverAnchor}
98-
panelClassName={cx('euiToolTip', 'popoverLikeTooltip', styles.popover)}
99-
button={(
87+
<EuiPopover
88+
initialFocus={false}
89+
anchorPosition="rightCenter"
90+
isOpen={popover === voteOption}
91+
closePopover={() => setPopover('')}
92+
anchorClassName={styles.popoverAnchor}
93+
panelClassName={cx('euiToolTip', 'popoverLikeTooltip', styles.popover)}
94+
button={(
95+
<EuiToolTip
96+
content={getTooltipContent(voteOption)}
97+
position="bottom"
98+
data-testid={`${voteOption}-vote-tooltip`}
99+
>
100100
<EuiButtonIcon
101101
disabled={!isAnalyticsEnable}
102102
iconType={iconType[voteOption] ?? 'default'}
@@ -105,64 +105,64 @@ const VoteOption = (props: Props) => {
105105
data-testid={`${voteOption}-vote-btn`}
106106
onClick={() => handleClick(name)}
107107
/>
108+
</EuiToolTip>
108109
)}
109-
>
110-
<div className={styles.popoverWrapper}>
111-
<EuiFlexGroup gutterSize="none" direction="column" alignItems="flexEnd">
112-
<EuiFlexItem grow={false}>
113-
<EuiFlexGroup gutterSize="none">
114-
<EuiFlexItem grow={false}>
115-
<EuiIcon type={PetardIcon} className={styles.petardIcon} />
116-
</EuiFlexItem>
117-
<EuiFlexItem>
118-
<div>
119-
<EuiText className={styles.text} data-testid="common-text">Thank you for the feedback.</EuiText>
120-
<EuiText className={styles.text} data-testid="custom-text">{getVotedText(voteOption)}</EuiText>
121-
</div>
122-
</EuiFlexItem>
123-
<EuiFlexItem grow={false}>
124-
<EuiButtonIcon
125-
iconType="cross"
126-
color="primary"
127-
id="close-voting-popover"
128-
aria-label="close popover"
129-
data-testid="close-popover"
130-
className={styles.closeBtn}
131-
onClick={() => setPopover('')}
132-
/>
133-
</EuiFlexItem>
134-
</EuiFlexGroup>
135-
</EuiFlexItem>
136-
<EuiFlexItem>
137-
<EuiButton
138-
aria-label="recommendation feedback"
139-
fill
140-
data-testid="recommendation-feedback-btn"
141-
className={styles.feedbackBtn}
142-
color="secondary"
143-
size="s"
110+
>
111+
<div className={styles.popoverWrapper} data-testid={`${name}-${voteOption}-popover`}>
112+
<EuiFlexGroup gutterSize="none" direction="column" alignItems="flexEnd">
113+
<EuiFlexItem grow={false}>
114+
<EuiFlexGroup gutterSize="none">
115+
<EuiFlexItem grow={false}>
116+
<EuiIcon type={PetardIcon} className={styles.petardIcon} />
117+
</EuiFlexItem>
118+
<EuiFlexItem>
119+
<div>
120+
<EuiText className={styles.text} data-testid="common-text">Thank you for the feedback.</EuiText>
121+
<EuiText className={styles.text} data-testid="custom-text">{getVotedText(voteOption)}</EuiText>
122+
</div>
123+
</EuiFlexItem>
124+
<EuiFlexItem grow={false}>
125+
<EuiButtonIcon
126+
iconType="cross"
127+
color="primary"
128+
id="close-voting-popover"
129+
aria-label="close popover"
130+
data-testid="close-popover"
131+
className={styles.closeBtn}
132+
onClick={() => setPopover('')}
133+
/>
134+
</EuiFlexItem>
135+
</EuiFlexGroup>
136+
</EuiFlexItem>
137+
<EuiFlexItem>
138+
<EuiButton
139+
aria-label="recommendation feedback"
140+
fill
141+
data-testid="recommendation-feedback-btn"
142+
className={styles.feedbackBtn}
143+
color="secondary"
144+
size="s"
145+
>
146+
<EuiLink
147+
external={false}
148+
className={styles.link}
149+
href={EXTERNAL_LINKS.recommendationFeedback}
150+
target="_blank"
151+
data-test-subj="github-repo-link"
144152
>
145-
<EuiLink
146-
external={false}
147-
className={styles.link}
148-
href={EXTERNAL_LINKS.recommendationFeedback}
149-
target="_blank"
150-
data-test-subj="github-repo-link"
151-
>
152-
<EuiIcon
153-
className={styles.githubIcon}
154-
aria-label="redis insight github issues"
155-
type={GithubSVG}
156-
data-testid="github-repo-icon"
157-
/>
158-
To Github
159-
</EuiLink>
160-
</EuiButton>
161-
</EuiFlexItem>
162-
</EuiFlexGroup>
163-
</div>
164-
</EuiPopover>
165-
</EuiToolTip>
153+
<EuiIcon
154+
className={styles.githubIcon}
155+
aria-label="redis insight github issues"
156+
type={GithubSVG}
157+
data-testid="github-repo-icon"
158+
/>
159+
To Github
160+
</EuiLink>
161+
</EuiButton>
162+
</EuiFlexItem>
163+
</EuiFlexGroup>
164+
</div>
165+
</EuiPopover>
166166
)
167167
}
168168

‎redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/styles.module.scss‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,13 @@
44

55
.wrapper {
66
height: 100%;
7-
8-
.badgesLegend {
9-
margin: 0 22px 14px 0 !important;
10-
padding-top: 20px;
11-
12-
.badgeWrapper {
13-
margin-right: 0;
14-
}
15-
16-
.badge {
17-
margin: 0 0 0 24px;
18-
}
19-
20-
.badgeIcon {
21-
margin-right: 14px;
22-
}
23-
}
24-
25-
.badgeIcon {
26-
fill: var(--badgeIconColor);
27-
}
28-
29-
.badgeWrapper {
30-
display: flex;
31-
align-items: center;
32-
margin-right: 24px;
33-
}
347
}
358

369
.recommendationsContainer {
3710
@include euiScrollBar;
3811
overflow-y: auto;
3912
overflow-x: hidden;
40-
max-height: calc(100% - 51px);
13+
max-height: calc(100% - 70px);
4114

4215
.accordionButton :global(.euiFlexItem) {
4316
margin: 0;
@@ -100,15 +73,6 @@
10073
margin-bottom: 6px;
10174
padding: 30px 18px 11px;
10275

103-
ul {
104-
list-style: initial;
105-
padding-left: 21px;
106-
107-
li::marker {
108-
color: var(--euiTextSubduedColor);
109-
}
110-
}
111-
11276
.accordionContent {
11377
padding: 18px 0 0 !important;
11478
}

‎redisinsight/ui/src/utils/recommendation/styles.module.scss‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,19 @@
1111
display: inline !important;
1212
}
1313

14+
.list {
15+
list-style: initial;
16+
padding-left: 21px;
17+
18+
.listItem::marker {
19+
color: var(--euiTextSubduedColor);
20+
}
21+
22+
.listItem.insights::marker {
23+
color: var(--htmlColor) !important;
24+
}
25+
}
26+
1427
.code {
1528
background-color: var(--separatorColor);
1629
border-radius: 4px;
@@ -23,4 +36,31 @@
2336
code {
2437
font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace !important;
2538
}
26-
}
39+
}
40+
41+
.badgesLegend {
42+
margin: 0 22px 14px 0 !important;
43+
padding-top: 20px;
44+
45+
.badgeWrapper {
46+
margin-right: 0;
47+
}
48+
49+
.badge {
50+
margin: 0 0 0 24px;
51+
}
52+
53+
.badgeIcon {
54+
margin-right: 14px;
55+
}
56+
}
57+
58+
.badgeIcon {
59+
fill: var(--badgeIconColor);
60+
}
61+
62+
.badgeWrapper {
63+
display: flex;
64+
align-items: center;
65+
margin-right: 24px;
66+
}

‎redisinsight/ui/src/utils/recommendation/utils.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -170,10 +170,13 @@ const renderContentElement = (
170170
)
171171
case 'list':
172172
return (
173-
<ul data-testid={`list-${telemetryName}-${idx}`} key={`${telemetryName}-${idx}`}>
173+
<ul className={styles.list} data-testid={`list-${telemetryName}-${idx}`} key={`${telemetryName}-${idx}`}>
174174
{isArray(jsonValue) && jsonValue.map((listElement: IRecommendationContent[], idx) => (
175-
// eslint-disable-next-line react/no-array-index-key
176-
<li key={`list-item-${listElement[0]}-${idx}`}>
175+
<li
176+
className={cx(styles.listItem, { [styles.insights]: insights })}
177+
// eslint-disable-next-line react/no-array-index-key
178+
key={`list-item-${listElement[0]}-${idx}`}
179+
>
177180
{renderRecommendationContent(listElement, params, telemetryName, insights)}
178181
</li>
179182
))}

0 commit comments

Comments
 (0)