Wording tweaks to new UI navigation

Small wording tweaks requested by UI team to
primary navigation in new UI.

Fixes: CNVS-21363

Test Plan:
- Make sure that the Use New Styles flag is
  turned ON.
- On the main navigation, underneath the profile
  pic, it should now read "Account" (not Profile).
- The title of the tray that slides out when you
  click on Account should now be "Account"
- On the main navigation, the Accounts link has
  been renamed "Admin"
- The title of the tray that slides out when you
  click on Admin should now be "Admin"
- Click on the Courses link on the main navigation.
  The "All courses" link on the tray should now
  have a gray border on top of it.

Change-Id: I6693f507ca6d75608aeed8c454ed008e3d24d187
Reviewed-on: https://gerrit.instructure.com/56944
Tested-by: Jenkins
QA-Review: Nathan Rogowski <nathan@instructure.com>
Reviewed-by: Jennifer Stern <jstern@instructure.com>
Product-Review: Chris Hart <chart@instructure.com>

app/jsx/navigation_header/trays/AccountsTray.jsx

@@ -28,7 +28,7 @@ define([
       return (
         <div>
           <div className="ReactTray__header">
-            <h1 className="ReactTray__headline">{I18n.t('Accounts')}</h1>
+            <h1 className="ReactTray__headline">{I18n.t('Admin')}</h1>
             <button className="Button Button--icon-action ReactTray__closeBtn" type="button" onClick={this.props.closeTray}>
               <i className="icon-x"></i>
               <span className="screenreader-only">{I18n.t('Close')}</span>

app/jsx/navigation_header/trays/CoursesTray.jsx

@@ -22,7 +22,7 @@ define([
       var courses = this.props.courses.map((course) => {
         return <li key={course.id}><a href={`/courses/${course.id}`}>{course.name}</a></li>;
       });
-      courses.push(<li key='allCourseLink'><a href='/courses'>All Courses ❯</a></li>);
+      courses.push(<li key='allCourseLink' className='ReactTray__feature-list-item'><a href='/courses'>All Courses</a></li>);
       return courses;
     },
 
@@ -43,7 +43,7 @@ define([
           </div>
           <div className="ReactTray__secondary-content">
             <div className="ReactTray__info-box">
-              {I18n.t('Welcome to your courses! To customize the list of courses,' +
+              {I18n.t('Welcome to your courses! To customize the list of courses, ' +
                       'click on the "All Courses" link and star the courses to display.')}
             </div>
           </div>

app/jsx/navigation_header/trays/ProfileTray.jsx

@@ -16,7 +16,7 @@ define([
       return (
         <div>
           <div className="ReactTray__header">
-            <h1 className="ReactTray__headline">{I18n.t('Profile')}</h1>
+            <h1 className="ReactTray__headline">{I18n.t('Account')}</h1>
             <button className="Button Button--icon-action ReactTray__closeBtn" type="button" onClick={this.props.closeTray}>
               <i className="icon-x"></i>
               <span className="screenreader-only">{I18n.t('Close')}</span>
@@ -27,7 +27,7 @@ define([
               <a href="/profile">{I18n.t('Profile')}</a>
             </li>
             <li>
-              <a href="/profile/settings">{I18n.t('Account Settings')}</a>
+              <a href="/profile/settings">{I18n.t('Settings')}</a>
             </li>
             <li>
               <a href="/profile/communication">{I18n.t('Notifications')}</a>

app/stylesheets/base/_ic_app_header.scss

@@ -184,7 +184,7 @@
   }
 
   .menu-item__text {
-    margin-top: $ic-sp/3;
+    margin-top: $ic-sp/2;
     box-sizing: border-box;
     color: $ic-brand-global-nav-menu-item__text-color;
     line-height: 1.1;

app/views/shared/_new_nav_header.html.erb

@@ -56,7 +56,7 @@
                     <%= render(:partial => "shared/svg/svg_icon_accounts_new_styles.svg") %>
                   </div>
                   <div class="menu-item__text">
-                    <%= t('Accounts') %>
+                    <%= t('Admin') %>
                   </div>
                 </a>
               </li>
@@ -100,11 +100,11 @@
               <a id="global_nav_profile_link" href="/profile" class="ic-app-header__menu-list-link">
                 <div class="menu-item-icon-container">
                   <div class="ic-avatar">
-                    <img src="<%= @current_user.try { |usr| avatar_image_attrs(usr).first } %>" />
+                    <img src="<%= @current_user.try { |usr| avatar_image_attrs(usr).first } %>" alt="<%= @current_user.short_name %>" />
                   </div>
                 </div>
                 <div class="menu-item__text">
-                  <%= t('Profile') %>
+                  <%= t('Account') %>
                 </div>
               </a>
             </li>