diff --git a/src/components/row.ts b/src/components/row.ts index 89e52c30..10361e3c 100644 --- a/src/components/row.ts +++ b/src/components/row.ts @@ -55,6 +55,7 @@ export default class Row { if(options.icon) { havePadding = true; this.title.classList.add('tgico', 'tgico-' + options.icon); + this.container.classList.add('row-with-icon'); } } diff --git a/src/components/sidebarLeft/index.ts b/src/components/sidebarLeft/index.ts index ef4d9fe7..b06671ce 100644 --- a/src/components/sidebarLeft/index.ts +++ b/src/components/sidebarLeft/index.ts @@ -419,6 +419,8 @@ export class SettingSection { if(!options.noDelimiter) { const hr = document.createElement('hr'); this.container.append(hr); + } else { + this.container.classList.add('no-delimiter'); } this.content = this.generateContentElement(); diff --git a/src/components/sidebarLeft/tabs/privacy/addToGroups.ts b/src/components/sidebarLeft/tabs/privacy/addToGroups.ts index e421fc55..ae89cc29 100644 --- a/src/components/sidebarLeft/tabs/privacy/addToGroups.ts +++ b/src/components/sidebarLeft/tabs/privacy/addToGroups.ts @@ -10,7 +10,7 @@ export default class AppPrivacyAddToGroupsTab extends SliderSuperTabEventable { new PrivacySection({ tab: this, title: 'Who can add me to group chats?', - inputKey: 'inputPrivacyKeyForwards', + inputKey: 'inputPrivacyKeyChatInvite', captions: [caption, caption, caption], exceptionTexts: ['Never Allow', 'Always Allow'], appendTo: this.scrollable diff --git a/src/components/sidebarLeft/tabs/privacyAndSecurity.ts b/src/components/sidebarLeft/tabs/privacyAndSecurity.ts index 4036ca8e..bbc68c82 100644 --- a/src/components/sidebarLeft/tabs/privacyAndSecurity.ts +++ b/src/components/sidebarLeft/tabs/privacyAndSecurity.ts @@ -80,6 +80,8 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTab { { const container = section('Privacy'); + container.classList.add('privacy-navigation-container'); + const rowsByKeys: Partial<{ [key in InputPrivacyKey['_']]: Row }> = {}; @@ -144,7 +146,7 @@ export default class AppPrivacyAndSecurityTab extends SliderSuperTab { }); } - container.append(numberVisibilityRow.container, lastSeenTimeRow.container, photoVisibilityRow.container, callRow.container, linkAccountRow.container, groupChatsAddRow.container); + container.append(numberVisibilityRow.container, lastSeenTimeRow.container, photoVisibilityRow.container,/* callRow.container, */linkAccountRow.container, groupChatsAddRow.container); } } } diff --git a/src/scss/partials/_checkbox.scss b/src/scss/partials/_checkbox.scss index 5ba17afb..00d0d5b4 100644 --- a/src/scss/partials/_checkbox.scss +++ b/src/scss/partials/_checkbox.scss @@ -113,7 +113,7 @@ position: relative; text-align: left; margin: 1.25rem 0; - line-height: 1.5rem; + line-height: 1.3125; // omg it centers the text cursor: pointer; &.hidden-widget { @@ -134,7 +134,7 @@ } &::after { - opacity: 1; + transform: translateY(-50%) scale(1); } } } @@ -161,7 +161,7 @@ } &::before { - border: 2px solid #8d969c; + border: 2px solid #707579; border-radius: 50%; background-color: white; opacity: 1; @@ -174,8 +174,9 @@ height: .625rem; border-radius: 50%; background: $button-primary-background; - opacity: 0; - transition: opacity .1s ease; + transform: translateY(-50%) scale(0); + transform-origin: center; + transition: transform .1s ease; } /* &-subtitle { diff --git a/src/scss/partials/_leftSidebar.scss b/src/scss/partials/_leftSidebar.scss index d3b14689..3b45eaca 100644 --- a/src/scss/partials/_leftSidebar.scss +++ b/src/scss/partials/_leftSidebar.scss @@ -865,7 +865,7 @@ margin: 0; } - &:first-child { + &:first-child:not(.no-delimiter) { padding-top: 0; } @@ -903,14 +903,20 @@ } .two-step-verification { - .sidebar-left-section-caption { // * main tab verified with mockup - text-align: center; - max-width: 342px; - margin-left: auto; - margin-right: auto; - font-size: 1rem; - line-height: 1.3125; - margin-bottom: 1.125rem; + .sidebar-left-section { // * main tab verified with mockup + &:first-child { // ! refactor is needed + padding-top: 0; + } + + &-caption { + text-align: center; + max-width: 342px; + margin-left: auto; + margin-right: auto; + font-size: 1rem; + line-height: 1.3125; + margin-bottom: 1.125rem; + } } &-main { @@ -970,6 +976,42 @@ } } +.privacy-container { + .sidebar-left-section:first-child { + padding-bottom: .1875rem; + } + + /* .privacy-navigation-container { + .sidebar-left-section-name + .row { + margin-top: -5px; // ! just to match mockup. + } + } */ +} + +.privacy-tab { + .sidebar-left-section-caption { // * Last Seen & Online verified with mockup + font-size: 1rem; + line-height: 1.3125; + } + + // * just to match mockup + .sidebar-left-section:first-child { + padding-bottom: 1.125rem; + } + + form { + padding: .0625rem 0 .125rem; + } + + form .row { + &:first-child { + margin-top: 0; + } + + margin-top: .125rem; + } +} + .range-setting-selector { padding: 1rem .875rem; diff --git a/src/scss/style.scss b/src/scss/style.scss index 39098800..f76d208b 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -1092,17 +1092,21 @@ middle-ellipsis-element { min-height: 3.375rem; margin-top: .5rem; position: relative; - padding: .5rem .75rem; + padding: .6875rem .875rem; display: flex; flex-direction: column; justify-content: center; + &-title { + line-height: 1.3125; + } + &-with-padding { padding-left: 4.375rem; .row-title.tgico:before { position: absolute; - left: .75rem; + left: .875rem; font-size: 1.5rem; color: #707579; }