Discharge7443/brave-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

(Wallet) Tweak onboarding layouts and styles following updated Figma design (#24063)

Browse Source 
* Fix network selection default networks
* Improve layouts and text styles based on updated Figma design
* Replace color name with Nala color name
This commit is contained in:
Simone Arpe
2024-06-12 19:01:32 +02:00
committed by GitHub
parent ec5d80559d
commit 4667e2e2c7
17 changed files with 119 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
android/java/org/chromium/chrome/browser/crypto_wallet/adapters/OnboardingNetworkSelectorGridAdapter.java
+6 -2
View File
@@ -262,8 +262,12 @@ public class OnboardingNetworkSelectorGridAdapter
final NetworkViewHolder networkViewHolder = (NetworkViewHolder) viewHolder;
NetworkInfo networkInfo = getNetworkInfo(position);
networkViewHolder.mSelectionCheckbox.setEnabled(
!ALWAYS_SELECTED_CHAIN_IDS.contains(networkInfo.chainId));
final boolean enableSelection =
!ALWAYS_SELECTED_CHAIN_IDS.contains(networkInfo.chainId);
networkViewHolder.mSelectionCheckbox.setEnabled(enableSelection);
networkViewHolder.itemView.setEnabled(enableSelection);
boolean selected = mSelectedNetworks.contains(networkInfo.hashCode());
networkViewHolder.mSelectionCheckbox.setChecked(selected);
networkViewHolder.itemView.setSelected(selected);
android/java/res/color/crypto_wallet_onboarding_button_text_color.xml
+1 -1
View File
@@ -8,5 +8,5 @@
<item android:state_enabled="false"
android:color="@color/text_disabled"/>
<item android:state_enabled="true"
android:color="@color/wallet_bg"/>
android:color="@color/text_on_primary"/>
</selector>
android/java/res/color/wallet_checkbox_background_color_selector.xml
+12
View File
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (c) 2024 The Brave Authors. All rights reserved.
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this file,
You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:color="@color/button_disabled" />
<item android:state_enabled="true"
android:color="@color/brave_wallet_dn_button_color" />
</selector>
android/java/res/color/wallet_checkbox_color_selector.xml
+12
View File
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (c) 2024 The Brave Authors. All rights reserved.
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this file,
You can obtain one at https://mozilla.org/MPL/2.0/.
-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:color="@color/text_disabled"/>
<item android:state_enabled="true"
android:color="@color/wallet_bg"/>
</selector>
android/java/res/layout/fragment_creating_wallet.xml
+6 -8
View File
@@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/creating_wallet_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
@@ -24,25 +23,24 @@
android:layout_gravity="center_horizontal" />
<TextView
style="@style/BraveWalletTextViewTitle"
style="@style/HeadingH3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginHorizontal="32dp"
android:layout_marginBottom="8dp"
android:text="@string/creating_wallet_onboarding_text"
android:textColor="@color/wallet_text_color"
android:lineSpacingExtra="2sp"
android:textSize="22sp"/>
android:textColor="@color/text_primary"
android:textStyle="bold" />
<TextView
style="@style/DefaultRegular"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginHorizontal="32dp"
android:layout_marginBottom="16dp"
android:text="@string/creating_wallet_subtitle_text"
android:textColor="@color/wallet_onboarding_secondary_text_color"
android:lineSpacingExtra="4sp"
android:textSize="14sp"/>
android:textColor="@color/text_secondary" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
android/java/res/layout/fragment_onboarding_network_selection.xml
+8 -13
View File
@@ -13,7 +13,7 @@
<TextView
android:id="@+id/supported_networks"
style="@style/BraveWalletTextViewTitle"
style="@style/HeadingH3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
@@ -23,11 +23,11 @@
android:layout_marginTop="14dp"
android:layout_marginBottom="18dp"
android:text="@string/supported_networks"
android:textColor="@color/wallet_text_color"
android:lineSpacingExtra="2sp"
android:textSize="22sp"/>
android:textColor="@color/text_primary"
android:textStyle="bold" />
<TextView
style="@style/DefaultRegular"
android:id="@+id/choose_blockchains"
android:layout_width="match_parent"
android:layout_height="wrap_content"
@@ -37,9 +37,7 @@
android:layout_below="@+id/supported_networks"
android:layout_alignParentStart="true"
android:text="@string/choose_blockchains"
android:textColor="@color/wallet_onboarding_secondary_text_color"
android:lineSpacingExtra="4sp"
android:textSize="14sp"/>
android:textColor="@color/text_secondary" />
<com.google.android.material.textfield.TextInputLayout
style="@style/BraveWalletInputLayout"
@@ -72,9 +70,7 @@
android:layout_alignParentEnd="true"
android:layout_below="@+id/network_search_layout"
android:text="@string/show_testnets"
android:textColor="@color/wallet_text_color"
android:lineSpacingExtra="4sp"
android:textSize="14sp" />
android:textColor="@color/text_primary" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view_networks"
@@ -100,6 +96,7 @@
style="@style/BraveWalletOnboardingButton"/>
<TextView
style="@style/SmallRegular"
android:id="@+id/add_networks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
@@ -110,7 +107,5 @@
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:text="@string/add_networks"
android:textColor="@color/wallet_tertiary_layout_text_color"
android:lineSpacingExtra="2sp"
android:textSize="12sp"/>
android:textColor="@color/text_tertiary" />
</RelativeLayout>
android/java/res/layout/fragment_secure_password.xml
+4 -8
View File
@@ -1,7 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
@@ -16,7 +15,7 @@
android:orientation="vertical">
<TextView
style="@style/BraveWalletTextViewTitle"
style="@style/HeadingH3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
@@ -25,20 +24,17 @@
android:layout_marginBottom="18dp"
android:text="@string/create_password"
android:textColor="@color/wallet_text_color"
android:lineSpacingExtra="2sp"
android:textSize="22sp"
/>
android:textStyle="bold" />
<TextView
style="@style/DefaultRegular"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginHorizontal="16dp"
android:layout_marginBottom="40dp"
android:text="@string/create_password_subtitle"
android:textColor="@color/wallet_onboarding_secondary_text_color"
android:lineSpacingExtra="4sp"
android:textSize="14sp"/>
android:textColor="@color/text_secondary" />
<org.chromium.chrome.browser.custom_layout.PasswordStrengthMeterView
android:id="@+id/password_strength_meter"
android/java/res/layout/fragment_setup_wallet.xml
+13 -23
View File
@@ -15,27 +15,26 @@
android:gravity="center_vertical"
android:orientation="vertical">
<TextView
style="@style/HeadingH1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginHorizontal="32dp"
android:layout_marginBottom="16dp"
android:lineSpacingExtra="2sp"
android:text="@string/defi_secure_storage"
android:lines="3"
android:textColor="@color/wallet_text_color"
android:textSize="36sp"
style="@style/BraveWalletTextViewTitle"/>
android:textStyle="bold" />
<TextView
style="@style/LargeRegular"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginHorizontal="32dp"
android:layout_marginBottom="16dp"
android:text="@string/defi_secure_storage_text"
android:textColor="@color/wallet_onboarding_secondary_text_color"
android:lineSpacingExtra="5sp"
android:textSize="16sp"/>
android:textColor="@color/text_secondary" />
<androidx.cardview.widget.CardView
android:id="@+id/new_wallet_card_view"
@@ -65,31 +64,26 @@
android:layout_alignParentStart="true"/>
<TextView
style="@style/HeadingH3"
android:id="@+id/setup_crypto_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="@string/setup_crypto"
android:textColor="@color/wallet_text_color"
android:textSize="22sp"
android:lineSpacingExtra="2sp"
android:layout_toEndOf="@+id/add_new_wallet_icon"
style="@style/BraveWalletTextViewTitle"
/>
android:textStyle="bold" />
<TextView
style="@style/DefaultRegular"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/setup_crypto_description"
android:textColor="@color/wallet_onboarding_secondary_text_color"
android:textSize="14sp"
android:lineSpacingExtra="4sp"
android:textColor="@color/text_secondary"
android:layout_toEndOf="@+id/add_new_wallet_icon"
android:layout_below="@+id/setup_crypto_text_view"
/>
</RelativeLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
@@ -120,27 +114,24 @@
android:layout_alignParentStart="true"/>
<TextView
style="@style/HeadingH3"
android:id="@+id/restore_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="@string/already_have_a_wallet"
android:textColor="@color/wallet_text_color"
android:textSize="22sp"
android:lineSpacingExtra="2sp"
android:layout_toEndOf="@+id/restore_wallet_icon"
style="@style/BraveWalletTextViewTitle"
/>
android:textStyle="bold" />
<TextView
style="@style/DefaultRegular"
android:id="@+id/restore_description_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="@string/already_have_a_wallet_description"
android:textColor="@color/wallet_onboarding_secondary_text_color"
android:textSize="14sp"
android:lineSpacingExtra="4sp"
android:textColor="@color/text_secondary"
android:layout_toEndOf="@+id/restore_wallet_icon"
android:layout_below="@+id/restore_text_view"
/>
@@ -187,5 +178,4 @@
</RelativeLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
android/java/res/layout/fragment_terms_of_use_wallet.xml
+6 -12
View File
@@ -19,7 +19,7 @@
<TextView
android:id="@+id/before_we_begin"
style="@style/BraveWalletTextViewTitle"
style="@style/HeadingH3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
@@ -30,10 +30,10 @@
android:layout_marginBottom="18dp"
android:text="@string/before_we_begin"
android:textColor="@color/wallet_text_color"
android:lineSpacingExtra="2sp"
android:textSize="22sp"/>
android:textStyle="bold" />
<TextView
style="@style/DefaultRegular"
android:id="@+id/wallet_accept_items"
android:layout_width="match_parent"
android:layout_height="wrap_content"
@@ -43,9 +43,7 @@
android:layout_below="@+id/before_we_begin"
android:layout_alignParentStart="true"
android:text="@string/wallet_accept_items"
android:textColor="@color/wallet_onboarding_secondary_text_color"
android:lineSpacingExtra="4sp"
android:textSize="14sp"/>
android:textColor="@color/text_secondary" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/self_custody_check_box"
@@ -59,9 +57,7 @@
android:paddingHorizontal="16dp"
android:text="@string/understand_self_custody"
android:textColor="@color/wallet_text_color"
android:lineSpacingExtra="4sp"
android:textSize="14sp"
android:gravity="top|start"/>
android:gravity="top|start" />
<com.google.android.material.checkbox.MaterialCheckBox
android:id="@+id/terms_of_use_check_box"
@@ -73,9 +69,7 @@
android:layout_below="@+id/self_custody_check_box"
android:layout_alignParentStart="true"
android:paddingHorizontal="16dp"
android:textColor="@color/wallet_text_color"
android:lineSpacingExtra="4sp"
android:textSize="14sp"/>
android:textColor="@color/wallet_text_color" />
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/continue_button"
android/java/res/layout/fragment_unlock_wallet.xml
+1 -1
View File
@@ -30,7 +30,7 @@
android:gravity="center_horizontal"
android:lineSpacingExtra="5sp"
android:text="@string/unlock_wallet_subtitle"
android:textColor="@color/wallet_onboarding_secondary_text_color"
android:textColor="@color/text_secondary"
android:textSize="16sp" />
<com.google.android.material.textfield.TextInputLayout
android/java/res/layout/view_holder_onboarding_header_network_selector.xml
+6 -2
View File
@@ -9,20 +9,24 @@
android:layout_height="wrap_content"
android:layout_marginHorizontal="4dp">
<TextView
style="@style/XSmallSemibold"
android:textStyle="bold"
android:id="@+id/network_selector_label_name"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="4dp"
android:layout_gravity="start"
android:textColor="@color/wallet_tertiary_layout_text_color"
android:textSize="12sp"/>
/>
<TextView
style="@style/XSmallSemibold"
android:textStyle="bold"
android:id="@+id/select_all_networks"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingVertical="4dp"
android:layout_gravity="end"
android:textColor="@color/brave_wallet_dn_button_color"
android:textSize="12sp" />
/>
</FrameLayout>
android/java/res/layout/view_holder_onboarding_network_selector.xml
+4 -4
View File
@@ -44,15 +44,15 @@
android:layout_marginBottom="4dp"/>
<TextView
style="@style/BraveWalletTextView"
style="@style/SmallRegular"
android:id="@+id/network_selector_network_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_centerHorizontal="true"
android:layout_marginHorizontal="4dp"
android:layout_below="@+id/network_selector_logo"
android:textSize="12sp"
android:gravity="center"
android:lineSpacingExtra="2sp" />
android:gravity="center" />
</RelativeLayout>
</com.google.android.material.card.MaterialCardView>
android/java/res/values-night/brave_colors.xml
+3 -2
View File
@@ -46,11 +46,12 @@
<color name="brave_wallet_dn_error_text_bg_color">#453e2d</color>
<color name="brave_wallet_dn_highlight_bg_color">#1F1F27</color>
<color name="brave_wallet_onboarding_card_view_background">#0D1214</color>
<color name="brave_wallet_checkbox_color">#7C91FF</color>
<color name="brave_wallet_dn_button_color">#C1C4FF</color>
<!-- Brave wallet 2.0 colors -->
<color name="brave_wallet_dn_panel_bg">@color/wallet_bg</color>
<color name="text_disabled">#80EBEEF0</color>
<color name="text_on_primary">#251491</color>
<color name="icon_interactive">#7C91FF</color>
<color name="divider_subtle">#66687B85</color>
<color name="system_feedback_error">#FFB1B0</color>
@@ -133,7 +134,6 @@
<color name="wallet_text_color">#F6F7F8</color>
<color name="wallet_secondary_text_color">#84889C</color>
<color name="wallet_onboarding_secondary_text_color">#DADFE1</color>
<color name="wallet_secondary_layout_text_color">#C2C4CF</color>
<color name="recovery_phrase_text_color">#1E2029</color>
<color name="wallet_toolbar_bg_color">#000000</color>
@@ -256,5 +256,6 @@
<color name="text_primary">#F3F5F7</color>
<color name="text_secondary">#BECAD0</color>
<color name="text_tertiary">#a1b2ba</color>
<color name="primary_20">#2A118E</color>
</resources>
android/java/res/values/brave_colors.xml
+4 -4
View File
@@ -35,13 +35,13 @@
<color name="brave_wallet_dn_error_text_bg_color">#F0F2FF</color>
<color name="brave_wallet_dn_highlight_bg_color">#FFFFFF</color>
<color name="brave_wallet_onboarding_card_view_background">#FFFFFF</color>
<color name="brave_wallet_dn_button_color">#3F39E8</color>
<color name="brave_wallet_checkbox_color">@color/brave_wallet_dn_button_color</color>
<!-- Brave wallet 2.0 colors -->
<color name="brave_wallet_dn_button_color">#3E37D4</color>
<!-- Brave wallet 2.0 colors -->
<color name="brave_wallet_dn_panel_bg">#EDEEF1</color>
<color name="button_disabled">#4D687B85</color>
<color name="text_disabled">#8021272A</color>
<color name="text_on_primary">#FFFFFF</color>
<color name="icon_interactive">#3F39E8</color>
<color name="divider_subtle">#66A1B2BA</color>
<color name="system_feedback_error">#B3002A</color>
@@ -225,7 +225,6 @@
<color name="wallet_text_color">#0D0F14</color>
<color name="wallet_secondary_text_color">#686978</color>
<color name="wallet_onboarding_secondary_text_color">#3F4E55</color>
<color name="wallet_secondary_layout_text_color">#495057</color>
<color name="wallet_tertiary_layout_text_color">#62757E</color>
<color name="recovery_phrase_text_color">#F8F9FA</color>
@@ -390,6 +389,7 @@
<color name="text_primary">#0D1214</color>
<color name="text_secondary">#3f4e55</color>
<color name="text_tertiary">#62757e</color>
<color name="primary_20">#d5dcff</color>
<color name="button_background">#3F39E8</color>
<color name="primitive_primary_20">#d5dcff</color>
android/java/res/values/brave_dimens.xml
+3
View File
@@ -50,5 +50,8 @@
<dimen name="large_regular">16sp</dimen>
<dimen name="default_semibold">14sp</dimen>
<dimen name="small_regular">12sp</dimen>
<dimen name="x_small_semibold">11sp</dimen>
<dimen name="heading_h1">32sp</dimen>
<dimen name="heading_h3">22sp</dimen>
<dimen name="heading_h4">16sp</dimen>
</resources>
android/java/res/values/brave_styles.xml
+28 -1
View File
@@ -73,7 +73,13 @@
</style>
<style name="BraveWalletCheckBox" parent="Widget.MaterialComponents.CompoundButton.CheckBox">
<item name="buttonTint">@color/brave_wallet_checkbox_color</item>
<item name="buttonTint">@color/wallet_checkbox_background_color_selector</item>
<item name="buttonIconTint">@color/wallet_checkbox_color_selector</item>
<item name="android:textSize">@dimen/default_regular</item>
<item name="lineHeight">20sp</item>
<item name="fontStyle">normal</item>
<item name="fontWeight">400</item>
</style>
<style name="BraveWalletInputLayoutTheme">
@@ -382,6 +388,27 @@
<item name="fontWeight">600</item>
</style>
<style name="XSmallSemibold">
<item name="android:textSize">@dimen/x_small_semibold</item>
<item name="lineHeight">16sp</item>
<item name="fontStyle">normal</item>
<item name="fontWeight">600</item>
</style>
<style name="HeadingH1">
<item name="android:textSize">@dimen/heading_h1</item>
<item name="lineHeight">40sp</item>
<item name="fontStyle">normal</item>
<item name="fontWeight">500</item>
</style>
<style name="HeadingH3">
<item name="android:textSize">@dimen/heading_h3</item>
<item name="lineHeight">28sp</item>
<item name="fontStyle">normal</item>
<item name="fontWeight">500</item>
</style>
<style name="HeadingH4">
<item name="android:textSize">@dimen/heading_h4</item>
<item name="lineHeight">24sp</item>