blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

remove tailwind deprecated transform class 

and remove default-transitions that weren't paired with a class change
This commit is contained in:
tjs 2022-08-16 18:58:03 -04:00
parent c035bc4655
commit 08b6da5d2f
21 changed files with 68 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Layout.tsx
View File

@ -90,11 +90,11 @@ const Layout = ({ children }: { children: ReactNode }) => {
) : (
<div className={`fixed z-20 h-screen`}>
<button
className="absolute -right-4 top-1/2 z-20 hidden h-10 w-4 -translate-y-1/2 transform rounded-none rounded-r bg-th-bkg-4 focus:outline-none lg:block"
className="absolute -right-4 top-1/2 z-20 hidden h-10 w-4 -translate-y-1/2 rounded-none rounded-r bg-th-bkg-4 focus:outline-none lg:block"
onClick={handleToggleSidebar}
>
<ChevronRightIcon
className={`default-transition h-full w-full ${
className={`h-full w-full ${
!isCollapsed ? 'rotate-180' : 'rotate-360'
}`}
/>

6
components/MangoAccountsList.tsx
View File

@ -42,7 +42,7 @@ const MangoAccountsList = ({
</p>
<ChevronDownIcon
className={`${
open ? 'rotate-180 transform' : 'rotate-360 transform'
open ? 'rotate-180' : 'rotate-360'
} mt-0.5 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
/>
</Popover.Button>
@ -51,8 +51,8 @@ const MangoAccountsList = ({
show={open}
as={Fragment}
enter="transition-all ease-in duration-200"
enterFrom="opacity-0 transform scale-75"
enterTo="opacity-100 transform scale-100"
enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100"
leave="transition ease-out duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"

24
components/SideNav.tsx
View File

@ -47,7 +47,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
<Transition
show={!collapsed}
as={Fragment}
enter="transition-all ease-in duration-200"
enter="transition ease-in duration-200"
enterFrom="opacity-50"
enterTo="opacity-100"
leave="transition ease-out duration-200"
@ -190,7 +190,7 @@ const MenuItem = ({
<Transition
show={!collapsed}
as={Fragment}
enter="transition-all ease-in duration-300"
enter="transition ease-in duration-300"
enterFrom="opacity-50"
enterTo="opacity-100"
leave="transition ease-out duration-300"
@ -256,7 +256,7 @@ const ExpandableMenuItem = ({
role="button"
>
<Popover.Button
className="default-transition md:hover:text-th-primary"
className="md:hover:text-th-primary"
onClick={() => toggleMenu()}
>
<div
@ -276,9 +276,9 @@ const ExpandableMenuItem = ({
<Transition
show={showMenu}
as={Fragment}
enter="transition-all ease-in duration-300"
enterFrom="opacity-0 transform scale-90"
enterTo="opacity-100 transform scale-100"
enter="transition ease-in duration-300"
enterFrom="opacity-0 scale-90"
enterTo="opacity-100 scale-100"
leave="transition ease-out duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
@ -287,7 +287,7 @@ const ExpandableMenuItem = ({
className={`absolute z-20 rounded-md rounded-l-none border border-th-bkg-3 bg-th-bkg-1 py-2 ${
alignBottom
? 'bottom-0 left-[63px] w-72 rounded-b-none p-0'
: 'top-1/2 left-[63px] w-56 -translate-y-1/2 transform'
: 'top-1/2 left-[63px] w-56 -translate-y-1/2'
}`}
>
{children}
@ -305,7 +305,7 @@ const ExpandableMenuItem = ({
}`}
>
<Disclosure.Button
className={`default-transition flex h-full w-full items-center justify-between rounded-none md:hover:text-th-primary`}
className={`flex h-full w-full items-center justify-between rounded-none md:hover:text-th-primary`}
>
<div className="flex items-center">
<div
@ -321,7 +321,7 @@ const ExpandableMenuItem = ({
appear={true}
show={!collapsed}
as={Fragment}
enter="transition-all ease-in duration-300"
enter="transition ease-in duration-300"
enterFrom="opacity-50"
enterTo="opacity-100"
leave="transition ease-out duration-300"
@ -333,7 +333,7 @@ const ExpandableMenuItem = ({
</div>
<ChevronDownIcon
className={`${
showMenu ? 'rotate-180 transform' : 'rotate-360 transform'
showMenu ? 'rotate-180' : 'rotate-360'
} h-5 w-5 flex-shrink-0`}
/>
</Disclosure.Button>
@ -342,10 +342,10 @@ const ExpandableMenuItem = ({
appear={true}
show={showMenu}
as={Fragment}
enter="transition-all ease-in duration-500"
enter="transition ease-in duration-500"
enterFrom="opacity-100 max-h-0"
enterTo="opacity-100 max-h-80"
leave="transition-all ease-out duration-500"
leave="transition ease-out duration-500"
leaveFrom="opacity-100 max-h-80"
leaveTo="opacity-0 max-h-0"
>

8
components/TokenList.tsx
View File

@ -300,9 +300,9 @@ const TokenList = () => {
<ChevronDownIcon
className={`${
showTokenDetails === bank.value.name
? 'rotate-180 transform'
: 'rotate-360 transform'
} default-transition h-6 w-6 flex-shrink-0 text-th-fgd-1`}
? 'rotate-180'
: 'rotate-360'
} h-6 w-6 flex-shrink-0 text-th-fgd-1`}
/>
</IconButton>
</div>
@ -311,7 +311,7 @@ const TokenList = () => {
appear={true}
show={showTokenDetails === bank.value.name}
as={Fragment}
enter="transition-all ease-in duration-200"
enter="transition ease-in duration-200"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition ease-out"

8
components/TradeHistoryTable.tsx
View File

@ -247,9 +247,9 @@ const TradeHistoryTable = ({
<ChevronDownIcon
className={`${
showTradeDetails === signature
? 'rotate-180 transform'
: 'rotate-360 transform'
} default-transition h-6 w-6 flex-shrink-0 text-th-fgd-1`}
? 'rotate-180'
: 'rotate-360'
} h-6 w-6 flex-shrink-0 text-th-fgd-1`}
/>
</IconButton>
</div>
@ -257,7 +257,7 @@ const TradeHistoryTable = ({
appear={true}
show={showTradeDetails === signature}
as={Fragment}
enter="transition-all ease-in duration-200"
enter="transition ease-in duration-200"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition ease-out"

2
components/chat/ChatForm.tsx
View File

@ -67,7 +67,7 @@ const ChatForm = ({
ref={callbackRef}
/>
<button className="mx-2 bg-transparent" type="submit">
<PaperAirplaneIcon className="h-5 w-5 flex-shrink-0 rotate-90 transform" />
<PaperAirplaneIcon className="h-5 w-5 flex-shrink-0 rotate-90" />
</button>
</form>
)

2
components/forms/Input.tsx
View File

@ -28,7 +28,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
<div className={`relative flex ${wrapperClassName}`}>
{prefix ? (
<div
className={`absolute left-2 top-1/2 -translate-y-1/2 transform ${prefixClassName}`}
className={`absolute left-2 top-1/2 -translate-y-1/2 ${prefixClassName}`}
>
{prefix}
</div>

2
components/forms/Select.tsx
View File

@ -39,7 +39,7 @@ const Select = ({
)}
<ChevronDownIcon
className={`default-transition h-5 w-5 flex-shrink-0 text-th-fgd-1 ${
open ? 'rotate-180 transform' : 'rotate-360 transform'
open ? 'rotate-180' : 'rotate-360'
}`}
/>
</div>

2
components/forms/Switch.tsx
View File

@ -39,7 +39,7 @@ const Switch: FunctionComponent<SwitchProps> = ({
aria-hidden="true"
className={`${
checked ? 'translate-x-5' : 'translate-x-0'
} pointer-events-none inline-block h-4 w-4 transform rounded-full
} pointer-events-none inline-block h-4 w-4 rounded-full
bg-white shadow ring-0 transition duration-200 ease-in-out`}
></span>
</button>

12
components/mobile/BottomBar.tsx
View File

@ -30,7 +30,7 @@ const BottomBar = () => {
return (
<>
<div className="default-transition grid grid-cols-4 grid-rows-1 bg-th-bkg-2 py-2.5">
<div className="grid grid-cols-4 grid-rows-1 bg-th-bkg-2 py-2.5">
<Link
href={{
pathname: '/',
@ -39,7 +39,7 @@ const BottomBar = () => {
<a
className={`${
asPath === '/' ? 'text-th-primary' : 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
} col-span-1 flex cursor-pointer flex-col items-center`}
>
<HomeIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('portfolio')}</StyledBarItemLabel>
@ -54,7 +54,7 @@ const BottomBar = () => {
<a
className={`${
asPath === '/trade' ? 'text-th-primary' : 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
} col-span-1 flex cursor-pointer flex-col items-center`}
>
<TradeIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('trade')}</StyledBarItemLabel>
@ -64,7 +64,7 @@ const BottomBar = () => {
<a
className={`${
asPath === '/stats' ? 'text-th-primary' : 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
} col-span-1 flex cursor-pointer flex-col items-center`}
>
<ChartBarIcon className="mb-1 h-4 w-4" />
<StyledBarItemLabel>{t('stats')}</StyledBarItemLabel>
@ -73,7 +73,7 @@ const BottomBar = () => {
<a
className={`${
showPanel ? 'text-th-primary' : 'text-th-fgd-3'
} default-transition col-span-1 flex cursor-pointer flex-col items-center`}
} col-span-1 flex cursor-pointer flex-col items-center`}
onClick={() => setShowPanel(!showPanel)}
>
<MenuIcon className="mb-1 h-4 w-4" />
@ -97,7 +97,7 @@ const MoreMenuPanel = ({
const { t } = useTranslation('common')
return (
<div
className={`fixed bottom-0 z-30 h-96 w-full transform overflow-hidden bg-th-bkg-2 px-4 transition-all duration-700 ease-in-out ${
className={`fixed bottom-0 z-30 h-96 w-full overflow-hidden bg-th-bkg-2 px-4 transition duration-500 ease-in-out ${
showPanel ? 'translate-y-0' : 'translate-y-full'
}`}
>

2
components/modals/NftProfilePicModal.tsx
View File

@ -13,7 +13,7 @@ const ImgWithLoader = (props: any) => {
return (
<div className="relative">
{isLoading && (
<PhotographIcon className="absolute left-1/2 top-1/2 z-10 h-1/4 w-1/4 -translate-x-1/2 -translate-y-1/2 transform animate-pulse text-th-fgd-4" />
<PhotographIcon className="absolute left-1/2 top-1/2 z-10 h-1/4 w-1/4 -translate-x-1/2 -translate-y-1/2 animate-pulse text-th-fgd-4" />
)}
<img {...props} onLoad={() => setIsLoading(false)} alt="" />
</div>

8
components/modals/UserSetupModal.tsx
View File

@ -158,12 +158,12 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
appear={true}
className="absolute top-0.5 left-0 z-20 h-full w-full bg-th-bkg-1 p-6"
show={showSetupStep === 0}
enter="transition-all ease-in duration-500"
enter="transition ease-in duration-500"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-all ease-out duration-500"
leaveFrom="transform translate-x-0"
leaveTo="transform -translate-x-full"
leave="transition ease-out duration-500"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
>
<h2 className="mb-1">Welcome.</h2>
<p className="mb-4">

6
components/shared/IconDropMenu.tsx
View File

@ -55,9 +55,9 @@ const IconDropMenu = ({
appear={true}
show={open}
as={Fragment}
enter="transition-all ease-in duration-100"
enterFrom="opacity-0 transform scale-90"
enterTo="opacity-100 transform scale-100"
enter="transition ease-in duration-100"
enterFrom="opacity-0 scale-90"
enterTo="opacity-100 scale-100"
leave="transition ease-out duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"

2
components/shared/Modal.tsx
View File

@ -27,7 +27,7 @@ function Modal({
<span className="inline-block h-screen align-middle" aria-hidden="true">
&#8203;
</span>
<div className="my-8 inline-block w-full max-w-md transform overflow-x-hidden rounded-lg border border-th-bkg-3 bg-th-bkg-1 p-6 text-left align-middle shadow-xl transition-all">
<div className="my-8 inline-block w-full max-w-md overflow-x-hidden rounded-lg border border-th-bkg-3 bg-th-bkg-1 p-6 text-left align-middle shadow-xl">
{!hideClose ? (
<button
onClick={onClose}

4
components/shared/Notification.tsx
View File

@ -120,10 +120,10 @@ const Notification = ({ notification }: { notification: Notification }) => {
show={show}
as={Fragment}
appear={true}
enter="transform ease-out duration-500 transition"
enter="ease-out duration-500 transition"
enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:-translate-x-48"
enterTo="translate-y-0 opacity-100 sm:translate-x-0"
leave="transform ease-in duration-200 transition"
leave="ease-in duration-200 transition"
leaveFrom="translate-y-0 sm:translate-x-0"
leaveTo="-translate-y-2 sm:translate-y-0 sm:-translate-x-48"
>

8
components/shared/Transitions.tsx
View File

@ -20,11 +20,11 @@ export const EnterRightExitLeft = ({
className={className}
show={show}
enter={transitionEnterStyle}
enterFrom="transform translate-x-full"
enterTo="transform translate-x-0"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave={transitionExitStyle}
leaveFrom="transform translate-x-0"
leaveTo="transform -translate-x-full"
leaveFrom="translate-x-0"
leaveTo="-translate-x-full"
style={style}
>
{children}

12
components/swap/Swap.tsx
View File

@ -158,12 +158,12 @@ const Swap = () => {
<Transition
className="thin-scroll absolute top-0 left-0 z-20 h-full w-full overflow-auto bg-th-bkg-2 p-6 pb-0"
show={showConfirm}
enter="transition-all ease-in duration-300"
enterFrom="transform translate-x-full"
enterTo="transform translate-x-0"
leave="transition-all ease-out duration-300"
leaveFrom="transform translate-x-0"
leaveTo="transform translate-x-full"
enter="transition ease-in duration-300"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition ease-out duration-300"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<JupiterRoutes
inputToken={inputToken}

6
components/wallet/ConnectedMenu.tsx
View File

@ -46,9 +46,9 @@ const ConnectedMenu = () => {
appear={true}
show={open}
as={Fragment}
enter="transition-all ease-in duration-200"
enterFrom="opacity-0 transform scale-75"
enterTo="opacity-100 transform scale-100"
enter="transition ease-in duration-200"
enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100"
leave="transition ease-out duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"

8
components/wallet/WalletSelect.tsx
View File

@ -15,7 +15,7 @@ const WalletSelect = () => {
>
<ChevronDownIcon
className={`default-transition h-6 w-6 ${
open ? 'rotate-180 transform' : 'rotate-360 transform'
open ? 'rotate-180' : 'rotate-360'
}`}
/>
</Menu.Button>
@ -23,9 +23,9 @@ const WalletSelect = () => {
appear={true}
show={open}
as={Fragment}
enter="transition-all ease-in duration-200"
enterFrom="opacity-0 transform scale-75"
enterTo="opacity-100 transform scale-100"
enter="transition ease-in duration-200"
enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100"
leave="transition ease-out duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"

6
pages/index.tsx
View File

@ -192,9 +192,9 @@ const Index: NextPage = () => {
appear={true}
className="absolute right-2 bottom-2"
show={showExpandChart}
enter="transition-all ease-in duration-300"
enterFrom="opacity-0 transform scale-75"
enterTo="opacity-100 transform scale-100"
enter="transition ease-in duration-300"
enterFrom="opacity-0 scale-75"
enterTo="opacity-100 scale-100"
leave="transition ease-out duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"

4
styles/globals.css
View File

@ -151,11 +151,11 @@ button {
}
svg {
@apply transition-all duration-500 ease-out;
@apply transition duration-500 ease-out;
}
.default-transition {
@apply transition-all duration-500 ease-out;
@apply transition duration-300 ease-out;
}
/* Type */