Poll: Adjust styles (#5616)

src/components/middle/composer/PollModal.scss

@@ -7,7 +7,6 @@
   }
 
   .modal-content {
-    padding: 0.5rem 1.25rem 1.875rem;
     min-height: 4.875rem;
   }
 
@@ -19,7 +18,7 @@
     color: var(--color-text-secondary);
     font-size: 1rem;
     font-weight: var(--font-weight-medium);
-    margin: 1.5rem 0.25rem;
+    margin-top: 0.5rem;
   }
 
   .options-list {
@@ -47,7 +46,7 @@
 
     .option-remove-button {
       position: absolute;
-      top: 0.3125rem;
+      top: 0.125rem;
       right: 0.3125rem;
     }
   }
@@ -55,12 +54,16 @@
   .quiz-mode {
     margin-top: 1.5rem;
 
+    .dialog-checkbox-group {
+      margin: 0 -1.125rem;
+    }
+
     .options-header {
       margin-bottom: 0.5rem;
     }
 
     .note {
-      margin-top: 0.5rem;
+      margin-top: -1rem;
     }
   }
 
@@ -78,4 +81,24 @@
   .input-group:last-child {
     margin-bottom: 0.5rem;
   }
+
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8125rem;
+    margin-left: -1.125rem;
+
+    .Radio, &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .Checkbox,
+  .Radio {
+    .Checkbox-main,
+    .Radio-main {
+      width: 100%;
+      max-height: 3rem;
+    }
+  }
 }

src/components/middle/composer/PollModal.tsx

@@ -265,6 +265,7 @@ const PollModal: FC<OwnProps> = ({
     return options.map((option, index) => (
       <div className="option-wrapper">
         <InputText
+          maxLength={MAX_OPTION_LENGTH}
           label={index !== options.length - 1 || options.length === MAX_OPTIONS_COUNT
             ? lang('OptionHint')
             : lang('CreatePoll.AddOption')}
@@ -336,28 +337,27 @@ const PollModal: FC<OwnProps> = ({
       <div className="options-divider" />
 
       <div className="quiz-mode">
-        {!shouldBeAnonymous && (
+        <div className="dialog-checkbox-group">
+          {!shouldBeAnonymous && (
+            <Checkbox
+              label={lang('PollAnonymous')}
+              checked={isAnonymous}
+              onChange={handleIsAnonymousChange}
+            />
+          )}
           <Checkbox
-            className="dialog-checkbox"
+            label={lang('PollMultiple')}
-            label={lang('PollAnonymous')}
+            checked={isMultipleAnswers}
-            checked={isAnonymous}
+            disabled={isQuizMode}
-            onChange={handleIsAnonymousChange}
+            onChange={handleMultipleAnswersChange}
           />
-        )}
+          <Checkbox
-        <Checkbox
+            label={lang('PollQuiz')}
-          className="dialog-checkbox"
+            checked={isQuizMode}
-          label={lang('PollMultiple')}
+            disabled={isMultipleAnswers || isQuiz !== undefined}
-          checked={isMultipleAnswers}
+            onChange={handleQuizModeChange}
-          disabled={isQuizMode}
+          />
-          onChange={handleMultipleAnswersChange}
+        </div>
-        />
-        <Checkbox
-          className="dialog-checkbox"
-          label={lang('PollQuiz')}
-          checked={isQuizMode}
-          disabled={isMultipleAnswers || isQuiz !== undefined}
-          onChange={handleQuizModeChange}
-        />
         {isQuizMode && (
           <>
             <h3 className="options-header">{lang('lng_polls_solution_title')}</h3>

src/components/middle/message/Poll.scss

@@ -27,26 +27,15 @@
   }
 
   .poll-voters-count {
-    margin: 0.4375rem 0 1.125rem;
+    margin: 0 0 1.125rem;
     text-align: center;
   }
 
-  .poll-answers {
-    padding-top: 0.25rem;
-    padding-bottom: 1rem;
-  }
-
   .Checkbox,
   .Radio {
+    min-height: 2.5rem;
     padding-left: 2.25rem;
-
+    padding-bottom: 1.25rem;
-    &:last-child {
-      margin-bottom: 0.75rem;
-    }
-
-    &:first-child {
-      margin-top: 0;
-    }
 
     &.disabled {
       opacity: 1 !important;
@@ -59,13 +48,19 @@
 
     .Checkbox-main,
     .Radio-main {
+      .label {
+        line-height: 1.3125rem;
+      }
+
       &::before {
+        top: 0.6875rem;
         left: 0.125rem;
         background-color: var(--background-color);
         --color-borders-input: var(--secondary-color);
       }
 
       &::after {
+        top: 0.6875rem;
         left: 0.4375rem;
         background-color: var(--accent-color);
       }
@@ -79,11 +74,17 @@
     }
 
     .Spinner {
+      top: 0.6875rem;
       left: 0.125rem;
     }
   }
 
   .Checkbox {
+    &.loading {
+      .Spinner {
+        top: 0;
+      }
+    }
     .Checkbox-main {
       &::after {
         left: 0.125rem;
@@ -150,12 +151,6 @@
     }
   }
 
-  .poll-results,
-  .poll-answers {
-    padding-top: 0.25rem;
-    padding-bottom: 0.5rem;
-  }
-
   .Button {
     text-transform: none;
     font-size: 1rem;
@@ -167,6 +162,6 @@
   }
 
   > .Button {
-    margin-bottom: 0.625rem;
+    margin-bottom: 0.1875rem;
   }
 }

src/components/middle/message/Poll.tsx

@@ -270,7 +270,10 @@ const Poll: FC<OwnProps> = ({
         )}
       </div>
       {canVote && (
-        <div className="poll-answers" onClick={stopPropagation}>
+        <div
+          className="poll-answers"
+          onClick={stopPropagation}
+        >
           {isMultiple
             ? (
               <CheckboxGroup

src/components/middle/message/PollOption.scss

@@ -1,7 +1,7 @@
 .PollOption {
   display: flex;
   flex-flow: row nowrap;
-  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
 
   &:last-child {
     margin-bottom: 0;
@@ -59,7 +59,7 @@
 
   .poll-option-right {
     flex-grow: 1;
-    line-height: 1.5rem;
+    line-height: 1.3125rem;
   }
 
   .poll-option-answer {

src/components/middle/message/PollOption.tsx

@@ -9,6 +9,8 @@ import type { ApiPollAnswer, ApiPollResult } from '../../../api/types';
 import buildClassName from '../../../util/buildClassName';
 import { renderTextWithEntities } from '../../common/helpers/renderTextWithEntities';
 
+import useLang from '../../../hooks/useLang';
+
 import Icon from '../../common/icons/Icon';
 
 import './PollOption.scss';
@@ -30,6 +32,7 @@ const PollOption: FC<OwnProps> = ({
   correctResults,
   shouldAnimate,
 }) => {
+  const lang = useLang();
   const result = voteResults && voteResults.find((r) => r.option === answer.option);
   const correctAnswer = correctResults.length === 0 || correctResults.indexOf(answer.option) !== -1;
   const showIcon = (correctResults.length > 0 && correctAnswer) || (result?.isChosen);
@@ -51,7 +54,7 @@ const PollOption: FC<OwnProps> = ({
   const lineStyle = `width: ${lineWidth}%; transform:scaleX(${isAnimationDoesNotStart ? 0 : 1})`;
 
   return (
-    <div className="PollOption" dir="ltr">
+    <div className="PollOption" dir={lang.isRtl ? 'rtl' : undefined}>
       <div className={`poll-option-share ${answerPercent === '100' ? 'limit-width' : ''}`}>
         {answerPercent}%
         {showIcon && (

src/components/ui/Radio.scss

@@ -48,6 +48,10 @@
         visibility: hidden;
       }
     }
+
+    &:hover {
+      background-color: transparent;
+    }
   }
 
   > input {
@@ -92,7 +96,7 @@
       word-break: break-word;
       unicode-bidi: plaintext;
       text-align: left;
-      line-height: 1.25rem;
+      line-height: 1.5rem;
     }
 
     .subLabel {

src/components/ui/Radio.tsx

@@ -48,6 +48,7 @@ const Radio: FC<OwnProps> = ({
   onSubLabelClick,
 }) => {
   const lang = useOldLang();
+
   const fullClassName = buildClassName(
     'Radio',
     className,