Skip to content

Commit 2e5565a

Browse files
anikikianikiki
authored
Update the UI as in the latest design (#6812)
Task/Issue URL: https://app.asana.com/1/137249556945/project/1200581511062568/task/1211317222307616?focus=true ### Description Redesigned the browser comparison prompt screen with a new UI that follows the latest design guidelines. The screen now has a modern look with a gradient background, updated icons, and improved layout. ### Steps to test this PR _Browser Comparison Prompt_ - [x] Checkout the branch and apply the patch attached to the task (this will give you access to the screen at app start) -> https://app.asana.com/app/asana/-/get_asset?asset_id=1211387823450274 - [x] Install the app - [x] Open the app and notice the screen is displayed - [x] Verify the new UI displays correctly with the gradient background in light and dark mode - [x] Confirm the close button works properly - [x] Test that the "Open Links With DuckDuckGo" button opens the dialog to select DDG as default - [x] Verify the new "Maybe Later" button dismisses the screen - [x] Check that the comparison chart displays correctly with all icons and text - [x] Ensure the screen is locked in Portrait ### UI changes | Light mode | Dark mode | | ------ | ----- | |<img width="1080" height="2340" alt="Screenshot_20250917_185437" src="https://github.com/user-attachments/assets/cc3c8a93-2744-412f-891e-d06694c6a56a" />|<img width="1080" height="2340" alt="Screenshot_20250917_185504" src="https://github.com/user-attachments/assets/4f85341c-04c2-453c-b734-fc5c7740cd7d" />| | Light mode (scrolled) | Dark mode (scrolled) | | ------ | ----- | |<img width="1080" height="2340" alt="Screenshot_20250917_185444" src="https://github.com/user-attachments/assets/dc4c128b-7009-4fa1-bdb9-9b3f10acff03" />|<img width="1080" height="2340" alt="Screenshot_20250917_185509" src="https://github.com/user-attachments/assets/efdd9767-3b23-4875-88a8-54c337e0879c" />|
1 parent 0749f71 commit 2e5565a

23 files changed

+1059
-680
lines changed

‎dax-prompts/dax-prompts-impl/src/main/AndroidManifest.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<activity
2525
android:name="com.duckduckgo.daxprompts.impl.ui.DaxPromptBrowserComparisonActivity"
2626
android:exported="false"
27+
android:screenOrientation="portrait"
2728
android:label="@string/dax_prompt_browser_comparison_title" />
2829
</application>
2930
</manifest>

‎dax-prompts/dax-prompts-impl/src/main/java/com/duckduckgo/daxprompts/impl/ui/DaxPromptBrowserComparisonActivity.kt‎

Lines changed: 5 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,9 @@ import android.app.Activity
2020
import android.content.Intent
2121
import android.graphics.Color
2222
import android.os.Bundle
23-
import android.text.Annotation
24-
import android.text.SpannableString
25-
import android.text.Spanned
26-
import android.text.SpannedString
27-
import android.text.method.LinkMovementMethod
28-
import android.text.style.ClickableSpan
29-
import android.text.style.ForegroundColorSpan
30-
import android.view.View
3123
import android.view.WindowManager
3224
import androidx.activity.result.ActivityResult
3325
import androidx.activity.result.contract.ActivityResultContracts
34-
import androidx.core.content.ContextCompat
3526
import androidx.core.view.ViewCompat
3627
import androidx.core.view.WindowCompat
3728
import androidx.lifecycle.Lifecycle
@@ -41,10 +32,8 @@ import com.duckduckgo.anvil.annotations.ContributeToActivityStarter
4132
import com.duckduckgo.anvil.annotations.InjectWith
4233
import com.duckduckgo.browser.api.ui.BrowserScreens.WebViewActivityWithParams
4334
import com.duckduckgo.common.ui.DuckDuckGoActivity
44-
import com.duckduckgo.common.ui.view.getColorFromAttr
4535
import com.duckduckgo.common.ui.viewbinding.viewBinding
4636
import com.duckduckgo.daxprompts.api.DaxPromptBrowserComparisonNoParams
47-
import com.duckduckgo.daxprompts.impl.R
4837
import com.duckduckgo.daxprompts.impl.databinding.ActivityDaxPromptBrowserComparisonBinding
4938
import com.duckduckgo.daxprompts.impl.ui.DaxPromptBrowserComparisonViewModel.Command
5039
import com.duckduckgo.di.scopes.ActivityScope
@@ -78,12 +67,7 @@ class DaxPromptBrowserComparisonActivity : DuckDuckGoActivity() {
7867
super.onCreate(savedInstanceState)
7968

8069
setContentView(binding.root)
81-
if (isDarkThemeEnabled()) {
82-
renderDarkUi()
83-
} else {
84-
renderLightUi()
85-
}
86-
configureClickableLinks()
70+
8771
setupListeners()
8872
setupObservers()
8973
}
@@ -94,86 +78,17 @@ class DaxPromptBrowserComparisonActivity : DuckDuckGoActivity() {
9478
markAsShown()
9579
}
9680

97-
private fun renderDarkUi() {
98-
binding.orangeShape.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.background_shape_dark))
99-
binding.daxPromptBrowserComparisonContainer.setBackgroundColor(getColor(R.color.daxPromptBackgroundDark))
100-
binding.daxPromptBrowserComparisonMessageContainer.background = ContextCompat.getDrawable(this, R.drawable.background_dax_message_dark)
101-
binding.daxPromptBrowserComparisonPrimaryButton.background = ContextCompat.getDrawable(this, R.drawable.background_button_dark_with_ripple)
102-
binding.daxPromptBrowserComparisonPrimaryButton.setTextColor(getColor(com.duckduckgo.mobile.android.R.color.black))
103-
binding.daxPromptBrowserComparisonChart.featureIcon1.setImageDrawable(
104-
ContextCompat.getDrawable(
105-
this,
106-
R.drawable.ic_comparison_chart_search_dark,
107-
),
108-
)
109-
}
110-
111-
private fun renderLightUi() {
112-
binding.orangeShape.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.background_shape))
113-
binding.daxPromptBrowserComparisonContainer.setBackgroundColor(getColor(R.color.daxPromptBackground))
114-
binding.daxPromptBrowserComparisonMessageContainer.background = ContextCompat.getDrawable(this, R.drawable.background_dax_message)
115-
binding.daxPromptBrowserComparisonPrimaryButton.background = ContextCompat.getDrawable(this, R.drawable.background_button_with_ripple)
116-
binding.daxPromptBrowserComparisonPrimaryButton.setTextColor(getColor(com.duckduckgo.mobile.android.R.color.white))
117-
binding.daxPromptBrowserComparisonChart.featureIcon1.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.ic_comparison_chart_search))
118-
}
119-
120-
private fun configureClickableLinks() {
121-
with(binding.daxPromptBrowserComparisonMoreLink) {
122-
text = addClickableLinks()
123-
movementMethod = LinkMovementMethod.getInstance()
124-
}
125-
}
126-
127-
private fun addClickableLinks(): SpannableString {
128-
val fullText = getText(R.string.dax_prompt_browser_comparison_more_link) as SpannedString
129-
130-
val spannableString = SpannableString(fullText)
131-
val annotations = fullText.getSpans(0, fullText.length, Annotation::class.java)
132-
133-
annotations?.find { it.value == LINK_ANNOTATION }?.let {
134-
addSpannable(spannableString, fullText, it) {
135-
viewModel.onMoreLinkClicked()
136-
}
137-
}
138-
139-
return spannableString
140-
}
141-
142-
private fun addSpannable(
143-
spannableString: SpannableString,
144-
fullText: SpannedString,
145-
it: Annotation,
146-
onClick: (widget: View) -> Unit,
147-
) {
148-
spannableString.apply {
149-
setSpan(
150-
object : ClickableSpan() {
151-
override fun onClick(widget: View) {
152-
onClick(widget)
153-
}
154-
},
155-
fullText.getSpanStart(it),
156-
fullText.getSpanEnd(it),
157-
Spanned.SPAN_INCLUSIVE_INCLUSIVE,
158-
)
159-
setSpan(
160-
ForegroundColorSpan(
161-
getColorFromAttr(com.duckduckgo.mobile.android.R.attr.daxColorAccentBlue),
162-
),
163-
fullText.getSpanStart(it),
164-
fullText.getSpanEnd(it),
165-
Spanned.SPAN_INCLUSIVE_INCLUSIVE,
166-
)
167-
}
168-
}
169-
17081
private fun setupListeners() {
17182
binding.daxPromptBrowserComparisonCloseButton.setOnClickListener {
17283
viewModel.onCloseButtonClicked()
17384
}
17485
binding.daxPromptBrowserComparisonPrimaryButton.setOnClickListener {
17586
viewModel.onPrimaryButtonClicked()
17687
}
88+
89+
binding.daxPromptBrowserComparisonGhostButton?.setOnClickListener {
90+
viewModel.onGhostButtonClicked()
91+
}
17792
}
17893

17994
private fun setupObservers() {
@@ -228,7 +143,6 @@ class DaxPromptBrowserComparisonActivity : DuckDuckGoActivity() {
228143
}
229144

230145
companion object {
231-
private const val LINK_ANNOTATION = "more_link"
232146
const val DAX_PROMPT_BROWSER_COMPARISON_SET_DEFAULT_EXTRA = "DAX_PROMPT_BROWSER_COMPARISON_SET_DEFAULT_EXTRA"
233147
}
234148
}

‎dax-prompts/dax-prompts-impl/src/main/java/com/duckduckgo/daxprompts/impl/ui/DaxPromptBrowserComparisonViewModel.kt‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,12 @@ class DaxPromptBrowserComparisonViewModel @Inject constructor(
7979
}
8080
}
8181

82+
fun onGhostButtonClicked() {
83+
viewModelScope.launch {
84+
command.send(Command.CloseScreen())
85+
}
86+
}
87+
8288
fun onDefaultBrowserSet() {
8389
defaultRoleBrowserDialog.dialogShown()
8490
viewModelScope.launch {

‎dax-prompts/dax-prompts-impl/src/main/res/drawable-night/background.xml‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!--
2+
~ Copyright (c) 2025 DuckDuckGo
3+
~
4+
~ Licensed under the Apache License, Version 2.0 (the "License");
5+
~ you may not use this file except in compliance with the License.
6+
~ You may obtain a copy of the License at
7+
~
8+
~ http://www.apache.org/licenses/LICENSE-2.0
9+
~
10+
~ Unless required by applicable law or agreed to in writing, software
11+
~ distributed under the License is distributed on an "AS IS" BASIS,
12+
~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
~ See the License for the specific language governing permissions and
14+
~ limitations under the License.
15+
-->
16+
17+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
18+
xmlns:aapt="http://schemas.android.com/aapt"
19+
android:width="390dp"
20+
android:height="836dp"
21+
android:viewportWidth="390"
22+
android:viewportHeight="836">
23+
<group>
24+
<clip-path android:pathData="M0,-31h390v866.67h-390z" />
25+
<path
26+
android:fillColor="#070019"
27+
android:pathData="M0,-31h390v866.67h-390z" />
28+
<path android:pathData="M0,-31h390v866.67h-390z">
29+
<aapt:attr name="android:fillColor">
30+
<gradient
31+
android:centerX="390"
32+
android:centerY="835.67"
33+
android:gradientRadius="655.87"
34+
android:type="radial">
35+
<item
36+
android:color="#7A14307E"
37+
android:offset="0" />
38+
<item
39+
android:color="#B70B2059"
40+
android:offset="1" />
41+
</gradient>
42+
</aapt:attr>
43+
</path>
44+
<path android:pathData="M0,-31h390v866.67h-390z">
45+
<aapt:attr name="android:fillColor">
46+
<gradient
47+
android:centerX="432.5"
48+
android:centerY="626.7"
49+
android:gradientRadius="636.55"
50+
android:type="radial">
51+
<item
52+
android:color="#A33E228C"
53+
android:offset="0" />
54+
<item
55+
android:color="#003E228C"
56+
android:offset="1" />
57+
</gradient>
58+
</aapt:attr>
59+
</path>
60+
<path
61+
android:fillAlpha="0.56"
62+
android:fillColor="#8FABF9"
63+
android:pathData="M195.94,1.65L198.26,1.04C198.69,0.95 199.11,0.51 199.2,0.07L199.8,-2.31C199.97,-2.92 200.49,-3.27 201,-3.27C201.6,-3.27 202.11,-2.83 202.2,-2.31L202.8,0.07C202.89,0.51 203.31,0.95 203.74,1.04L206.06,1.65C206.66,1.83 207,2.36 207,2.89C207,3.5 206.57,4.03 206.06,4.12L203.74,4.73C203.31,4.82 202.89,5.26 202.8,5.7L202.2,8.08C202.03,8.7 201.51,9.05 201,9.05C200.4,9.05 199.89,8.61 199.8,8.08L199.2,5.7C199.11,5.26 198.69,4.82 198.26,4.73L195.94,4.12C195.34,3.94 195,3.41 195,2.89C195,2.27 195.43,1.74 195.94,1.65Z"
64+
android:strokeAlpha="0.56" />
65+
<path
66+
android:fillAlpha="0.56"
67+
android:fillColor="#8FABF9"
68+
android:pathData="M94.94,54.02L97.26,53.41C97.69,53.32 98.11,52.88 98.2,52.44L98.8,50.06C98.97,49.45 99.49,49.09 100,49.09C100.6,49.09 101.11,49.53 101.2,50.06L101.8,52.44C101.89,52.88 102.31,53.32 102.74,53.41L105.06,54.02C105.66,54.2 106,54.73 106,55.26C106,55.87 105.57,56.4 105.06,56.49L102.74,57.1C102.31,57.19 101.89,57.63 101.8,58.07L101.2,60.45C101.03,61.06 100.51,61.42 100,61.42C99.4,61.42 98.89,60.98 98.8,60.45L98.2,58.07C98.11,57.63 97.69,57.19 97.26,57.1L94.94,56.49C94.34,56.31 94,55.78 94,55.26C94,54.64 94.43,54.11 94.94,54.02Z"
69+
android:strokeAlpha="0.56" />
70+
<path
71+
android:fillAlpha="0.56"
72+
android:fillColor="#8FABF9"
73+
android:pathData="M341.94,140.28L344.26,139.66C344.69,139.58 345.11,139.13 345.2,138.7L345.8,136.32C345.97,135.7 346.49,135.35 347,135.35C347.6,135.35 348.11,135.79 348.2,136.32L348.8,138.7C348.89,139.13 349.31,139.58 349.74,139.66L352.06,140.28C352.66,140.46 353,140.98 353,141.51C353,142.13 352.57,142.66 352.06,142.74L349.74,143.36C349.31,143.45 348.89,143.89 348.8,144.33L348.2,146.71C348.03,147.32 347.51,147.67 347,147.67C346.4,147.67 345.89,147.23 345.8,146.71L345.2,144.33C345.11,143.89 344.69,143.45 344.26,143.36L341.94,142.74C341.34,142.57 341,142.04 341,141.51C341,140.9 341.43,140.37 341.94,140.28Z"
74+
android:strokeAlpha="0.56" />
75+
<path
76+
android:fillAlpha="0.36"
77+
android:fillColor="#8FABF9"
78+
android:pathData="M353.63,12.33L355.17,11.92C355.46,11.86 355.74,11.57 355.8,11.28L356.2,9.69C356.31,9.28 356.66,9.05 357,9.05C357.4,9.05 357.74,9.34 357.8,9.69L358.2,11.28C358.26,11.57 358.54,11.86 358.83,11.92L360.37,12.33C360.77,12.45 361,12.8 361,13.15C361,13.57 360.71,13.92 360.37,13.98L358.83,14.39C358.54,14.45 358.26,14.74 358.2,15.03L357.8,16.62C357.69,17.03 357.34,17.26 357,17.26C356.6,17.26 356.26,16.97 356.2,16.62L355.8,15.03C355.74,14.74 355.46,14.45 355.17,14.39L353.63,13.98C353.23,13.86 353,13.51 353,13.15C353,12.74 353.29,12.39 353.63,12.33Z"
79+
android:strokeAlpha="0.36" />
80+
<path
81+
android:fillAlpha="0.36"
82+
android:fillColor="#8FABF9"
83+
android:pathData="M207.63,176.63L209.17,176.22C209.46,176.16 209.74,175.87 209.8,175.57L210.2,173.99C210.31,173.58 210.66,173.34 211,173.34C211.4,173.34 211.74,173.64 211.8,173.99L212.2,175.57C212.26,175.87 212.54,176.16 212.83,176.22L214.37,176.63C214.77,176.75 215,177.1 215,177.45C215,177.86 214.71,178.21 214.37,178.27L212.83,178.68C212.54,178.74 212.26,179.04 212.2,179.33L211.8,180.91C211.69,181.32 211.34,181.56 211,181.56C210.6,181.56 210.26,181.27 210.2,180.91L209.8,179.33C209.74,179.04 209.46,178.74 209.17,178.68L207.63,178.27C207.23,178.16 207,177.8 207,177.45C207,177.04 207.29,176.69 207.63,176.63Z"
84+
android:strokeAlpha="0.36" />
85+
<path
86+
android:fillAlpha="0.36"
87+
android:fillColor="#8FABF9"
88+
android:pathData="M67.63,193.06L69.17,192.65C69.46,192.59 69.74,192.3 69.8,192L70.2,190.42C70.31,190.01 70.66,189.77 71,189.77C71.4,189.77 71.74,190.07 71.8,190.42L72.2,192C72.26,192.3 72.54,192.59 72.83,192.65L74.37,193.06C74.77,193.18 75,193.53 75,193.88C75,194.29 74.71,194.64 74.37,194.7L72.83,195.11C72.54,195.17 72.26,195.47 72.2,195.76L71.8,197.34C71.69,197.75 71.34,197.99 71,197.99C70.6,197.99 70.26,197.7 70.2,197.34L69.8,195.76C69.74,195.47 69.46,195.17 69.17,195.11L67.63,194.7C67.23,194.59 67,194.23 67,193.88C67,193.47 67.29,193.12 67.63,193.06Z"
89+
android:strokeAlpha="0.36" />
90+
<path
91+
android:fillAlpha="0.56"
92+
android:fillColor="#8FABF9"
93+
android:pathData="M270,44.99C268.9,44.99 268,44.06 268,42.93C268,41.8 268.9,40.88 270,40.88C271.1,40.88 272,41.8 272,42.93C272,44.06 271.1,44.99 270,44.99Z"
94+
android:strokeAlpha="0.56" />
95+
<path
96+
android:fillAlpha="0.36"
97+
android:fillColor="#8FABF9"
98+
android:pathData="M181,17.26C179.9,17.26 179,16.34 179,15.21C179,14.08 179.9,13.15 181,13.15C182.1,13.15 183,14.08 183,15.21C183,16.34 182.1,17.26 181,17.26Z"
99+
android:strokeAlpha="0.36" />
100+
<path
101+
android:fillAlpha="0.36"
102+
android:fillColor="#8FABF9"
103+
android:pathData="M306,178.48C304.9,178.48 304,177.55 304,176.43C304,175.29 304.9,174.37 306,174.37C307.1,174.37 308,175.29 308,176.43C308,177.55 307.1,178.48 306,178.48Z"
104+
android:strokeAlpha="0.36" />
105+
<path
106+
android:fillAlpha="0.36"
107+
android:fillColor="#8FABF9"
108+
android:pathData="M363,300.67C361.9,300.67 361,299.75 361,298.62C361,297.49 361.9,296.57 363,296.57C364.1,296.57 365,297.49 365,298.62C365,299.75 364.1,300.67 363,300.67Z"
109+
android:strokeAlpha="0.36" />
110+
<path
111+
android:fillAlpha="0.36"
112+
android:fillColor="#8FABF9"
113+
android:pathData="M35,219.55C33.9,219.55 33,218.63 33,217.5C33,216.37 33.9,215.45 35,215.45C36.1,215.45 37,216.37 37,217.5C37,218.63 36.1,219.55 35,219.55Z"
114+
android:strokeAlpha="0.36" />
115+
<path
116+
android:fillAlpha="0.36"
117+
android:fillColor="#8FABF9"
118+
android:pathData="M25,88.12C23.9,88.12 23,87.19 23,86.06C23,84.93 23.9,84.01 25,84.01C26.1,84.01 27,84.93 27,86.06C27,87.19 26.1,88.12 25,88.12Z"
119+
android:strokeAlpha="0.36" />
120+
<path
121+
android:fillAlpha="0.048"
122+
android:pathData="M0,-31h390v867h-390z"
123+
android:strokeAlpha="0.16" />
124+
</group>
125+
</vector>

0 commit comments

Comments
 (0)