My site page layout completed

41 files changed, 437 insertions, 72 deletions

diff --git a/WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java b/WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java
index d3edf79fc..2bddeb881 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java
+++ b/WordPress/src/main/java/org/wordpress/android/ui/ActivityLauncher.java
@@ -3,6 +3,9 @@ package org.wordpress.android.ui;
 import android.app.Activity;
 import android.content.Intent;
 
+import org.wordpress.android.models.Blog;
+import org.wordpress.android.ui.stats.StatsActivity;
+
 public class ActivityLauncher {
 
     public static void showSitePickerForResult(Activity activity, boolean visibleAccountsOnly) {
@@ -11,4 +14,14 @@ public class ActivityLauncher {
         activity.startActivityForResult(intent, RequestCodes.SITE_PICKER);
     }
 
+    public static void viewCurrentSite(Activity activity) {
+        Intent intent = new Intent(activity, ViewSiteActivity.class);
+        activity.startActivity(intent);
+    }
+
+    public static void viewCurrentSiteStats(Activity activity, Blog blog) {
+        Intent intent = new Intent(activity, StatsActivity.class);
+        intent.putExtra(StatsActivity.ARG_LOCAL_TABLE_BLOG_ID, blog.getLocalTableBlogId());
+        activity.startActivity(intent);
+    }
 }
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteFragment.java b/WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteFragment.java
index f103077e1..1a591b7b0 100644
--- a/WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteFragment.java
+++ b/WordPress/src/main/java/org/wordpress/android/ui/mysite/MySiteFragment.java
@@ -64,6 +64,22 @@ public class MySiteFragment extends Fragment {
             }
         });
 
+        WPTextView viewSiteTextView = (WPTextView) rootView.findViewById(R.id.my_site_view_site_text_view);
+        viewSiteTextView.setOnClickListener(new View.OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                ActivityLauncher.viewCurrentSite(getActivity());
+            }
+        });
+
+        WPTextView statsTextView = (WPTextView) rootView.findViewById(R.id.my_site_stats_text_view);
+        statsTextView.setOnClickListener(new View.OnClickListener() {
+            @Override
+            public void onClick(View v) {
+                ActivityLauncher.viewCurrentSiteStats(getActivity(), mBlog);
+            }
+        });
+
         refreshBlogDetails();
 
         return rootView;
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_comments.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_comments.png
new file mode 100644
index 000000000..395b32438
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_comments.png
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_media.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_media.png
new file mode 100644
index 000000000..2cd093f73
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_media.png
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_pages.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_pages.png
new file mode 100644
index 000000000..f7832ac97
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_pages.png
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_posts.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_posts.png
new file mode 100644
index 000000000..11560ad5a
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_posts.png
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_settings.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_settings.png
new file mode 100644
index 000000000..57dbf399c
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_settings.png
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_stats.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_stats.png
new file mode 100644
index 000000000..638206ba1
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_stats.png
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_themes.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_themes.png
new file mode 100644
index 000000000..962ad3f9d
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_themes.png
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_view_admin.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_view_admin.png
new file mode 100644
index 000000000..913358cd7
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_view_admin.png
diff --git a/WordPress/src/main/res/drawable-hdpi/my_site_icon_view_site.png b/WordPress/src/main/res/drawable-hdpi/my_site_icon_view_site.png
new file mode 100644
index 000000000..8dce3b4ca
--- /dev/null
+++ b/WordPress/src/main/res/drawable-hdpi/my_site_icon_view_site.png
diff --git a/WordPress/src/main/res/drawable-hdpi/switch_site_button_icon.png b/WordPress/src/main/res/drawable-hdpi/switch_site_button_icon.png
index f938c7290..fa953848c 100644
--- a/WordPress/src/main/res/drawable-hdpi/switch_site_button_icon.png
+++ b/WordPress/src/main/res/drawable-hdpi/switch_site_button_icon.png
diff --git a/WordPress/src/main/res/drawable-hdpi/switch_site_button_icon.png~ b/WordPress/src/main/res/drawable-hdpi/switch_site_button_icon.png~
deleted file mode 100755
index fea167c3d..000000000
--- a/WordPress/src/main/res/drawable-hdpi/switch_site_button_icon.png~
+++ /dev/null
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_comments.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_comments.png
new file mode 100644
index 000000000..34f167cc3
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_comments.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_media.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_media.png
new file mode 100644
index 000000000..72e6863c6
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_media.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_pages.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_pages.png
new file mode 100644
index 000000000..bbf2c002f
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_pages.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_posts.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_posts.png
new file mode 100644
index 000000000..de3b3bc8c
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_posts.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_settings.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_settings.png
new file mode 100644
index 000000000..482338fc7
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_settings.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_stats.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_stats.png
new file mode 100644
index 000000000..5aac52dfe
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_stats.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_themes.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_themes.png
new file mode 100644
index 000000000..682194496
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_themes.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_view_admin.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_view_admin.png
new file mode 100644
index 000000000..ec7773acd
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_view_admin.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/my_site_icon_view_site.png b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_view_site.png
new file mode 100644
index 000000000..e2ee9ce4d
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xhdpi/my_site_icon_view_site.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/switch_site_button_icon.png b/WordPress/src/main/res/drawable-xhdpi/switch_site_button_icon.png
index 84c7d7c1f..075642dea 100644
--- a/WordPress/src/main/res/drawable-xhdpi/switch_site_button_icon.png
+++ b/WordPress/src/main/res/drawable-xhdpi/switch_site_button_icon.png
diff --git a/WordPress/src/main/res/drawable-xhdpi/switch_site_button_icon.png~ b/WordPress/src/main/res/drawable-xhdpi/switch_site_button_icon.png~
deleted file mode 100755
index 19993ae27..000000000
--- a/WordPress/src/main/res/drawable-xhdpi/switch_site_button_icon.png~
+++ /dev/null
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_comments.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_comments.png
new file mode 100644
index 000000000..6c4bcd857
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_comments.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_media.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_media.png
new file mode 100644
index 000000000..205bc2de8
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_media.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_pages.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_pages.png
new file mode 100644
index 000000000..ef1352eac
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_pages.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_posts.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_posts.png
new file mode 100644
index 000000000..87a85688c
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_posts.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_settings.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_settings.png
new file mode 100644
index 000000000..f3731f7c1
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_settings.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_stats.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_stats.png
new file mode 100644
index 000000000..d18c0f84e
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_stats.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_themes.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_themes.png
new file mode 100644
index 000000000..17fcf2d1e
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_themes.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_view_admin.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_view_admin.png
new file mode 100644
index 000000000..2c382ca2e
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_view_admin.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_view_site.png b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_view_site.png
new file mode 100644
index 000000000..19ef0be66
--- /dev/null
+++ b/WordPress/src/main/res/drawable-xxhdpi/my_site_icon_view_site.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/switch_site_button_icon.png b/WordPress/src/main/res/drawable-xxhdpi/switch_site_button_icon.png
index f3a9513c9..81a52dea1 100644
--- a/WordPress/src/main/res/drawable-xxhdpi/switch_site_button_icon.png
+++ b/WordPress/src/main/res/drawable-xxhdpi/switch_site_button_icon.png
diff --git a/WordPress/src/main/res/drawable-xxhdpi/switch_site_button_icon.png~ b/WordPress/src/main/res/drawable-xxhdpi/switch_site_button_icon.png~
deleted file mode 100755
index 03dcc804e..000000000
--- a/WordPress/src/main/res/drawable-xxhdpi/switch_site_button_icon.png~
+++ /dev/null
diff --git a/WordPress/src/main/res/drawable/my_site_add_button.xml b/WordPress/src/main/res/drawable/my_site_add_button.xml
new file mode 100644
index 000000000..5b4ee93ee
--- /dev/null
+++ b/WordPress/src/main/res/drawable/my_site_add_button.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <solid android:color="@color/my_site_button_bg" />
+    <corners android:radius="@dimen/my_site_add_button_radius" />
+
+</shape>
\ No newline at end of file
diff --git a/WordPress/src/main/res/layout/fragment_my_site.xml b/WordPress/src/main/res/layout/fragment_my_site.xml
index 1d7c4a88e..9be0ddaae 100644
--- a/WordPress/src/main/res/layout/fragment_my_site.xml
+++ b/WordPress/src/main/res/layout/fragment_my_site.xml
@@ -1,81 +1,307 @@
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="match_parent">
+<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+    android:layout_width="fill_parent"
+    android:layout_height="wrap_content">
 
-    <RelativeLayout
-        android:layout_width="match_parent"
+    <LinearLayout
+        android:layout_width="fill_parent"
         android:layout_height="wrap_content"
-        android:layout_marginLeft="@dimen/margin_large"
-        android:layout_marginRight="@dimen/margin_large"
-        android:layout_marginTop="@dimen/margin_large"
-        android:background="@color/white">
-
-        <org.wordpress.android.widgets.WPNetworkImageView
-            android:id="@+id/my_site_blavatar"
-            android:layout_width="@dimen/blavatar_sz_small"
-            android:layout_height="@dimen/blavatar_sz_small"
-            android:layout_margin="@dimen/margin_large"
-            android:gravity="center_vertical" />
-
-        <org.wordpress.android.widgets.WPTextView
-            android:id="@+id/my_site_title_label"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/margin_large"
-            android:layout_toRightOf="@id/my_site_blavatar"
-            android:ellipsize="end"
-            android:gravity="center_vertical"
-            android:maxLines="1"
-            android:textColor="@color/grey_dark"
-            android:textSize="@dimen/text_sz_small"
-            tools:text="my_site_title" />
-
-        <org.wordpress.android.widgets.WPTextView
-            android:id="@+id/my_site_subtitle_label"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_below="@id/my_site_title_label"
-            android:layout_toRightOf="@id/my_site_blavatar"
-            android:ellipsize="end"
-            android:gravity="center_vertical"
-            android:maxLines="1"
-            android:textColor="@color/grey_medium"
-            android:textSize="@dimen/text_sz_small"
-            android:textStyle="italic"
-            tools:text="my_site_title" />
-
-        <View
-            android:id="@+id/my_site_blog_detail_divider"
-            android:layout_width="match_parent"
-            android:layout_height="1dp"
-            android:layout_below="@id/my_site_subtitle_label"
-            android:layout_marginTop="@dimen/margin_medium"
-            android:background="@color/grey_extra_light" />
+        android:orientation="vertical">
 
-        <LinearLayout
+        <RelativeLayout
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_below="@id/my_site_blog_detail_divider"
-            android:background="@color/my_site_switch_site_button_bg">
+            android:layout_marginLeft="@dimen/margin_medium"
+            android:layout_marginRight="@dimen/margin_medium"
+            android:layout_marginTop="@dimen/margin_medium"
+            android:background="@color/white"
+            android:elevation="@dimen/my_site_card_elevation">
+
+            <org.wordpress.android.widgets.WPNetworkImageView
+                android:id="@+id/my_site_blavatar"
+                android:layout_width="@dimen/blavatar_sz"
+                android:layout_height="@dimen/blavatar_sz"
+                android:layout_margin="@dimen/margin_large"
+                android:gravity="center_vertical" />
 
             <org.wordpress.android.widgets.WPTextView
-                android:id="@+id/switch_site"
+                android:id="@+id/my_site_title_label"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginLeft="@dimen/my_site_switch_site_button_left_margin"
-                android:background="?android:attr/selectableItemBackground"
-                android:drawableLeft="@drawable/switch_site_button_icon"
-                android:drawablePadding="@dimen/margin_small"
-                android:minHeight="0dp"
-                android:paddingBottom="@dimen/margin_large"
-                android:paddingTop="@dimen/margin_large"
-                android:text="@string/switch_site_button"
-                android:textColor="@color/grey_dark"
-                android:textSize="@dimen/text_sz_small" />
+                android:layout_marginTop="@dimen/my_site_blog_name_margin_top"
+                android:layout_toRightOf="@id/my_site_blavatar"
+                android:ellipsize="end"
+                android:gravity="center_vertical"
+                android:maxLines="1"
+                android:textColor="@color/my_site_dark_blue"
+                android:textSize="@dimen/text_sz_large"
+                android:textStyle="bold" />
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_subtitle_label"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_below="@id/my_site_title_label"
+                android:layout_toRightOf="@id/my_site_blavatar"
+                android:ellipsize="end"
+                android:gravity="center_vertical"
+                android:maxLines="1"
+                android:textColor="@color/my_site_light_blue"
+                android:textSize="@dimen/text_sz_medium" />
+
+            <LinearLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_below="@id/my_site_blavatar"
+                android:background="@color/my_site_button_bg">
+
+                <org.wordpress.android.widgets.WPTextView
+                    android:id="@+id/switch_site"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginLeft="@dimen/margin_large"
+                    android:background="?android:attr/selectableItemBackground"
+                    android:drawableLeft="@drawable/switch_site_button_icon"
+                    android:drawablePadding="@dimen/margin_small"
+                    android:gravity="center_vertical"
+                    android:minHeight="0dp"
+                    android:paddingBottom="@dimen/my_site_switch_site_button_padding_bottom"
+                    android:paddingTop="@dimen/my_site_switch_site_button_padding_top"
+                    android:text="@string/switch_site_button"
+                    android:textColor="@color/my_site_dark_blue"
+                    android:textSize="@dimen/text_sz_medium" />
+
+            </LinearLayout>
+
+        </RelativeLayout>
+
+        <!--View Site-->
+        <RelativeLayout
+            style="@style/MySiteListRowLayout"
+            android:layout_marginTop="@dimen/my_site_list_margin_top">
+
+            <ImageView
+                android:id="@+id/my_site_view_site_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/view_site"
+                android:src="@drawable/my_site_icon_view_site" />
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_view_site_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toRightOf="@id/my_site_view_site_icon"
+                android:text="@string/view_site" />
+
+        </RelativeLayout>
+
+        <!--Stats-->
+        <RelativeLayout style="@style/MySiteListRowLayout">
+
+            <ImageView
+                android:id="@+id/my_site_stats_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/stats"
+                android:src="@drawable/my_site_icon_stats" />
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_stats_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toRightOf="@id/my_site_stats_icon"
+                android:text="@string/stats" />
+
+        </RelativeLayout>
+
+        <!--PUBLISH-->
+        <LinearLayout style="@style/MySiteListHeaderLayout">
+
+            <org.wordpress.android.widgets.WPTextView
+                style="@style/MySiteListHeaderTextView"
+                android:text="@string/publish" />
+
+            <View style="@style/MySiteListSectionDividerView" />
 
         </LinearLayout>
 
-    </RelativeLayout>
+        <!--Blog Posts-->
+        <RelativeLayout style="@style/MySiteListRowLayout">
+
+            <ImageView
+                android:id="@+id/my_site_blog_posts_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/blog_posts"
+                android:src="@drawable/my_site_icon_posts" />
+
+            <LinearLayout
+                android:id="@+id/my_site_posts_add_button_container"
+                style="@style/MySiteAddButtonContainer">
+
+                <org.wordpress.android.widgets.WPTextView style="@style/MySiteAddButton" />
+
+            </LinearLayout>
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_blog_posts_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toLeftOf="@id/my_site_posts_add_button_container"
+                android:layout_toRightOf="@id/my_site_blog_posts_icon"
+                android:text="@string/blog_posts" />
+
+        </RelativeLayout>
+
+        <!--Media-->
+        <RelativeLayout style="@style/MySiteListRowLayout">
+
+            <ImageView
+                android:id="@+id/my_site_media_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/media"
+                android:src="@drawable/my_site_icon_media" />
+
+            <LinearLayout
+                android:id="@+id/my_site_media_add_button_container"
+                style="@style/MySiteAddButtonContainer">
+
+                <org.wordpress.android.widgets.WPTextView style="@style/MySiteAddButton" />
+
+            </LinearLayout>
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_media_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toLeftOf="@id/my_site_media_add_button_container"
+                android:layout_toRightOf="@id/my_site_media_icon"
+                android:text="@string/media" />
+
+        </RelativeLayout>
+
+        <!--Pages-->
+        <RelativeLayout style="@style/MySiteListRowLayout">
+
+            <ImageView
+                android:id="@+id/my_site_pages_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/pages"
+                android:src="@drawable/my_site_icon_pages" />
+
+            <LinearLayout
+                android:id="@+id/my_site_pages_add_button_container"
+                style="@style/MySiteAddButtonContainer">
+
+                <org.wordpress.android.widgets.WPTextView style="@style/MySiteAddButton" />
+
+            </LinearLayout>
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_pages_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toLeftOf="@id/my_site_pages_add_button_container"
+                android:layout_toRightOf="@id/my_site_pages_icon"
+                android:text="@string/pages" />
+
+        </RelativeLayout>
+
+        <!--Comments-->
+        <RelativeLayout style="@style/MySiteListRowLayout">
+
+            <ImageView
+                android:id="@+id/my_site_comments_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/comments"
+                android:src="@drawable/my_site_icon_comments" />
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_oages_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toRightOf="@id/my_site_comments_icon"
+                android:text="@string/comments" />
+
+        </RelativeLayout>
+
+        <!--Look & Feel-->
+        <LinearLayout style="@style/MySiteListHeaderLayout">
+
+            <org.wordpress.android.widgets.WPTextView
+                style="@style/MySiteListHeaderTextView"
+                android:text="@string/look_and_feel" />
+
+            <View style="@style/MySiteListSectionDividerView" />
+
+        </LinearLayout>
+
+        <!--Themes-->
+        <RelativeLayout style="@style/MySiteListRowLayout">
+
+            <ImageView
+                android:id="@+id/my_site_themes_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/themes"
+                android:src="@drawable/my_site_icon_themes" />
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_themes_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toRightOf="@id/my_site_themes_icon"
+                android:text="@string/themes" />
+
+        </RelativeLayout>
+
+        <!--Configuration-->
+        <LinearLayout style="@style/MySiteListHeaderLayout">
+
+            <org.wordpress.android.widgets.WPTextView
+                style="@style/MySiteListHeaderTextView"
+                android:text="@string/configuration" />
+
+            <View style="@style/MySiteListSectionDividerView" />
+
+        </LinearLayout>
+
+        <!--Settings-->
+        <RelativeLayout style="@style/MySiteListRowLayout">
+
+            <ImageView
+                android:id="@+id/my_site_settings_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/settings"
+                android:src="@drawable/my_site_icon_settings" />
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_settings_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toRightOf="@id/my_site_settings_icon"
+                android:text="@string/settings" />
+
+        </RelativeLayout>
+
+        <!--Admin-->
+        <LinearLayout style="@style/MySiteListHeaderLayout">
+
+            <org.wordpress.android.widgets.WPTextView
+                style="@style/MySiteListHeaderTextView"
+                android:text="@string/admin" />
+
+            <View style="@style/MySiteListSectionDividerView" />
+
+        </LinearLayout>
+
+        <!--View Admin-->
+        <RelativeLayout
+            style="@style/MySiteListRowLayout"
+            android:layout_marginBottom="@dimen/margin_extra_large">
+
+            <ImageView
+                android:id="@+id/my_site_view_admin_icon"
+                style="@style/MySiteListRowIcon"
+                android:contentDescription="@string/view_admin"
+                android:src="@drawable/my_site_icon_view_admin" />
+
+            <org.wordpress.android.widgets.WPTextView
+                android:id="@+id/my_site_view_admin_text_view"
+                style="@style/MySiteListRowTextView"
+                android:layout_toRightOf="@id/my_site_view_admin_icon"
+                android:text="@string/view_admin" />
+
+        </RelativeLayout>
+
+    </LinearLayout>
 
-</LinearLayout>
+</ScrollView>
\ No newline at end of file
diff --git a/WordPress/src/main/res/values/colors.xml b/WordPress/src/main/res/values/colors.xml
index 1adfcd2b4..f56554453 100644
--- a/WordPress/src/main/res/values/colors.xml
+++ b/WordPress/src/main/res/values/colors.xml
@@ -126,5 +126,8 @@
     <color name="calypso_orange_dark">#f0821e</color>
 
     <!--my site-->
-    <color name="my_site_switch_site_button_bg">#f4f8f9</color>
+    <color name="my_site_dark_blue">#2e4453</color>
+    <color name="my_site_light_blue">#87a6bc</color>
+    <color name="my_site_button_bg">#f3f6f8</color>
+    <color name="my_site_section_divider">#c8d7e1</color>
 </resources>
diff --git a/WordPress/src/main/res/values/dimens.xml b/WordPress/src/main/res/values/dimens.xml
index 76ee91c71..2733de254 100644
--- a/WordPress/src/main/res/values/dimens.xml
+++ b/WordPress/src/main/res/values/dimens.xml
@@ -129,6 +129,18 @@
     <dimen name="stats_barchart_height">128dp</dimen>
 
     <!-- my site -->
-    <dimen name="my_site_switch_site_button_left_margin">56dp</dimen>
+    <dimen name="my_site_add_button_padding_bottom">5dp</dimen>
+    <dimen name="my_site_add_button_radius">2dp</dimen>
+    <dimen name="my_site_blog_name_margin_top">11dp</dimen>
+    <dimen name="my_site_card_elevation">2dp</dimen>
+    <dimen name="my_site_list_row_height">48dp</dimen>
+    <dimen name="my_site_list_row_icon_margin_right">32dp</dimen>
+    <dimen name="my_site_list_row_icon_size">24dp</dimen>
+    <dimen name="my_site_list_row_padding_left">16dp</dimen>
+    <dimen name="my_site_list_margin_top">10dp</dimen>
+    <dimen name="my_site_switch_site_button_padding_bottom">11dp</dimen>
+    <dimen name="my_site_switch_site_button_padding_top">10dp</dimen>
+    <dimen name="my_site_header_padding_bottom">10dp</dimen>
+    <dimen name="my_site_header_padding_top">10dp</dimen>
 
 </resources>
diff --git a/WordPress/src/main/res/values/strings.xml b/WordPress/src/main/res/values/strings.xml
index 8928769db..cb9dd28ba 100644
--- a/WordPress/src/main/res/values/strings.xml
+++ b/WordPress/src/main/res/values/strings.xml
@@ -75,6 +75,11 @@
     <string name="upload">Upload</string>
     <string name="learn_more">Learn more</string>
     <string name="posting_post">Posting \"%s\"</string>
+    <string name="blog_posts">Blog Posts</string>
+    <string name="publish">Publish</string>
+    <string name="configuration">Configuration</string>
+    <string name="admin">Admin</string>
+    <string name="comments">Comments</string>
 
     <!-- Media Gallery Action Bar -->
     <string name="media_add_popup_title">Add to media library</string>
@@ -557,8 +562,8 @@
     <string name="new_media">New media</string>
     <string name="menu_search">Search</string>
     <string name="quick_photo">Quick photo</string>
-    <string name="view_site">View site</string>
-    <string name="view_admin">View admin</string>
+    <string name="view_site">View Site</string>
+    <string name="view_admin">View Admin</string>
 
     <!-- Image Alignment -->
     <string name="image_alignment">Alignment</string>
@@ -842,4 +847,5 @@
 
     <!--My Site-->
     <string name="switch_site_button">Switch Site</string>
+    <string name="look_and_feel">Look and Feel</string>
 </resources>
diff --git a/WordPress/src/main/res/values/styles.xml b/WordPress/src/main/res/values/styles.xml
index f4a7828b6..53f1d75be 100644
--- a/WordPress/src/main/res/values/styles.xml
+++ b/WordPress/src/main/res/values/styles.xml
@@ -273,4 +273,86 @@
     <style name="WordPress.SwipeToRefresh">
         <item name="refreshIndicatorColor">@color/blue_new_kid</item>
     </style>
+
+    <!--My Site Styles-->
+    <style name="MySiteListRowLayout">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">@dimen/my_site_list_row_height</item>
+        <item name="android:paddingLeft">@dimen/my_site_list_row_padding_left</item>
+    </style>
+
+    <style name="MySiteListRowIcon">
+        <item name="android:layout_width">@dimen/my_site_list_row_icon_size</item>
+        <item name="android:layout_height">@dimen/my_site_list_row_icon_size</item>
+        <item name="android:layout_alignParentLeft">true</item>
+        <item name="android:layout_centerVertical">true</item>
+        <item name="android:background">#d4dfe5</item>
+        <item name="android:layout_marginRight">@dimen/my_site_list_row_icon_margin_right</item>
+        <item name="android:gravity">center_vertical</item>
+    </style>
+
+    <style name="MySiteListRowTextView">
+        <item name="android:layout_width">fill_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_centerVertical">true</item>
+        <item name="android:layout_marginRight">@dimen/margin_medium</item>
+        <item name="android:ellipsize">end</item>
+        <item name="android:gravity">center_vertical</item>
+        <item name="android:maxLines">1</item>
+        <item name="android:textColor">@color/my_site_dark_blue</item>
+        <item name="android:textSize">@dimen/text_sz_large</item>
+        <item name="android:paddingTop">@dimen/margin_large</item>
+        <item name="android:paddingBottom">@dimen/margin_large</item>
+    </style>
+
+    <style name="MySiteAddButtonContainer">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">fill_parent</item>
+        <item name="android:layout_alignParentRight">true</item>
+        <item name="android:layout_marginRight">@dimen/margin_extra_large</item>
+        <item name="android:background">?android:attr/selectableItemBackground</item>
+    </style>
+
+    <style name="MySiteAddButton">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:background">@drawable/my_site_add_button</item>
+        <item name="android:minWidth">0dp</item>
+        <item name="android:minHeight">0dp</item>
+        <item name="android:paddingBottom">@dimen/my_site_add_button_padding_bottom</item>
+        <item name="android:paddingLeft">@dimen/margin_large</item>
+        <item name="android:paddingRight">@dimen/margin_large</item>
+        <item name="android:paddingTop">@dimen/margin_small</item>
+        <item name="android:text">@string/add</item>
+        <item name="android:textColor">@color/my_site_light_blue</item>
+        <item name="android:textSize">@dimen/text_sz_medium</item>
+        <item name="android:layout_gravity">center_vertical</item>
+    </style>
+
+    <style name="MySiteListHeaderLayout">
+        <item name="android:layout_width">match_parent</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:paddingBottom">@dimen/my_site_header_padding_bottom</item>
+        <item name="android:paddingLeft">@dimen/my_site_list_row_padding_left</item>
+        <item name="android:paddingTop">@dimen/my_site_header_padding_top</item>
+    </style>
+
+    <style name="MySiteListHeaderTextView">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:layout_centerVertical">true</item>
+        <item name="android:textColor">@color/my_site_light_blue</item>
+        <item name="android:textSize">@dimen/text_sz_medium</item>
+        <item name="android:textAllCaps">true</item>
+    </style>
+
+    <style name="MySiteListSectionDividerView">
+        <item name="android:layout_width">fill_parent</item>
+        <item name="android:layout_height">1dp</item>
+        <item name="android:layout_gravity">center_vertical</item>
+        <item name="android:layout_marginLeft">@dimen/margin_large</item>
+        <item name="android:background">@color/my_site_section_divider</item>
+        <item name="android:layout_marginRight">@dimen/margin_extra_large</item>
+    </style>
+
 </resources>