ui: new joining indicator symbol

joinmarket-webui · Sep 12, 2024 · 3e87fb7 · 3e87fb7
1 parent d0d13e9
commit 3e87fb7
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 23 deletions.
diff --git a/src/components/ActivityIndicators.tsx b/src/components/ActivityIndicators.tsx
@@ -21,11 +21,11 @@ interface JoiningIndicatorProps {
   className?: string
 }
 
-export function JoiningIndicator({ isOn, size = 30, className = '', ...props }: JoiningIndicatorProps) {
+export function JoiningIndicator({ isOn, size = 32, className = '', ...props }: JoiningIndicatorProps) {
   return (
     <span className="joining-indicator">
       <ActivityIndicator isOn={isOn}>
-        {isOn && <Sprite symbol="joining" width={size} height={size} className={`p-1 ${className}`} {...props} />}
+        {isOn && <Sprite symbol="mixed" width={size} height={size} className={`${className}`} {...props} />}
       </ActivityIndicator>
     </span>
   )

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -175,13 +175,13 @@ const TrailingNav = ({ joiningRoute, onClick }: TrailingNavProps) => {
     <rb.Nav className="justify-content-center align-items-stretch">
       {joiningRoute && (
         <rb.Nav.Item className="d-flex align-items-stretch">
-          <NavLink to={joiningRoute} onClick={onClick} className="nav-link d-flex align-items-center">
+          <NavLink
+            to={joiningRoute}
+            onClick={onClick}
+            className="nav-link d-flex justify-content-center align-items-center"
+          >
             <rb.Navbar.Text className="d-md-none">{t('navbar.joining_in_progress')}</rb.Navbar.Text>
-            <JoiningIndicator
-              isOn={true}
-              className="navbar-text text-success"
-              title={t('navbar.joining_in_progress')}
-            />
+            <JoiningIndicator isOn={true} title={t('navbar.joining_in_progress')} />
           </NavLink>
         </rb.Nav.Item>
       )}

diff --git a/src/components/Wallet.tsx b/src/components/Wallet.tsx
@@ -172,22 +172,23 @@ export default function Wallet({
             <div>
               <rb.Card.Title>
                 {isActive ? (
-                  <span style={{ position: 'relative' }}>
-                    {lockWallet ? (
-                      <Link className="wallet-name" to={routes.wallet}>
-                        {displayName}
-                      </Link>
-                    ) : (
-                      <>{displayName}</>
-                    )}
-                    {makerRunning && <TabActivityIndicator isOn={true} />}
-                    {coinjoinInProgress && <JoiningIndicator isOn={true} className="text-success" />}
-                  </span>
+                  <div className="d-flex align-items-center">
+                    <div className="position-relative">
+                      {lockWallet ? (
+                        <Link className="wallet-name" to={routes.wallet}>
+                          {displayName}
+                        </Link>
+                      ) : (
+                        <>{displayName}</>
+                      )}
+                      {makerRunning && <TabActivityIndicator isOn={true} />}
+                    </div>
+                    {coinjoinInProgress && <JoiningIndicator isOn={true} size={24} />}
+                  </div>
                 ) : (
                   <>{displayName}</>
                 )}
               </rb.Card.Title>
-
               {isActive ? (
                 <span className="text-success">{t('wallets.wallet_preview.wallet_active')}</span>
               ) : (

diff --git a/src/index.css b/src/index.css
@@ -465,21 +465,40 @@ table.striped tr:hover td {
 }
 
 .earn-indicator .activity-indicator-on {
-  animation-name: activity-indicator-pulse;
+  animation-name: activity-indicator-bg-pulse;
   animation-duration: 3s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in;
 }
 
-@keyframes activity-indicator-pulse {
+.joining-indicator .activity-indicator-on {
+  animation-name: activity-indicator-font-pulse;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in;
+}
+
+@keyframes activity-indicator-bg-pulse {
   0% {
     background-color: rgba(39, 174, 96, 0.2);
   }
   50% {
     background-color: rgba(39, 174, 96, 1);
   }
   100% {
-    background-color: rgba(39, 174, 96, 0.2);
+    background-color: rgba(0, 255, 106, 0.2);
+  }
+}
+
+@keyframes activity-indicator-font-pulse {
+  0% {
+    color: rgba(39, 174, 96, 0.5);
+  }
+  50% {
+    color: rgba(39, 174, 96, 1);
+  }
+  100% {
+    color: rgba(39, 174, 96, 0.5);
   }
 }