Skynet/misc_pterodactyl-panel
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT

Browse source
This commit is contained in:
Matthew Penner 2021-07-22 11:15:27 -06:00
parent 23de3d68f3
commit 361596e051
40 changed files with 180 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

11
resources/scripts/components/elements/Modal.tsx
View file

@ -1,7 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro';
import styled, { css } from 'styled-components/macro';
import tw, { css, styled } from 'twin.macro';
import { breakpoint } from '@/theme';
import Fade from '@/components/elements/Fade';
import { createPortal } from 'react-dom';
@ -25,7 +24,7 @@ export const ModalMask = styled.div`
background: rgba(0, 0, 0, 0.70);
`;
const ModalContainer = styled.div<{ alignTop?: boolean }>`
const ModalContainer = styled.div<{ alignTop?: boolean }>`
max-width: 95%;
max-height: calc(100vh - 8rem);
${breakpoint('md')`max-width: 75%`};
@ -38,13 +37,13 @@ const ModalContainer = styled.div<{ alignTop?: boolean }>`
`};
margin-bottom: auto;
& > .close-icon {
${tw`absolute right-0 p-2 text-white cursor-pointer opacity-50 transition-all duration-150 ease-linear hover:opacity-100`};
top: -2.5rem;
&:hover {${tw`transform rotate-90`}}
& > svg {
${tw`w-6 h-6`};
}