OCT-1404 Adjust History Loader to the design (#42)

golemfoundation · Mar 3, 2024 · 52b5e42 · 52b5e42
1 parent 4404f84
commit 52b5e42
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -32,3 +32,4 @@ $progressStepperSlimStepPadding: 2.4rem;
 $modalVariantSmallPaddingMobile: 2.4rem;
 $modalVariantSmallPaddingDesktop: 5.6rem;
 $proposalItemPadding: 2.4rem;
+$historyHorizontalPadding: 1.6rem;