Bug 1418378 - Use Material Icons on Bugzilla home page instead of low-res images

14 files changed, 121 insertions, 104 deletions

diff --git a/extensions/BMO/template/en/default/hook/index-intro.html.tmpl b/extensions/BMO/template/en/default/hook/index-intro.html.tmpl
deleted file mode 100644
index ddee1db2f..000000000
--- a/extensions/BMO/template/en/default/hook/index-intro.html.tmpl
+++ /dev/null
@@ -1,10 +0,0 @@
-[%# 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/.
-  #
-  # This Source Code Form is "Incompatible With Secondary Licenses", as
-  # defined by the Mozilla Public License, v. 2.0.
-  #%]
-
-<a id="docs" class="bz_common_actions"
-   href="https://bmo.readthedocs.org/"><span>Documentation</span></a>
diff --git a/images/bugzilla-magnifier.png b/images/bugzilla-magnifier.png
deleted file mode 100644
index b859b1668..000000000
--- a/images/bugzilla-magnifier.png
+++ /dev/null
diff --git a/images/bugzilla-papericon.png b/images/bugzilla-papericon.png
deleted file mode 100644
index 677567929..000000000
--- a/images/bugzilla-papericon.png
+++ /dev/null
diff --git a/images/bugzilla-person-alternate.png b/images/bugzilla-person-alternate.png
deleted file mode 100644
index a9e9ff213..000000000
--- a/images/bugzilla-person-alternate.png
+++ /dev/null
diff --git a/images/bugzilla-person.png b/images/bugzilla-person.png
deleted file mode 100644
index 62351c265..000000000
--- a/images/bugzilla-person.png
+++ /dev/null
diff --git a/images/bugzilla-questionmark2.png b/images/bugzilla-questionmark2.png
deleted file mode 100644
index 441d07f93..000000000
--- a/images/bugzilla-questionmark2.png
+++ /dev/null
diff --git a/qa/t/test_create_user_accounts.t b/qa/t/test_create_user_accounts.t
index 99792367e..ba0f39671 100644
--- a/qa/t/test_create_user_accounts.t
+++ b/qa/t/test_create_user_accounts.t
@@ -25,8 +25,8 @@ logout($sel);
 # expires after 3 days only and this test can be executed several times per day.
 my $valid_account = 'selenium-' . random_string(10) . '@bugzilla.test';
 
-$sel->is_text_present_ok("Open a New Account");
-$sel->click_ok("link=Open a New Account");
+$sel->is_text_present_ok("New Account");
+$sel->click_ok("link=New Account");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Create a new Bugzilla account");
 $sel->type_ok("login", $valid_account);
@@ -40,8 +40,8 @@ $sel->is_text_present_ok("A confirmation email has been sent");
 $sel->click_ok('//*[@id="header-title"]//a');
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Bugzilla Main Page");
-$sel->is_text_present_ok("Open a New Account");
-$sel->click_ok("link=Open a New Account");
+$sel->is_text_present_ok("New Account");
+$sel->click_ok("link=New Account");
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Create a new Bugzilla account");
 $sel->type_ok("login", $valid_account);
@@ -128,7 +128,7 @@ $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->refresh;
 $sel->wait_for_page_to_load_ok(WAIT_TIME);
 $sel->title_is("Bugzilla Main Page");
-ok(!$sel->is_text_present("Open a New Account"), "No link named 'Open a New Account'");
+ok(!$sel->is_text_present("New Account"), "No link named 'New Account'");
 $sel->open_ok("/$config->{bugzilla_installation}/createaccount.cgi");
 $sel->title_is("Account Creation Disabled");
 $error_msg = trim($sel->get_text("error_msg"));
diff --git a/skins/standard/global.css b/skins/standard/global.css
index 81a420077..adea088a0 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -243,7 +243,7 @@
     }
 
     #header .link-file .icon::before {
-        content: '\E254';
+        content: '\E89C';
     }
 
     #header .link-dashboard .icon::before {
diff --git a/skins/standard/index.css b/skins/standard/index.css
index 9fe9202db..62b7deb3f 100644
--- a/skins/standard/index.css
+++ b/skins/standard/index.css
@@ -50,34 +50,6 @@
         font-weight: bold;
     }
 
-    .bz_common_actions {
-        text-align: center;
-    }
-    .bz_common_actions ul {
-        list-style-type: none;
-        padding: 0;
-    }
-    .bz_common_actions ul li {
-        display: inline;
-        vertical-align: top;
-    }
-    .bz_common_actions ul li a {
-        display: inline-block;
-        height: 170px;
-        width: 145px;
-        margin: 0 2ex 2em 0;
-    }
-    .bz_common_actions ul li a span {
-        position: relative;
-        top: 90%;
-        font-weight: bold;
-    }
-    .bz_common_actions a,
-    .bz_common_actions a:visited,
-    .bz_common_actions a:hover {
-        text-decoration: none;
-    }
-
     #quicksearchForm
     {
         clear: both;
@@ -110,6 +82,76 @@
         padding: 0;
     }
 
+    #tiles {
+      display: flex;
+      margin: 32px 0;
+      padding: 0;
+      list-style-type: none;
+    }
+
+    #tiles li {
+      flex: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    #tiles a {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      width: 160px;
+      height: 160px;
+    }
+
+    #tiles a:hover,
+    #tiles a:focus,
+    #tiles a:active {
+      background-color: rgba(0, 0, 0, .05);
+      text-decoration: none;
+    }
+
+    #tiles span {
+      display: block;
+    }
+
+    #tiles .icon {
+      width: 120px;
+      height: 120px;
+      font-size: 120px;
+      line-height: 120px;
+      font-family: "Material Icons";
+      color: #777;
+    }
+
+    #tile-docs .icon::before {
+      content: "\E887";
+    }
+
+    #tile-search .icon::before {
+      content: "\E8A0";
+    }
+
+    #tile-new-bug .icon::before {
+      content: "\E89C";
+    }
+
+    #tile-prefs .icon::before {
+      content: "\E8B8";
+    }
+
+    #tile-new-account .icon::before,
+    #tile-login .icon::before {
+      content: "\E853";
+    }
+
+    #tiles .label {
+      margin-top: 4px;
+      font-size: 14px;
+      color: #555;
+    }
+
     ul.additional_links
     {
         list-style: none;
@@ -135,49 +177,5 @@
     {
         color: #ccc;
     }
-/* index page (end) */
-
-
-    #enter_bug
-    {
-        background: url(../../images/bugzilla-papericon.png) no-repeat;
-    }
-    #query
-    {
-        background: url(../../images/bugzilla-magnifier.png) no-repeat;
-    }
-    #account
-    {
-        background: url(../../images/bugzilla-person-alternate.png) no-repeat;
-        margin-right: 0;
-    }
-    #docs
-    {
-        background: url(../../images/bugzilla-questionmark2.png) no-repeat !important;
-    }
-
-    #page-index .intro { display: inline; }
 
-    #docs { background: url(../standard/index/help.png) no-repeat; }
-
-    .bz_common_actions
-    {
-        display: block;
-        height: 170px;
-        width: 145px;
-        float: left;
-        margin: 0 2ex 2em 0;
-        text-align: center;
-    }
-    .bz_common_actions span
-    {
-        position: relative;
-        top: 95%;
-        font-weight: bold;
-    }
-    .bz_common_actions,
-    .bz_common_actions:visited,
-    .bz_common_actions:hover
-    {
-        text-decoration: none;
-    }
+/* index page (end) */
diff --git a/skins/standard/index/file-a-bug.png b/skins/standard/index/file-a-bug.png
deleted file mode 100644
index cf4c941b6..000000000
--- a/skins/standard/index/file-a-bug.png
+++ /dev/null
diff --git a/skins/standard/index/help.png b/skins/standard/index/help.png
deleted file mode 100644
index 6f9035b64..000000000
--- a/skins/standard/index/help.png
+++ /dev/null
diff --git a/skins/standard/index/new-account.png b/skins/standard/index/new-account.png
deleted file mode 100644
index 4ad9ff203..000000000
--- a/skins/standard/index/new-account.png
+++ /dev/null
diff --git a/skins/standard/index/search.png b/skins/standard/index/search.png
deleted file mode 100644
index 8d33ebd1e..000000000
--- a/skins/standard/index/search.png
+++ /dev/null
diff --git a/template/en/default/index.html.tmpl b/template/en/default/index.html.tmpl
index 92583ffe9..d6a4f2105 100644
--- a/template/en/default/index.html.tmpl
+++ b/template/en/default/index.html.tmpl
@@ -39,21 +39,50 @@
       <td>
         <h1 id="welcome"> Welcome to [% terms.Bugzilla %]</h1>
         <div class="intro">[% Hook.process('intro') %]</div>
-        <a id="enter_bug" class="bz_common_actions"
-           href="enter_bug.cgi"><span>File [% terms.aBug %]</span></a>
-        <a id="query" class="bz_common_actions"
-           href="query.cgi"><span>Search</span></a>
-        <a id="account" class="bz_common_actions"
-           [% IF user.id %]
-             href="userprefs.cgi"><span>User Preferences</span></a>
-           [% ELSIF Param('createemailregexp')
-                    && user.authorizer.user_can_create_account
-            %]
-             href="createaccount.cgi"><span>Open a New Account</span></a>
-           [% ELSE %]
-             href="?GoAheadAndLogIn=1"><span>Log In</span></a>
-           [% END %]
-
+        <ul id="tiles">
+          [% IF Param('docs_urlbase') %]
+          <li id="tile-docs">
+            <a href="[% docs_urlbase FILTER html %]">
+              <span class="icon" aria-hidden="true"></span>
+              <span class="label">Documentation</span>
+            </a>
+          </li>
+          [% END %]
+          <li id="tile-search">
+            <a href="query.cgi">
+              <span class="icon" aria-hidden="true"></span>
+              <span class="label">Advanced Search</span>
+            </a>
+          </li>
+          <li id="tile-new-bug">
+            <a href="enter_bug.cgi">
+              <span class="icon" aria-hidden="true"></span>
+              <span class="label">New [% terms.Bug %]</span>
+            </a>
+          </li>
+          [% IF user.id %]
+          <li id="tile-prefs">
+            <a href="userprefs.cgi">
+              <span class="icon" aria-hidden="true"></span>
+              <span class="label">Preferences</span>
+            </a>
+          </li>
+          [% ELSIF Param('createemailregexp') && user.authorizer.user_can_create_account %]
+          <li id="tile-new-account">
+            <a href="createaccount.cgi">
+              <span class="icon" aria-hidden="true"></span>
+              <span class="label">New Account</span>
+            </a>
+          </li>
+          [% ELSE %]
+          <li id="tile-login">
+            <a href="?GoAheadAndLogIn=1">
+              <span class="icon" aria-hidden="true"></span>
+              <span class="label">Log In</span>
+            </a>
+          </li>
+          [% END %]
+        </ul>
         <form id="quicksearchForm" name="quicksearchForm" action="buglist.cgi" data-no-csrf>
           <div>
             <input id="quicksearch_main" type="text" name="quicksearch" autofocus