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.

Sign up for GitHub

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

Jump to bottom

Feat: Re-create Login Screen Using Tailwind CSS #286

Open
nelsonic opened this issue Mar 11, 2023 · 2 comments
Open

Feat: Re-create Login Screen Using Tailwind CSS #286

nelsonic opened this issue Mar 11, 2023 · 2 comments
Assignees
@nelsonic
Labels
chore a tedious but necessary task often paying technical debt enhancement New feature or enhancement of existing functionality help wanted If you can help make progress with this issue, please comment! in-progress An issue or pull request that is being worked on by the assigned person priority-1 Highest priority issue. This is costing us money every minute that passes. T4h Time Estimate 4 Hours tech-debt A feature/requirement implemented in a sub-optimal way & must be re-written technical A technical issue that requires understanding of the code, infrastructure or dependencies

Comments

@nelsonic
Copy link
Member

With Tailwind CSS now being available by default in Phoenix 1.7 we might as well adopt it in Auth ... 💭

This is what auth v1 looks like at the time of writing: https://auth.dwyl.com
image

We can definitely tidy up this copy for consistency. Just using this as a guide for layout.

Drawing inspiration from:

https://github.com/davidgrzyb/tailwind-login-template
image

https://tailwind-elements.com/docs/standard/forms/login-form/
image

https://flowbite.com/blocks/marketing/login
image

I expect this to take me a few hours cause I'm no Tailwind (or CSS) expert. ⏳
@nelsonic nelsonic added enhancement New feature or enhancement of existing functionality help wanted If you can help make progress with this issue, please comment! priority-1 Highest priority issue. This is costing us money every minute that passes. chore a tedious but necessary task often paying technical debt in-progress An issue or pull request that is being worked on by the assigned person T4h Time Estimate 4 Hours technical A technical issue that requires understanding of the code, infrastructure or dependencies tech-debt A feature/requirement implemented in a sub-optimal way & must be re-written labels Mar 11, 2023
@nelsonic nelsonic self-assigned this Mar 11, 2023
@nelsonic
Copy link
Member Author

Progress so far:

image

Confident I can get this working with another T25m of focus time. 🧑‍💻
But sadly, my time has run out for today ⏳
and I gotta go be a full-time-dad. ❤️

@nelsonic
Copy link
Member Author

nelsonic commented Mar 11, 2023 •
edited
Loading

Currently just working in an index.html file to get the layout I want:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tailwind Login</title>
    <meta name="description" content="Login">

    <!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.2.7/tailwind.min.css" rel="stylesheet"> -->
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .body-bg {
            background-color: #3baa93;
            background-image: linear-gradient(315deg, #3baa93 0%, #1a7566 74%);
        }
    </style>
</head>
<body class="body-bg min-h-screen pt-12 md:pt-20 pb-6 px-2 md:px-0" style="font-family:'Lato',sans-serif;">
    <header class="max-w-lg mx-auto">
        <a href="#">
            <h1 class="text-4xl font-bold text-white text-center">Auth</h1>
        </a>
    </header>

    <main class="bg-white max-w-lg mx-auto p-8 md:p-12 my-10 shadow-2xl">
        <section>
            <h3 class="font-bold text-4xl">Welcome!</h3>
            <p class="text-gray-600 pt-2">Please sign in:</p>
        </section>

        <section class="mt-10">
            <form class="flex flex-col" method="POST" action="#">
                <label class="block text-gray-700 text-sm font-bold mb-2 ml-3" for="email">Email</label>
                <div class="mb-6 pt-3 bg-gray-200">
                    <input type="text" id="email" class="bg-gray-200 w-full text-gray-700 focus:outline-none border-b-4 border-gray-300 focus:border-teal-600 px-3 pb-3">
                </div>
                <label class="block text-gray-700 text-sm font-bold mb-2 ml-3" for="password">Password</label>
                <div class="mb-6 pt-3 bg-gray-200">
                    <input type="password" id="password" class="bg-gray-200  w-full text-gray-700 focus:outline-none border-b-4 border-gray-300 focus:border-teal-600 px-3 pb-3">
                </div>
                <div class="flex justify-end">
                    <a href="#" class="text-sm text-teal-600 hover:text-teal-700 hover:underline mb-6">Forgot your password?</a>
                </div>
                <button class="bg-teal-600 hover:bg-teal-700 text-white font-bold py-2 rounded shadow-lg hover:shadow-xl transition duration-200" type="submit">Sign In</button>
            </form>
        </section>
    </main>

    <footer class="max-w-lg mx-auto flex justify-center text-white">
        <a href="#" class="hover:underline">Contact</a>
        <span class="mx-3">•</span>
        <a href="#" class="hover:underline">Privacy</a>
    </footer>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nelsonic nelsonic

Labels
chore a tedious but necessary task often paying technical debt enhancement New feature or enhancement of existing functionality help wanted If you can help make progress with this issue, please comment! in-progress An issue or pull request that is being worked on by the assigned person priority-1 Highest priority issue. This is costing us money every minute that passes. T4h Time Estimate 4 Hours tech-debt A feature/requirement implemented in a sub-optimal way & must be re-written technical A technical issue that requires understanding of the code, infrastructure or dependencies
Projects
dwyl app kanban
Status: 🏗 In progress
Milestone
No milestone
Development

No branches or pull requests
1 participant
@nelsonic