Merge pull request #5316 from gitbutlerapp/fix-dashed-lines

Fix dashed lines

apps/desktop/src/lib/components/DecorativeSplitView.svelte

@@ -220,13 +220,7 @@
 		width: 100%;
 		height: 2px;
 		border: none;
-		background: repeating-linear-gradient(
-			to right,
-			var(--fill-color),
-			var(--fill-color) 1px,
-			transparent 1px,
-			transparent 4px
-		);
+		background-image: linear-gradient(to right, var(--fill-color) 50%, transparent 50%);
 		background-size: 4px 4px;
 		opacity: 0.5;
 	}

apps/desktop/src/lib/components/NotOnGitButlerBranch.svelte

@@ -7,11 +7,11 @@
 	import derectionDoubtSvg from '$lib/assets/illustrations/direction-doubt.svg?raw';
 	import { ProjectsService, Project } from '$lib/backend/projects';
 	import { showError } from '$lib/notifications/toasts';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import * as toasts from '$lib/utils/toasts';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import type { BaseBranch } from '$lib/baseBranch/baseBranch';
 	import { goto } from '$app/navigation';
 

apps/desktop/src/lib/components/ProblemLoadingRepo.svelte

@@ -6,10 +6,10 @@
 	import { ProjectsService, Project } from '$lib/backend/projects';
 	import { showError } from '$lib/notifications/toasts';
 	import ProjectNameLabel from '$lib/shared/ProjectNameLabel.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext } from '@gitbutler/shared/context';
 	import Icon from '@gitbutler/ui/Icon.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import { goto } from '$app/navigation';
 
 	export let error: any = undefined;

apps/desktop/src/lib/components/ProjectNotFound.svelte

@@ -5,9 +5,9 @@
 	import notFoundSvg from '$lib/assets/illustrations/not-found.svg?raw';
 	import { ProjectsService } from '$lib/backend/projects';
 	import InfoMessage, { type MessageStyle } from '$lib/shared/InfoMessage.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 
 	const projectsService = getContext(ProjectsService);
 	const id = projectsService.getLastOpenedProject();

apps/desktop/src/lib/onboarding/CloneForm.svelte

@@ -3,11 +3,11 @@
 	import { ProjectsService } from '$lib/backend/projects';
 	import Section from '$lib/settings/Section.svelte';
 	import InfoMessage, { type MessageStyle } from '$lib/shared/InfoMessage.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { parseRemoteUrl } from '$lib/url/gitUrl';
 	import { getContext } from '@gitbutler/shared/context';
 	import { persisted } from '@gitbutler/shared/persisted';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import * as Sentry from '@sentry/sveltekit';
 	import { open } from '@tauri-apps/api/dialog';

apps/desktop/src/lib/settings/Section.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Spacer from '$lib/shared/Spacer.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
 
 	export let spacer = false;

apps/desktop/src/lib/settings/userPreferences/CloudForm.svelte

@@ -5,10 +5,10 @@
 	import WelcomeSigninAction from '$lib/components/WelcomeSigninAction.svelte';
 	import { projectAiGenEnabled } from '$lib/config/config';
 	import Section from '$lib/settings/Section.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { UserService } from '$lib/stores/user';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Toggle from '@gitbutler/ui/Toggle.svelte';
 	import { goto } from '$app/navigation';
 

apps/desktop/src/lib/settings/userPreferences/DetailsForm.svelte

@@ -3,10 +3,10 @@
 	import SectionCard from '$lib/components/SectionCard.svelte';
 	import Section from '$lib/settings/Section.svelte';
 	import Link from '$lib/shared/Link.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { User } from '$lib/stores/user';
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext, getContextStore } from '@gitbutler/shared/context';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textarea from '@gitbutler/ui/Textarea.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import Toggle from '@gitbutler/ui/Toggle.svelte';

apps/desktop/src/lib/settings/userPreferences/GitForm.svelte

@@ -5,8 +5,8 @@
 	import { Project, ProjectsService } from '$lib/backend/projects';
 	import SectionCard from '$lib/components/SectionCard.svelte';
 	import { platformName } from '$lib/platform/platform';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { getContext } from '@gitbutler/shared/context';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Toggle from '@gitbutler/ui/Toggle.svelte';
 
 	const project = getContext(Project);

apps/desktop/src/lib/stack/Stack.svelte

@@ -12,7 +12,6 @@
 	import ScrollableContainer from '$lib/scroll/ScrollableContainer.svelte';
 	import { SETTINGS, type Settings } from '$lib/settings/userSettings';
 	import Resizer from '$lib/shared/Resizer.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { intersectionObserver } from '$lib/utils/intersectionObserver';
 	import { BranchController } from '$lib/vbranches/branchController';
 	import { FileIdSelection } from '$lib/vbranches/fileIdSelection';
@@ -21,6 +20,7 @@
 	import { persisted } from '@gitbutler/shared/persisted';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import EmptyStatePlaceholder from '@gitbutler/ui/EmptyStatePlaceholder.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import lscache from 'lscache';
 	import { onMount } from 'svelte';
 	import type { Writable } from 'svelte/store';

apps/desktop/src/routes/settings/ai/+page.svelte

@@ -12,9 +12,9 @@
 	import Section from '$lib/settings/Section.svelte';
 	import InfoMessage from '$lib/shared/InfoMessage.svelte';
 	import RadioButton from '$lib/shared/RadioButton.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { UserService } from '$lib/stores/user';
 	import { getContext } from '@gitbutler/shared/context';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import { onMount, tick } from 'svelte';
 

apps/desktop/src/routes/settings/integrations/+page.svelte

@@ -2,9 +2,9 @@
 	import SettingsPage from '$lib/layout/SettingsPage.svelte';
 	import AuthorizationBanner from '$lib/settings/AuthorizationBanner.svelte';
 	import GithubIntegration from '$lib/settings/GithubIntegration.svelte';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { UserService } from '$lib/stores/user';
 	import { getContext } from '@gitbutler/shared/context';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 
 	const userService = getContext(UserService);
 	const user = userService.user;

apps/desktop/src/routes/settings/profile/+page.svelte

@@ -5,12 +5,12 @@
 	import WelcomeSigninAction from '$lib/components/WelcomeSigninAction.svelte';
 	import SettingsPage from '$lib/layout/SettingsPage.svelte';
 	import { showError } from '$lib/notifications/toasts';
-	import Spacer from '$lib/shared/Spacer.svelte';
 	import { UserService } from '$lib/stores/user';
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
+	import Spacer from '@gitbutler/ui/Spacer.svelte';
 	import Textbox from '@gitbutler/ui/Textbox.svelte';
 	import { goto } from '$app/navigation';
 

packages/ui/src/lib/Spacer.svelte

@@ -1,13 +1,15 @@
-<script lang="ts">
-	import { pxToRem } from '@gitbutler/ui/utils/pxToRem';
-
-	interface SpacerProps {
+<script lang="ts" module>
+	export interface Props {
 		margin?: number;
 		noLine?: boolean;
 		dotted?: boolean;
 	}
+</script>
 
-	const { margin = 12, noLine = false, dotted = false }: SpacerProps = $props();
+<script lang="ts">
+	import { pxToRem } from '$lib/utils/pxToRem';
+
+	const { margin = 12, noLine = false, dotted = false }: Props = $props();
 
 	function getMargins() {
 		if (margin === undefined) {
@@ -38,12 +40,7 @@
 
 	.divider.dotted {
 		opacity: 0.2;
-		background: repeating-linear-gradient(
-			90deg,
-			transparent,
-			transparent 2px,
-			var(--clr-scale-ntrl-0) 2px,
-			var(--clr-scale-ntrl-0) 4px
-		);
+		background-image: linear-gradient(to right, var(--clr-scale-ntrl-0) 50%, transparent 50%);
+		background-size: 4px 1px;
 	}
 </style>

packages/ui/src/stories/spacer/Spacer.stories.ts

@@ -0,0 +1,19 @@
+import SpacerDemo from './SpacerDemo.svelte';
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+const meta = {
+	title: 'Elements / Spacer',
+	component: SpacerDemo
+} satisfies Meta<SpacerDemo>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SpacerStory: Story = {
+	name: 'Spacer',
+	args: {
+		margin: 12,
+		noLine: false,
+		dotted: false
+	}
+};

packages/ui/src/stories/spacer/SpacerDemo.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Spacer, { type Props } from '$lib/Spacer.svelte';
+
+	const props: Props = $props();
+</script>
+
+<Spacer {...props} />

packages/ui/src/styles/components/commit-lines.css

@@ -60,13 +60,8 @@
 
 		&:before {
 			height: calc(100% + 1px);
-			background: repeating-linear-gradient(
-				0,
-				transparent,
-				transparent 2px,
-				var(--border-color) 2px,
-				var(--border-color) 4px
-			);
+			background: linear-gradient(to bottom, var(--border-color) 50%, transparent 50%);
+			background-size: 4px 4px;
 		}
 	}
 }