From f94e43e74a8227bc43aa203117a1967b24c636a4 Mon Sep 17 00:00:00 2001
From: Fedor Indutny <79877362+indutny-signal@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:28:20 -0800
Subject: [PATCH] PNP UI Change for Preferences

---
 _locales/en/messages.json               |  4 ++++
 stylesheets/components/Preferences.scss | 21 +++++-----------
 ts/components/Preferences.tsx           | 32 +++++++++++++++----------
 3 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 73adbe22a..52109bea2 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -5911,6 +5911,10 @@
     "messageformat": "Choose who can see your phone number and who can contact you on Signal with it.",
     "description": "Body of Phone Number row in Privacy section of Preferences window"
   },
+  "icu:Preferences__pnp__row--button": {
+    "messageformat": "Change…",
+    "description": "Text of Phone Number row button in Privacy section of Preferences window"
+  },
   "icu:Preferences__pnp__sharing--title": {
     "messageformat": "Who can see my number",
     "description": "Title for the phone number sharing setting row"
diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss
index 76eb55050..7da2d8f77 100644
--- a/stylesheets/components/Preferences.scss
+++ b/stylesheets/components/Preferences.scss
@@ -39,6 +39,10 @@
     padding-inline: 24px;
   }
 
+  legend {
+    font-weight: 600;
+  }
+
   &__button {
     @include button-reset;
     @include font-body-1;
@@ -161,9 +165,7 @@
     margin-bottom: 24px;
   }
 
-  &__link {
-    @include button-reset;
-    padding-block: 0px 28px;
+  &__pnp {
     padding-inline: 0;
     width: 100%;
 
@@ -171,21 +173,9 @@
       @include font-body-1;
       font-weight: 400;
       margin: 0;
-      margin-bottom: 8px;
     }
   }
 
-  &__link:not(:last-child) {
-    border-bottom: 1px solid $color-gray-15;
-    @include light-theme {
-      border-color: $color-gray-15;
-    }
-    @include dark-theme {
-      border-color: $color-gray-65;
-    }
-    margin-bottom: 24px;
-  }
-
   &__control {
     align-items: center;
     display: flex;
@@ -208,6 +198,7 @@
 
     &--value {
       color: $color-gray-45;
+      flex-shrink: 0;
     }
 
     &--clickable {
diff --git a/ts/components/Preferences.tsx b/ts/components/Preferences.tsx
index 1ad4bdaee..f1bf00e8f 100644
--- a/ts/components/Preferences.tsx
+++ b/ts/components/Preferences.tsx
@@ -1191,18 +1191,26 @@ export function Preferences({
             {i18n('icu:Preferences__button--privacy')}
           </div>
         </div>
-        <button
-          type="button"
-          className="Preferences__link"
-          onClick={() => setPage(Page.PNP)}
-        >
-          <h3 className="Preferences__padding">
-            {i18n('icu:Preferences__pnp__row--title')}
-          </h3>
-          <div className="Preferences__padding Preferences__description">
-            {i18n('icu:Preferences__pnp__row--body')}
-          </div>
-        </button>
+        <SettingsRow>
+          <Control
+            left={
+              <div className="Preferences__pnp">
+                <h3>{i18n('icu:Preferences__pnp__row--title')}</h3>
+                <div className="Preferences__description">
+                  {i18n('icu:Preferences__pnp__row--body')}
+                </div>
+              </div>
+            }
+            right={
+              <Button
+                onClick={() => setPage(Page.PNP)}
+                variant={ButtonVariant.Secondary}
+              >
+                {i18n('icu:Preferences__pnp__row--button')}
+              </Button>
+            }
+          />
+        </SettingsRow>
         <SettingsRow>
           <Control
             left={i18n('icu:Preferences--blocked')}