diff --git a/src/components/ActivityFeed/ActivityFeed.css b/src/components/ActivityFeed/ActivityFeed.css index 0bd63af9..6b8a9405 100644 --- a/src/components/ActivityFeed/ActivityFeed.css +++ b/src/components/ActivityFeed/ActivityFeed.css @@ -8,13 +8,13 @@ } .messageItem { - margin-bottom: 38px; + margin-bottom: 20px; /* Clearfix */ @apply --clearfix; @media (--viewportMedium) { - margin-bottom: 41px; + margin-bottom: 17px; } &:last-of-type { @@ -57,12 +57,12 @@ display: inline-block; margin: 0; - padding: 12px 14px 11px 14px; + padding: 6px 14px 11px 14px; border-radius: 8px; box-shadow: var(--boxShadow); @media (--viewportMedium) { - padding: 14px 14px 11px 14px; + padding: 8px 14px 9px 14px; margin: 0; } } @@ -85,7 +85,7 @@ color: var(--matterColorAnti); @media (--viewportMedium) { - margin: 14px 0 0 0; + margin: 6px 0 0 0; } } @@ -100,7 +100,7 @@ @apply --clearfix; @media (--viewportMedium) { - margin-bottom: 40px; + margin-bottom: 24px; } &:last-of-type { diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css index cc069f19..c314132d 100644 --- a/src/components/BookingBreakdown/BookingBreakdown.css +++ b/src/components/BookingBreakdown/BookingBreakdown.css @@ -38,7 +38,7 @@ } .itemValue { - @apply --marketplaceDefaultFontStyles; + @apply --marketplaceH4FontStyles; font-weight: 600; margin: 0 0 0 10px; @@ -74,7 +74,8 @@ } .totalPrice { - @apply --marketplaceH2FontStyles; + @apply --marketplaceBodyFontStyles; + font-weight: var(--fontWeightSemiBold); margin: 0 0 0 10px; @media (--viewportMedium) { diff --git a/src/components/NotificationBadge/NotificationBadge.css b/src/components/NotificationBadge/NotificationBadge.css index 74220007..80e694d5 100644 --- a/src/components/NotificationBadge/NotificationBadge.css +++ b/src/components/NotificationBadge/NotificationBadge.css @@ -24,5 +24,8 @@ @media (--viewportMedium) { margin-top: 0; margin-bottom: 0; + + top: -10px; + position: relative; } } diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.css b/src/components/SaleDetailsPanel/SaleDetailsPanel.css index a2ed4d36..5c4f1ee7 100644 --- a/src/components/SaleDetailsPanel/SaleDetailsPanel.css +++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.css @@ -7,6 +7,7 @@ .container { display: flex; flex-direction: column; + justify-content: space-between; @media (--viewportLarge) { flex-direction: row; @@ -17,12 +18,11 @@ } .saleInfo { - margin-bottom: 210px; + margin-bottom: 104px; @media (--viewportLarge) { - max-width: 538px; - margin-right: 108px; - margin-bottom: 0; + max-width: 542px; + margin-right: 56px; } } @@ -171,13 +171,13 @@ @media (--viewportLarge) { display: block; - margin: 116px 0 0 0; + margin: 119px 0 0 0; } } .breakdownContainerDesktop { position: sticky; - top: 24px; + top: -272px; /* This is a hack to showcase how the component would look when the image isn't sticky */ background-color: var(--matterColorLight); border: 1px solid var(--matterColorNegative); border-radius: 2px; @@ -202,16 +202,16 @@ } .breakdownTitleDesktop { - margin: 48px 48px 50px 48px; + margin: 44px 48px 18px 48px; color: var(--matterColorAnti); } .breakdownDesktop { - margin: 48px 48px 0 48px; + margin: 0 48px 0 48px; } .feedContainer { - margin: 46px 24px 0 24px; + margin: 46px 24px 36px 24px; @media (--viewportMedium) { margin: 46px 24px 0 24px; @@ -223,7 +223,7 @@ .feedContainerWithInfoAbove { @media (--viewportLarge) { - margin: 36px 0 0 0; + margin: 38px 0 0 0; } } diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css index bf40c66e..6e3d6640 100644 --- a/src/containers/InboxPage/InboxPage.css +++ b/src/containers/InboxPage/InboxPage.css @@ -137,11 +137,7 @@ .itemList { margin: 0; - padding: 16px 24px; - - @media (--viewportLarge) { - padding: 0; - } + padding: 0; } .listItem { @@ -350,7 +346,7 @@ color: var(--matterColor); margin-top: 4px; - @media (var--viewportmedium) { + @media (--viewportMedium) { margin-top: 9px; } } diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css index 64b3c4f3..3e17dcf0 100644 --- a/src/marketplaceFonts.css +++ b/src/marketplaceFonts.css @@ -226,7 +226,7 @@ @media (--viewportMedium) { font-weight: var(--fontWeightMedium); - font-size: 14px; + font-size: 13px; line-height: 24px; } }