Update welcome screen assets. (#1723)

* Update snapshots.
This commit is contained in:
Doug
2023-09-18 11:07:47 +01:00
committed by GitHub
parent 03603d13e5
commit fd6711bbc7
49 changed files with 198 additions and 1901 deletions
-1
View File
@@ -51,7 +51,6 @@ internal enum Asset {
internal static let encryptionWarning = ImageAsset(name: "images/encryption-warning")
internal static let endedPoll = ImageAsset(name: "images/ended-poll")
internal static let launchBackground = ImageAsset(name: "images/launch-background")
internal static let launchLogo = ImageAsset(name: "images/launch-logo")
internal static let locationMarker = ImageAsset(name: "images/location-marker")
internal static let locationPin = ImageAsset(name: "images/location-pin")
internal static let locationPointerFull = ImageAsset(name: "images/location-pointer-full")
+1 -1
View File
@@ -22,7 +22,7 @@ struct PillView: View {
MXLog.info("TEXT ATTACHMENT TEST")
} label: {
HStack {
Image(asset: Asset.Images.launchLogo)
Image(asset: Asset.Images.appLogo)
.resizable()
.scaledToFit()
}
@@ -0,0 +1,98 @@
//
// Copyright 2023 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import SwiftUI
/// The app's logo styled to fit on various launch pages.
struct OnboardingLogo: View {
@Environment(\.colorScheme) private var colorScheme
/// Set to `true` when using on top of `Asset.Images.launchBackground`
let isOnGradient: Bool
/// Extra padding needed to avoid cropping the shadows.
private let extra: CGFloat = 64
/// The shape that the logo is composed on top of.
private let outerShape = RoundedRectangle(cornerRadius: 44)
private let outerShapeShadowColor = Color(red: 0.11, green: 0.11, blue: 0.13)
private var isLight: Bool { colorScheme == .light }
var body: some View {
Image(asset: Asset.Images.appLogo)
.background {
Circle()
.inset(by: 1)
.shadow(color: .black.opacity(!isLight && isOnGradient ? 0.3 : 0.4),
radius: 12.57143,
y: 6.28571)
Circle()
.inset(by: 1)
.shadow(color: .black.opacity(0.5),
radius: 12.57143,
y: 6.28571)
.blendMode(.overlay)
}
.padding(24)
.background {
Color.white
.opacity(isLight ? 0.23 : isOnGradient ? 0.05 : 0.13)
}
.clipShape(outerShape)
.overlay {
outerShape
.inset(by: 0.25)
.stroke(.white.opacity(isLight ? 1 : isOnGradient ? 0.9 : 0.25), lineWidth: 0.5)
.blendMode(isLight ? .normal : .overlay)
}
.padding(extra)
.background {
ZStack {
if !isLight, isOnGradient {
outerShape
.inset(by: 1)
.padding(extra)
.shadow(color: .black.opacity(0.5),
radius: 32.91666,
y: 1.05333)
} else {
outerShape
.inset(by: 1)
.padding(extra)
.shadow(color: outerShapeShadowColor.opacity(isLight ? 0.23 : 0.08),
radius: 16,
y: 8)
outerShape
.inset(by: 1)
.padding(extra)
.shadow(color: outerShapeShadowColor.opacity(0.5),
radius: 16,
y: 8)
.blendMode(.overlay)
}
}
.mask {
outerShape
.inset(by: -extra / 2)
.stroke(lineWidth: extra)
.padding(extra)
}
}
.padding(-extra)
.accessibilityHidden(true)
}
}
@@ -56,8 +56,7 @@ struct OnboardingScreen: View {
if verticalSizeClass == .regular {
Spacer()
Image(asset: Asset.Images.launchLogo)
.accessibilityHidden(true)
OnboardingLogo(isOnGradient: true)
}
Spacer()
@@ -22,74 +22,15 @@ class PlaceholderScreenCoordinator: CoordinatorProtocol {
}
}
/// The app's splash screen. This screen is shown after the LaunchScreen
/// until the app is ready to show the relevant coordinator. The design of
/// these 2 screens are matched.
/// The screen shown in split view when the detail has no content.
struct PlaceholderScreen: View {
@Environment(\.colorScheme) private var colorScheme
private let outerShape = RoundedRectangle(cornerRadius: 44)
private var isLight: Bool { colorScheme == .light }
var body: some View {
image
.accessibilityHidden(true)
OnboardingLogo(isOnGradient: false)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background()
.environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
.ignoresSafeArea(edges: .top)
}
@ViewBuilder
var image: some View {
if isLight {
logo
} else {
darkLogo
}
}
var logo: some View {
Image(asset: Asset.Images.appLogo)
.padding(24)
.background(.white.opacity(0.4))
.clipShape(outerShape)
.background {
outerShape.fill(Color.white)
.shadow(color: Color(red: 0.11, green: 0.11, blue: 0.13).opacity(0.08), radius: 16, y: 8)
outerShape.fill(Color.white)
.shadow(color: Color(red: 0.11, green: 0.11, blue: 0.13).opacity(0.5), radius: 16, y: 8)
.blendMode(.overlay)
}
.overlay {
outerShape
.inset(by: 0.25)
.stroke(.white, lineWidth: 0.5)
}
}
var darkLogo: some View {
Image(asset: Asset.Images.appLogo)
.shadow(color: .black.opacity(0.2), radius: 0.5, y: 2)
.shadow(color: Color(red: 0.05, green: 0.74, blue: 0.55).opacity(0.2), radius: 16)
.padding(24)
.background {
LinearGradient(stops: [.init(color: .white.opacity(0.05), location: 0.00),
.init(color: .white.opacity(0), location: 1.00)],
startPoint: UnitPoint(x: 0, y: 0),
endPoint: UnitPoint(x: 1, y: 1))
.blendMode(.multiply)
}
.clipShape(outerShape)
.shadow(color: .black.opacity(0.9), radius: 80, x: 0, y: 1)
.overlay {
outerShape
.inset(by: 0.25)
.stroke(.white.opacity(0.9), lineWidth: 0.5)
.blendMode(.overlay)
}
}
}
struct PlaceholderScreen_Previews: PreviewProvider {
@@ -44,11 +44,10 @@ struct WelcomeScreen: View {
@ViewBuilder
private var header: some View {
VStack(spacing: 32) {
Image(asset: Asset.Images.launchLogo)
.resizable()
.scaledToFit()
.frame(width: 118, height: 118)
.accessibilityHidden(true)
OnboardingLogo(isOnGradient: true)
.scaleEffect(x: 0.75, y: 0.75)
.padding(.vertical, -20)
title
}
}