ADS: Design Review Changes (#2730)

Task/Issue URLs: 
https://app.asana.com/0/0/1203721679624008/f
https://app.asana.com/0/1202857801505092/1203499549142146/f
https://app.asana.com/0/0/1203769028231491/f

### Description
UI changes after final design review

### Steps to test this PR

Asana task: https://app.asana.com/0/0/1203721679624008/f

Co-authored-by: David González <malmstein@gmail.com>

app-tracking-protection/vpn-impl/src/main/java/com/duckduckgo/mobile/android/vpn/ui/tracker_activity/DeviceShieldActivityFeedFragment.kt

@@ -22,11 +22,13 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.view.get
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.ViewModelProvider
 import androidx.lifecycle.flowWithLifecycle
 import androidx.lifecycle.lifecycleScope
+import androidx.recyclerview.widget.LinearLayoutManager
 import com.duckduckgo.anvil.annotations.InjectWith
 import com.duckduckgo.app.global.DuckDuckGoFragment
 import com.duckduckgo.app.global.FragmentViewModelFactory
@@ -44,6 +46,7 @@ import com.duckduckgo.mobile.android.vpn.ui.tracker_activity.DeviceShieldActivit
 import com.duckduckgo.mobile.android.vpn.ui.tracker_activity.DeviceShieldActivityFeedViewModel.Command.TrackerListDisplayed
 import com.duckduckgo.mobile.android.vpn.ui.tracker_activity.DeviceShieldActivityFeedViewModel.TrackerFeedViewState
 import com.duckduckgo.mobile.android.vpn.ui.tracker_activity.model.TrackerFeedItem
+import com.google.android.material.divider.MaterialDividerItemDecoration
 import com.google.android.material.snackbar.Snackbar
 import java.util.concurrent.TimeUnit
 import javax.inject.Inject
@@ -82,6 +85,10 @@ class DeviceShieldActivityFeedFragment : DuckDuckGoFragment() {
         with(binding.activityRecyclerView) {
             layoutManager = StickyHeadersLinearLayoutManager<TrackerFeedAdapter>(this@DeviceShieldActivityFeedFragment.requireContext())
             adapter = trackerFeedAdapter
+            val divider = MaterialDividerItemDecoration(requireActivity(), LinearLayoutManager.VERTICAL)
+            divider.isLastItemDecorated = false
+            divider.dividerInsetStart = resources.getDimensionPixelSize(R.dimen.apps_protection_state_insetPadding)
+            addItemDecoration(divider)
         }
 
         lifecycleScope.launch {

app-tracking-protection/vpn-impl/src/main/res/layout/view_device_shield_activity_apps_protection.xml

@@ -26,11 +26,10 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content" />
 
-    <com.duckduckgo.mobile.android.ui.view.divider.HorizontalDivider
+    <com.google.android.material.divider.MaterialDivider
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="@dimen/apps_protection_state_insetPadding"
-        app:defaultPadding="false" />
+        android:layout_height="@dimen/horizontalDividerHeight"
+        app:dividerInsetStart="@dimen/apps_protection_state_insetPadding"/>
 
     <com.duckduckgo.mobile.android.vpn.ui.tracker_activity.view.AppsProtectionStateView
         android:id="@+id/unProtectedAppsState"

app-tracking-protection/vpn-impl/src/main/res/layout/view_device_shield_activity_description.xml

@@ -16,29 +16,16 @@
   ~ limitations under the License.
   -->
 
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<com.duckduckgo.mobile.android.ui.view.text.DaxTextView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/activity_description"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:orientation="vertical">
+    android:layout_marginEnd="@dimen/keyline_4"
+    android:drawablePadding="@dimen/keyline_4"
+    android:gravity="center_vertical"
+    android:padding="@dimen/keyline_4"
+    android:text="@string/atp_ActivityDescription"
+    app:drawableStartCompat="@drawable/ic_green_key"
+    app:typography="body1" />
 
-    <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-        android:id="@+id/activity_description"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="@dimen/keyline_4"
-        android:drawablePadding="@dimen/keyline_4"
-        android:gravity="center_vertical"
-        android:padding="@dimen/keyline_4"
-        android:text="@string/atp_ActivityDescription"
-        app:drawableStartCompat="@drawable/ic_green_key"
-        app:typography="body1" />
-
-    <com.duckduckgo.mobile.android.ui.view.divider.HorizontalDivider
-        android:id="@+id/entry_splitter"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="72dp"
-        app:defaultPadding="false" />
-
-</LinearLayout>

app-tracking-protection/vpn-impl/src/main/res/layout/view_device_shield_activity_entry.xml

@@ -21,7 +21,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@drawable/default_selectable_bg">
+    android:background="?attr/selectableItemBackground">
 
     <ImageView
         android:id="@+id/tracking_app_icon"
@@ -80,13 +80,4 @@
         app:layout_constraintTop_toTopOf="parent"
         app:srcCompat="@drawable/ic_chevron_forward_small_24" />
 
-    <com.duckduckgo.mobile.android.ui.view.divider.HorizontalDivider
-        android:id="@+id/entry_splitter"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="72dp"
-        app:defaultPadding="false"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/activity_time_since" />
-
 </androidx.constraintlayout.widget.ConstraintLayout>

app/src/main/java/com/duckduckgo/app/settings/SettingsActivity.kt

@@ -163,7 +163,7 @@ class SettingsActivity : DuckDuckGoActivity() {
 
         with(viewsAppearance) {
             selectedThemeSetting.setClickListener { viewModel.userRequestedToChangeTheme() }
-            changeAppIconLabel.setClickListener { viewModel.userRequestedToChangeIcon() }
+            changeAppIconSetting.setOnClickListener { viewModel.userRequestedToChangeIcon() }
             selectedFireAnimationSetting.setClickListener { viewModel.userRequestedToChangeFireAnimation() }
             accessibilitySetting.setClickListener { viewModel.onAccessibilitySettingClicked() }
         }

app/src/main/res/layout/activity_widget_configuration.xml

@@ -15,32 +15,31 @@
   -->
 
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
 
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="bottom"
-        android:background="@color/white"
-        android:padding="16dp"
-        android:orientation="vertical">
+        android:background="?attr/daxColorSurface"
+        android:orientation="vertical"
+        android:padding="16dp">
 
-        <TextView
+        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:textColor="@color/almostBlackDark"
-            android:fontFamily="sans-serif-medium"
-            android:textStyle="normal"
-            android:textSize="20sp"
-            android:text="@string/widgetConfigurationTitleText" />
+            android:text="@string/widgetConfigurationTitleText"
+            app:typography="h2" />
 
         <ImageView
             android:id="@+id/widgetConfigPreview"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="16dp"
             android:layout_gravity="center_horizontal"
+            android:layout_marginTop="@dimen/keyline_4"
             android:src="@drawable/search_favorites_widget_light_preview" />
 
         <RadioGroup
@@ -53,42 +52,37 @@
                 android:id="@+id/widgetConfigThemeSystem"
                 android:layout_width="match_parent"
                 android:layout_height="48dp"
-                android:textColor="@color/almostBlackDark"
                 android:fontFamily="sans-serif-medium"
-                android:textStyle="normal"
+                android:text="@string/widgetConfigurationSystemThemeOption"
+                android:textColor="?attr/daxColorPrimaryText"
                 android:visibility="gone"
-                android:textSize="16sp"
-                android:text="@string/widgetConfigurationSystemThemeOption" />
+                tools:visibility="visible" />
 
             <RadioButton
                 android:id="@+id/widgetConfigThemeLight"
                 android:layout_width="match_parent"
                 android:layout_height="48dp"
-                android:textColor="@color/almostBlackDark"
-                android:fontFamily="sans-serif-medium"
-                android:textStyle="normal"
-                android:textSize="16sp"
                 android:checked="true"
-                android:text="@string/widgetConfigurationLightThemeOption" />
+                android:fontFamily="sans-serif-medium"
+                android:text="@string/widgetConfigurationLightThemeOption"
+                android:textColor="?attr/daxColorPrimaryText" />
 
             <RadioButton
                 android:id="@+id/widgetConfigThemeDark"
                 android:layout_width="match_parent"
                 android:layout_height="48dp"
-                android:textColor="@color/almostBlackDark"
                 android:fontFamily="sans-serif-medium"
-                android:textStyle="normal"
-                android:textSize="16sp"
-                android:text="@string/widgetConfigurationDarkThemeOption" />
+                android:text="@string/widgetConfigurationDarkThemeOption"
+                android:textColor="?attr/daxColorPrimaryText" />
         </RadioGroup>
 
         <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
             android:id="@+id/widgetConfigAddWidgetButton"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="end"
-            android:layout_marginEnd="8dp"
             android:layout_marginTop="16dp"
-            android:text="@string/widgetConfigurationAddWidgetOption"/>
+            android:layout_marginEnd="8dp"
+            android:text="@string/widgetConfigurationAddWidgetOption" />
     </LinearLayout>
 </FrameLayout>

app/src/main/res/layout/content_settings_appearance.xml

@@ -41,16 +41,25 @@
         app:secondaryText="@string/settingsSystemTheme" />
 
     <LinearLayout
+        android:id="@+id/changeAppIconSetting"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="?attr/selectableItemBackground"
+        android:clickable="true"
+        android:focusable="true"
         android:orientation="horizontal">
 
-        <com.duckduckgo.mobile.android.ui.view.listitem.OneLineListItem
+        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
             android:id="@+id/changeAppIconLabel"
             android:layout_width="0dp"
-            android:layout_height="wrap_content"
+            android:layout_height="@dimen/oneLineItemHeight"
+            android:layout_marginStart="@dimen/keyline_4"
+            android:layout_marginEnd="@dimen/keyline_4"
+            android:gravity="center_vertical"
             android:layout_weight="1"
-            app:primaryText="@string/changeIconCtaLabel" />
+            android:textColor="@color/primary_text_color_selector"
+            android:text="@string/changeIconCtaLabel"
+            app:typography="body1" />
 
         <ImageView
             android:id="@+id/changeAppIcon"

app/src/main/res/layout/item_tab.xml

@@ -26,8 +26,7 @@
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/cardContentsContainer"
         android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        >
+        android:layout_height="match_parent">
 
         <ImageView
             android:id="@+id/favicon"
@@ -41,21 +40,21 @@
             app:layout_constraintTop_toTopOf="parent" />
 
         <ImageView
-            android:importantForAccessibility="no"
             android:id="@+id/tabUnread"
             android:layout_width="9dp"
             android:layout_height="9dp"
-            android:src="@drawable/tab_unread_indicator"
-            android:elevation="30dp"
             android:layout_marginEnd="2dp"
             android:layout_marginBottom="2dp"
+            android:elevation="30dp"
+            android:importantForAccessibility="no"
+            android:src="@drawable/tab_unread_indicator"
+            app:layout_constraintBottom_toBottomOf="@id/favicon"
             app:layout_constraintCircle="@id/favicon"
-            app:layout_constraintCircleRadius="8dp"
             app:layout_constraintCircleAngle="135"
+            app:layout_constraintCircleRadius="8dp"
+            app:layout_constraintEnd_toEndOf="@id/favicon"
             app:layout_constraintStart_toEndOf="@id/favicon"
-            app:layout_constraintTop_toBottomOf="@id/favicon"
-            app:layout_constraintBottom_toBottomOf="@id/favicon"
-            app:layout_constraintEnd_toEndOf="@id/favicon" />
+            app:layout_constraintTop_toBottomOf="@id/favicon" />
 
         <ImageView
             android:id="@+id/close"
@@ -64,14 +63,13 @@
             android:background="?selectableItemBackground"
             android:contentDescription="@string/closeContentDescription"
             android:scaleType="center"
-            android:src="@drawable/ic_close_24"
+            android:src="@drawable/ic_close_24_small"
             app:layout_constraintBottom_toBottomOf="@id/favicon"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="@id/favicon" />
 
         <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
             android:id="@+id/title"
-            app:typography="h5"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_marginStart="8dp"
@@ -82,6 +80,7 @@
             app:layout_constraintEnd_toStartOf="@id/close"
             app:layout_constraintStart_toEndOf="@id/favicon"
             app:layout_constraintTop_toTopOf="@id/favicon"
+            app:typography="h5"
             tools:text="Slashdot" />
 
         <ImageView

common-ui/src/main/res/color/primary_icon_color_selector.xml

@@ -15,6 +15,6 @@
   -->
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_enabled="false" android:color="?attr/daxColorContainerDisabled" />
-    <item android:color="?attr/daxColorIconDisabled"/>
+    <item android:state_enabled="false" android:color="?attr/daxColorIconDisabled" />
+    <item android:color="?attr/daxColorPrimaryIcon"/>
 </selector>

common-ui/src/main/res/color/red_text_color_selector.xml

@@ -16,6 +16,6 @@
   -->
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:state_enabled="false" android:color="@color/red50" />
-    <item android:state_enabled="true" android:color="@color/red50"/>
+    <item android:state_enabled="false" android:color="?attr/daxColorDestructive" />
+    <item android:state_enabled="true" android:color="?attr/daxColorDestructive"/>
 </selector>