Move plus higher and add smooth crossfade for save icon swap

Author: milanofthe

src/lib/components/icons/Icon.svelte

@@ -137,8 +137,8 @@
 		<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
 		<polyline points="17 8 12 3 7 8"/>
 		<line x1="12" y1="3" x2="12" y2="15"/>
-		<line x1="20.5" y1="0" x2="20.5" y2="5"/>
-		<line x1="18" y1="2.5" x2="23" y2="2.5"/>
+		<line x1="20.5" y1="-1" x2="20.5" y2="4"/>
+		<line x1="18" y1="1.5" x2="23" y2="1.5"/>
 	</svg>
 {:else if name === 'play'}
 	<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">

src/routes/+page.svelte

@@ -1017,23 +1017,35 @@
 				use:tooltip={{ text: $currentFileName ? `Save '${$currentFileName}'` : "Save", shortcut: "Ctrl+S" }}
 				aria-label="Save"
 			>
-				{#if saveFlash === 'save'}
-					<Icon name="check" size={16} />
-				{:else}
-					<Icon name="upload" size={16} />
-				{/if}
+				<span class="icon-crossfade">
+					{#if saveFlash === 'save'}
+						<span class="icon-crossfade-item" in:fade={{ duration: 200 }} out:fade={{ duration: 200 }}>
+							<Icon name="check" size={16} />
+						</span>
+					{:else}
+						<span class="icon-crossfade-item" in:fade={{ duration: 200 }} out:fade={{ duration: 200 }}>
+							<Icon name="upload" size={16} />
+						</span>
+					{/if}
+				</span>
 			</button>
 			<button
 				class="toolbar-btn"
 				onclick={() => handleSaveAs()}
 				use:tooltip={{ text: "Save As", shortcut: "Ctrl+Shift+S" }}
 				aria-label="Save As"
 			>
-				{#if saveFlash === 'save-as'}
-					<Icon name="check" size={16} />
-				{:else}
-					<Icon name="upload-plus" size={16} />
-				{/if}
+				<span class="icon-crossfade">
+					{#if saveFlash === 'save-as'}
+						<span class="icon-crossfade-item" in:fade={{ duration: 200 }} out:fade={{ duration: 200 }}>
+							<Icon name="check" size={16} />
+						</span>
+					{:else}
+						<span class="icon-crossfade-item" in:fade={{ duration: 200 }} out:fade={{ duration: 200 }}>
+							<Icon name="upload-plus" size={16} />
+						</span>
+					{/if}
+				</span>
 			</button>
 			<button class="toolbar-btn" onclick={() => exportDialogOpen = true} use:tooltip={{ text: "Python Code", shortcut: "Ctrl+E" }} aria-label="View Python Code">
 				<Icon name="braces" size={16} />
@@ -1416,6 +1428,20 @@
 		background: color-mix(in srgb, var(--error) 15%, var(--surface-raised));
 	}
 
+	.icon-crossfade {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+	}
+
+	.icon-crossfade-item {
+		position: absolute;
+		display: flex;
+	}
+
 	/* Logo overlay */
 	.logo-overlay {
 		position: fixed;