From 1443af49c1b548b6d750f0e4794ecc8e9f26bf21 Mon Sep 17 00:00:00 2001
From: spsiddarthan <siddarthan@outlook.com>
Date: Thu, 16 Jan 2025 19:28:10 +0530
Subject: [PATCH 1/5] Masterbar: Add a label for the Reader icon.

---
 client/layout/masterbar/logged-in.jsx | 23 +++++++++++++----------
 client/layout/masterbar/style.scss    | 10 ++++++++++
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
index cb2be558eb6f3..84517704a3201 100644
--- a/client/layout/masterbar/logged-in.jsx
+++ b/client/layout/masterbar/logged-in.jsx
@@ -471,16 +471,19 @@ class MasterbarLoggedIn extends Component {
 				className="masterbar__reader"
 				url="/read"
 				icon={
-					<svg
-						width="24"
-						height="11"
-						viewBox="0 0 24 11"
-						fill="none"
-						xmlns="http://www.w3.org/2000/svg"
-						className="masterbar__menu-icon masterbar_svg-reader"
-					>
-						<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
-					</svg>
+					<div className="masterbar__icon-with-label">
+						<svg
+							width="24"
+							height="11"
+							viewBox="0 0 24 11"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+							className="masterbar__menu-icon masterbar_svg-reader"
+						>
+							<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
+						</svg>
+						<span className="masterbar__icon-label">Reader</span>
+					</div>
 				}
 				onClick={ this.clickReader }
 				isActive={ this.isActive( 'reader', true ) }
diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
index 890540443c395..869682146453f 100644
--- a/client/layout/masterbar/style.scss
+++ b/client/layout/masterbar/style.scss
@@ -845,6 +845,16 @@ body.is-mobile-app-view {
 	}
 }
 
+.masterbar__icon-with-label {
+    display: flex;
+    align-items: center;
+    gap: 8px; /* Space between icon and label */
+}
+
+.masterbar__icon-label {
+	font-size: $masterbar-font-size;
+}
+
 .masterbar-cart-button {
 	svg {
 		overflow: visible;

From b403d2d721c8739f1c23acc645f7af518b7b88bc Mon Sep 17 00:00:00 2001
From: spsiddarthan <siddarthan@outlook.com>
Date: Thu, 16 Jan 2025 19:42:33 +0530
Subject: [PATCH 2/5] Remove comment

---
 client/layout/masterbar/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
index 869682146453f..7a4a18b90c1aa 100644
--- a/client/layout/masterbar/style.scss
+++ b/client/layout/masterbar/style.scss
@@ -848,7 +848,7 @@ body.is-mobile-app-view {
 .masterbar__icon-with-label {
     display: flex;
     align-items: center;
-    gap: 8px; /* Space between icon and label */
+    gap: 8px;
 }
 
 .masterbar__icon-label {

From f8333ae6233d8c00c85c8060732037e0da009712 Mon Sep 17 00:00:00 2001
From: spsiddarthan <siddarthan@outlook.com>
Date: Thu, 16 Jan 2025 22:36:29 +0530
Subject: [PATCH 3/5] Hide the label on mobile screens.

---
 client/layout/masterbar/logged-in.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
index 84517704a3201..bb24bfae860df 100644
--- a/client/layout/masterbar/logged-in.jsx
+++ b/client/layout/masterbar/logged-in.jsx
@@ -482,7 +482,7 @@ class MasterbarLoggedIn extends Component {
 						>
 							<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
 						</svg>
-						<span className="masterbar__icon-label">Reader</span>
+						<span class="masterbar__icon-label masterbar__item-content">Reader</span>
 					</div>
 				}
 				onClick={ this.clickReader }

From 8f765f6531dde48c29029a5ec79d3aa6695e234f Mon Sep 17 00:00:00 2001
From: spsiddarthan <siddarthan@outlook.com>
Date: Thu, 16 Jan 2025 22:44:53 +0530
Subject: [PATCH 4/5] Added translation.

---
 client/layout/masterbar/logged-in.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
index bb24bfae860df..4d1374aefe618 100644
--- a/client/layout/masterbar/logged-in.jsx
+++ b/client/layout/masterbar/logged-in.jsx
@@ -482,7 +482,9 @@ class MasterbarLoggedIn extends Component {
 						>
 							<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
 						</svg>
-						<span class="masterbar__icon-label masterbar__item-content">Reader</span>
+						<span class="masterbar__icon-label masterbar__item-content">
+							{ translate( 'Reader' ) }
+						</span>
 					</div>
 				}
 				onClick={ this.clickReader }

From 84bc6bdd975de6ee7b70f0ddb45084aefe056b1f Mon Sep 17 00:00:00 2001
From: spsiddarthan <siddarthan@outlook.com>
Date: Fri, 17 Jan 2025 00:14:30 +0530
Subject: [PATCH 5/5] Make <span> a child component of Item.

---
 client/layout/masterbar/logged-in.jsx | 31 +++++++++++++--------------
 client/layout/masterbar/style.scss    | 10 ++-------
 2 files changed, 17 insertions(+), 24 deletions(-)

diff --git a/client/layout/masterbar/logged-in.jsx b/client/layout/masterbar/logged-in.jsx
index 4d1374aefe618..88cd83d10d537 100644
--- a/client/layout/masterbar/logged-in.jsx
+++ b/client/layout/masterbar/logged-in.jsx
@@ -471,28 +471,27 @@ class MasterbarLoggedIn extends Component {
 				className="masterbar__reader"
 				url="/read"
 				icon={
-					<div className="masterbar__icon-with-label">
-						<svg
-							width="24"
-							height="11"
-							viewBox="0 0 24 11"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-							className="masterbar__menu-icon masterbar_svg-reader"
-						>
-							<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
-						</svg>
-						<span class="masterbar__icon-label masterbar__item-content">
-							{ translate( 'Reader' ) }
-						</span>
-					</div>
+					<svg
+						width="24"
+						height="11"
+						viewBox="0 0 24 11"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						className="masterbar__menu-icon masterbar_svg-reader"
+					>
+						<path d="M22.8746 4.60676L22.8197 4.3575C22.3347 2.17436 20.276 0.584279 17.9245 0.584279C16.6527 0.584279 15.4358 1.03122 14.5116 1.84775C14.1914 2.13139 13.9443 2.44081 13.743 2.74163C13.1849 2.63849 12.6085 2.56114 12.032 2.56114H12.0046C11.419 2.56114 10.8425 2.64709 10.2753 2.75023C10.0648 2.44081 9.82691 2.13139 9.49752 1.83915C8.57338 1.01403 7.35646 0.575684 6.08463 0.575684C3.72398 0.584279 1.66527 2.17436 1.18033 4.3575L1.12543 4.60676H0V6.00775H1.12543L1.18033 6.257C1.63782 8.44014 3.69653 10.0302 6.07548 10.0302C8.83873 10.0302 11.0804 7.91585 11.0804 5.31155C11.0804 5.31155 11.0896 4.72709 10.8517 3.97072C11.236 3.91915 11.6203 3.87618 12.0046 3.87618C12.3706 3.87618 12.7549 3.91056 13.1483 3.96213C12.9012 4.72709 12.9195 5.31155 12.9195 5.31155C12.9195 7.91585 15.1613 10.0302 17.9245 10.0302C20.3035 10.0302 22.3622 8.44874 22.8197 6.257L22.8746 6.00775H24V4.60676H22.8746ZM6.07548 8.62923C4.13572 8.62923 2.5528 7.14229 2.5528 5.30295C2.5528 3.46362 4.13572 1.97667 6.07548 1.97667C8.01524 1.97667 9.59816 3.46362 9.59816 5.30295C9.59816 7.14229 8.01524 8.62923 6.07548 8.62923ZM17.9245 8.62923C15.9847 8.62923 14.4018 7.14229 14.4018 5.30295C14.4018 3.46362 15.9847 1.97667 17.9245 1.97667C19.8643 1.97667 21.4472 3.46362 21.4472 5.30295C21.4472 7.14229 19.8643 8.62923 17.9245 8.62923Z" />
+					</svg>
 				}
 				onClick={ this.clickReader }
 				isActive={ this.isActive( 'reader', true ) }
 				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>
 		);
 	}
 
diff --git a/client/layout/masterbar/style.scss b/client/layout/masterbar/style.scss
index 7a4a18b90c1aa..da581895b77cb 100644
--- a/client/layout/masterbar/style.scss
+++ b/client/layout/masterbar/style.scss
@@ -845,14 +845,8 @@ body.is-mobile-app-view {
 	}
 }
 
-.masterbar__icon-with-label {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-.masterbar__icon-label {
-	font-size: $masterbar-font-size;
+.masterbar__item-reader-label {
+	padding-left: 6px;
 }
 
 .masterbar-cart-button {