Update BottomSheetDialog appearance

* Fix incorrect dialog surface color
* Adjust buttons' position

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

@@ -17,9 +17,9 @@
         app:shapeAppearanceOverlay="@style/RoundedAppImage"
         tools:src="@drawable/default_icon" />
 
-    <LinearLayout
+    <androidx.constraintlayout.widget.ConstraintLayout
         android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
+        android:layout_height="match_parent"
         android:layout_marginStart="16dp"
         android:orientation="vertical">
 
@@ -29,7 +29,9 @@
             android:layout_height="wrap_content"
             android:textAppearance="?android:attr/textAppearanceListItem"
             android:textSize="18sp"
-            tools:text="Title" />
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            tools:text="The Legend of Zelda: Breath of the Wild" />
 
         <TextView
             android:id="@+id/game_subtitle"
@@ -38,13 +40,17 @@
             android:textAppearance="?android:attr/textAppearanceListItemSecondary"
             android:textColor="@android:color/tertiary_text_light"
             android:textSize="14sp"
-            tools:text="Subtitle" />
+            app:layout_constraintTop_toBottomOf="@id/game_title"
+            app:layout_constraintStart_toStartOf="@id/game_title"
+            tools:text="Nintendo" />
 
         <com.google.android.flexbox.FlexboxLayout
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_gravity="center_horizontal"
+            android:layout_gravity="start"
             android:layout_marginTop="8dp"
+            app:layout_constraintStart_toStartOf="@id/game_title"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:flexWrap="wrap">
 
             <Button
@@ -68,5 +74,5 @@
                 android:text="@string/pin"
                 android:textColor="?attr/colorAccent" />
         </com.google.android.flexbox.FlexboxLayout>
-    </LinearLayout>
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </LinearLayout>

app/src/main/res/values-night/colors.xml

@@ -3,4 +3,5 @@
     <color name="colorPrimary">#FF4285F4</color>
     <color name="backgroundColor">#FF121212</color>
     <color name="backgroundColorVariant">#323232</color>
+    <color name="dialogSurface">#FF121213</color>
 </resources>

app/src/main/res/values/colors.xml

@@ -4,4 +4,5 @@
     <color name="colorPrimary">#FF1E58F0</color>
     <color name="backgroundColor">@android:color/white</color>
     <color name="backgroundColorVariant">#F8F8F8</color>
+    <color name="dialogSurface">@android:color/white</color>
 </resources>

app/src/main/res/values/styles.xml

@@ -18,4 +18,8 @@
         <item name="materialThemeOverlay">@style/ChipChoice.Material</item>
         <item name="shapeAppearance">@style/ShapeAppearance.MaterialComponents.LargeComponent</item>
     </style>
+
+    <style name="ModalBottomSheetDialog" parent="Widget.MaterialComponents.BottomSheet.Modal">
+        <item name="backgroundTint">@color/dialogSurface</item>
+    </style>
 </resources>

app/src/main/res/values/themes.xml

@@ -11,6 +11,8 @@
         <item name="android:colorBackground">@color/backgroundColor</item>
 
         <item name="chipChoiceStyle">@style/ChipChoice</item>
+
+        <item name="bottomSheetDialogTheme">@style/ThemeOverlay.AppTheme.BottomSheetDialog</item>
     </style>
 
     <style name="AppTheme" parent="BaseAppTheme">
@@ -18,4 +20,8 @@
         <item name="android:windowLightNavigationBar">true</item>
         <item name="android:alertDialogTheme">@style/ThemeOverlay.MaterialComponents.MaterialAlertDialog</item>
     </style>
+
+    <style name="ThemeOverlay.AppTheme.BottomSheetDialog" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
+        <item name="bottomSheetStyle">@style/ModalBottomSheetDialog</item>
+    </style>
 </resources>