For #18745: Add Shadow To Shortcut Tiles

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

@@ -0,0 +1,17 @@
+<?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"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:shape="rectangle">
+    <corners android:radius="4dp" />
+    <solid
+        android:color="?mozac_widget_favicon_background_color"
+        tools:color="@color/photonWhite" />
+    <stroke
+        android:width="1dp"
+        android:color="@color/top_sites_border_color"
+        tools:color="@color/photonLightGrey30" />
+</shape>

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

@@ -40,7 +40,7 @@
         android:id="@+id/pin_indicator"
         android:layout_width="16dp"
         android:layout_height="16dp"
-        android:elevation="5dp"
+        android:elevation="7dp"
         android:translationX="8dp"
         android:translationY="-8dp"
         android:visibility="gone"

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

@@ -81,6 +81,7 @@
     <color name="top_site_pager_dot">#3A3944</color>
     <color name="top_site_pager_dot_selected">#5B5B66</color>
     <color name="top_site_pin_icon_background_tint">@color/photonViolet50</color>
+    <color name="top_sites_border_color">@color/dark_grey_90</color>
 
     <!-- Synced tabs colors-->
     <color name="synced_tabs_separator">@color/synced_tabs_separator_dark_theme</color>

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

@@ -286,6 +286,7 @@
     <color name="top_site_pager_dot">@color/photonLightGrey30</color>
     <color name="top_site_pager_dot_selected">@color/photonLightGrey50</color>
     <color name="top_site_pin_icon_background_tint">@color/photonInk20</color>
+    <color name="top_sites_border_color">@color/photonLightGrey30</color>
 
     <!-- Synced tabs colors-->
     <color name="synced_tabs_separator">@color/synced_tabs_separator_light_theme</color>

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

@@ -605,7 +605,8 @@
         <item name="android:layout_height">@dimen/top_sites_favicon_size</item>
         <item name="android:scaleType">fitCenter</item>
         <item name="android:padding">@dimen/top_sites_favicon_padding</item>
-        <item name="android:background">@drawable/mozac_widget_favicon_background</item>
+        <item name="android:background">@drawable/top_sites_background</item>
+        <item name="android:elevation">6dp</item>
     </style>
 
     <style name="TabTrayFab" parent="Widget.MaterialComponents.ExtendedFloatingActionButton">