fix: improve responsiveness

client/components/Checkbox.tsx

@@ -94,7 +94,7 @@ const Checkbox: FC<Props> = ({
     >
       <Input onChange={onChange} name={name} id={id} checked={checked} />
       <Box checked={checked} width={width} height={height} />
-      <Span ml={12} color="#555">
+      <Span ml={[10, 12]} mt="1px" color="#555">
         {label}
       </Span>
     </Flex>
@@ -102,8 +102,9 @@ const Checkbox: FC<Props> = ({
 };
 
 Checkbox.defaultProps = {
-  width: [18],
-  height: [18]
+  width: [16, 18],
+  height: [16, 18],
+  fontSize: [15, 16]
 };
 
 export default Checkbox;

client/components/Extensions.tsx

@@ -59,17 +59,15 @@ const Link = styled.a`
 `;
 
 const Icon = styled(SVG)`
-  svg {
-    width: 18px;
-    height: 18px;
-    margin-right: 16px;
-    fill: ${props => props.color || "#333"};
+  width: 18px;
+  height: 18px;
+  margin-right: 16px;
+  fill: ${props => props.color || "#333"};
 
-    @media only screen and (max-width: 768px) {
-      width: 13px;
-      height: 13px;
-      margin-right: 10px;
-    }
+  @media only screen and (max-width: 768px) {
+    width: 13px;
+    height: 13px;
+    margin-right: 10px;
   }
 `;
 

client/components/Header.tsx

@@ -1,6 +1,7 @@
 import { Flex } from "reflexbox/styled-components";
 import React, { FC } from "react";
 import Router from "next/router";
+import useMedia from "use-media";
 import Link from "next/link";
 
 import { useStoreState } from "../store";
@@ -9,7 +10,7 @@ import { RowCenterV } from "./Layout";
 import { Button } from "./Button";
 import ALink from "./ALink";
 
-const Li = styled(Flex).attrs({ ml: [16, 32] })`
+const Li = styled(Flex).attrs({ ml: [12, 24, 32] })`
   a {
     color: inherit;
 
@@ -46,6 +47,7 @@ const LogoImage = styled.div`
 
 const Header: FC = () => {
   const { isAuthenticated } = useStoreState(s => s.auth);
+  const isMobile = useMedia({ maxWidth: 640 });
 
   const login = !isAuthenticated && (
     <Li>
@@ -59,7 +61,7 @@ const Header: FC = () => {
   const logout = isAuthenticated && (
     <Li>
       <Link href="/logout">
-        <ALink href="/logout" title="logout">
+        <ALink href="/logout" title="logout" fontSize={[14, 16]}>
           Log out
         </ALink>
       </Link>
@@ -79,15 +81,15 @@ const Header: FC = () => {
     <Flex
       width={1232}
       maxWidth="100%"
-      p={[16, 16, "0 32px"]}
-      mb={[32, 32, 0]}
+      p={[16, "0 32px"]}
+      mb={[32, 0]}
       height={["auto", "auto", 102]}
       justifyContent="space-between"
-      alignItems={["flex-start", "flex-start", "center"]}
+      alignItems={["flex-start", "center"]}
     >
       <Flex
-        flexDirection={["column", "column", "row"]}
-        alignItems={["flex-start", "flex-start", "stretch"]}
+        flexDirection={["column", "row"]}
+        alignItems={["flex-start", "stretch"]}
       >
         <LogoImage>
           <a
@@ -102,33 +104,36 @@ const Header: FC = () => {
             Kutt.it
           </a>
         </LogoImage>
-        <Flex
-          style={{ listStyle: "none" }}
-          display={["none", "flex"]}
-          alignItems="flex-end"
-          as="ul"
-          mb="3px"
-          m={0}
-          p={0}
-        >
-          <Li>
-            <ALink
-              href="//github.com/thedevs-network/kutt"
-              target="_blank"
-              rel="noopener noreferrer"
-              title="GitHub"
-            >
-              GitHub
-            </ALink>
-          </Li>
-          <Li>
-            <Link href="/report">
-              <ALink href="/report" title="Report abuse">
-                Report
+        {!isMobile && (
+          <Flex
+            style={{ listStyle: "none" }}
+            display={["none", "flex"]}
+            alignItems="flex-end"
+            as="ul"
+            mb="3px"
+            m={0}
+            p={0}
+          >
+            <Li>
+              <ALink
+                href="//github.com/thedevs-network/kutt"
+                target="_blank"
+                rel="noopener noreferrer"
+                title="GitHub"
+                fontSize={[14, 16]}
+              >
+                GitHub
               </ALink>
-            </Link>
-          </Li>
-        </Flex>
+            </Li>
+            <Li>
+              <Link href="/report">
+                <ALink href="/report" title="Report abuse" fontSize={[14, 16]}>
+                  Report
+                </ALink>
+              </Link>
+            </Li>
+          </Flex>
+        )}
       </Flex>
       <RowCenterV
         m={0}
@@ -140,7 +145,7 @@ const Header: FC = () => {
         <Li>
           <Flex display={["flex", "none"]}>
             <Link href="/report">
-              <ALink href="/report" title="Report">
+              <ALink href="/report" title="Report" fontSize={[14, 16]}>
                 Report
               </ALink>
             </Link>

client/components/Shortener.tsx

@@ -116,7 +116,7 @@ const Shortener = () => {
   };
 
   const title = !link && (
-    <H1 light>
+    <H1 fontSize={[25, 27, 32]} light>
       Kutt your links{" "}
       <Span style={{ borderBottom: "2px dotted #999" }} light>
         shorter
@@ -135,11 +135,11 @@ const Shortener = () => {
       {copied ? (
         <Animation offset="10px" duration="0.2s" alignItems="center">
           <Icon
-            size={[35]}
+            size={[30, 35]}
             py={0}
             px={0}
             mr={3}
-            p="5px"
+            p={["4px", "5px"]}
             name="check"
             strokeWidth="3"
             stroke={Colors.CheckIcon}
@@ -153,8 +153,8 @@ const Shortener = () => {
               py={0}
               px={0}
               mr={3}
-              size={[35]}
-              p={["7px"]}
+              size={[30, 35]}
+              p={["6px", "7px"]}
               name="copy"
               strokeWidth="2.5"
               stroke={Colors.CopyIcon}
@@ -164,7 +164,7 @@ const Shortener = () => {
         </Animation>
       )}
       <CopyToClipboard text={link.shortLink} onCopy={setCopied}>
-        <ShortenedLink fontSize={[30]} pb="2px" light>
+        <ShortenedLink fontSize={[24, 26, 30]} pb="2px" light>
           {removeProtocol(link.shortLink)}
         </ShortenedLink>
       </CopyToClipboard>
@@ -172,16 +172,15 @@ const Shortener = () => {
   );
 
   return (
-    <Col width={800} maxWidth="98%" flex="0 0 auto" mt={4}>
-      <RowCenterH mb={40}>
+    <Col width={800} maxWidth="100%" px={[3]} flex="0 0 auto" mt={4}>
+      <RowCenterH mb={[4, 48]}>
         {title}
         {result}
       </RowCenterH>
       <Flex
         as="form"
         id="shortenerform"
-        width={800}
-        maxWidth="100%"
+        width={1}
         alignItems="center"
         justifyContent="center"
         style={{ position: "relative" }}
@@ -190,17 +189,17 @@ const Shortener = () => {
         <TextInput
           {...text("target")}
           placeholder="Paste your long URL"
-          placeholderSize={[16, 18]}
-          fontSize={[20, 22]}
+          placeholderSize={[16, 17, 18]}
+          fontSize={[18, 20, 22]}
           width={1}
-          height={[72]}
+          height={[58, 64, 72]}
           autoFocus
           data-lpignore
         />
         <SubmitIconWrapper onClick={onSubmit}>
           <Icon
             name={loading ? "spinner" : "send"}
-            size={28}
+            size={[22, 26, 28]}
             fill={loading ? "none" : "#aaa"}
             stroke={loading ? Colors.Spinner : "none"}
             mb={1}
@@ -228,13 +227,19 @@ const Shortener = () => {
         })}
         checked={formState.values.showAdvanced}
         label="Show advanced options"
-        mt={24}
+        mt={[3, 24]}
         alignSelf="flex-start"
       />
       {formState.values.showAdvanced && (
-        <Flex mt={4}>
-          <Col>
-            <Text as="label" {...label("customurl")} fontSize={15} mb={2} bold>
+        <Flex mt={4} flexDirection={["column", "row"]}>
+          <Col mb={[3, 0]}>
+            <Text
+              as="label"
+              {...label("customurl")}
+              fontSize={[14, 15]}
+              mb={2}
+              bold
+            >
               {(domain || {}).customDomain ||
                 (typeof window !== "undefined" && window.location.hostname)}
               /
@@ -243,28 +248,34 @@ const Shortener = () => {
               {...text("customurl")}
               placeholder="Custom address"
               data-lpignore
-              pl={24}
-              pr={24}
-              placeholderSize={[13, 14, 14, 14]}
+              pl={[3, 24]}
+              pr={[3, 24]}
+              placeholderSize={[13, 14]}
               fontSize={[14, 15]}
-              height={44}
-              width={240}
+              height={[36, 44]}
+              width={[210, 240]}
             />
           </Col>
-          <Col ml={4}>
-            <Text as="label" {...label("password")} fontSize={15} mb={2} bold>
+          <Col ml={[0, 4]}>
+            <Text
+              as="label"
+              {...label("password")}
+              fontSize={[14, 15]}
+              mb={2}
+              bold
+            >
               Password:
             </Text>
             <TextInput
               {...password("password")}
               placeholder="Password"
               data-lpignore
-              pl={24}
-              pr={24}
-              placeholderSize={[13, 14, 14, 14]}
+              pl={[3, 24]}
+              pr={[3, 24]}
+              placeholderSize={[13, 14]}
               fontSize={[14, 15]}
-              height={44}
-              width={240}
+              height={[36, 44]}
+              width={[210, 240]}
             />
           </Col>
         </Flex>

client/components/TextInput.tsx

@@ -41,14 +41,17 @@ const TextInput = styled(Flex).attrs({
   }
 
   ::placeholder {
-    font-size: ${withProp("placeholderSize", s => s[0] || 14)};
+    font-size: ${withProp("placeholderSize", s => s[0] || 14)}px;
     letter-spacing: 0.05em;
     color: #888;
   }
 
   @media screen and (min-width: 64em) {
     ::placeholder {
-      font-size: ${withProp("placeholderSize", s => s[3] || 16)}px;
+      font-size: ${withProp(
+        "placeholderSize",
+        s => s[3] || s[2] || s[1] || s[0] || 16
+      )}px;
     }
   }
 
@@ -56,13 +59,16 @@ const TextInput = styled(Flex).attrs({
     letter-spacing: 0.1em;
     border-bottom-width: ${prop("bbw", "6px")};
     ::placeholder {
-      font-size: ${withProp("placeholderSize", s => s[2] || 15)}px;
+      font-size: ${withProp(
+        "placeholderSize",
+        s => s[2] || s[1] || s[0] || 15
+      )}px;
     }
   }
 
   @media screen and (min-width: 40em) {
     ::placeholder {
-      font-size: ${withProp("placeholderSize", s => s[1] || 15)}px;
+      font-size: ${withProp("placeholderSize", s => s[1] || s[0] || 15)}px;
     }
   }
 `;

client/pages/_document.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Document, { Head, Main, NextScript } from "next/document";
 import { ServerStyleSheet } from "styled-components";
+
 import { Colors } from "../consts";
 
 interface Props {