ADS: Report Broken Sites migration (#2636)

Task/Issue URL: https://app.asana.com/0/0/1203411647299659/f ### Description Migrate Report Broken Sites screen to new ADS components ### Steps to test this PR - Install from this branch - Navigate to a website - Go to "Report Broken Site" option in the overflow menu - [ ] Check everything looks as expected ### UI changes | Before | After | | ------ | ----- | ![Screenshot_20221214_100927_DuckDuckGo](https://user-images.githubusercontent.com/20798495/207567541-c38fcdc0-d4d0-4c0e-af76-8196b4c2eded.jpg)|![Screenshot_20221214_101312_DuckDuckGo](https://user-images.githubusercontent.com/20798495/207568133-0e988815-aec5-45ec-9c7f-581fa229d37f.jpg)| ![Screenshot_20221213_155234_DuckDuckGo](https://user-images.githubusercontent.com/20798495/207567691-afec6e7b-dcca-4cbe-8e55-565ebe76d617.jpg)|![Screenshot_20221214_094609_DuckDuckGo](https://user-images.githubusercontent.com/20798495/207567568-e79b8424-9335-4119-9ef9-8ae8870a83aa.jpg)|
duckduckgo · Jan 12, 2023 · f5c3641 · f5c3641
1 parent 2ba42a5
commit f5c3641
Show file tree

Hide file tree

Showing 14 changed files with 211 additions and 138 deletions.
diff --git a/app/src/main/java/com/duckduckgo/app/brokensite/BrokenSiteActivity.kt b/app/src/main/java/com/duckduckgo/app/brokensite/BrokenSiteActivity.kt
@@ -19,8 +19,6 @@ package com.duckduckgo.app.brokensite
 import android.content.Context
 import android.content.Intent
 import android.os.Bundle
-import android.widget.Toast
-import androidx.appcompat.app.AlertDialog
 import com.duckduckgo.anvil.annotations.InjectWith
 import com.duckduckgo.app.brokensite.BrokenSiteViewModel.Command
 import com.duckduckgo.app.brokensite.BrokenSiteViewModel.ViewState
@@ -30,7 +28,9 @@ import com.duckduckgo.app.browser.databinding.ActivityBrokenSiteBinding
 import com.duckduckgo.app.global.DuckDuckGoActivity
 import com.duckduckgo.browser.api.brokensite.BrokenSiteData
 import com.duckduckgo.di.scopes.ActivityScope
+import com.duckduckgo.mobile.android.ui.view.dialog.RadioListAlertDialogBuilder
 import com.duckduckgo.mobile.android.ui.viewbinding.viewBinding
+import com.google.android.material.snackbar.Snackbar
 import javax.inject.Inject
 
 @InjectWith(ActivityScope::class)
@@ -82,20 +82,27 @@ class BrokenSiteActivity : DuckDuckGoActivity() {
     private fun configureListeners() {
         val categories = viewModel.categories.map { getString(it.category) }.toTypedArray()
 
-        brokenSites.categoriesSelection.setOnClickListener {
-            AlertDialog.Builder(this)
+        brokenSites.categoriesSelection.onAction {
+            RadioListAlertDialogBuilder(this)
                 .setTitle(getString(R.string.brokenSitesCategoriesTitle))
-                .setSingleChoiceItems(categories, viewModel.indexSelected) { _, newIndex ->
-                    viewModel.onCategoryIndexChanged(newIndex)
-                }
-                .setPositiveButton(getString(android.R.string.yes)) { dialog, _ ->
-                    viewModel.onCategoryAccepted()
-                    dialog.dismiss()
-                }
-                .setNegativeButton(getString(android.R.string.no)) { dialog, _ ->
-                    viewModel.onCategorySelectionCancelled()
-                    dialog.dismiss()
-                }
+                .setOptions(categories.toList(), viewModel.indexSelected + 1)
+                .setPositiveButton(android.R.string.yes)
+                .setNegativeButton(android.R.string.no)
+                .addEventListener(
+                    object : RadioListAlertDialogBuilder.EventListener() {
+                        override fun onRadioItemSelected(selectedItem: Int) {
+                            viewModel.onCategoryIndexChanged(selectedItem - 1)
+                        }
+
+                        override fun onPositiveButtonClicked(selectedItem: Int) {
+                            viewModel.onCategoryAccepted()
+                        }
+
+                        override fun onNegativeButtonClicked() {
+                            viewModel.onCategorySelectionCancelled()
+                        }
+                    },
+                )
                 .show()
         }
 
@@ -121,15 +128,25 @@ class BrokenSiteActivity : DuckDuckGoActivity() {
     }
 
     private fun confirmAndFinish() {
-        Toast.makeText(this, R.string.brokenSiteSubmitted, Toast.LENGTH_LONG).show()
-        finishAfterTransition()
+        val snackbar = Snackbar.make(binding.root, getString(R.string.brokenSiteSubmitted), Snackbar.LENGTH_SHORT)
+        snackbar.addCallback(
+            object : Snackbar.Callback() {
+                override fun onDismissed(
+                    transientBottomBar: Snackbar?,
+                    event: Int,
+                ) {
+                    finish()
+                }
+            },
+        )
+        snackbar.show()
     }
 
     private fun render(viewState: ViewState) {
         val category = viewState.categorySelected?.let {
             getString(viewState.categorySelected.category)
         }.orEmpty()
-        brokenSites.categoriesSelection.setText(category)
+        brokenSites.categoriesSelection.text = category
         brokenSites.submitButton.isEnabled = viewState.submitAllowed
     }
 

diff --git a/app/src/main/res/drawable-hdpi/broken_bicycle.png b/app/src/main/res/drawable-hdpi/broken_bicycle.png
diff --git a/app/src/main/res/drawable-mdpi/broken_bicycle.png b/app/src/main/res/drawable-mdpi/broken_bicycle.png
diff --git a/app/src/main/res/drawable-xhdpi/broken_bicycle.png b/app/src/main/res/drawable-xhdpi/broken_bicycle.png
diff --git a/app/src/main/res/drawable-xxhdpi/broken_bicycle.png b/app/src/main/res/drawable-xxhdpi/broken_bicycle.png
diff --git a/app/src/main/res/drawable-xxxhdpi/broken_bicycle.png b/app/src/main/res/drawable-xxxhdpi/broken_bicycle.png
diff --git a/app/src/main/res/drawable/broken_bike.xml b/app/src/main/res/drawable/broken_bike.xml
@@ -0,0 +1,106 @@
+<!--
+  ~ Copyright (c) 2022 DuckDuckGo
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="128dp"
+    android:height="96dp"
+    android:viewportWidth="128"
+    android:viewportHeight="96">
+  <path
+      android:pathData="M17.83,33.5C17.31,32.98 16.47,32.98 15.95,33.5L14.22,35.23L12.5,33.5C11.98,32.98 11.13,32.98 10.61,33.5C10.09,34.02 10.09,34.87 10.61,35.39L12.34,37.11L10.61,38.83C10.09,39.36 10.09,40.2 10.61,40.72C11.13,41.24 11.98,41.24 12.5,40.72L14.22,39L15.95,40.72C16.47,41.24 17.31,41.24 17.83,40.72C18.35,40.2 18.35,39.36 17.83,38.83L16.11,37.11L17.83,35.39C18.35,34.87 18.35,34.02 17.83,33.5Z"
+      android:strokeAlpha="0.2"
+      android:fillColor="#888888"
+      android:fillAlpha="0.2"/>
+  <path
+      android:pathData="M111.61,36.17C111.09,35.65 110.25,35.65 109.72,36.17L108.89,37L108.05,36.17C107.53,35.65 106.69,35.65 106.17,36.17C105.65,36.69 105.65,37.53 106.17,38.05L107,38.89L106.17,39.72C105.65,40.24 105.65,41.09 106.17,41.61C106.69,42.13 107.53,42.13 108.05,41.61L108.89,40.77L109.72,41.61C110.25,42.13 111.09,42.13 111.61,41.61C112.13,41.09 112.13,40.24 111.61,39.72L110.78,38.89L111.61,38.05C112.13,37.53 112.13,36.69 111.61,36.17Z"
+      android:strokeAlpha="0.2"
+      android:fillColor="#888888"
+      android:fillAlpha="0.2"/>
+  <path
+      android:pathData="M0.83,53.06C0.31,53.58 0.31,54.42 0.83,54.94L1.67,55.78L0.84,56.61C0.31,57.13 0.31,57.98 0.84,58.5C1.36,59.02 2.2,59.02 2.72,58.5L3.56,57.66L4.39,58.5C4.91,59.02 5.76,59.02 6.28,58.5C6.8,57.98 6.8,57.13 6.28,56.61L5.44,55.78L6.28,54.94C6.8,54.42 6.8,53.58 6.28,53.06C5.76,52.54 4.91,52.54 4.39,53.06L3.56,53.89L2.72,53.06C2.2,52.54 1.36,52.54 0.83,53.06Z"
+      android:strokeAlpha="0.2"
+      android:fillColor="#888888"
+      android:fillAlpha="0.2"/>
+  <path
+      android:pathData="M120,59.33C120,60.07 120.6,60.67 121.33,60.67C122.07,60.67 122.67,60.07 122.67,59.33C122.67,58.6 122.07,58 121.33,58C120.6,58 120,58.6 120,59.33Z"
+      android:strokeAlpha="0.2"
+      android:fillColor="#888888"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.2"/>
+  <path
+      android:pathData="M12.44,65.56C11.47,65.56 10.67,64.76 10.67,63.78C10.67,62.8 11.47,62 12.44,62C13.42,62 14.22,62.8 14.22,63.78C14.22,64.76 13.42,65.56 12.44,65.56Z"
+      android:strokeAlpha="0.2"
+      android:fillColor="#888888"
+      android:fillType="evenOdd"
+      android:fillAlpha="0.2"/>
+  <path
+      android:pathData="M62.46,56L66.01,24L69.99,24.44L66.43,56.44L62.46,56Z"
+      android:fillColor="#DE5833"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M42.17,49.33V37.33H47.17V49.33C47.17,50.53 47.47,51.94 47.92,53.61C48,53.92 48.09,54.25 48.18,54.59C48.54,55.89 48.94,57.33 49.14,58.62C49.38,60.19 49.48,62.34 48.17,64.08C46.79,65.92 44.51,66.5 42,66.5C40.62,66.5 39.5,65.38 39.5,64C39.5,62.62 40.62,61.5 42,61.5C42.93,61.5 43.5,61.39 43.83,61.27C43.98,61.22 44.07,61.16 44.11,61.13C44.15,61.11 44.16,61.09 44.17,61.08C44.19,61.05 44.4,60.7 44.2,59.38C44.05,58.41 43.76,57.35 43.41,56.1C43.31,55.72 43.2,55.32 43.08,54.89C42.64,53.22 42.17,51.25 42.17,49.33Z"
+      android:fillColor="#DE5833"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M101.67,45.56C101.67,54.33 94.55,61.44 85.78,61.44C77,61.44 69.89,54.33 69.89,45.56C69.89,36.78 77,29.67 85.78,29.67C94.55,29.67 101.67,36.78 101.67,45.56ZM85.78,54.44C90.69,54.44 94.67,50.46 94.67,45.56C94.67,40.65 90.69,36.67 85.78,36.67C80.87,36.67 76.89,40.65 76.89,45.56C76.89,50.46 80.87,54.44 85.78,54.44Z"
+      android:fillColor="#999999"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M94.67,45.56C94.67,50.46 90.69,54.44 85.78,54.44C80.87,54.44 76.89,50.46 76.89,45.56C76.89,40.65 80.87,36.67 85.78,36.67C90.69,36.67 94.67,40.65 94.67,45.56Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M97.33,45.56C97.33,51.94 92.16,57.11 85.78,57.11C79.4,57.11 74.22,51.94 74.22,45.56C74.22,39.17 79.4,34 85.78,34C92.16,34 97.33,39.17 97.33,45.56ZM85.78,54.44C90.69,54.44 94.67,50.46 94.67,45.56C94.67,40.65 90.69,36.67 85.78,36.67C80.87,36.67 76.89,40.65 76.89,45.56C76.89,50.46 80.87,54.44 85.78,54.44Z"
+      android:fillColor="#DDDDDD"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M47.17,68.36C45.8,68.56 44.28,68.67 42.67,68.67C41.06,68.67 39.53,68.56 38.16,68.36C34.52,67.83 32,66.67 32,65.33C32,64 34.52,62.84 38.16,62.31C39.53,62.11 41.06,62 42.67,62C44.28,62 45.8,62.11 47.17,62.31C50.81,62.84 53.33,64 53.33,65.33C53.33,66.67 50.81,67.83 47.17,68.36ZM52.3,74.37C49.52,75.24 46.12,75.67 42.67,75.67C39.21,75.67 35.81,75.24 33.04,74.37C31.69,73.95 30.09,73.31 28.68,72.26C27.4,71.32 25,69.06 25,65.33C25,61.61 27.4,59.35 28.68,58.41C30.09,57.36 31.69,56.72 33.04,56.29C35.81,55.43 39.21,55 42.67,55C46.12,55 49.52,55.43 52.3,56.29C53.64,56.72 55.24,57.36 56.65,58.41C57.93,59.35 60.33,61.61 60.33,65.33C60.33,69.06 57.93,71.32 56.65,72.26C55.24,73.31 53.64,73.95 52.3,74.37Z"
+      android:fillColor="#999999"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M53.33,64.67C53.33,66.88 48.56,68.67 42.67,68.67C36.78,68.67 32,66.88 32,64.67C32,62.46 36.78,60.67 42.67,60.67C48.56,60.67 53.33,62.46 53.33,64.67Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M51.15,69.99C48.85,70.85 45.85,71.33 42.67,71.33C39.49,71.33 36.49,70.85 34.19,69.99C33.05,69.56 31.94,68.99 31.07,68.22C30.2,67.45 29.33,66.26 29.33,64.67C29.33,63.08 30.2,61.88 31.07,61.11C31.94,60.34 33.05,59.77 34.19,59.34C36.49,58.48 39.49,58 42.67,58C45.85,58 48.85,58.48 51.15,59.34C52.29,59.77 53.39,60.34 54.26,61.11C55.13,61.88 56,63.08 56,64.67C56,66.26 55.13,67.45 54.26,68.22C53.39,68.99 52.29,69.56 51.15,69.99ZM42.67,68.67C48.56,68.67 53.33,66.88 53.33,64.67C53.33,62.46 48.56,60.67 42.67,60.67C36.78,60.67 32,62.46 32,64.67C32,66.88 36.78,68.67 42.67,68.67Z"
+      android:fillColor="#DDDDDD"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M65.07,30.89C65.86,30.48 66.81,30.52 67.56,31L87.12,43.45C87.87,43.92 88.31,44.76 88.28,45.64C88.24,46.53 87.75,47.33 86.97,47.75L65.63,59.31C64.79,59.76 63.77,59.7 62.99,59.15L44.32,45.81C43.62,45.31 43.22,44.47 43.28,43.6C43.34,42.74 43.85,41.96 44.62,41.56L65.07,30.89ZM50.54,44.11L64.63,54.17L80.85,45.38L66.1,36L50.54,44.11Z"
+      android:fillColor="#DE5833"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M59.05,22L72,19.4C74.07,19 76,20.53 76,22.67C76,24.53 74.5,26 72.64,26H59.41C58.26,26 57.33,25.07 57.33,24C57.4,23 58.12,22.13 59.05,22Z"
+      android:fillColor="#CCCCCC"/>
+  <path
+      android:pathData="M32.9,32.62C33.33,33.07 34.07,33.5 35.33,33.5H36.67C38.05,33.5 39.17,34.62 39.17,36C39.17,37.38 38.05,38.5 36.67,38.5H35.33C32.82,38.5 30.72,37.59 29.27,36.05C27.84,34.54 27.17,32.58 27.17,30.67C27.17,28.76 27.84,26.79 29.27,25.28C30.72,23.74 32.82,22.83 35.33,22.83H44.67C46.05,22.83 47.17,23.95 47.17,25.33V37.33H42.17V27.83H35.33C34.07,27.83 33.33,28.26 32.9,28.72C32.44,29.21 32.17,29.91 32.17,30.67C32.17,31.42 32.44,32.12 32.9,32.62Z"
+      android:fillColor="#CCCCCC"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M63.98,61.37C61.33,61.37 59.18,59.22 59.18,56.57C59.18,53.92 61.33,51.77 63.98,51.77C66.64,51.77 68.79,53.92 68.79,56.57C68.79,59.22 66.64,61.37 63.98,61.37Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M64,58.33C63.08,58.33 62.33,57.59 62.33,56.67C62.33,55.75 63.08,55 64,55C64.92,55 65.67,55.75 65.67,56.67C65.67,57.59 64.92,58.33 64,58.33ZM57.33,56.67C57.33,60.35 60.32,63.33 64,63.33C67.68,63.33 70.67,60.35 70.67,56.67C70.67,52.98 67.68,50 64,50C60.32,50 57.33,52.98 57.33,56.67Z"
+      android:fillColor="#D0D0D0"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M86.54,54.3C88.08,51.63 91.92,51.63 93.46,54.3L109.49,82.05C111.03,84.72 109.1,88.05 106.02,88.05H73.98C70.9,88.05 68.97,84.72 70.51,82.05L86.54,54.3Z"
+      android:fillColor="#FDD20A"/>
+  <path
+      android:pathData="M90,80.5m-2.5,0a2.5,2.5 0,1 1,5 0a2.5,2.5 0,1 1,-5 0"
+      android:fillColor="#222222"/>
+  <path
+      android:pathData="M89.95,75C89.07,75 88.28,74.39 88.19,73.6L87.01,62.66C86.91,61.79 87.69,61 88.77,61H91.23C92.21,61 93.09,61.79 92.99,62.66L91.82,73.6C91.62,74.39 90.83,75 89.95,75Z"
+      android:fillColor="#222222"/>
+</vector>
diff --git a/...s/drawable/ic_broken_sites_down_arrow.xml → ...res/drawable/ic_chevron_down_24_small.xml b/...s/drawable/ic_broken_sites_down_arrow.xml → ...res/drawable/ic_chevron_down_24_small.xml
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (c) 2020 DuckDuckGo
+  ~ Copyright (c) 2022 DuckDuckGo
   ~
   ~ Licensed under the Apache License, Version 2.0 (the "License");
   ~ you may not use this file except in compliance with the License.
@@ -15,11 +15,12 @@
   -->
 
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="10dp"
-    android:height="5dp"
-    android:viewportWidth="10"
-    android:viewportHeight="5">
-    <path
-        android:fillColor="?attr/brokenSiteOutlinedColor"
-        android:pathData="M0,0L5,5L10,0L0,0Z" />
-</vector>
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M18.707,8.293C19.098,8.683 19.098,9.317 18.707,9.707L12.707,15.707C12.317,16.098 11.683,16.098 11.293,15.707L5.293,9.707C4.902,9.317 4.902,8.683 5.293,8.293C5.683,7.902 6.317,7.902 6.707,8.293L12,13.586L17.293,8.293C17.683,7.902 18.317,7.902 18.707,8.293Z"
+      android:fillColor="?attr/daxColorPrimaryIcon"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/app/src/main/res/drawable/selected_icon_background.xml b/app/src/main/res/drawable/selected_icon_background.xml
@@ -16,7 +16,7 @@
 
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
-    <solid android:color="@color/cornflowerBlue" />
+    <solid android:color="?attr/daxColorAccentBlue" />
     <size
         android:width="40dp"
         android:height="40dp" />

diff --git a/app/src/main/res/layout-land/content_broken_sites.xml b/app/src/main/res/layout-land/content_broken_sites.xml
@@ -45,78 +45,45 @@
                 android:layout_height="150dp"
                 android:layout_marginTop="8dp"
                 android:importantForAccessibility="no"
-                android:src="@drawable/broken_bicycle" />
+                android:src="@drawable/broken_bike" />
 
-            <TextView
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
                 android:id="@+id/noteText"
                 android:layout_width="300dp"
                 android:layout_height="wrap_content"
                 android:layout_marginStart="10dp"
                 android:layout_marginTop="12dp"
-                android:lineSpacingExtra="4sp"
                 android:text="@string/brokenSiteDescription"
-                android:textColor="?attr/normalTextColor"
-                android:textSize="15sp" />
+                app:typography="body1" />
         </LinearLayout>
 
-        <androidx.appcompat.widget.AppCompatImageView
-            android:layout_width="12dp"
-            android:layout_height="12dp"
-            android:layout_marginTop="26dp"
-            android:layout_marginEnd="18dp"
-            app:layout_constraintEnd_toEndOf="@+id/textInputLayout"
-            app:layout_constraintTop_toTopOf="@id/textInputLayout"
-            app:srcCompat="@drawable/ic_broken_sites_down_arrow" />
-
-        <com.google.android.material.textfield.TextInputLayout
-            android:id="@+id/textInputLayout"
-            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
+        <com.duckduckgo.mobile.android.ui.view.text.DaxTextInput
+            android:id="@+id/categoriesSelection"
             android:layout_width="match_parent"
-            android:layout_height="60dp"
-            android:layout_marginStart="25dp"
-            android:layout_marginTop="12dp"
-            android:layout_marginEnd="25dp"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/keyline_5"
+            android:layout_marginTop="@dimen/keyline_3"
+            android:layout_marginEnd="@dimen/keyline_5"
             android:hint="@string/brokenSitesCategoriesHint"
-            android:textColorHint="?attr/brokenSiteOutlinedColor"
-            app:boxStrokeColor="@color/broken_sites_dropdown_selector"
-            app:hintTextColor="@color/broken_sites_dropdown_selector"
+            app:editable="false"
+            app:endIcon="@drawable/ic_chevron_down_24_small"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/headerLayout">
+            app:layout_constraintTop_toBottomOf="@id/headerLayout" />
 
-            <EditText
-                android:id="@+id/categoriesSelection"
-                android:layout_width="match_parent"
-                android:layout_height="match_parent"
-                android:cursorVisible="false"
-                android:ellipsize="end"
-                android:focusable="false"
-                android:importantForAutofill="no"
-                android:inputType="none"
-                android:labelFor="@id/categoriesSelection"
-                android:maxLines="1"
-                android:paddingEnd="32dp"
-                android:textColor="?attr/normalTextColor"
-                android:textIsSelectable="false"
-                tools:ignore="RtlSymmetry" />
-
-        </com.google.android.material.textfield.TextInputLayout>
-
-        <com.duckduckgo.mobile.android.ui.view.button.ButtonPrimaryLarge
+        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
             android:id="@+id/submitButton"
             android:layout_width="0dp"
-            android:layout_height="70dp"
+            android:layout_height="wrap_content"
             android:layout_marginStart="25dp"
             android:layout_marginTop="8dp"
             android:layout_marginEnd="25dp"
             android:layout_marginBottom="30dp"
             android:text="@string/brokenSiteSubmitButton"
-            android:textSize="15sp"
-            android:textAllCaps="true"
+            app:buttonSize="large"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/textInputLayout" />
+            app:layout_constraintTop_toBottomOf="@id/categoriesSelection" />
 
     </androidx.constraintlayout.widget.ConstraintLayout>
-
 </ScrollView>
diff --git a/app/src/main/res/layout/activity_broken_site.xml b/app/src/main/res/layout/activity_broken_site.xml
@@ -14,10 +14,11 @@
   ~ limitations under the License.
   -->
 
-<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
+    android:orientation="vertical"
     tools:context="com.duckduckgo.app.brokensite.BrokenSiteActivity">
 
     <include
@@ -28,5 +29,5 @@
         android:id="@+id/contentBrokenSites"
         layout="@layout/content_broken_sites" />
 
-</androidx.coordinatorlayout.widget.CoordinatorLayout>
+</LinearLayout>