Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update style of reward modal #225

Merged
merged 2 commits into from
Feb 1, 2024
Merged

Update style of reward modal #225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3c0c0e6
style: better decimals placement in reward history
teodorus-nathaniel Feb 1, 2024
26b5e76
style: change style of progress modal
teodorus-nathaniel Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/creators/RewardHistoryModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function RewardHistoryPanel({
currency='SUB'
decimals={10}
value={usedRewardValue}
precision={2}
fixedDecimalsLength={2}
/>
</span>
</div>
Expand Down
71 changes: 42 additions & 29 deletions src/components/leaderboard/ProgressModal.module.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,56 @@
@import 'src/styles/subsocial-vars.scss'

.ProgressModal
border-radius: $border_radius_huge
display: flex
flex-direction: column
align-items: center
padding: $space_large $space_big
gap: $space_big
color: white
position: relative
:global(.ant-modal-content)
overflow: hidden
color: white

.DiamondIcon
font-size: 130px
position: absolute
top: -$space_tiny
left: -$space_tiny

&.Full
background: linear-gradient(180deg, #9340E6 0%, #7534A9 100%)
:global(.ant-modal-content)
background: linear-gradient(180deg, #9340E6 0%, #7534A9 100%)

&.Halfway
background: linear-gradient(180deg, #F77400 0%, #F57F00 100%)
:global(.ant-modal-content)
background: linear-gradient(180deg, #F77400 0%, #F57F00 100%)

:global(.ant-modal-close)
color: white
top: 8px
right: 8px

.DiamondIcon
font-size: 130px
position: absolute
top: -$space_normal
right: -$space_normal
.Content
overflow: visible !important

.RewardCard
.ProgressModalContent
border-radius: $border_radius_huge
display: flex
flex-direction: column
align-items: center
border-radius: $border_radius_large
background: rgba(248, 250, 252, 0.10)
backdrop-filter: blur(24.5px)
flex: 1
padding: $space_normal
gap: $space_big
position: relative

.Diamond
width: 44px
height: 44px
position: absolute
top: 0
right: 0
transform: translate(35%, -50%) rotate(-30deg)
transform-origin: center
.RewardCard
display: flex
flex-direction: column
align-items: center
border-radius: $border_radius_large
background: rgba(248, 250, 252, 0.10)
backdrop-filter: blur(24.5px)
flex: 1
padding: $space_normal
position: relative

.Diamond
width: 44px
height: 44px
position: absolute
top: 0
right: 0
transform: translate(35%, -50%) rotate(-30deg)
transform-origin: center
13 changes: 6 additions & 7 deletions src/components/leaderboard/ProgressModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,17 +116,16 @@ function InnerProgressModal() {
}}
title={`Your progress ${isUsingLastWeekData ? 'last week' : 'yesterday'}`}
closable
className={clsx(styles.ProgressModal, statusClassName[status])}
contentClassName={styles.Content}
>
<div
className={clsx(styles.ProgressModal, statusClassName[status], 'mt-2')}
style={{ overflowX: 'clip' }}
>
<DiamondIcon className={styles.DiamondIcon} />
<DiamondIcon className={styles.DiamondIcon} />
<div className={clsx(styles.ProgressModalContent, 'mt-2')}>
<div className='d-flex flex-column align-items-center'>
<div className='mb-2'>
<Avatar
noMargin
size={50}
size={60}
asLink={false}
address={myAddress}
avatar={profile?.content?.image}
Expand Down Expand Up @@ -169,7 +168,7 @@ function InnerProgressModal() {
</div>
</div>
<Button
type='primary'
type='default'
size='large'
className='mt-4'
onClick={() =>
Expand Down
9 changes: 8 additions & 1 deletion src/components/utils/CustomModal/index.module.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
:global(.ant-modal-content)
height: calc(100vh - 100px)

&.NoPadding
:global(.ant-modal-body)
padding: 0
> *
padding-left: 0
padding-right: 0

:global(.ant-modal-content)
max-height: 700px
border-radius: $space_normal
Expand All @@ -28,7 +35,7 @@
flex: 1

.CustomModalTitle
color: inherit
font-weight: bold
color: #222222
font-size: $font_big
margin-bottom: $space_mini
4 changes: 2 additions & 2 deletions src/components/utils/icons/Diamond.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ export default function DiamondIcon(props: ComponentProps<'svg'>) {
{...props}
width='1em'
height='1em'
viewBox='0 0 127 126'
viewBox='0 0 85 102'
fill='none'
xmlns='http://www.w3.org/2000/svg'
>
<path
opacity='0.1'
d='M18.9182 30.2914L17.4721 31.4856L19.2695 32.0208L33.8044 36.3492L34.3155 36.5014L34.7266 36.1619L56.2801 18.3616L57.7262 17.1674L55.9288 16.6322L41.3939 12.3038L40.8828 12.1516L40.4717 12.4911L18.9182 30.2914ZM46.9097 38.6271L45.4637 39.8213L47.2611 40.3566L82.3231 50.7978L84.1205 51.3331L83.5634 49.5424L75.2593 22.8507L75.1009 22.3415L74.5898 22.1893L69.3854 20.6395L68.8744 20.4873L68.4633 20.8269L46.9097 38.6271ZM95.1103 54.1438L95.2687 54.653L95.7798 54.8052L110.315 59.1336L112.112 59.6688L111.555 57.8781L103.251 31.1864L103.092 30.6772L102.581 30.5251L88.0465 26.1966L86.2491 25.6614L86.8062 27.4521L95.1103 54.1438ZM93.6469 64.1926L93.0315 64.0093L92.6087 64.4927L67.9767 92.6595L69.2803 94.1524L106.346 69.6884L108.136 68.5073L106.081 67.8954L93.6469 64.1926ZM81.8152 62.1467L82.8404 60.9745L81.3479 60.53L42.7532 49.0367L41.2607 48.5923L41.4775 50.1344L48.2154 98.056L48.5197 100.22L49.9584 98.5751L81.8152 62.1467ZM31.159 46.1933L31.0696 45.5574L30.4542 45.3742L18.0201 41.6714L15.9651 41.0594L16.817 43.027L34.4609 83.7834L36.3688 83.2468L31.159 46.1933ZM38.6542 1.46532L110.804 22.9511L125.093 68.879L41.4042 124.114L1.56745 32.0939L38.6542 1.46532Z'
d='M-13.8869 27.9446L-14.3345 28.2344L-14.3434 28.7675L-14.8073 56.7173L-14.8384 58.5924L-13.264 57.5734L-0.532604 49.3327L-0.0849704 49.0429L-0.0761184 48.5098L0.387756 20.56L0.418877 18.6849L-1.15549 19.7039L-13.8869 27.9446ZM10.6315 12.0745L10.1838 12.3643L10.175 12.8974L9.71112 40.8472L9.68 42.7223L11.2544 41.7033L41.9659 21.8245L43.5403 20.8054L41.8168 20.066L16.1278 9.04435L15.6377 8.8341L15.1901 9.12385L10.6315 12.0745ZM26.9771 1.49445L25.4027 2.51349L27.1262 3.25293L52.8152 14.2746L53.3053 14.4848L53.7529 14.1951L66.4843 5.95436L68.0587 4.93532L66.3352 4.19588L40.6461 -6.82576L40.1561 -7.036L39.7085 -6.74626L26.9771 1.49445ZM71.9326 15.8269L72.1968 13.6991L70.3969 14.8642L59.5056 21.9138L58.9665 22.2628L59.0595 22.8982L64.4787 59.9216L66.4605 59.9L71.9326 15.8269ZM55.7473 78.4526L57.5906 79.6268L57.2741 77.4644L50.2655 29.5816L50.0399 28.0407L48.7326 28.8869L14.9267 50.7686L13.6194 51.6148L14.9328 52.4515L55.7473 78.4526ZM5.23443 57.7377L4.69284 57.3927L4.15376 57.7417L-6.73752 64.7913L-8.53746 65.9564L-6.48809 66.5866L35.9614 79.6413L36.7927 77.8421L5.23443 57.7377ZM-23.9075 22.9884L39.29 -17.9178L83.4927 1.04697L71.1376 100.556L-24.7057 71.081L-23.9075 22.9884Z'
fill='white'
stroke='white'
strokeWidth='2'
Expand Down
Loading