TRCL-3367 : Update Colors to Match Design (#39)

* update colors to match design (better contrast) * fine tunings * update colors * fix compile * fix swiftlint to use custom config * update input borders * update redundant string
dydxprotocol · Aug 21, 2024 · 75d274b · 75d274b
1 parent 8da5294
commit 75d274b
Show file tree

Hide file tree

Showing 35 changed files with 78 additions and 79 deletions.
diff --git a/.github/workflows/SwiftLint.yml b/.github/workflows/SwiftLint.yml
@@ -22,5 +22,5 @@ jobs:
         # Fetch changes from the base branch of the pull request
         git fetch origin ${{ github.base_ref }}
         # Use git diff to find changed Swift files, then lint each file with SwiftLint
-        git diff --name-only origin/${{ github.base_ref }} | grep '\.swift$' | xargs swiftlint lint
+        git diff --name-only origin/${{ github.base_ref }} | grep '\.swift$' | xargs swiftlint --config dydx/.swiftlint.yml --fix lint
 
diff --git a/PlatformUI/PlatformUI/Components/ComboBox/ComboBox.swift b/PlatformUI/PlatformUI/Components/ComboBox/ComboBox.swift
@@ -59,7 +59,7 @@ public class ComboBoxModel: PlatformViewModel {
                                               trailing: trailing)
                 .createView(parentStyle: style)
                 .themeColor(background: .layer4)
-                .cornerRadius(12)
+                .borderAndClip(style: .cornerRadius(12), borderColor: .borderDefault, lineWidth: 1)
                 .onTapGesture { [weak self] in
                     self?.onTapAction?()
                 }

diff --git a/PlatformUI/PlatformUI/Components/TabGroup/TabItemViewModel.swift b/PlatformUI/PlatformUI/Components/TabGroup/TabItemViewModel.swift
@@ -56,8 +56,8 @@ public class TabItemViewModel: PlatformViewModel, Equatable {
             case .text(let value):
                 return Text(value)
                     .themeFont(fontSize: .small)
-                    .padding(.vertical, 6)
-                    .padding(.horizontal, 8)
+                    .padding([.bottom, .top], 8)
+                    .padding([.leading, .trailing], 12)
                     .themeStyle(styleKey: styleKey, parentStyle: style)
                     .borderAndClip(style: .capsule, borderColor: .layer6, lineWidth: borderWidth)
                     .wrappedInAnyView()
@@ -66,7 +66,7 @@ public class TabItemViewModel: PlatformViewModel, Equatable {
                                                     size: CGSize(width: 18, height: 18),
                                                     templateColor: templateColor)
                     .createView(parentStyle: parentStyle)
-                    .padding([.bottom, .top], 6)
+                    .padding([.bottom, .top], 8)
                     .padding([.leading, .trailing], 12)
                     .themeStyle(styleKey: styleKey, parentStyle: style)
                     .borderAndClip(style: .capsule, borderColor: .layer6, lineWidth: borderWidth)
@@ -81,8 +81,8 @@ public class TabItemViewModel: PlatformViewModel, Equatable {
                 }
                 .frame(maxWidth: .infinity)
                 return AnyView(content)
+
             }
-
         }
     }
 }

diff --git a/dydx/dydxPresenters/dydxPresenters/_v4/Error/dydxTradeRestrictedViewPresenter.swift b/dydx/dydxPresenters/dydxPresenters/_v4/Error/dydxTradeRestrictedViewPresenter.swift
@@ -62,7 +62,7 @@ public class dydxTradeRestrictedViewModel: PlatformViewModel {
 
             return AnyView(
                 ZStack(alignment: .bottom) {
-                    ThemeColor.SemanticColor.layer0.color
+                    ThemeColor.SemanticColor.layer1.color
                         .opacity(0.8)
                     VStack(alignment: .leading, spacing: 16) {
                         HStack(spacing: 0) {

diff --git a/dydx/dydxViews/dydxViews/Shared/PlaceholderView.swift b/dydx/dydxViews/dydxViews/Shared/PlaceholderView.swift
@@ -38,7 +38,7 @@ public class PlaceholderViewModel: PlatformViewModel {
                  PlatformTableViewCellViewModel(main: main)
                     .createView(parentStyle: style)
                     .frame(width: UIScreen.main.bounds.width - 32)
-                    .themeColor(background: .layer4)
+                    .themeColor(background: .layer3)
                     .cornerRadius(16)
             )
         }

diff --git a/dydx/dydxViews/dydxViews/Themes/ThemeDark.json b/dydx/dydxViews/dydxViews/Themes/ThemeDark.json
@@ -8,11 +8,11 @@
             "layer_0": "#000000",
             "layer_1": "#18181B",
             "layer_2": "#0C0C0D",
-            "layer_3": "#18181B",
-            "layer_4": "#252528",
-            "layer_5": "#313135",
-            "layer_6": "#3D3D42",
-            "layer_7": "#494950",
+            "layer_3": "#212124",
+            "layer_4": "#303033",
+            "layer_5": "#3B3B3F",
+            "layer_6": "#494950",
+            "layer_7": "#56565C",
 
             "color_purple": "#7774FF",
             "color_green": "#1AFFB9",
@@ -25,15 +25,15 @@
             "color_faded_red": "#FF5C5C29",
             "color_faded_yellow": "#FFCC4829",
 
-            "border_default": "#313135",
-            "border_destructive": "#FF616133",
-            "border_button": "#7774FF",
+            "border_default": "#494950",
+            "border_destructive": "#FF5C5C33",
+            "border_button": "#FFFFFF",
 
             "gradient_gray_start": "#313135",
             "gradient_gray_end": "#18181B",
-            "gradient_green_start": "#17332C",
+            "gradient_green_start": "#17332C29",
             "gradient_green_end": "#313135",
-            "gradient_red_start": "#331A1A",
+            "gradient_red_start": "#331A1A29",
             "gradient_red_end": "#313135"
         }
     },

diff --git a/dydx/dydxViews/dydxViews/Themes/ThemeLight.json b/dydx/dydxViews/dydxViews/Themes/ThemeLight.json
@@ -6,34 +6,34 @@
             "text_tertiary": "#737373",
 
             "layer_0": "#FFFFFF",
-            "layer_1": "#EDF0F2",
-            "layer_2": "#F9FAFB",
-            "layer_3": "#EDF0F2",
+            "layer_1": "#E9ECEE",
+            "layer_2": "#FFFFFF",
+            "layer_3": "#F7F8FA",
             "layer_4": "#FFFFFF",
-            "layer_5": "#E0E6EB",
-            "layer_6": "#D1D9E0",
-            "layer_7": "#C2CCD6",
+            "layer_5": "#EDF0F2",
+            "layer_6": "#D5DADF",
+            "layer_7": "#C2CBD3",
 
-            "color_purple": "#6966FF",
+            "color_purple": "#7774FF",
             "color_green": "#2CCC98",
             "color_yellow": "#FFCC48",
             "color_red": "#E76565",
             "color_black": "#000000",
             "color_white": "#FFFFFF",
-            "color_faded_purple": "#6966FF29",
+            "color_faded_purple": "#7774FF29",
             "color_faded_green": "#2CCC9829",
             "color_faded_red": "#E7656529",
             "color_faded_yellow": "#FFCC4829",
 
             "border_default": "#D1D9E0",
-            "border_destructive": "#E7656529",
+            "border_destructive": "#E7656533",
             "border_button": "#7774FF",
 
             "gradient_gray_start": "#F0F2F5",
             "gradient_gray_end": "#D1D9E0",
-            "gradient_green_start": "#D8F3EB",
+            "gradient_green_start": "#D8F3EB29",
             "gradient_green_end": "#E7EBEE",
-            "gradient_red_start": "#FAE2E2",
+            "gradient_red_start": "#FAE2E229",
             "gradient_red_end": "#E7EBEE"
         }
     },

diff --git a/dydx/dydxViews/dydxViews/Themes/dydxStyle.json b/dydx/dydxViews/dydxViews/Themes/dydxStyle.json
@@ -62,8 +62,8 @@
         "_textColor": "text_primary"
     },
     "pill_tab_group_unselected_item": {
-        "_textColor": "text_tertiary",
-        "_layerColor": "layer_4"
+        "_textColor": "text_secondary",
+        "_layerColor": "layer_5"
     },
     "pill_tab_group_selected_item": {
         "_textColor": "text_primary",

diff --git a/dydx/dydxViews/dydxViews/_v4/Markets/Components/dydxMarketAssetItemView.swift b/dydx/dydxViews/dydxViews/_v4/Markets/Components/dydxMarketAssetItemView.swift
@@ -70,7 +70,7 @@ open class dydxMarketAssetItemViewModel: PlatformViewModel {
                                            trailing: trailing.wrappedViewModel)
                 .createView(parentStyle: parentStyle)
                 .frame(height: 64)
-                .themeGradient(background: .layer4, gradientType: gradientType)
+                .themeGradient(background: .layer3, gradientType: gradientType)
                 .cornerRadius(16)
 
             if isFavorited {

diff --git a/dydx/dydxViews/dydxViews/_v4/NewsAlerts/Components/Alerts/dydxAlertItem.swift b/dydx/dydxViews/dydxViews/_v4/NewsAlerts/Components/Alerts/dydxAlertItem.swift
@@ -58,7 +58,7 @@ public class dydxAlertItemModel: PlatformViewModel, Equatable {
                 Spacer()
             }
                 .padding(16)
-                .themeColor(background: .layer4)
+                .themeColor(background: .layer3)
                 .cornerRadius(16, corners: .allCorners)
                 .overlay(
                     RoundedRectangle(cornerRadius: 16)

diff --git a/dydx/dydxViews/dydxViews/_v4/Onboarding/TOS/dydxTosView.swift b/dydx/dydxViews/dydxViews/_v4/Onboarding/TOS/dydxTosView.swift
@@ -96,7 +96,7 @@ public class dydxTosViewModel: PlatformViewModel {
             .leftAligned()
             .padding()
         }
-        .themeColor(background: .layer4)
+        .themeColor(background: .layer3)
         .cornerRadius(12, corners: .allCorners)
     }
 

diff --git a/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/Sections/dydxPortfolioChartView.swift b/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/Sections/dydxPortfolioChartView.swift
@@ -53,7 +53,7 @@ public class dydxPortfolioChartViewModel: PlatformViewModel {
                     }
                     .frame(height: 290)
                     .frame(maxWidth: .infinity)
-                    .themeColor(background: .layer4)
+                    .themeColor(background: .layer3)
                     .cornerRadius(28)
                 }
                 .cornerRadius(28, corners: [.topLeft, .topRight])
@@ -100,15 +100,15 @@ public class dydxPortfolioChartViewModel: PlatformViewModel {
         let items = self.resolutionTitles?.compactMap {
             Text($0)
                 .themeFont(fontType: .bold, fontSize: .small)
-                .padding(8)
                 .themeColor(foreground: .textTertiary)
+                .padding(8)
                 .wrappedViewModel
         }
         let selectedItems = self.resolutionTitles?.compactMap {
             Text($0)
                 .themeFont(fontType: .bold, fontSize: .small)
+                .themeColor(foreground: .textPrimary)
                 .padding(8)
-                .themeColor(background: .layer0)
                 .cornerRadius(8)
                 .wrappedViewModel
         }

diff --git a/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/Sections/dydxPortfolioFeesView.swift b/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/Sections/dydxPortfolioFeesView.swift
@@ -192,7 +192,7 @@ public class dydxPortfolioFeesViewModel: PlatformViewModel {
         }
         .padding(.vertical, 10)
         .padding(.horizontal, 12)
-        .themeColor(background: .layer4)
+        .themeColor(background: .layer3)
         .cornerRadius(9, corners: .allCorners)
     }
 

diff --git a/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/Sections/dydxPortfolioPositionsView.swift b/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/Sections/dydxPortfolioPositionsView.swift
@@ -80,7 +80,7 @@ public class dydxPortfolioPositionItemViewModel: PlatformViewModel {
                                                       trailing: trailing.wrappedViewModel)
                                .createView(parentStyle: parentStyle)
                                .frame(height: 64)
-                               .themeGradient(background: .layer4, gradientType: self.gradientType)
+                               .themeGradient(background: .layer3, gradientType: self.gradientType)
                                .cornerRadius(16)
                                .onTapGesture { [weak self] in
                                    self?.handler?.onTapAction?()

diff --git a/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/dydxPortfolioHeaderView.swift b/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/dydxPortfolioHeaderView.swift
@@ -33,33 +33,34 @@ public class dydxPortfolioHeaderViewModel: PlatformViewModel {
         PlatformView(viewModel: self, parentStyle: parentStyle, styleKey: styleKey) { [weak self] style  in
             guard let self = self else { return AnyView(PlatformView.nilView) }
 
-            let title: String?
-            let icon: String?
+            let title: String
+            let icon: String
             let action: (() -> Void)?
+            let backgroundColor: ThemeColor.SemanticColor
+            let borderColor: ThemeColor.SemanticColor?
             switch self.state {
             case .onboard:
                 title = DataLocalizer.localize(path: "APP.ONBOARDING.GET_STARTED")
                 icon = "icon_wallet_connect"
                 action = self.onboardAction
+                backgroundColor = .colorPurple
+                borderColor = nil
             case .onboardCompleted:
                 title = DataLocalizer.localize(path: "APP.GENERAL.TRANSFER")
                 icon = "icon_transfer"
                 action = self.depositAction
+                backgroundColor = .layer4
+                borderColor = .layer6
             }
 
             return AnyView(
                 HStack {
-//                    Text(DataLocalizer.localize(path: "APP.PORTFOLIO.PORTFOLIO", params: nil))
-//                        .themeFont(fontType: .bold, fontSize: .largest)
-//
-//                    Spacer()
-
-                    Text(title ?? "")
+                    Text(title)
                         .themeFont(fontType: .bold, fontSize: .small)
                         .themeColor(foreground: .textTertiary)
 
                     let icon = PlatformIconViewModel(type: .asset(name: icon, bundle: Bundle.dydxView),
-                                                     clip: .circle(background: .layer5, spacing: 24, borderColor: .layer6),
+                                                     clip: .circle(background: backgroundColor, spacing: 24, borderColor: borderColor),
                                                      size: CGSize(width: 42, height: 42))
                     PlatformButtonViewModel(content: icon,
                                             type: .iconType,

diff --git a/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/dydxPortfolioSectionsView.swift b/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/dydxPortfolioSectionsView.swift
@@ -36,6 +36,7 @@ public class dydxPortfolioSectionsViewModel: PlatformViewModel {
             let selectedItems = self.itemTitles?.compactMap {
                 Text($0)
                     .themeFont(fontType: .bold, fontSize: .largest)
+                    .themeColor(foreground: .textPrimary)
                     .wrappedViewModel
             }
             return AnyView(

diff --git a/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/dydxPortfolioSelectorView.swift b/dydx/dydxViews/dydxViews/_v4/Portfolio/Components/dydxPortfolioSelectorView.swift
@@ -74,6 +74,7 @@ public class dydxPortfolioSelectorViewModel: PlatformViewModel {
                         HStack {
                             Text(items[selectedIndex].title ?? "")
                                 .themeFont(fontType: .bold, fontSize: .largest)
+                                .themeColor(foreground: .textPrimary)
                             PlatformIconViewModel(type: .system(name: self.present ? "chevron.up": "chevron.down"),
                                                   clip: .circle(background: .layer5, spacing: 16, borderColor: ThemeColor.SemanticColor.layer6),
                                                   size: CGSize(width: 28, height: 28),

diff --git a/dydx/dydxViews/dydxViews/_v4/Profile/Components/dydxProfileButtonsView.swift b/dydx/dydxViews/dydxViews/_v4/Profile/Components/dydxProfileButtonsView.swift
@@ -35,40 +35,45 @@ public class dydxProfileButtonsViewModel: PlatformViewModel {
                                       imageName: "icon_transfer_deposit",
                                       title: DataLocalizer.localize(path: "APP.GENERAL.DEPOSIT"),
                                       templateColor: self.onboarded ? .textSecondary : .textTertiary,
+                                      textColor: self.onboarded ? .textSecondary : .textTertiary,
                                       action: self.depositAction)
 
                     self.createButton(parentStyle: style,
                                       imageName: "icon_transfer_withdrawal",
                                       title: DataLocalizer.localize(path: "APP.GENERAL.WITHDRAW"),
                                       templateColor: self.onboarded ? .textSecondary : .textTertiary,
+                                      textColor: self.onboarded ? .textSecondary : .textTertiary,
                                       action: self.withdrawAction)
 
                     self.createButton(parentStyle: style,
                                       imageName: "icon_transfer_dydx",
                                       title: DataLocalizer.localize(path: "APP.GENERAL.TRANSFER"),
                                       templateColor: self.onboarded ? .textSecondary : .textTertiary,
+                                      textColor: self.onboarded ? .textSecondary : .textTertiary,
                                       action: self.transferAction)
 
                     if self.onboarded {
                         self.createButton(parentStyle: style,
                                           imageName: "settings_signout",
                                           title: DataLocalizer.localize(path: "APP.GENERAL.SIGN_OUT"),
                                           templateColor: nil,
+                                          textColor: .textSecondary,
                                           action: self.signOutAction)
                     } else {
                         self.createButton(parentStyle: style,
                                           imageName: "icon_wallet_connect",
                                           title: DataLocalizer.localize(path: "APP.GENERAL.CONNECT"),
                                           backgroundColor: .colorPurple,
                                           templateColor: .colorWhite,
+                                          textColor: .textSecondary,
                                           action: self.onboardAction)
                     }
                 }
             )
         }
     }
 
-    private func createButton(parentStyle: ThemeStyle, imageName: String, title: String, styleKey: String? = nil, backgroundColor: ThemeColor.SemanticColor = .layer3, templateColor: ThemeColor.SemanticColor?, action: (() -> Void)?) -> some View {
+    private func createButton(parentStyle: ThemeStyle, imageName: String, title: String, styleKey: String? = nil, backgroundColor: ThemeColor.SemanticColor = .layer3, templateColor: ThemeColor.SemanticColor?, textColor: ThemeColor.SemanticColor, action: (() -> Void)?) -> some View {
         let icon = PlatformIconViewModel(type: .asset(name: imageName, bundle: Bundle.dydxView),
                                      clip: .circle(background: backgroundColor, spacing: 24, borderColor: .layer6),
                                          size: CGSize(width: 48, height: 48),
@@ -77,7 +82,7 @@ public class dydxProfileButtonsViewModel: PlatformViewModel {
 
         let title = Text(title)
             .themeFont(fontSize: .small)
-            .themeColor(foreground: templateColor ?? .textSecondary)
+            .themeColor(foreground: textColor)
             .lineLimit(1)
 
         let buttonContent = VStack {

diff --git a/dydx/dydxViews/dydxViews/_v4/Profile/TradingNetwork/dydxTradingNetworkView.swift b/dydx/dydxViews/dydxViews/_v4/Profile/TradingNetwork/dydxTradingNetworkView.swift
@@ -49,7 +49,7 @@ public class dydxTradingNetworkItemViewModel: PlatformViewModel {
                             .createView(parentStyle: style)
                     }
                     .frame(width: UIScreen.main.bounds.width - 32, height: 64)
-                    .themeColor(background: .layer4)
+                    .themeColor(background: .layer3)
                     .cornerRadius(16)
                     .onTapGesture { [weak self] in
                         self?.onSelected?()

diff --git a/dydx/dydxViews/dydxViews/_v4/Profile/TradingRewards/Components/dydxRewardsHelpView.swift b/dydx/dydxViews/dydxViews/_v4/Profile/TradingRewards/Components/dydxRewardsHelpView.swift
@@ -20,7 +20,7 @@ public class dydxRewardsHelpViewModel: dydxTitledCardViewModel {
     private let listViewModel = PlatformListViewModel()
 
     public init() {
-        super.init(title: DataLocalizer.shared?.localize(path: "APP.GENERAL.HELP", params: nil) ?? "",
+        super.init(title: DataLocalizer.shared?.localize(path: "APP.HEADER.HELP", params: nil) ?? "",
                    verticalContentPadding: 0,
                    horizontalContentPadding: 0)
     }

diff --git a/dydx/dydxViews/dydxViews/_v4/Profile/TradingRewards/dydxTradingRewardsView.swift b/dydx/dydxViews/dydxViews/_v4/Profile/TradingRewards/dydxTradingRewardsView.swift
@@ -61,7 +61,6 @@ struct dydxTradingRewardsViewModel_Previews_Dark: PreviewProvider {
         ThemeSettings.applyStyles()
         return dydxHelpViewModel.previewValue
             .createView()
-            .themeColor(background: .layer0)
             .environmentObject(themeSettings)
             // .edgesIgnoringSafeArea(.bottom)
             .previewLayout(.sizeThatFits)
@@ -76,7 +75,6 @@ struct dydxTradingRewardsViewModel_Previews_Light: PreviewProvider {
         ThemeSettings.applyStyles()
         return dydxHelpViewModel.previewValue
             .createView()
-            .themeColor(background: .layer0)
             .environmentObject(themeSettings)
         // .edgesIgnoringSafeArea(.bottom)
             .previewLayout(.sizeThatFits)

diff --git a/dydx/dydxViews/dydxViews/_v4/Receipt/dydxReceiptView.swift b/dydx/dydxViews/dydxViews/_v4/Receipt/dydxReceiptView.swift
@@ -104,8 +104,7 @@ public class dydxReceiptViewModel: PlatformViewModel {
          .frame(maxWidth: .infinity)
          .padding()
          .themeColor(background: .layer3)
-         .cornerRadius(8)
-         .border(cornerRadius: 8)
+         .borderAndClip(style: .cornerRadius(12), borderColor: .borderDefault, lineWidth: 1)
          .padding(.horizontal, -8)
     }
 

diff --git a/dydx/dydxViews/dydxViews/_v4/Search/dydxSearchView.swift b/dydx/dydxViews/dydxViews/_v4/Search/dydxSearchView.swift
@@ -90,7 +90,7 @@ public class dydxSearchViewModel: PlatformViewModel {
                     .frame(height: 40)
                     .padding(.vertical, 2)
                     .padding(.horizontal, 12)
-                    .themeColor(background: .layer4)
+                    .themeColor(background: .layer3)
                     .clipShape(Capsule())
 
                 if presentationStyle == .modal {