feat(profile): move logout section and refine profile-pic hover transitions to improve layout and UX (#10867)

Author: PavelLaptev

apps/desktop/src/components/profileSettings/GeneralSettings.svelte

@@ -149,9 +149,27 @@
 			</div>
 		</form>
 	</SectionCard>
+
+	<SectionCard orientation="row">
+		{#snippet title()}
+			Signing out
+		{/snippet}
+		{#snippet caption()}
+			Ready to take a break? Click here to log out and unwind.
+		{/snippet}
+
+		<Button
+			kind="outline"
+			icon="signout"
+			onclick={async () => {
+				await userService.logout();
+			}}>Log out</Button
+		>
+	</SectionCard>
 {:else}
 	<WelcomeSigninAction />
 {/if}
+
 <Spacer />
 
 <SectionCard orientation="row" centerAlign>
@@ -235,25 +253,6 @@
 
 <Spacer />
 
-{#if $user}
-	<SectionCard orientation="row">
-		{#snippet title()}
-			Signing out
-		{/snippet}
-		{#snippet caption()}
-			Ready to take a break? Click here to log out and unwind.
-		{/snippet}
-
-		<Button
-			kind="outline"
-			icon="signout"
-			onclick={async () => {
-				await userService.logout();
-			}}>Log out</Button
-		>
-	</SectionCard>
-{/if}
-
 <SectionCard orientation="row">
 	{#snippet title()}
 		Remove all projects

packages/ui/src/lib/components/ProfilePictureUpload.svelte

@@ -89,17 +89,12 @@
 		border-radius: var(--radius-m);
 		background-color: var(--clr-scale-pop-70);
 		cursor: pointer;
-		transition: opacity var(--transition-medium);
 
 		&:hover,
 		&:focus-within {
 			& .profile-pic__edit-label {
 				opacity: 1;
 			}
-
-			& .profile-pic {
-				opacity: 0.8;
-			}
 		}
 	}
 
@@ -117,7 +112,6 @@
 		height: 100%;
 		object-fit: cover;
 		background-color: var(--clr-core-pop-70);
-		transition: opacity var(--transition-medium);
 	}
 
 	.profile-pic__edit-label {
@@ -130,6 +124,6 @@
 		background-color: var(--clr-core-ntrl-20);
 		color: var(--clr-core-ntrl-100);
 		opacity: 0;
-		transition: opacity var(--transition-medium);
+		transition: opacity var(--transition-fast);
 	}
 </style>