New look — new me!

apps/desktop/src/components/AiCredentialCheck.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import { AI_SERVICE, type DiffInput } from '$lib/ai/service';
 	import { ModelKind } from '$lib/ai/types';
 	import { USER_SERVICE } from '$lib/user/userService';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Link } from '@gitbutler/ui';
+	import { Button, InfoMessage, Link } from '@gitbutler/ui';
 	import { slide } from 'svelte/transition';
 
 	const aiService = inject(AI_SERVICE);

apps/desktop/src/components/AnalyticsConfirmation.svelte

@@ -12,7 +12,7 @@
 </script>
 
 <div class="analytics-confirmation">
-	<h1 class="title text-serif-40">Before we begin</h1>
+	<h1 class="title text-serif-42">Before we begin</h1>
 	<AnalyticsSettings />
 
 	<div class="analytics-confirmation__actions">

apps/desktop/src/components/BaseBranchSwitch.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import { BASE_BRANCH_SERVICE } from '$lib/baseBranch/baseBranchService.svelte';
 	import { STACK_SERVICE } from '$lib/stacks/stackService.svelte';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, SectionCard, Select, SelectItem } from '@gitbutler/ui';
+	import { Button, InfoMessage, SectionCard, Select, SelectItem } from '@gitbutler/ui';
 
 	const { projectId }: { projectId: string } = $props();
 

apps/desktop/src/components/ChecksPolling.svelte

@@ -4,8 +4,7 @@
 	import { UI_STATE } from '$lib/state/uiState.svelte';
 	import { inject } from '@gitbutler/core/context';
 
-	import { Badge, TestId } from '@gitbutler/ui';
-	import type { MessageStyle } from '$components/InfoMessage.svelte';
+	import { Badge, TestId, type MessageStyle } from '@gitbutler/ui';
 	import type iconsJson from '@gitbutler/ui/data/icons.json';
 	import type { ComponentColorType } from '@gitbutler/ui/utils/colorTypes';
 

apps/desktop/src/components/ChromeErrorBoundary.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import DecorativeSplitView from '$components/DecorativeSplitView.svelte';
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import ProjectNotFound from '$components/ProjectNotFound.svelte';
 	import loadErrorSvg from '$lib/assets/illustrations/load-error.svg?raw';
 	import { parseQueryError } from '$lib/error/error';
 	import { Code } from '$lib/error/knownErrors';
-	import { Button } from '@gitbutler/ui';
+	import { Button, InfoMessage } from '@gitbutler/ui';
 
 	type Props = {
 		projectId: string;

apps/desktop/src/components/CloneForm.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import InfoMessage, { type MessageStyle } from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
 	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import { BACKEND } from '$lib/backend';
@@ -11,7 +10,7 @@
 	import { parseRemoteUrl } from '$lib/url/gitUrl';
 	import { inject } from '@gitbutler/core/context';
 	import { persisted } from '@gitbutler/shared/persisted';
-	import { Button, Spacer, Textbox } from '@gitbutler/ui';
+	import { Button, InfoMessage, type MessageStyle, Spacer, Textbox } from '@gitbutler/ui';
 
 	import * as Sentry from '@sentry/sveltekit';
 	import { onMount } from 'svelte';
@@ -119,7 +118,7 @@
 	}
 </script>
 
-<h1 class="clone-title text-serif-40">Clone a <i>repository</i></h1>
+<h1 class="clone-title text-serif-42">Clone a <i>repository</i></h1>
 <Section>
 	<div class="clone__field repositoryUrl">
 		<div class="text-13 text-semibold clone__field--label">Clone URL</div>

apps/desktop/src/components/CommitSigningForm.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
 	import SectionCardDisclaimer from '$components/SectionCardDisclaimer.svelte';
 	import { GIT_CONFIG_SERVICE } from '$lib/config/gitConfigService';
 	import { GIT_SERVICE } from '$lib/git/gitService';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Link, SectionCard, Select, SelectItem, Textbox, Toggle } from '@gitbutler/ui';
+	import {
+		Button,
+		InfoMessage,
+		Link,
+		SectionCard,
+		Select,
+		SelectItem,
+		Textbox,
+		Toggle
+	} from '@gitbutler/ui';
 
 	import { onMount } from 'svelte';
 

apps/desktop/src/components/CredentialCheck.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import SectionCardDisclaimer from '$components/SectionCardDisclaimer.svelte';
 	import { OnboardingEvent, POSTHOG_WRAPPER } from '$lib/analytics/posthog';
 	import { GIT_CONFIG_SERVICE } from '$lib/config/gitConfigService';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Icon, Link } from '@gitbutler/ui';
+	import { Button, Icon, InfoMessage, Link } from '@gitbutler/ui';
 	import { slide } from 'svelte/transition';
 
 	interface Props {

apps/desktop/src/components/ProjectNotFound.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import DecorativeSplitView from '$components/DecorativeSplitView.svelte';
-	import InfoMessage, { type MessageStyle } from '$components/InfoMessage.svelte';
 	import ProjectSwitcher from '$components/ProjectSwitcher.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import RemoveProjectButton from '$components/RemoveProjectButton.svelte';
 	import notFoundSvg from '$lib/assets/illustrations/not-found.svg?raw';
 	import { PROJECTS_SERVICE } from '$lib/project/projectsService';
 	import { inject } from '@gitbutler/core/context';
-	import { Button, Spacer, TestId } from '@gitbutler/ui';
+	import { Button, InfoMessage, type MessageStyle, Spacer, TestId } from '@gitbutler/ui';
 
 	interface Props {
 		projectId: string;

apps/desktop/src/components/ProjectSetupTarget.svelte

@@ -58,7 +58,7 @@
 <div class="project-setup">
 	<div class="stack-v gap-4">
 		<ProjectNameLabel {projectName} />
-		<h1 class="text-serif-40">Configure your <i>workspace</i></h1>
+		<h1 class="text-serif-42">Configure your <i>workspace</i></h1>
 	</div>
 
 	<div class="project-setup__fields">

apps/desktop/src/components/ReduxResult.svelte

@@ -4,10 +4,9 @@
 </script>
 
 <script lang="ts" generics="A, B extends string | undefined">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import { isParsedError } from '$lib/error/parser';
 
-	import { Icon } from '@gitbutler/ui';
+	import { Icon, InfoMessage } from '@gitbutler/ui';
 	import { QueryStatus } from '@reduxjs/toolkit/query';
 	import type { Result } from '$lib/state/helpers';
 	import type { Snippet } from 'svelte';

apps/desktop/src/components/ReloadWarning.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
+	import { InfoMessage } from '@gitbutler/ui';
 
 	// Number of events received.
 	let count = $state(0);

apps/desktop/src/components/SomethingWentWrong.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import DecorativeSplitView from '$components/DecorativeSplitView.svelte';
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import ProjectSwitcher from '$components/ProjectSwitcher.svelte';
 	import loadErrorSvg from '$lib/assets/illustrations/load-error.svg?raw';
+	import { InfoMessage } from '@gitbutler/ui';
 
 	interface Props {
 		projectId?: string;

apps/desktop/src/components/ToastController.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import { dismissToast, toastStore } from '$lib/notifications/toasts';
-	import { Markdown, TestId } from '@gitbutler/ui';
+	import { InfoMessage, Markdown, TestId } from '@gitbutler/ui';
 	import { slide } from 'svelte/transition';
 </script>
 

apps/desktop/src/components/Welcome.svelte

@@ -40,7 +40,7 @@
 </script>
 
 <div class="welcome" data-testid={TestId.WelcomePage}>
-	<h1 class="welcome-title text-serif-40">Welcome to GitButler</h1>
+	<h1 class="welcome-title text-serif-42">Welcome to GitButler</h1>
 	<div class="welcome__actions">
 		<div class="welcome__actions--repo">
 			<input

apps/desktop/src/components/codegen/CodegenPage.svelte

@@ -1054,7 +1054,7 @@
 	<div class="not-available">
 		<DecorativeSplitView hideDetails img={vibecodingSvg}>
 			<div class="not-available__content">
-				<h1 class="text-serif-40">Set up <i>Claude Code</i></h1>
+				<h1 class="text-serif-42">Set up <i>Claude Code</i></h1>
 				<ClaudeCheck
 					claudeExecutable={claudeExecutable.current}
 					recheckedAvailability={recheckedAvailability.current}

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

@@ -2,7 +2,6 @@
 	import AIPromptEdit from '$components/AIPromptEdit.svelte';
 	import AiCredentialCheck from '$components/AiCredentialCheck.svelte';
 	import AuthorizationBanner from '$components/AuthorizationBanner.svelte';
-	import InfoMessage from '$components/InfoMessage.svelte';
 	import Section from '$components/Section.svelte';
 	import { AISecretHandle, AI_SERVICE, GitAIConfigKey, KeyOption } from '$lib/ai/service';
 	import { OpenAIModelName, AnthropicModelName, ModelKind } from '$lib/ai/types';
@@ -12,6 +11,7 @@
 	import { inject } from '@gitbutler/core/context';
 	import {
 		Icon,
+		InfoMessage,
 		Link,
 		RadioButton,
 		SectionCard,

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

@@ -14,6 +14,7 @@
 	import {
 		Button,
 		Modal,
+		ProfilePictureUpload,
 		SectionCard,
 		Select,
 		SelectItem,
@@ -35,8 +36,6 @@
 	const cliManager = inject(CLI_MANAGER);
 	const [instalCLI, installingCLI] = cliManager.install;
 
-	const fileTypes = ['image/jpeg', 'image/png'];
-
 	let saving = $state(false);
 	let newName = $state('');
 	let isDeleting = $state(false);
@@ -84,39 +83,33 @@
 		}
 	});
 
+	let selectedPictureFile: File | undefined = $state();
+
 	async function onSubmit(e: SubmitEvent) {
 		if (!$user) return;
 		saving = true;
 
-		const target = e.target as HTMLFormElement;
-		const formData = new FormData(target);
-		const picture = formData.get('picture') as File | undefined;
+		e.preventDefault();
 
 		try {
 			const updatedUser = await userService.updateUser({
 				name: newName,
-				picture: picture
+				picture: selectedPictureFile
 			});
 			updatedUser.github_access_token = $user?.github_access_token; // prevent overwriting with null
 			userService.setUser(updatedUser);
 			chipToasts.success('Profile updated');
+			selectedPictureFile = undefined;
 		} catch (err: any) {
 			console.error(err);
 			showError('Failed to update user', err);
 		}
 		saving = false;
 	}
 
-	function onPictureChange(e: Event) {
-		const target = e.target as HTMLInputElement;
-		const file = target.files?.[0];
-
-		if (file && fileTypes.includes(file.type)) {
-			userPicture = URL.createObjectURL(file);
-		} else {
-			userPicture = $user?.picture;
-			chipToasts.error('Please use a valid image file');
-		}
+	function onPictureChange(file: File) {
+		selectedPictureFile = file;
+		userPicture = URL.createObjectURL(file);
 	}
 
 	async function onDeleteClicked() {
@@ -143,22 +136,11 @@
 {#if $user}
 	<SectionCard>
 		<form onsubmit={onSubmit} class="profile-form">
-			<label id="profile-picture" class="profile-pic-wrapper focus-state" for="picture">
-				<input
-					onchange={onPictureChange}
-					type="file"
-					id="picture"
-					name="picture"
-					accept={fileTypes.join(',')}
-					class="hidden-input"
-				/>
-
-				{#if $user.picture}
-					<img class="profile-pic" src={userPicture} alt="" referrerpolicy="no-referrer" />
-				{/if}
-
-				<span class="profile-pic__edit-label text-11 text-semibold">Edit</span>
-			</label>
+			<ProfilePictureUpload
+				bind:picture={userPicture}
+				onFileSelect={onPictureChange}
+				onInvalidFileType={() => chipToasts.error('Please use a valid image file')}
+			/>
 
 			<div id="contact-info" class="contact-info">
 				<div class="contact-info__fields">
@@ -304,56 +286,6 @@
 		gap: 24px;
 	}
 
-	.hidden-input {
-		z-index: var(--z-ground);
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		cursor: pointer;
-		opacity: 0;
-	}
-
-	.profile-pic-wrapper {
-		position: relative;
-		width: 100px;
-		height: 100px;
-		overflow: hidden;
-		border-radius: var(--radius-m);
-		background-color: var(--clr-scale-pop-70);
-		transition: opacity var(--transition-medium);
-
-		&:hover,
-		&:focus-within {
-			& .profile-pic__edit-label {
-				opacity: 1;
-			}
-
-			& .profile-pic {
-				opacity: 0.8;
-			}
-		}
-	}
-
-	.profile-pic {
-		width: 100%;
-		height: 100%;
-
-		object-fit: cover;
-		background-color: var(--clr-scale-pop-70);
-	}
-
-	.profile-pic__edit-label {
-		position: absolute;
-		bottom: 8px;
-		left: 8px;
-		padding: 4px 6px;
-		border-radius: var(--radius-m);
-		background-color: var(--clr-scale-ntrl-20);
-		color: var(--clr-core-ntrl-100);
-		opacity: 0;
-		transition: opacity var(--transition-medium);
-	}
-
 	.contact-info {
 		display: flex;
 		flex: 1;

apps/desktop/src/lib/notifications/toasts.ts

@@ -8,7 +8,7 @@ import {
 } from '$lib/error/parser';
 import posthog from 'posthog-js';
 import { writable, type Writable } from 'svelte/store';
-import type { MessageStyle } from '$components/InfoMessage.svelte';
+import type { MessageStyle } from '@gitbutler/ui';
 
 type ExtraAction = {
 	label: string;

apps/web/postcss.config.js

@@ -5,7 +5,7 @@ import postcssNesting from 'postcss-nesting';
 import pxToRem from 'postcss-pxtorem';
 import path from 'path';
 
-const mediaQueriesCssPath = path.resolve('src/lib/styles/media-queries.css');
+const mediaQueriesCssPath = path.resolve('src/styles/media-queries.css');
 
 /** @type {import('postcss-load-config').Config} */
 const config = {