In this chapter, our goal is to modify look and feel of our application. So in order to do that, we're going to have to change a couple of things, starting with adding a new font called DM Sans. After that, we're going to modify our globals and our components in such a way that they represent neo-brutalism style. So what is neo-brutalism? Basically it's the style that you see in websites such as gumroad.com.
And there is an amazing website and an actual component library project called neobrutalism.dev. And that's the inspiration for this project. So I highly advise that you visit this. Basically, we're going to try and recreate this ourselves. I just wanted to give a full shout out to the person and the project itself here.
And the cool thing about this project is it's actually completely compatible with ShadCN and Tailwind version four. The reason I'm not using it in this tutorial is because initially I did use it and then I switched to Tailwind version four and at the time this project did not support that, but now it supports it. So I definitely want to give it a shout out so you can check it out yourself. But basically this is what we're going to try and do. So take a look at this cool buttons and everything else it has.
But we are not going to need all of these components. We're only going to need a few of them. But I just wanted to give a shout out because This is the inspiration for the Neo-Brutalism design that we're going to be building. And I also want to show you the creator behind that project. As you can see, he also has another very cool project, which is in the form of Counter-Strike 1.6, which is amazing.
So yeah, in case you're looking for a developer, looks like he is open to work. So I just wanted to give a shout out, amazing, amazing work. And now we're gonna try and do this ourselves, right? So let's start by adding a dm-sans font, right? So what I wanna do is I wanna go back to my terminal and just get the app up and running.
And then let's go instead of app folder, layout.tsx. And as you can see, they are actually adding, next.js team actually added a font here already so this is what we are going to do we're not going to be using the gaced font instead we are going to add the dmsans font. So I'm going to go ahead and add const dmsans, dm underscore sans, subsets, Latin. Just like that. And then instead of the msans here, what I'm going to do is I'm going to remove all of this here and just put the msans.classname right here.
And just by having this change, when you refresh your local host, you should see a new font here. All right. So it should be, well, I think it makes a good difference. Actually the Geist and this font do vary quite a bit. So you should already be able to see a difference in the font here.
So that's our first and easy step, right? It was modifying the look and feel, right? And now we're going to continue into this Neo-Brutalism style here by modifying the global.css, where the goal is to make all of our borders completely black. But what do I mean by that? In order for us to do that, I first want to display all of our components here, so we can see what is the current color of the borders.
So let's go inside of our page.tsx and I'm just going to give this a class name of flex, flex column and gap y of 4 just so we can go ahead and see individual components here. So I'm just going to wrap each in a div. So let's add a button. And this will simply say I am a button, like this. Like that.
OK, so this is a button. Now let's go ahead below that, and let's add an input component, which you can import from components UI input. Let's give it a placeholder of I am an input. Then below that, let's add a progress from components UI progress. And let's give it a value of 50.
So right now we can see that I'm just adding some components here. Great. Then let's go ahead and let's add a text area from components UI text area and give it the value I am a text area like this. So basically I'm just adding things here. And if you get an error here, that's completely fine.
So it looks like it's expecting an on change alongside the value. That's just fine. And you can see how Next.js has this beautiful new error display. This is the first time I'm seeing it, actually, because I was developing on an older version of Next.js. Looks absolutely amazing, the amount of detail they put in.
OK, so just to make this a little bit easier to look at. Let me just add a div with a class name of padding4 here, just so everything is a bit pushed in. There we go. So now it's easier to look at. All right.
So we have a button, we have an input, And we have the progress bar, and we have a text area. And you can already see the border, which I'm talking about. In order to make this neo-brutalism-like, we would expect it to be kind of completely black. And instead of value, Let's use a placeholder here. And now let's also add a checkbox from components UI checkbox.
And I think we can just leave it empty. There we go, a checkbox here. So These are all the things that we are going to use. So let's go ahead now and do the following. Basically what I want to do is I want to modify the border of my inputs here and make them completely black.
And technically I could do that here. As you can see, it says border here and it says border input here. So what I could do is I could use border border here. And I think that that might change it. Looks like it's not.
But if I use border black, there we go. So this is what we are trying to achieve but changing it in this way works you know is is not incorrect or anything but I think there is a faster way we can do that And we can knock off multiple items at the same time this way. So if you go inside of globals.css here, in the first part, I believe these are tailwind items, but if you scroll down here, you should see a chat CN values. And inside of here, you will be able to find the border and dash dash input. And this basically uses, I think this is OKLCH.
I think that's how you actually pronounce it. This is Chroma, this is Hue, and this is Lightness. Lightness, I think. So I think in order to make this default border black, all we have to do is modify this and put it at zero like this. And there we go.
You can see that that knocked off the text area, the input and the checkbox, right? So that's why I said that I think there's a smarter way of doing that, right? So now what I want to do is I want to check if there is maybe a way to reduce our radius in the same way, just make it a little bit not so round. But we can do that later because the goal was of this chapter is just to make this beginning to look like a neo-brutalism style here. So what we're gonna do now is we're gonna go into individual you know components here which we have added because these are going to be the components we will be using the most throughout our project.
And we're now going to add some specific styles and variants to them. Just basically we're going to make them look and feel like we want. So let's start with the button because the button will get the most drastic change. So let's go inside of button. You can either command and click inside or you can use source components UI and go inside of the button here.
So what I'm going to do is I'm going to go inside of the button variants here. This is where we are going to do our magic. So let's go ahead and below link, add an elevated mode. Let's give it a background color of white. On hover, let's give it a shadow.
And inside of here, it's very important that you don't add any spaces so four pixels underscore four pixels underscore zero pixels then zero pixels again and then a color in this case the color will be black so this is basically RGB alpha. So this represents black and one represents full opacity. And then If we just go ahead and give this a variant of elevated, there we go, I think that when you hover, you should already see the effect that I'm talking about, right? So now let's go ahead and do another thing. Hover, translate, my apologies, minus translate minus X.
So if I say minus or dash, I mean the same thing, right? Depending on the context, sometimes I will call it minus, sometimes I will call it dash. So hover minus translate minus X minus four pixels, like this, and then you can copy this, paste it, and change this to minus Y like this, and add transition all. So now, there we go, you can see how we have a much, much cooler effect now. So what we have to do now is we have to add a border here, right?
So let's go ahead inside of here. And what I'm going to do is I'm just going to add my custom class names here at the end so I know that I have added them. So border is going to be the first one. There we go. So now each of my buttons has a nice little border here.
And I also want to add cursor pointer. So let's talk about the cursor pointer here. I'm used to buttons having a cursor pointer. In the new version of Tailwind, they have removed the cursor pointer from all button elements. I believe that's an accessibility thing, right?
If you like it that way, you can remove cursor pointer. But in the original app that I was inspired by, Gumroad, they have this all over the place. So, and I don't know, it feels correct for this to be a pointer. I'm not sure what else a pointer would be, but then again, I'm not an accessibility expert, right? Great, so that's one thing solved.
The other thing I want to do is I want to find this, text small. I want my buttons by default to have text base, right? So text base will just give our buttons a bit larger font. Great, but we are not done yet. So we have added the elevated style, which we're going to use across our app.
And now what I want to do is I want to search for shadow here, and I'm just gonna replace shadow in all of my instances here basically I don't want a single one of my buttons to ever have shadow so basically just remove that right just remove the shadow extra small instance So when you search for shadow here, it should not exist beside this elevated style. And now let's go ahead and just modify the sizes a bit. So my default will actually give this a height of 12. I want my buttons to be larger. My small will then be a height of 10.
My large will have a height of 12. I don't want it to be bigger than that. And we can leave the icon as is. So now there we go. Your buttons should be much larger.
Of course, this is how it's going to look like in the end. Great. So now what I want to do next is I want to focus on the input component. So Let's go ahead back and let's go inside of page here, inside of the input component itself. Inside of here, we're gonna go ahead and add a new class here at the end, right?
So basically I want it to be easy to find, modify, Just so you know that you've modified this, right? Let's give this a height of 12, background color of white, font medium, and on medium text will be base, like this. So in order to do that, let's remove the height nine here so it doesn't override itself like this. And I think we can also remove the shadow extra small. It's no longer going to need that.
And we also have MD text small, you can remove this as well, even though I believe this would override itself. But let's go ahead and try it out. Now. There we go. So a subtle difference, but the text should now be the same size as our button here.
Great. Now let's go ahead and let's go inside of the progress here. So the progress will be an easy modification here. We are going to remove the background primary with a 20% opacity. And instead, I'm going to go ahead and add modified classes here.
And let's give it a border. And let's give it a background transparent here. And then in the indicator, let's use background pink 400, which is going to be kind of like our primary color here. So there we go. This is how I want the progress bar to look like.
If you want, you can also play around with the height of this, like give it a height three. But I think I found height two to be perfectly fine for what we are going to use it for. You know, looking like this, you know, in the middle of this two components, maybe height three looks a little bit better. So, okay, let's change it to height three. And you know, I'm going to come back to it later if it's problematic.
But this is how I want to modify our radius, our progress. And now let's go ahead and do the text area one, which is going to be relatively simple. So instead of page, let's go inside of the text area. And inside of here, we have to find the MD here. And let's go ahead and do the same thing.
Modified classes. So MD text base. Like this, so we can remove this part, we don't need this. And I'm pretty sure that's all I want to do here I'm not sure if there's anything important let me check do we have any shadow we do have a shadow so let's remove that shadow We don't need it here like this. There we go.
So now our text area and our inputs and our buttons all have the same font. And I don't think there's anything we have to modify in regards our checkbox here, because it was modified when we changed our globals.css right here. And instead of globals.css, it feels like we could modify our radius here somehow but I'm not exactly sure how because it kind of changed in between what what I was doing so for example let's go inside of a button right here and let's see. And let's search for radius or that will be rounded. Right, so rounded MD and looks like it doesn't use...
Oh it uses rounded MD here. So if I were to go into globals I assume that this is what would be changed here. So it uses the radius which is 0.25 rem. So two pixels. So if I change this to minus four, would it be less round or more round?
Let's do two again. OK, yeah. So I think that, yeah, the more you reduce this, the more you increase this pixels, the less round it's going to be. So I'm going to make it minus four pixels. I think by default, it was two pixels.
So I'm going to change the radius md to be minus four pixels. The reason I'm doing it here is because I'm pretty sure that I want this to be the standard everywhere, right? So I don't have to go through every single component and change it there. I can just do it in this one place. And I think these are the main components that we are going to need because everything else will be styled in a different way.
We are going to create our own components for that, but these are some of the components which we're going to reuse throughout the project the most. So that's why I wanted to create kind of a style guide for them. And you can see how nice this Neo Brutalism style already looks pretty unique and you know, easy to look at. And it will be very easy to build with. So now what we have to do, we modified the global CSS, We modified and displayed these components.
And now we have to push to GitHub. So let's go ahead and do the following. I'm going to shut down my app. I'm going to add everything here. And before I do anything else, I'm going to git checkout b, and I'm going to call this 02-customization.
You can, of course, call this however you want. I'm going to stay true to this. You don't have to do this, of course. I'm just trying to teach you how to branch out. So there we go.
So now you are on another branch, as you can see here. So let me just repeat git add here. And then I'm going to do git commit, 0 to customization, like this. And then I'm going to git push-u origin o2 customization. So now a new branch is pushed to my GitHub here.
And there we go. I can now create a pull request here. You should have the exact same message here. In case it wasn't, you can go in pull requests, click new pull request, and in the compare, select your new branch. And then simply create a pull request like this.
So in here, you can see all the changes that you've made, right? So what we're going to do now is we're just going to create a pull request here. And by default, nothing should appear here to you. But as you can see, I have this thing called CodeRabbit. If you ever worked in a team, you probably know that branches and pull requests are never really reviewed solo, right?
You always have a team of reviewers who look over your code and leave comments for you if there's something that you need to change. Since I work solo, I decided to give CodeRabbit a try, which is basically like your little, let's call him an AI employee. So what CodeRabbit is doing right now for me is it's going to look throughout all of my files, which I have changed, and it's going to give me a summary of what happened and also it's going to leave some comments if I want to apply them. And what's cool about CodeRabbit, If you install CodeRabbit, you can just search for CodeRabbit AI. I'll probably leave a link in the description as well.
If you look through the tips here, you will find different ways to chat with CodeRabbit. So you can directly reply to a review comment, And then you can tell CodeRabbit, hey, I fixed this. Can you check it again? Or you can tag it somewhere, right? So I could kind of go here, for example, and I could select this line.
And I could tag, whoops, let me go back. So I could kind of select a line here and I could tag code rabbit and then I could ask it to do something, right? Review this or would you do this in a different way? There we go. So now as you can see, I have...
Oh, my apologies. I'm in a different pull request. That's my pull request here. So I'm just going to pause the screen and let Rabbit review and show you the results. And there we go.
So after a couple of minutes, CodeRabbit generated a summary. So new features, we launched an enhanced homepage with interactive elements, including buttons, inputs, progress indicators, text areas, and checkboxes. And it noticed that we refined the global visual design with updated typography and improved UI elements styling. We enhanced the button sizing with new hover effects and updated styling for inputs, progress indicators, and text areas to deliver a modern and consistent look, which is exactly what we did. And you can see it actually comments a walkthrough of exactly what we did.
So this is super useful. It noticed that we modified and gave a new font here. It noticed exactly what we did with our UI here and our component styling, removing shadows, adding the elevated variant, input has a modified height, background and font weight, progress bar has increase in height. So it pretty much noticed every single thing that we did. And you can see it also tells you that some Other things are happening in your code as well.
It will also leave comments here, for example, in the text area, it's recommending, extracting or organizing the lengthy class string. So a bunch of useful thing, basically if you're a solo developer, or if you just want to improve your skills by listening to an AI tell you what you could improve, a very, very useful feature. Great. So I'm currently satisfied with what I have here. So what I'm going to do next is I'm going to merge the pull request and I'm going to confirm the merge.
And usually after you successfully merge a branch, which is a feature branch, you would delete it. But in my case, since this is a repository that I'm going to share later with you, which you can access through my website, through my platform, I'm not going to delete my branches simply so you can later go ahead and look what I did step by step. Great, And then when you've done that, make sure to check out back to your main or master branch and make sure to git pull origin master. So this way, that branch which you just merged is now active. So now we can very easily check whether that is true or not by doing npm run dev, going back to the localhost here, and it should look exactly the same because we successfully merged our branch.
You can also go inside of your IDE here and confirm inside of the graph here what happened. So we had a setup, we opened a new branch called customization, and then we merged that back here. So yours should look the same. Of course, it's not required to follow Git at all during this tutorial. I just want to bring a closer to real world like experience when building this project.
Great, so I think that marks the end of push to github task as well. Great! Amazing, amazing job!