diff --git a/src/components/modals/stars/StarsBalanceModal.module.scss b/src/components/modals/stars/StarsBalanceModal.module.scss index d44fc5fe9..410f5fde0 100644 --- a/src/components/modals/stars/StarsBalanceModal.module.scss +++ b/src/components/modals/stars/StarsBalanceModal.module.scss @@ -300,7 +300,24 @@ z-index: 1; top: 3.5rem; + padding-inline: 0; + border-bottom: 0.0625rem solid var(--color-light-shadow); + + box-shadow: none; + + transition: box-shadow 0.2s; + + &.pinned { + box-shadow: 0 0.125rem 0.125rem var(--color-light-shadow); + } + + :global(.Tab) { + padding: 0.75rem 1.125rem; + :global(.platform) { + bottom: -0.75rem; + } + } } .disclaimer { diff --git a/src/components/modals/stars/StarsBalanceModal.tsx b/src/components/modals/stars/StarsBalanceModal.tsx index cb9ffaf91..bf3dd9b93 100644 --- a/src/components/modals/stars/StarsBalanceModal.tsx +++ b/src/components/modals/stars/StarsBalanceModal.tsx @@ -428,7 +428,7 @@ const StarsBalanceModal = ({ { return (
- +
diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss index 4f0120c90..96a758d39 100644 --- a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss +++ b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss @@ -6,7 +6,7 @@ display: flex; gap: 0.75rem; - padding: 0.5rem 0.75rem 0.5rem 0.5rem; + padding: 0.5rem 0.75rem 0.4375rem 0.5rem; border-radius: 0.5rem; transition: background-color 0.25s ease-out; @@ -35,15 +35,18 @@ .title, .description, .date { margin-bottom: 0; - line-height: 1.25; + line-height: 1.25rem; } .title { - font-size: 0.9375rem; + font-size: 1rem; + font-weight: var(--font-weight-semibold); + line-height: 1.3125rem; } -.description, .date { - font-size: 0.8125rem; +.date, +.description { + font-size: 0.875rem; } .date { @@ -60,7 +63,8 @@ .preview { position: relative; - align-self: center; + width: 2.625rem; + height: 2.625rem; } .subscriptionStar { diff --git a/src/components/modals/stars/transaction/StarsTransactionItem.tsx b/src/components/modals/stars/transaction/StarsTransactionItem.tsx index 91aced0c5..458fe5375 100644 --- a/src/components/modals/stars/transaction/StarsTransactionItem.tsx +++ b/src/components/modals/stars/transaction/StarsTransactionItem.tsx @@ -41,6 +41,7 @@ type OwnProps = { }; const GIFT_STICKER_SIZE = 36; +const AVATAR_SIZE = 42; const StarsTransactionItem = ({ transaction, className }: OwnProps) => { const { openStarsTransactionModal } = getActions(); @@ -157,7 +158,7 @@ const StarsTransactionItem = ({ transaction, className }: OwnProps) => { return ( <> - + {Boolean(subscriptionPeriod) && ( )}