Video Tutorials : Some UX polish

This CL contains a few UX polish
1 - Bottom margin between IPH card and the next cards on NTP
2 - Loading screen - Added Loading... text
3 - Used TextButton style for buttons in the player

Bug: None
Change-Id: I9f38ea1dc154332fafbfd5643448a2c15a15f646
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2506511Reviewed-by: David Trainor <dtrainor@chromium.org>
Commit-Queue: Shakti Sahu <shaktisahu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#822001}

chrome/android/java/res/layout/new_tab_page_layout.xml

@@ -84,6 +84,7 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="12dp"
+        android:layout_marginBottom="12dp"
         android:layout="@layout/video_tutorial_iph_card"
         android:inflatedId="@+id/video_iph_card"/>
 

chrome/browser/ui/android/strings/android_chrome_strings.grd

@@ -2810,6 +2810,9 @@ Data from your Incognito session will only be cleared from Chrome when you <ph n
       <message name="IDS_VIDEO_TUTORIALS_IPH_TAP_VOICE_ICON_TO_START" desc="In-product help bubble text prompting user to start typing on the search box or tap on the microphone icon to start a voice search.">
         Type here or tap the voice icon to start
       </message>
+      <message name="IDS_VIDEO_TUTORIALS_LOADING" desc="Text on the loading animation screen indicating that the video loading is currently in progress.">
+        Loading…
+      </message>
 
       <!-- Toolbar button strings -->
       <message name="IDS_OPEN_TABS" desc="Text for button to enter the tab switcher and show tabs that are open on this device">

chrome/browser/ui/android/strings/android_chrome_strings_grd/IDS_VIDEO_TUTORIALS_LOADING.png.sha1

+edcd73ed1f1bf2d070a0eeb3cf272d3284e01668
\ No newline at end of file

chrome/browser/video_tutorials/android/java/res/layout/video_tutorial_iph_card.xml

@@ -47,10 +47,9 @@
         android:layout_height="wrap_content"
         android:layout_toEndOf="@id/thumbnail"
         android:layout_toStartOf="@id/close_button"
-        android:layout_gravity="center_vertical"
+        android:layout_centerVertical="true"
         android:layout_marginStart="12dp"
         android:layout_marginEnd="12dp"
-        android:layout_marginTop="12dp"
         android:ellipsize="end"
         android:maxLines="3"
         android:textAppearance="@style/TextAppearance.TextLarge.Primary" />

chrome/browser/video_tutorials/internal/android/java/res/layout/video_player_controls.xml

@@ -18,7 +18,7 @@
         android:background="?attr/selectableItemBackground"
         android:contentDescription="@string/close"
         android:scaleType="center"
-        android:src="@drawable/btn_close" />
+        android:src="@drawable/btn_close_white" />
 
     <org.chromium.ui.widget.ChromeImageButton
         android:id="@+id/share_button"
@@ -55,16 +55,14 @@
             android:id="@+id/watch_next"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="28dp"
-            android:textAppearance="@style/TextAppearance.TextMedium.Primary.Light"
+            style="@style/TextButton"
             android:text="@string/video_tutorials_watch_next_video" />
 
         <TextView
             android:id="@+id/change_language"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:layout_marginTop="28dp"
-            android:textAppearance="@style/TextAppearance.TextMedium.Primary.Light" />
+            style="@style/TextButton" />
     </LinearLayout>
 
 </RelativeLayout>
\ No newline at end of file

chrome/browser/video_tutorials/internal/android/java/res/layout/video_player_loading.xml

@@ -3,18 +3,30 @@
      Use of this source code is governed by a BSD-style license that can be
      found in the LICENSE file. -->
 
-<FrameLayout
+<RelativeLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/loading_root"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:background="@android:color/background_dark">
 
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_above="@id/progress_bar"
+        android:layout_centerHorizontal="true"
+        android:textAppearance="@style/TextAppearance.TextMedium.Primary.Light"
+        android:text="@string/video_tutorials_loading"/>
+
     <ProgressBar
+        android:id="@+id/progress_bar"
         android:layout_width="match_parent"
         android:layout_height="10dp"
+        android:layout_marginTop="20dp"
+        android:layout_marginStart="60dp"
+        android:layout_marginEnd="60dp"
+        android:layout_centerVertical="true"
         android:indeterminate="true"
-        android:layout_gravity="center"
         style="?android:attr/progressBarStyleHorizontal" />
 
-</FrameLayout>
+</RelativeLayout>

chrome/browser/video_tutorials/internal/android/java/res/layout/video_tutorial_large_card.xml

@@ -67,8 +67,8 @@
         android:layout_height="wrap_content"
         android:layout_marginStart="12dp"
         android:layout_marginEnd="12dp"
-        android:layout_marginTop="11dp"
-        android:layout_marginBottom="11dp"
+        android:layout_marginTop="14dp"
+        android:layout_marginBottom="14dp"
         android:maxLines="1"
         android:ellipsize="end"
         app:layout_column="0"