Rollback scrollbar to native Safari

General settings layout

src/components/chat/selection.ts

@@ -299,7 +299,7 @@ export default class ChatSelection {
         this.selectionCountEl.classList.add('selection-container-count');
 
         if(this.chat.type === 'scheduled') {
-          this.selectionSendNowBtn = Button('btn-primary btn-transparent selection-container-send', {icon: 'send2'});
+          this.selectionSendNowBtn = Button('btn-primary btn-transparent btn-short text-bold selection-container-send', {icon: 'send2'});
           this.selectionSendNowBtn.append('Send Now');
           this.listenerSetter.add(this.selectionSendNowBtn, 'click', () => {
             new PopupSendNow(this.bubbles.peerId, [...this.selectedMids], () => {
@@ -307,7 +307,7 @@ export default class ChatSelection {
             })
           });
         } else {
-          this.selectionForwardBtn = Button('btn-primary btn-transparent selection-container-forward', {icon: 'forward'});
+          this.selectionForwardBtn = Button('btn-primary btn-transparent text-bold selection-container-forward', {icon: 'forward'});
           this.selectionForwardBtn.append('Forward');
           this.listenerSetter.add(this.selectionForwardBtn, 'click', () => {
             new PopupForward(this.bubbles.peerId, [...this.selectedMids], () => {
@@ -316,7 +316,7 @@ export default class ChatSelection {
           });
         }
 
-        this.selectionDeleteBtn = Button('btn-primary btn-transparent danger selection-container-delete', {icon: 'delete'});
+        this.selectionDeleteBtn = Button('btn-primary btn-transparent danger text-bold selection-container-delete', {icon: 'delete'});
         this.selectionDeleteBtn.append('Delete');
         this.listenerSetter.add(this.selectionDeleteBtn, 'click', () => {
           new PopupDeleteMessages(this.bubbles.peerId, [...this.selectedMids], this.chat.type, () => {

src/components/checkbox.ts

@@ -1,4 +1,7 @@
-const CheckboxField = (text: string, name: string, round = false) => {
+import appStateManager from "../lib/appManagers/appStateManager";
+import { getDeepProperty } from "../helpers/object";
+
+const CheckboxField = (text: string, name: string, round = false, stateKey?: string) => {
   const label = document.createElement('label');
   label.classList.add(round ? 'checkbox-field-round' : 'checkbox-field');
 
@@ -6,6 +9,16 @@ const CheckboxField = (text: string, name: string, round = false) => {
   input.type = 'checkbox';
   input.id = 'input-' + name;
 
+  if(stateKey) {
+    appStateManager.getState().then(state => {
+      input.checked = getDeepProperty(state, stateKey);
+    });
+
+    input.addEventListener('change', () => {
+      appStateManager.setByKey(stateKey, input.checked);
+    });
+  }
+
   const span = document.createElement('span');
   span.classList.add('checkbox-caption');
   if(round) span.classList.add('tgico-check');

src/components/popups/createPoll.ts

@@ -296,7 +296,7 @@ export default class PopupCreatePoll extends PopupElement {
 
     const radioField = RadioField('', 'question');
     radioField.main.append(questionField.container);
-    radioField.main.addEventListener('click', cancelEvent);
+    questionField.input.addEventListener('click', cancelEvent);
     radioField.label.classList.add('hidden-widget');
     radioField.input.disabled = true;
     if(!this.quizCheckboxField.input.checked) {

src/components/radioField.ts

@@ -1,4 +1,7 @@
-const RadioField = (text: string, name: string) => {
+import appStateManager from "../lib/appManagers/appStateManager";
+import { getDeepProperty } from "../helpers/object";
+
+const RadioField = (text: string, name: string, value?: string, stateKey?: string) => {
   const label = document.createElement('label');
   label.classList.add('radio-field');
 
@@ -6,9 +9,36 @@ const RadioField = (text: string, name: string) => {
   input.type = 'radio';
   input.id = input.name = 'input-radio-' + name;
 
+  if(value) {
+    input.value = value;
+
+    if(stateKey) {
+      appStateManager.getState().then(state => {
+        input.checked = getDeepProperty(state, stateKey) === value;
+      });
+  
+      input.addEventListener('change', () => {
+        appStateManager.setByKey(stateKey, value);
+      });
+    }
+  }
+
   const main = document.createElement('div');
   main.classList.add('radio-field-main');
-  main.innerText = text;
+
+  if(text) {
+    main.innerHTML = text;
+    /* const caption = document.createElement('div');
+    caption.classList.add('radio-field-main-caption');
+    caption.innerHTML = text;
+
+    if(subtitle) {
+      label.classList.add('radio-field-with-subtitle');
+      caption.insertAdjacentHTML('beforeend', `<div class="radio-field-main-subtitle">${subtitle}</div>`);
+    }
+
+    main.append(caption); */
+  }
 
   label.append(input, main);
 

src/components/scrollable.ts

@@ -139,12 +139,12 @@ export default class Scrollable extends ScrollableBase {
   constructor(el: HTMLElement, logPrefix = '', public onScrollOffset = 300, withPaddingContainer?: boolean) {
     super(el, logPrefix);
 
-    if(withPaddingContainer) {
+    /* if(withPaddingContainer) {
       this.padding = document.createElement('div');
       this.padding.classList.add('scrollable-padding');
       Array.from(this.container.children).forEach(c => this.padding.append(c));
       this.container.append(this.padding);
-    }
+    } */
 
     this.container.classList.add('scrollable-y');
     this.setListeners();

src/components/sidebarLeft/tabs/generalSettings.ts

@@ -2,6 +2,9 @@ import { SliderSuperTab } from "../../slider"
 import { AppSidebarLeft } from "..";
 import RangeSelector from "../../rangeSelector";
 import { clamp } from "../../../helpers/number";
+import Button from "../../button";
+import CheckboxField from "../../checkbox";
+import RadioField from "../../radioField";
 
 export class RangeSettingSelector {
   public container: HTMLDivElement;
@@ -53,7 +56,7 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
 
       const hr = document.createElement('hr');
       const h2 = document.createElement('div');
-      h2.classList.add('sidebar-left-section-name');
+      h2.classList.add('sidebar-left-h2', 'sidebar-left-section-name');
       h2.innerHTML = name;
 
       const content = document.createElement('div');
@@ -71,14 +74,121 @@ export default class AppGeneralSettingsTab extends SliderSuperTab {
       const container = generateSection('Settings');
       
       const range = new RangeSettingSelector('Message Text Size', 1, 16, 12, 20);
+
+      const chatBackgroundButton = Button('btn-primary btn-transparent', {icon: 'photo', text: 'Chat Background'});
+
+      const animationsCheckboxField = CheckboxField('Enable Animations', 'animations', false, 'settings.animationsEnabled');
       
-      container.append(range.container);
+      container.append(range.container, chatBackgroundButton, animationsCheckboxField.label);
     }
 
-    generateSection('Keyboard');
+    {
-    generateSection('Auto-Download Media');
+      const container = generateSection('Keyboard');
-    generateSection('Auto-Play Media');
+
-    generateSection('Stickers');
+      class Row {
+        public container: HTMLElement;
+        public title: HTMLDivElement;
+        public subtitle: HTMLElement;
+
+        public checkboxField: ReturnType<typeof CheckboxField>;
+        public radioField: ReturnType<typeof RadioField>;
+
+        constructor(options: Partial<{
+          icon: string,
+          subtitle: string,
+          radioField: Row['radioField'],
+          checkboxField: Row['checkboxField'],
+          title: string,
+        }> = {}) {
+          this.container = document.createElement('div');
+          this.container.classList.add('row');
+
+          this.subtitle = document.createElement('div');
+          this.subtitle.classList.add('row-subtitle');
+          if(options.subtitle) {
+            this.subtitle.innerHTML = options.subtitle;
+          }
+
+          let havePadding = false;
+          if(options.radioField || options.checkboxField) {
+            havePadding = true;
+            if(options.radioField) {
+              this.radioField = options.radioField;
+              this.container.append(this.radioField.label);
+            }
+  
+            if(options.checkboxField) {
+              this.checkboxField = options.checkboxField;
+              this.container.append(this.checkboxField.label);
+            }
+          } else {
+            if(options.icon) {
+              havePadding = true;
+              this.container.classList.add('tgico-', options.icon);
+            }
+
+            if(options.title) {
+              this.title = document.createElement('div');
+              this.title.classList.add('row-title');
+              this.title.innerHTML = options.title;
+              this.container.append(this.title);
+            }
+          }
+
+          if(havePadding) {
+            this.container.classList.add('row-with-padding');
+          }
+
+          this.container.append(this.subtitle);
+        }
+
+
+      }
+
+      const form = document.createElement('form');
+
+      const enterRow = new Row({
+        radioField: RadioField('Send by Enter', 'send-shortcut', 'enter', 'settings.sendShortcut'),
+        subtitle: 'New line by Shift + Enter',
+      });
+
+      const ctrlEnterRow = new Row({
+        radioField: RadioField('Send by Ctrl + Enter', 'send-shortcut', 'ctrlEnter', 'settings.sendShortcut'),
+        subtitle: 'New line by Enter',
+      });
+      
+      form.append(enterRow.container, ctrlEnterRow.container);
+      container.append(form);
+    }
+
+    {
+      const container = generateSection('Auto-Download Media');
+
+      const contactsCheckboxField = CheckboxField('Contacts', 'contacts', false, 'settings.autoDownload.contacts');
+      const privateCheckboxField = CheckboxField('Private Chats', 'private', false, 'settings.autoDownload.private');
+      const groupsCheckboxField = CheckboxField('Group Chats', 'groups', false, 'settings.autoDownload.groups');
+      const channelsCheckboxField = CheckboxField('Channels', 'channels', false, 'settings.autoDownload.channels');
+
+      container.append(contactsCheckboxField.label, privateCheckboxField.label, groupsCheckboxField.label, channelsCheckboxField.label);
+    }
+
+    {
+      const container = generateSection('Auto-Play Media');
+
+      const gifsCheckboxField = CheckboxField('GIFs', 'gifs', false, 'settings.autoPlay.gifs');
+      const videosCheckboxField = CheckboxField('Videos', 'videos', false, 'settings.autoPlay.videos');
+
+      container.append(gifsCheckboxField.label, videosCheckboxField.label);
+    }
+    
+    {
+      const container = generateSection('Stickers');
+
+      const suggestCheckboxField = CheckboxField('Suggest Stickers by Emoji', 'suggest', false, 'settings.stickers.suggest');
+      const loopCheckboxField = CheckboxField('Loop Animated Stickers', 'loop', false, 'settings.stickers.loop');
+
+      container.append(suggestCheckboxField.label, loopCheckboxField.label);
+    }
   }
 
   onOpen() {

src/helpers/dom.ts

@@ -671,3 +671,13 @@ export async function getFilesFromEvent(e: ClipboardEvent | DragEvent, onlyTypes
   
   return files;
 }
+
+export function radiosHandleChange(inputs: HTMLInputElement[], onChange: (value: string) => void) {
+  inputs.forEach(input => {
+    input.addEventListener('change', () => {
+      if(input.checked) {
+        onChange(input.value);
+      }
+    });
+  });
+}

src/helpers/object.ts

@@ -93,4 +93,30 @@ export function safeReplaceArrayInObject<K>(key: K, wasObject: any, newObject: a
 
 export function isObject(object: any) {
   return typeof(object) === 'object' && object !== null;
+}
+
+export function getDeepProperty(object: any, key: string) {
+  const splitted = key.split('.');
+  let o: any = object;
+  splitted.forEach(key => {
+    // @ts-ignore
+    o = o[key];
+  });
+  
+  return o;
+}
+
+export function setDeepProperty(object: any, key: string, value: any) {
+  const splitted = key.split('.');
+  getDeepProperty(object, splitted.slice(0, -1).join('.'))[splitted.pop()] = value;
+}
+
+export function validateInitObject(initObject: any, currentObject: any) {
+  for(const i in initObject) {
+    if(typeof(currentObject[i]) !== typeof(initObject[i])) {
+      currentObject[i] = copy(initObject[i]);
+    } else if(isObject(initObject[i])) {
+      validateInitObject(initObject[i], currentObject[i]);
+    }
+  }
 }

src/lib/appManagers/appStateManager.ts

@@ -10,6 +10,7 @@ import type { AppChatsManager } from './appChatsManager';
 import type { AuthState } from '../../types';
 import type FiltersStorage from '../storages/filters';
 import type DialogsStorage from '../storages/dialogs';
+import { copy, setDeepProperty, isObject, validateInitObject } from '../../helpers/object';
 
 const REFRESH_EVERY = 24 * 60 * 60 * 1000; // 1 day
 const STATE_VERSION = App.version;
@@ -35,10 +36,28 @@ type State = Partial<{
   stickerSets: AppStickersManager['stickerSets'],
   version: typeof STATE_VERSION,
   authState: AuthState,
-  hiddenPinnedMessages: {[peerId: string]: number}
+  hiddenPinnedMessages: {[peerId: string]: number},
+  settings: {
+    sendShortcut: 'enter' | 'ctrlEnter',
+    animationsEnabled: boolean,
+    autoDownload: {
+      contacts: boolean
+      private: boolean
+      groups: boolean
+      channels: boolean
+    },
+    autoPlay: {
+      gifs: boolean,
+      videos: boolean
+    },
+    stickers: {
+      suggest: boolean,
+      loop: boolean
+    }
+  }
 }>;
 
-/* const STATE_INIT: State = {
+const STATE_INIT: State = {
   dialogs: [],
   allDialogsLoaded: {},
   chats: {},
@@ -48,22 +67,37 @@ type State = Partial<{
   updates: {},
   filters: {},
   maxSeenMsgId: 0,
-  stateCreatedTime: 0,
+  stateCreatedTime: Date.now(),
   recentEmoji: [],
   topPeers: [],
   recentSearch: [],
   stickerSets: {},
-  version: '',
+  version: STATE_VERSION,
-  authState: 
+  authState: {
-}; */
+    _: 'authStateSignIn'
-
+  },
-const ALL_KEYS = ['dialogs', 'allDialogsLoaded', 'chats', 
+  hiddenPinnedMessages: {},
-  'users', 'messages', 'contactsList', 
+  settings: {
-  'updates', 'filters', 'maxSeenMsgId', 
+    sendShortcut: 'enter',
-  'stateCreatedTime', 'recentEmoji', 'topPeers', 
+    animationsEnabled: true,
-  'recentSearch', 'stickerSets', 'version', 
+    autoDownload: {
-  'authState', 'hiddenPinnedMessages'
+      contacts: true,
-] as any as Array<keyof State>;
+      private: true,
+      groups: true,
+      channels: true
+    },
+    autoPlay: {
+      gifs: true,
+      videos: true
+    },
+    stickers: {
+      suggest: true,
+      loop: true
+    }
+  }
+};
+
+const ALL_KEYS = Object.keys(STATE_INIT) as any as Array<keyof State>;
 
 const REFRESH_KEYS = ['dialogs', 'allDialogsLoaded', 'messages', 'contactsList', 'stateCreatedTime',
   'updates', 'maxSeenMsgId', 'filters', 'topPeers'] as any as Array<keyof State>;
@@ -96,32 +130,29 @@ export class AppStateManager extends EventListenerBase<{
           if(value !== false) {
             // @ts-ignore
             state[key] = value;
+          } else {
+            // @ts-ignore
+            state[key] = copy(STATE_INIT[key]);
           }
         });
 
         const time = Date.now();
         if(state) {
-          if(state.version != STATE_VERSION) {
+          if(state.version !== STATE_VERSION) {
-            state = {};
+            state = copy(STATE_INIT);
-          } else if(((state.stateCreatedTime || 0) + REFRESH_EVERY) < time/*  && false */) {
+          } else if((state.stateCreatedTime + REFRESH_EVERY) < time/*  && false */) {
             this.log('will refresh state', state.stateCreatedTime, time);
             REFRESH_KEYS.forEach(key => {
-              delete state[key];
+              // @ts-ignore
+              state[key] = copy(STATE_INIT[key]);
             });
-            //state = {};
           }
         }
 
-        this.state = state || {};
+        validateInitObject(STATE_INIT, state);
-        this.state.chats = state.chats || {};
+
-        this.state.users = state.users || {};
+        this.state = state;
-        this.state.hiddenPinnedMessages = this.state.hiddenPinnedMessages || {};
         this.state.version = STATE_VERSION;
-        
-        // ??= doesn't compiles
-        if(!this.state.hasOwnProperty('stateCreatedTime')) {
-          this.state.stateCreatedTime = Date.now();
-        }
 
         this.log('state res', state);
         
@@ -132,8 +163,6 @@ export class AppStateManager extends EventListenerBase<{
           // ! Warning ! DON'T delete this
           this.state.authState = {_: 'authStateSignedIn'};
           rootScope.broadcast('user_auth', typeof(auth) !== 'number' ? (auth as any).id : auth); // * support old version
-        } else if(!this.state.authState) {
-          this.state.authState = {_: 'authStateSignIn'};
         }
         
         //console.timeEnd('load state');
@@ -175,6 +204,10 @@ export class AppStateManager extends EventListenerBase<{
     //this.log('saveState: storage set time:', performance.now() - perf);
   }
 
+  public setByKey(key: string, value: any) {
+    setDeepProperty(this.state, key, value);
+  }
+
   public pushToState<T extends keyof State>(key: T, value: State[T]) {
     this.state[key] = value;
   }

src/scss/components/_global.scss

@@ -126,6 +126,10 @@ Utility Classes
   transform: translate(-50%, -50%);
 }
 
+.text-bold {
+  font-weight: 500 !important;
+}
+
 /* .flex-grow {
   flex-grow: 1;
 }

src/scss/partials/_button.scss

@@ -244,6 +244,7 @@
   padding: 0 .875rem;
   //width: auto;
   text-transform: capitalize;
+  font-weight: normal;
 
   html.no-touch &:hover {
     background-color:	var(--color-gray-hover);
@@ -253,6 +254,10 @@
   &:before {
     color: #707579;
     font-size: 1.5rem;
+    margin-right: 2rem;
+  }
+
+  &.btn-short:before {
     margin-right: 1rem;
   }
 }

src/scss/partials/_chat.scss

@@ -937,9 +937,9 @@ $chat-helper-size: 39px;
 			flex-direction: column;
 			justify-content: flex-end; */
 			// * scrollbar takes some width, don't need to set padding for iOS
-			html.is-safari:not(.is-ios) & {
+			/* html.is-safari:not(.is-ios) & {
 				padding-left: 6px;
-			}
+			} */
 		}
 	//}
 

src/scss/partials/_chatlist.scss

@@ -76,9 +76,9 @@
     margin: 0 8px;
     overflow: hidden;
 
-    html.is-safari & {
+    /* html.is-safari & {
       margin-right: 3px;
-    }
+    } */
 
     @include respond-to(handhelds) {
       padding: 9px 12px 0 9px !important;

src/scss/partials/_checkbox.scss

@@ -5,6 +5,7 @@
   padding: 0 1.125rem;
   /* font-weight: 500; */
   position: relative;
+  cursor: pointer;
 
   @include respond-to(handhelds) {
     margin-bottom: 27px;
@@ -54,13 +55,13 @@
 }
 
 .radio-field {
-  display: block;
 	position: relative;
-	padding-left: 3.5rem;
 	text-align: left;
 	margin: 1.25rem 0;
 	line-height: 1.5rem;
   cursor: pointer;
+  display: flex;
+  align-items: center;
   
   &.hidden-widget {
     cursor: default;
@@ -86,12 +87,16 @@
     }
   }
 
+  // ! can't use &-main here, check popup create poll
   .radio-field-main {
+    padding-left: 3.5rem;
+    position: relative;
+
     &::before, &::after {
       content: '';
       display: block;
       position: absolute;
-      left: .25rem;
+      left: 0;
       top: 50%;
       width: 1.25rem;
       height: 1.25rem;
@@ -107,7 +112,7 @@
     }
 
     &::after {
-      left: .5625rem;
+      left: .3125rem;
       width: .625rem;
       height: .625rem;
       border-radius: 50%;
@@ -116,18 +121,21 @@
       transition: opacity .1s ease;
     }
 
-    /* .label {
+    /* &-subtitle {
-      display: block;
+      color: #707579 !important;
-      word-break: break-word;
+      font-size: 14px !important;
-    }
-
-    .subLabel {
-      display: block;
-      font-size: 0.875rem;
-      line-height: 1rem;
-      color: var(--color-text-secondary);
     } */
   }
+
+  /* &-with-subtitle {
+    .radio-field-main {
+      margin-bottom: 1.5rem;
+
+      &-subtitle {
+        margin-bottom: -1.5rem;
+      }
+    }
+  } */
 }
 
 [type="checkbox"], [type="radio"] {

src/scss/partials/_ckin.scss

@@ -274,6 +274,7 @@ video::-webkit-media-controls-enclosure {
 .progress-line {
   --height: 5px;
   --border-radius: 6px;
+  border-radius: var(--border-radius);
   height: var(--height);
   position: relative;
   cursor: pointer;

src/scss/partials/_leftSidebar.scss

@@ -470,7 +470,7 @@
 }
 
 .new-group-members {
-  padding: 1.5rem 0 0.4375rem;
+  padding: 1.5rem 0 .4375rem;
 
   .search-group__name {
     text-transform: capitalize;
@@ -481,41 +481,25 @@
   .profile {
     &-button {
       display: flex;
-      padding: 1.125rem .625rem;
+      padding: 0 1rem;
-      height: 3.5rem;
-      line-height: 1.4;
-      border-radius: .625rem;
-      overflow: hidden;
       font-weight: normal;
       text-transform: unset;
+      margin: 0 0 2px 0;
 
       @include respond-to(handhelds) {
-        padding: .75rem .625rem;
         height: 48px;
-        margin: 0 0 2px 0;
         border-radius: 0;
       }
-
-      &:before {
-        font-size: 24px;
-        color: #707579;
-        margin-left: .375rem;
-        margin-right: 2rem;
-      }
-
-      p {
-        padding-left: 2rem;
-        user-select: none;
-      }
     }
 
     &-buttons {
-      margin-top: 1.125rem;
+      margin-top: 1.1875rem;
       width: 100%;
       padding: 0 .4375rem;
 
       @include respond-to(handhelds) {
         margin-top: 0.6875rem;
+        padding: 0;
       }
     }
   }
@@ -534,10 +518,8 @@
   }
 
   .sidebar-left-h2 {
-    color: #707579;
     padding: 0 1.438rem;
     padding-bottom: 1.5rem;
-    font-weight: 500;
   }
 
   hr {
@@ -568,12 +550,7 @@
   }
 
   .sidebar-left-h2 {
-    color: #707579;
-    font-size: 15px;
-    // padding-top: 7px;
-    // padding-bottom: 15px;
     padding: 7px 24px 15px 24px;
-    font-weight: 500;
 
     @include respond-to(handhelds) {
       padding: 7px 16px 15px 16px;
@@ -712,7 +689,6 @@
   display: flex;
   padding: 0 1.5rem;
   overflow: hidden;
-  font-weight: normal;
   height: 50px;
   border-radius: 0;
 
@@ -720,24 +696,8 @@
     padding: 0 1rem;
   }
 
-  p {
-    user-select: none;
-    margin-left: 32px;
-    font-size: 16px;
-    flex: 1 1 auto;
-  }
-
-  &.blue, &.blue:before {
-    color: #50a2e9;
-  }
-
-  &:first-child {
-    cursor: pointer;
-  }
-
   &:before {
     color: #797d82;
-    margin-right: 2rem;
   }
 }
 
@@ -773,9 +733,6 @@
 
 .included-chatlist-container {
   .sidebar-left-h2 {
-    color: #707579;
-    font-size: 15px;
-    font-weight: 500;
     padding: 6px 24px 8px 24px;
 
     @include respond-to(handhelds) {
@@ -880,28 +837,73 @@
   }
 }
 
-.sidebar-left-section {
+.sidebar-left {
-  padding: .5rem 0 1rem;
+  &-section {
+    padding: .5rem 0 1rem;
+  
+    &-content {
+      margin: 0 0.125rem;
+
+      @include respond-to(not-handhelds) {
+        margin: 0 .625rem;
+      }
+    }
+  
+    &-name {
+      padding: 1rem .875rem;
+    }
+
+    .btn-primary, .checkbox-field, .radio-field {
+      margin: 0;
+    }
+
+    &:first-child {
+      padding-top: 0;
+    }
 
-  &-content {
+    .tgico-photo:before {
-    padding: 0 1.5rem;
+      margin-left: -2px;
+      margin-right: 2.125rem;
+    }
 
-    @include respond-to(handhelds) {
+    .checkbox-field {
-      padding: 0 1rem;
+      display: flex;
+      align-items: center;
+      height: 54px;
+    }
+
+    .checkbox-field {
+      padding: 0 .875rem;
+    }
+
+    .radio-field {
+      &-main {
+      }
     }
   }
 
-  &-name {
+  &-h2 {
     color: #707579;
-    font-size: 15px;
+    font-size: 16px;
     font-weight: 500;
   }
 }
 
+.general-settings-container {
+  user-select: none;
+}
+
 .range-setting-selector {
+  padding: 1rem .875rem;
+
   &-details {
     display: flex;
     justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  &-value {
+    color: #707579;
   }
 
   .progress-line {

src/scss/partials/_scrollable.scss

@@ -1,20 +1,45 @@
-.scrollable::-webkit-scrollbar {
+html:not(.is-safari):not(.is-ios) {
-  width: 0;
+  .scrollable::-webkit-scrollbar {
-  height: 0;
+    width: 0;
-}
+    height: 0;
-
+    opacity: 0; // for safari
-.scrollable::-webkit-scrollbar-thumb {
+    width: .375rem;
-  width: 0;
+  }
-  height: 0;
+  
+  .scrollable::-webkit-scrollbar-thumb {
+    width: 0;
+    height: 0;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    opacity: 0;
+    transition: .2s ease-in-out;
+  }
+  
+  ::-webkit-scrollbar-button {
+    width: 0;
+    height: 0;
+    display: none;
+  }
+  
+  ::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+  
+  .scrollable:hover::-webkit-scrollbar {
+    opacity: 1; // for safari
+  }
+  
+  .scrollable:hover::-webkit-scrollbar-thumb {
+    height: 200px;
+    border-radius: $border-radius-medium;
+    background-color: rgba(0, 0, 0, .2);
+    opacity: 1;
+  }
 }
 
-::-webkit-scrollbar-button {
+.scrollable-x::-webkit-scrollbar {
-  width: 0;
+  display: none; // for safari iOS
-  height: 0;
-  display: none;
-}
-::-webkit-scrollbar-corner {
-  background-color: transparent;
 }
 
 .scrollable {
@@ -23,11 +48,7 @@
   overflow-y: hidden;
   overflow-x: hidden;
   max-height: 100%;
-  //position: relative;
   transform: translateZ(0);
-  //will-change: transform;
-  /* transform: translateZ(0);
-  -webkit-transform: translateZ(0); */
 
   //@include respond-to(not-handhelds) {
     position: absolute;
@@ -37,8 +58,6 @@
     right: 0px;
   //}
 
-  /* display: flex;
-  flex-direction: column; */
   -webkit-overflow-scrolling: touch;
 
   &.scrollable-x {
@@ -63,104 +82,7 @@
     height: 100%;
   }
 
-  html.is-safari &-padding {
+  /* html.is-safari &-padding {
     margin-right: -6px;
-  }
-
-  /* &-sentinel {
-    position: relative;
-    left: 0;
-    height: 1px;
-    min-height: 1px;
-    background-color: transparent;
-    width: 1px;
-    min-width: 1px;
-  } */
-
-  /* &.scrollable-x ~ .scrollbar-thumb {
-    top: auto;
-    right: auto;
-    width: auto;
-    height: 4px;
-    bottom: 0px;
-  }
-
-  .scroll-padding {
-    flex: 0 0 auto;
-
-    &:first-child + * {
-      flex: 1 1 auto;
-    }
   } */
-}
-
-/* .scrollbar-thumb {
-  position: absolute;
-  top: 0;
-  right: 2px;
-  width: 4px;
-  //margin-left: 2px;
-  background-color: #000;
-  //cursor: grab;
-  cursor: default;
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: .2s;
-  transition-timing-function: ease-in-out;
-
-  display: none;
-
-  border-radius: $border-radius;
-  z-index: 2;
-}
-
-:hover > .scrollbar-thumb {
-  opacity: .4;
-} */
-
-
-
-
-
-
-
-// BROWSER SCROLL
-.scrollable-y::-webkit-scrollbar {
-  width: .375rem;
-  opacity: 0; // for safari
-  //height: 200px;
-}
-
-.scrollable:hover::-webkit-scrollbar {
-  opacity: 1; // for safari
-}
-
-/* div.scrollable-y::-webkit-scrollbar-thumb {
-  border: 2px solid rgba(0, 0, 0, 0);
-  background-clip: padding-box;
-} */
-
-::-webkit-scrollbar-thumb {
-  opacity: 0;
-  transition: .2s ease-in-out;
-}
-
-.scrollable:hover::-webkit-scrollbar-thumb {
-  height: 200px;
-  border-radius: $border-radius-medium;
-  background-color: rgba(0, 0, 0, 0.2);
-  opacity: 1;
-}
-
-::-webkit-scrollbar-button {
-  width: 0;
-  height: 0;
-  display: none;
-}
-::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-
-.scrollable-x::-webkit-scrollbar {
-  display: none; // for safari iOS
 }

src/scss/partials/popups/_createPoll.scss

@@ -11,6 +11,16 @@
 
   .radio-field {
     margin: 0;
+
+    .radio-field-main {
+      &::before {
+        left: .25rem;
+      }
+
+      &::after {
+        left: .5625rem;
+      }
+    }
   }
 
   .hidden-widget, .radio-field:first-child:last-child {
@@ -20,8 +30,13 @@
     }
   }
 
-  .input-field {
+  .poll-create-questions > label {
     margin-top: 25px;
+  }
+
+  .input-field {
+    margin-top: 0;
+
     .btn-icon {
       position: absolute;
       right: .5rem;
@@ -56,7 +71,7 @@
   }
 
   hr {
-    border-bottom: 1px solid #edeff1;
+    border-top: 1px solid #edeff1;
   }
 
   .subtitle {

src/scss/style.scss

@@ -366,6 +366,10 @@ input, textarea {
   color: $color-error!important;
 }
 
+.blue, .blue:before {
+  color: $color-blue!important;
+}
+
 .bg-warning {
   background: #fed85a;
 }
@@ -451,8 +455,9 @@ input, textarea {
 hr {
   width: 100%;
   border: none;
-  border-bottom: 1px solid #DADCE0;
+  border-top: 1px solid #DADCE0;
-  margin: 0 0 8px;
+  margin: 0;
+  padding-bottom: .5rem;
 }
 
 .user-title, b/* , .user-last-message b */ {
@@ -1103,3 +1108,22 @@ middle-ellipsis-element {
     background-color: #c5c9cc;
   }
 }
+
+.row {
+  padding-left: 4.375rem;
+  min-height: 3.375rem;
+  margin-top: 1rem;
+
+  .radio-field {
+    &-main {
+      padding-left: 3.375rem;
+      margin-left: -3.375rem;
+    }
+  }
+
+  &-subtitle {
+    color: #707579 !important;
+    font-size: 14px !important;
+    line-height: 1.6;
+  }
+}