Style

aesirxio · Jul 25, 2023 · 4db33cd · 4db33cd
1 parent 9043fed
commit 4db33cd
Show file tree

Hide file tree

Showing 14 changed files with 120 additions and 145 deletions.
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "react-secure-storage": "^1.2.2",
     "react-spinners": "^0.13.6",
     "react-toastify": "^9.1.3",
+    "reactstrap": "^9.2.0",
     "viem": "^1.0.0",
     "wagmi": "^1.3.2"
   },

diff --git a/src/SSOButton/Providers/Concordium/concordium.png b/src/SSOButton/Providers/Concordium/concordium.png
diff --git a/src/SSOButton/Providers/Concordium/connect.tsx b/src/SSOButton/Providers/Concordium/connect.tsx
@@ -1,6 +1,5 @@
 import { BROWSER_WALLET, WALLET_CONNECT } from './config';
 import React from 'react';
-import logo from './concordium.png';
 
 const ConnectConcordium = ({
   isConnecting,
@@ -11,45 +10,37 @@ const ConnectConcordium = ({
 }: any) => {
   return (
     <>
-      <div className="p-2 bg-white border fw-semibold text-center rounded-2">
-        <div className="pb-2">Connect to Concordium</div>
-        <div className="d-flex">
-          <button
-            className="btn btn-secondary bg-secondary text-white me-1"
-            onClick={() => handleOnConnect(BROWSER_WALLET, 'browser')}
-          >
-            {isConnecting ? (
-              <>
-                <span
-                  className="spinner-border spinner-border-sm me-1"
-                  role="status"
-                  aria-hidden="true"
-                ></span>{' '}
-                Connecting
-              </>
-            ) : (
-              <>
-                <img className="me-2" width={20} height={21} src={logo} alt="logo-concordium" />
-                Browser Wallet
-              </>
-            )}
-          </button>
-          <button
-            className="btn btn-secondary bg-secondary text-white ms-1"
-            onClick={() => handleOnConnect(WALLET_CONNECT, 'walletconnect')}
-          >
-            {!activeConnectorError && activeConnectorType && !activeConnector ? (
-              <span
-                className="spinner-border spinner-border-sm me-1"
-                role="status"
-                aria-hidden="true"
-              ></span>
-            ) : (
-              'QR Code'
-            )}
-          </button>
-        </div>
-      </div>
+      <button
+        className="btn btn-secondary"
+        onClick={() => handleOnConnect(BROWSER_WALLET, 'browser')}
+      >
+        {isConnecting ? (
+          <>
+            <span
+              className="spinner-border spinner-border-sm me-1"
+              role="status"
+              aria-hidden="true"
+            ></span>
+            Connecting
+          </>
+        ) : (
+          <>Browser Wallet</>
+        )}
+      </button>
+      <button
+        className="btn btn-secondary ms-1"
+        onClick={() => handleOnConnect(WALLET_CONNECT, 'walletconnect')}
+      >
+        {!activeConnectorError && activeConnectorType && !activeConnector ? (
+          <span
+            className="spinner-border spinner-border-sm me-1"
+            role="status"
+            aria-hidden="true"
+          ></span>
+        ) : (
+          'QR Code'
+        )}
+      </button>
     </>
   );
 };

diff --git a/src/SSOButton/Providers/Concordium/index.tsx b/src/SSOButton/Providers/Concordium/index.tsx
@@ -90,6 +90,7 @@ const ConcordiumApp = (props: WalletConnectionProps) => {
   };
   return (
     <>
+      <div className="pb-2">Concordium wallets</div>
       {activeConnectorError && <div>Connector error: {activeConnectorError}.</div>}
 
       {!account || rpcError ? (
@@ -105,18 +106,13 @@ const ConcordiumApp = (props: WalletConnectionProps) => {
           {rpcGenesisHash ? (
             <SignMessageConcordium account={account} connection={connection} />
           ) : (
-            <div className="p-2 bg-white border fw-semibold text-center rounded-2">
-              <div className="pb-2">Connect to Concordium</div>
-              <div className="d-flex">
-                <button className="btn btn-secondary bg-secondary fw-semibold text-white w-50 py-3">
-                  <span
-                    className="spinner-border spinner-border-sm me-1"
-                    role="status"
-                    aria-hidden="true"
-                  ></span>
-                </button>
-              </div>
-            </div>
+            <button className="btn btn-secondary">
+              <span
+                className="spinner-border spinner-border-sm me-1"
+                role="status"
+                aria-hidden="true"
+              ></span>
+            </button>
           )}
         </>
       )}

diff --git a/src/SSOButton/Providers/Concordium/sign.tsx b/src/SSOButton/Providers/Concordium/sign.tsx
@@ -1,5 +1,4 @@
 import React, { useContext, useState } from 'react';
-import logo from './concordium.png';
 import useWallet from '../../../Hooks/useWallet';
 
 import { toast } from 'react-toastify';
@@ -38,13 +37,10 @@ const SignMessageConcordium = ({ account, connection }: any) => {
   return (
     <>
       <p className="text-break">
-        <span className="fw-semibold">Concordium Wallet:</span>
+        <span className="fw-semibold">Wallet:</span>
         <span className="ms-1">{account && shortenString(account)}</span>
       </p>
-      <button
-        className="btn btn-secondary bg-secondary fw-semibold text-white"
-        onClick={handleConnect}
-      >
+      <button className="btn btn-secondary" onClick={handleConnect}>
         {status ? (
           <div className="d-flex align-items-center">
             <span
@@ -59,10 +55,7 @@ const SignMessageConcordium = ({ account, connection }: any) => {
             </span>
           </div>
         ) : (
-          <>
-            <img className="me-2" width={20} height={21} src={logo} alt="logo-concordium" />
-            Sign in via Concordium
-          </>
+          <>Sign in via Concordium</>
         )}
       </button>
     </>

diff --git a/src/SSOButton/Providers/Ethereum/connect.tsx b/src/SSOButton/Providers/Ethereum/connect.tsx
@@ -12,11 +12,7 @@ const ConnectMetamask = () => {
   }
 
   return (
-    <button
-      onClick={onOpen}
-      disabled={loading}
-      className="btn btn-white bg-white border fw-semibold"
-    >
+    <button onClick={onOpen} disabled={loading} className="btn btn-secondary">
       {loading ? (
         <>
           <span
@@ -27,7 +23,7 @@ const ConnectMetamask = () => {
           Waiting for signing...
         </>
       ) : (
-        'Connect to Ethereum wallets'
+        'Connect'
       )}
     </button>
   );

diff --git a/src/SSOButton/Providers/Ethereum/index.tsx b/src/SSOButton/Providers/Ethereum/index.tsx
@@ -130,6 +130,7 @@ const ethereumClient = new EthereumClient(wagmiConfig, chains);
 const SSOEthereumProvider = () => {
   return (
     <>
+      <div className="pb-2">Ethereum wallets</div>
       <WagmiConfig config={wagmiConfig}>
         <SSOEthereumApp />
       </WagmiConfig>

diff --git a/src/SSOButton/Providers/Ethereum/sign.tsx b/src/SSOButton/Providers/Ethereum/sign.tsx
@@ -35,14 +35,10 @@ const SignMessage = () => {
   return (
     <>
       <p className="text-break">
-        <span className="fw-semibold">Ethereum Wallet:</span>
+        <span className="fw-semibold">Wallet:</span>
         <span className="ms-1">{address && shortenString(address)}</span>
       </p>
-      <button
-        disabled={isLoading}
-        className="btn btn-secondary border fw-semibold"
-        onClick={handleSignMessage}
-      >
+      <button disabled={isLoading} className="btn btn-secondary" onClick={handleSignMessage}>
         {status ? (
           <div className="d-flex align-items-center">
             <span

diff --git a/src/SSOButton/Providers/index.tsx b/src/SSOButton/Providers/index.tsx
@@ -19,23 +19,26 @@ const SSOProviders = () => {
   return (
     <>
       {hasMetamask && (
-        <Suspense fallback={<></>}>
-          <div className="control-group mb-3">
-            <SSOEthereumProvider />
-          </div>
-        </Suspense>
+        <div className="control-group mb-3 p-2 border text-center rounded-2">
+          <Suspense fallback={<>Loading...</>}>
+            <SSOEthereumProvider />{' '}
+          </Suspense>
+        </div>
       )}
 
       {hasConcordium && (
-        <Suspense fallback={<></>}>
-          <div className="control-group mb-3">
-            <SSOConcordiumProvider />
-          </div>
-        </Suspense>
+        <div className="control-group mb-3 p-2 border text-center rounded-2">
+          <Suspense fallback={<>Loading...</>}>
+            <SSOConcordiumProvider />{' '}
+          </Suspense>
+        </div>
       )}
-      <Suspense fallback={<></>}>
-        <SSOEmailProvider />
-      </Suspense>
+
+      <div className="control-group mb-3 p-2 ">
+        <Suspense fallback={<>Loading...</>}>
+          <SSOEmailProvider />
+        </Suspense>
+      </div>
     </>
   );
 };

diff --git a/src/SSOButton/index.scss b/src/SSOButton/index.scss
@@ -2,26 +2,34 @@ $enable-important-utilities: false;
 $enable-negative-margins: true;
 $enable-dark-mode: false;
 $prefix: aesirxsso-;
+$secondary: #1ab394;
 
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/maps';
 @import 'bootstrap/scss/mixins';
-
-.modal-backdrop {
-  display: none;
-}
+@import 'bootstrap/scss/root';
 
 .aesirxsso {
-  color: $black;
-  .modal {
-    background: rgba(0, 0, 0, 0.5);
+  @import 'bootstrap/scss/reboot';
+  @import 'bootstrap/scss/type';
+  @import 'bootstrap/scss/utilities';
+  @import 'bootstrap/scss/modal';
+  @import 'bootstrap/scss/forms';
+  @import 'bootstrap/scss/button-group';
+  @import 'bootstrap/scss/buttons';
+  @import 'bootstrap/scss/spinners';
+  @import 'bootstrap/scss/close';
+  @import 'bootstrap/scss/transitions';
+  @import 'bootstrap/scss/helpers';
+  @import 'bootstrap/scss/utilities/api';
 
-    .modal-content {
+  .btn-secondary {
+    color: $white;
+
+    &:hover {
       background-color: $white;
+      color: $black;
     }
   }
-
-  @import 'bootstrap/scss/utilities';
-  @import 'bootstrap/scss/modal';
 }
diff --git a/src/SSOButton/index.tsx b/src/SSOButton/index.tsx
@@ -1,6 +1,5 @@
 import React, { Suspense, useEffect, useState } from 'react';
-
-const SSOModal = React.lazy(() => import('./modal'));
+import SSOModal from './modal';
 
 interface SSOButtonProps {
   className: string;
@@ -9,23 +8,17 @@ interface SSOButtonProps {
 }
 
 const SSOButton: React.FC<SSOButtonProps> = ({ className, text = 'Login', onGetData }) => {
-  const [domLoaded, setDomLoaded] = useState(false);
-  useEffect(() => {
-    setDomLoaded(true);
-  }, []);
+  const [show, setShow] = useState(false);
+
+  const toggle = () => setShow(!show);
 
   return (
-    <div className="aesirxsso">
-      <button
-        type="button"
-        className={`btn ${className}`}
-        data-bs-toggle="modal"
-        data-bs-target="#ssoModal"
-      >
+    <>
+      <button type="button" className={`btn ${className}`} onClick={toggle}>
         {text}
       </button>
-      <Suspense fallback={<></>}>{domLoaded ? <SSOModal onGetData={onGetData} /> : null}</Suspense>
-    </div>
+      <SSOModal onGetData={onGetData} show={show} toggle={toggle} />
+    </>
   );
 };
 

diff --git a/src/SSOButton/logo.svg b/src/SSOButton/logo.svg