beta alert div coded

[Alperadoss]

PR for issue : https://github.com/julkascript/cardflow/issues/128

I translated to Bulgarian language with Google Translate, and am not sure if it is correct translation. Can you please check?

[julkascript]

Thanks a ton for your contribution! I wrote some comments you can address. @RyotaMitaraiWeb may also have some remarks.

Overall you’re in the right direction!

[RyotaMitaraiWeb]

• the translation seems ok at first glance, but I recommend looking into the Trans component to interpolate the hyperlink, rather than breaking it in three different translations (see an example of that in the repository)
• use React Router's Link component instead of a normal a tag.
• prefer using TailwindCSS class names instead of sx when possible. For example, you can use w-5/6 instead of a manual width (and do this for all other sx stylings where possible). Use sx only when Tailwind class names don't work. Refer to the TailwindCSS documentation if you aren't familiar with the available class names (use the menu on the left for navigation)
• @julkascript has to weigh in about this, but I feel like being able to hide the alert seems pointless, since navigating back to the page will restore it anyways. Furthermore, I don't think users will be spending enough time on the page to the point that having a persistent alert is going to cause them much harm.

edit: worth mentioning that I didn't test any of this locally, since this PR seems to be committing directly to develop and I am not sure how / if it is possible to pull them locally before merging

[Alperadoss]

Thanks for directing @julkascript and @RyotaMitaraiWeb . I got one unresolved issue. When i apply tailwindCSS in Alert it doesn't apply in anyway. I tried to wrap with a div and apply tailwind to that but it didn't work too. I also had a look at other places in repo where "className=" is used but didn't see sth to solve this issue. Can you please help with this one?

Dear @julkascript if you also advise as @RyotaMitaraiWeb I can remove useState and remove hiding alert div.

[julkascript]

@julkascript has to weigh in about this, but I feel like being able to hide the alert seems pointless, since navigating back to the page will restore it anyways.

I agree. Handling state for the Alert is unnecessary. You can remove the state and let the Alert be there all the time.

@Alperadoss can you please give a specific code example of what you tried with tailwind, so we can help?

[Alperadoss]

I removed useState. Tailwind CSS code example is below.

` <Alert id="closable-alert" severity="info" className="text-black text-lg w-5/6 mx-auto my-4 bg-[#E5F6FD] flex font-light border rounded-lg items-center"

{t('main.betaWarning')}

`

[RyotaMitaraiWeb]

Managed to pull the changes locally

What seems to trouble @Alperadoss based on what I see on my end is the fact that the font class names do not apply:

If we care enough about matching the font exactly as on the wireframe (I personally think MUI's default is fine, but I will let others judge), you need to wrap up the Trans component in another tag (e.g. a <p>) and apply the classes there

edit: here's an example of how it'd look:

<p className="text-black">
  <Trans>
    blah blah blah
  </Trans>
</p>

[julkascript]

Please stick to the default font (MUI’s default) and default font colors. The wireframe id just an example, sorry if it brings confusion.

[RyotaMitaraiWeb]

In that case, only remove the classes that visibly don't do anything (as to not litter the component with useless class names) and I will approve

[Alperadoss]

I removed the classes which doesn't make change regarding @julkascript 's message.

[julkascript]

This change was planned for v1.4. However, since it's done, it looks good and it's a small change - I'm happy to actually include it in v1.3, once my latest comment gets addressed.