Settings, Management: Redesign (#1789)

src/assets/devices/android.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#34C759"/><path d="M20.941 17.033a1.992 1.992 0 1 0-3.482 1.935l4.45 8.01c-5.316 3.503-9.348 9.034-11.197 15.932-.804 3-1.206 4.501-.288 6.186.205.376.597.887.907 1.182 1.39 1.322 3.277 1.322 7.053 1.322h35.232c3.776 0 5.663 0 7.053-1.322.31-.295.702-.806.907-1.182.918-1.685.516-3.185-.288-6.186-1.849-6.898-5.881-12.43-11.197-15.931l4.45-8.011a1.992 1.992 0 1 0-3.482-1.935L46.6 25.057C43.356 23.59 39.771 22.8 36 22.8c-3.77 0-7.357.79-10.601 2.257l-4.458-8.024ZM28.8 38.4a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Zm21.6 0a3.6 3.6 0 1 1-7.2 0 3.6 3.6 0 0 1 7.2 0Z" fill="#FFF"/></g></svg>

src/assets/devices/apple.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#007AFF"/><path d="M55.269 47.672a27.202 27.202 0 0 1-2.717 4.883c-1.423 2.038-2.59 3.439-3.482 4.224-1.4 1.274-2.887 1.932-4.479 1.974-1.146 0-2.526-.318-4.14-.997a11.862 11.862 0 0 0-4.457-.977c-1.577.029-3.134.36-4.586.977-1.634.658-2.95.997-3.97 1.04-1.528.064-3.056-.616-4.585-2.038-.976-.85-2.186-2.314-3.65-4.373a30.497 30.497 0 0 1-3.864-7.663c-1.083-3.142-1.635-6.178-1.635-9.129 0-3.375.722-6.283 2.187-8.724a13.007 13.007 0 0 1 4.585-4.65 12.264 12.264 0 0 1 6.198-1.761c1.21 0 2.824.382 4.798 1.125 1.974.743 3.248 1.125 3.8 1.125.424 0 1.826-.446 4.224-1.316 2.265-.807 4.175-1.147 5.732-1.02 4.246.34 7.43 2.017 9.553 5.032-3.8 2.292-5.668 5.52-5.626 9.637.043 3.227 1.21 5.902 3.503 8.025a12.081 12.081 0 0 0 3.481 2.292 24.727 24.727 0 0 1-.87 2.314ZM45.546 9.42c0 2.526-.912 4.882-2.76 7.048-2.207 2.59-4.903 4.076-7.79 3.842a6.773 6.773 0 0 1-.064-.955c0-2.42 1.062-5.01 2.93-7.133a10.941 10.941 0 0 1 3.566-2.675A10.614 10.614 0 0 1 45.504 8.4c.021.34.042.68.042 1.019Z" fill="#FFF"/></g></svg>

src/assets/devices/brave.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#FF9500"/><path d="M60 28.157s0 .125-.097.449c-.086.353-.273.689-.401.92-.09.16-.15.27-.13.3a76.2 76.2 0 0 0-.388.45l-.387.448-8.007 8.771c-.218.25-.29.698-.17.997l1.67 4.061c.12.3.145.823.024 1.122l-.46 1.27a6.105 6.105 0 0 1-1.886 2.742l-1.621 1.37c-.242.2-.678.274-.968.125l-5.152-2.517c-.29-.125-.726-.424-.968-.648l-3.677-3.414c-.532-.498-.58-1.37-.073-1.894l7.717-5.382a.716.716 0 0 0 .218-.872l-3.41-6.579c-.17-.274-.17-.772-.05-1.071l.412-.972c.12-.324.484-.648.774-.772l9.942-3.888c.315-.124.29-.249-.024-.274l-6.41-.623c-.315-.025-.823 0-1.137.1l-5.71 1.645c-.314.074-.507.423-.459.747l1.96 11.189c.072.323.048.797-.025 1.021-.072.224-.387.474-.701.548l-3.701.873a2.91 2.91 0 0 1-1.137 0l-3.967-.873c-.315-.074-.63-.299-.702-.548-.073-.249-.073-.698-.024-1.021l1.983-11.189a.682.682 0 0 0-.46-.747l-5.708-1.645a4.391 4.391 0 0 0-1.137-.1l-6.41.623c-.315.025-.315.15-.025.274l9.943 3.838c.29.124.653.473.774.772l.41.972c.122.3.098.773-.047 1.072l-3.387 6.578c-.145.3-.048.698.218.872l7.716 5.358c.484.548.46 1.395-.072 1.894l-3.677 3.413a5.219 5.219 0 0 1-.968.673L24.9 51.132c-.29.15-.726.075-.968-.125l-1.62-1.345A6.352 6.352 0 0 1 20.4 46.92l-.46-1.271c-.12-.324-.096-.822.025-1.121l1.67-4.062c.12-.3.048-.748-.17-.997L13.458 30.7a13.83 13.83 0 0 1-.774-.897s-.411-.549-.58-1.147c-.098-.348-.098-.448-.098-.448-.024-.324.025-.872.073-1.196l.242-.723c.145-.299.411-.772.58-1.046l2.734-4.162.059-.083c.193-.275.467-.663.642-.889l3.532-4.56c.194-.249.387-.448.412-.448h.048s.266.025.58.1l5.443 1.046c.158.025.363.068.569.112.205.044.411.087.568.112l.097.025c.314.05.822.025 1.137-.075l4.524-1.495c.29-.1.798-.249 1.112-.324 0 0 .92-.2 1.67-.2.75-.024 1.669.2 1.669.2.29.075.798.225 1.112.324l4.524 1.495c.314.1.822.125 1.137.075l.097-.025c.314-.05.822-.15 1.137-.224l5.394-1.097c.314-.05.58-.1.58-.1h.049c.024-.024.218.2.411.45l3.532 4.56c.218.274.532.697.701.971l2.734 4.162c.193.274.435.747.58 1.046l.242.723c.049.324.073.872.073 1.196Z" fill="#FFF"/><path d="M36.508 49.125c.097 0 .411.1.702.224l3.144 1.345c.29.125.774.35 1.065.499l4.74 2.492c.291.15.315.423.05.623l-4.186 3.065c-.266.199-.677.523-.919.747l-1.863 1.67c-.12.112-.278.255-.435.398-.157.144-.314.287-.435.4l-1.839 1.644a.648.648 0 0 1-.87 0l-1.79-1.645a75.564 75.564 0 0 0-.436-.399c-.157-.143-.315-.286-.436-.398l-1.862-1.645a13.532 13.532 0 0 0-.92-.747l-4.184-3.04c-.266-.2-.242-.474.048-.623l4.741-2.542c.29-.15.774-.374 1.065-.499l3.144-1.345c.29-.125.605-.224.702-.224h.774Z" fill="#FFF"/></g></svg>

src/assets/devices/chrome.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#34C759"/><path d="M36.925 59.983C49.75 59.497 60 48.945 60 36c0-3.11-.591-6.081-1.668-8.808H45.277A12.748 12.748 0 0 1 48.792 36c0 2.41-.667 4.665-1.825 6.59L36.925 59.982Zm-4.461-.242C20.885 58.031 12 48.053 12 36c0-4.043 1-7.853 2.766-11.195L24.8 42.187A12.789 12.789 0 0 0 36 48.792c1.029 0 2.03-.121 2.988-.35l-6.524 11.3ZM17.209 21.07l6.522 11.297c1.566-5.295 6.466-9.158 12.269-9.158h20.31C52.06 16.473 44.552 12 36 12c-7.61 0-14.394 3.543-18.791 9.069Zm11.163 19.335h-.001A8.804 8.804 0 0 0 36 44.809a8.803 8.803 0 0 0 7.551-4.27l.077-.134h.001a8.808 8.808 0 1 0-15.34-.143l.083.143Z" fill="#FFF"/></g></svg>

src/assets/devices/edge.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#007AFF"/><path d="M40.56 39.91a1.704 1.704 0 0 1-.143.149c-.197.188-.476.454-.476.912 0 .489.32.96.885 1.355 2.652 1.844 7.613 1.635 7.788 1.628h.004a11.167 11.167 0 0 0 5.676-1.566 11.508 11.508 0 0 0 5.705-9.914c.046-3.984-1.344-6.702-2.022-8.028l-.02-.04-.084-.165C53.9 16.47 45.324 12 35.998 12a23.999 23.999 0 0 0-23.997 23.627c.008-.502.052-.997.13-1.484-.073.518-.11 1.035-.11 1.546a24.402 24.402 0 0 0 2.27 10.5 23.998 23.998 0 0 0 29.32 12.582 14.33 14.33 0 0 1-1.663.415 18.36 18.36 0 0 0 1.64-.423l.246-.082a24.062 24.062 0 0 0 12.486-9.9.75.75 0 0 0-.997-1.057c-.64.335-1.3.63-1.976.883a19.1 19.1 0 0 1-6.731 1.211c-8.872 0-16.6-6.102-16.6-13.934a5.902 5.902 0 0 1 3.08-5.12l.065-.03.004-.003c.593-.28 1.567-.74 2.845-.717a6.065 6.065 0 0 1 4.816 2.437 5.977 5.977 0 0 1 1.193 3.497c.003.082.003.16.003.229 0 1.006-.513 2.499-1.462 3.733Z" fill="#FFF"/></g></svg>

src/assets/devices/firefox.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#FF9500"/><path d="M60.553 33.123a8.236 8.236 0 0 0-.143-.746s-.183.213-.487.615a17.498 17.498 0 0 0-.603-3.305 22.5 22.5 0 0 0-1.523-3.918c-.395-.833-.86-1.63-1.39-2.385a20.991 20.991 0 0 0-.584-.829c-.926-1.512-1.988-2.437-3.218-4.185a12.684 12.684 0 0 1-1.61-4.363 17.62 17.62 0 0 0-.774 2.855c-1.263-1.274-2.361-2.179-3.024-2.797-3.27-3.054-2.89-4.638-2.89-4.638s-6.11 6.82-3.463 13.923a13.648 13.648 0 0 0 4.55 6.065c2.56 2.113 5.318 3.775 6.772 8.022a13.612 13.612 0 0 0-5.109-5.39c.654 1.542.985 3.2.975 4.875a11.576 11.576 0 0 1-14.154 11.276 10.663 10.663 0 0 1-2.868-.975 11.67 11.67 0 0 1-3.436-3.176l-.016-.028.204.075c.478.166.967.296 1.463.392a9.143 9.143 0 0 0 5.822-.688c1.83-1.015 2.937-1.767 3.836-1.47h.016c.877.28 1.57-.572.942-1.462a4.777 4.777 0 0 0-4.627-1.807c-1.831.266-3.51 1.568-5.91.307a5.133 5.133 0 0 1-.45-.265c-.162-.093.515.141.358.036a11.92 11.92 0 0 1-1.508-.9c-.036-.03.362.113.325.084a5.819 5.819 0 0 1-1.573-1.59 2.829 2.829 0 0 1-.107-2.526c.223-.398.564-.718.975-.916.31.153.502.268.502.268l-.218-.396c.028-.01.052 0 .08-.018.271.117.872.422 1.189.609.216.12.402.286.544.488 0 0 .11-.054.028-.282a1.463 1.463 0 0 0-.562-.689h.026c.242.124.474.268.692.431.2-.46.294-.96.276-1.462a1.913 1.913 0 0 0-.112-.813c-.086-.162.049-.227.2-.057a1.587 1.587 0 0 0-.128-.386c0-.013.086-.125.125-.166.107-.107.225-.202.35-.286a16.21 16.21 0 0 1 2.381-1.214c.673-.294 1.23-.518 1.344-.583a3.74 3.74 0 0 0 .476-.366c.56-.476.938-1.13 1.072-1.852.015-.096.024-.192.028-.29v-.17c-.098-.365-.728-.64-4.023-.949a2.88 2.88 0 0 1-2.356-2.21v.015-.026a8.348 8.348 0 0 1 3.227-4.007c.084-.068-.338.018-.254-.052.28-.137.568-.258.861-.364.148-.061-.633-.36-1.324-.287a3.54 3.54 0 0 0-1.228.289c.162-.14.65-.325.534-.325a7.908 7.908 0 0 0-2.505.947.51.51 0 0 1 .049-.227 3.898 3.898 0 0 0-1.567 1.209 2.07 2.07 0 0 0 .016-.283c-.282.21-.54.453-.768.721a10.376 10.376 0 0 0-5.73-.476l-.015-.014a5.156 5.156 0 0 1-.997-1.138l-.026.007-.03-.036a9.084 9.084 0 0 1-.385-.629 8.924 8.924 0 0 1-.286-.549c0-.013-.015-.018-.022-.02-.039 0-.066.181-.099.134v-.01a7 7 0 0 1-.46-2.741l-.026.013c-.538.37-.945.9-1.16 1.518a6.618 6.618 0 0 1-.227.466v-.057c.015-.112.063-.343.052-.325l-.031.047a2.815 2.815 0 0 0-.408.605c-.099.199-.18.407-.244.62-.01.034 0-.029 0-.104 0-.074.015-.208 0-.18l-.035.07a15.435 15.435 0 0 0-1.3 4.931 4.91 4.91 0 0 0-.05.874v.026a10.775 10.775 0 0 0-1.328 1.788 25.356 25.356 0 0 0-2.806 6.873c.42-.922.924-1.803 1.503-2.634A24.37 24.37 0 0 0 10.47 38.5c.191-.895.435-1.78.731-2.646a22.435 22.435 0 0 0 2.028 10.503 24.433 24.433 0 0 0 9.67 10.964 21.148 21.148 0 0 0 5.634 2.7c.263.096.53.19.803.281-.086-.034-.163-.071-.249-.108A25.52 25.52 0 0 0 36.4 61.27c8.764 0 11.658-3.337 11.925-3.67a4.435 4.435 0 0 0 1.035-1.391c.169-.07.34-.144.512-.223l.108-.048.197-.093a18.41 18.41 0 0 0 3.7-2.317 8.936 8.936 0 0 0 3.45-5.037c.31-.74.327-1.57.046-2.32.09-.142.183-.294.278-.455a20.648 20.648 0 0 0 3.099-10.043v-.298a12.579 12.579 0 0 0-.197-2.252Z" fill="#FFF"/></g></svg>

src/assets/devices/linux.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#8E8E93"/><path d="M36 12c-13.255 0-24 10.745-24 24 0 1.705.178 3.37.516 4.974.147.697.8.529.684-.174 0-6.627 5.373-12 12-12a11.98 11.98 0 0 1 9.5 4.668c.613.792 1.987.792 2.6 0a11.98 11.98 0 0 1 9.5-4.668c6.627 0 12 5.373 12 12-.117.703.537.871.684.174A24.1 24.1 0 0 0 60 36c0-13.255-10.745-24-24-24ZM22.416 47.99c3.53-.992 9.268-2.39 13.584-2.39 4.316 0 10.055 1.398 13.584 2.39 1.086.306 1.151 1.818.125 2.285-3.389 1.543-8.768 4.306-11.967 7.541-.891.902-2.593.902-3.484 0-3.199-3.235-8.578-5.998-11.967-7.54-1.026-.468-.961-1.98.125-2.285ZM28.8 39.6a2.4 2.4 0 1 1-4.8 0 2.4 2.4 0 0 1 4.8 0ZM45.6 42a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8Z" fill="#FFF"/></g></svg>

src/assets/devices/opera.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#FF3B30"/><path d="M36 60c13.255 0 24-10.745 24-24S49.255 12 36 12 12 22.745 12 36s10.745 24 24 24Zm0-4.8c6.627 0 12-8.596 12-19.2s-5.373-19.2-12-19.2S24 25.396 24 36s5.373 19.2 12 19.2Z" fill="#FFF"/></g></svg>

src/assets/devices/safari.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#007AFF"/><path d="M60 36c0 13.255-10.745 24-24 24S12 49.255 12 36s10.745-24 24-24 24 10.745 24 24Zm-16.487 2.47c-.56 1.304-.839 1.956-1.246 2.51a6 6 0 0 1-1.286 1.287c-.555.407-1.207.687-2.51 1.246l-6.441 2.76c-3.444 1.476-5.165 2.213-6.231 1.873a3 3 0 0 1-1.945-1.945c-.34-1.066.397-2.787 1.873-6.23l2.76-6.441c.56-1.304.839-1.956 1.246-2.51a6 6 0 0 1 1.286-1.287c.555-.407 1.207-.687 2.51-1.246l6.441-2.76c3.444-1.476 5.165-2.213 6.231-1.873a3 3 0 0 1 1.945 1.945c.34 1.066-.397 2.787-1.873 6.23l-2.76 6.441ZM36 39a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" fill="#FFF"/></g></svg>

src/assets/devices/samsung.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#5856D6"/><path d="M59.44 43.248c-.958.543-2.172 1.006-3.624 1.361A21.528 21.528 0 0 0 57.6 36c0-1.079-.08-2.14-.232-3.176 1.737 1.433 2.992 2.842 3.756 4.142.86 1.463 1.02 2.642.77 3.573-.249.93-.977 1.87-2.453 2.709Zm-3.968-16.61a39.112 39.112 0 0 1 3.61 2.459c2.36 1.818 4.27 3.795 5.477 5.85 1.213 2.065 1.792 4.352 1.184 6.623-.609 2.27-2.254 3.961-4.336 5.143-2.074 1.176-4.715 1.933-7.668 2.328-5.915.792-13.488.184-21.36-1.926-7.873-2.109-14.735-5.369-19.462-9.012-2.36-1.818-4.269-3.795-5.476-5.85-1.213-2.065-1.792-4.352-1.184-6.622.609-2.271 2.254-3.962 4.336-5.143 2.074-1.177 4.715-1.934 7.668-2.33 1.867-.249 3.899-.36 6.053-.327A21.485 21.485 0 0 1 36 14.4a21.548 21.548 0 0 1 15.493 6.55 21.65 21.65 0 0 1 3.979 5.689Zm-35.936-4.62c-.253.027-.501.057-.747.09-2.643.353-4.745 1.002-6.23 1.845-1.476.837-2.204 1.779-2.454 2.709-.249.93-.089 2.11.771 3.573.74 1.259 1.94 2.62 3.594 4.007a21.506 21.506 0 0 1 5.066-12.225Zm30.351 30.527c-5.547.168-11.893-.617-18.346-2.346-5.826-1.561-11.191-3.745-15.652-6.303C19.042 51.92 26.857 57.6 36 57.6c5.288 0 10.132-1.9 13.887-5.055Z" fill="#FFF"/></g></svg>

src/assets/devices/ubuntu.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#FF9500"/><path d="M43.626 13.237a4.8 4.8 0 1 1 8.747 3.957 4.8 4.8 0 0 1-8.747-3.957ZM12.491 40.775a4.8 4.8 0 1 0-.983-9.55 4.8 4.8 0 0 0 .983 9.55Zm39.098 12.82a4.802 4.802 0 0 0-7.746 5.59 4.8 4.8 0 1 0 7.746-5.59ZM36 12c1.542 0 3.05.145 4.51.423a7.994 7.994 0 0 0 13.65 7.886 23.898 23.898 0 0 1 5.759 13.699h-9.656C49.293 26.998 43.277 21.6 36 21.6a14.36 14.36 0 0 0-5.408 1.05l-4.828-8.364A23.907 23.907 0 0 1 36 12ZM19.992 36a7.994 7.994 0 0 1-6.667 7.883 24.064 24.064 0 0 0 8.99 11.836l4.829-8.364A14.375 14.375 0 0 1 21.6 36c0-4.613 2.17-8.72 5.544-11.355l-4.829-8.364a24.064 24.064 0 0 0-8.99 11.836A7.994 7.994 0 0 1 19.992 36Zm24.012 13.863a7.994 7.994 0 0 1 10.156 1.828 23.898 23.898 0 0 0 5.759-13.699h-9.656C49.293 45.002 43.277 50.4 36 50.4a14.36 14.36 0 0 1-5.408-1.05l-4.828 8.364A23.907 23.907 0 0 0 36 60c1.542 0 3.05-.145 4.51-.423a7.994 7.994 0 0 1 3.494-9.714Z" fill="#FFF"/></g></svg>

src/assets/devices/unknown.svg

@@ -0,0 +1 @@
+<svg width="30" height="30" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 11.2c0-3.92 0-5.88.763-7.378A7 7 0 0 1 3.823.763C5.318 0 7.28 0 11.2 0h7.6c3.92 0 5.88 0 7.378.763a7 7 0 0 1 3.059 3.06C30 5.318 30 7.28 30 11.2v7.6c0 3.92 0 5.88-.763 7.378a7 7 0 0 1-3.06 3.059C24.682 30 22.72 30 18.8 30h-7.6c-3.92 0-5.88 0-7.378-.763a7 7 0 0 1-3.059-3.06C0 24.682 0 22.72 0 18.8v-7.6Z" fill="#FF9500"/><path d="M4.5 22A1.5 1.5 0 0 1 3 20.5a.5.5 0 0 1 .5-.5H5v-8.146c.001-.398.006-.75.03-1.049.033-.395.104-.789.297-1.167a3 3 0 0 1 1.311-1.311c.378-.193.772-.264 1.167-.296C8.18 8 8.635 8 9.161 8h11.82c.527 0 .982 0 1.357.03.395.033.788.104 1.166.297a3 3 0 0 1 1.312 1.311c.192.378.264.772.296 1.167.024.3.03.65.03 1.049V20h1.5a.5.5 0 0 1 .5.5 1.5 1.5 0 0 1-1.5 1.5Zm18.643-2-.001-8.196a11.338 11.338 0 0 0-.023-.836c-.023-.272-.06-.373-.085-.422a1 1 0 0 0-.437-.437c-.05-.025-.15-.063-.422-.085a11.338 11.338 0 0 0-.837-.024h-.395L15 10.024 9.2 10h-.396c-.361.002-.624.007-.836.024-.272.022-.373.06-.422.085a1 1 0 0 0-.437.437c-.025.05-.063.15-.085.422-.017.212-.022.475-.024.836V20h16.143Z" fill="#FFF"/></g></svg>

src/assets/devices/vivaldi.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#FF3B30"/><path d="M48.78 23.206c-1.837-3.68.115-7.794 4.114-8.676 3.253-.723 6.623 1.663 7.05 4.967.187 1.446-.095 2.77-.818 4.02-5.929 10.282-11.865 20.556-17.78 30.838-1.098 1.909-2.703 3.066-4.894 3.225-2.459.173-4.39-.854-5.626-2.986-3.752-6.443-7.461-12.907-11.185-19.364-2.263-3.926-4.54-7.852-6.797-11.785-2.277-3.97.29-8.792 4.86-9.03 2.407-.124 4.272.99 5.494 3.08 1.67 2.855 3.312 5.733 4.968 8.596 1.193 2.068 2.364 4.15 3.593 6.19 1.772 2.971 4.39 4.641 7.86 4.851 4.924.29 9.493-3.268 10.086-8.488.043-.39.072-.781.087-.984-.022-1.692-.34-3.116-1.012-4.454Z" fill="#FFF"/></g></svg>

src/assets/devices/windows.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#007AFF"/><path d="M14.662 15.71c-.262.514-.262 1.186-.262 2.53v11.52c0 1.344 0 2.016.262 2.53a2.4 2.4 0 0 0 1.048 1.048c.514.262 1.186.262 2.53.262h11.52c1.344 0 2.016 0 2.53-.262a2.4 2.4 0 0 0 1.048-1.048c.262-.514.262-1.186.262-2.53V18.24c0-1.344 0-2.016-.262-2.53a2.4 2.4 0 0 0-1.048-1.048c-.514-.262-1.186-.262-2.53-.262H18.24c-1.344 0-2.016 0-2.53.262a2.4 2.4 0 0 0-1.048 1.048Zm0 24c-.262.514-.262 1.186-.262 2.53v11.52c0 1.344 0 2.016.262 2.53a2.4 2.4 0 0 0 1.048 1.048c.514.262 1.186.262 2.53.262h11.52c1.344 0 2.016 0 2.53-.262a2.4 2.4 0 0 0 1.048-1.048c.262-.514.262-1.186.262-2.53V42.24c0-1.344 0-2.016-.262-2.53a2.4 2.4 0 0 0-1.048-1.048c-.514-.262-1.186-.262-2.53-.262H18.24c-1.344 0-2.016 0-2.53.262a2.4 2.4 0 0 0-1.048 1.048ZM38.4 42.24c0-1.344 0-2.016.262-2.53a2.4 2.4 0 0 1 1.048-1.048c.514-.262 1.186-.262 2.53-.262h11.52c1.344 0 2.016 0 2.53.262a2.4 2.4 0 0 1 1.048 1.048c.262.514.262 1.186.262 2.53v11.52c0 1.344 0 2.016-.262 2.53a2.4 2.4 0 0 1-1.048 1.048c-.514.262-1.186.262-2.53.262H42.24c-1.344 0-2.016 0-2.53-.262a2.4 2.4 0 0 1-1.048-1.048c-.262-.514-.262-1.186-.262-2.53V42.24Zm.262-26.53c-.262.514-.262 1.186-.262 2.53v11.52c0 1.344 0 2.016.262 2.53a2.4 2.4 0 0 0 1.048 1.048c.514.262 1.186.262 2.53.262h11.52c1.344 0 2.016 0 2.53-.262a2.4 2.4 0 0 0 1.048-1.048c.262-.514.262-1.186.262-2.53V18.24c0-1.344 0-2.016-.262-2.53a2.4 2.4 0 0 0-1.048-1.048c-.514-.262-1.186-.262-2.53-.262H42.24c-1.344 0-2.016 0-2.53.262a2.4 2.4 0 0 0-1.048 1.048Z" fill="#FFF"/></g></svg>

src/assets/devices/xbox.svg

@@ -0,0 +1 @@
+<svg width="72" height="72" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 26.88c0-9.409 0-14.113 1.831-17.707a16.8 16.8 0 0 1 7.342-7.342C12.767 0 17.471 0 26.88 0h18.24c9.409 0 14.113 0 17.707 1.831a16.8 16.8 0 0 1 7.342 7.342C72 12.767 72 17.471 72 26.88v18.24c0 9.409 0 14.113-1.831 17.707a16.8 16.8 0 0 1-7.342 7.342C59.233 72 54.529 72 45.12 72H26.88c-9.409 0-14.113 0-17.707-1.831a16.8 16.8 0 0 1-7.342-7.342C0 59.233 0 54.529 0 45.12V26.88Z" fill="#34C759"/><path d="M36 12c-4.848 0-8.857 1.315-12.508 3.527-.06 0-.061.06-.061.12 0 .059.06.06.12.06 4.669-1.016 11.73 2.988 12.389 3.406h.12c.659-.418 7.72-4.422 12.389-3.406.06 0 .119-.001.119-.06 0-.06 0-.12-.06-.12C44.858 13.315 40.848 12 36 12Zm16.051 6.738c-1.186.07-3.947.988-9.468 6.413l-.06.06s0 .06.06.06c4.848 5.738 14.185 19.427 12.39 25.105v.12c.06 0 .119 0 .119-.06A24.006 24.006 0 0 0 60 35.91a23.828 23.828 0 0 0-7.122-17.036c-.06-.06-.06-.06-.12-.06-.09-.03-.311-.1-.707-.076Zm-32.128.025c-.404-.016-.636.066-.741.111-.06 0-.06.06-.12.06a24.022 24.022 0 0 0-2.154 31.561c0 .06.06.06.12.06s.06-.06 0-.119c-1.856-5.679 7.54-19.367 12.388-25.106l.06-.06c0-.059 0-.06-.06-.06-5.521-5.47-8.281-6.4-9.493-6.447Zm16.076 12.485s-.06 0-.06.06c-7.181 5.44-19.51 18.948-15.739 22.774C24.39 57.788 29.955 60 36 60a23.905 23.905 0 0 0 15.8-5.918c3.71-3.826-8.558-17.335-15.74-22.774 0-.06-.06-.06-.06-.06Z" fill="#FFF"/></g></svg>

src/components/left/LeftColumn.tsx

@@ -117,6 +117,7 @@ const LeftColumn: FC<StateProps> = ({
         case SettingsScreens.Notifications:
         case SettingsScreens.DataStorage:
         case SettingsScreens.Privacy:
+        case SettingsScreens.ActiveSessions:
         case SettingsScreens.Language:
           setSettingsScreen(SettingsScreens.Main);
           return;
@@ -134,7 +135,6 @@ const LeftColumn: FC<StateProps> = ({
         case SettingsScreens.PrivacyProfilePhoto:
         case SettingsScreens.PrivacyForwarding:
         case SettingsScreens.PrivacyGroupChats:
-        case SettingsScreens.PrivacyActiveSessions:
         case SettingsScreens.PrivacyBlockedUsers:
         case SettingsScreens.TwoFaDisabled:
         case SettingsScreens.TwoFaEnabled:

src/components/left/main/LeftMainHeader.tsx

@@ -60,8 +60,6 @@ type StateProps =
   }
   & Pick<GlobalState, 'connectionState' | 'isSyncing'>;
 
-const ANIMATION_LEVEL_OPTIONS = [0, 1, 2];
-
 const PRODUCTION_HOSTNAME = 'web.telegram.org';
 const LEGACY_VERSION_URL = 'https://web.telegram.org/?legacy=1';
 const WEBK_VERSION_URL = 'https://web.telegram.org/k/';
@@ -171,17 +169,6 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
     switchTheme(newTheme, animationLevel === ANIMATION_LEVEL_MAX);
   }, [animationLevel, setSettingOption, theme]);
 
-  const handleAnimationLevelChange = useCallback((e: React.SyntheticEvent<HTMLElement>) => {
-    e.stopPropagation();
-
-    const newLevel = animationLevel === 0 ? 2 : 0;
-    ANIMATION_LEVEL_OPTIONS.forEach((_, i) => {
-      document.body.classList.toggle(`animation-level-${i}`, newLevel === i);
-    });
-
-    setSettingOption({ animationLevel: newLevel });
-  }, [animationLevel, setSettingOption]);
-
   const handleSwitchToWebK = useCallback(() => {
     setPermanentWebVersion('K');
     clearWebsync();
@@ -248,17 +235,6 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
               noAnimation
             />
           </MenuItem>
-          <MenuItem
-            icon="animations"
-            onClick={handleAnimationLevelChange}
-          >
-            <span className="menu-item-name capitalize">{lang('Appearance.Animations').toLowerCase()}</span>
-            <Switcher
-              id="animations"
-              label="Toggle Animations"
-              checked={animationLevel > 0}
-            />
-          </MenuItem>
           <MenuItem
             icon="help"
             onClick={handleOpenTipsChat}

src/components/left/settings/Settings.scss

@@ -33,12 +33,17 @@
 }
 
 .settings-content {
-  background: var(--color-background);
+  border-top: 1px solid var(--color-borders);
+  background-color: var(--color-background-secondary);
   height: calc(100% - var(--header-height));
 
   overflow-y: auto;
   @include overflow-y-overlay();
 
+  &.no-border, &.two-fa {
+    border-top: none;
+  }
+
   &.infinite-scroll {
     display: flex;
     flex-direction: column;
@@ -66,6 +71,14 @@
   align-items: center;
   padding: 0 1.5rem 1rem;
   text-align: center;
+  background-color: var(--color-background);
+  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
+  margin-bottom: 0.625rem;
+
+  &.no-border {
+    margin-bottom: 0;
+    box-shadow: none;
+  }
 
   .input-group {
     width: 100%;
@@ -93,6 +106,7 @@
 
 .settings-main-menu {
   padding: 0 0.5rem 0.75rem;
+  background-color: var(--color-background);
 
   > .ChatExtra {
     padding: 0 0.5rem 0.3125rem;
@@ -107,11 +121,14 @@
 }
 
 .settings-item {
-  border-top: 1px solid var(--color-borders);
+  background-color: var(--color-background);
   padding: 1.5rem 1.5rem 1rem;
+  box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
+  margin-bottom: 0.625rem;
 
   &.no-border {
-    border-top: none;
+    margin-bottom: 0;
+    box-shadow: none;
   }
 
   &-header {
@@ -139,6 +156,11 @@
       font-size: 1rem;
     }
 
+    .settings-edit-profile & {
+      margin-bottom: 0;
+      padding-bottom: 1.5rem;
+    }
+
     &[dir="rtl"] {
       text-align: right;
       unicode-bidi: plaintext;
@@ -282,6 +304,13 @@
   .Checkbox + .Checkbox {
     margin-top: 2rem;
   }
+
+  &__current-value {
+    margin-inline-start: auto;
+    padding-inline-start: 0.5rem;
+    font-size: 0.9375rem;
+    color: var(--color-text-secondary);
+  }
 }
 
 .settings-fab-wrapper {

src/components/left/settings/Settings.tsx

@@ -19,7 +19,7 @@ import SettingsNotifications from './SettingsNotifications';
 import SettingsPrivacy from './SettingsPrivacy';
 import SettingsLanguage from './SettingsLanguage';
 import SettingsPrivacyVisibility from './SettingsPrivacyVisibility';
-import SettingsPrivacyActiveSessions from './SettingsPrivacyActiveSessions';
+import SettingsActiveSessions from './SettingsActiveSessions';
 import SettingsPrivacyBlockedUsers from './SettingsPrivacyBlockedUsers';
 import SettingsTwoFa from './twoFa/SettingsTwoFa';
 import SettingsPrivacyVisibilityExceptionList from './SettingsPrivacyVisibilityExceptionList';
@@ -62,7 +62,7 @@ const FOLDERS_SCREENS = [
 
 const PRIVACY_SCREENS = [
   SettingsScreens.PrivacyBlockedUsers,
-  SettingsScreens.PrivacyActiveSessions,
+  SettingsScreens.ActiveSessions,
 ];
 
 const PRIVACY_PHONE_NUMBER_SCREENS = [
@@ -226,9 +226,9 @@ const Settings: FC<OwnProps> = ({
             onReset={handleReset}
           />
         );
-      case SettingsScreens.PrivacyActiveSessions:
+      case SettingsScreens.ActiveSessions:
         return (
-          <SettingsPrivacyActiveSessions
+          <SettingsActiveSessions
             onScreenSelect={onScreenSelect}
             isActive={isScreenActive}
             onReset={handleReset}

src/components/left/settings/SettingsActiveSessions.scss

@@ -0,0 +1,22 @@
+$icons: "android", "apple", "brave", "chrome", "edge", "firefox", "linux", "opera", "safari", "samsung", "ubuntu", "unknown", "vivaldi", "windows", "xbox";
+
+@mixin device-icon($icon-name) {
+  .icon-device-#{$icon-name} {
+    background-image: url("../../../assets/devices/#{$icon-name}.svg");
+  }
+}
+
+.SettingsActiveSessions {
+  .icon-device {
+    width: 2rem;
+    height:2rem;
+    background-repeat: no-repeat;
+    background-size: 2rem;
+    flex: 0 0 2rem;
+    margin-inline-end: 1.5rem !important;
+  }
+
+  @each $icon in $icons {
+    @include device-icon($icon);
+  }
+}

src/components/left/settings/SettingsActiveSessions.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, memo, useCallback, useEffect, useMemo,
+  FC, memo, useCallback, useMemo,
 } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
@@ -10,10 +10,13 @@ import { formatPastTimeShort } from '../../../util/dateFormat';
 import useFlag from '../../../hooks/useFlag';
 import useLang from '../../../hooks/useLang';
 import useHistoryBack from '../../../hooks/useHistoryBack';
+import getSessionIcon from './helpers/getSessionIcon';
 
 import ListItem from '../../ui/ListItem';
 import ConfirmDialog from '../../ui/ConfirmDialog';
 
+import './SettingsActiveSessions.scss';
+
 type OwnProps = {
   isActive?: boolean;
   onScreenSelect: (screen: SettingsScreens) => void;
@@ -24,22 +27,18 @@ type StateProps = {
   activeSessions: ApiSession[];
 };
 
-const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps> = ({
+const SettingsActiveSessions: FC<OwnProps & StateProps> = ({
   isActive,
   onScreenSelect,
   onReset,
   activeSessions,
 }) => {
   const {
-    loadAuthorizations,
     terminateAuthorization,
     terminateAllAuthorizations,
   } = getActions();
 
   const [isConfirmTerminateAllDialogOpen, openConfirmTerminateAllDialog, closeConfirmTerminateAllDialog] = useFlag();
-  useEffect(() => {
-    loadAuthorizations();
-  }, [loadAuthorizations]);
 
   const handleTerminateSessionClick = useCallback((hash: string) => {
     terminateAuthorization({ hash });
@@ -69,10 +68,12 @@ const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps> = ({
           {lang('AuthSessions.CurrentSession')}
         </h4>
 
-        <ListItem narrow inactive className="no-icon">
+        <ListItem narrow inactive icon={`device-${getSessionIcon(session)} icon-device`}>
           <div className="multiline-menu-item" dir="auto">
-            <span className="title" dir="auto">{session.appName}</span>
+            <span className="title" dir="auto">{session.deviceModel}</span>
-            <span className="subtitle black tight">{getDeviceEnvironment(session)}</span>
+            <span className="subtitle black tight">
+              {session.appName} {session.appVersion}, {session.platform} {session.systemVersion}
+            </span>
             <span className="subtitle">{session.ip} - {getLocation(session)}</span>
           </div>
         </ListItem>
@@ -115,20 +116,22 @@ const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps> = ({
             handleTerminateSessionClick(session.hash);
           },
         }]}
-        className="no-icon"
+        icon={`device-${getSessionIcon(session)} icon-device`}
       >
         <div className="multiline-menu-item full-size" dir="auto">
           <span className="date">{formatPastTimeShort(lang, session.dateActive * 1000)}</span>
-          <span className="title">{session.appName}</span>
+          <span className="title">{session.deviceModel}</span>
-          <span className="subtitle black tight">{getDeviceEnvironment(session)}</span>
+          <span className="subtitle black tight">
-          <span className="subtitle">{session.ip} - {getLocation(session)}</span>
+            {session.appName} {session.appVersion}, {session.platform} {session.systemVersion}
+          </span>
+          <span className="subtitle">{session.ip} {getLocation(session)}</span>
         </div>
       </ListItem>
     );
   }
 
   return (
-    <div className="settings-content custom-scroll">
+    <div className="settings-content custom-scroll SettingsActiveSessions">
       {currentSession && renderCurrentSession(currentSession)}
       {otherSessions && renderOtherSessions(otherSessions)}
       {otherSessions && (
@@ -149,14 +152,10 @@ function getLocation(session: ApiSession) {
   return [session.region, session.country].filter(Boolean).join(', ');
 }
 
-function getDeviceEnvironment(session: ApiSession) {
-  return `${session.deviceModel}${session.deviceModel ? ', ' : ''} ${session.platform} ${session.systemVersion}`;
-}
-
 export default memo(withGlobal<OwnProps>(
   (global): StateProps => {
     return {
       activeSessions: global.activeSessions,
     };
   },
-)(SettingsPrivacyActiveSessions));
+)(SettingsActiveSessions));

src/components/left/settings/SettingsEditProfile.tsx

@@ -178,8 +178,8 @@ const SettingsEditProfile: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="settings-fab-wrapper">
-      <div className="settings-content custom-scroll">
+      <div className="settings-content no-border custom-scroll">
-        <div className="settings-edit-profile">
+        <div className="settings-edit-profile settings-item">
           <AvatarEditable
             currentAvatarBlobUrl={currentAvatarBlobUrl}
             onChange={handlePhotoChange}

src/components/left/settings/SettingsGeneral.tsx

@@ -6,7 +6,9 @@ import { getActions, withGlobal } from '../../../global';
 import { SettingsScreens, ISettings, TimeFormat } from '../../../types';
 import { ApiSticker, ApiStickerSet } from '../../../api/types';
 
-import { IS_IOS, IS_MAC_OS, IS_TOUCH_ENV } from '../../../util/environment';
+import {
+  getSystemTheme, IS_IOS, IS_MAC_OS, IS_TOUCH_ENV,
+} from '../../../util/environment';
 import { pick } from '../../../util/iteratees';
 import { setTimeFormat } from '../../../util/langProvider';
 import useLang from '../../../hooks/useLang';
@@ -21,6 +23,8 @@ import RadioGroup, { IRadioOption } from '../../ui/RadioGroup';
 import SettingsStickerSet from './SettingsStickerSet';
 import StickerSetModal from '../../common/StickerSetModal.async';
 import ReactionStaticEmoji from '../../common/ReactionStaticEmoji';
+import switchTheme from '../../../util/switchTheme';
+import { ANIMATION_LEVEL_MAX } from '../../../config';
 
 type OwnProps = {
   isActive?: boolean;
@@ -40,6 +44,8 @@ type StateProps =
     stickerSetIds?: string[];
     stickerSetsById?: Record<string, ApiStickerSet>;
     defaultReaction?: string;
+    theme: ISettings['theme'];
+    shouldUseSystemTheme: boolean;
   };
 
 const ANIMATION_LEVEL_OPTIONS = [
@@ -69,6 +75,8 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
   shouldSuggestStickers,
   shouldLoopStickers,
   timeFormat,
+  theme,
+  shouldUseSystemTheme,
 }) => {
   const {
     setSettingOption,
@@ -82,6 +90,17 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
 
   const lang = useLang();
 
+  const APPEARANCE_THEME_OPTIONS: IRadioOption[] = [{
+    label: lang('EmptyChat.Appearance.Light'),
+    value: 'light',
+  }, {
+    label: lang('EmptyChat.Appearance.Dark'),
+    value: 'dark',
+  }, {
+    label: lang('EmptyChat.Appearance.System'),
+    value: 'auto',
+  }];
+
   const KEYBOARD_SEND_OPTIONS = !IS_TOUCH_ENV ? [
     { value: 'enter', label: lang('lng_settings_send_enter'), subLabel: 'New line by Shift + Enter' },
     {
@@ -110,6 +129,16 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
     setSettingOption({ messageTextSize: newSize });
   }, [setSettingOption]);
 
+  const handleAppearanceThemeChange = useCallback((value: string) => {
+    const newTheme = value === 'auto' ? getSystemTheme() : value as ISettings['theme'];
+
+    setSettingOption({ theme: newTheme });
+    setSettingOption({ shouldUseSystemTheme: value === 'auto' });
+    if (newTheme !== theme) {
+      switchTheme(newTheme, animationLevel === ANIMATION_LEVEL_MAX);
+    }
+  }, [animationLevel, setSettingOption, theme]);
+
   const handleTimeFormatChange = useCallback((newTimeFormat: string) => {
     setSettingOption({ timeFormat: newTimeFormat });
     setSettingOption({ wasTimeFormatSetManually: true });
@@ -162,6 +191,18 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
         </ListItem>
       </div>
 
+      <div className="settings-item">
+        <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
+          {lang('Theme')}
+        </h4>
+        <RadioGroup
+          name="theme"
+          options={APPEARANCE_THEME_OPTIONS}
+          selected={shouldUseSystemTheme ? 'auto' : theme}
+          onChange={handleAppearanceThemeChange}
+        />
+      </div>
+
       <div className="settings-item">
         <h4 className="settings-item-header" dir={lang.isRtl ? 'rtl' : undefined}>
           Time Format
@@ -251,6 +292,8 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
 
 export default memo(withGlobal<OwnProps>(
   (global): StateProps => {
+    const { theme, shouldUseSystemTheme } = global.settings.byKey;
+
     return {
       ...pick(global.settings.byKey, [
         'messageTextSize',
@@ -265,6 +308,8 @@ export default memo(withGlobal<OwnProps>(
       stickerSetIds: global.stickers.added.setIds,
       stickerSetsById: global.stickers.setsById,
       defaultReaction: global.appConfig?.defaultReaction,
+      theme,
+      shouldUseSystemTheme,
     };
   },
 )(SettingsGeneral));

src/components/left/settings/SettingsGeneralBackground.scss

@@ -1,10 +1,11 @@
 .SettingsGeneralBackground {
   .settings-wallpapers {
     display: grid;
-    padding: 0.5rem;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 1fr;
-    grid-gap: 0.25rem;
+    grid-gap: 0.0625rem;
+    background-color: var(--color-background);
+    box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
   }
 
   .Loading {

src/components/left/settings/SettingsGeneralBackgroundColor.scss

@@ -66,10 +66,11 @@
 
   .predefined-colors {
     display: grid;
-    padding: 0.5rem;
     grid-template-columns: repeat(3, 1fr);
     grid-auto-rows: 1fr;
-    grid-gap: 0.25rem;
+    grid-gap: 0.0625rem;
+    background-color: var(--color-background);
+    box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
 
     div {
       cursor: pointer;

src/components/left/settings/SettingsHeader.tsx

@@ -126,7 +126,7 @@ const SettingsHeader: FC<OwnProps> = ({
       case SettingsScreens.PrivacyGroupChatsDeniedContacts:
         return <h3>{lang('NeverShareWith')}</h3>;
 
-      case SettingsScreens.PrivacyActiveSessions:
+      case SettingsScreens.ActiveSessions:
         return <h3>{lang('SessionsTitle')}</h3>;
       case SettingsScreens.PrivacyBlockedUsers:
         return <h3>{lang('BlockedUsers')}</h3>;

src/components/left/settings/SettingsLanguage.tsx

@@ -59,7 +59,7 @@ const SettingsLanguage: FC<OwnProps & StateProps> = ({
   useHistoryBack(isActive, onReset, onScreenSelect, SettingsScreens.Language);
 
   return (
-    <div className="settings-content settings-item settings-language custom-scroll">
+    <div className="settings-content settings-item settings-language custom-scroll settings-item--first">
       {options ? (
         <RadioGroup
           name="keyboard-send-settings"

src/components/left/settings/SettingsMain.tsx

@@ -19,6 +19,7 @@ type OwnProps = {
 };
 
 type StateProps = {
+  sessionCount: number;
   currentUser?: ApiUser;
   lastSyncTime?: number;
 };
@@ -28,9 +29,10 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
   onScreenSelect,
   onReset,
   currentUser,
+  sessionCount,
   lastSyncTime,
 }) => {
-  const { loadProfilePhotos } = getActions();
+  const { loadProfilePhotos, loadAuthorizations } = getActions();
 
   const lang = useLang();
   const profileId = currentUser?.id;
@@ -42,6 +44,12 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
   }, [lastSyncTime, profileId, loadProfilePhotos]);
 
   useHistoryBack(isActive, onReset, onScreenSelect, SettingsScreens.Main);
+  
+  useEffect(() => {
+    if (lastSyncTime) {
+      loadAuthorizations();
+    }
+  }, [lastSyncTime, loadAuthorizations]);
 
   return (
     <div className="settings-content custom-scroll">
@@ -72,13 +80,6 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
         >
           {lang('Notifications')}
         </ListItem>
-        <ListItem
-          icon="lock"
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick={() => onScreenSelect(SettingsScreens.Privacy)}
-        >
-          {lang('PrivacySettings')}
-        </ListItem>
         <ListItem
           icon="data"
           // eslint-disable-next-line react/jsx-no-bind
@@ -86,6 +87,13 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
         >
           {lang('DataSettings')}
         </ListItem>
+        <ListItem
+          icon="lock"
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={() => onScreenSelect(SettingsScreens.Privacy)}
+        >
+          {lang('PrivacySettings')}
+        </ListItem>
         <ListItem
           icon="folder"
           // eslint-disable-next-line react/jsx-no-bind
@@ -93,12 +101,21 @@ const SettingsMain: FC<OwnProps & StateProps> = ({
         >
           {lang('Filters')}
         </ListItem>
+        <ListItem
+          icon="active-sessions"
+          // eslint-disable-next-line react/jsx-no-bind
+          onClick={() => onScreenSelect(SettingsScreens.ActiveSessions)}
+        >
+          {lang('SessionsTitle')}
+          {sessionCount > 0 && (<span className="settings-item__current-value">{sessionCount}</span>)}
+        </ListItem>
         <ListItem
           icon="language"
           // eslint-disable-next-line react/jsx-no-bind
           onClick={() => onScreenSelect(SettingsScreens.Language)}
         >
           {lang('Language')}
+          <span className="settings-item__current-value">{lang.langName}</span>
         </ListItem>
       </div>
     </div>
@@ -110,6 +127,7 @@ export default memo(withGlobal<OwnProps>(
     const { currentUserId, lastSyncTime } = global;
 
     return {
+      sessionCount: global.activeSessions.length,
       currentUser: currentUserId ? selectUser(global, currentUserId) : undefined,
       lastSyncTime,
     };

src/components/left/settings/SettingsPrivacy.tsx

@@ -18,7 +18,6 @@ type OwnProps = {
 type StateProps = {
   hasPassword?: boolean;
   blockedCount: number;
-  sessionsCount: number;
   isSensitiveEnabled?: boolean;
   canChangeSensitive?: boolean;
   visibilityPrivacyPhoneNumber?: PrivacyVisibility;
@@ -34,7 +33,6 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
   onReset,
   hasPassword,
   blockedCount,
-  sessionsCount,
   isSensitiveEnabled,
   canChangeSensitive,
   visibilityPrivacyPhoneNumber,
@@ -111,21 +109,6 @@ const SettingsPrivacy: FC<OwnProps & StateProps> = ({
             </span>
           </div>
         </ListItem>
-        <ListItem
-          icon="active-sessions"
-          narrow
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick={() => onScreenSelect(SettingsScreens.PrivacyActiveSessions)}
-        >
-          <div className="multiline-menu-item">
-            <span className="title">{lang('SessionsTitle')}</span>
-            {sessionsCount > 0 && (
-              <span className="subtitle" dir="auto">
-                {sessionsCount === 1 ? '1 session' : `${sessionsCount} sessions`}
-              </span>
-            )}
-          </div>
-        </ListItem>
       </div>
 
       <div className="settings-item">
@@ -224,13 +207,11 @@ export default memo(withGlobal<OwnProps>(
         privacy,
       },
       blocked,
-      activeSessions,
     } = global;
 
     return {
       hasPassword,
       blockedCount: blocked.totalCount,
-      sessionsCount: activeSessions.length,
       isSensitiveEnabled,
       canChangeSensitive,
       visibilityPrivacyPhoneNumber: privacy.phoneNumber?.visibility,

src/components/left/settings/SettingsPrivacyBlockedUsers.tsx

@@ -97,7 +97,7 @@ const SettingsPrivacyBlockedUsers: FC<OwnProps & StateProps> = ({
   return (
     <div className="settings-fab-wrapper">
       <div className="settings-content infinite-scroll">
-        <div className="settings-item">
+        <div className="settings-item no-border">
           <p className="settings-item-description-larger mt-0 mb-2" dir={lang.isRtl ? 'rtl' : undefined}>
             {lang('BlockedUsersInfo')}
           </p>

src/components/left/settings/SettingsPrivacyVisibility.tsx

@@ -11,7 +11,7 @@ import useHistoryBack from '../../../hooks/useHistoryBack';
 
 import ListItem from '../../ui/ListItem';
 import RadioGroup from '../../ui/RadioGroup';
-import { getPrivacyKey } from './helper/privacy';
+import { getPrivacyKey } from './helpers/privacy';
 
 type OwnProps = {
   screen: SettingsScreens;

src/components/left/settings/SettingsPrivacyVisibilityExceptionList.tsx

@@ -12,7 +12,7 @@ import { filterChatsByName, isChatGroup, isUserId } from '../../../global/helper
 import useLang from '../../../hooks/useLang';
 import useHistoryBack from '../../../hooks/useHistoryBack';
 import { useFolderManagerForOrderedIds } from '../../../hooks/useFolderManager';
-import { getPrivacyKey } from './helper/privacy';
+import { getPrivacyKey } from './helpers/privacy';
 
 import Picker from '../../common/Picker';
 import FloatingActionButton from '../../ui/FloatingActionButton';

src/components/left/settings/folders/SettingsFoldersEdit.tsx

@@ -217,7 +217,7 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="settings-fab-wrapper">
-      <div className="settings-content custom-scroll">
+      <div className="settings-content no-border custom-scroll">
         <div className="settings-content-header">
           <div className="settings-content-icon">
             {animationData && (
@@ -267,7 +267,7 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
           {renderChats('included')}
         </div>
 
-        <div className="settings-item no-border pt-3">
+        <div className="settings-item pt-3">
           <h4 className="settings-item-header mb-3" dir={lang.isRtl ? 'rtl' : undefined}>{lang('FilterExclude')}</h4>
 
           <ListItem

src/components/left/settings/folders/SettingsFoldersMain.tsx

@@ -123,7 +123,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
   }, [foldersById, addChatFolder, showDialog]);
 
   return (
-    <div className="settings-content custom-scroll">
+    <div className="settings-content no-border custom-scroll">
       <div className="settings-content-header">
         <div className="settings-content-icon">
           {animationData && (

src/components/left/settings/helpers/getSessionIcon.ts

@@ -0,0 +1,56 @@
+import { ApiSession } from '../../../../api/types';
+
+export default function getSessionIcon(session: ApiSession): string {
+  const platform = session.platform.toLowerCase();
+  const device = session.deviceModel.toLowerCase();
+  const systemVersion = session.systemVersion.toLowerCase();
+
+  if (device.includes('xbox')) {
+    return 'xbox';
+  }
+
+  if (device.includes('chrome') && !device.includes('chromebook')) {
+    return 'chrome';
+  }
+  if (device.includes('brave')) {
+    return 'brave';
+  }
+  if (device.includes('vivaldi')) {
+    return 'vivaldi';
+  }
+  if (device.includes('safari')) {
+    return 'safari';
+  }
+  if (device.includes('firefox')) {
+    return 'firefox';
+  }
+  if (device.includes('opera')) {
+    return 'opera';
+  }
+  if (device.includes('samsungbrowser')) {
+    return 'samsung';
+  }
+  if (platform.includes('android')) {
+    return 'android';
+  }
+  if (
+    device.includes('iphone')
+    || device.includes('ipad')
+    || platform.includes('ios')
+    || platform.includes('macos')
+    || systemVersion.includes('macos')
+  ) {
+    return 'apple';
+  }
+  if (platform.includes('ubuntu') || systemVersion.includes('ubuntu')) {
+    return 'ubuntu';
+  }
+  if (platform.includes('linux') || systemVersion.includes('linux')) {
+    return 'linux';
+  }
+  if (platform.includes('windows') || systemVersion.includes('windows')) {
+    return 'windows';
+  }
+
+  return 'unknown';
+}

src/components/left/settings/twoFa/SettingsTwoFaCongratulations.tsx

@@ -34,7 +34,7 @@ const SettingsTwoFaCongratulations: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="settings-content two-fa custom-scroll">
-      <div className="settings-content-header">
+      <div className="settings-content-header no-border">
         <AnimatedEmoji sticker={animatedEmoji} size="large" />
 
         <p className="settings-item-description mb-3" dir="auto">
@@ -42,7 +42,7 @@ const SettingsTwoFaCongratulations: FC<OwnProps & StateProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0 no-border">
+      <div className="settings-item pt-0">
         <Button onClick={handleClick}>{lang('TwoStepVerificationPasswordReturnSettings')}</Button>
       </div>
     </div>

src/components/left/settings/twoFa/SettingsTwoFaEmailCode.tsx

@@ -79,11 +79,11 @@ const SettingsTwoFaEmailCode: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="settings-content two-fa custom-scroll">
-      <div className="settings-content-header">
+      <div className="settings-content-header no-border">
         <AnimatedEmoji sticker={animatedEmoji} size="large" />
       </div>
 
-      <div className="settings-item pt-0 no-border">
+      <div className="settings-item pt-0">
         <InputText
           value={value}
           ref={inputRef}

src/components/left/settings/twoFa/SettingsTwoFaEnabled.tsx

@@ -31,7 +31,7 @@ const SettingsTwoFaEnabled: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="settings-content two-fa custom-scroll">
-      <div className="settings-content-header">
+      <div className="settings-content-header no-border">
         <AnimatedEmoji sticker={animatedEmoji} size="large" />
 
         <p className="settings-item-description mb-3" dir="auto">
@@ -39,7 +39,7 @@ const SettingsTwoFaEnabled: FC<OwnProps & StateProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0 no-border">
+      <div className="settings-item pt-0">
         <ListItem
           icon="edit"
           // eslint-disable-next-line react/jsx-no-bind

src/components/left/settings/twoFa/SettingsTwoFaPassword.tsx

@@ -65,11 +65,11 @@ const SettingsTwoFaPassword: FC<OwnProps> = ({
 
   return (
     <div className="settings-content two-fa custom-scroll">
-      <div className="settings-content-header">
+      <div className="settings-content-header no-border">
         <PasswordMonkey isBig isPasswordVisible={shouldShowPassword} />
       </div>
 
-      <div className="settings-item pt-0 no-border">
+      <div className="settings-item pt-0">
         <PasswordForm
           error={validationError || error}
           hint={hint}

src/components/left/settings/twoFa/SettingsTwoFaSkippableForm.tsx

@@ -100,11 +100,11 @@ const SettingsTwoFaSkippableForm: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="settings-content two-fa custom-scroll">
-      <div className="settings-content-header">
+      <div className="settings-content-header no-border">
         <AnimatedEmoji sticker={animatedEmoji} size="large" />
       </div>
 
-      <div className="settings-item pt-0 no-border">
+      <div className="settings-item pt-0">
         <form action="" onSubmit={handleSubmit}>
           <InputText
             ref={inputRef}

src/components/left/settings/twoFa/SettingsTwoFaStart.tsx

@@ -31,7 +31,7 @@ const SettingsTwoFaStart: FC<OwnProps & StateProps> = ({
 
   return (
     <div className="settings-content two-fa custom-scroll">
-      <div className="settings-content-header">
+      <div className="settings-content-header no-border">
         <AnimatedEmoji sticker={animatedEmoji} size="large" />
 
         <p className="settings-item-description mb-3" dir="auto">
@@ -39,7 +39,7 @@ const SettingsTwoFaStart: FC<OwnProps & StateProps> = ({
         </p>
       </div>
 
-      <div className="settings-item pt-0 no-border">
+      <div className="settings-item pt-0">
         <Button onClick={onStart}>{lang('EditAdminTransferSetPassword')}</Button>
       </div>
     </div>

src/components/right/management/Management.scss

@@ -1,6 +1,7 @@
 .Management {
   position: relative;
   height: 100%;
+  background-color: var(--color-background-secondary);
 
   & > .custom-scroll {
     height: 100%;
@@ -10,14 +11,15 @@
 
   .section {
     padding: 1rem 1.5rem;
-    border-top: 1px solid var(--color-borders);
+    background-color: var(--color-background);
+    box-shadow: inset 0 -0.0625rem 0 0 var(--color-background-secondary-accent);
+    margin-bottom: 0.625rem;
 
     &.wide {
       padding: 1.5rem;
     }
 
     &:first-of-type {
-      border-top: none;
       padding-top: 1rem;
     }
 

src/styles/icons.scss

@@ -114,9 +114,6 @@
 .icon-darkmode:before {
   content: "\e979";
 }
-.icon-animations:before {
-  content: "\e97a";
-}
 .icon-enter:before {
   content: "\e97b";
 }

src/types/index.ts

@@ -159,6 +159,7 @@ export enum SettingsScreens {
   Notifications,
   DataStorage,
   Language,
+  ActiveSessions,
   General,
   GeneralChatBackground,
   GeneralChatBackgroundColor,
@@ -178,7 +179,6 @@ export enum SettingsScreens {
   PrivacyForwardingDeniedContacts,
   PrivacyGroupChatsAllowedContacts,
   PrivacyGroupChatsDeniedContacts,
-  PrivacyActiveSessions,
   PrivacyBlockedUsers,
   Folders,
   FoldersCreateFolder,

src/util/langProvider.ts

@@ -16,6 +16,7 @@ interface LangFn {
 
   isRtl?: boolean;
   code?: LangCode;
+  langName?: string;
   timeFormat?: TimeFormat;
 }
 
@@ -130,6 +131,7 @@ export async function setLanguage(langCode: LangCode, callback?: NoneToVoidFunct
   const langInfo = languages?.find((l) => l.langCode === langCode);
   getTranslation.isRtl = Boolean(langInfo?.rtl);
   getTranslation.code = langCode;
+  getTranslation.langName = langInfo?.nativeName;
   getTranslation.timeFormat = timeFormat;
 
   if (callback) {