From 8e962087cc2dcacc9915e51c1587c324641b05a4 Mon Sep 17 00:00:00 2001
From: Rohit Singh <rohit14kvs@gmail.com>
Date: Sat, 30 Jul 2022 18:25:46 +0530
Subject: [PATCH 1/2] Added responsiveness

---
 src/App.css                       | 21 +++++++++++++++++++--
 src/App.js                        |  4 ++--
 src/Components/ParsedContainer.js |  2 +-
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/App.css b/src/App.css
index e83eef6..3b48026 100644
--- a/src/App.css
+++ b/src/App.css
@@ -48,6 +48,7 @@
   font-size: 1.5em;
   width: 100%;
   max-width: 100%;
+  flex-wrap: wrap;
 }
 .parsed-container {
   display: flex;
@@ -70,6 +71,7 @@
   /* max-width: calc(100% / 4); */
   /* flex-grow: 1; */
   text-overflow: ellipsis;
+  min-width: fit-content;
 }
 
 .defaults {
@@ -215,13 +217,19 @@
 .copy-icon {
   width: 24px;
   height: 24px;
-  pointerevents: none;
+  pointer-events: none;
 }
 .param-container:hover .copy-btn {
   opacity: 1;
   bottom: 4rem;
 }
 
+@media (max-width: 1288px) {
+  .pasted-url {
+    gap: 4rem;
+  }
+}
+
 @media (max-width: 720px) {
   .robot-container,
   .github-link {
@@ -234,7 +242,7 @@
     display: none;
   }
   .url-empty {
-    display: none;
+    font-size: 2rem;
   }
   .mobile-msg {
     display: block;
@@ -248,4 +256,13 @@
   .robot-text {
     display: none;
   }
+  .param-container {
+    min-width: auto;
+  }
+}
+
+@media (max-width: 420px) {
+  .url-empty {
+    font-size: 1.2rem;
+  }
 }
diff --git a/src/App.js b/src/App.js
index c9523de..90537ea 100644
--- a/src/App.js
+++ b/src/App.js
@@ -95,7 +95,7 @@ function App() {
     return () => {
       window.removeEventListener("keydown", keyDownHandler);
     };
-  }, []);
+  }, [keyDownHandler]);
 
   useEffect(() => {
     if (url.startsWith("http")) {
@@ -165,7 +165,7 @@ function App() {
       ) : (
         <div>
           <div className="url-empty">Paste any URL on this page</div>
-          <div className="mobile-msg">Works on desktop only</div>
+          {/* <div className="mobile-msg">Works on desktop only</div> */}
         </div>
       )}
       <div className="robot-container">
diff --git a/src/Components/ParsedContainer.js b/src/Components/ParsedContainer.js
index 52edff6..7051411 100644
--- a/src/Components/ParsedContainer.js
+++ b/src/Components/ParsedContainer.js
@@ -45,7 +45,7 @@ export const ParsedContainer = ({ parsed, robotParam, paramCount }) => {
       <motion.div
         className="pasted-url"
         initial={{ gap: 0 }}
-        animate={{ gap: "3rem" }}
+        animate={{ gap: "4rem" }}
         transition={{ delay: 0.5 }}
       >
         {parameters.map((param) => {

From e93588189e212d7866fe387bc6692b1fc6da3975 Mon Sep 17 00:00:00 2001
From: Rohit Singh <rohit14kvs@gmail.com>
Date: Sat, 30 Jul 2022 18:57:04 +0530
Subject: [PATCH 2/2] Added media-query hook

---
 src/App.css                       | 36 +++++++++++++++----------------
 src/Components/ParsedContainer.js |  5 +++--
 src/hooks/MediaQuery.js           | 18 ++++++++++++++++
 3 files changed, 38 insertions(+), 21 deletions(-)
 create mode 100644 src/hooks/MediaQuery.js

diff --git a/src/App.css b/src/App.css
index 3b48026..db2abfc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -149,10 +149,12 @@
 .robot-container {
   /* left: 0; */
   display: flex;
+  margin: 0 1rem 1rem 1rem;
 }
 .robot-text-container {
-  width: 50ch;
+  /* width: 50ch; */
   align-self: center;
+  width: fit-content;
 }
 .robot-text {
   /* width: max-content; */
@@ -224,14 +226,7 @@
   bottom: 4rem;
 }
 
-@media (max-width: 1288px) {
-  .pasted-url {
-    gap: 4rem;
-  }
-}
-
 @media (max-width: 720px) {
-  .robot-container,
   .github-link {
     opacity: 0;
   }
@@ -239,28 +234,31 @@
     align-self: center;
   }
   .robot-container img {
-    display: none;
+    width: 100px;
+    height: 100px;
+  }
+  .robot-text {
+    padding: 0.5rem;
   }
   .url-empty {
     font-size: 2rem;
   }
-  .mobile-msg {
-    display: block;
-    font-size: 1.5rem;
-    font-weight: bold;
-    opacity: 0.5;
-  }
   .app-header {
     font-size: 1.5rem;
   }
-  .robot-text {
-    display: none;
-  }
   .param-container {
     min-width: auto;
   }
 }
-
+@media (max-width: 480px) {
+  .robot-container img {
+    display: none;
+  }
+  .robot-text {
+    font-size: 0.8rem;
+    margin-bottom: 1rem;
+  }
+}
 @media (max-width: 420px) {
   .url-empty {
     font-size: 1.2rem;
diff --git a/src/Components/ParsedContainer.js b/src/Components/ParsedContainer.js
index 7051411..c2948b6 100644
--- a/src/Components/ParsedContainer.js
+++ b/src/Components/ParsedContainer.js
@@ -1,9 +1,10 @@
 // import { ArcherContainer, ArcherElement } from "react-archer";
 import { useState } from "react";
 import { motion } from "framer-motion";
-
+import { useMediaQuery } from "../hooks/MediaQuery";
 export const ParsedContainer = ({ parsed, robotParam, paramCount }) => {
   const [isCopied, setIsCopied] = useState(false);
+  const isSmall = useMediaQuery("(max-width: 1300px)");
   const parameters = [
     "protocol",
     "hostname",
@@ -45,7 +46,7 @@ export const ParsedContainer = ({ parsed, robotParam, paramCount }) => {
       <motion.div
         className="pasted-url"
         initial={{ gap: 0 }}
-        animate={{ gap: "4rem" }}
+        animate={{ gap: isSmall ? "5rem" : "3rem" }}
         transition={{ delay: 0.5 }}
       >
         {parameters.map((param) => {
diff --git a/src/hooks/MediaQuery.js b/src/hooks/MediaQuery.js
new file mode 100644
index 0000000..65960ac
--- /dev/null
+++ b/src/hooks/MediaQuery.js
@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+export function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => {
+      setMatches(media.matches);
+    };
+    media.addListener(listener);
+    return () => media.removeListener(listener);
+  }, [matches, query]);
+
+  return matches;
+}