chore: circle floating buttons and move to right side

hyperlane-xyz · Oct 22, 2024 · 9674433 · 9674433
1 parent a46c810
commit 9674433
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 33 deletions.
diff --git a/src/components/icons/Docs.tsx b/src/components/icons/Docs.tsx
@@ -1,14 +1,9 @@
 import { memo } from 'react';
-import { Color } from '../../styles/Color';
 
-interface Props {
-  width?: string | number;
-  height?: string | number;
-  color?: string;
-  className?: string;
-}
+import { Color } from '../../styles/Color';
+import { IconProps } from './types';
 
-function _DocsIcon({ className, color, height = 24, width = 24 }: Props) {
+function _DocsIcon({ className, color, height = 24, width = 24 }: IconProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

diff --git a/src/components/icons/History.tsx b/src/components/icons/History.tsx
@@ -0,0 +1,20 @@
+import { memo } from 'react';
+
+import { IconProps } from './types';
+
+function _HistoryIcon({ className, color, height = 24, width = 24 }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height={height}
+      viewBox="0 -960 960 960"
+      width={width}
+      fill={color}
+      className={className}
+    >
+      <path d="M480-120q-138 0-240.5-91.5T122-440h82q14 104 92.5 172T480-200q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-69 0-129 32t-101 88h110v80H120v-240h80v94q51-64 124.5-99T480-840q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-480q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-120Zm112-192L440-464v-216h80v184l128 128-56 56Z" />
+    </svg>
+  );
+}
+
+export const HistoryIcon = memo(_HistoryIcon);
diff --git a/src/components/icons/Wallet.tsx b/src/components/icons/Wallet.tsx
@@ -1,13 +1,8 @@
 import { memo } from 'react';
 
-interface Props {
-  width?: string | number;
-  height?: string | number;
-  color?: string;
-  className?: string;
-}
+import { IconProps } from './types';
 
-function _WalletIcon({ className, color, height = 14, width = 17 }: Props) {
+function _WalletIcon({ className, color, height = 14, width = 17 }: IconProps) {
   return (
     <svg
       width={width}

diff --git a/src/components/icons/types.ts b/src/components/icons/types.ts
@@ -0,0 +1,6 @@
+export interface IconProps {
+  width?: string | number;
+  height?: string | number;
+  color?: string;
+  className?: string;
+}
diff --git a/src/features/wallet/WalletFloatingButtons.tsx b/src/features/wallet/WalletFloatingButtons.tsx
@@ -4,11 +4,11 @@ import { IconButton } from '../../components/buttons/IconButton';
 import { DocsIcon } from '../../components/icons/Docs';
 import { WalletIcon } from '../../components/icons/Wallet';
 import { links } from '../../consts/links';
-import HistoryIcon from '../../images/icons/history.svg';
 import { Color } from '../../styles/Color';
 import { useIsMobile } from '../../styles/mediaQueries';
 import { useStore } from '../store';
 
+import { HistoryIcon } from '../../components/icons/History';
 import { useAccounts } from './hooks/multiProtocol';
 
 export function WalletFloatingButtons() {
@@ -25,24 +25,37 @@ export function WalletFloatingButtons() {
   if (isMobile) return null;
 
   return (
-    <div className="flex items-center justify-end gap-4">
-      <Link href={links.warpDocs} target="_blank" className={linkStyles}>
-        <DocsIcon />
-      </Link>
+    <div className="absolute -right-8 top-2 flex flex-col items-center justify-end gap-4">
       {numReady === 0 && (
-        <IconButton title="Connect Wallet" onClick={() => setShowEnvSelectModal(true)}>
-          <WalletIcon color={Color.white} height={17} width={20} />
+        <IconButton
+          classes={`p-1 ${styles.roundedCircle} `}
+          title="Connect Wallet"
+          onClick={() => setShowEnvSelectModal(true)}
+        >
+          <WalletIcon color={Color.blue} height={16} width={16} />
         </IconButton>
       )}
       {numReady >= 1 && (
         <IconButton
-          imgSrc={HistoryIcon}
+          classes={`p-0.5 ${styles.roundedCircle} `}
           title="History"
           onClick={() => setIsSideBarOpen(!isSideBarOpen)}
-        />
+        >
+          <HistoryIcon color={Color.blue} height={20} width={20} />
+        </IconButton>
       )}
+      <Link
+        href={links.warpDocs}
+        target="_blank"
+        className={`p-0.5 ${styles.roundedCircle} ${styles.link}`}
+      >
+        <DocsIcon color={Color.blue} height={20} width={20} />
+      </Link>
     </div>
   );
 }
 
-const linkStyles = 'hover:opacity-70 active:opacity-60';
+const styles = {
+  link: 'hover:opacity-70 active:opacity-60',
+  roundedCircle: 'rounded-full bg-white ',
+};
diff --git a/src/images/icons/history.svg b/src/images/icons/history.svg
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -2,15 +2,16 @@ import type { NextPage } from 'next';
 
 import { TipCard } from '../components/tip/TipCard';
 import { TransferTokenCard } from '../features/transfer/TransferTokenCard';
-
 import { WalletFloatingButtons } from '../features/wallet/WalletFloatingButtons';
 
 const Home: NextPage = () => {
   return (
     <div className="space-y-3 pt-4">
       <TipCard />
-      <WalletFloatingButtons />
-      <TransferTokenCard />
+      <div className="md:relative">
+        <TransferTokenCard />
+        <WalletFloatingButtons />
+      </div>
     </div>
   );
 };

diff --git a/src/styles/Color.ts b/src/styles/Color.ts
@@ -6,6 +6,7 @@ const themeColors = theme.extend.colors as unknown as Record<string, string>;
 export const Color = {
   black: themeColors.black,
   white: themeColors.white,
+  blue: themeColors.blue,
   gray: themeColors.gray[500],
   lightGray: themeColors.gray[200],
   primary: themeColors.primary[500],

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 
-const defaultTheme = require('tailwindcss/defaultTheme')
+const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}'],
@@ -19,7 +19,8 @@ module.exports = {
       colors: {
         black: '#010101',
         white: '#ffffff',
-        gray: {...defaultTheme.colors.gray, 150: '#EBEDF0', 250: '#404040', 350: '#6B6B6B'},
+        blue: '#2362C0',
+        gray: { ...defaultTheme.colors.gray, 150: '#EBEDF0', 250: '#404040', 350: '#6B6B6B' },
         primary: {
           50: '#E6EDF9',
           100: '#CDDCF4',
@@ -96,8 +97,8 @@ module.exports = {
         'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;',
       },
       transitionProperty: {
-        'height': 'height, max-height',
-        'spacing': 'margin, padding',
+        height: 'height, max-height',
+        spacing: 'margin, padding',
       },
       maxWidth: {
         'xl-1': '39.5rem',