diff --git a/client/components/Button.tsx b/client/components/Button.tsx index 665e930..b76b847 100644 --- a/client/components/Button.tsx +++ b/client/components/Button.tsx @@ -132,6 +132,7 @@ interface NavButtonProps extends BoxProps { disabled?: boolean; onClick?: any; // TODO: better typing type?: "button" | "submit" | "reset"; + key?: string; } export const NavButton = styled(Flex)` diff --git a/client/components/Checkbox.tsx b/client/components/Checkbox.tsx index 0850754..355777a 100644 --- a/client/components/Checkbox.tsx +++ b/client/components/Checkbox.tsx @@ -3,12 +3,13 @@ import styled, { css } from "styled-components"; import { ifProp } from "styled-tools"; import { Flex, BoxProps } from "reflexbox/styled-components"; -import Text, { Span } from "./Text"; +import { Span } from "./Text"; interface InputProps { checked: boolean; id?: string; name: string; + onChange: any; } const Input = styled(Flex).attrs({ @@ -70,6 +71,7 @@ const Checkbox: FC = ({ label, name, width, + onChange, ...rest }) => { return ( @@ -80,7 +82,7 @@ const Checkbox: FC = ({ style={{ cursor: "pointer" }} {...(rest as any)} > - + {label} diff --git a/client/components/Extensions.tsx b/client/components/Extensions.tsx index 89edd39..eaf522e 100644 --- a/client/components/Extensions.tsx +++ b/client/components/Extensions.tsx @@ -4,24 +4,7 @@ import { Flex } from "reflexbox/styled-components"; import SVG from "react-inlinesvg"; // TODO: another solution import { Colors } from "../consts"; import { ColCenterH } from "./Layout"; -import Text, { H3 } from "./Text"; - -const Title = styled.h3` - font-size: 28px; - font-weight: 300; - margin: 0 0 60px; - color: #f5f5f5; - - @media only screen and (max-width: 768px) { - font-size: 24px; - margin-bottom: 56px; - } - - @media only screen and (max-width: 448px) { - font-size: 20px; - margin-bottom: 40px; - } -`; +import { H3 } from "./Text"; const Button = styled.button` display: flex; diff --git a/client/components/LinksTable.tsx b/client/components/LinksTable.tsx index 6b34f2c..7d88272 100644 --- a/client/components/LinksTable.tsx +++ b/client/components/LinksTable.tsx @@ -225,7 +225,7 @@ const LinksTable: FC = () => { ) : ( <> {links.items.map((l, index) => ( - + {l.target} @@ -293,12 +293,14 @@ const LinksTable: FC = () => { l.domain ? `&domain=${l.domain}` : "" }`} > - + + + )} { {domains.map(d => ( - + {d.customDomain} {d.homepage || "default"} diff --git a/client/components/Shortener.tsx b/client/components/Shortener.tsx index 9b0e4ab..f73840a 100644 --- a/client/components/Shortener.tsx +++ b/client/components/Shortener.tsx @@ -61,17 +61,19 @@ const Shortener = () => { const [link, setLink] = useState(null); const [message, setMessage] = useMessage(3000); const [loading, setLoading] = useState(false); - const [qrModal, setQRModal] = useState(false); const [copied, setCopied] = useState(false); - const [formState, { raw, password, text, label }] = useFormState
(null, { - withIds: true, - onChange(e, stateValues, nextStateValues) { - if (stateValues.showAdvanced && !nextStateValues.showAdvanced) { - formState.clear(); - formState.setField("target", stateValues.target); + const [formState, { raw, password, text, label }] = useFormState( + { showAdvanced: false }, + { + withIds: true, + onChange(e, stateValues, nextStateValues) { + if (stateValues.showAdvanced && !nextStateValues.showAdvanced) { + formState.clear(); + formState.setField("target", stateValues.target); + } } } - }); + ); const submitLink = async (reCaptchaToken?: string) => { try { diff --git a/client/pages/stats.tsx b/client/pages/stats.tsx index b229ff4..4b5fdec 100644 --- a/client/pages/stats.tsx +++ b/client/pages/stats.tsx @@ -116,6 +116,7 @@ const StatsPage: NextPage = ({ domain, id }) => { ml={10} disabled={p === period} onClick={() => setPeriod(p as any)} + key={p} > {n}