Created article list to look like designs

I modified the ArticleList widget to look like the designs. This meant modifying some of the css as well as creating a
new textButton widget, which displays a text label and an icon image, which will appear on a hover. Also added the
separators between the category info box and the article list

[endlessm/eos-sdk#177]

14 files changed, 30 insertions, 6 deletions

diff --git a/wikipedia/data/assets/category_hover_arrow.png b/wikipedia/data/assets/category_hover_arrow.png
new file mode 100644
index 0000000..13a2fb0
--- /dev/null
+++ b/wikipedia/data/assets/category_hover_arrow.png
diff --git a/wikipedia/data/assets/category_splash_separator_shadow.png b/wikipedia/data/assets/category_splash_separator_shadow.png
new file mode 100644
index 0000000..6ef03e0
--- /dev/null
+++ b/wikipedia/data/assets/category_splash_separator_shadow.png
diff --git a/wikipedia/data/assets/content_background.jpg b/wikipedia/data/assets/content_background.jpg
new file mode 100644
index 0000000..e53a87a
--- /dev/null
+++ b/wikipedia/data/assets/content_background.jpg
diff --git a/wikipedia/data/assets/content_title_separator.png b/wikipedia/data/assets/content_title_separator.png
new file mode 100644
index 0000000..db7d7db
--- /dev/null
+++ b/wikipedia/data/assets/content_title_separator.png
diff --git a/wikipedia/data/assets/image_strip_back_button.png b/wikipedia/data/assets/image_strip_back_button.png
new file mode 100644
index 0000000..1d4787c
--- /dev/null
+++ b/wikipedia/data/assets/image_strip_back_button.png
diff --git a/wikipedia/data/assets/submenu_background.jpg b/wikipedia/data/assets/submenu_background.jpg
new file mode 100644
index 0000000..ccdac1d
--- /dev/null
+++ b/wikipedia/data/assets/submenu_background.jpg
diff --git a/wikipedia/data/assets/submenu_bg_hover.png b/wikipedia/data/assets/submenu_bg_hover.png
new file mode 100644
index 0000000..b9ed24a
--- /dev/null
+++ b/wikipedia/data/assets/submenu_bg_hover.png
diff --git a/wikipedia/data/assets/submenu_bg_normal.jpg b/wikipedia/data/assets/submenu_bg_normal.jpg
new file mode 100644
index 0000000..b84c375
--- /dev/null
+++ b/wikipedia/data/assets/submenu_bg_normal.jpg
diff --git a/wikipedia/data/assets/submenu_bg_pressed.png b/wikipedia/data/assets/submenu_bg_pressed.png
new file mode 100644
index 0000000..d5693d5
--- /dev/null
+++ b/wikipedia/data/assets/submenu_bg_pressed.png
diff --git a/wikipedia/data/assets/submenu_hover_arrow.png b/wikipedia/data/assets/submenu_hover_arrow.png
new file mode 100644
index 0000000..a286591
--- /dev/null
+++ b/wikipedia/data/assets/submenu_hover_arrow.png
diff --git a/wikipedia/data/assets/submenu_separator_shadow_a.png b/wikipedia/data/assets/submenu_separator_shadow_a.png
new file mode 100644
index 0000000..d4ac1ba
--- /dev/null
+++ b/wikipedia/data/assets/submenu_separator_shadow_a.png
diff --git a/wikipedia/data/assets/submenu_separator_shadow_b.png b/wikipedia/data/assets/submenu_separator_shadow_b.png
new file mode 100644
index 0000000..ba79241
--- /dev/null
+++ b/wikipedia/data/assets/submenu_separator_shadow_b.png
diff --git a/wikipedia/data/css/endless_brazil.css b/wikipedia/data/css/endless_brazil.css
index 7e0bde4..fc667cb 100644
--- a/wikipedia/data/css/endless_brazil.css
+++ b/wikipedia/data/css/endless_brazil.css
@@ -1,5 +1,5 @@
 * {
-    font-family: "Benton Sans";
+    font-family: "BentonSans Regular";
 }
 
 .title {
@@ -11,15 +11,29 @@
     color: #a0a0a0;
 }
 
+Gjs_ArticleList{
+    background-image: url('resource:///com/endlessm/brazil/assets/submenu_background.jpg');
+}
+
 Gjs_ArticleList .button {
-    border-top: 1px solid #555753;
-    padding: 10px;
-    background-color: #d3d7cf;
-    color: black;
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    font-size: 15px;
+    color: #464646;
+    background-image: url('resource:///com/endlessm/brazil/assets/submenu_bg_normal.jpg');
+    background-size: cover;
 }
 
 Gjs_ArticleList .button:hover {
     color: #555753;
+    background-image: url('resource:///com/endlessm/brazil/assets/submenu_bg_hover.png');
+}
+
+Gjs_ArticleList .button:active {
+    color: #555753;
+    background-image: url('resource:///com/endlessm/brazil/assets/submenu_bg_pressed.png');
 }
 
 .articles-page {
@@ -37,6 +51,7 @@ Gjs_ArticleList .button:hover {
 }
 
 #category_title{
+    font-family: "BentonSans Light";
     font-size: 52px;
     color: rgba(255, 255, 255, 0.9);
-}
+}
\ No newline at end of file
diff --git a/wikipedia/data/endless_brazil.gresource.xml b/wikipedia/data/endless_brazil.gresource.xml
index 1ca63a1..6040179 100644
--- a/wikipedia/data/endless_brazil.gresource.xml
+++ b/wikipedia/data/endless_brazil.gresource.xml
@@ -6,5 +6,14 @@
     <file>category_images/cuisine.jpg</file>
     <file>category_images/history.jpg</file>
     <file>assets/introduction_title_separator.png</file>
+    <file>assets/submenu_bg_hover.png</file>
+    <file>assets/submenu_bg_pressed.png</file>
+    <file>assets/submenu_bg_normal.jpg</file>
+    <file>assets/submenu_separator_shadow_a.png</file>
+    <file>assets/submenu_separator_shadow_b.png</file>
+    <file>assets/submenu_hover_arrow.png</file>
+    <file>assets/submenu_background.jpg</file>
+    <file>assets/category_splash_separator_shadow.png</file>
+    <file>assets/category_hover_arrow.png</file>
   </gresource>
 </gresources>