From 7a193a825d2b6c1c4a007b3dc95cf534cf2e4b1f Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Wed, 9 Feb 2022 14:20:56 +0100
Subject: [PATCH] Improve styles of 'execute' anchor

Signed-off-by: Alexis Sellier <self@cloudhead.io>
---
 src/base/profiles/AnchorActions.svelte | 12 ++++++---
 src/base/projects/Widget.svelte        | 35 ++++++++++++++++----------
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/base/profiles/AnchorActions.svelte b/src/base/profiles/AnchorActions.svelte
index 261fb8e69..1aa0650d2 100644
--- a/src/base/profiles/AnchorActions.svelte
+++ b/src/base/profiles/AnchorActions.svelte
@@ -98,6 +98,12 @@
   }
   .avatars {
     display: flex;
+    margin-right: 0.75rem;
+  }
+  button.execute {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 </style>
 
@@ -109,7 +115,7 @@
 
 <div class="avatars">
   {#each anchor.confirmations as signee}
-    <Avatar inline source={signee} address={signee} glowOnHover />
+    <Avatar inline source={signee} address={signee} />
   {/each}
 </div>
 
@@ -118,8 +124,8 @@
   <button on:click|stopPropagation={() => {
     action = Action.Execute;
     state = State.Confirm;
-  }} class="tiny">
-    Execute
+  }} class="tiny execute">
+    <Avatar inline source={account} address={account} /> Execute
   </button>
   <!-- Check whether or not we've signed this proposal -->
 {:else if isSigned}
diff --git a/src/base/projects/Widget.svelte b/src/base/projects/Widget.svelte
index 519b6b594..77163f448 100644
--- a/src/base/projects/Widget.svelte
+++ b/src/base/projects/Widget.svelte
@@ -41,6 +41,13 @@
     display: flex;
     align-items: center;
   }
+  article .anchor-info {
+    display: flex;
+    align-items: center;
+  }
+  article .actions {
+    margin-right: 1rem;
+  }
   article .commit, article .actions {
     font-family: var(--font-family-monospace);
   }
@@ -90,19 +97,21 @@
         {/if}
       </slot>
     </span>
-    <span class="actions">
-      <slot name="actions">
-      </slot>
-    </span>
-    <span class="anchor-badge">
-      <slot name="anchor">
-        {#if anchor}
-          <AnchorBadge
-            commit={project.head}
-            head={project.head} noText noBg
-            anchors={[anchor.anchor.stateHash]} />
-        {/if}
-      </slot>
+    <span class="anchor-info">
+      <span class="actions">
+        <slot name="actions">
+        </slot>
+      </span>
+      <span class="anchor-badge">
+        <slot name="anchor">
+          {#if anchor}
+            <AnchorBadge
+              commit={project.head}
+              head={project.head} noText noBg
+              anchors={[anchor.anchor.stateHash]} />
+          {/if}
+        </slot>
+      </span>
     </span>
   </div>
 </article>