Update: tweak preview card UI

Author: ovitrif

WordPress/src/main/res/layout-land/site_creation_preview_screen_default.xml

@@ -38,9 +38,7 @@
         layout="@layout/site_creation_preview_web_view_container"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_marginStart="@dimen/margin_large"
-        android:layout_marginTop="@dimen/margin_extra_medium_large"
-        android:layout_marginEnd="@dimen/margin_large"
+        android:layout_margin="@dimen/margin_large"
         android:layout_toStartOf="@+id/sitePreviewTitleAndButtonContainer" />
 </RelativeLayout>
 

WordPress/src/main/res/layout/site_creation_header_v2.xml

@@ -9,8 +9,6 @@
     <org.wordpress.android.widgets.WPTextView
         android:id="@+id/title"
         style="@style/SiteCreationHeaderV2Title"
-        android:lineSpacingExtra="-4sp"
-        android:letterSpacing="0.01"
         android:paddingBottom="@dimen/margin_large"
         app:fixWidowWords="true"
         app:autoSizeTextType="uniform"
@@ -20,8 +18,6 @@
         android:id="@+id/subtitle"
         style="@style/SiteCreationHeaderV2Subtitle"
         android:paddingBottom="@dimen/margin_extra_medium_large"
-        android:lineSpacingExtra="5sp"
-        android:letterSpacing="0.01"
         app:fixWidowWords="true"
         tools:text="@string/new_site_creation_intents_header_subtitle" />
 </LinearLayout>

WordPress/src/main/res/layout/site_creation_preview_header_item.xml

@@ -7,8 +7,6 @@
     <org.wordpress.android.widgets.WPTextView
         android:id="@+id/sitePreviewTitle"
         style="@style/SiteCreationHeaderV2Title"
-        android:lineSpacingExtra="-4sp"
-        android:letterSpacing="0.01"
         android:paddingBottom="@dimen/margin_large"
         android:text="@string/new_site_creation_preview_title"
         app:fixWidowWords="true"
@@ -17,9 +15,8 @@
     <org.wordpress.android.widgets.WPTextView
         android:id="@+id/sitePreviewSubtitle"
         style="@style/SiteCreationHeaderV2Subtitle"
+        android:lineSpacingExtra="@null"
         android:paddingBottom="@dimen/margin_large"
-        android:lineSpacingExtra="5sp"
-        android:letterSpacing="0.01"
         android:text="@string/new_site_creation_preview_subtitle"
         app:fixWidowWords="true" />
 </LinearLayout>

WordPress/src/main/res/layout/site_creation_preview_web_view_container.xml

@@ -6,8 +6,11 @@
     style="@style/Widget.MaterialComponents.CardView"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    app:cardCornerRadius="0dp"
-    app:cardElevation="@dimen/card_elevation">
+    android:layout_marginBottom="@dimen/margin_small"
+    app:cardCornerRadius="@dimen/margin_large"
+    app:cardElevation="@dimen/card_elevation"
+    app:strokeColor="@color/site_creation_preview_card_border"
+    app:strokeWidth="@dimen/margin_extra_extra_small">
 
     <LinearLayout
         android:layout_width="match_parent"

WordPress/src/main/res/values-land/styles.xml

@@ -2,5 +2,6 @@
 <resources>
     <style name="SiteCreationHeaderV2Title" parent="SiteCreationHeaderV2Title.Base">
         <item name="android:textSize">@dimen/text_sz_double_extra_large</item>
+        <item name="android:lineSpacingExtra">@null</item>
     </style>
 </resources>

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

@@ -99,6 +99,7 @@
 
     <!-- Site creation  -->
     <color name="site_creation_intent_item_emoji_bg">#3d3d3d</color>
+    <color name="site_creation_preview_card_border">@color/white_translucent_20</color>
 
     <!-- Jetpack Migration -->
     <color name="bg_jp_migration_buttons_panel">#E6121212</color>

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

@@ -130,6 +130,7 @@
     <!-- Site creation  -->
     <color name="site_creation_skip_button_text">@color/blue_50</color>
     <color name="site_creation_intent_item_emoji_bg">@color/grey_lighten_30</color>
+    <color name="site_creation_preview_card_border">@color/black_translucent_20</color>
 
     <!-- Jetpack Migration -->
     <color name="bg_jp_migration_buttons_panel">@color/white_translucent_80</color>

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

@@ -1559,6 +1559,8 @@
         <item name="android:textAppearance">?attr/textAppearanceHeadline4</item>
         <item name="android:textStyle">bold</item>
         <item name="android:maxLines">3</item>
+        <item name="android:letterSpacing">0.01</item>
+        <item name="android:lineSpacingExtra">-4sp</item>
         <item name="fontFamily">serif</item>
     </style>
 
@@ -1570,6 +1572,8 @@
         <item name="android:textAppearance">?attr/textAppearanceBody1</item>
         <item name="android:maxLines">5</item>
         <item name="android:alpha">0.6</item>
+        <item name="android:letterSpacing">0.01</item>
+        <item name="android:lineSpacingExtra">5sp</item>
         <item name="fontFamily">sans-serif</item>
     </style>