[fenix] Close https://github.com/mozilla-mobile/fenix/issues/21573: Add shadow to recent bookmarks section

app/src/main/res/drawable/recent_bookmark_background.xml

@@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="?above" />
-    <corners
-        android:bottomLeftRadius="8dp"
-        android:bottomRightRadius="8dp"
-        android:topLeftRadius="8dp"
-        android:topRightRadius="8dp" />
-
-      <stroke
-      android:width="1dp"
-      android:color="?shadow" />
-</shape>

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

@@ -8,13 +8,15 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/bookmark_item"
     android:layout_width="@dimen/recent_bookmark_item_width"
-    android:layout_height="@dimen/recent_bookmark_item_height"
-    android:padding="4dp">
+    android:layout_height="wrap_content" >
 
-    <RelativeLayout
-        android:layout_width="match_parent"
+    <com.google.android.material.card.MaterialCardView
+        android:layout_width="@dimen/recent_bookmark_item_card_width"
         android:layout_height="@dimen/recent_bookmark_item_favicon_height"
-        android:background="@drawable/recent_bookmark_background"
+        android:layout_marginTop="@dimen/recent_bookmark_item_card_padding_top"
+        android:layout_marginBottom="@dimen/recent_bookmark_item_card_padding_bottom"
+        app:cardBackgroundColor="?mozac_widget_favicon_background_color"
+        app:cardElevation="@dimen/recent_bookmark_item_card_elevation"
         app:layout_constraintBottom_toTopOf="@+id/bookmark_title"
         app:layout_constraintTop_toTopOf="parent"
         app:layout_constraintRight_toRightOf="parent"
@@ -25,11 +27,9 @@
             style="@style/recentBookmarkFavicon"
             android:layout_width="@dimen/top_sites_favicon_size"
             android:layout_height="@dimen/top_sites_favicon_size"
-            android:layout_centerHorizontal="true"
-            android:layout_centerVertical="true"
-            android:background="?above" />
+            android:layout_gravity="center" />
 
-    </RelativeLayout>
+    </com.google.android.material.card.MaterialCardView>
 
     <TextView
         android:id="@+id/bookmark_title"
@@ -41,7 +41,7 @@
         android:nestedScrollingEnabled="false"
         android:scrollbars="none"
         android:textAppearance="@style/recentBookmarkItemSubTitleText"
-        android:padding="8dp"
+        android:paddingHorizontal="@dimen/recent_bookmark_item_text_padding_horizontal"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         tools:text="Recently Saved bookmark item" />

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

@@ -9,8 +9,7 @@
     xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="40dp"
-    android:layout_marginBottom="16dp">
+    android:layout_marginTop="@dimen/recent_bookmark_header_margin_top">
 
     <androidx.appcompat.widget.AppCompatTextView
         android:id="@+id/header"

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

@@ -81,11 +81,16 @@
     <dimen name="home_item_horizontal_margin">16dp</dimen>
 
     <!-- Home - Recently saved bookmarks -->
-    <dimen name="recent_bookmark_item_height">136dp</dimen>
-    <dimen name="recent_bookmark_item_width">156dp</dimen>
+    <dimen name="recent_bookmark_header_margin_top">40dp</dimen>
+    <dimen name="recent_bookmark_item_width">164dp</dimen>
+    <dimen name="recent_bookmark_item_card_width">156dp</dimen>
+    <dimen name="recent_bookmark_item_card_padding_top">16dp</dimen>
+    <dimen name="recent_bookmark_item_card_padding_bottom">8dp</dimen>
+    <dimen name="recent_bookmark_item_card_elevation">6dp</dimen>
     <dimen name="recent_bookmark_item_favicon_height">96dp</dimen>
     <dimen name="recent_bookmark_item_favicon_elevation">0dp</dimen>
     <dimen name="recent_bookmark_item_favicon_corner_size">8dp</dimen>
+    <dimen name="recent_bookmark_item_text_padding_horizontal">4dp</dimen>
 
     <!-- Browser Fragment -->
     <!--The size of the gap between the tab preview and content layout.-->