ui: I HATE STYLED-COMPONENTS WITH TYPESCRIPT

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

View file

@ -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';

View file

@ -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';

View file

@ -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';

View file

@ -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`};
}

View file

@ -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) => {

View file

@ -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';

View file

@ -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`};
}