From 2618b2510629e36b644ea996334e1ab109932b49 Mon Sep 17 00:00:00 2001
From: Juwon Jeong <juwon.jeong@lge.com>
Date: Thu, 10 Oct 2024 08:55:47 +0900
Subject: [PATCH] WRR-4972: Fixed PageViews dot indicator to be centered

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)
---
 PageViews/PageViews.js          |  5 +++--
 PageViews/PageViews.module.less | 12 +++++++++---
 styles/variables.less           |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/PageViews/PageViews.js b/PageViews/PageViews.js
index 5f3376ae7..feb4768dd 100644
--- a/PageViews/PageViews.js
+++ b/PageViews/PageViews.js
@@ -249,8 +249,9 @@ const PageViewsBase = kind({
 			return (
 				<>
 					{pageIndicatorType !== 'number' ?
-						<Row className={classNames(css.steps, {[css.hidden]: !isStepVisible})}>
+						<Row className={classNames(css.stepsRow, {[css.hidden]: !isStepVisible})}>
 							<Steps
+								css={css}
 								current={index + 1}
 								currentIcon="circle"
 								futureIcon="circle"
@@ -260,7 +261,7 @@ const PageViewsBase = kind({
 								size={30}
 							/>
 						</Row> :
-						<Row className={css.steps}>
+						<Row className={css.stepsRow}>
 							<Cell className={css.navButton} shrink>
 								{isPrevButtonVisible ? <Button aria-label={$L('Previous')} icon="arrowlargeleft" iconFlip="auto" id="PrevNavButton" onClick={onPrevClick} size="small" /> : null}
 							</Cell>
diff --git a/PageViews/PageViews.module.less b/PageViews/PageViews.module.less
index 8197aa35b..da4b47d9d 100644
--- a/PageViews/PageViews.module.less
+++ b/PageViews/PageViews.module.less
@@ -28,7 +28,7 @@
 		width: @sand-pageviews-number-navigation-button-area-width;
 	}
 
-	.steps {
+	.stepsRow {
 		align-items: center;
 		justify-content: center;
 		text-align: center;
@@ -38,7 +38,7 @@
 		}
 	}
 
-	&.number .steps {
+	&.number .stepsRow {
 		min-height: @sand-pageviews-number-steps-area-min-height;
 		.pageNumber {
 			width: @sand-pageviews-number-steps-number-width;
@@ -49,10 +49,16 @@
 	}
 
 	&.dot .steps {
+		display: flex;
 		min-height: @sand-pageviews-dot-steps-area-min-height;
+		align-items: center;
+		.step {
+			line-height: @sand-pageviews-dot-steps-area-min-height;
+			height: @sand-pageviews-dot-steps-area-min-height
+		}
 	}
 
-	&.fullContents .steps {
+	&.fullContents .stepsRow {
 		position: absolute;
 		align-self: center;
 		bottom: @sand-pageviews-full-steps-position-bottom;
diff --git a/styles/variables.less b/styles/variables.less
index 55d674711..f9bb3aa28 100644
--- a/styles/variables.less
+++ b/styles/variables.less
@@ -762,7 +762,7 @@
 // PageViews
 // ---------------------------------------
 @sand-pageviews-navigation-button-area-width: 216px;
-@sand-pageviews-steps-area-min-height: 132px;
+@sand-pageviews-steps-area-min-height: 114px;
 @sand-pageviews-dot-steps-area-min-height: @sand-pageviews-steps-area-min-height;
 @sand-pageviews-full-steps-area-min-height: @sand-pageviews-steps-area-min-height;
 @sand-pageviews-full-steps-position-bottom: 0;