fix: properly assign tokens or dark mode
When I was working on this I learned about https://www.skeleton.dev/docs/tokens#color-pairing-chart and how the different colour values of https://www.skeleton.dev/docs/colors relate to each other. I went off and augmented every colour class to the respective dark mode according to the pairing. There is no predefined mapping for text-white resp. bg-white to replace it with black, so I had to fallback to dark:. Likewise with the placeholder: assignments. Another major aha moment came after studying https://github.com/skeletonlabs/skeleton/blob/%40skeletonlabs/skeleton%402.10.2/packages/skeleton/src/lib/utilities/LightSwitch/lightswitch.ts and realising, that I could put away my hack and instead use Svelte stores - or rather the wrappers Skeleton provided for convenience. This way, the LightSwitch I use in the Overlay popup now syncs up with the Appearance radios in the Settings! Hooray! I had to think a little bit harder how to handle Auto option. I feel like it's not 100% where I would like to be but Skeleton is looking at preferred colour scheme in a binary view and does not know anything other than light or dark. Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>
This commit is contained in:
André Jaenisch
parent
5af877bcaa
commit
c86902b2f8
24 changed files with 276 additions and 193 deletions
|
|
@ -31,11 +31,11 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
};
|
||||
</script>
|
||||
|
||||
<div class="flex w-full justify-between gap-4 border border-surface-100">
|
||||
<div class="flex w-full justify-between gap-4 border border-surface-100-800-token">
|
||||
<!-- Detail text -->
|
||||
<div class="flex flex-col flex-1">
|
||||
<span class="text-surface-500">{commit.name}</span>
|
||||
<span class="text-surface-400"
|
||||
<span class="text-surface-500-400-token">{commit.name}</span>
|
||||
<span class="text-surface-400-500-token"
|
||||
>{$_(i18n.relative_time, {
|
||||
values: { relativeTime: $date(new Date(commit.committed)) }
|
||||
})}</span
|
||||
|
|
@ -43,21 +43,27 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</div>
|
||||
<!-- SHA -->
|
||||
<div class="flex">
|
||||
<button type="button" class="btn-icon border border-surface-100 rounded bg-white self-start">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon border border-surface-100-800-token rounded bg-white dark:bg-black self-start"
|
||||
>
|
||||
<Copy16 fill="currentColor" />
|
||||
<span class="sr-only">{$_(i18n.actions.copy)}</span>
|
||||
</button>
|
||||
<!-- Since I cannot successfully define font-mono here, enforce a minimum width for equally sized buttons -->
|
||||
<button
|
||||
type="button"
|
||||
class="btn border border-surface-100 rounded bg-white min-w-32 self-start"
|
||||
class="btn border border-surface-100-800-token rounded bg-white dark:bg-black min-w-32 self-start"
|
||||
>
|
||||
{commit.hash.slice(0, 8)}
|
||||
</button>
|
||||
</div>
|
||||
<!-- Browse -->
|
||||
<div>
|
||||
<button type="button" class="btn-icon border border-surface-100 rounded bg-white">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon border border-surface-100-800-token rounded bg-white dark:bg-black"
|
||||
>
|
||||
<FileDirectory16 fill="currentColor" />
|
||||
<span class="sr-only">{$_(i18n.actions.browse)}</span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</script>
|
||||
|
||||
<div class="flex gap-6 -ms-6">
|
||||
<span class="bg-white">
|
||||
<span class="bg-white dark:bg-black">
|
||||
<GitCommit24 fill="currentColor" />
|
||||
</span>
|
||||
<span class="flex gap-6 -ms-3">
|
||||
|
|
|
|||
|
|
@ -17,15 +17,21 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</script>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
|
||||
<div
|
||||
class="flex flex-1 align-center justify-center gap-2 bg-white dark:bg-black border-surface-200-700-token"
|
||||
>
|
||||
<RepoForked24 fill="currentColor" />
|
||||
<span class="sr-only">{$_('page.profile.menu.actions.fork')}</span>
|
||||
</div>
|
||||
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
|
||||
<div
|
||||
class="flex flex-1 align-center justify-center gap-2 bg-white dark:bg-black border-surface-200-700-token"
|
||||
>
|
||||
<Star24 fill="currentColor" />
|
||||
<span class="sr-only">{$_('page.profile.menu.actions.star')}</span>
|
||||
</div>
|
||||
<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
|
||||
<div
|
||||
class="flex flex-1 align-center justify-center gap-2 bg-white dark:bg-black border-surface-200-700-token"
|
||||
>
|
||||
<EyeClosed24 fill="currentColor" />
|
||||
<span class="sr-only">{$_('page.profile.menu.actions.watch')}</span>
|
||||
<TriangleDown24 fill="currentColor" />
|
||||
|
|
|
|||
|
|
@ -28,14 +28,14 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
<div class="flex items-center content-stretch justify-start gap-4 ps-1">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-icon text-white bg-surface-400 rounded-full"
|
||||
class="btn btn-icon text-white dark:text-black bg-surface-400-500-token rounded-full"
|
||||
use:popup={popupClick}
|
||||
>
|
||||
<Person24 fill="currentColor" />
|
||||
<span class="sr-only">{$_('page.profile.menu.buttons.avatar')}</span>
|
||||
</button>
|
||||
<div class="flex flex-1 justify-around content-stretch bg-white">
|
||||
<div class="flex items-center content-stretch gap-1 bg-white">
|
||||
<div class="flex flex-1 justify-around content-stretch bg-white dark:bg-black">
|
||||
<div class="flex items-center content-stretch gap-1 bg-white dark:bg-black">
|
||||
<button class="btn btn-icon rounded-full">
|
||||
<IssueOpened24 fill="currentColor" />
|
||||
<span>
|
||||
|
|
@ -49,7 +49,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center content-stretch gap-1 bg-white">
|
||||
<div class="flex items-center content-stretch gap-1 bg-white dark:bg-black">
|
||||
<button class="btn btn-icon rounded-full">
|
||||
<GitPullRequest24 fill="currentColor" />
|
||||
<span>
|
||||
|
|
@ -63,7 +63,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center content-stretch gap-1 bg-white">
|
||||
<div class="flex items-center content-stretch gap-1 bg-white dark:bg-black">
|
||||
<button class="btn btn-icon rounded-full">
|
||||
<Bell24 fill="currentColor" />
|
||||
<span>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ This program is distributed in the hope that it will be useful, but WITHOUT ANY
|
|||
You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<script>
|
||||
import { getModalStore } from '@skeletonlabs/skeleton';
|
||||
import { getModalStore, LightSwitch } from '@skeletonlabs/skeleton';
|
||||
import { _ } from 'svelte-i18n';
|
||||
import { Gear24, Info24, Moon24, Person24, SignOut24 } from 'svelte-octicons';
|
||||
|
||||
|
|
@ -26,28 +26,33 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col bg-white border-surface-300 border-rounded drop-shadow px-4 py-2">
|
||||
<div class="bg-white flex gap-4">
|
||||
<Person24 fill="currentColor" class="text-white bg-surface-400 rounded-full" />
|
||||
<span class="text-surface-500 -mb-2">{$_('overlay.avatar.profile')}</span>
|
||||
<div
|
||||
class="flex flex-col bg-white dark:bg-black border-surface-300-600 border-rounded drop-shadow px-4 py-2"
|
||||
>
|
||||
<div class="bg-white dark:bg-black flex gap-4">
|
||||
<Person24
|
||||
fill="currentColor"
|
||||
class="text-white dark:text-black bg-surface-400-500-token rounded-full"
|
||||
/>
|
||||
<span class="text-surface-500-400-token -mb-2">{$_('overlay.avatar.profile')}</span>
|
||||
</div>
|
||||
<div class="bg-white flex gap-4">
|
||||
<div class="bg-white dark:bg-black flex gap-4">
|
||||
<Gear24 fill="currentColor" />
|
||||
<button type="button" class="text-surface-500 -mb-2" on:click={openSettingsOnClick}
|
||||
<button type="button" class="text-surface-500-400-token -mb-2" on:click={openSettingsOnClick}
|
||||
>{$_('overlay.avatar.settings')}</button
|
||||
>
|
||||
</div>
|
||||
<div class="bg-white flex gap-4">
|
||||
<div class="bg-white dark:bg-black flex gap-4">
|
||||
<Moon24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2">{$_('overlay.avatar.dark_mode')}</span>
|
||||
<span>Slider missing</span>
|
||||
<span class="text-surface-500-400-token -mb-2">{$_('overlay.avatar.dark_mode')}</span>
|
||||
<LightSwitch />
|
||||
</div>
|
||||
<div class="bg-white flex gap-4">
|
||||
<div class="bg-white dark:bg-black flex gap-4">
|
||||
<Info24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2">{$_('overlay.avatar.about_anvil')}</span>
|
||||
<span class="text-surface-500-400-token -mb-2">{$_('overlay.avatar.about_anvil')}</span>
|
||||
</div>
|
||||
<div class="bg-white flex gap-4">
|
||||
<div class="bg-white dark:bg-black flex gap-4">
|
||||
<SignOut24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2">{$_('overlay.avatar.sign_out')}</span>
|
||||
<span class="text-surface-500-400-token -mb-2">{$_('overlay.avatar.sign_out')}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
<AppRail aspectRatio="auto" gap="gap-8" height="h-auto" width="w-[230px]" spacing="my-2">
|
||||
<svelte:fragment slot="lead">
|
||||
<AppRailTile
|
||||
regionLabel="!text-3xl text-surface-500 bg-surface-100 float-start w-full text-start ps-8 pt-8 -my-2"
|
||||
regionLabel="!text-3xl text-surface-500-400-token bg-surface-100-800-token float-start w-full text-start ps-8 pt-8 -my-2"
|
||||
>{$_('settings.headline')}</AppRailTile
|
||||
>
|
||||
</svelte:fragment>
|
||||
|
|
@ -37,8 +37,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
name="profile"
|
||||
value="profile"
|
||||
on:change={onTileChanged}
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500"
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500-400-token"
|
||||
title={$_('settings.profile.label')}
|
||||
>
|
||||
<svelte:fragment slot="lead">
|
||||
|
|
@ -51,8 +51,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
name="account"
|
||||
value="account"
|
||||
on:change={onTileChanged}
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500"
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500-400-token"
|
||||
title={$_('settings.account.label')}
|
||||
>
|
||||
<svelte:fragment slot="lead">
|
||||
|
|
@ -65,8 +65,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
name="ssh_gpg_keys"
|
||||
value="ssh_gpg_keys"
|
||||
on:change={onTileChanged}
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500"
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500-400-token"
|
||||
title={$_('settings.ssh_gpg_keys.label')}
|
||||
>
|
||||
<svelte:fragment slot="lead">
|
||||
|
|
@ -79,8 +79,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
name="appearance"
|
||||
value="appearance"
|
||||
on:change={onTileChanged}
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500"
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500-400-token"
|
||||
title={$_('settings.appearance.label')}
|
||||
>
|
||||
<svelte:fragment slot="lead">
|
||||
|
|
@ -93,8 +93,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
name="notifications"
|
||||
value="notifications"
|
||||
on:change={onTileChanged}
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500 !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500"
|
||||
regionLabel="float-start ps-2 py-1 font-normal text-surface-500-400-token !text-xl"
|
||||
regionLead="float-start ps-8 text-surface-500-400-token"
|
||||
title={$_('settings.notifications.label')}
|
||||
>
|
||||
<svelte:fragment slot="lead">
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
import MainMenuDetails from './MainMenuDetails.svelte';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-6 h-full px-8 py-6 bg-surface-50 border-surface-200">
|
||||
<div
|
||||
class="flex flex-col gap-6 h-full px-8 py-6 bg-surface-50-900-token border-surface-200-700-token"
|
||||
>
|
||||
<MainMenuSummary />
|
||||
<MainMenuDetails />
|
||||
<MainMenuActions />
|
||||
|
|
|
|||
|
|
@ -32,73 +32,96 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</script>
|
||||
|
||||
<div class="flex -mx-2">
|
||||
<div class="flex flex-1 gap-2 bg-surface-50 border-surface-300 drop-shadow p-2">
|
||||
<div
|
||||
class="flex flex-1 gap-2 bg-surface-50-900-token border-surface-300-600-token drop-shadow p-2"
|
||||
>
|
||||
<Repo24 fill="currentColor" />
|
||||
<span class="text-primary-600 semibold flex-1 self-center"> Project Name </span>
|
||||
<TriangleDown24 fill="currentColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col -mt-6">
|
||||
<div class="flex flex-col bg-white border-surface-300 rounded-border px-4">
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div
|
||||
class="flex flex-col bg-white dark:bg-black border-surface-300-600-token rounded-border px-4"
|
||||
>
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<Code24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.repository')}</span
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.repository')}</span
|
||||
>
|
||||
<ChevronDown24 fill="currentColor" />
|
||||
</div>
|
||||
<div class="flex flex-col ps-4">
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<FileDirectory24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.files')}</span>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white">
|
||||
<GitBranch24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.branches')}</span
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.files')}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<GitBranch24 fill="currentColor" />
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.branches')}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<GitCommit24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.commits')}</span>
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.commits')}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<Tag24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.tags')}</span>
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.tags')}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<IssueOpened24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.issues')}</span>
|
||||
<span class="text-surface-500 text-center bg-secondary-200 rounded-full min-w-6">2</span>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white">
|
||||
<GitPullRequest24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.merge_requests')}</span
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.issues')}</span
|
||||
>
|
||||
<span class="text-surface-500 text-center bg-secondary-200 rounded-full min-w-6 self-baseline"
|
||||
<span class="text-surface-500-400-token text-center bg-secondary-200 rounded-full min-w-6"
|
||||
>2</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<GitPullRequest24 fill="currentColor" />
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.merge_requests')}</span
|
||||
>
|
||||
<span
|
||||
class="text-surface-500-400-token text-center bg-secondary-200 rounded-full min-w-6 self-baseline"
|
||||
>2</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<Person24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.people')}</span>
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.people')}</span
|
||||
>
|
||||
<ChevronDown24 fill="currentColor" />
|
||||
</div>
|
||||
<div class="flex flex-col ps-4">
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<PersonAdd24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.roles')}</span>
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.roles')}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<CommentDiscussion24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1"
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.moderation')}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-4 bg-white">
|
||||
<div class="flex gap-4 bg-white dark:bg-black">
|
||||
<ListUnordered24 fill="currentColor" />
|
||||
<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.overview')}</span>
|
||||
<span class="text-surface-500-400-token -mb-2 flex-1"
|
||||
>{$_('page.profile.menu.details.overview')}</span
|
||||
>
|
||||
<ChevronDown24 fill="currentColor" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
};
|
||||
</script>
|
||||
|
||||
<form class="bg-surface-100 h-8 flex flex-col justify-center px-4">
|
||||
<button type="submit" class="flex submit text-surface-400">
|
||||
<form class="bg-surface-100-800-token h-8 flex flex-col justify-center px-4">
|
||||
<button type="submit" class="flex submit text-surface-400-500-token">
|
||||
{$_(i18n.submit)}
|
||||
<TriangleDown24 fill="currentColor" class="ms-4 self-center" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -29,20 +29,20 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
<ChevronLeft24 fill="currentColor" />
|
||||
{$_(i18n.previous)}
|
||||
</a>
|
||||
<a href="?page=1" class="text-surface-500">1</a>
|
||||
<a href="?page=2" class="text-surface-500">2</a>
|
||||
<a href="?page=3" class="text-surface-500">3</a>
|
||||
<a href="?page=1" class="text-surface-500-400-token">1</a>
|
||||
<a href="?page=2" class="text-surface-500-400-token">2</a>
|
||||
<a href="?page=3" class="text-surface-500-400-token">3</a>
|
||||
<a
|
||||
href="?page=4"
|
||||
class="bg-primary-500 text-white rounded h-8 w-8 flex justify-center items-center"
|
||||
class="bg-primary-500 text-white dark:text-black rounded h-8 w-8 flex justify-center items-center"
|
||||
>
|
||||
4
|
||||
</a>
|
||||
<a href="?page=5" class="text-surface-500">5</a>
|
||||
<a href="?page=6" class="text-surface-500">6</a>
|
||||
<a href="?page=5" class="text-surface-500-400-token">5</a>
|
||||
<a href="?page=6" class="text-surface-500-400-token">6</a>
|
||||
<span>…</span>
|
||||
<a href="?page=17" class="text-surface-500">17</a>
|
||||
<a href="?page=18" class="text-surface-500">18</a>
|
||||
<a href="?page=17" class="text-surface-500-400-token">17</a>
|
||||
<a href="?page=18" class="text-surface-500-400-token">18</a>
|
||||
<a href="?page=+1" class="flex gap-2 text-primary-500">
|
||||
{$_(i18n.next)}
|
||||
<ChevronRight24 fill="currentColor" />
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
};
|
||||
</script>
|
||||
|
||||
<div class="flex bg-white border border-surface-100 p-4">
|
||||
<div class="flex bg-white dark:bg-black border border-surface-100 p-4">
|
||||
<!-- Left -->
|
||||
<div class="flex flex-col flex-grow ps-10">
|
||||
<!-- Name + Icon -->
|
||||
|
|
@ -58,7 +58,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
<ul class="ms-2 gap-4">
|
||||
{#each collaborators as member}
|
||||
<li title={member.preferredUsername}>
|
||||
<div class="bg-surface-500 text-white rounded-full">
|
||||
<div class="bg-surface-500-400-token text-white dark:text-black rounded-full">
|
||||
<Person24 fill="currentColor" />
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</script>
|
||||
|
||||
<form>
|
||||
<button type="submit" class="flex submit text-surface-400">
|
||||
<button type="submit" class="flex submit text-surface-400-500-token">
|
||||
<Filter24 fill="currentColor" class="ms-4 self-center" />
|
||||
{$_(i18n.submit)}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -31,10 +31,10 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
id="search"
|
||||
name="search"
|
||||
type="search"
|
||||
class="bg-surface-200 border-none"
|
||||
class="bg-surface-200-700-token border-none"
|
||||
placeholder={$_(i18n.placeholder)}
|
||||
/>
|
||||
<button type="submit" class="submit bg-surface-400 text-white w-40">
|
||||
<button type="submit" class="submit bg-surface-400-500-token text-white dark:text-black w-40">
|
||||
{$_(i18n.submit)}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,31 +19,13 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
import SettingsProfile from './SettingsProfile.svelte';
|
||||
|
||||
let activeSetting = 'profile';
|
||||
let activeTheme = 'auto';
|
||||
|
||||
function onTileChanged(ev) {
|
||||
activeSetting = ev.detail;
|
||||
}
|
||||
|
||||
function onThemeSwitched(ev) {
|
||||
activeTheme = ev.detail;
|
||||
// This is a hack.
|
||||
// Skeleton relies on Cookies and a hook:
|
||||
// https://github.com/skeletonlabs/skeleton/blob/%40skeletonlabs/skeleton%402.10.2/sites/skeleton.dev/src/hooks.server.ts#L16
|
||||
// Svelte itself features a svelte:document special element that must
|
||||
// only be used at the top level - except SvelteKit has app.html
|
||||
// as a static file :[]
|
||||
// Ideas welcome!
|
||||
if (window?.document?.documentElement) {
|
||||
window.document.documentElement.classList.remove('auto');
|
||||
window.document.documentElement.classList.remove('dark');
|
||||
window.document.documentElement.classList.remove('light');
|
||||
window.document.documentElement.classList.add(activeTheme);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex bg-surface-50 min-h-[900px]">
|
||||
<div class="flex bg-surface-50-900-token min-h-[900px]">
|
||||
<SettingsSidebar on:switch-settings={onTileChanged} />
|
||||
|
||||
{#if activeSetting === 'profile'}
|
||||
|
|
@ -53,6 +35,6 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
{:else if activeSetting === 'ssh_gpg_keys'}
|
||||
<SettingsKeys />
|
||||
{:else if activeSetting === 'appearance'}
|
||||
<SettingsAppearance on:switch-theme={onThemeSwitched} />
|
||||
<SettingsAppearance />
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,26 +15,32 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
import { _ } from 'svelte-i18n';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100">
|
||||
<div class="flex text-surface-500 text-xl font-semibold">{$_('settings.account.headline')}</div>
|
||||
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
|
||||
<div class="flex text-surface-500-400-token text-xl font-semibold">
|
||||
{$_('settings.account.headline')}
|
||||
</div>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div>
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.account.f2.label')}</span>
|
||||
<span class="text-surface-500-400-token font-semibold">{$_('settings.account.f2.label')}</span
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={$_('settings.account.f2.placeholder')}
|
||||
class="input bg-white placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.account.password.label')}</span>
|
||||
<input type="password" class="input bg-white" />
|
||||
<span class="text-surface-500-400-token font-semibold"
|
||||
>{$_('settings.account.password.label')}</span
|
||||
>
|
||||
<input type="password" class="input bg-white dark:bg-black" />
|
||||
<a>{$_('settings.account.password.reset')}</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.account.verification.label')}</span
|
||||
<span class="text-surface-500-400-token font-semibold"
|
||||
>{$_('settings.account.verification.label')}</span
|
||||
>
|
||||
<input type="text" class="input bg-white" />
|
||||
<input type="text" class="input bg-white dark:bg-black" />
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button class="btn variant-filled-warning">{$_('settings.account.delete')}</button>
|
||||
|
|
|
|||
|
|
@ -12,31 +12,53 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
-->
|
||||
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { modeCurrent, getModeOsPrefers, setModeCurrent } from '@skeletonlabs/skeleton';
|
||||
import { _ } from 'svelte-i18n';
|
||||
|
||||
const dispatcher = createEventDispatcher();
|
||||
export let activeTheme = 'auto';
|
||||
modeCurrent.subscribe(function (isLight) {
|
||||
activeTheme = isLight ? 'light' : 'dark';
|
||||
});
|
||||
|
||||
function onThemeSwitched(ev) {
|
||||
dispatcher('switch-theme', ev.target.value);
|
||||
function onThemeSwitched({ target }) {
|
||||
const { value } = target;
|
||||
let theme = value === 'light';
|
||||
if (value === 'auto') {
|
||||
theme = getModeOsPrefers();
|
||||
}
|
||||
setModeCurrent(theme);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col flex-1 gap-6 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
|
||||
<div class="text-surface-500-300-token text-xl font-semibold">
|
||||
<div class="text-surface-500-400-token text-xl font-semibold">
|
||||
{$_('settings.appearance.headline')}
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="text-surface-500-300-token font-semibold py-1">
|
||||
<div class="text-surface-500-400-token font-semibold py-1">
|
||||
{$_('settings.appearance.theme.headline')}
|
||||
</div>
|
||||
<div class="flex gap-8">
|
||||
<label class="label flex items-center space-x-2">
|
||||
<input type="radio" class="me-2" name="theme" value="light" on:change={onThemeSwitched} />
|
||||
<input
|
||||
type="radio"
|
||||
class="me-2"
|
||||
name="theme"
|
||||
value="light"
|
||||
checked={activeTheme === 'light'}
|
||||
on:change={onThemeSwitched}
|
||||
/>
|
||||
{$_('settings.appearance.theme.light')}
|
||||
</label>
|
||||
<label class="label flex items-center space-x-2">
|
||||
<input type="radio" class="me-2" name="theme" value="dark" on:change={onThemeSwitched} />
|
||||
<input
|
||||
type="radio"
|
||||
class="me-2"
|
||||
name="theme"
|
||||
value="dark"
|
||||
checked={activeTheme === 'dark'}
|
||||
on:change={onThemeSwitched}
|
||||
/>
|
||||
{$_('settings.appearance.theme.dark')}
|
||||
</label>
|
||||
<label class="label flex items-center space-x-2">
|
||||
|
|
@ -45,7 +67,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
class="me-2"
|
||||
name="theme"
|
||||
value="auto"
|
||||
checked
|
||||
checked={activeTheme === 'auto'}
|
||||
on:change={onThemeSwitched}
|
||||
/>
|
||||
{$_('settings.appearance.theme.auto')}
|
||||
|
|
@ -54,13 +76,13 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<div class="text-surface-500-300-token font-semibold py-1">
|
||||
<div class="text-surface-500-400-token font-semibold py-1">
|
||||
{$_('settings.appearance.tab_indent.headline')}
|
||||
</div>
|
||||
<p class="text-sm">{$_('settings.appearance.tab_indent.intro')}</p>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white text-center text-surface-500-300-token max-w-16"
|
||||
class="input bg-white dark:bg-black text-center text-surface-500-400-token max-w-16"
|
||||
name="tab_indent"
|
||||
value="4"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -35,13 +35,13 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
];
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100">
|
||||
<div class="flex text-surface-500 text-xl font-semibold">
|
||||
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
|
||||
<div class="flex text-surface-500-400-token text-xl font-semibold">
|
||||
{$_('settings.ssh_gpg_keys.headline')}
|
||||
</div>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex text-surface-500 font-semibold py-1">
|
||||
<div class="flex text-surface-500-400-token font-semibold py-1">
|
||||
{$_('settings.ssh_gpg_keys.ssh.headline')}
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
|
|
@ -51,8 +51,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
class="flex border-b border-surface-200 last:border-b-0 items-center justify-between gap-4 pb-2"
|
||||
>
|
||||
<Key24 fill="currentColor" />
|
||||
<span class="text-surface-500 flex-1 shrink-0">{key.title}</span>
|
||||
<code class="text-surface-500 shrink-0">{key.fingerprint}</code>
|
||||
<span class="text-surface-500-400-token flex-1 shrink-0">{key.title}</span>
|
||||
<code class="text-surface-500-400-token shrink-0">{key.fingerprint}</code>
|
||||
<button type="button" class="btn font-semibold variant-filled-warning"
|
||||
>{$_('settings.ssh_gpg_keys.ssh.remove')}</button
|
||||
>
|
||||
|
|
@ -61,21 +61,23 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
|
||||
placeholder={$_('settings.ssh_gpg_keys.ssh.title.placeholder')}
|
||||
/>
|
||||
<textarea
|
||||
placeholder={$_('settings.ssh_gpg_keys.ssh.key.placeholder')}
|
||||
rows="4"
|
||||
class="placeholder:text-surface-300"
|
||||
class="bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
|
||||
></textarea>
|
||||
<button type="button" class="btn font-semibold text-white variant-filled-success self-end"
|
||||
<button
|
||||
type="button"
|
||||
class="btn font-semibold text-white dark:text-black variant-filled-success self-end"
|
||||
>{$_('settings.ssh_gpg_keys.ssh.add')}</button
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<div class="flex text-surface-500 font-semibold py-1">
|
||||
<div class="flex text-surface-500-400-token font-semibold py-1">
|
||||
{$_('settings.ssh_gpg_keys.gpg.headline')}
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
|
|
@ -85,8 +87,10 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
class="flex border-b border-surface-200 last:border-b-0 items-center justify-between gap-4 pb-2"
|
||||
>
|
||||
<Key24 fill="currentColor" />
|
||||
<span class="text-surface-500 flex-1 shrink-0">{key.title}</span>
|
||||
<code class="text-surface-500 font-medium shrink-0 w-[245px]">{key.fingerprint}</code>
|
||||
<span class="text-surface-500-400-token flex-1 shrink-0">{key.title}</span>
|
||||
<code class="text-surface-500-400-token font-medium shrink-0 w-[245px]"
|
||||
>{key.fingerprint}</code
|
||||
>
|
||||
<button type="button" class="btn font-semibold variant-filled-warning"
|
||||
>{$_('settings.ssh_gpg_keys.gpg.remove')}</button
|
||||
>
|
||||
|
|
@ -95,15 +99,17 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
|
||||
placeholder={$_('settings.ssh_gpg_keys.gpg.title.placeholder')}
|
||||
/>
|
||||
<textarea
|
||||
placeholder={$_('settings.ssh_gpg_keys.gpg.key.placeholder')}
|
||||
rows="4"
|
||||
class="placeholder:text-surface-300"
|
||||
class="bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-600"
|
||||
></textarea>
|
||||
<button type="button" class="btn font-semibold text-white variant-filled-success self-end"
|
||||
<button
|
||||
type="button"
|
||||
class="btn font-semibold text-white dark:text-black variant-filled-success self-end"
|
||||
>{$_('settings.ssh_gpg_keys.gpg.add')}</button
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,16 +16,23 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
import { Person24, Upload16, XCircleFill12 } from 'svelte-octicons';
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100">
|
||||
<div class="flex text-surface-500 text-xl font-semibold">{$_('settings.profile.headline')}</div>
|
||||
<div class="flex flex-col flex-1 gap-4 pe-8 pb-8 ps-8 pt-20 bg-surface-100-800-token">
|
||||
<div class="flex text-surface-500-400-token text-xl font-semibold">
|
||||
{$_('settings.profile.headline')}
|
||||
</div>
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="text-surface-500 font-semibold">{$_('settings.profile.avatar.headline')}</div>
|
||||
<div class="text-surface-500-400-token font-semibold">
|
||||
{$_('settings.profile.avatar.headline')}
|
||||
</div>
|
||||
<div class="flex flex-col px-2">
|
||||
<div class="flex gap-4">
|
||||
<Person24 fill="currentColor" class="h-16 w-16 text-white bg-surface-400 rounded-full" />
|
||||
<Person24
|
||||
fill="currentColor"
|
||||
class="h-16 w-16 text-white dark:text-surface-300 bg-surface-400-500-token rounded-full"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="btn flex gap-4 justify-between px-4 bg-surface-50 border-surface-100"
|
||||
class="btn flex gap-4 justify-between px-4 text-surface-900-50-token bg-surface-50-900-token border-surface-100-800-token"
|
||||
>
|
||||
<Upload16 fill="currentColor" />
|
||||
<span>{$_('settings.profile.avatar.upload')}</span>
|
||||
|
|
@ -41,78 +48,85 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
<div>
|
||||
<div class="flex gap-8">
|
||||
<div class="flex flex-col gap-2 grow">
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.profile.name.label')}</span>
|
||||
<span class="text-surface-500-400-token font-semibold"
|
||||
>{$_('settings.profile.name.label')}</span
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
placeholder={$_('settings.profile.name.placeholder')}
|
||||
class="input bg-white placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 flex-1 shrink basis-40">
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.profile.pronouns.label')}</span
|
||||
<span class="text-surface-500-400-token font-semibold"
|
||||
>{$_('settings.profile.pronouns.label')}</span
|
||||
>
|
||||
<input type="text" class="input bg-white" />
|
||||
<input type="text" class="input bg-white dark:bg-black" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<span class="text-surface-500 font-semibold">{$_('settings.profile.bio.label')}</span>
|
||||
<span class="text-surface-500-400-token font-semibold"
|
||||
>{$_('settings.profile.bio.label')}</span
|
||||
>
|
||||
<textarea
|
||||
placeholder={$_('settings.profile.bio.placeholder')}
|
||||
rows="4"
|
||||
class="placeholder:text-surface-300"
|
||||
class="placeholder:text-surface-300 dark:placeholder:text-surface-400 bg-white dark:bg-black"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="text-surface-500 font-semibold">{$_('settings.profile.extra.headline')}</div>
|
||||
<div class="text-surface-500">{$_('settings.profile.extra.hint')}</div>
|
||||
<div class="text-surface-500-400-token font-semibold">
|
||||
{$_('settings.profile.extra.headline')}
|
||||
</div>
|
||||
<div class="text-surface-500-400-token">{$_('settings.profile.extra.hint')}</div>
|
||||
<div class="flex gap-2 py-1">
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white shrink basis-40 placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
placeholder={$_('settings.profile.extra.label.placeholder')}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white grow placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black grow placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
placeholder={$_('settings.profile.extra.content.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2 py-1">
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white shrink basis-40 placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
placeholder={$_('settings.profile.extra.label.placeholder')}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white grow placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black grow placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
placeholder={$_('settings.profile.extra.content.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2 py-1">
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white shrink basis-40 placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
placeholder={$_('settings.profile.extra.label.placeholder')}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white grow placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black grow placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
placeholder={$_('settings.profile.extra.content.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2 py-1">
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white shrink basis-40 placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black shrink basis-40 placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
placeholder={$_('settings.profile.extra.label.placeholder')}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class="input bg-white grow placeholder:text-surface-300"
|
||||
class="input bg-white dark:bg-black grow placeholder:text-surface-300 dark:placeholder:text-surface-400"
|
||||
placeholder={$_('settings.profile.extra.content.placeholder')}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</script>
|
||||
|
||||
<form>
|
||||
<button type="submit" class="flex submit text-surface-400">
|
||||
<button type="submit" class="flex submit text-surface-400-500-token">
|
||||
<Filter24 fill="currentColor" class="ms-4 self-center" />
|
||||
{$_(i18n.submit)}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -48,11 +48,11 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
|
||||
<main class="flex h-full">
|
||||
<div
|
||||
class="max-w-[400px] mx-auto flex flex-col self-center justify-start items-center content-stretch bg-surface-50 border border-rounded border-surface-200 drop-shadow p-8"
|
||||
class="max-w-[400px] mx-auto flex flex-col self-center justify-start items-center content-stretch bg-surface-50-900-token border border-rounded border-surface-200-700-token drop-shadow p-8"
|
||||
>
|
||||
<AnvilLogo i18n={i18n.logo} class="items-center w-[77px]" />
|
||||
<h1 class="font-semibold text-4xl text-surface-500">{$_(i18n.headline)}</h1>
|
||||
<p class="text-surface-500">{$_(i18n.intro)}</p>
|
||||
<h1 class="font-semibold text-4xl text-surface-500-400-token">{$_(i18n.headline)}</h1>
|
||||
<p class="text-surface-500-400-token">{$_(i18n.intro)}</p>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<a href="/account/create" class="btn variant-filled-primary" data-sb-kind={sbCreate}
|
||||
|
|
@ -68,7 +68,8 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<a href="/" class="btn bg-initial text-surface-500" data-sb-kind={sbReset}>{$_(i18n.reset)}</a
|
||||
<a href="/" class="btn bg-initial text-surface-500-400-token" data-sb-kind={sbReset}
|
||||
>{$_(i18n.reset)}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,19 +43,19 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
|
||||
<table class="w-4/5 min-w-96 px-4 mx-auto">
|
||||
<thead>
|
||||
<tr class="flex justify-between gap-4 bg-surface-100 h-8">
|
||||
<th class="flex text-surface-400 mx-4">
|
||||
<tr class="flex justify-between gap-4 bg-surface-100-800-token h-8">
|
||||
<th class="flex text-surface-400-500-token mx-4">
|
||||
{$_(i18n.heading.name)}
|
||||
<TriangleDown24 fill="currentColor" />
|
||||
</th>
|
||||
<th class="text-surface-400 mx-4">
|
||||
<th class="text-surface-400-500-token mx-4">
|
||||
{$_(i18n.heading.lastUpdated)}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each projects as project}
|
||||
<tr class="flex justify-between gap-4 bg-white border">
|
||||
<tr class="flex justify-between gap-4 bg-white dark:bg-black border">
|
||||
<td class="flex mx-4 gap-4">
|
||||
<Repo24 fill="currentColor" />
|
||||
<div class="flex flex-col">
|
||||
|
|
@ -67,7 +67,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="text-surface-400">
|
||||
<div class="text-surface-400-500-token">
|
||||
{project.description}
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
|
|
@ -82,18 +82,27 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
<td>
|
||||
<div class="flex flex-col px-4 py-4">
|
||||
<div class="flex justify-between gap-4">
|
||||
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2">
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-white dark:bg-black text-surface-200-700-token rounded border px-4 py-2"
|
||||
>
|
||||
<RepoForked16 fill="currentColor" />
|
||||
</button>
|
||||
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2">
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-white dark:bg-black text-surface-200-700-token rounded border px-4 py-2"
|
||||
>
|
||||
<Star16 fill="currentColor" />
|
||||
</button>
|
||||
<button type="submit" class="bg-white text-surface-200 rounded border px-4 py-2 flex">
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-white dark:bg-black text-surface-200-700-token rounded border px-4 py-2 flex"
|
||||
>
|
||||
<EyeClosed16 fill="currentColor" />
|
||||
<TriangleDown16 fill="currentColor" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-surface-400">
|
||||
<div class="text-surface-400-500-token">
|
||||
{$_(i18n.table.updated, {
|
||||
values: {
|
||||
relativeTime: project.lastUpdated.toISOString()
|
||||
|
|
|
|||
|
|
@ -61,13 +61,13 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
|
||||
<section class="w-full">
|
||||
<form
|
||||
class="w-96 flex flex-col gap-6 mx-auto px-8 py-8 bg-surface-100 border border-surface-300"
|
||||
class="w-96 flex flex-col gap-6 mx-auto px-8 py-8 bg-surface-100-800-token border border-surface-300-600-token"
|
||||
name="import-project"
|
||||
>
|
||||
<h2 class="h2 text-surface-500">{$_(i18n.heading)}</h2>
|
||||
<p class="text-surface-500">{$_(i18n.intro)}</p>
|
||||
<h2 class="h2 text-surface-500-400-token">{$_(i18n.heading)}</h2>
|
||||
<p class="text-surface-500-400-token">{$_(i18n.intro)}</p>
|
||||
<div class="flex flex-col gap-1">
|
||||
<h3 class="text-surface-500">
|
||||
<h3 class="text-surface-500-400-token">
|
||||
<label class="label" for="project-name">
|
||||
{$_(i18n.form.fields.name.label)}
|
||||
<span class="required">*</span>
|
||||
|
|
@ -76,21 +76,21 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
<input
|
||||
id="project-name"
|
||||
name="project-name"
|
||||
class="input input-error"
|
||||
class="input input-error dark:text-warning-400 dark:bg-warning-900 dark:border-warning-400"
|
||||
type="text"
|
||||
placeholder={$_(i18n.form.fields.name.placeholder)}
|
||||
/>
|
||||
<div class="flex gap-2 items-center text-error-500">
|
||||
<div class="flex gap-2 items-center text-error-500 dark:text-error:400">
|
||||
<AlertFill16 fill="currentColor" />
|
||||
{$_(i18n.form.fields.name.error)}
|
||||
</div>
|
||||
<div class="text-surface-400">
|
||||
domain.example/projects/<span class="text-surface-500">NameUpdateRealtime</span>
|
||||
<div class="text-surface-400-500-token">
|
||||
domain.example/projects/<span class="text-surface-500-400-token">NameUpdateRealtime</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-surface-500">
|
||||
<h3 class="text-surface-500-400-token">
|
||||
<label class="label" for="project-description">
|
||||
{$_(i18n.form.fields.description.label)}
|
||||
</label>
|
||||
|
|
@ -104,14 +104,14 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-surface-500">{$_(i18n.form.avatar)}</h3>
|
||||
<h3 class="text-surface-500-400-token">{$_(i18n.form.avatar)}</h3>
|
||||
<div class="flex">
|
||||
<span class="bg-surface-300 flex justify-center items-center h-12 w-12">
|
||||
<span class="bg-surface-300-600-token flex justify-center items-center h-12 w-12">
|
||||
<Repo24 class="h-6 w-6" />
|
||||
</span>
|
||||
<label
|
||||
for="project-avatar"
|
||||
class="h-12 flex flex-1 gap-2 items-center justify-center px-4 bg-surface-025 text-surface-400"
|
||||
class="h-12 flex flex-1 gap-2 items-center justify-center px-4 text-surface-400-500-token"
|
||||
>
|
||||
<Upload16 fill="currentColor" />
|
||||
{$_(i18n.form.fields.avatar.label)}
|
||||
|
|
@ -127,7 +127,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<h3 class="text-surface-500">
|
||||
<h3 class="text-surface-500-400-token">
|
||||
{$_(i18n.form.components)}
|
||||
</h3>
|
||||
<div>
|
||||
|
|
@ -137,7 +137,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
class="input h-6 w-6"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label for="project-repository" class="label inline text-surface-500">
|
||||
<label for="project-repository" class="label inline text-surface-500-400-token">
|
||||
{$_(i18n.form.fields.repository.label)}
|
||||
</label>
|
||||
<input
|
||||
|
|
@ -152,13 +152,13 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
</div>
|
||||
<div>
|
||||
<input id="project-issues" name="project-issues" class="input h-6 w-6" type="checkbox" />
|
||||
<label for="project-issues" class="label inline text-surface-500">
|
||||
<label for="project-issues" class="label inline text-surface-500-400-token">
|
||||
{$_(i18n.form.fields.issues.label)}
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<input id="project-pr" name="project-pr" class="input h-6 w-6" type="checkbox" />
|
||||
<label for="project-pr" class="label inline text-surface-500">
|
||||
<label for="project-pr" class="label inline text-surface-500-400-token">
|
||||
{$_(i18n.form.fields.pr.label)}
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ You should have received a copy of the GNU Affero General Public License along w
|
|||
};
|
||||
</script>
|
||||
|
||||
<section class="w-full flex flex-col gap-8 bg-white">
|
||||
<section class="w-full flex flex-col gap-8 bg-white dark:bg-black">
|
||||
<div class="flex mx-auto w-full items-center justify-center">
|
||||
<Search i18n={i18n.search} />
|
||||
<Projects i18n={i18n.projects} />
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
<script>
|
||||
import { locale } from 'svelte-i18n';
|
||||
import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
|
||||
import { initializeStores, storePopup, Modal } from '@skeletonlabs/skeleton';
|
||||
import { autoModeWatcher, initializeStores, storePopup, Modal } from '@skeletonlabs/skeleton';
|
||||
|
||||
import Settings from '$lib/components/molecules/Settings.svelte';
|
||||
import { mapLocaleToDir } from '$lib/i18n';
|
||||
|
|
@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
|
|||
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
|
||||
</script>
|
||||
|
||||
<svelte:head>{@html '<script>(' + autoModeWatcher.toString() + ')();</script>'}</svelte:head>
|
||||
<Modal components={modalRegistry} />
|
||||
<!-- Page Route Content -->
|
||||
<slot />
|
||||
|
|
|
|||
Loading…
Reference in a new issue