diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl index 3ab1c45659..9630857391 100644 --- a/locales/en-US/server.ftl +++ b/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 diff --git a/server/src/pages/settings/view.js b/server/src/pages/settings/view.js index 2ccbc682de..bc73032059 100644 --- a/server/src/pages/settings/view.js +++ b/server/src/pages/settings/view.js @@ -57,6 +57,11 @@ class Body extends React.Component { ); + subInfo = ( + +

If you sign out, you will need to sign in again to regain access to your screenshots.

+
+ ); } else { info = (
@@ -85,11 +90,16 @@ class Body extends React.Component {

Firefox Screenshots Settings


- -

Sync & Accounts

-
- { info } - { subInfo} +
+
+ +

Firefox Account

+
+ { info } + { subInfo} +
+
+
; } diff --git a/static/css/settings.scss b/static/css/settings.scss index 523cbb65fe..faa8c3fd65 100644 --- a/static/css/settings.scss +++ b/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; + } + } } diff --git a/static/img/fxa-sync.svg b/static/img/fxa-sync.svg new file mode 100644 index 0000000000..979e9b9903 --- /dev/null +++ b/static/img/fxa-sync.svg @@ -0,0 +1 @@ + \ No newline at end of file