beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

dont animate currentSubscribedPlan

Browse source
This commit is contained in:
Abhinav 2022-01-14 17:43:40 +05:30
parent 1fe2a97f8c
commit 22528bb7ca
1 changed files with 22 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/pages/gallery/PlanSelector.tsx
View file

@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { Form, Modal, Button } from 'react-bootstrap'; import { Form, Modal, Button } from 'react-bootstrap';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import styled from 'styled-components'; import styled, { css } from 'styled-components';
import { Plan, Subscription } from 'types/billing'; import { Plan, Subscription } from 'types/billing';
import { import {
convertBytesToGBs, convertBytesToGBs,
@ -25,7 +25,7 @@ import { DeadCenter } from 'pages/gallery';
import billingService from 'services/billingService'; import billingService from 'services/billingService';
import { SetLoading } from 'types/gallery'; import { SetLoading } from 'types/gallery';
export const PlanIcon = styled.div<{ selected: boolean }>` export const PlanIcon = styled.div<{ currentlySubscribed: boolean }>`
border-radius: 20px; border-radius: 20px;
width: 220px; width: 220px;
border: 2px solid #333; border: 2px solid #333;
@ -38,8 +38,9 @@ export const PlanIcon = styled.div<{ selected: boolean }>`
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
cursor: ${(props) => (props.selected ? 'not-allowed' : 'pointer')}; cursor: ${(props) =>
border-color: ${(props) => props.selected && '#56e066'}; props.currentlySubscribed ? 'not-allowed' : 'pointer'};
border-color: ${(props) => props.currentlySubscribed && '#56e066'};
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -56,12 +57,17 @@ export const PlanIcon = styled.div<{ selected: boolean }>`
transition: all 0.5s ease-out; transition: all 0.5s ease-out;
} }
&:hover { &:hover
${(props) =>
!props.currentlySubscribed &&
css`
{
transform: scale(1.1); transform: scale(1.1);
background-color: #ffffff11; background-color: #ffffff11;
} }
`}
&:hover > div:first-child::before { &:hover
> div:first-child::before {
transform: rotate(45deg) translateX(300px); transform: rotate(45deg) translateX(300px);
} }
`; `;
@ -163,8 +169,12 @@ function PlanSelector(props: Props) {
<PlanIcon <PlanIcon
key={plan.stripeID} key={plan.stripeID}
className="subscription-plan-selector" className="subscription-plan-selector"
selected={isUserSubscribedPlan(plan, subscription)} currentlySubscribed={isUserSubscribedPlan(plan, subscription)}
onClick={async () => await onPlanSelect(plan)}> onClick={
isUserSubscribedPlan(plan, subscription)
? () => {}
: async () => await onPlanSelect(plan)
}>
<div> <div>
<span <span
style={{ style={{