From 52b5e42a1055a4458500b55a0be1868286e931af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andrzej=20Zi=C3=B3=C5=82ek?= <a.j.ziolek@gmail.com>
Date: Sun, 3 Mar 2024 22:27:10 +0100
Subject: [PATCH] OCT-1404 Adjust History Loader to the design (#42)

---
 .../components/Earn/EarnHistory/EarnHistory.module.scss    | 6 +++++-
 client/src/components/Earn/EarnHistory/EarnHistory.tsx     | 4 +++-
 .../EarnHistoryItem/EarnHistoryItem.module.scss            | 7 +++----
 .../EarnHistoryList/EarnHistoryList.module.scss            | 1 +
 client/src/styles/utils/_variables.scss                    | 1 +
 5 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Earn/EarnHistory/EarnHistory.module.scss b/client/src/components/Earn/EarnHistory/EarnHistory.module.scss
index a11bf2ceab..3d6d260a79 100644
--- a/client/src/components/Earn/EarnHistory/EarnHistory.module.scss
+++ b/client/src/components/Earn/EarnHistory/EarnHistory.module.scss
@@ -11,8 +11,12 @@
   }
 }
 
+.skeleton {
+  padding: 0 $historyHorizontalPadding;
+}
+
 .title {
-  padding: 0 1.6rem;
+  padding: 0 $historyHorizontalPadding;
 }
 
 .childrenWrapper {
diff --git a/client/src/components/Earn/EarnHistory/EarnHistory.tsx b/client/src/components/Earn/EarnHistory/EarnHistory.tsx
index 95ebce0b07..2391ad3646 100644
--- a/client/src/components/Earn/EarnHistory/EarnHistory.tsx
+++ b/client/src/components/Earn/EarnHistory/EarnHistory.tsx
@@ -52,7 +52,9 @@ const EarnHistory: FC<EarnHistoryProps> = ({ className }) => {
       titleClassName={styles.title}
     >
       {showLoader ? (
-        <EarnHistorySkeleton />
+        <div className={styles.skeleton}>
+          <EarnHistorySkeleton />
+        </div>
       ) : (
         <InfiniteScroll
           hasMore={hasNextPage}
diff --git a/client/src/components/Earn/EarnHistory/EarnHistoryItem/EarnHistoryItem.module.scss b/client/src/components/Earn/EarnHistory/EarnHistoryItem/EarnHistoryItem.module.scss
index 5dff49e213..44d5a79741 100644
--- a/client/src/components/Earn/EarnHistory/EarnHistoryItem/EarnHistoryItem.module.scss
+++ b/client/src/components/Earn/EarnHistory/EarnHistoryItem/EarnHistoryItem.module.scss
@@ -6,7 +6,7 @@
 }
 
 .child {
-  padding: 1.3rem 1.6rem;
+  padding: 1.3rem $historyHorizontalPadding;
   border-radius: $border-radius-06;
 
   &:hover {
@@ -26,10 +26,9 @@
 }
 
 .separator {
-  $marginLeft: 1.6rem;
-  width: calc(100% - $marginLeft * 2);
+  width: calc(100% - $historyHorizontalPadding * 2);
   height: 0.1rem;
-  margin-left: $marginLeft;
+  margin-left: $historyHorizontalPadding;
   background: $color-octant-grey8;
 }
 
diff --git a/client/src/components/Earn/EarnHistory/EarnHistoryList/EarnHistoryList.module.scss b/client/src/components/Earn/EarnHistory/EarnHistoryList/EarnHistoryList.module.scss
index d1a02b8422..bb61975271 100644
--- a/client/src/components/Earn/EarnHistory/EarnHistoryList/EarnHistoryList.module.scss
+++ b/client/src/components/Earn/EarnHistory/EarnHistoryList/EarnHistoryList.module.scss
@@ -1,5 +1,6 @@
 .emptyHistoryInfo {
   height: 7.2rem;
+  padding: 0 $historyHorizontalPadding;
   display: flex;
   align-items: center;
   color: $color-octant-grey5;
diff --git a/client/src/styles/utils/_variables.scss b/client/src/styles/utils/_variables.scss
index e8ec762915..f0923f2e1f 100644
--- a/client/src/styles/utils/_variables.scss
+++ b/client/src/styles/utils/_variables.scss
@@ -32,3 +32,4 @@ $progressStepperSlimStepPadding: 2.4rem;
 $modalVariantSmallPaddingMobile: 2.4rem;
 $modalVariantSmallPaddingDesktop: 5.6rem;
 $proposalItemPadding: 2.4rem;
+$historyHorizontalPadding: 1.6rem;