Connect Button styling

yieldprotocol · Aug 4, 2023 · 073ace3 · 073ace3
1 parent dffdd64
commit 073ace3
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/src/components/experimental_/CustomConnectButton.tsx b/src/components/experimental_/CustomConnectButton.tsx
@@ -29,9 +29,16 @@ const CustomConnectButton = () => {
           (!authenticationStatus || authenticationStatus === 'authenticated');
         return (
           <div
-            className={`h-12 w-full cursor-pointer rounded-lg border-[1px] ${
-              !connected ? 'border-green-primary/10 bg-green-primary' : 'border-gray-800'
-            } bg-gray-700/50 text-center text-sm font-bold text-white hover:opacity-80`}
+            className={`
+            h-12
+            cursor-pointer 
+            rounded-lg border-[1px]
+            bg-gray-700/50 
+            text-center 
+            text-sm text-white 
+            hover:opacity-80
+            ${!connected ? 'border-green-primary/10 h-8' : 'border-gray-800'}
+             `}
             {...(!ready && {
               'aria-hidden': true,
               style: {
@@ -44,16 +51,16 @@ const CustomConnectButton = () => {
             {(() => {
               if (!connected) {
                 return (
-                  <button onClick={openConnectModal} type="button" className="h-full w-full p-3">
-                    <div className="text-sm text-white/70">Connect Wallet</div>
+                  <button onClick={openConnectModal} type="button" className="h-full w-full">
+                    <div className="text-xs text-white/70 animate-pulse">Connect Wallet</div>
                   </button>
                 );
               }
 
               if (chain.unsupported) {
                 return (
-                  <button onClick={openChainModal} type="button" className="h-full w-full p-3">
-                    <div className="text-sm text-red-500">Wrong network</div>
+                  <button onClick={openChainModal} type="button" className="h-full w-full">
+                    <div className="text-xs text-red-500">Wrong network</div>
                   </button>
                 );
               }
@@ -70,7 +77,7 @@ const CustomConnectButton = () => {
                         {account.displayName}
                       </div>
                       <div className="flex justify-start font-mono text-xs font-thin text-white/70">
-                        {cleanValue(balance_, 2)}
+                        {cleanValue(balance_, 2)} ETH
                       </div>
                     </div>
                   </div>

diff --git a/src/components/experimental_/layout/header/HeaderContainer.tsx b/src/components/experimental_/layout/header/HeaderContainer.tsx
@@ -14,16 +14,17 @@ const HeaderContainer = ({
   const { pathname } = useRouter();
   return (
     <div
-      className={`sticky top-0 z-40 flex items-center gap-x-4 ${
+      className={`sticky top-0 z-40 flex gap-x-4 text-white/70 sm:gap-x-6 p-4 pt-6 ${
         pathname !== '/' ? 'bg-gray-secondary' : ''
-      } p-2 text-white/70 sm:gap-x-6 md:p-6`}
+      }`}
     >
       <button type="button" className="text-white/50 lg:hidden" onClick={() => setIsOpen(!isOpen)}>
         <span className="sr-only">Open sidebar</span>
         <Bars3Icon className="h-8 w-8" aria-hidden="true" />
       </button>
 
-      <div className="h-full w-full">{children}</div>
+      <div className="h-full w-full ">{children}</div>
+
       <div className="hidden min-w-[200px] md:block">
         <CustomConnectButton />
       </div>

diff --git a/src/components/experimental_/layout/sidebar/NewChatButton.tsx b/src/components/experimental_/layout/sidebar/NewChatButton.tsx
@@ -4,7 +4,7 @@ export const buttonStyle =
   'flex text-sm cursor-pointer select-none items-center rounded-[8px] border-[1px] border-teal-800 p-[8px] px-4 text-center text-white/70 hover:text-white transition ease-in-out hover:bg-teal-800/20 active:bg-transparent';
 
 const NewChatButton = () => (
-  <Link className={buttonStyle} href={`/`}>
+  <Link className={`${buttonStyle} mt-4`} href={`/`}>
     <div className="flex w-full justify-center text-xs">
       <div>New Chat</div>
     </div>

diff --git a/src/components/experimental_/layout/sidebar/SideBar.tsx b/src/components/experimental_/layout/sidebar/SideBar.tsx
@@ -2,9 +2,7 @@ import { useContext, useState } from 'react';
 import SettingsContext, { Setting } from '@/contexts/SettingsContext';
 import { DevToolsModal } from '../../../devTools/DevToolsModal';
 import ChatList from '../../ChatList';
-import CustomConnectButton from '../../CustomConnectButton';
 import AccountStatus from './AccountStatus';
-import MenuButton from './MenuButton';
 import MoreItems from './MoreItems';
 import NewChatButton from './NewChatButton';
 
@@ -21,23 +19,21 @@ const Sidebar = ({
   } = useContext(SettingsContext);
 
   return (
-    <div className="flex h-screen w-full flex-1 flex-col p-1.5 text-gray-300">
+    <div className="flex h-screen w-full flex-col gap-2 p-2 text-gray-300">
       <DevToolsModal
         openState={developerTools}
         handleClose={() => changeSetting(Setting.DEVELOPER_TOOLS, false)}
       />
       <NewChatButton />
-      <div className="h-full overflow-y-auto">
+      <div className="h-full overflow-y-scroll ">
         <ChatList />
       </div>
       <div className="relative flex w-full flex-col self-end">
-        <div className="p-1.5">
+        <div className="p-2">
           <MoreItems />
-          {/* {process.env.NODE_ENV === 'development' && <AccountStatus />} */}
           <div className="p-2">
             <AccountStatus />
           </div>
-          {/* <div className="text-xs text-white/50 border-[0.5px] rounded-xl p-1 ">App version: v{process.env.APP_VERSION}</div> */}
         </div>
       </div>
     </div>