Feature/improve restricted view mode (#304)

* Improve wording and padding

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the wording for the _Restricted View_: _Presenter View_
+
 ## 1.40.0 - 19.08.2021
 
 ### Changed

apps/client/src/app/pages/account/account-page.html

@@ -9,12 +9,12 @@
       <mat-card class="mb-3">
         <mat-card-content>
           <div *ngIf="user.alias" class="d-flex py-1">
-            <div class="w-50" i18n>Alias</div>
+            <div class="pr-1 w-50" i18n>Alias</div>
-            <div class="w-50">{{ user.alias }}</div>
+            <div class="pl-1 w-50">{{ user.alias }}</div>
           </div>
           <div *ngIf="user?.subscription" class="d-flex py-1">
-            <div class="w-50" i18n>Membership</div>
+            <div class="pr-1 w-50" i18n>Membership</div>
-            <div class="w-50">
+            <div class="pl-1 w-50">
               <div class="align-items-center d-flex mb-1">
                 {{ user?.subscription?.type }}
                 <ion-icon
@@ -51,13 +51,14 @@
             </div>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">
-            <div class="w-50">
+            <div class="pr-1 w-50">
-              <div i18n>Restricted View</div>
+              <div i18n>Presenter View</div>
               <div class="hint-text text-muted" i18n>
-                Hides absolute values like performances and quantities.
+                Hides sensitive values such as absolute performances and
+                quantities.
               </div>
             </div>
-            <div class="w-50">
+            <div class="pl-1 w-50">
               <mat-slide-toggle
                 color="primary"
                 [checked]="user.settings.isRestrictedView"
@@ -69,10 +70,10 @@
           <div class="d-flex mt-4 py-1">
             <form #changeUserSettingsForm="ngForm" class="w-100">
               <div class="d-flex mb-2">
-                <div class="align-items-center d-flex pt-1 w-50" i18n>
+                <div class="align-items-center d-flex pt-1 pt-1 w-50" i18n>
                   Base Currency
                 </div>
-                <div class="w-50">
+                <div class="pl-1 w-50">
                   <mat-form-field appearance="outline" class="w-100">
                     <mat-select
                       name="baseCurrency"
@@ -90,7 +91,7 @@
                 </div>
               </div>
               <div class="d-flex">
-                <div class="align-items-center d-flex pt-1 w-50" i18n>
+                <div class="align-items-center d-flex pr-1 pt-1 w-50" i18n>
                   View Mode
                   <ion-icon
                     *ngIf="!hasPermissionToUpdateViewMode"
@@ -98,7 +99,7 @@
                     name="diamond-outline"
                   ></ion-icon>
                 </div>
-                <div class="w-50">
+                <div class="pl-1 w-50">
                   <div class="align-items-center d-flex overflow-hidden">
                     <mat-form-field appearance="outline" class="w-100">
                       <mat-select
@@ -117,8 +118,8 @@
             </form>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">
-            <div class="w-50" i18n>Sign in with fingerprint</div>
+            <div class="pr-1 w-50" i18n>Sign in with fingerprint</div>
-            <div class="w-50">
+            <div class="pl-1 w-50">
               <mat-slide-toggle
                 #toggleSignInWithFingerprintEnabledElement
                 color="primary"