Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/svelte stellar tailwind #1532

Draft
wants to merge 25 commits into
base: develop
Choose a base branch
from

Conversation

AaronPlave
Copy link
Contributor

@AaronPlave AaronPlave commented Oct 30, 2024

This PR integrates TailwindCSS and Stellar Svelte components. TailwindCSS is a CSS utility framework introduced as a soft dependency of Stellar Svelte. Over time the aim is to use TailwindCSS utility classes instead of our custom classes so that all of our styling is responsive to the underlying CSS variables that govern those utility classes from Tailwind. Stellar Svelte is built on top of shadcn-svelte components which uses Tailwind itself for styling and dynamic theming. By using Tailwind in Aerie UI we will be able to dynamically theme (light, dark, global color schemes, etc). Stellar Svelte components will provide us with a large library of high quality, accessible UI components that should also save us development effort.

This PR also:

  • Removes the bootstrap utility css and swaps a few of those classes over to TailwindCSS classes.
  • Updates typescript to 5.7.4

Testing:

  • Test the Tags page. This page now mainly uses Tailwind classes and Svelte Stellar components as a proof of concept.
  • Verify that the UI looks unchanged other than the Tags page

TODO:

  • Revert plan page changes
  • Remove any of the locally installed Stellar components
  • Rebase
  • Remove command palette
  • Explain tailwind css integration and a bit of stellar explainer...
  • Fix e2e tests @AaronPlave
  • Verify that the rest of the UI looks unchanged
  • Remove old app menu if @duranb okays it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be able to remove this old AppMenu

</div>
</fieldset>

<fieldset>
<div class="tags-creator st-typography-body">
<!-- TODO: remove this fieldset -->
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove comment

{/if}
</svelte:fragment>
</Panel>
</CssGrid>
</CssGrid>

<style>
<!-- TODO: remove this -->
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove?

@AaronPlave AaronPlave removed the DON'T MERGE Do Not Merge This Branch label Mar 5, 2025
@AaronPlave AaronPlave force-pushed the feature/svelte-stellar-tailwind branch from c619be3 to 7686e14 Compare March 6, 2025 04:51
<TagChip
tag={{ color: $colorField.value, id: -1, name: $nameField.value || 'Tag Name' }}
removable={false}
/>
<span class="flex items-center border border-secondary pl-2 align-middle">@{user?.id}</span>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is the purpose of the @user?

Copy link

sonarqubecloud bot commented Mar 6, 2025

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants