ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT
This commit is contained in:
parent
23de3d68f3
commit
361596e051
40 changed files with 180 additions and 147 deletions
|
@ -7,9 +7,8 @@ import { WebLinksAddon } from 'xterm-addon-web-links';
|
|||
import { ScrollDownHelperAddon } from '@/plugins/XtermScrollDownHelperAddon';
|
||||
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import styled from 'styled-components/macro';
|
||||
import { usePermissions } from '@/plugins/usePermissions';
|
||||
import tw, { theme as th } from 'twin.macro';
|
||||
import tw, { styled, theme as th } from 'twin.macro';
|
||||
import 'xterm/css/xterm.css';
|
||||
import useEventListener from '@/plugins/useEventListener';
|
||||
import { debounce } from 'debounce';
|
||||
|
|
|
@ -21,11 +21,10 @@ import copyFile from '@/api/server/files/copyFile';
|
|||
import Can from '@/components/elements/Can';
|
||||
import getFileDownloadUrl from '@/api/server/files/getFileDownloadUrl';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
import tw from 'twin.macro';
|
||||
import tw, { styled } from 'twin.macro';
|
||||
import { FileObject } from '@/api/server/files/loadDirectory';
|
||||
import useFileManagerSwr from '@/plugins/useFileManagerSwr';
|
||||
import DropdownMenu from '@/components/elements/DropdownMenu';
|
||||
import styled from 'styled-components/macro';
|
||||
import useEventListener from '@/plugins/useEventListener';
|
||||
import compressFiles from '@/api/server/files/compressFiles';
|
||||
import decompressFiles from '@/api/server/files/decompressFiles';
|
||||
|
|
|
@ -7,9 +7,8 @@ import { FileObject } from '@/api/server/files/loadDirectory';
|
|||
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import { NavLink, useRouteMatch } from 'react-router-dom';
|
||||
import tw from 'twin.macro';
|
||||
import tw, { styled } from 'twin.macro';
|
||||
import isEqual from 'react-fast-compare';
|
||||
import styled from 'styled-components/macro';
|
||||
import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
|
||||
import { usePermissions } from '@/plugins/usePermissions';
|
||||
import { join } from 'path';
|
||||
|
|
|
@ -1,13 +1,12 @@
|
|||
import React from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import { ServerContext } from '@/state/server';
|
||||
import styled from 'styled-components/macro';
|
||||
import tw, { styled } from 'twin.macro';
|
||||
import Input from '@/components/elements/Input';
|
||||
import { ServerContext } from '@/state/server';
|
||||
|
||||
export const FileActionCheckbox = styled(Input)`
|
||||
&& {
|
||||
${tw`border-neutral-500 bg-transparent`};
|
||||
|
||||
|
||||
&:not(:checked) {
|
||||
${tw`hover:border-neutral-300`};
|
||||
}
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import axios from 'axios';
|
||||
import getFileUploadUrl from '@/api/server/files/getFileUploadUrl';
|
||||
import tw from 'twin.macro';
|
||||
import tw, { styled } from 'twin.macro';
|
||||
import Button from '@/components/elements/Button';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import styled from 'styled-components/macro';
|
||||
import { ModalMask } from '@/components/elements/Modal';
|
||||
import Fade from '@/components/elements/Fade';
|
||||
import useEventListener from '@/plugins/useEventListener';
|
||||
|
@ -15,7 +14,7 @@ import { WithClassname } from '@/components/types';
|
|||
|
||||
const InnerContainer = styled.div`
|
||||
max-width: 600px;
|
||||
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`}
|
||||
${tw`bg-black w-full border-4 border-primary-500 border-dashed rounded p-10 mx-10`};
|
||||
`;
|
||||
|
||||
export default ({ className }: WithClassname) => {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { memo, useCallback, useState } from 'react';
|
||||
import isEqual from 'react-fast-compare';
|
||||
import tw from 'twin.macro';
|
||||
import tw, { styled } from 'twin.macro';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
|
||||
import InputSpinner from '@/components/elements/InputSpinner';
|
||||
|
@ -9,7 +9,6 @@ import Can from '@/components/elements/Can';
|
|||
import Button from '@/components/elements/Button';
|
||||
import GreyRowBox from '@/components/elements/GreyRowBox';
|
||||
import { Allocation } from '@/api/server/getServer';
|
||||
import styled from 'styled-components/macro';
|
||||
import { debounce } from 'debounce';
|
||||
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
|
||||
import useFlash from '@/plugins/useFlash';
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import styled from 'styled-components/macro';
|
||||
import tw from 'twin.macro';
|
||||
import tw, { styled } from 'twin.macro';
|
||||
import Checkbox from '@/components/elements/Checkbox';
|
||||
import React from 'react';
|
||||
import { useStoreState } from 'easy-peasy';
|
||||
|
@ -16,7 +15,7 @@ const Container = styled.label`
|
|||
${tw`border-neutral-500 bg-neutral-800`};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:not(:first-of-type) {
|
||||
${tw`mt-4 sm:mt-2`};
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue