Various style fixes (#4977)

src/components/left/search/LeftSearch.scss

@@ -249,6 +249,11 @@
     > .PickerSelectedItem {
       flex-shrink: 0;
     }
+
+    &::after {
+      content: "";
+      flex-grow: 1;
+    }
   }
 
   .NothingFound {

src/components/middle/message/Poll.scss

@@ -79,14 +79,10 @@
     .Checkbox-main {
       &::after {
         left: 0.125rem;
-        background-color: var(--color-primary);
+        background-color: var(--accent-color);
 
-        .Message.own & {
+        .theme-dark & {
-          background-color: var(--accent-color);
+          background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiM3NjZhYzgiLz48L3N2Zz4=);
-
-          .theme-dark & {
-            background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEzLjkuOEw1LjggOC45IDIuMSA1LjJjLS40LS40LTEuMS0uNC0xLjYgMC0uNC40LS40IDEuMSAwIDEuNkw1IDExLjJjLjQuNCAxLjEuNCAxLjYgMGw4LjktOC45Yy40LS40LjQtMS4xIDAtMS42LS41LS40LTEuMi0uNC0xLjYuMXoiIGZpbGw9IiM3NjZhYzgiLz48L3N2Zz4=);
-          }
         }
       }
     }

src/components/middle/message/Poll.tsx

@@ -298,6 +298,7 @@ const Poll: FC<OwnProps & StateProps> = ({
                 onChange={handleCheckboxChange}
                 disabled={message.isScheduled || isSubmitting}
                 loadingOptions={isSubmitting ? chosenOptions : undefined}
+                isRound
               />
             )
             : (

src/components/modals/stars/StarsBalanceModal.tsx

@@ -189,7 +189,6 @@ const StarsBalanceModal = ({
               </Transition>
             </div>
             <TabList
-              big
               activeTab={selectedTabIndex}
               tabs={TRANSACTION_TABS}
               onSwitchTab={setSelectedTabIndex}

src/components/right/Profile.tsx

@@ -709,7 +709,7 @@ const Profile: FC<OwnProps & StateProps> = ({
           >
             {renderContent()}
           </Transition>
-          <TabList big activeTab={renderingActiveTab} tabs={tabs} onSwitchTab={handleSwitchTab} />
+          <TabList activeTab={renderingActiveTab} tabs={tabs} onSwitchTab={handleSwitchTab} />
         </div>
       )}
 

src/components/right/statistics/BoostStatistics.tsx

@@ -323,7 +323,7 @@ const BoostStatistics = ({
                 >
                   {renderContent()}
                 </Transition>
-                <TabList big activeTab={renderingActiveTab} tabs={tabs} onSwitchTab={setActiveTab} />
+                <TabList activeTab={renderingActiveTab} tabs={tabs} onSwitchTab={setActiveTab} />
               </div>
             ) : (
               <div className={styles.section}>

src/components/ui/Checkbox.scss

@@ -12,6 +12,14 @@
     opacity: 0.5;
   }
 
+  &.round {
+    .Checkbox-main {
+      &::before, &::after {
+        border-radius: 50%;
+      }
+    }
+  }
+
   &.withIcon {
     padding-inline-start: 1rem;
     .Checkbox-main {

src/components/ui/Checkbox.tsx

@@ -38,6 +38,7 @@ type OwnProps = {
   isLoading?: boolean;
   withCheckedCallback?: boolean;
   onlyInput?: boolean;
+  isRound?: boolean;
   className?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>, nestedOptionList?: IRadioOption) => void;
   onCheck?: (isChecked: boolean) => void;
@@ -66,14 +67,15 @@ const Checkbox: FC<OwnProps> = ({
   className,
   rightIcon,
   onlyInput,
-  onChange,
+  isRound,
-  onCheck,
-  onClickLabel,
   nestedCheckbox,
   nestedCheckboxCount,
   nestedOptionList,
   leftElement,
   values = [],
+  onChange,
+  onCheck,
+  onClickLabel,
 }) => {
   const lang = useOldLang();
   // eslint-disable-next-line no-null/no-null
@@ -119,6 +121,7 @@ const Checkbox: FC<OwnProps> = ({
     permissionGroup && 'permission-group',
     Boolean(leftElement) && 'avatar',
     onlyInput && 'onlyInput',
+    isRound && 'round',
     className,
   );
 

src/components/ui/CheckboxGroup.tsx

@@ -24,6 +24,7 @@ type OwnProps = {
   disabled?: boolean;
   nestedCheckbox?: boolean;
   loadingOptions?: string[];
+  isRound?: boolean;
   onChange: (value: string[]) => void;
 };
 
@@ -34,6 +35,7 @@ const CheckboxGroup: FC<OwnProps> = ({
   disabled,
   nestedCheckbox,
   loadingOptions,
+  isRound,
   onChange,
 }) => {
   const [values, setValues] = useState<string[]>(selected || []);
@@ -93,6 +95,7 @@ const CheckboxGroup: FC<OwnProps> = ({
             nestedCheckboxCount={getCheckedNestedCount(option.nestedOptions ?? [])}
             nestedOptionList={option}
             values={values}
+            isRound={isRound}
           />
         );
       })}

src/components/ui/TabList.scss

@@ -18,10 +18,6 @@
   scrollbar-width: none;
   scrollbar-color: rgba(0, 0, 0, 0);
 
-  &.big {
-    font-size: 1rem;
-  }
-
   &::-webkit-scrollbar {
     height: 0;
   }

src/components/ui/TabList.tsx

@@ -29,7 +29,6 @@ type OwnProps = {
   tabs: readonly TabWithProperties[];
   areFolders?: boolean;
   activeTab: number;
-  big?: boolean;
   className?: string;
   onSwitchTab: (index: number) => void;
   contextRootElementSelector?: string;
@@ -40,7 +39,7 @@ const TAB_SCROLL_THRESHOLD_PX = 16;
 const SCROLL_DURATION = IS_IOS ? 450 : IS_ANDROID ? 400 : 300;
 
 const TabList: FC<OwnProps> = ({
-  tabs, areFolders, activeTab, big, onSwitchTab,
+  tabs, areFolders, activeTab, onSwitchTab,
   contextRootElementSelector, className,
 }) => {
   // eslint-disable-next-line no-null/no-null
@@ -77,7 +76,7 @@ const TabList: FC<OwnProps> = ({
 
   return (
     <div
-      className={buildClassName('TabList', 'no-scrollbar', big && 'big', className)}
+      className={buildClassName('TabList', 'no-scrollbar', className)}
       ref={containerRef}
       dir={lang.isRtl ? 'rtl' : undefined}
     >