typescript and linting, phew

.eslintrc.js

@@ -5,9 +5,9 @@ module.exports = {
   },
   extends: [
     'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:@typescript-eslint/eslint-recommended',
     'plugin:jsx-a11y/recommended',
     'plugin:react-hooks/recommended',
     'next',
@@ -30,6 +30,7 @@ module.exports = {
     },
     ecmaVersion: 12,
     sourceType: 'module',
+    project: ['tsconfig.json']
   },
   plugins: ['react', 'prettier', '@typescript-eslint', 'import'],
   rules: {
@@ -38,7 +39,8 @@ module.exports = {
     'react/prop-types': 'off',
     'react/display-name': 'off',
     'react/no-unescaped-entities': 'off',
-    'no-unused-vars': 'warn',
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
     'jsx-a11y/anchor-is-valid': 'off',
     'jsx-a11y/accessible-emoji': 'warn',
     '@typescript-eslint/explicit-module-boundary-types': 'off',

package-lock.json

@@ -20,8 +20,9 @@
         "@types/node": "^16.6.2",
         "@types/react": "^17.0.19",
         "@types/react-dom": "^17.0.9",
-        "@typescript-eslint/eslint-plugin": "^4.29.2",
-        "@typescript-eslint/parser": "^4.29.2",
+        "@types/styled-components": "^5.1.14",
+        "@typescript-eslint/eslint-plugin": "^4.31.0",
+        "@typescript-eslint/parser": "^4.31.0",
         "babel-plugin-styled-components": "^1.13.2",
         "eslint": "^7.32.0",
         "eslint-config-next": "11.1.0",
@@ -1011,6 +1012,16 @@
       "integrity": "sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==",
       "dev": true
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -1055,14 +1066,25 @@
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
       "dev": true
     },
+    "node_modules/@types/styled-components": {
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.14.tgz",
+      "integrity": "sha512-d6P1/tyNytqKwam3cQXq7a9uPtovc/mdAs7dBiz1YbDdNIT3X4WmuFU78YdSYh84TXVuhOwezZ3EeKuNBhwsHQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.2.tgz",
-      "integrity": "sha512-x4EMgn4BTfVd9+Z+r+6rmWxoAzBaapt4QFqE+d8L8sUtYZYLDTK6VG/y/SMMWA5t1/BVU5Kf+20rX4PtWzUYZg==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.31.0.tgz",
+      "integrity": "sha512-iPKZTZNavAlOhfF4gymiSuUkgLne/nh5Oz2/mdiUmuZVD42m9PapnCnzjxuDsnpnbH3wT5s2D8bw6S39TC6GNw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/experimental-utils": "4.29.2",
-        "@typescript-eslint/scope-manager": "4.29.2",
+        "@typescript-eslint/experimental-utils": "4.31.0",
+        "@typescript-eslint/scope-manager": "4.31.0",
         "debug": "^4.3.1",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.1.0",
@@ -1125,15 +1147,15 @@
       }
     },
     "node_modules/@typescript-eslint/experimental-utils": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.29.2.tgz",
-      "integrity": "sha512-P6mn4pqObhftBBPAv4GQtEK7Yos1fz/MlpT7+YjH9fTxZcALbiiPKuSIfYP/j13CeOjfq8/fr9Thr2glM9ub7A==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.31.0.tgz",
+      "integrity": "sha512-Hld+EQiKLMppgKKkdUsLeVIeEOrwKc2G983NmznY/r5/ZtZCDvIOXnXtwqJIgYz/ymsy7n7RGvMyrzf1WaSQrw==",
       "dev": true,
       "dependencies": {
         "@types/json-schema": "^7.0.7",
-        "@typescript-eslint/scope-manager": "4.29.2",
-        "@typescript-eslint/types": "4.29.2",
-        "@typescript-eslint/typescript-estree": "4.29.2",
+        "@typescript-eslint/scope-manager": "4.31.0",
+        "@typescript-eslint/types": "4.31.0",
+        "@typescript-eslint/typescript-estree": "4.31.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       },
@@ -1149,14 +1171,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.29.2.tgz",
-      "integrity": "sha512-WQ6BPf+lNuwteUuyk1jD/aHKqMQ9jrdCn7Gxt9vvBnzbpj7aWEf+aZsJ1zvTjx5zFxGCt000lsbD9tQPEL8u6g==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.31.0.tgz",
+      "integrity": "sha512-oWbzvPh5amMuTmKaf1wp0ySxPt2ZXHnFQBN2Szu1O//7LmOvgaKTCIDNLK2NvzpmVd5A2M/1j/rujBqO37hj3w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "4.29.2",
-        "@typescript-eslint/types": "4.29.2",
-        "@typescript-eslint/typescript-estree": "4.29.2",
+        "@typescript-eslint/scope-manager": "4.31.0",
+        "@typescript-eslint/types": "4.31.0",
+        "@typescript-eslint/typescript-estree": "4.31.0",
         "debug": "^4.3.1"
       },
       "engines": {
@@ -1199,13 +1221,13 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.29.2.tgz",
-      "integrity": "sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.31.0.tgz",
+      "integrity": "sha512-LJ+xtl34W76JMRLjbaQorhR0hfRAlp3Lscdiz9NeI/8i+q0hdBZ7BsiYieLoYWqy+AnRigaD3hUwPFugSzdocg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.29.2",
-        "@typescript-eslint/visitor-keys": "4.29.2"
+        "@typescript-eslint/types": "4.31.0",
+        "@typescript-eslint/visitor-keys": "4.31.0"
       },
       "engines": {
         "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
@@ -1216,9 +1238,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.29.2.tgz",
-      "integrity": "sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.31.0.tgz",
+      "integrity": "sha512-9XR5q9mk7DCXgXLS7REIVs+BaAswfdHhx91XqlJklmqWpTALGjygWVIb/UnLh4NWhfwhR5wNe1yTyCInxVhLqQ==",
       "dev": true,
       "engines": {
         "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
@@ -1229,13 +1251,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.29.2.tgz",
-      "integrity": "sha512-TJ0/hEnYxapYn9SGn3dCnETO0r+MjaxtlWZ2xU+EvytF0g4CqTpZL48SqSNn2hXsPolnewF30pdzR9a5Lj3DNg==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.0.tgz",
+      "integrity": "sha512-QHl2014t3ptg+xpmOSSPn5hm4mY8D4s97ftzyk9BZ8RxYQ3j73XcwuijnJ9cMa6DO4aLXeo8XS3z1omT9LA/Eg==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.29.2",
-        "@typescript-eslint/visitor-keys": "4.29.2",
+        "@typescript-eslint/types": "4.31.0",
+        "@typescript-eslint/visitor-keys": "4.31.0",
         "debug": "^4.3.1",
         "globby": "^11.0.3",
         "is-glob": "^4.0.1",
@@ -1294,12 +1316,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.2.tgz",
-      "integrity": "sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.0.tgz",
+      "integrity": "sha512-HUcRp2a9I+P21+O21yu3ezv3GEPGjyGiXoEUQwZXjR8UxRApGeLyWH4ZIIUSalE28aG4YsV6GjtaAVB3QKOu0w==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.29.2",
+        "@typescript-eslint/types": "4.31.0",
         "eslint-visitor-keys": "^2.0.0"
       },
       "engines": {
@@ -8030,6 +8052,16 @@
       "integrity": "sha512-Myxw//kzromB9yWgS8qYGuGVf91oBUUJpNvy5eM50sqvmKLbKjwLxohJnkWGTeeI9v9IBMtPLxz5Gc60FIfvCA==",
       "dev": true
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/json-schema": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
@@ -8074,14 +8106,25 @@
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
       "dev": true
     },
+    "@types/styled-components": {
+      "version": "5.1.14",
+      "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.14.tgz",
+      "integrity": "sha512-d6P1/tyNytqKwam3cQXq7a9uPtovc/mdAs7dBiz1YbDdNIT3X4WmuFU78YdSYh84TXVuhOwezZ3EeKuNBhwsHQ==",
+      "dev": true,
+      "requires": {
+        "@types/hoist-non-react-statics": "*",
+        "@types/react": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "@typescript-eslint/eslint-plugin": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.29.2.tgz",
-      "integrity": "sha512-x4EMgn4BTfVd9+Z+r+6rmWxoAzBaapt4QFqE+d8L8sUtYZYLDTK6VG/y/SMMWA5t1/BVU5Kf+20rX4PtWzUYZg==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.31.0.tgz",
+      "integrity": "sha512-iPKZTZNavAlOhfF4gymiSuUkgLne/nh5Oz2/mdiUmuZVD42m9PapnCnzjxuDsnpnbH3wT5s2D8bw6S39TC6GNw==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "4.29.2",
-        "@typescript-eslint/scope-manager": "4.29.2",
+        "@typescript-eslint/experimental-utils": "4.31.0",
+        "@typescript-eslint/scope-manager": "4.31.0",
         "debug": "^4.3.1",
         "functional-red-black-tree": "^1.0.1",
         "regexpp": "^3.1.0",
@@ -8116,28 +8159,28 @@
       }
     },
     "@typescript-eslint/experimental-utils": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.29.2.tgz",
-      "integrity": "sha512-P6mn4pqObhftBBPAv4GQtEK7Yos1fz/MlpT7+YjH9fTxZcALbiiPKuSIfYP/j13CeOjfq8/fr9Thr2glM9ub7A==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.31.0.tgz",
+      "integrity": "sha512-Hld+EQiKLMppgKKkdUsLeVIeEOrwKc2G983NmznY/r5/ZtZCDvIOXnXtwqJIgYz/ymsy7n7RGvMyrzf1WaSQrw==",
       "dev": true,
       "requires": {
         "@types/json-schema": "^7.0.7",
-        "@typescript-eslint/scope-manager": "4.29.2",
-        "@typescript-eslint/types": "4.29.2",
-        "@typescript-eslint/typescript-estree": "4.29.2",
+        "@typescript-eslint/scope-manager": "4.31.0",
+        "@typescript-eslint/types": "4.31.0",
+        "@typescript-eslint/typescript-estree": "4.31.0",
         "eslint-scope": "^5.1.1",
         "eslint-utils": "^3.0.0"
       }
     },
     "@typescript-eslint/parser": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.29.2.tgz",
-      "integrity": "sha512-WQ6BPf+lNuwteUuyk1jD/aHKqMQ9jrdCn7Gxt9vvBnzbpj7aWEf+aZsJ1zvTjx5zFxGCt000lsbD9tQPEL8u6g==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.31.0.tgz",
+      "integrity": "sha512-oWbzvPh5amMuTmKaf1wp0ySxPt2ZXHnFQBN2Szu1O//7LmOvgaKTCIDNLK2NvzpmVd5A2M/1j/rujBqO37hj3w==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "4.29.2",
-        "@typescript-eslint/types": "4.29.2",
-        "@typescript-eslint/typescript-estree": "4.29.2",
+        "@typescript-eslint/scope-manager": "4.31.0",
+        "@typescript-eslint/types": "4.31.0",
+        "@typescript-eslint/typescript-estree": "4.31.0",
         "debug": "^4.3.1"
       },
       "dependencies": {
@@ -8159,29 +8202,29 @@
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.29.2.tgz",
-      "integrity": "sha512-mfHmvlQxmfkU8D55CkZO2sQOueTxLqGvzV+mG6S/6fIunDiD2ouwsAoiYCZYDDK73QCibYjIZmGhpvKwAB5BOA==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.31.0.tgz",
+      "integrity": "sha512-LJ+xtl34W76JMRLjbaQorhR0hfRAlp3Lscdiz9NeI/8i+q0hdBZ7BsiYieLoYWqy+AnRigaD3hUwPFugSzdocg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.29.2",
-        "@typescript-eslint/visitor-keys": "4.29.2"
+        "@typescript-eslint/types": "4.31.0",
+        "@typescript-eslint/visitor-keys": "4.31.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.29.2.tgz",
-      "integrity": "sha512-K6ApnEXId+WTGxqnda8z4LhNMa/pZmbTFkDxEBLQAbhLZL50DjeY0VIDCml/0Y3FlcbqXZrABqrcKxq+n0LwzQ==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.31.0.tgz",
+      "integrity": "sha512-9XR5q9mk7DCXgXLS7REIVs+BaAswfdHhx91XqlJklmqWpTALGjygWVIb/UnLh4NWhfwhR5wNe1yTyCInxVhLqQ==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.29.2.tgz",
-      "integrity": "sha512-TJ0/hEnYxapYn9SGn3dCnETO0r+MjaxtlWZ2xU+EvytF0g4CqTpZL48SqSNn2hXsPolnewF30pdzR9a5Lj3DNg==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.0.tgz",
+      "integrity": "sha512-QHl2014t3ptg+xpmOSSPn5hm4mY8D4s97ftzyk9BZ8RxYQ3j73XcwuijnJ9cMa6DO4aLXeo8XS3z1omT9LA/Eg==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.29.2",
-        "@typescript-eslint/visitor-keys": "4.29.2",
+        "@typescript-eslint/types": "4.31.0",
+        "@typescript-eslint/visitor-keys": "4.31.0",
         "debug": "^4.3.1",
         "globby": "^11.0.3",
         "is-glob": "^4.0.1",
@@ -8216,12 +8259,12 @@
       }
     },
     "@typescript-eslint/visitor-keys": {
-      "version": "4.29.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.29.2.tgz",
-      "integrity": "sha512-bDgJLQ86oWHJoZ1ai4TZdgXzJxsea3Ee9u9wsTAvjChdj2WLcVsgWYAPeY7RQMn16tKrlQaBnpKv7KBfs4EQag==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.0.tgz",
+      "integrity": "sha512-HUcRp2a9I+P21+O21yu3ezv3GEPGjyGiXoEUQwZXjR8UxRApGeLyWH4ZIIUSalE28aG4YsV6GjtaAVB3QKOu0w==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.29.2",
+        "@typescript-eslint/types": "4.31.0",
         "eslint-visitor-keys": "^2.0.0"
       }
     },

package.json

@@ -23,8 +23,9 @@
     "@types/node": "^16.6.2",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
+    "@types/styled-components": "^5.1.14",
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
     "babel-plugin-styled-components": "^1.13.2",
     "eslint": "^7.32.0",
     "eslint-config-next": "11.1.0",

src/components/CodeBlocks/Css.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { ChromePicker } from 'react-color';
 import styled from 'styled-components';
 import shallow from 'zustand/shallow';
+import { breakpoints } from '../layout';
 import { rgbToString } from './Output';
 import { SectionTitle } from './SectionTitle';
 import SliderInput from './SliderInput';
@@ -17,7 +18,7 @@ export const CssControls: React.FC = () => {
   const { brightness, contrast } = filterProps;
   const { gradientType, color1, color2, angle, showTransparency, posX, posY } = cssProps;
 
-  const setValues = (key: string, value: any) => {
+  const setValues = (key: string, value: number | string | ColorType | boolean) => {
     const toSet = {
       gradientType,
       color1,
@@ -60,24 +61,27 @@ export const CssControls: React.FC = () => {
       </pre>
       <Form>
         <GradientControls>
-          <div>
-            <Form.Item label="Gradient type">
-              <Select
-                value={gradientType}
-                onChange={(v: string) => setValues('gradientType', v)}
-                style={{ width: 120 }}
-              >
-                <Select.Option value="linear">linear</Select.Option>
-                <Select.Option value="radial">radial</Select.Option>
-                <Select.Option value="conic">conic</Select.Option>
-              </Select>
-            </Form.Item>
-          </div>
+          <Form.Item label="Gradient type">
+            <Select
+              value={gradientType}
+              onChange={(v: string) => setValues('gradientType', v)}
+              style={{ width: 120 }}
+            >
+              <Select.Option value="linear">linear</Select.Option>
+              <Select.Option value="radial">radial</Select.Option>
+              <Select.Option value="conic">conic</Select.Option>
+            </Select>
+          </Form.Item>
           <ColorPick>
             <Popover
               placement="bottom"
               style={{ padding: 0 }}
-              content={<ChromePicker color={color1} onChange={(c) => setValues('color1', c.rgb)} />}
+              content={
+                <ChromePicker
+                  color={color1}
+                  onChange={(c: ChromePickerColor) => setValues('color1', c.rgb)}
+                />
+              }
               trigger="click"
             >
               <ColorAndButton>
@@ -89,7 +93,12 @@ export const CssControls: React.FC = () => {
           <ColorPick>
             <Popover
               placement="bottom"
-              content={<ChromePicker color={color2} onChange={(c) => setValues('color2', c.rgb)} />}
+              content={
+                <ChromePicker
+                  color={color2}
+                  onChange={(c: ChromePickerColor) => setValues('color2', c.rgb)}
+                />
+              }
               trigger="click"
             >
               <ColorAndButton>
@@ -143,18 +152,41 @@ export const CssControls: React.FC = () => {
   );
 };
 
+//https://casesandberg.github.io/react-color/
+type ChromePickerColor = {
+  hex: string;
+  rgb: {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+  };
+  hsl: {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+  };
+};
+
 const GradientControls = styled.div`
   display: flex;
+  @media screen and (max-width: ${breakpoints.md - 1}px) {
+    flex-direction: column;
+  }
 `;
 
 const ColorPick = styled.div`
   margin-left: 15px;
+  @media screen and (max-width: ${breakpoints.md - 1}px) {
+    margin: 10px 0;
+  }
 `;
 
 const ColorSample = styled.div`
   width: 30px;
   height: 30px;
-  background: linear-gradient(0, ${p=>p.color}, ${p=>p.color}), url(/checkers.png);
+  background: linear-gradient(0, ${(p) => p.color}, ${(p) => p.color}), url(/checkers.png);
   border-radius: 1px;
   cursor: pointer;
 `;

src/components/CodeBlocks/Output.tsx

@@ -80,14 +80,21 @@ const Container = styled.div`
 `;
 
 // prettier-ignore
-const Noise = styled.div`
-  width: ${p=>p.size}px;
-  height: ${p=>p.size}px;
-  background: url("data:image/svg+xml,${(p) => p.code.replace(symbols, encodeURIComponent)}");
+type NoiseProps = {
+  size: number,
+  code: string
+}
+const Noise = styled.div<NoiseProps>`
+  width: ${(p) => p.size}px;
+  height: ${(p) => p.size}px;
+  background: url('data:image/svg+xml,${(p) => p.code.replace(symbols, encodeURIComponent)}');
   box-shadow: rgb(50 50 93 / 23%) 0px 30px 60px -15px, rgb(0 0 0 / 32%) 0px 18px 36px -18px;
 `;
 
-const Gradient = styled.div`
+type GradientProps = {
+  css: string;
+};
+const Gradient = styled.div<GradientProps>`
   ${(p) => p.css}
   box-shadow: rgb(50 50 93 / 23%) 0px 30px 60px -15px, rgb(0 0 0 / 32%) 0px 18px 36px -18px;
 `;
@@ -106,6 +113,9 @@ const FilterShadow = styled.div`
   box-shadow: rgb(50 50 93 / 23%) 0px 30px 60px -15px, rgb(0 0 0 / 32%) 0px 18px 36px -18px;
 `;
 
-const Filter = styled.div`
-  ${(p: Record<string, string>) => p.css}
+type FilterProps = {
+  css: string;
+};
+const Filter = styled.div<FilterProps>`
+  ${(p) => p.css}
 `;

src/components/CodeBlocks/SliderInput.tsx

@@ -1,5 +1,6 @@
 import { Form, Slider, InputNumber } from 'antd';
 import styled from 'styled-components';
+import { breakpoints } from '~/components/layout';
 
 interface ISliderInput {
   label: string;
@@ -43,6 +44,9 @@ export default SliderInput;
 
 const SliderContainer = styled.div`
   width: 40%;
+  @media screen and (max-width: ${breakpoints.md - 1}px) {
+    width: 100%;
+  }
 `;
 
 const SliderAndInput = styled.div`

src/components/CopyToClipboard.tsx

@@ -63,7 +63,7 @@ async function copyClipboardApi(text: string) {
   return navigator.clipboard.writeText(text);
 }
 
-async function copyExecCommand(text: string) {
+function copyExecCommand(text: string) {
   // Put the text to copy into a <span>
   const span = document.createElement('span');
   span.textContent = text;
@@ -104,7 +104,7 @@ async function clipboardCopy(text: string) {
   } catch (err) {
     // ...Otherwise, use document.execCommand() fallback
     try {
-      await copyExecCommand(text);
+      copyExecCommand(text);
     } catch (err2) {
       throw err2 || err || makeError();
     }

src/components/layout/index.tsx

@@ -85,7 +85,7 @@ export const Space = styled.div<SpaceProps>`
 export const LeftCol = ({ children }) => (
   <Col
     off={{ xs: 0, sm: 0, md: 0, lg: 0, xl: 0, xxl: 0 }}
-    span={{ xs: 16, sm: 16, md: 16, lg: 16, xl: 16, xxl: 16 }}
+    span={{ xs: 24, sm: 16, md: 16, lg: 16, xl: 16, xxl: 16 }}
   >
     {children}
   </Col>
@@ -94,7 +94,7 @@ export const LeftCol = ({ children }) => (
 export const RightCol = ({ children }) => (
   <Col
     off={{ xs: 0, sm: 0, md: 0, lg: 0, xl: 0, xxl: 0 }}
-    span={{ xs: 8, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }}
+    span={{ xs: 24, sm: 8, md: 8, lg: 8, xl: 8, xxl: 8 }}
   >
     {children}
   </Col>

src/pages/index.tsx

@@ -5,6 +5,8 @@ import { SvgControls, CssControls, FilterControls, Reset } from '~/components/Co
 import Output from '~/components/CodeBlocks/Output';
 import { LinkOut } from '~/components/LinkOut';
 import { Row, LeftCol, Space, RightCol } from '~/components/layout';
+import { breakpoints } from '~/components/layout';
+
 const IndexPage = () => {
   return (
     <Container>
@@ -44,6 +46,9 @@ export default IndexPage;
 
 const Container = styled.div`
   height: 100vh;
+  @media screen and (max-width: ${breakpoints.md - 1}px) {
+    height: 100%;
+  }
 `;
 
 const Scroll = styled.div`
@@ -51,4 +56,10 @@ const Scroll = styled.div`
   overflow-y: scroll;
   padding: 0 ${(2 / 24) * 100}%;
   background-color: #e2e2e2;
+  @media screen and (max-width: ${breakpoints.md - 1}px) {
+    padding: 0 ${(1 / 24) * 100}%;
+
+    height: 100%;
+    overflow-y: unset;
+  }
 `;

src/styles/globals.css

@@ -38,4 +38,10 @@ h2 {
 }
 ::-moz-selection {
   background: lightblue; /* Gecko Browsers */
+}
+
+@media screen and (max-width: 767px) {
+  .ant-form-item-label {
+    padding-bottom: 0 !important;
+  }
 }