chore: fix responsive comments on github

rango-exchange · Dec 13, 2023 · 67a0e3f · 67a0e3f
1 parent ae48954
commit 67a0e3f
Show file tree

Hide file tree

Showing 25 changed files with 159 additions and 210 deletions.
diff --git a/components/common/Footer/ListItem.tsx b/components/common/Footer/ListItem.tsx
@@ -4,7 +4,7 @@ import { ListItemProps } from './Footer.type';
 function ListItem(props: ListItemProps) {
   const { title, openInNewTab, location, icon: Icon } = props;
   return (
-    <li className="item-center flex pb-2.5 text-12 md:text-16 md:font-medium	leading-[0.8rem] text-neutral-200 lg:text-16 lg:leading-5	">
+    <li className="item-center flex pb-2.5 text-12 md:text-16 md:font-medium	leading-[0.8rem] text-neutral-200 md:text-16 md:leading-5	">
       {Icon && <Icon className="text-neutral-200" />}
       <Link
         target={openInNewTab ? '_blank' : '_self'}

diff --git a/components/common/Footer/index.tsx b/components/common/Footer/index.tsx
@@ -23,9 +23,9 @@ function Footer() {
       </div>
       <div className="w-full bg-baseBackground pt-40 md:pt-[100px]">
         <div className="relative w-full bg-footer-mask bg-contain bg-right-bottom bg-no-repeat pb-16 md:bg-[right_1.5rem]">
-          <div className="mx-auto flex container  flex-col justify-between px-30 lg:flex-row lg:px-0">
-            <div className="mb-10 text-left lg:mb-0 lg:max-w-[19.4375rem]">
-              <h3 className="mb-3.5 text-left text-16 md:text-22	font-medium text-baseForeground lg:text-[1.1rem] lg:leading-[1.4rem]">
+          <div className="mx-auto flex container  flex-col justify-between px-30 md:flex-row md:px-0">
+            <div className="mb-10 text-left md:mb-0 md:max-w-[19.4375rem]">
+              <h3 className="mb-3.5 text-left text-16 md:text-22	font-medium text-baseForeground md:text-[1.1rem] md:leading-[1.4rem]">
                 About Rango
               </h3>
               <p className="w-full text-12 md:text-16 font-medium leading-[1.5rem] text-neutral-200	">
@@ -37,7 +37,7 @@ function Footer() {
             </div>
             <div className="grid grid-cols-2 md:flex md:w-[50%] md:justify-around mt-40 md:mt-0 md:mb-10">
               <div>
-                <h3 className="mb-3 text-left text-14 md:text-22 font-medium	text-baseForeground	lg:mb-3.5 lg:text-[1.1rem] lg:leading-[1.4rem]">
+                <h3 className="mb-3 text-left text-14 md:text-22 font-medium	text-baseForeground	md:mb-3.5 md:text-[1.1rem] md:leading-[1.4rem]">
                   Products
                 </h3>
                 <ul className="w-full">
@@ -47,7 +47,7 @@ function Footer() {
                 </ul>
               </div>
               <div className="mb-10">
-                <h3 className="mb-3 text-left text-14 md:text-22 font-medium	text-baseForeground	lg:mb-3.5 lg:leading-[1.4rem]">
+                <h3 className="mb-3 text-left text-14 md:text-22 font-medium	text-baseForeground	md:mb-3.5 md:leading-[1.4rem]">
                   Documentation
                 </h3>
                 <ul className="w-full">
@@ -58,7 +58,7 @@ function Footer() {
               </div>
             </div>
             <div>
-              <h3 className="mb-3 text-left mt-25 md:mt-0 text-14 md:text-22 font-medium	text-baseForeground	lg:mb-3.5  lg:leading-[1.4rem]">
+              <h3 className="mb-3 text-left mt-25 md:mt-0 text-14 md:text-22 font-medium	text-baseForeground	md:mb-3.5  md:leading-[1.4rem]">
                 Social Media
               </h3>
               <ul className="w-full">

diff --git a/components/common/Navbar/DesktopNavbar.tsx b/components/common/Navbar/DesktopNavbar.tsx
@@ -13,13 +13,13 @@ function DesktopNavbar(props: DeviceProps) {
   return (
     <div
       className={
-        'py-30 relative z-50 hidden h-full w-full items-center justify-between font-medium xl:flex xl:text-[1.35vw]' +
+        'py-30 relative z-50 hidden h-full w-full items-center justify-between font-medium md:flex md:text-[1.35vw]' +
         className
       }
       onMouseLeave={() => setShowSubMenu(0)}>
       {renderChildren ? (
         <>
-          <Link className="relative w-[3.8rem] lg:w-[7.7rem]" href="/">
+          <Link className="relative w-[3.8rem] md:w-[7.7rem]" href="/">
             <Image
               src={theme === 'dark' ? coloredLogo : rangoLogo}
               alt="Rango logo"

diff --git a/components/common/Navbar/MobileNavbar.tsx b/components/common/Navbar/MobileNavbar.tsx
@@ -30,7 +30,7 @@ function MobileNavbar(props: DeviceProps) {
   return (
     <div
       className={
-        'relative z-[200] flex h-full w-full items-center justify-between py-30 font-thin xl:hidden xl:text-[1.35vw]' +
+        'relative z-[200] flex h-full w-full items-center justify-between py-30 font-thin md:hidden md:text-[1.35vw]' +
         className
       }>
       {renderChildren ? (

diff --git a/components/common/Navbar/index.tsx b/components/common/Navbar/index.tsx
@@ -14,9 +14,9 @@ function Navbar(props: NavbarProps) {
       } items-center justify-center`}>
       <div
         className={
-          'container flex w-full  items-center justify-center px-25  text-baseForeground xl:md-0'
+          'container flex w-full  items-center justify-center px-25  text-baseForeground md:md-0'
         }>
-        <Media between={['xs', 'xl']}>
+        <Media between={['xs', 'md']}>
           {(className, renderChildren) => (
             <MobileNavbar
               theme={theme}
@@ -26,7 +26,7 @@ function Navbar(props: NavbarProps) {
             />
           )}
         </Media>
-        <Media greaterThanOrEqual="xl">
+        <Media greaterThanOrEqual="md">
           {(className, renderChildren) => (
             <DesktopNavbar
               theme={theme}

diff --git a/components/common/Table/TableBody.tsx b/components/common/Table/TableBody.tsx
@@ -3,14 +3,12 @@ import { TableBodyProps } from './Table.type';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { columns } from './Table.helper';
-import isMobile from 'is-mobile';
 import Link from 'next/link';
 
 dayjs.extend(utc);
 
 function TableBody(props: TableBodyProps) {
   const { data } = props;
-  const IsMobile = isMobile();
   return (
     <div className="w-full">
       {data.map((item) => {
@@ -25,13 +23,12 @@ function TableBody(props: TableBodyProps) {
                 <CellComponent key={col.id} column={col} swapItem={item} />
               ) : null;
             })}
-            {IsMobile && (
-              <Link
-                href={`/swap/${requestId}`}
-                className="w-full text-center rounded-micro mt-30 border border-primary-600 py-10 text-primary-600 text-16 font-semibold">
-                Detail
-              </Link>
-            )}
+
+            <Link
+              href={`/swap/${requestId}`}
+              className={`w-full md:hidden text-center rounded-micro mt-30 border border-primary-600 py-10 text-primary-600 text-16 font-semibold`}>
+              Detail
+            </Link>
           </div>
         );
       })}

diff --git a/components/common/Table/TableHead.tsx b/components/common/Table/TableHead.tsx
@@ -2,10 +2,10 @@ import { columns } from './Table.helper';
 
 function TableHead() {
   return (
-    <div className="w-full grid grid-cols-11  bg-surfacesBackground">
+    <div className="w-full hidden md:grid  md:grid-cols-11  bg-surfacesBackground">
       {columns.map((col, index) => (
         <div
-          className={`text-14 font-medium px-20 py-30 text-primary-500 col-span-${
+          className={`text-14 font-medium px-15 lg:px-20 py-20 lg:py-30 text-primary-500 col-span-${
             index === 0 ? 3 : 2
           }`}
           key={`head-${col.id}`}>

diff --git a/components/common/Table/cells/AmountCell.tsx b/components/common/Table/cells/AmountCell.tsx
@@ -1,7 +1,6 @@
 import { GassIcon } from 'components/icons';
 import { CellProps } from '../Table.type';
 import { getPercentageChange } from 'utils/amountConverter';
-import isMobile from 'is-mobile';
 
 function AmountCell(props: CellProps) {
   const { swapItem, column } = props;
@@ -25,13 +24,11 @@ function AmountCell(props: CellProps) {
     return acc;
   }, 0);
 
-  const IsMobile = isMobile();
-
   return (
-    <div className="flex flex-col md:col-span-2 justify-center items-start md:p-20 ">
-      {IsMobile && (
-        <div className="text-12 mt-10 text-primary-500">{column.title}</div>
-      )}
+    <div className="flex flex-col md:col-span-2 justify-center items-start md:p-15 lg:p-20 ">
+      <div className="md:hidden text-12 mt-10 text-primary-500">
+        {column.title}
+      </div>
       <div className="text-14 md:text-16 text-neutral-400 md:mb-5 flex items-center">
         <span className="mr-5">
           {usdToAmount && `~$${usdToAmount.toFixed(2)}`}

diff --git a/components/common/Table/cells/RequestIDCell.tsx b/components/common/Table/cells/RequestIDCell.tsx
@@ -3,7 +3,6 @@ import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { CellProps } from '../Table.type';
 import ButtonCopyIcon from 'components/common/ButtonCopyIcon';
-import isMobile from 'is-mobile';
 
 dayjs.extend(utc);
 
@@ -12,17 +11,14 @@ function RequestIDCell(props: CellProps) {
   const { requestId, transactionTime } = swapItem;
 
   const router = useRouter();
-  const IsMobile = isMobile();
 
   const handleSwapDetails = (id: string) => {
     router.push(`/swap/${id}`);
   };
 
   return (
-    <div className="flex flex-col md:col-span-3 items-start md:p-20">
-      {IsMobile && (
-        <div className="text-12 text-primary-500">{column.title}</div>
-      )}
+    <div className="flex flex-col md:col-span-3 items-start md:p-15 lg:p-20">
+      <div className="text-12 md:hidden text-primary-500">{column.title}</div>
       <div className="flex justify-center items-center md:mb-5">
         <button
           className="text-14 md:text-16 text-primary-500 mr-5 hover:underline hover:text-secondary-500"

diff --git a/components/common/Table/cells/StatusCell.tsx b/components/common/Table/cells/StatusCell.tsx
@@ -1,7 +1,6 @@
 import { StepsIcon } from 'components/icons';
 import { CellProps } from '../Table.type';
 import IconStatus from 'components/common/IconStatus';
-import isMobile from 'is-mobile';
 
 function StatusCell(props: CellProps) {
   const { swapItem, column } = props;
@@ -10,13 +9,11 @@ function StatusCell(props: CellProps) {
     (item) => item.status === 'success',
   ).length;
 
-  const IsMobile = isMobile();
-
   return (
-    <div className="flex flex-col col-span-2 justify-center md:p-20">
-      {IsMobile && (
-        <div className="text-12 mt-25 text-primary-500">{column.title}</div>
-      )}
+    <div className="flex flex-col col-span-2 justify-center md:p-15 lg:p-20">
+      <div className="md:hidden text-12 mt-25 text-primary-500">
+        {column.title}
+      </div>
       <div className="flex items-center">
         <IconStatus status={status} hasTitle />
       </div>

diff --git a/components/common/Table/cells/TokenCell.tsx b/components/common/Table/cells/TokenCell.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @next/next/no-img-element */
-import isMobile from 'is-mobile';
 import { CellProps } from '../Table.type';
 
 function TokenCell(props: CellProps) {
@@ -17,31 +16,25 @@ function TokenCell(props: CellProps) {
   const amount = token?.realAmount ? token.realAmount : token?.expectedAmount;
 
   const { blockchain, blockchainLogo, logo, name, symbol } = token || {};
-  const IsMobile = isMobile();
 
   return (
     <>
-      {IsMobile &&
-        (column.tokenType === 'source' ? (
-          <div className="mt-10"></div>
-        ) : (
-          <div className="ml-[0.875rem] h-[10px] border-l border-neutral-400"></div>
-        ))}
-      <div className="flex md:col-span-2 items-start md:items-center md:p-20">
-        <div className="relative mr-10">
+      {column.tokenType === 'source' ? (
+        <div className="md:hidden mt-10"></div>
+      ) : (
+        <div className="md:hidden ml-[0.875rem] h-[10px] border-l border-neutral-400"></div>
+      )}
+      <div className="flex md:col-span-2 items-start md:items-center md:p-15 lg:p-20">
+        <div className="relative mr-10 shrink-0">
           <img
             src={logo}
             alt={name || symbol}
-            className="rounded-full"
-            width={IsMobile ? 27 : 30}
-            height={IsMobile ? 27 : 30}
+            className="rounded-full w-[27px] md:w-[30px] h-[27px] md:h-[30px]"
           />
           <img
             src={blockchainLogo}
-            width={IsMobile ? 12 : 15}
-            height={IsMobile ? 12 : 15}
             alt={blockchain}
-            className="absolute rounded-full right-[-2px] bottom-[-2px] md:right-[-3px] md:bottom-[-3px]"
+            className="absolute rounded-full w-[12px] md:w-[15px] h-[12px] md:h-[15px] right-[-2px] bottom-[-2px] md:right-[-3px] md:bottom-[-3px]"
           />
         </div>
         <div className="flex flex-col items-start justify-center">

diff --git a/components/common/Table/index.tsx b/components/common/Table/index.tsx
@@ -1,14 +1,12 @@
 import { TableProps } from './Table.type';
 import TableHead from './TableHead';
 import TableBody from './TableBody';
-import isMobile from 'is-mobile';
 
 function Table(props: TableProps) {
   const { data } = props;
-  const IsMobile = isMobile();
   return (
     <div className="w-full">
-      {!IsMobile && <TableHead />}
+      <TableHead />
       <TableBody data={data} />
     </div>
   );

diff --git a/components/common/media.tsx b/components/common/media.tsx
@@ -1,7 +1,7 @@
 import { createMedia } from '@artsy/fresnel';
 
 const ExampleAppMedia = createMedia({
-  breakpoints: { xs: 0, sm: 640, md: 768, lg: 1024, xl: 1180 },
+  breakpoints: { xs: 0, sm: 640, md: 1024, lg: 1280 },
 });
 
 export const mediaStyles = ExampleAppMedia.createMediaStyle();