Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Brand Updates] Watch app #14803

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 9 additions & 16 deletions WooCommerce/Woo Watch App/MyStore/MyStoreView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -47,10 +47,12 @@ struct MyStoreView: View {
.navigationBarTitleDisplayMode(.inline)
.navigationTitle {
Text(dependencies.storeName)
.foregroundStyle(Colors.wooPurple5)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade5))
}
.background(
LinearGradient(gradient: Gradient(colors: [Colors.wooPurpleBackground, .black]), startPoint: .top, endPoint: .bottom)
LinearGradient(gradient: Gradient(colors: [Color.withColorStudio(name: .wooCommercePurple, shade: .shade70), .black]),
startPoint: .top,
endPoint: .bottom)
)
.onAppear() {
Task {
Expand Down Expand Up @@ -93,7 +95,7 @@ struct MyStoreView: View {
VStack {
Text(Localization.revenue)
.font(.caption2)
.foregroundStyle(Colors.wooPurple5)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade5))
.padding(.bottom, Layout.revenueTitlePadding)

Text(revenue)
Expand Down Expand Up @@ -121,7 +123,7 @@ struct MyStoreView: View {
HStack {
Images.document
.renderingMode(.original)
.foregroundStyle(Colors.wooPurple10)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade10))

Text(orders)
.font(.caption)
Expand All @@ -130,7 +132,7 @@ struct MyStoreView: View {
.padding(Layout.orderButtonPadding)
}
.buttonStyle(.plain)
.background(Colors.wooPurple80)
.background(Color.withColorStudio(name: .wooCommercePurple, shade: .shade80))
.cornerRadius(Layout.orderButtonCornerRadius)

Spacer()
Expand All @@ -146,7 +148,7 @@ struct MyStoreView: View {
.renderingMode(.original)
.aspectRatio(contentMode: .fit)
.frame(width: Layout.iconWidth, height: Layout.iconWidth)
.foregroundStyle(Colors.wooPurple10)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade10))
}
.bold()

Expand All @@ -160,7 +162,7 @@ struct MyStoreView: View {
.renderingMode(.original)
.aspectRatio(contentMode: .fit)
.frame(width: Layout.iconWidth, height: Layout.iconWidth)
.foregroundStyle(Colors.wooPurple10)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade10))
}
.bold()
}
Expand All @@ -173,15 +175,6 @@ struct MyStoreView: View {
/// Constants
///
fileprivate extension MyStoreView {
// TODO: Move this to a shared resource
enum Colors {
static let wooPurple5 = Color(red: 223/255.0, green: 209/255.0, blue: 251/255.0)
static let wooPurple80 = Color(red: 60/255.0, green: 40/255.0, blue: 97/255.0)
static let wooPurple10 = Color(red: 207/255.0, green: 185/255.0, blue: 246/255.0)
static let wooPurpleBackground = Color(red: 79/255.0, green: 54/255.0, blue: 125/255.0)
static let secondaryColor = Color(red: 79/255.0, green: 54/255.0, blue: 125/255.0)
}

enum Layout {
static let revenueTitlePadding = 1.0
static let revenueValuePadding = 4.0
Expand Down
14 changes: 7 additions & 7 deletions WooCommerce/Woo Watch App/Orders/OrderDetailView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,13 @@ struct OrderDetailView: View {
.navigationTitle {
Text(order.number)
.font(.body)
.foregroundStyle(Colors.wooPurple20)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade20))
}
.background(
LinearGradient(gradient: Gradient(colors: [Colors.wooPurpleBackground, .black]), startPoint: .top, endPoint: .bottom)
LinearGradient(gradient: Gradient(colors: [Color.withColorStudio(name: .wooCommercePurple, shade: .shade70),
.black]),
startPoint: .top,
endPoint: .bottom)
)
.compatibleVerticalStyle()
.onAppear() {
Expand Down Expand Up @@ -74,7 +77,7 @@ struct OrderDetailView: View {

Text(order.status)
.font(.footnote)
.foregroundStyle(Colors.gray5)
.foregroundStyle(Color.withColorStudio(name: .gray, shade: .shade5))
}
.padding(.bottom, Layout.mainSectionsPadding)

Expand Down Expand Up @@ -121,7 +124,7 @@ struct OrderDetailView: View {
// Item count
Text(item.count.formatted(.number))
.font(.caption2)
.foregroundStyle(Colors.wooPurple20)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade20))
.padding(Layout.itemCountPadding)
.background(Circle().fill(Colors.whiteTransparent))
.padding(.top, -5) // Offset the number a bit so it looks aligned to the other content
Expand Down Expand Up @@ -224,9 +227,6 @@ private extension OrderDetailView {
}

enum Colors {
static let wooPurpleBackground = Color(red: 79/255.0, green: 54/255.0, blue: 125/255.0)
static let gray5 = Color(red: 220/255.0, green: 220/255.0, blue: 222/255.0)
static let wooPurple20 = Color(red: 190/255.0, green: 160/255.0, blue: 242/255.0)
static let whiteTransparent = Color(white: 1.0, opacity: 0.12)
}
}
18 changes: 6 additions & 12 deletions WooCommerce/Woo Watch App/Orders/OrdersListView.swift
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ struct OrdersListView: View {
}
.navigationTitle {
Text(Localization.title)
.foregroundStyle(OrderListCard.Colors.wooPurple5)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade5))
}
.listStyle(.plain)
.toolbar {
Expand Down Expand Up @@ -192,22 +192,16 @@ struct OrderListCard: View {

Text(order.status)
.font(.footnote)
.foregroundStyle(Colors.wooPurple20)
.foregroundStyle(Color.withColorStudio(name: .wooCommercePurple, shade: .shade20))
}
.listRowBackground(Self.background)
}

static var background: some View {
LinearGradient(gradient: Gradient(colors: [Colors.wooBackgroundStart, Colors.wooBackgroundEnd]), startPoint: .top, endPoint: .bottom)
LinearGradient(gradient: Gradient(colors: [Color.withColorStudio(name: .wooCommercePurple, shade: .shade80),
Color.withColorStudio(name: .wooCommercePurple, shade: .shade100)]),
startPoint: .top,
endPoint: .bottom)
.cornerRadius(10)
}
}

private extension OrderListCard {
enum Colors {
static let wooPurple5 = Color(red: 223/255.0, green: 209/255.0, blue: 251/255.0)
static let wooPurple20 = Color(red: 190/255.0, green: 160/255.0, blue: 242/255.0)
static let wooBackgroundStart = Color(red: 69/255.0, green: 43/255.0, blue: 100/255.0)
static let wooBackgroundEnd = Color(red: 49/255.0, green: 31/255.0, blue: 71/255.0)
}
}
12 changes: 12 additions & 0 deletions WooFoundation/WooFoundation.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,11 @@
689D11D32891B7D800F6A83F /* MockCrashLogger.swift in Sources */ = {isa = PBXBuildFile; fileRef = 689D11D22891B7D800F6A83F /* MockCrashLogger.swift */; };
68FBC5B328926B2C00A05461 /* Collection+Extensions.swift in Sources */ = {isa = PBXBuildFile; fileRef = 68FBC5B228926B2C00A05461 /* Collection+Extensions.swift */; };
7A8A7FB1C1B872009917940A /* Pods_WooFoundationWatchOS.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = A72956724B0AE377A044EDF4 /* Pods_WooFoundationWatchOS.framework */; };
9502369C2D2C1A9F00E2F796 /* ColorPalette.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 265C99D728B93F04005E6117 /* ColorPalette.xcassets */; };
9502369E2D2C1AB600E2F796 /* ColorStudio.swift in Sources */ = {isa = PBXBuildFile; fileRef = 26AF1F5028B8362800937BA9 /* ColorStudio.swift */; };
950236A12D2C1BCF00E2F796 /* Color+ColorStudio.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0331A75A2A3B553A001D2C2C /* Color+ColorStudio.swift */; };
950236A42D2C1C0A00E2F796 /* WooFoundationBundleClass.swift in Sources */ = {isa = PBXBuildFile; fileRef = 950236A32D2C1C0A00E2F796 /* WooFoundationBundleClass.swift */; };
950236A52D2C1C0A00E2F796 /* WooFoundationBundleClass.swift in Sources */ = {isa = PBXBuildFile; fileRef = 950236A32D2C1C0A00E2F796 /* WooFoundationBundleClass.swift */; };
9FA5113235035AC9A6079B0D /* Pods_WooFoundation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C1733C61561AE3A1AD3C16B7 /* Pods_WooFoundation.framework */; };
AE948D0A28CF67CF009F3246 /* Date+StartAndEnd.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE948D0928CF67CE009F3246 /* Date+StartAndEnd.swift */; };
AE948D0D28CF6D50009F3246 /* DateStartAndEndTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AE948D0C28CF6D50009F3246 /* DateStartAndEndTests.swift */; };
Expand Down Expand Up @@ -145,6 +150,7 @@
73D31B9496B7C29667554A6E /* Pods-WooFoundationWatchOS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WooFoundationWatchOS.release.xcconfig"; path = "Target Support Files/Pods-WooFoundationWatchOS/Pods-WooFoundationWatchOS.release.xcconfig"; sourceTree = "<group>"; };
81B8569CD52D20EAE64EE737 /* Pods-WooFoundation.release-alpha.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WooFoundation.release-alpha.xcconfig"; path = "Target Support Files/Pods-WooFoundation/Pods-WooFoundation.release-alpha.xcconfig"; sourceTree = "<group>"; };
8E30B666ED4157ED247C4485 /* Pods-WooFoundationWatchOS.release-alpha.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WooFoundationWatchOS.release-alpha.xcconfig"; path = "Target Support Files/Pods-WooFoundationWatchOS/Pods-WooFoundationWatchOS.release-alpha.xcconfig"; sourceTree = "<group>"; };
950236A32D2C1C0A00E2F796 /* WooFoundationBundleClass.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WooFoundationBundleClass.swift; sourceTree = "<group>"; };
99861FECBD0975C25DA03D80 /* Pods-WooFoundation.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WooFoundation.debug.xcconfig"; path = "Target Support Files/Pods-WooFoundation/Pods-WooFoundation.debug.xcconfig"; sourceTree = "<group>"; };
A21D73D352B4162AB096E276 /* Pods-WooFoundationTests.release-alpha.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-WooFoundationTests.release-alpha.xcconfig"; path = "Target Support Files/Pods-WooFoundationTests/Pods-WooFoundationTests.release-alpha.xcconfig"; sourceTree = "<group>"; };
A72956724B0AE377A044EDF4 /* Pods_WooFoundationWatchOS.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_WooFoundationWatchOS.framework; sourceTree = BUILT_PRODUCTS_DIR; };
Expand Down Expand Up @@ -244,6 +250,7 @@
26AF1F4E28B8362800937BA9 /* Colors */ = {
isa = PBXGroup;
children = (
950236A32D2C1C0A00E2F796 /* WooFoundationBundleClass.swift */,
26AF1F4F28B8362800937BA9 /* UIColor+SemanticColors.swift */,
0331A75A2A3B553A001D2C2C /* Color+ColorStudio.swift */,
20A3AFE82B14BAB20033AF2D /* Color+Adaptivity.swift */,
Expand Down Expand Up @@ -567,6 +574,7 @@
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
9502369C2D2C1A9F00E2F796 /* ColorPalette.xcassets in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand Down Expand Up @@ -678,6 +686,9 @@
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
950236A52D2C1C0A00E2F796 /* WooFoundationBundleClass.swift in Sources */,
950236A12D2C1BCF00E2F796 /* Color+ColorStudio.swift in Sources */,
9502369E2D2C1AB600E2F796 /* ColorStudio.swift in Sources */,
26A0B2D02BF9A550002E9620 /* NSDecimalNumber+Helpers.swift in Sources */,
264E9EA32BF403E1009C48FD /* Date+StartAndEnd.swift in Sources */,
26A0B2CF2BF9A51E002E9620 /* CurrencyFormatter.swift in Sources */,
Expand All @@ -694,6 +705,7 @@
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
950236A42D2C1C0A00E2F796 /* WooFoundationBundleClass.swift in Sources */,
03B8C3892914083F002235B1 /* Bundle+Woo.swift in Sources */,
B99BC2122A1FAE5100E6008A /* CIImage+ImageCombination.swift in Sources */,
B9C9C659283E7195001B879F /* NSDecimalNumber+Helpers.swift in Sources */,
Expand Down
4 changes: 0 additions & 4 deletions WooFoundation/WooFoundation/Colors/UIColor+ColorStudio.swift
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import UIKit

/// Disposable Class to find this `Bundle` at runtime
///
internal class WooFoundationBundleClass {}

public extension UIColor {

/// Get a UIColor from the Color Studio color palette
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/// Disposable Class to find this `Bundle` at runtime
///
internal class WooFoundationBundleClass {}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I extracted this class from the UIColor+ColorStudio because some of the constructors used in it are not available in watchOS.

Loading