Fixes #5052 - Messaging on settings page

locales/en-US/server.ftl

@@ -288,9 +288,10 @@ settingsSignInButton = Sign In
     .title = Sign in
 SettingsPageHeader = Firefox Screenshots Settings
 settingsDescription = You can sign in with Firefox Accounts to sync all your screenshots across devices and access them privately.
-settingsPageSubHeader = Sync & Accounts
+settingsFirefoxAccountSubHeader = Firefox Account
 settingsClosePreferences =
     .title = Close preferences
+settingsFxaDisconnectDescription = If you sign out, you will need to sign in again to regain access to your screenshots.
 
 ## Shotindex page
 

server/src/pages/settings/view.js

@@ -57,6 +57,11 @@ class Body extends React.Component {
           </div>
         </div>
       );
+      subInfo = (
+        <Localized id="settingsFxaDisconnectDescription">
+          <p className="sub-info">If you sign out, you will need to sign in again to regain access to your screenshots.</p>
+        </Localized>
+      );
     } else {
       info = (
         <div className="account-info">
@@ -85,11 +90,16 @@ class Body extends React.Component {
         <p className="header">Firefox Screenshots Settings</p>
       </Localized>
       <hr />
-      <Localized id="settingsPageSubHeader">
-        <p className="sub-header">Sync & Accounts</p>
-      </Localized>
-      { info }
-      { subInfo}
+      <div className="settingsBody">
+        <div>
+          <Localized id="settingsFirefoxAccountSubHeader">
+            <p className="sub-header">Firefox Account</p>
+          </Localized>
+          { info }
+          { subInfo}
+        </div>
+        <div className="fxaSyncImage"></div>
+      </div>
     </div>;
   }
 

static/css/settings.scss

@@ -29,7 +29,7 @@
   position: relative;
 
   @include respond-to("small") {
-    width: 480px;
+    width: 380px;
   }
 
   @include respond-to("medium") {
@@ -50,9 +50,12 @@
 }
 
 .preferences {
+  margin: auto;
+  padding: 40px 20px 0 20px;
 
   @include respond-to("small") {
-    width: 480px;
+    width: 380px;
+    padding: 40px 0;
   }
 
   @include respond-to("medium") {
@@ -63,9 +66,6 @@
     width: 960px;
   }
 
-  margin: auto;
-  padding: 40px 20px 0 20px;
-
   .info-container {
     margin-inline-start: 30px;
     height: 100px;
@@ -135,4 +135,27 @@
       background-color: $light-active;
     }
   }
+
+  .settingsBody {
+    @include flex-container(row, flex-start, stretch, wrap);
+  }
+
+  .fxaSyncImage {
+    background-image: url("../img/fxa-sync.svg");
+    background-repeat: no-repeat;
+    background-size: 410px auto;
+    background-position: center center;
+    margin-top: $grid-unit;
+    min-width: 410px;
+    height: 300px;
+
+    @include respond-to("small") {
+      min-width: 380px;
+      background-size: 380px auto;
+    }
+
+    @include respond-to("large") {
+      margin-left: $grid-unit * 4;
+    }
+  }
 }