Files
radicle-explorer/src/components/FullscreenModalPortal.svelte
T
Rūdolfs Ošiņš 010cac0377 Redesign app with new UI kit
Redesign the entire app with a new UI kit. Typography, colors, icons,
avatars, and border radii have all been updated for a more polished,
consistent appearance that matches our other products like
radicle-explorer.

- Replace blockies-based avatars with a new DID-based avatar system
- Move Settings and Create Issue into fullscreen modals
- Change the default theme to follow the system theme
- Remove window decorations on macOS for a cleaner, more native feel
- Update the app icon
- Fix popovers and tooltips

Navigation:

- Rewrite app navigation and layouts
- Add a sidebar that gives you access to all your repos
- Change the startup screen to open directly to the notification inbox
- Add a getting started guide shown to new users on first launch

Settings:

- Add a setting to disable the notification badge
- Add a code font setting

Bug fixes:

- Fix reactions and edits incorrectly targeting the root comment
  instead of the intended reply
- Restrict issue/patch state, labels and assignees to delegates only
2026-03-20 17:48:38 -06:00

44 lines
900 B
Svelte

<script lang="ts">
import { hide, modalStore } from "@app/lib/modal";
</script>
<style>
.container {
height: 100vh;
width: 100vw;
position: fixed;
z-index: 300;
justify-content: center;
overflow: scroll;
display: flex;
}
.overlay {
background-color: var(--color-surface-scrim);
height: 100%;
width: 100%;
position: fixed;
}
.content {
z-index: 200;
margin: auto;
}
</style>
{#if $modalStore}
<div class="container">
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
role="button"
tabindex="0"
class="overlay"
onclick={$modalStore.disableScrimClose ? undefined : hide}
style:cursor={$modalStore.disableHide ? "not-allowed" : "default"}>
</div>
<div class="content">
<svelte:component this={$modalStore.component} {...$modalStore.props} />
</div>
</div>
{/if}