Skip to content

Commit 32e3121

Browse files
staskusstaskus
authored
[Woo POS][Historical Orders] Design Updates: Larger font sizes & Badge Colors & Error icon (#16225)
2 parents 5dd36d5 + 233331e commit 32e3121

File tree

16 files changed

+229
-39
lines changed

16 files changed

+229
-39
lines changed

‎Modules/Sources/PointOfSale/Colors/Color+POSColorPalette.swift‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,12 @@ extension Color {
4646
static var posOnSuccess: Color { Color("posOnSuccess", bundle: .module) }
4747
static var posAlert: Color { Color("posAlert", bundle: .module) }
4848
static var posOnAlert: Color { Color("posOnAlert", bundle: .module) }
49+
static var posErrorLowest: Color { Color("posErrorLowest", bundle: .module) }
50+
static var posOnErrorLowest: Color { Color("posOnErrorLowest", bundle: .module) }
51+
static var posInfoLowest: Color { Color("posInfoLowest", bundle: .module) }
52+
static var posOnInfoLowest: Color { Color("posOnInfoLowest", bundle: .module) }
53+
static var posDefault: Color { Color("posDefault", bundle: .module) }
54+
static var posOnDefault: Color { Color("posOnDefault", bundle: .module) }
4955

5056
// MARK: - Other
5157
static var posShadow: Color { Color("posShadow", bundle: .module) }

‎Modules/Sources/PointOfSale/Colors/POSColorPalette.xcassets/posDefault.colorset/Contents.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0xDE",
9+
"green" : "0xDC",
10+
"red" : "0xDC"
11+
}
12+
},
13+
"idiom" : "universal"
14+
}
15+
],
16+
"info" : {
17+
"author" : "xcode",
18+
"version" : 1
19+
}
20+
}

‎Modules/Sources/PointOfSale/Colors/POSColorPalette.xcassets/posErrorLowest.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0xEC",
9+
"green" : "0xEB",
10+
"red" : "0xF7"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0xAF",
27+
"green" : "0xAB",
28+
"red" : "0xFF"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎Modules/Sources/PointOfSale/Colors/POSColorPalette.xcassets/posInfoLowest.colorset/Contents.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0xF9",
9+
"green" : "0xDD",
10+
"red" : "0xD6"
11+
}
12+
},
13+
"idiom" : "universal"
14+
},
15+
{
16+
"appearances" : [
17+
{
18+
"appearance" : "luminosity",
19+
"value" : "dark"
20+
}
21+
],
22+
"color" : {
23+
"color-space" : "srgb",
24+
"components" : {
25+
"alpha" : "1.000",
26+
"blue" : "0xF3",
27+
"green" : "0xBA",
28+
"red" : "0xAD"
29+
}
30+
},
31+
"idiom" : "universal"
32+
}
33+
],
34+
"info" : {
35+
"author" : "xcode",
36+
"version" : 1
37+
}
38+
}

‎Modules/Sources/PointOfSale/Colors/POSColorPalette.xcassets/posOnDefault.colorset/Contents.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0x17",
9+
"green" : "0x15",
10+
"red" : "0x10"
11+
}
12+
},
13+
"idiom" : "universal"
14+
}
15+
],
16+
"info" : {
17+
"author" : "xcode",
18+
"version" : 1
19+
}
20+
}

‎Modules/Sources/PointOfSale/Colors/POSColorPalette.xcassets/posOnErrorLowest.colorset/Contents.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0x1C",
9+
"green" : "0x1C",
10+
"red" : "0x69"
11+
}
12+
},
13+
"idiom" : "universal"
14+
}
15+
],
16+
"info" : {
17+
"author" : "xcode",
18+
"version" : 1
19+
}
20+
}

‎Modules/Sources/PointOfSale/Colors/POSColorPalette.xcassets/posOnInfoLowest.colorset/Contents.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"colors" : [
3+
{
4+
"color" : {
5+
"color-space" : "srgb",
6+
"components" : {
7+
"alpha" : "1.000",
8+
"blue" : "0x86",
9+
"green" : "0x32",
10+
"red" : "0x1F"
11+
}
12+
},
13+
"idiom" : "universal"
14+
}
15+
],
16+
"info" : {
17+
"author" : "xcode",
18+
"version" : 1
19+
}
20+
}

‎Modules/Sources/PointOfSale/Presentation/Orders/POSOrderBadgeView.swift‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import SwiftUI
2-
import WooFoundation
32
import struct Yosemite.POSOrder
43

54
struct POSOrderBadgeView: View {
@@ -12,26 +11,33 @@ struct POSOrderBadgeView: View {
1211
var body: some View {
1312
Text(order.status.localizedName)
1413
.font(.posCaptionRegular)
15-
.foregroundStyle(.black)
14+
.foregroundStyle(statusTextColor)
1615
.padding(.horizontal, POSPadding.small)
1716
.padding(.vertical, POSPadding.xSmall)
1817
.background(statusBackgroundColor)
1918
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
2019
.accessibilityLabel(Localization.badgeAccessibilityLabel(status: order.status.localizedName))
2120
}
2221

22+
private var statusTextColor: Color {
23+
switch order.status {
24+
case .completed:
25+
return .posOnInfoLowest
26+
case .failed:
27+
return .posOnErrorLowest
28+
default:
29+
return .posOnDefault
30+
}
31+
}
32+
2333
private var statusBackgroundColor: Color {
2434
switch order.status {
2535
case .completed:
26-
return Color(uiColor: .withColorStudio(.blue, shade: .shade5))
36+
return .posInfoLowest
2737
case .failed:
28-
return Color(uiColor: .withColorStudio(.red, shade: .shade5))
29-
case .processing:
30-
return Color(uiColor: .withColorStudio(.green, shade: .shade5))
31-
case .onHold:
32-
return Color(uiColor: .withColorStudio(.orange, shade: .shade5))
38+
return .posErrorLowest
3339
default:
34-
return Color(uiColor: .gray(.shade5))
40+
return .posDefault
3541
}
3642
}
3743
}

‎Modules/Sources/PointOfSale/Presentation/Orders/POSOrderDetailsLoadingView.swift‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ struct POSOrderDetailsLoadingView: View {
7777
private var shimmeringProductsSection: some View {
7878
VStack(alignment: .leading, spacing: POSSpacing.medium) {
7979
Text(Localization.productsTitle)
80-
.font(.posBodyLargeBold)
80+
.font(.posBodyXLargeBold)
8181
.foregroundStyle(Color.posOnSurface)
8282

8383
VStack(spacing: POSSpacing.small) {
@@ -132,7 +132,7 @@ struct POSOrderDetailsLoadingView: View {
132132
private var shimmeringTotalsSection: some View {
133133
VStack(alignment: .leading, spacing: POSSpacing.medium) {
134134
Text(Localization.totalsTitle)
135-
.font(.posBodyLargeBold)
135+
.font(.posBodyXLargeBold)
136136
.foregroundStyle(Color.posOnSurface)
137137

138138
VStack(spacing: POSSpacing.medium) {

‎Modules/Sources/PointOfSale/Presentation/Orders/POSOrderDetailsView.swift‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ private extension POSOrderDetailsView {
8282
func productsSection(_ order: POSOrder) -> some View {
8383
VStack(alignment: .leading, spacing: POSSpacing.medium) {
8484
Text(Localization.productsTitle)
85-
.font(.posBodyLargeBold)
85+
.font(.posBodyXLargeBold)
8686
.foregroundStyle(Color.posOnSurface)
8787
.accessibilityAddTraits(.isHeader)
8888

@@ -105,7 +105,7 @@ private extension POSOrderDetailsView {
105105
func totalsSection(_ order: POSOrder) -> some View {
106106
VStack(alignment: .leading, spacing: POSSpacing.medium) {
107107
Text(Localization.totalsTitle)
108-
.font(.posBodyLargeBold)
108+
.font(.posBodyXLargeBold)
109109
.foregroundStyle(Color.posOnSurface)
110110
.accessibilityAddTraits(.isHeader)
111111

@@ -139,13 +139,13 @@ private extension POSOrderDetailsView {
139139
func headerBottomContent(for order: POSOrder) -> some View {
140140
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
141141
Text(dateFormatter.string(from: order.dateCreated))
142-
.font(.posBodySmallRegular())
142+
.font(.posBodyMediumRegular())
143143
.foregroundStyle(Color.posOnSurfaceVariantHighest)
144144
.fixedSize(horizontal: false, vertical: true)
145145

146146
if let customerEmail = order.customerEmail, customerEmail.isNotEmpty {
147147
Text(customerEmail)
148-
.font(.posBodySmallRegular())
148+
.font(.posBodyMediumRegular())
149149
.foregroundStyle(Color.posOnSurfaceVariantHighest)
150150
.fixedSize(horizontal: false, vertical: true)
151151
}
@@ -202,16 +202,16 @@ private extension POSOrderDetailsView {
202202
@ViewBuilder
203203

204204
func productImageView(item: POSOrderItem) -> some View {
205-
POSItemImageView(imageSource: item.imageSrc, imageSize: 40, scale: 1)
206-
.frame(width: 40, height: 40)
205+
POSItemImageView(imageSource: item.imageSrc, imageSize: 56, scale: 1)
206+
.frame(width: 56, height: 56)
207207
.clipShape(RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value))
208208
}
209209

210210
@ViewBuilder
211211
func productDetailsView(item: POSOrderItem) -> some View {
212212
VStack(alignment: .leading, spacing: POSSpacing.xSmall) {
213213
Text(item.name)
214-
.font(.posBodySmallBold)
214+
.font(.posBodyLargeBold)
215215
.foregroundStyle(Color.posOnSurface)
216216
.fixedSize(horizontal: false, vertical: true)
217217

@@ -221,7 +221,7 @@ private extension POSOrderDetailsView {
221221

222222
Text(Localization.quantityLabel(item.quantity.intValue,
223223
item.formattedPrice))
224-
.font(.posBodySmallRegular())
224+
.font(.posBodyMediumRegular())
225225
.foregroundStyle(Color.posOnSurfaceVariantHighest)
226226
}
227227
}
@@ -230,14 +230,14 @@ private extension POSOrderDetailsView {
230230
func productAttributesView(_ attributes: [OrderItemAttribute]) -> some View {
231231
let attributeText = attributes.map { "\($0.name): \($0.value)" }.joined(separator: ", ")
232232
Text(attributeText)
233-
.font(.posBodySmallRegular())
233+
.font(.posBodyMediumRegular())
234234
.foregroundStyle(Color.posOnSurfaceVariantHighest)
235235
}
236236

237237
@ViewBuilder
238238
func productTotalView(item: POSOrderItem) -> some View {
239239
Text(item.formattedTotal)
240-
.font(.posBodySmallRegular())
240+
.font(.posBodyMediumRegular())
241241
.foregroundStyle(Color.posOnSurface)
242242
}
243243
}
@@ -280,7 +280,7 @@ private extension POSOrderDetailsView {
280280
title: Localization.totalLabel,
281281
amount: order.formattedTotal,
282282
titleColor: .posOnSurface,
283-
titleFont: .posBodySmallBold,
283+
titleFont: .posBodyLargeBold,
284284
accessibilityLabel: Localization.totalAccessibilityLabel(order.formattedTotal)
285285
)
286286
}
@@ -292,12 +292,12 @@ private extension POSOrderDetailsView {
292292
title: Localization.paidLabel,
293293
amount: order.formattedPaymentTotal,
294294
titleColor: .posOnSurface,
295-
titleFont: .posBodySmallBold
295+
titleFont: .posBodyLargeBold
296296
)
297297

298298
if order.paymentMethodTitle.isNotEmpty {
299299
Text(order.paymentMethodTitle)
300-
.font(.posCaptionRegular)
300+
.font(.posBodyMediumRegular())
301301
.foregroundStyle(Color.posOnSurfaceVariantHighest)
302302
}
303303
}
@@ -329,12 +329,12 @@ private extension POSOrderDetailsView {
329329
title: Localization.refundLabel,
330330
amount: refund.formattedTotal,
331331
titleColor: .posOnSurface,
332-
titleFont: .posBodySmallBold
332+
titleFont: .posBodyLargeBold
333333
)
334334

335335
if let reason = refund.reason, !reason.isEmpty {
336336
Text(Localization.reasonLabel(reason))
337-
.font(.posCaptionRegular)
337+
.font(.posBodyMediumRegular())
338338
.foregroundStyle(Color.posOnSurfaceVariantHighest)
339339
}
340340
}
@@ -348,7 +348,7 @@ private extension POSOrderDetailsView {
348348
title: Localization.netPaymentLabel,
349349
amount: netAmount,
350350
titleColor: .posOnSurface,
351-
titleFont: .posBodySmallBold,
351+
titleFont: .posBodyLargeBold,
352352
accessibilityLabel: Localization.netPaymentAccessibilityLabel(netAmount)
353353
)
354354
}
@@ -358,7 +358,7 @@ private extension POSOrderDetailsView {
358358
title: String,
359359
amount: String,
360360
titleColor: Color = .posOnSurfaceVariantHighest,
361-
titleFont: POSFontStyle = .posBodySmallRegular(),
361+
titleFont: POSFontStyle = .posBodyMediumRegular(),
362362
accessibilityLabel: String? = nil
363363
) -> some View {
364364
HStack {
@@ -367,7 +367,7 @@ private extension POSOrderDetailsView {
367367
.foregroundStyle(titleColor)
368368
Spacer()
369369
Text(amount)
370-
.font(.posBodySmallRegular())
370+
.font(.posBodyMediumRegular())
371371
.foregroundStyle(Color.posOnSurface)
372372
}
373373
.accessibilityElement(children: .combine)

0 commit comments

Comments
 (0)