Position elements on welcome-screen (IOS-134)

Mastodon/Scene/Onboarding/Welcome/View/WelcomeIllustrationView.swift

@@ -140,7 +140,7 @@ extension WelcomeIllustrationView {
 
             // draw elephantThreeOnGrassWithTreeTwoImage
             // elephantThreeOnGrassWithTreeTwo.bottomY - 25 align to elephantThreeOnGrassImage.centerY
-            elephantThreeOnGrassWithTreeTwoImage.draw(at: CGPoint(x: width - elephantThreeOnGrassWithTreeTwoImage.size.width, y: height - 0.5 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeTwoImage.size.height + 25))
+            elephantThreeOnGrassWithTreeTwoImage.draw(at: CGPoint(x: width - elephantThreeOnGrassWithTreeTwoImage.size.width + 94, y: height - 0.4 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeTwoImage.size.height + 25))
         }
 
         leftHillImageView.image = UIGraphicsImageRenderer(size: size).image { context in
@@ -150,7 +150,7 @@ extension WelcomeIllustrationView {
 
             // draw elephantThreeOnGrassWithTreeThree
             // elephantThreeOnGrassWithTreeThree.bottomY + 30 align to elephantThreeOnGrassImage.centerY
-            elephantThreeOnGrassWithTreeThreeImage.draw(at: CGPoint(x: 0, y: height - 0.5 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeThreeImage.size.height - 30))
+            elephantThreeOnGrassWithTreeThreeImage.draw(at: CGPoint(x: -36, y: height - 0.4 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeThreeImage.size.height - 5))
         }
 
         centerHillImageView.image = UIGraphicsImageRenderer(size: size).image { context in
@@ -193,7 +193,7 @@ extension WelcomeIllustrationView {
 
                 // draw elephantThreeOnGrassWithTreeThree
                 // elephantThreeOnGrassWithTreeThree.bottomY + 30 align to elephantThreeOnGrassImage.centerY
-                elephantThreeOnGrassWithTreeThreeImage.draw(at: CGPoint(x: -160, y: height - 0.5 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeThreeImage.size.height - 80))
+                elephantThreeOnGrassWithTreeThreeImage.draw(at: CGPoint(x: -80, y: height - 0.5 * elephantThreeOnGrassImage.size.height - elephantThreeOnGrassWithTreeThreeImage.size.height - 80))
             }
 
             centerHillImageView.image = UIGraphicsImageRenderer(size: size).image { context in

Mastodon/Scene/Onboarding/Welcome/WelcomeViewController.swift

@@ -177,6 +177,8 @@ final class WelcomeViewController: UIViewController, NeedsDependency {
         let button = UIButton(configuration: buttonConfiguration)
         return button
     }()
+
+    let separator = WelcomeSeparatorView(frame: .zero)
 }
 
 extension WelcomeViewController {
@@ -202,7 +204,6 @@ extension WelcomeViewController {
         ])
 
         setupOnboardingAppearance()
-        setupIllustrationLayout()
 
         buttonContainer.axis = .vertical
         buttonContainer.spacing = 12
@@ -229,7 +230,7 @@ extension WelcomeViewController {
             signUpButton.heightAnchor.constraint(greaterThanOrEqualToConstant: WelcomeViewController.actionButtonHeight).priority(.required - 1),
         ])
 
-        buttonContainer.addArrangedSubview(WelcomeSeparatorView(frame: .zero))
+        buttonContainer.addArrangedSubview(separator)
 
         signInButton.translatesAutoresizingMaskIntoConstraints = false
         NSLayoutConstraint.activate([
@@ -247,7 +248,11 @@ extension WelcomeViewController {
         bottomButtonStackView.alignment = .center
         bottomButtonStackView.spacing = 16
 
+        setupIllustrationLayout()
+
         buttonContainer.addArrangedSubview(bottomButtonStackView)
+        view.bringSubviewToFront(buttonContainer)
+        view.bringSubviewToFront(mastodonLogo)
 
         joinDefaultServerButton.addTarget(self, action: #selector(joinDefaultServer(_:)), for: .touchUpInside)
         signUpButton.addTarget(self, action: #selector(signUp(_:)), for: .touchUpInside)
@@ -261,6 +266,7 @@ extension WelcomeViewController {
                 self.navigationItem.leftBarButtonItem = needsShowDismissEntry ? self.dismissBarButtonItem : nil
             }
             .store(in: &disposeBag)
+        view.backgroundColor = Asset.Scene.Welcome.signInButtonBackground.color
     }
     
 
@@ -328,7 +334,7 @@ extension WelcomeViewController {
         welcomeIllustrationView.contentMode = .scaleAspectFit
 
         welcomeIllustrationView.translatesAutoresizingMaskIntoConstraints = false
-        welcomeIllustrationViewBottomAnchorLayoutConstraint = welcomeIllustrationView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 5)
+        welcomeIllustrationViewBottomAnchorLayoutConstraint = welcomeIllustrationView.bottomAnchor.constraint(equalTo: separator.centerYAnchor)
 
         view.addSubview(welcomeIllustrationView)
 
@@ -362,10 +368,9 @@ extension WelcomeViewController {
         welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.translatesAutoresizingMaskIntoConstraints = false
         view.addSubview(welcomeIllustrationView.elephantOnAirplaneWithContrailImageView)
         NSLayoutConstraint.activate([
-            view.leftAnchor.constraint(equalTo: welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.leftAnchor, constant: 12),  // add 12pt bleeding
-            welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.topAnchor.constraint(equalTo: topPaddingView.bottomAnchor),
+            view.leftAnchor.constraint(equalTo: welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.rightAnchor, constant: -104),  // add 12pt bleeding
+            welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.bottomAnchor.constraint(equalTo: welcomeIllustrationView.leftHillImageView.topAnchor),
             // make a little bit large
-            welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.84),
             welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.heightAnchor.constraint(equalTo: welcomeIllustrationView.elephantOnAirplaneWithContrailImageView.widthAnchor, multiplier: 105.0/318.0),
         ])
         let bottomPaddingView = UIView()

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Scene/Welcome/illustration/elephant.three.on.grass.imageset/Contents.json

@@ -1,17 +1,17 @@
 {
   "images" : [
     {
-      "filename" : "untitled10003Group11.png",
+      "filename" : "Untitled-1_0003_Group-1 1.png",
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "filename" : "untitled10003Group11@2x.png",
+      "filename" : "Untitled-1_0003_Group-1 1@2x.png",
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
-      "filename" : "untitled10003Group11@3x.png",
+      "filename" : "Untitled-1_0003_Group-1 1@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }

MastodonSDK/Sources/MastodonAsset/Assets.xcassets/Scene/Welcome/sign.in.button.background.colorset/Contents.json

@@ -5,9 +5,9 @@
         "color-space" : "srgb",
         "components" : {
           "alpha" : "1.000",
-          "blue" : "0.506",
-          "green" : "0.675",
-          "red" : "0.345"
+          "blue" : "0x6A",
+          "green" : "0x8E",
+          "red" : "0x47"
         }
       },
       "idiom" : "universal"