Add styling and localization to education (#690)

Localization/app.json

@@ -241,7 +241,21 @@
         "welcome": {
             "slogan": "Social networking\nback in your hands.",
             "get_started": "Get Started",
-            "log_in": "Log In"
+            "log_in": "Log In",
+            "education": {
+              "what_is_mastodon": {
+                "title": "What is Mastodon?",
+                "description": "Imagine you have an email address that ends with @example.com.\n\nYou can still send and receive emails from anyone, even if their email ends in @gmail.com or @icloud.com or @example.com.",
+              },
+              "mastodon_is_like_that": {
+                "title": "Mastodon is like that",
+                "description": "Your handle might be @gothgirl654@example.social, but you can still follow, reblog, and chat with @fallout5ever@example.online.",
+              },
+              "how_do_i_pick_a_server": {
+                "title": "How do I pick a server?",
+                "description": "Different people choose different servers for any number of reasons. art.example is a great place for artists, while glasgow.example might be a good pick for Scots.\n\nYou can’t go wrong with any of our recommend servers, so regardless of which one you pick (or if you enter your own in the server search bar), you’ll never miss a beat anywhere.",
+              },
+            }
         },
         "login": {
             "title": "Welcome back",

Mastodon/Scene/Onboarding/Welcome/View/Pages/WelcomeContentPage.swift

@@ -6,6 +6,7 @@
 //
 
 import UIKit
+import MastodonLocalization
 
 enum WelcomeContentPage: CaseIterable {
   case whatIsMastodon
@@ -26,22 +27,22 @@ enum WelcomeContentPage: CaseIterable {
   var title: String {
     switch self {
       case .whatIsMastodon:
-        return "What is Mastodon?"
+        return L10n.Scene.Welcome.Education.WhatIsMastodon.title
       case .mastodonIsLikeThat:
-        return "Mastodon is like that"
+        return L10n.Scene.Welcome.Education.MastodonIsLikeThat.title
       case .howDoIPickAServer:
-        return "How to I pick a server?"
+        return L10n.Scene.Welcome.Education.HowDoIPickAServer.title
     }
   }
 
   var content: String {
     switch self {
       case .whatIsMastodon:
-        return "Long text\n\nhat is Mastodon?"
+        return L10n.Scene.Welcome.Education.WhatIsMastodon.description
       case .mastodonIsLikeThat:
-        return "Long text\n\nwhat Mastodon is like"
+        return L10n.Scene.Welcome.Education.MastodonIsLikeThat.description
       case .howDoIPickAServer:
-        return "Long text\n\nHow to I pick a server?"
+        return L10n.Scene.Welcome.Education.HowDoIPickAServer.description
     }
 
   }

Mastodon/Scene/Onboarding/Welcome/View/Pages/WelcomeContentPageView.swift

@@ -17,19 +17,25 @@ class WelcomeContentPageView: UIView {
   init(page: WelcomeContentPage) {
 
     //TODO: @zeitschlag Decide based on page which titleView, first page has mastodon-logo in it
-    //TODO: @zeitschlag Add styling
     titleView = UILabel()
+    titleView.font = WelcomeViewController.largeTitleFont
+    titleView.textColor = WelcomeViewController.largeTitleTextColor
     titleView.text = page.title
+    titleView.adjustsFontForContentSizeCategory = true
+    titleView.numberOfLines = 0
 
-    //TODO: @zeitschlag Add styling
     label = UILabel()
     label.text = page.content
+    label.font = WelcomeViewController.subTitleFont
+    label.textColor = WelcomeViewController.largeTitleTextColor
+    label.adjustsFontForContentSizeCategory = true
     label.numberOfLines = 0
 
     contentStackView = UIStackView(arrangedSubviews: [titleView, label, UIView()])
     contentStackView.translatesAutoresizingMaskIntoConstraints = false
     contentStackView.axis = .vertical
     contentStackView.alignment = .leading
+    contentStackView.spacing = 8
 
     super.init(frame: .zero)
 

MastodonSDK/Sources/MastodonLocalization/Generated/Strings.swift

@@ -1383,6 +1383,30 @@ public enum L10n {
       /// Social networking
       /// back in your hands.
       public static let slogan = L10n.tr("Localizable", "Scene.Welcome.Slogan", fallback: "Social networking\nback in your hands.")
+      public enum Education {
+        public enum HowDoIPickAServer {
+          /// Different people choose different servers for any number of reasons. art.example is a great place for artists, while glasgow.example might be a good pick for Scots.
+          /// 
+          /// You can’t go wrong with any of our recommend servers, so regardless of which one you pick (or if you enter your own in the server search bar), you’ll never miss a beat anywhere.
+          public static let description = L10n.tr("Localizable", "Scene.Welcome.Education.HowDoIPickAServer.description", fallback: "Different people choose different servers for any number of reasons. art.example is a great place for artists, while glasgow.example might be a good pick for Scots.\n\nYou can’t go wrong with any of our recommend servers, so regardless of which one you pick (or if you enter your own in the server search bar), you’ll never miss a beat anywhere.")
+          /// How do I pick a server?
+          public static let title = L10n.tr("Localizable", "Scene.Welcome.Education.HowDoIPickAServer.title", fallback: "How do I pick a server?")
+        }
+        public enum MastodonIsLikeThat {
+          /// Your handle might be @gothgirl654@example.social, but you can still follow, reblog, and chat with @fallout5ever@example.online.
+          public static let description = L10n.tr("Localizable", "Scene.Welcome.Education.MastodonIsLikeThat.description", fallback: "Your handle might be @gothgirl654@example.social, but you can still follow, reblog, and chat with @fallout5ever@example.online.")
+          /// Mastodon is like that
+          public static let title = L10n.tr("Localizable", "Scene.Welcome.Education.MastodonIsLikeThat.title", fallback: "Mastodon is like that")
+        }
+        public enum WhatIsMastodon {
+          /// Imagine you have an email address that ends with @example.com.
+          /// 
+          /// You can still send and receive emails from anyone, even if their email ends in @gmail.com or @icloud.com or @example.com.
+          public static let description = L10n.tr("Localizable", "Scene.Welcome.Education.WhatIsMastodon.description", fallback: "Imagine you have an email address that ends with @example.com.\n\nYou can still send and receive emails from anyone, even if their email ends in @gmail.com or @icloud.com or @example.com.")
+          /// What is Mastodon?
+          public static let title = L10n.tr("Localizable", "Scene.Welcome.Education.WhatIsMastodon.title", fallback: "What is Mastodon?")
+        }
+      }
     }
     public enum Wizard {
       /// Double tap to dismiss this wizard

MastodonSDK/Sources/MastodonLocalization/Resources/Base.lproj/Localizable.strings

@@ -486,6 +486,16 @@ uploaded to Mastodon.";
 "Scene.Welcome.LogIn" = "Log In";
 "Scene.Welcome.Slogan" = "Social networking
 back in your hands.";
+"Scene.Welcome.Education.WhatIsMastodon.title" = "What is Mastodon?";
+"Scene.Welcome.Education.WhatIsMastodon.description" = "Imagine you have an email address that ends with @example.com.
+
+You can still send and receive emails from anyone, even if their email ends in @gmail.com or @icloud.com or @example.com.";
+"Scene.Welcome.Education.MastodonIsLikeThat.title" = "Mastodon is like that";
+"Scene.Welcome.Education.MastodonIsLikeThat.description" = "Your handle might be @gothgirl654@example.social, but you can still follow, reblog, and chat with @fallout5ever@example.online.";
+"Scene.Welcome.Education.HowDoIPickAServer.title" = "How do I pick a server?";
+"Scene.Welcome.Education.HowDoIPickAServer.description" = "Different people choose different servers for any number of reasons. art.example is a great place for artists, while glasgow.example might be a good pick for Scots.
+
+You can’t go wrong with any of our recommend servers, so regardless of which one you pick (or if you enter your own in the server search bar), you’ll never miss a beat anywhere.";
 "Scene.Wizard.AccessibilityHint" = "Double tap to dismiss this wizard";
 "Scene.Wizard.MultipleAccountSwitchIntroDescription" = "Switch between multiple accounts by holding the profile button.";
 "Scene.Wizard.NewInMastodon" = "New in Mastodon";