Skip to content

Commit 6e7a874

Browse files
anikikianikiki
authored
Address UI feedback for the Dax Prompt. (#6861)
Task/Issue URL: https://app.asana.com/1/137249556945/project/488551667048375/task/1211492565099229?focus=true ### Description Replaced the vector-based Dax with magnifying glass image with a PNG version and updated the browser comparison chart UI. Added new check and cross icons for better visual clarity in the comparison chart. Made Chrome and DuckDuckGo icons headers (they're always present now, don't scroll with the content). Removed vertical scrolls. Added top/bottom scroll indicators. Updated spacings. Restructured the layout to improve the overall user experience. ### Steps to test this PR _Feature 1_ (checked during design review) - [x] Verify the new Dax with magnifying glass PNG displays correctly - [x] Check that the browser comparison chart layout is properly aligned - [x] Confirm the new check and cross icons appear as expected - [x] Test scrolling behavior in the comparison chart ### UI changes | Large screen - Light | Large screen - Dark | | ------ | ----- | |<img width="1280" height="2856" alt="Screenshot_20250929_155835" src="https://github.com/user-attachments/assets/429c57eb-bd1c-442a-a92a-4def18914866" />|<img width="1280" height="2856" alt="Screenshot_20250929_155733" src="https://github.com/user-attachments/assets/bf41a1e7-f96d-4a66-b989-7831d1560e97" />| | Smaller screen - Light | Smaller screen - Dark | | ------ | ----- | |<img width="1080" height="2340" alt="Screenshot_20250929_155656" src="https://github.com/user-attachments/assets/a3429902-7183-4f42-a4ed-a2812b9f24b5" />|<img width="1080" height="2340" alt="Screenshot_20250929_155706" src="https://github.com/user-attachments/assets/80a1d2e8-b9ca-49d1-88bc-b551941befc7" />| | Smaller screen (scroll) - Light | Smaller screen (scroll) - Dark | | ------ | ----- | |<img width="1080" height="2340" alt="Screenshot_20250929_155827" src="https://github.com/user-attachments/assets/189c9225-0bd3-4e9c-9c0f-7a6b75600de6" />|<img width="1080" height="2340" alt="Screenshot_20250929_155714" src="https://github.com/user-attachments/assets/0d049bc6-bbfe-4bea-bbe0-d2ac450c2277" />|
1 parent f20b17e commit 6e7a874

File tree

9 files changed

+246
-481
lines changed

9 files changed

+246
-481
lines changed

‎dax-prompts/dax-prompts-impl/src/main/res/drawable-xxhdpi/dax_with_magnifying_glass.png‎

232 KB
Loading

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

Lines changed: 0 additions & 332 deletions
This file was deleted.

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
android:width="24dp"
19+
android:height="24dp"
20+
android:viewportWidth="24"
21+
android:viewportHeight="24">
22+
<path
23+
android:fillColor="#21C000"
24+
android:pathData="M12,2C6.477,2 2,6.477 2,12s4.477,10 10,10 10,-4.477 10,-10S17.523,2 12,2Z" />
25+
<path
26+
android:fillColor="#fff"
27+
android:fillType="evenOdd"
28+
android:pathData="M17.03,8.541a0.75,0.75 0,0 1,0 1.06l-4.866,4.867a2,2 0,0 1,-2.828 0L6.898,12.03a0.75,0.75 0,0 1,1.061 -1.06l2.438,2.437a0.5,0.5 0,0 0,0.707 0l4.866,-4.866a0.75,0.75 0,0 1,1.06 0Z" />
29+
</vector>

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
android:width="24dp"
19+
android:height="24dp"
20+
android:viewportWidth="24"
21+
android:viewportHeight="24">
22+
<path
23+
android:fillColor="#888888"
24+
android:fillType="evenOdd"
25+
android:pathData="M12,22C17.523,22 22,17.523 22,12C22,6.477 17.523,2 12,2C6.477,2 2,6.477 2,12C2,17.523 6.477,22 12,22Z" />
26+
<path
27+
android:fillColor="#ffffff"
28+
android:pathData="M16.207,9.207C16.598,8.817 16.598,8.183 16.207,7.793C15.817,7.402 15.183,7.402 14.793,7.793L12,10.586L9.207,7.793C8.817,7.402 8.183,7.402 7.793,7.793C7.402,8.183 7.402,8.817 7.793,9.207L10.586,12L7.793,14.793C7.402,15.183 7.402,15.817 7.793,16.207C8.183,16.598 8.817,16.598 9.207,16.207L12,13.414L14.793,16.207C15.183,16.598 15.817,16.598 16.207,16.207C16.598,15.817 16.598,15.183 16.207,14.793L13.414,12L16.207,9.207Z" />
29+
</vector>

‎dax-prompts/dax-prompts-impl/src/main/res/layout/activity_dax_prompt_browser_comparison.xml‎

Lines changed: 76 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
android:layout_width="wrap_content"
3030
android:layout_height="wrap_content"
3131
android:orientation="horizontal"
32-
app:layout_constraintGuide_percent="0.6" />
32+
app:layout_constraintGuide_percent="0.3" />
3333

3434
<androidx.constraintlayout.widget.Guideline
3535
android:id="@+id/daxPromptBrowserComparisonVerticalGuidelineStart"
@@ -62,66 +62,117 @@
6262
android:id="@+id/daxShape"
6363
android:layout_width="0dp"
6464
android:layout_height="wrap_content"
65-
android:layout_marginBottom="@dimen/daxShapeMarginBottom"
65+
android:layout_marginTop="-190dp"
6666
android:scaleType="fitCenter"
67-
android:src="@drawable/dax_with_magnifying_glass_new"
68-
app:layout_constraintBottom_toBottomOf="@id/daxPromptBrowserComparisonMessageGuideline"
67+
android:src="@drawable/dax_with_magnifying_glass"
68+
app:layout_constraintTop_toTopOf="@id/daxPromptBrowserComparisonMessageContainer"
6969
app:layout_constraintEnd_toEndOf="parent"
7070
app:layout_constraintStart_toStartOf="parent" />
7171

72-
<LinearLayout
72+
<androidx.constraintlayout.widget.ConstraintLayout
7373
android:id="@+id/daxPromptBrowserComparisonMessageContainer"
7474
android:layout_width="0dp"
75-
android:layout_height="wrap_content"
75+
android:layout_height="0dp"
7676
android:layout_marginStart="@dimen/messageMargin"
7777
android:layout_marginEnd="@dimen/messageMargin"
78+
android:layout_marginBottom="48dp"
7879
android:background="@drawable/background_dax_message"
7980
android:elevation="2dp"
8081
android:orientation="vertical"
8182
android:padding="@dimen/keyline_5"
82-
app:layout_constraintBottom_toBottomOf="@id/daxPromptBrowserComparisonMessageGuideline"
83+
app:layout_constraintBottom_toBottomOf="parent"
8384
app:layout_constraintEnd_toEndOf="@id/daxPromptBrowserComparisonVerticalGuidelineEnd"
84-
app:layout_constraintHeight_max="@dimen/daxPromptMessageConstraintMaxHeight"
85+
app:layout_constraintHeight_max="540dp"
8586
app:layout_constraintStart_toStartOf="@id/daxPromptBrowserComparisonVerticalGuidelineStart"
86-
app:layout_constraintTop_toBottomOf="@id/daxPromptBrowserComparisonMessageGuideline">
87+
app:layout_constraintTop_toTopOf="@id/daxPromptBrowserComparisonMessageGuideline">
8788

8889
<com.duckduckgo.common.ui.view.text.DaxTextView
8990
android:id="@+id/daxPromptBrowserComparisonTitle"
9091
android:layout_width="match_parent"
9192
android:layout_height="wrap_content"
9293
android:layout_marginBottom="16dp"
9394
android:text="@string/dax_prompt_browser_comparison_message_title"
95+
app:layout_constraintStart_toStartOf="parent"
96+
app:layout_constraintTop_toTopOf="parent"
9497
app:typography="title" />
9598

99+
100+
<ImageView
101+
android:id="@+id/ddgLogoHeader"
102+
android:layout_width="55dp"
103+
android:layout_height="wrap_content"
104+
android:adjustViewBounds="true"
105+
app:layout_constraintEnd_toEndOf="parent"
106+
app:layout_constraintTop_toBottomOf="@id/daxPromptBrowserComparisonTitle"
107+
app:srcCompat="@drawable/ic_ddg_comparison_chart"
108+
tools:ignore="ContentDescription" />
109+
110+
<ImageView
111+
android:id="@+id/chromeLogoHeader"
112+
android:layout_width="55dp"
113+
android:layout_height="wrap_content"
114+
android:layout_marginEnd="@dimen/keyline_2"
115+
android:adjustViewBounds="true"
116+
app:layout_constraintEnd_toStartOf="@id/ddgLogoHeader"
117+
app:layout_constraintTop_toBottomOf="@id/daxPromptBrowserComparisonTitle"
118+
app:srcCompat="@drawable/ic_chrome_comparison_chart"
119+
tools:ignore="ContentDescription" />
120+
121+
<com.duckduckgo.common.ui.view.divider.VerticalDivider
122+
android:layout_width="wrap_content"
123+
android:layout_height="0dp"
124+
app:layout_constraintBottom_toBottomOf="@id/ddgLogoHeader"
125+
app:layout_constraintEnd_toStartOf="@id/ddgLogoHeader"
126+
app:layout_constraintStart_toEndOf="@id/chromeLogoHeader"
127+
app:layout_constraintTop_toTopOf="@id/ddgLogoHeader" />
128+
96129
<ScrollView
130+
android:id="@+id/browserComparisonChart"
97131
android:layout_width="match_parent"
98132
android:layout_height="0dp"
99-
android:layout_weight="1"
100-
android:fillViewport="true">
133+
android:scrollIndicators="top|bottom"
134+
android:scrollbars="none"
135+
app:layout_constraintBottom_toTopOf="@id/daxPromptBrowserComparisonButtonsContainer"
136+
app:layout_constraintEnd_toEndOf="parent"
137+
app:layout_constraintStart_toStartOf="parent"
138+
app:layout_constraintTop_toBottomOf="@id/ddgLogoHeader">
101139

102140
<include
103-
android:id="@+id/daxPromptBrowserComparisonChart"
141+
android:id="@+id/browserComparisonChartContainer"
104142
layout="@layout/browser_comparison_chart"
105143
android:layout_width="match_parent"
106144
android:layout_height="wrap_content" />
107145
</ScrollView>
108146

109-
<com.duckduckgo.common.ui.view.button.DaxButtonPrimary
110-
android:id="@+id/daxPromptBrowserComparisonPrimaryButton"
147+
<androidx.constraintlayout.widget.ConstraintLayout
148+
android:id="@+id/daxPromptBrowserComparisonButtonsContainer"
111149
android:layout_width="match_parent"
112150
android:layout_height="wrap_content"
113-
android:layout_marginTop="16dp"
114-
android:text="@string/dax_prompt_browser_comparison_message_primary_button"
115-
app:daxButtonSize="large" />
151+
android:paddingTop="20dp"
152+
app:layout_constraintBottom_toBottomOf="parent"
153+
app:layout_constraintEnd_toEndOf="parent"
154+
app:layout_constraintStart_toStartOf="parent">
116155

117-
<com.duckduckgo.common.ui.view.button.DaxButtonGhost
118-
android:id="@+id/daxPromptBrowserComparisonGhostButton"
119-
android:layout_width="match_parent"
120-
android:layout_height="wrap_content"
121-
android:layout_marginTop="8dp"
122-
android:text="@string/dax_prompt_browser_comparison_message_ghost_button"
123-
app:daxButtonSize="large" />
156+
<com.duckduckgo.common.ui.view.button.DaxButtonPrimary
157+
android:id="@+id/daxPromptBrowserComparisonPrimaryButton"
158+
android:layout_width="match_parent"
159+
android:layout_height="wrap_content"
160+
android:text="@string/dax_prompt_browser_comparison_message_primary_button"
161+
app:daxButtonSize="large"
162+
app:layout_constraintBottom_toTopOf="@id/daxPromptBrowserComparisonGhostButton"
163+
app:layout_constraintEnd_toEndOf="parent"
164+
app:layout_constraintStart_toStartOf="parent" />
124165

125-
</LinearLayout>
166+
<com.duckduckgo.common.ui.view.button.DaxButtonGhost
167+
android:id="@+id/daxPromptBrowserComparisonGhostButton"
168+
android:layout_width="match_parent"
169+
android:layout_height="wrap_content"
170+
android:text="@string/dax_prompt_browser_comparison_message_ghost_button"
171+
app:daxButtonSize="large"
172+
app:layout_constraintBottom_toBottomOf="parent"
173+
app:layout_constraintEnd_toEndOf="parent"
174+
app:layout_constraintStart_toStartOf="parent" />
175+
</androidx.constraintlayout.widget.ConstraintLayout>
126176

177+
</androidx.constraintlayout.widget.ConstraintLayout>
127178
</androidx.constraintlayout.widget.ConstraintLayout>

0 commit comments

Comments
 (0)