Skip to content

Commit 4ddaceb

Browse files
AjaxyAjaxy
committed
Poll: Adjust styles (#5616)
1 parent 4b2bee8 commit 4ddaceb

File tree

8 files changed

+79
-50
lines changed

8 files changed

+79
-50
lines changed

‎src/components/middle/composer/PollModal.scss‎

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
}
88

99
.modal-content {
10-
padding: 0.5rem 1.25rem 1.875rem;
1110
min-height: 4.875rem;
1211
}
1312

@@ -19,7 +18,7 @@
1918
color: var(--color-text-secondary);
2019
font-size: 1rem;
2120
font-weight: var(--font-weight-medium);
22-
margin: 1.5rem 0.25rem;
21+
margin-top: 0.5rem;
2322
}
2423

2524
.options-list {
@@ -47,20 +46,24 @@
4746

4847
.option-remove-button {
4948
position: absolute;
50-
top: 0.3125rem;
49+
top: 0.125rem;
5150
right: 0.3125rem;
5251
}
5352
}
5453

5554
.quiz-mode {
5655
margin-top: 1.5rem;
5756

57+
.dialog-checkbox-group {
58+
margin: 0 -1.125rem;
59+
}
60+
5861
.options-header {
5962
margin-bottom: 0.5rem;
6063
}
6164

6265
.note {
63-
margin-top: 0.5rem;
66+
margin-top: -1rem;
6467
}
6568
}
6669

@@ -78,4 +81,24 @@
7881
.input-group:last-child {
7982
margin-bottom: 0.5rem;
8083
}
84+
85+
.radio-group {
86+
display: flex;
87+
flex-direction: column;
88+
gap: 0.8125rem;
89+
margin-left: -1.125rem;
90+
91+
.Radio, &:hover {
92+
background-color: transparent;
93+
}
94+
}
95+
96+
.Checkbox,
97+
.Radio {
98+
.Checkbox-main,
99+
.Radio-main {
100+
width: 100%;
101+
max-height: 3rem;
102+
}
103+
}
81104
}

‎src/components/middle/composer/PollModal.tsx‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,7 @@ const PollModal: FC<OwnProps> = ({
265265
return options.map((option, index) => (
266266
<div className="option-wrapper">
267267
<InputText
268+
maxLength={MAX_OPTION_LENGTH}
268269
label={index !== options.length - 1 || options.length === MAX_OPTIONS_COUNT
269270
? lang('OptionHint')
270271
: lang('CreatePoll.AddOption')}
@@ -336,28 +337,27 @@ const PollModal: FC<OwnProps> = ({
336337
<div className="options-divider" />
337338

338339
<div className="quiz-mode">
339-
{!shouldBeAnonymous && (
340+
<div className="dialog-checkbox-group">
341+
{!shouldBeAnonymous && (
342+
<Checkbox
343+
label={lang('PollAnonymous')}
344+
checked={isAnonymous}
345+
onChange={handleIsAnonymousChange}
346+
/>
347+
)}
340348
<Checkbox
341-
className="dialog-checkbox"
342-
label={lang('PollAnonymous')}
343-
checked={isAnonymous}
344-
onChange={handleIsAnonymousChange}
349+
label={lang('PollMultiple')}
350+
checked={isMultipleAnswers}
351+
disabled={isQuizMode}
352+
onChange={handleMultipleAnswersChange}
345353
/>
346-
)}
347-
<Checkbox
348-
className="dialog-checkbox"
349-
label={lang('PollMultiple')}
350-
checked={isMultipleAnswers}
351-
disabled={isQuizMode}
352-
onChange={handleMultipleAnswersChange}
353-
/>
354-
<Checkbox
355-
className="dialog-checkbox"
356-
label={lang('PollQuiz')}
357-
checked={isQuizMode}
358-
disabled={isMultipleAnswers || isQuiz !== undefined}
359-
onChange={handleQuizModeChange}
360-
/>
354+
<Checkbox
355+
label={lang('PollQuiz')}
356+
checked={isQuizMode}
357+
disabled={isMultipleAnswers || isQuiz !== undefined}
358+
onChange={handleQuizModeChange}
359+
/>
360+
</div>
361361
{isQuizMode && (
362362
<>
363363
<h3 className="options-header">{lang('lng_polls_solution_title')}</h3>

‎src/components/middle/message/Poll.scss‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,26 +27,15 @@
2727
}
2828

2929
.poll-voters-count {
30-
margin: 0.4375rem 0 1.125rem;
30+
margin: 0 0 1.125rem;
3131
text-align: center;
3232
}
3333

34-
.poll-answers {
35-
padding-top: 0.25rem;
36-
padding-bottom: 1rem;
37-
}
38-
3934
.Checkbox,
4035
.Radio {
36+
min-height: 2.5rem;
4137
padding-left: 2.25rem;
42-
43-
&:last-child {
44-
margin-bottom: 0.75rem;
45-
}
46-
47-
&:first-child {
48-
margin-top: 0;
49-
}
38+
padding-bottom: 1.25rem;
5039

5140
&.disabled {
5241
opacity: 1 !important;
@@ -59,13 +48,19 @@
5948

6049
.Checkbox-main,
6150
.Radio-main {
51+
.label {
52+
line-height: 1.3125rem;
53+
}
54+
6255
&::before {
56+
top: 0.6875rem;
6357
left: 0.125rem;
6458
background-color: var(--background-color);
6559
--color-borders-input: var(--secondary-color);
6660
}
6761

6862
&::after {
63+
top: 0.6875rem;
6964
left: 0.4375rem;
7065
background-color: var(--accent-color);
7166
}
@@ -79,11 +74,17 @@
7974
}
8075

8176
.Spinner {
77+
top: 0.6875rem;
8278
left: 0.125rem;
8379
}
8480
}
8581

8682
.Checkbox {
83+
&.loading {
84+
.Spinner {
85+
top: 0;
86+
}
87+
}
8788
.Checkbox-main {
8889
&::after {
8990
left: 0.125rem;
@@ -150,12 +151,6 @@
150151
}
151152
}
152153

153-
.poll-results,
154-
.poll-answers {
155-
padding-top: 0.25rem;
156-
padding-bottom: 0.5rem;
157-
}
158-
159154
.Button {
160155
text-transform: none;
161156
font-size: 1rem;
@@ -167,6 +162,6 @@
167162
}
168163

169164
> .Button {
170-
margin-bottom: 0.625rem;
165+
margin-bottom: 0.1875rem;
171166
}
172167
}

‎src/components/middle/message/Poll.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,10 @@ const Poll: FC<OwnProps> = ({
270270
)}
271271
</div>
272272
{canVote && (
273-
<div className="poll-answers" onClick={stopPropagation}>
273+
<div
274+
className="poll-answers"
275+
onClick={stopPropagation}
276+
>
274277
{isMultiple
275278
? (
276279
<CheckboxGroup

‎src/components/middle/message/PollOption.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.PollOption {
22
display: flex;
33
flex-flow: row nowrap;
4-
margin-bottom: 0.75rem;
4+
padding-bottom: 0.5rem;
55

66
&:last-child {
77
margin-bottom: 0;
@@ -59,7 +59,7 @@
5959

6060
.poll-option-right {
6161
flex-grow: 1;
62-
line-height: 1.5rem;
62+
line-height: 1.3125rem;
6363
}
6464

6565
.poll-option-answer {

‎src/components/middle/message/PollOption.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ import type { ApiPollAnswer, ApiPollResult } from '../../../api/types';
99
import buildClassName from '../../../util/buildClassName';
1010
import { renderTextWithEntities } from '../../common/helpers/renderTextWithEntities';
1111

12+
import useLang from '../../../hooks/useLang';
13+
1214
import Icon from '../../common/icons/Icon';
1315

1416
import './PollOption.scss';
@@ -30,6 +32,7 @@ const PollOption: FC<OwnProps> = ({
3032
correctResults,
3133
shouldAnimate,
3234
}) => {
35+
const lang = useLang();
3336
const result = voteResults && voteResults.find((r) => r.option === answer.option);
3437
const correctAnswer = correctResults.length === 0 || correctResults.indexOf(answer.option) !== -1;
3538
const showIcon = (correctResults.length > 0 && correctAnswer) || (result?.isChosen);
@@ -51,7 +54,7 @@ const PollOption: FC<OwnProps> = ({
5154
const lineStyle = `width: ${lineWidth}%; transform:scaleX(${isAnimationDoesNotStart ? 0 : 1})`;
5255

5356
return (
54-
<div className="PollOption" dir="ltr">
57+
<div className="PollOption" dir={lang.isRtl ? 'rtl' : undefined}>
5558
<div className={`poll-option-share ${answerPercent === '100' ? 'limit-width' : ''}`}>
5659
{answerPercent}%
5760
{showIcon && (

‎src/components/ui/Radio.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@
4848
visibility: hidden;
4949
}
5050
}
51+
52+
&:hover {
53+
background-color: transparent;
54+
}
5155
}
5256

5357
> input {
@@ -92,7 +96,7 @@
9296
word-break: break-word;
9397
unicode-bidi: plaintext;
9498
text-align: left;
95-
line-height: 1.25rem;
99+
line-height: 1.5rem;
96100
}
97101

98102
.subLabel {

‎src/components/ui/Radio.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ const Radio: FC<OwnProps> = ({
4848
onSubLabelClick,
4949
}) => {
5050
const lang = useOldLang();
51+
5152
const fullClassName = buildClassName(
5253
'Radio',
5354
className,

0 commit comments

Comments
 (0)