From 1a96011df0cdc2caf66cac61d886cedcd0d53b13 Mon Sep 17 00:00:00 2001 From: Nikolai Kryshnev Date: Tue, 10 Dec 2024 23:17:58 +0300 Subject: [PATCH 1/7] Fix: Ensure proper tooltip rendering on mobile devices --- src/pages/_app.tsx | 1 + src/styles/custom.css | 4 ++++ 2 files changed, 5 insertions(+) create mode 100644 src/styles/custom.css diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 6da208f..8ab4155 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -12,6 +12,7 @@ import { AppLayout } from '../AppLayout'; import { ErrorBoundary } from '../components/errors/ErrorBoundary'; import { config } from '../consts/config'; import { ChainConfigSyncer } from '../features/chains/ChainConfigSyncer'; +import '../styles/custom.css'; import { MAIN_FONT } from '../styles/fonts'; import '../styles/global.css'; diff --git a/src/styles/custom.css b/src/styles/custom.css new file mode 100644 index 0000000..5c58693 --- /dev/null +++ b/src/styles/custom.css @@ -0,0 +1,4 @@ +/* Fix for tooltips breaking layout on mobile devices (<526px width). */ + + +@media (max-width: 526px) {#gas-info, #transaction-info, #message-info{max-width: calc(100% - 10px);}} \ No newline at end of file From f52207d9bd5636816ff5c373fa8e3e60f27ffb14 Mon Sep 17 00:00:00 2001 From: Nikolai Kryshnev Date: Tue, 10 Dec 2024 23:29:03 +0300 Subject: [PATCH 2/7] Enhance button visibility with a hover effect (pink to blue transition). --- src/components/search/MiniSearchBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/search/MiniSearchBar.tsx b/src/components/search/MiniSearchBar.tsx index 3bb73cb..39c94ff 100644 --- a/src/components/search/MiniSearchBar.tsx +++ b/src/components/search/MiniSearchBar.tsx @@ -31,7 +31,7 @@ export function MiniSearchBar() { placeholder="Hash or address" className="h-8 w-32 rounded-full px-2.5 py-2 text-sm font-light transition-[width] duration-500 ease-in-out placeholder:text-gray-600 focus:w-64 focus:outline-none" /> -
+
From 4d0a793cace64295fde028f8b0393b9412048651 Mon Sep 17 00:00:00 2001 From: Nikolai Kryshnev Date: Tue, 10 Dec 2024 23:32:35 +0300 Subject: [PATCH 3/7] Replace Twitter links with X branding --- src/consts/links.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/consts/links.ts b/src/consts/links.ts index 1e290f0..8155ca0 100644 --- a/src/consts/links.ts +++ b/src/consts/links.ts @@ -4,7 +4,7 @@ export const links = { discord: 'https://discord.gg/VK9ZUy3aTV', github: 'https://github.com/hyperlane-xyz', jobs: 'https://jobs.lever.co/Hyperlane', - twitter: 'https://twitter.com/hyperlane', + twitter: 'https://x.com/hyperlane', blog: 'https://medium.com/hyperlane', tenderlySimDocs: 'https://docs.tenderly.co/simulations-and-forks/how-to-simulate-a-transaction/using-simulation-ui', From 089de8d43b3170cc1656837966e1439202c86484 Mon Sep 17 00:00:00 2001 From: Nikolai Kryshnev Date: Tue, 10 Dec 2024 23:41:56 +0300 Subject: [PATCH 4/7] Update Twitter names to X branding --- src/components/nav/Footer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nav/Footer.tsx b/src/components/nav/Footer.tsx index c2f154e..9d2f06a 100644 --- a/src/components/nav/Footer.tsx +++ b/src/components/nav/Footer.tsx @@ -23,7 +23,7 @@ const footerLinks2 = [ ]; const footerLinks3 = [ - { title: 'Twitter', url: links.twitter, external: true, icon: }, + { title: 'X', url: links.twitter, external: true, icon: }, { title: 'Discord', url: links.discord, external: true, icon: }, { title: 'Github', url: links.github, external: true, icon: }, ]; From 36136a54444236b32b60a97d5ae323e17152ddd0 Mon Sep 17 00:00:00 2001 From: Nikolai Kryshnev Date: Wed, 11 Dec 2024 00:27:57 +0300 Subject: [PATCH 5/7] Fixed: Button now covers parent area for intuitive usability and includes a noticeable hover effect. --- src/components/search/SearchBar.tsx | 30 ++++++++++++++++++++++------- 1 file changed, 23 insertions(+), 7 deletions(-) diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index d79aecd..eafa9aa 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -19,6 +19,9 @@ export function SearchBar({ value, placeholder, onChangeValue, isFetching }: Pro onChangeValue(value); }; + const iconStyle = + 'flex h-10 w-10 items-center justify-center rounded-full bg-pink-600 sm:h-12 sm:w-12'; + return (
-
- {isFetching && } - {!isFetching && !value && } - {!isFetching && value && ( - onChange(null)}> + + {isFetching && ( +
+ +
+ )} + {!isFetching && !value && ( +
+ +
+ )} + {!isFetching && value && ( +
+ onChange(null)} + > - )} -
+
+ )}
); } From b24c039f663c3e696639fa3dc5bdf74185be4083 Mon Sep 17 00:00:00 2001 From: NikolaiKryshnev <63440682+NikolaiKryshnev@users.noreply.github.com> Date: Wed, 11 Dec 2024 19:47:05 +0300 Subject: [PATCH 6/7] refactor: move iconStyle to styles object at the bottom of SearchBar.tsx --- src/components/search/SearchBar.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index eafa9aa..bdf520f 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -18,10 +18,7 @@ export function SearchBar({ value, placeholder, onChangeValue, isFetching }: Pro const value = event?.target?.value || ''; onChangeValue(value); }; - - const iconStyle = - 'flex h-10 w-10 items-center justify-center rounded-full bg-pink-600 sm:h-12 sm:w-12'; - + return (
); } +const iconStyle = 'flex h-10 w-10 items-center justify-center rounded-full bg-pink-600 sm:h-12 sm:w-12'; From 419122168d80b1eee743cc04c6abbf6dd8b4c25d Mon Sep 17 00:00:00 2001 From: Nikolai Kryshnev Date: Fri, 13 Dec 2024 20:36:31 +0300 Subject: [PATCH 7/7] Refactor tooltip styles: use `data-tooltip-class-name` and fix formatting --- src/features/messages/cards/ContentDetailsCard.tsx | 1 + src/features/messages/cards/GasDetailsCard.tsx | 1 + src/features/messages/cards/TransactionCard.tsx | 6 +++++- src/pages/_app.tsx | 1 - src/styles/custom.css | 4 ---- 5 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 src/styles/custom.css diff --git a/src/features/messages/cards/ContentDetailsCard.tsx b/src/features/messages/cards/ContentDetailsCard.tsx index eeae51f..3025363 100644 --- a/src/features/messages/cards/ContentDetailsCard.tsx +++ b/src/features/messages/cards/ContentDetailsCard.tsx @@ -75,6 +75,7 @@ export function ContentDetailsCard({
diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx index 54b5691..616cd09 100644 --- a/src/features/messages/cards/GasDetailsCard.tsx +++ b/src/features/messages/cards/GasDetailsCard.tsx @@ -82,6 +82,7 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) {
diff --git a/src/features/messages/cards/TransactionCard.tsx b/src/features/messages/cards/TransactionCard.tsx index 628f62f..8353b79 100644 --- a/src/features/messages/cards/TransactionCard.tsx +++ b/src/features/messages/cards/TransactionCard.tsx @@ -182,7 +182,11 @@ function TransactionCard({

{title}

- +
{children} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 8ab4155..6da208f 100755 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -12,7 +12,6 @@ import { AppLayout } from '../AppLayout'; import { ErrorBoundary } from '../components/errors/ErrorBoundary'; import { config } from '../consts/config'; import { ChainConfigSyncer } from '../features/chains/ChainConfigSyncer'; -import '../styles/custom.css'; import { MAIN_FONT } from '../styles/fonts'; import '../styles/global.css'; diff --git a/src/styles/custom.css b/src/styles/custom.css deleted file mode 100644 index 5c58693..0000000 --- a/src/styles/custom.css +++ /dev/null @@ -1,4 +0,0 @@ -/* Fix for tooltips breaking layout on mobile devices (<526px width). */ - - -@media (max-width: 526px) {#gas-info, #transaction-info, #message-info{max-width: calc(100% - 10px);}} \ No newline at end of file