Apt 1585 - APT-1597 - APT-1856 : Right Cards + Input Design + validat…

…or card color (#12)

* login-claims-sections

* validator-details

* btns-left+right-v1

* input+its+surrounding

* details+btns+lama-comments

* removed-double-list

* unstake+input-handle-0

* scrollable-sections

* APT-1597

* resolved-conflicts

* hide-customCTAbtn-addtransaction

src/components/loginView.tsx

@@ -1,11 +1,74 @@
+import Image from 'next/image';
+import ArrowRight from '../assets/svgs/arrow-right-black.svg'
 import { AppConfigStorage } from "@/contexts/appConfigStorage";
 import { WalletConnector } from "@/contexts/walletConnector";
 import { MOCK_CHAIN } from "@/misc/chainConfig";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { Button } from "antd";
 
-const LoginView: React.FC = () => {
+const CustomConnectButton = () => {
+  return (
+    <ConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+      }) => {
+        // Not connected
+        if (!account || !chain) {
+          return (
+            <button
+              onClick={openConnectModal}
+              className="btn-primary-gradient-aqua !w-fit px-14 group flex items-center"
+            >
+              Sign In / Connect Wallet
+              <Image
+                className="ml-3 h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:translate-x-2"
+                src={ArrowRight}
+                alt={`arrow icon`}
+                width={24}
+                height={24}
+              />
+            </button>
+          );
+        }
+
+        // Wrong network
+        if (chain.unsupported) {
+          return (
+            <button
+              onClick={openChainModal}
+              style={{
+                padding: '10px 20px',
+                background: '#ff5252',
+                color: '#fff',
+                border: 'none',
+                borderRadius: '5px',
+                cursor: 'pointer',
+              }}
+            >
+              Wrong Network
+            </button>
+          );
+        }
+        // Connected and correct network
+        return (
+          <button
+            onClick={openAccountModal}
+            className="btn-primary-aqua"
+          >
+            {account.displayName}
+          </button>
+        );
+      }}
+    </ConnectButton.Custom>
+  );
+};
 
+const LoginView: React.FC = () => {
+
   const {
     appConfig
   } = AppConfigStorage.useContainer();
@@ -20,29 +83,35 @@ const LoginView: React.FC = () => {
         type="primary"
         onClick={connectDummyWallet}
         loading={isDummyWalletConnecting}
-        className="btn-primary-cyan rounded-lg"
+        className="btn-primary-gradient-aqua-lg !w-fit px-14 group"
       >
-        CONNECT WALLET
-    </Button>
-  ) : (
-    <ConnectButton />
-  )
+        Sign In / Connect Wallet
+        <Image
+                className="ml-3 h-[24px] w-[24px] transform transition-transform ease-out duration-500 group-hover:translate-x-2"
+                src={ArrowRight}
+                alt={`arrow icon`}
+                width={24}
+                height={24}
+              />
+      </Button>
+    ) : (
+      <CustomConnectButton />
+    );
 
   return (
-    <div className="relative bg-grey-400">
-      <div className="text-end text-white">
-        <h1 className="text-5xl font-bold">Liquid Staking <br/>with Zilliqa</h1>
-        <p className="mt-1 text-sm">
-        Help us Empower and secure the Zilliqa Chain
+    <div className="relative">
+      <div className="text-end p-4">
+        <h1 className="hero text-white">Staking Portal</h1>
+        <p className="mt-5 body2">
+          Help us Empower and secure the Zilliqa Chain{' '}
         </p>
       </div>
 
-      <div className='flex flex-col items-end mt-16'>
-        { connectWallet }
+      <div className="flex flex-col items-end mt-16 ">
+        {connectWallet}
       </div>
     </div>
-  )
-
-}
+  );
+};
 
-export default LoginView;
+export default LoginView;