Privacy mockup

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');
       }
     }
 

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();

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

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);
     }
   }
 }

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;
+      transform: translateY(-50%) scale(0);
-      transition: opacity .1s ease;
+      transform-origin: center;
+      transition: transform .1s ease;
     }
 
     /* &-subtitle {

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
+  .sidebar-left-section { // * main tab verified with mockup
-    text-align: center;
+    &:first-child { // ! refactor is needed
-    max-width: 342px;
+      padding-top: 0;
-    margin-left: auto;
+    }
-    margin-right: auto;
+
-    font-size: 1rem;
+    &-caption {
-    line-height: 1.3125;
+      text-align: center;
-    margin-bottom: 1.125rem;
+      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;
 

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;
     }