Minor fixes

Author: faisalnjs

frontend/pages/user.ejs

@@ -10,11 +10,11 @@
 <p>View and manage your past commissions.</p>
 <div class="buttons">
 	<a class="button" href="<%= tenant.domain %><%= tenant.path %>/create">New Commission</a>
+	<div id="sync" class="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" fill="none">
+			<path d="M18.5949 5.16663C16.8618 3.32009 14.3989 2.16663 11.6666 2.16663C6.41992 2.16663 2.16663 6.41992 2.16663 11.6666C2.16663 16.9133 6.41992 21.1666 11.6666 21.1666C14.3989 21.1666 16.8618 20.0132 18.5949 18.1666M17.3236 7.98035L20.9804 7.98035L20.9804 4.3235" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+		</svg> Sync Existing</div>
 </div>
 <div class="commissions">
-	<div id="sync"><svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23" fill="none">
-			<path d="M18.5949 5.16663C16.8618 3.32009 14.3989 2.16663 11.6666 2.16663C6.41992 2.16663 2.16663 6.41992 2.16663 11.6666C2.16663 16.9133 6.41992 21.1666 11.6666 21.1666C14.3989 21.1666 16.8618 20.0132 18.5949 18.1666M17.3236 7.98035L20.9804 7.98035L20.9804 4.3235" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
-		</svg> Sync</div>
 	<% session[vars.commissions].forEach(commission => { %>
 	<div class="commission">
 		<h2><%= commission.id %></h2>

frontend/public/scripts.js

@@ -296,10 +296,10 @@ async function sync() {
                 document.getElementById('error').classList.remove('hidden');
                 document.querySelector('.inner h1').innerText = 'Error';
                 document.querySelector('.inner p').innerText = result.message || 'An unknown error occurred. Please try again later.';
+                setTimeout(() => {
+                    anim_in();
+                }, 750)
             };
-            setTimeout(() => {
-                anim_in();
-            }, 750)
         });
 };
 

frontend/public/styles.css

@@ -75,6 +75,15 @@ code {
 	cursor: pointer;
 	user-select: none;
 	transition: 0.25s;
+
+	svg {
+		height: 12.5px;
+
+		path {
+			stroke: #ffffff;
+			stroke-width: 2px;
+		}
+	}
 }
 
 .button.hidden {
@@ -267,42 +276,19 @@ main {
 		transition: 0.25s;
 	}
 
+	#sync.active {
+		user-select: none;
+		pointer-events: none;
+	}
+
 	.commissions {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 5px;
 		width: -webkit-fill-available;
 		max-width: 500px;
-		margin-top: 5px;
-
-		#sync {
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			margin-bottom: 5px;
-			cursor: pointer;
-
-			svg {
-				height: 12.5px;
-				transition: rotate 0.5s linear;
-
-				path {
-					stroke: #ffffff;
-					stroke-width: 2px;
-				}
-			}
-		}
-
-		#sync.active {
-			user-select: none;
-			pointer-events: none;
-
-			svg {
-				rotate: 360deg;
-				transition: rotate 0.5s linear;
-			}
-		}
+		margin-top: 10px;
 
 		.commission {
 			display: flex;