Tab redesign: removing icon, orange text in dark mode. (#8533)

dart-lang · Feb 7, 2025 · 1dee391 · 1dee391
1 parent 169bb69
commit 1dee391
Show file tree

Hide file tree

Showing 16 changed files with 36 additions and 64 deletions.
diff --git a/app/lib/frontend/templates/views/shared/detail/tabs.dart b/app/lib/frontend/templates/views/shared/detail/tabs.dart
@@ -19,6 +19,9 @@ d.Node detailTabsNode({
           children: tabs.map(
             (t) => d.li(
               classes: t.titleClasses,
+              attributes: {
+                if (t.isPrivate) 'title': 'For authorized users only.',
+              },
               child: t.titleNode,
             ),
           ),

diff --git a/app/test/frontend/golden/my_activity_log_page.html b/app/test/frontend/golden/my_activity_log_page.html
@@ -158,16 +158,16 @@ <h1 class="title">admin</h1>
             <div class="detail-tabs-wide-header">
               <div class="detail-container">
                 <ul class="detail-tabs-header">
-                  <li class="detail-tab tab-link detail-tab-my-publishers-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-publishers-title -private" title="For authorized users only.">
                     <a href="/my-publishers" role="button">Publishers</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-my-packages-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-packages-title -private" title="For authorized users only.">
                     <a href="/my-packages" role="button">Packages</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-my-liked-packages-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-liked-packages-title -private" title="For authorized users only.">
                     <a href="/my-liked-packages" role="button">Likes</a>
                   </li>
-                  <li class="detail-tab tab-button detail-tab-my-activity-log-title -active -private">Activity log</li>
+                  <li class="detail-tab tab-button detail-tab-my-activity-log-title -active -private" title="For authorized users only.">Activity log</li>
                 </ul>
               </div>
             </div>

diff --git a/app/test/frontend/golden/my_liked_packages.html b/app/test/frontend/golden/my_liked_packages.html
@@ -159,14 +159,14 @@ <h1 class="title">user</h1>
             <div class="detail-tabs-wide-header">
               <div class="detail-container">
                 <ul class="detail-tabs-header">
-                  <li class="detail-tab tab-link detail-tab-my-publishers-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-publishers-title -private" title="For authorized users only.">
                     <a href="/my-publishers" role="button">Publishers</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-my-packages-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-packages-title -private" title="For authorized users only.">
                     <a href="/my-packages" role="button">Packages</a>
                   </li>
-                  <li class="detail-tab tab-button detail-tab-my-liked-packages-title -active -private">Likes</li>
-                  <li class="detail-tab tab-link detail-tab-my-activity-log-title -private">
+                  <li class="detail-tab tab-button detail-tab-my-liked-packages-title -active -private" title="For authorized users only.">Likes</li>
+                  <li class="detail-tab tab-link detail-tab-my-activity-log-title -private" title="For authorized users only.">
                     <a href="/my-activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/app/test/frontend/golden/my_packages.html b/app/test/frontend/golden/my_packages.html
@@ -158,14 +158,14 @@ <h1 class="title">user</h1>
             <div class="detail-tabs-wide-header">
               <div class="detail-container">
                 <ul class="detail-tabs-header">
-                  <li class="detail-tab tab-link detail-tab-my-publishers-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-publishers-title -private" title="For authorized users only.">
                     <a href="/my-publishers" role="button">Publishers</a>
                   </li>
-                  <li class="detail-tab tab-button detail-tab-my-packages-title -active -private">Packages</li>
-                  <li class="detail-tab tab-link detail-tab-my-liked-packages-title -private">
+                  <li class="detail-tab tab-button detail-tab-my-packages-title -active -private" title="For authorized users only.">Packages</li>
+                  <li class="detail-tab tab-link detail-tab-my-liked-packages-title -private" title="For authorized users only.">
                     <a href="/my-liked-packages" role="button">Likes</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-my-activity-log-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-activity-log-title -private" title="For authorized users only.">
                     <a href="/my-activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/app/test/frontend/golden/my_publishers.html b/app/test/frontend/golden/my_publishers.html
@@ -158,14 +158,14 @@ <h1 class="title">user</h1>
             <div class="detail-tabs-wide-header">
               <div class="detail-container">
                 <ul class="detail-tabs-header">
-                  <li class="detail-tab tab-button detail-tab-my-publishers-title -active -private">Publishers</li>
-                  <li class="detail-tab tab-link detail-tab-my-packages-title -private">
+                  <li class="detail-tab tab-button detail-tab-my-publishers-title -active -private" title="For authorized users only.">Publishers</li>
+                  <li class="detail-tab tab-link detail-tab-my-packages-title -private" title="For authorized users only.">
                     <a href="/my-packages" role="button">Packages</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-my-liked-packages-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-liked-packages-title -private" title="For authorized users only.">
                     <a href="/my-liked-packages" role="button">Likes</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-my-activity-log-title -private">
+                  <li class="detail-tab tab-link detail-tab-my-activity-log-title -private" title="For authorized users only.">
                     <a href="/my-activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/app/test/frontend/golden/pkg_activity_log_page.html b/app/test/frontend/golden/pkg_activity_log_page.html
@@ -231,10 +231,10 @@ <h3 class="detail-lead-title">Metadata</h3>
                   <li class="detail-tab tab-link detail-tab-analysis-title">
                     <a href="/packages/oxygen/score" role="button">Scores</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-admin-title -private">
+                  <li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
                     <a href="/packages/oxygen/admin" role="button">Admin</a>
                   </li>
-                  <li class="detail-tab tab-button detail-tab-activity-log-title -active -private">Activity Log</li>
+                  <li class="detail-tab tab-button detail-tab-activity-log-title -active -private" title="For authorized users only.">Activity Log</li>
                 </ul>
               </div>
             </div>

diff --git a/app/test/frontend/golden/pkg_admin_page.html b/app/test/frontend/golden/pkg_admin_page.html
@@ -231,8 +231,8 @@ <h3 class="detail-lead-title">Metadata</h3>
                   <li class="detail-tab tab-link detail-tab-analysis-title">
                     <a href="/packages/oxygen/score" role="button">Scores</a>
                   </li>
-                  <li class="detail-tab tab-button detail-tab-admin-title -active -private">Admin</li>
-                  <li class="detail-tab tab-link detail-tab-activity-log-title -private">
+                  <li class="detail-tab tab-button detail-tab-admin-title -active -private" title="For authorized users only.">Admin</li>
+                  <li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
                     <a href="/packages/oxygen/activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/app/test/frontend/golden/pkg_show_page.html b/app/test/frontend/golden/pkg_show_page.html
@@ -203,10 +203,10 @@ <h3 class="detail-lead-title">Metadata</h3>
                   <li class="detail-tab tab-link detail-tab-analysis-title">
                     <a href="/packages/oxygen/score" role="button">Scores</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-admin-title -private">
+                  <li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
                     <a href="/packages/oxygen/admin" role="button">Admin</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-activity-log-title -private">
+                  <li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
                     <a href="/packages/oxygen/activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/app/test/frontend/golden/pkg_show_page_flutter_plugin.html b/app/test/frontend/golden/pkg_show_page_flutter_plugin.html
@@ -192,10 +192,10 @@ <h3 class="detail-lead-title">Metadata</h3>
                   <li class="detail-tab tab-link detail-tab-analysis-title">
                     <a href="/packages/flutter_titanium/score" role="button">Scores</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-admin-title -private">
+                  <li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
                     <a href="/packages/flutter_titanium/admin" role="button">Admin</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-activity-log-title -private">
+                  <li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
                     <a href="/packages/flutter_titanium/activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/app/test/frontend/golden/publisher_activity_log_page.html b/app/test/frontend/golden/publisher_activity_log_page.html
@@ -148,10 +148,10 @@ <h1 class="title">example.com</h1>
                   <li class="detail-tab tab-link detail-tab-unlisted-packages-title">
                     <a href="/publishers/example.com/unlisted-packages" role="button">Unlisted packages</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-admin-title -private">
+                  <li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
                     <a href="/publishers/example.com/admin" role="button">Admin</a>
                   </li>
-                  <li class="detail-tab tab-button detail-tab-activity-log-title -active -private">Activity log</li>
+                  <li class="detail-tab tab-button detail-tab-activity-log-title -active -private" title="For authorized users only.">Activity log</li>
                 </ul>
               </div>
             </div>

diff --git a/app/test/frontend/golden/publisher_admin_page.html b/app/test/frontend/golden/publisher_admin_page.html
@@ -148,8 +148,8 @@ <h1 class="title">example.com</h1>
                   <li class="detail-tab tab-link detail-tab-unlisted-packages-title">
                     <a href="/publishers/example.com/unlisted-packages" role="button">Unlisted packages</a>
                   </li>
-                  <li class="detail-tab tab-button detail-tab-admin-title -active -private">Admin</li>
-                  <li class="detail-tab tab-link detail-tab-activity-log-title -private">
+                  <li class="detail-tab tab-button detail-tab-admin-title -active -private" title="For authorized users only.">Admin</li>
+                  <li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
                     <a href="/publishers/example.com/activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/app/test/frontend/golden/publisher_packages_page.html b/app/test/frontend/golden/publisher_packages_page.html
@@ -146,10 +146,10 @@ <h1 class="title">example.com</h1>
                   <li class="detail-tab tab-link detail-tab-unlisted-packages-title">
                     <a href="/publishers/example.com/unlisted-packages" role="button">Unlisted packages</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-admin-title -private">
+                  <li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
                     <a href="/publishers/example.com/admin" role="button">Admin</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-activity-log-title -private">
+                  <li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
                     <a href="/publishers/example.com/activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/app/test/frontend/golden/publisher_unlisted_packages_page.html b/app/test/frontend/golden/publisher_unlisted_packages_page.html
@@ -146,10 +146,10 @@ <h1 class="title">example.com</h1>
                     <a href="/publishers/example.com/packages" role="button">Packages</a>
                   </li>
                   <li class="detail-tab tab-button detail-tab-unlisted-packages-title -active">Unlisted packages</li>
-                  <li class="detail-tab tab-link detail-tab-admin-title -private">
+                  <li class="detail-tab tab-link detail-tab-admin-title -private" title="For authorized users only.">
                     <a href="/publishers/example.com/admin" role="button">Admin</a>
                   </li>
-                  <li class="detail-tab tab-link detail-tab-activity-log-title -private">
+                  <li class="detail-tab tab-link detail-tab-activity-log-title -private" title="For authorized users only.">
                     <a href="/publishers/example.com/activity-log" role="button">Activity log</a>
                   </li>
                 </ul>

diff --git a/pkg/web_css/lib/src/_detail_page.scss b/pkg/web_css/lib/src/_detail_page.scss
@@ -398,33 +398,10 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   > .tab-button.-private,
   > .tab-link.-private > a {
     color: var(--pub-detail_tab-admin-color);
-    position: relative;
-    padding-right: 9px;
 
     &:hover {
       border-bottom-color: var(--pub-detail_tab-admin-color);
     }
-
-    /* The lock icon, positioned after the label. */
-    &:before {
-      content: " ";
-      display: block;
-      background: url("../img/admin-lock-icon.svg");
-      background-size: 12px 12px;
-      width: 12px;
-      height: 12px;
-      position: absolute;
-      top: 50%;
-      right: 4px;
-      margin-top: -8px;
-    }
-
-    /* Extra padding, width should be larger than or equal to the lock icon's width. */
-    &:after {
-      content: "";
-      display: inline-block;
-      width: 12px;
-    }
   }
   > .tab-button.-private,
   > .tab-button.-private {

diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
@@ -184,7 +184,7 @@
   --pub-detail_tab-text-color: var(--pub-neutral-textColor);
   --pub-detail_tab-underline-color: #888888;
   --pub-detail_tab-active-color: var(--pub-link-text-color);
-  --pub-detail_tab-admin-color: #e03030;
+  --pub-detail_tab-admin-color: #ffa000;
   --pub-home_title-text-color: #31b0fc;
   --pub-weekly-chart-main-color: var(--pub-link-text-color);
   --pub-weekly-chart-tooltip-text-color: var(--pub-color-darkGunmetal);

diff --git a/static/img/admin-lock-icon.svg b/static/img/admin-lock-icon.svg