From 1da8c08c747a4d6ead5bd134863fad799dfdd419 Mon Sep 17 00:00:00 2001
From: J M Rossy <jm.rossy@gmail.com>
Date: Sun, 11 Sep 2022 19:09:30 -0400
Subject: [PATCH] Improve mobile responsiveness for message summary

---
 src/components/icons/ChainIcon.tsx     |  5 +--
 src/components/icons/ChainToChain.tsx  | 13 ++++++--
 src/features/search/MessageSearch.tsx  |  4 +--
 src/features/search/MessageSummary.tsx |  4 +--
 src/styles/mediaQueries.ts             | 45 ++++++++++++++++++++++++++
 tailwind.config.js                     | 11 +++++--
 6 files changed, 71 insertions(+), 11 deletions(-)
 create mode 100644 src/styles/mediaQueries.ts

diff --git a/src/components/icons/ChainIcon.tsx b/src/components/icons/ChainIcon.tsx
index 7b885d2..c553395 100644
--- a/src/components/icons/ChainIcon.tsx
+++ b/src/components/icons/ChainIcon.tsx
@@ -35,6 +35,7 @@ function _ChainIcon({
   size?: number;
 }) {
   const imageSrc = (chainId && CHAIN_TO_ICON[chainId]) || QuestionMark;
+
   return (
     <div
       style={{ width: `${size}px`, height: `${size}px` }}
@@ -44,8 +45,8 @@ function _ChainIcon({
       <Image
         src={imageSrc}
         alt={`chain-${chainId}`}
-        width={size / 2.2}
-        height={size / 2.2}
+        width={Math.floor(size / 2.2)}
+        height={Math.floor(size / 2.2)}
       />
     </div>
   );
diff --git a/src/components/icons/ChainToChain.tsx b/src/components/icons/ChainToChain.tsx
index 80074fa..f7bc8a2 100644
--- a/src/components/icons/ChainToChain.tsx
+++ b/src/components/icons/ChainToChain.tsx
@@ -2,22 +2,31 @@ import Image from 'next/future/image';
 import { memo } from 'react';
 
 import ArrowRightIcon from '../../images/icons/arrow-right-short.svg';
+import { useIsMobile } from '../../styles/mediaQueries';
 
 import { ChainIcon } from './ChainIcon';
 
 function _ChainToChain({
   originChainId,
   destinationChainId,
-  size,
+  size = 44,
+  arrowSize = 32,
 }: {
   originChainId: number;
   destinationChainId: number;
   size?: number;
+  arrowSize?: number;
 }) {
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    size = Math.floor(size * 0.8);
+    arrowSize = Math.floor(arrowSize * 0.8);
+  }
+
   return (
     <div className="flex items-center justify-center sm:space-x-1 md:space-x-2">
       <ChainIcon chainId={originChainId} size={size} />
-      <Image src={ArrowRightIcon} width={32} height={32} />
+      <Image src={ArrowRightIcon} width={arrowSize} height={arrowSize} />
       <ChainIcon chainId={destinationChainId} size={size} />
     </div>
   );
diff --git a/src/features/search/MessageSearch.tsx b/src/features/search/MessageSearch.tsx
index c24715b..57c75d9 100644
--- a/src/features/search/MessageSearch.tsx
+++ b/src/features/search/MessageSearch.tsx
@@ -106,13 +106,13 @@ export function MessageSearch() {
           <h2 className="text-gray-500 black-shadow">
             {!hasInput ? 'Latest Messages' : 'Search Results'}
           </h2>
-          <div className="flex items-center space-x-2 md:space-x-3">
+          <div className="flex items-center space-x-1 sm:space-x-2 md:space-x-3">
             <div className="w-px h-8 bg-gray-100"></div>
             <Image
               src={FunnelIcon}
               width={22}
               height={22}
-              className="opacity-50"
+              className="hidden sm:block opacity-50"
             />
             <SelectField
               classes="w-24 md:w-32"
diff --git a/src/features/search/MessageSummary.tsx b/src/features/search/MessageSummary.tsx
index cc0d397..5505fc2 100644
--- a/src/features/search/MessageSummary.tsx
+++ b/src/features/search/MessageSummary.tsx
@@ -28,7 +28,7 @@ export function MessageSummary({ message }: { message: MessageStub }) {
 
   return (
     <Link href={`/message/${id}`}>
-      <a className="flex items-center justify-between space-x-5 sm:space-x-12 md:space-x-16">
+      <a className="flex items-center justify-between space-x-4 xs:space-x-9 sm:space-x-12 md:space-x-16">
         <ChainToChain
           originChainId={originChainId}
           destinationChainId={destinationChainId}
@@ -46,7 +46,7 @@ export function MessageSummary({ message }: { message: MessageStub }) {
               {shortenAddress(recipient) || 'Invalid Address'}
             </div>
           </div>
-          <div className={styles.valueContainer + ' w-28'}>
+          <div className={styles.valueContainer + ' sm:w-28'}>
             <div className={styles.label}>Time sent</div>
             <div className={styles.value}>
               {getHumanReadableTimeString(timestamp)}
diff --git a/src/styles/mediaQueries.ts b/src/styles/mediaQueries.ts
new file mode 100644
index 0000000..03da3ee
--- /dev/null
+++ b/src/styles/mediaQueries.ts
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+
+interface WindowSize {
+  width?: number;
+  height?: number;
+}
+
+// From https://usehooks.com/useWindowSize/
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState<WindowSize>({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    // Handler to call on window resize
+    const handleResize = () => {
+      // Set window width/height to state
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    // Add event listener
+    window.addEventListener('resize', handleResize);
+    // Remove event listener on cleanup
+    return () => window.removeEventListener('resize', handleResize);
+  }, []); // Empty array ensures that effect is only run on mount
+
+  return windowSize;
+}
+
+export function isWindowSizeMobile(windowWidth: number | undefined) {
+  return !!(windowWidth && windowWidth < 768);
+}
+
+export function isWindowSizeSmallMobile(windowWidth: number | undefined) {
+  return !!(windowWidth && windowWidth < 360);
+}
+
+export function useIsMobile() {
+  const windowSize = useWindowSize();
+  return isWindowSizeMobile(windowSize.width);
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 926d840..2576035 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 
-const colors = require('tailwindcss/colors');
+const defaultTheme = require('tailwindcss/defaultTheme')
+
 
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
@@ -10,6 +11,10 @@ module.exports = {
       serif: ['Garamond', 'serif'],
       mono: ['Courier New', 'monospace'],
     },
+    screens: {
+      xs: '480px',
+      ...defaultTheme.screens,
+    },
     extend: {
       colors: {
         black: '#010101',
@@ -62,7 +67,7 @@ module.exports = {
         },
       },
       fontSize: {
-        'md': '0.95rem'
+        md: '0.95rem',
       },
       spacing: {
         88: '22rem',
@@ -81,7 +86,7 @@ module.exports = {
       },
       blur: {
         xs: '3px',
-      }
+      },
     },
   },
   plugins: [],