Masterbar: Add a label for the Reader icon. (#98479)

* Masterbar: Add a label for the Reader icon.

* Remove comment

* Hide the label on mobile screens.

* Added translation.

* Make <span> a child component of Item.

Author: spsiddarthan

client/layout/masterbar/logged-in.jsx

@@ -487,7 +487,11 @@ class MasterbarLoggedIn extends Component {
 				tooltip={ translate( 'Read the blogs and topics you follow' ) }
 				preloadSection={ this.preloadReader }
 				hasGlobalBorderStyle
-			/>
+			>
+				<span class="masterbar__icon-label masterbar__item-reader-label">
+					{ translate( 'Reader' ) }
+				</span>
+			</Item>
 		);
 	}
 

client/layout/masterbar/style.scss

@@ -845,6 +845,10 @@ body.is-mobile-app-view {
 	}
 }
 
+.masterbar__item-reader-label {
+	padding-left: 6px;
+}
+
 .masterbar-cart-button {
 	svg {
 		overflow: visible;