In this chapter, we're going to focus on improving the look of our current app. We're going to apply a new theme, we're going to improve our screens and how they look, and we're going to add some logos. So let's start by applying the new theme. You can apply the new theme by using TweakCN. You can use the link on the screen to visit the website.
It's an absolutely amazing website, which allows you to customize your ChatCN theme in great detail. And once you're satisfied, you can very simply hit code. And in here, you can find the CSS that you need to copy to add to your app. Or, you can even use their CLI interface. Now, if you want to have the exact same theme as me, I've prepared a solution for you as well.
I have made a public repository here where you can copy myexactglobals.css. So let's go ahead and copy this. So this entire file you can use the link on the screen to access it. Or of course generate your own using the website I just showed you. And let's go inside of source app folder, globals.css and simply replace everything inside with the new content.
Now you will see two things that aren't exactly part of TweakCN here. So everything from the start all the way to I would say right here is Tweak CN, but this is my custom code that I have added It basically enables the pointer cursor for all buttons, which has been removed as of Tailwind version 4. I simply prefer my buttons to have a pointer cursor. And this will come in handy later when we add React flow. So no really point in explaining this now because we don't really have React flow installed at all.
So you can find this in my public repository here, simply find the globals.css file using the link on the screen and just copy the entire file and paste it here. That's the first thing I want you to do. The second thing I want you to do is to go inside of images and copy these three images and go ahead and add it inside of your public folder here. So inside of the public folder we now have file, globe, next, the cell and window. Now let's add these three here as well.
So here we have. I've added logo, Google and GitHub. So make sure you have GitHub, Google and logo here. And I would like to separate this a little bit by just adding a folder called logos. And then let's move our Google and GitHub inside of that, like that.
And you can even move the main Apple logo inside, like that. So it doesn't merge with all the other ones that we have already had inside. Perfect. So if you're wondering where did I get the logo from, it's from Twixian. So let me go ahead here.
You can use the link on the screen. And in here you can find a bunch of interesting logos. Basically Logo Ibsen is this amazing website where you can find placeholder logos for your projects. So you can just click to copy and you will copy entire SVG. Somewhere down here I found this exact logo, not sure where it is.
Can't find it now but basically, I mean this is an amazing resource of logos and I would highly recommend that you visit to find some interesting logos here. So now that we have the logo and that we have GitHub and that we have Google. Let's go ahead and modify our app a bit. So I'm going to go ahead and do npm run dev. And immediately you should see some changes.
So let's go ahead and refresh our localhost 3000. I'm specifically on the login page. So immediately you've noticed that we now change the button color to an orange. So that's our new theme. Another thing that has changed is border radius has been reduced by a bit.
So it looks a bit more blocky. I prefer it this way. You can of course do it some other way. So now let's go ahead inside of the login-form component which we were previously developing. And in here we have two buttons for Google and GitHub.
We didn't develop those functions yet, we will do that later, but now let's just make it look a little bit better. So above the continue with GitHub text add an image. We should already have image imported from next image and give it a source forward slash logos forward slash github.svg and now let's go ahead and give it a width of 20 and a height of 20 as well and let's see what is with my image why is it getting an error oh we are missing an alt property. Alt here is going to be GitHub. There we go.
Continue with GitHub and Now let's go ahead and copy this image and let's do the same for Google and just change this to google.svg and change this to be Google. There we go. Continue with GitHub and continue with Google. Here's how the code looks when it's not totally collapsed. There we go.
And now let's go ahead and do something else. Right now, no matter how far I zoom out, this always kind of fills the entire area. We don't want that, right? So what we're going to do is, well first let's also add the image thing to the register form, right? So let's go inside of the register form and let's just do the same thing, just so we're on the same page for both of those.
There we go. GitHub and then Google and change these to Google and change these to logos Google SVG. So now both sign up and login routes should have the icons and look better. So now let's go ahead and set source app folder, alph, login, page, .tsx. And make sure you are on the login page here as well.
So what we're going to do now is we're going to make this look better. So let's give this a class name of background color muted. Let's go ahead and give it a flex, a minimum height of svh, flex column, justify center, gap 6, padding of 6 and MD padding of 10. Now let's go ahead and add another div here And let's give it a class name flex-full-width-maximum-width-of-small-flex-col-and-gap-6. Then let's add a link property which we can import from next link like this.
Go ahead and give it an href to a forward slash and inside render an image from next image with a source of logos logo.svg an out of node base width of 30 and height of 30 like that And give the link property a class name flex-items-center-gap-to-self-center and font-medium. And after the image render node base just like that. So now let's go ahead and zoom out a bit to see. Looks good but something's obviously missing here. So Let me just check what it is here.
So minimum height of S the H. It looks like we are missing the full width here. So can I do minimum width of S the W or maybe screen? All right. It Looks like there is a slight issue here.
Let me just check why. I think it's because I forgot to add items center here. There we go. So I forgot to add items center in the first div. And now once I've done that the login screen looks much better both on mobile and on desktop view.
But there's a problem with this code. The problem is I would have to write the exact same code in the signup page for it to look the same. Well, there is a way we can reuse this route group. Previously I told you that these route groups are only good for organizing your content, but they're also good for sharing layout files. So inside of that out folder, create a layout file.
This is another reserved file name in Next.js. So let's go ahead and define the layout like this. And let's go ahead and define children react react node as the prop. And let's go ahead and simply return. Oops, we already do.
Children and just by saving the file and of course doing an export default there we go nothing changes really but now we're going to change it So go inside of login and let's copy this entire thing all the way to the login form. And now go ahead and render it here and then below this render the children and then close the two encapsulating divs. Now let's go ahead and just add this few imports. So next link and next image. Perfect.
Now Let's go back instead of login and let's remove all of these entirely. So we can just do return login form and remove the unused imports. And let's go inside of page signup and let's do the same thing just simplify these pages there we go so what we've achieved now is a layout file which is shared across all folders or all routes within this route group that's the power of layouts so now both our sign-in and our login routes share the same styles. And may I say our app now looks much better. Great.
And I think that that's all I wanted to do for this chapter. I wanted to keep it short, simply because we had some complicated chapters before us. But let's also improve our structure just a bit. So instead of features, we have auth components. So let's also add auth-layout.tsx here.
This way we are only using the app folder as the actual kind of router and business logic. We don't really care about styling within the app folder. For that, we're going to be using this. So let's just copy the entire thing actually except the children and let's do export const out layout like this. Render the children, close the div.
Close the div. You can copy the props from here. And you can copy the two imports. Like this. And now we have the out layout separately in a named component and then instead what we can just do is just out layout.
And this matches our code consistency a bit more. I'll show you why. So let's remove the unused imports. So layout is a reserved file name, which is located inside of the app folder and where it structurally needs to be to work for route access, right? But where we actually define the component with styles and images and everything doesn't need to be here.
Instead, let's keep it always in one place, in features out. So this way, same thing happens in login and sign up pages. We develop them here because they need to be here structurally for this route to work, right? But where we actually develop the component doesn't have to be inside of this out folder. It can all be together in features out components.
So I feel like that's a better solution, right? Because now whenever you're wondering, oh, how do I modify something from out? Very simply, just go inside of features out components. All of them are here. You don't have to worry about visiting them here because the way they are organized here is according to the router but here it's according to their feature.
Thus we call this folder features. I think that's a better structure. Feel free to write in the comments what you think. Excellent. Amazing, amazing job.
I think this marks the end of this simpler chapter that we've had. And yes, we still have to develop these two, but I think I might focus on some other things for now, simply because these take a lot of time, but they are mostly just configuration setup. So we might actually do this closer to deployment because that's when we are going to start doing this configuration. I'll see, maybe I'll do it in the next chapter if I change my mind. But as of now, I think we all want to see something interesting like some background jobs which are closer to what the goal of this project is, which are automation, right?
So let's go ahead and see if that's what we wanted. We applied a new theme, we improved out screens and we added logos. Amazing. And now let's push this to GitHub. So 05 theme and styling.
So I'm going to create a new branch, 05 theme styling. And let's go ahead and open our changes. Let's go ahead and stage all changes. 05 theme and styling. Let's commit and let's publish this new branch that we have.
And once we have published the branch, let's go ahead inside of our GitHub here. Let's open a new pull request, 05 theme and styling. And since this was a very very simple pull request we don't really have to review anything here we already know what's going to happen in this case. So we added this new logos. We added the reusable ALT layout.
And now it's written here in the features so it matches the structural consistency of all other ALT components. And we just modified globals, right? We added this, some custom things. I don't really think there's anything important here. The only thing that can be mentioned here is that these buttons still don't do anything, right?
You still can't log in or register with GitHub or Google. Other than that, I think we can merge this. Obviously very thankful for the help CodeRabbit wants to do but this was a fairly simple pull request so let's rather use CodeRabbit review on something complicated which will be coming very soon. So let's merge this pull request. And once you have merged this request, as always, let's go ahead and let's just change our branch back.
So head here, Select the main branch and synchronize the changes to make sure that you're up to date. And once you have synchronized your changes, just go ahead inside of source control, graph, and confirm that you have the same view as me. Let me just show you. So I detached into 05 to add some theme and styling and then I merged it back into main. And you should see that here.
There we go. Amazing, amazing job. Our app now looks much better and we have a new theme, meaning automatically things we built from now on will start to look good. Great! I believe that marks the end of this chapter.
We pushed to GitHub, we created a new branch, we created a pull request and we did a personal review and merge simply because this was super simple and we knew exactly what all the changes are. Amazing job and see you in the next one.