Build a React Data Dashboard App | NextJS, TypeScript, MUI - 3.Data Dashboard Styling and Theming

what's up coders and welcome to the third video in the series now in this video what we'll be doing is covering styling and theming on the data dashboard now what we want to do is create a easy to maintain uh easy to read and a visually appealing data dashboard theme and UI with that comes some tough decisions and introduces some new Concepts and ideas you might not be fully familiar with my background personally for the last few years has been a Design Systems UI and accessibility specialist and what I would do is I would go in help set up Design Systems help build up the UI and help audit their accessibility give them a plan train their engineers and do the same for UI and Design Systems and with that comes a lot of understanding of how UI architecture should work especially for styling so we're going to take the approach of gradual styling complexity which means that you don't have to take a one-shoe fits-all approach for styling once you get to a certain point in your styling you might decide that something else is a better option to tackle this particular problem so for example with material UI you have your inline Styles you can use that to a certain point for non-repeated components and then you can take over by using another styling option for whatever works best for you in our case it would be CSS modules and SAS for some people they might want to take for other people they might want to take Tailwind as that approach if they have a team that is trained on tailwind and understands the utility classes and has very good practices in place to handle the markup overhead so every starting solution is different for every team but ours will be that mui inline Styles till we reach a certain point for non-repeated components and then we'll be using CSS modules and SAS so without out the way let's go over some of the things we'll be covering in this video so obviously we want to set up our mui theme we want to have a light and dark mode and we want to be able to toggle in between the two we also want to set up our CSS modules and SAS in next.js we also want storybook for testing and working on our components in isolation and we also want to take all that styling and apply it to our project to give it a sense of theme and style and we're also going to start to Brand the project and give it a name so no longer will just be a generic data dashboard we're actually going to give it a company and we're going to give it some styling and very lastly we're going to add some scaffolding to the dashboard so we're going to add some grid components and layouts and kind of start to build the shape of the project now before we jump in make sure to like the video and subscribe to the channel to keep notified of when the next video is coming and any videos similar to this so without further Ado let's start building foreign so this is where we last left the data dashboard this is the current state it's in but we're going to change that we are going to completely improve the styling and theming of the data dashboard currently you can see it's got some base styling right now look at all this spacing colors you can see that mui is using its base default theme colors you can see here this is a primary color being used which is the default primary color that mui uses so there is quite a lot to be done here but to begin with what we need to do is remove the global styles that come with this next JS starter demo we then need to add our own reset style sheet and start to add some mui custom theming of Our Own so that's the plan so let's go strip out some of the global styles so we need to go into the source folder and in the Styles folder here we've got these two CSS files which we don't need anymore so we'll go ahead and delete these so you can see we've got an input still here I go into app and we've got the global here just need to make sure we're not using any style so you can see here this next JS app comes with CSS modules built in so whenever you see something like this for a class name Styles dot something main being the class name Styles being the default variable that it's pulling from the class name so if I bring that back you can see that it's pulling Styles as a variable from home.module.css and that's what CSS modules is but we'll go into that later so we'll delete this and we'll add our own later but for now we just don't need this so I'll save that and we'll go take a look at what it looks like now yeah so much white oh it's such a wide background oh this is quite the contrast but yeah so you can see the the text styling the spacing the base margin and padding everything's been stripped out so what we're going to do is we're going to take advantage of material UI and we are going to add in our own reset style sheet now we're not going to do our own custom reset style sheet so we're going to add the mui reset style sheet so how do we add our own reset style sheet well the way we do that is by adding the CSS Baseline component and what this does is it pulls it in from Material material UI and adds its own reset style sheet right so hopefully that should have added a nice base to the project let's go check it out and there you go you can see it's added its own base styles so I believe it should be using its custom font now so yeah it's using Roboto now now we're also going to do a few more changes let's put this to the right a few more changes that we're going to do is we're actually going to change the name of the project so we're no longer going to have it as logo so wherever it says logo we are going to change it to a new company datasoft just launched and did its IPO this morning not to be mistaken with data hard this is the real deal there we go we've got a legit company now so we've reset our Styles we've added a base a reset style sheet uh the next part is to do some theming so let's add some themes now so we'll go here and we'll go to the theme folder and we'll add a light and dark theme gone ahead and added them already so what we've done is we've created an object that would normally go inside a create theme object so something like this so this is kind of the inside of what a theme would be but you'd normally use the method create theme and what that would do is that would essentially create an mui theme for you but we're not doing that we're just literally getting the options because we will be using a very custom method later to switch between dark and light theme so dark theme dark theme using the type of theme options because we are using typescript and the very same here so the primary and the secondary colors are different and they're different for here as well which is important for later on right so we go to index here and we want to add custom styling to basically set up this page to be used by US now we removed the old class name here but we're going to add CSS modules so do you remember when I when earlier I said we're going to be very granular with our complexity for styling so we're going to use inline styling with mui as much as possible which is in line with the component library and we are taking advantage of the option to use inline styling because at the end of the day if you're using a one-off component that's not repeated it's easier to just add the Styles there and then especially if it's just one or two properties and then if that rises in complexity you need to add lots of styles then it's easier to organize that in some other way so it's up to you how you organize it whether it's Tailwind or whether it's CSS and JS so you could use style components or if you use CSS modules and SAS which is what we'll be using so I'll show you how that works so for example in here we'll go and add a new style sheet so we'll call it home Dot module.sas and we will add Main and we'll just add some base styling to the home container and this means that it will only go to a certain width and it will won't go any further than that which means it contains like a container layout we want it to be centered so we want the container layout to be in the center of the screen so if you have like an ultra wide screen it kind of gets it to sit in the middle and then we want it to have some bass padding on the side so when you go to a smaller resolution there is some gutters for spacing on the sides so that is just some base styling that you should have you kind of should add to every layout to cater for larger resolutions and smaller resolutions it's a nice formula to have and we just need to make sure to go back to me and add the class name so it'll be SAS dot Main and we need to import that so we're importing that from the style sheet and if you've not used CSS modules before it is a bit of a weird concept to turn your class names into variables but what this does is it takes the main class name and hashes it essentially and I'll inspect and show you what I mean by that it basically Scopes this there's this class name to this component which is the index or the home component at which will actually just tidy up now believe we're just going to need to add this because it may cause an issue with next off it's so we need to explicitly type that rather than implicitly um normally you don't need to add a react return type for the function so we've added it here because we need to add it there's very few cases where you do need to explicitly say what it is reason being is react and typescript implicitly add the type for you for the function so most times that's fine because react knows that's a react function but in certain cases like this one with next door you will need to add this I'll just put data soft here I think that's everything right let's go check it out so you can see here now it's centered it and it's added some base styling uh we do kind of actually want this to be Max width um but I'll show you the CSS modules thing I was talking about so if you can see here uh home Main so this is the part that's important so here you can see this class name now this is the main CSS module class name we added which scoped it to the home component and it's added a hash which means that it is now uh doesn't cause issues with naming you can have a very flat naming structure than your CSS file and when I say have a flat structure in your CSS file you can go here and you could add lots of class names and they can be very basically named because you don't need to worry about naming clashes you can say button say button input and it's just a much simpler way to code you know exactly what the class names mean you don't have to do some over complicated bem structure or whatever it's so much nicer and it's performing as well so using uh just you know SAS style sheets is actually more performant than CSS and JS generally but yeah this is the one that I prefer and I think when I'm working with larger squads and I'm building Design Systems for them and I'm setting up code bases for them and I'm advising on what might be a good system that could work with like 30 40 front-end developers this is generally a system I go with just because it scales so well and you don't have the overhead with the class names but this yeah this this works out better if you know CSS you can work on this and it's it's great for juniors and it's great for introducing people of all skill levels it's just CSS let's add a dark mode and a light mode so let's add a toggle for that so for that so if we go to the mui website we've got this uh toggle here so you can see this button here and it's one of the default toggles so to add this what we'll need to do we need to create a wrapper around the app component so you can see it's adding a theme provider and it's adding some context to share some state to show that the this is toggled this bit here so let's add these now very quickly to our app component so just above the session provider which is for next off I will add these we'll add to this one first so we'll add theme provider and we'll add it from styles so that essentially is going to grab our theme color mode context provider get that sorted in a moment right let's go back and we're just going to put this in our app component for now so we'll go ahead and grab this pop this here I'm just going to rewrite this as well const app um just make sure that this is also typed just in case of course CSS Baseline what's the issue here uh key docky we'll leave it as that all right we'll grab these are the bits here so this is essentially uh telling us to go and use the theme from mui's uh default theme whatever it's set to and that'll be found because we've wrapped it in this theme provider so we'll go grab that and this is uh just using the context essentially the color mode that's in the toggle below it'll make sense once we've added this so we'll go down here so that should be there we'll import this from mui I should probably add this here as well don't so just so you know uh system and material they might look the same and they might have the same Imports but they do act slightly differently my best bet usually is to go with mui material or mui material styles that usually works for anything to do with theming so that would be my recommendation is to use this as your input source for mui it's annoying I know uh kind of messes with Auto Imports and stuff like that but you do need to double check that so if you do find a bug that generally could be one of the main reasons why you get an error um right let's add some code so this is the toggle component so we'll add the toggle component uh above everything so we'll add that there we'll need to oops we'll need to import icon buttons so just do this for now I'll grab the Imports for these it's annoying that mui icons doesn't really have uh kind of Auto Import complete I will add the Box component so we can add that individually which is annoying uh so we can add that individually which is great and then we need to add this function which toggles the color mode which is fine uh so let's go here foreign [Music] right awesome um so create theme interestingly enough I'll explain what all of this does let's import that first uh all right well no better not risk it let's get rid of that so what does all of this do we're grabbing the theme from the local theme and then we're grabbing the color mode as well which is the context state for switching and then we're taking the color mode here and it's using the state to set it to light and dark it's currently set to light by default but I don't want that I wanted to send it to dark by default and we'll want to set it to dark oops so if it checks to see if it's light mode then we'll switch it to dark mode otherwise it'll switch it back to light mode again which is kind of what we want so it's using um the use memo hook to essentially run it once if the mode changes which is this state here which is set to this function which is on click on the actual button itself so hopefully that should make sense uh what this all is and then there's just some styling and little bits and Bobs uh it's got a mode here as well which is uh grabbing whether it's dark or light mode from the theme the problem is the theme is literally just this this is the only setting and this is just creating a theme on the fly every time uh you initiate the component now that's not great um because it's only got this option so that means it's filling in all the rest of the the settings and the palette details and the theme details with the default mui Styles which isn't what we want because we've defined our own theme separately which is the Dark theme and the light theme so that's a problem that we're going to have to solve in in the short future but for now what I want us to do is make sure that this is all working uh what's this saying and let's delete this for now okay what's this complaining about are we missing right oh we were missing something right let's give this a go so refresh that we have an error a no error so something is up it's not happy about aha right so you can see here we've got toggle color mode and that's why I asked this to close it here because we are essentially not closing this function so now theme and color mode is being used that's closed that's closed right this should there we go so as of right now uh we've got this button up here but it's not doing anything so let's just go back and see why that might be okay cool so we're just a bit of tidying up so I'll just explain what we did so we broke up uh this component here just because we kind of moved it from the default demo view so this was basically block scope uh block scoping all these values which we needed so we just get rid of that we didn't need these for now so we can get rid of that as well um so yeah that should all work now so we can now see um that we've got the dark and light mode working um so if I hard refresh now and then go back and go to dark mode it now sets the default to dark mode so now we have dark mode by default on our theme which is great but the only issue is we don't actually want this toggle right at the very top we actually want this in the header so let's go move it now so we will actually keep um these two here we'll get rid of the component and we'll use it in our new component so we'll create a new component here called theme toggle button we will also add an index file and we'll make sure that we point it to our component cool so this is our component and what we want to do in here is essentially put um this code which has our icon and which has all of these details so this is our new theme button component now I'll explain what this is doing so this is our functional component here we are creating some props to take in the react context which is the state that we'll be working with and we'll be passing this in into the header with theme toggle is so we'll leave that there for now but essentially just know that it's got one prop which is the color mode context which is being used here we have our theme being used here as well so we are trying to pull in our theme and we are getting the color mode from the context from our contact state now this here is quite an interesting one so this is our use this is a media query we're using and essentially what this does is it allows us to check for the resolution of the screen so the size of it so it tells you whether it's in tablet mode um in terms of width so 500 pixels 800 pixels whatever it is in laptop mode desktop mode Ultra wide desktop mode mobile mode you can kind of detect this with this media hook here this custom hook you can get this from pretty much anywhere and do it in a custom way but if you're using mui you might as well just pull it in you can import it with its own media query so we can get this doesn't need to be destructured and it just makes it a shorter and more neater import as well so you're not just generally importing all of material UI just to get the media query so then we take that and we do a conditional check here and if it says if it's not in mobile view then I don't want to show the label so we saw it before it said like dark mode light mode it just gets rid of that I'll show you what that is once we've just sorted out the app file so in the app file it's mostly left where it is but you can see that the theme here has got a red squiggly line on it because it can't find the theme now before it was essentially creating a theme on the Fly which was a bit of a problem uh the mode here essentially had darker light and that was it and the rest was default settings so what we want to add is our light and dark theme that we added here in the theme folder and we do that by this so we get rid of this used memo and we add two so we add a used memo that has dark theme Chosen and light theme Chosen and essentially this is just going to choose our Dark theme and our light theme so we'll add that import and hopefully yep that should grab it from the right places it's using the aliases to grab it from a relative space and then all we do here is we say if mode is equal to dark we'll start that as the starting point then we want to show Dark theme chosen otherwise um we want to do light theme chosen so we're using a ternary statement to basically add the logic here um it's not a lot of logic so I'm happy to put this in line inside the prop but generally in logic you want to keep away from the markup as much as possible and you want to take that out and put that in its own function and then call that like that that's fine with me I think that's choosing the themes correctly now but there's only one way to find out so we're now looking at our data dashboard and immediately what you can tell is that the themes are correct you can see that it's calling the uh the Red theme but we haven't actually added the uh theme Toggler here the dark mode light mode toggle so it's actually Anova site on my part let's go see that this is all correct grab that and we want to go to the header so we want to go to the header component I'll get rid of these and let's go down here yes let's add it here so let's add theme toggle button make sure we add color mode contacts so what we need to pass in here is essentially a prop uh from the header component so if we go here or we can get rid of the settings so we don't need that anymore we'll get rid of this uh shortly as well we want to add some header props so header props we want to have the color mode context with the react context here add this here so now this is connected and then we just want to deconstruct it so it's nice and simple and then we go down here and we simply add that so now this should be connected here in fact we'll close all the tabs to the right good time management that's what it's all about right I think that's everything so now we've got all this set up and there we go so now we can see in the header menu we've got our toggle here so if we click that we currently see it's not doing anything right so I believe the main issue here is that we actually need to get rid of this header here because we're not actually if you look we're not actually passing anything to this header what we want the header to be is actually in the app component because you saw that the header if I go back like this back the header is actually restricted here and that's fine we want that layout component to exist but we don't want it to restrict the header so let's delete that from here we'll go to app and then we'll go just above here above the component and add our header component now what that should do is actually give us a full width header outside of the uh or outside of the rest of the components but it means that now that we're in the app we have full access to uh the context and all the state that we need so if we start doing the toggles I really apologize for anyone who's watching this in the dark um we see that it changes the themes and you saw that it was yellow it we can choose any theme we want So currently we've got like a dark a red is a primary we'll slightly change the light theme to be a bit more tolerable so let's go to light theme Here and let's choose background and we'll choose default and what we'll say is we don't want white um because I was a bit too brutal we want something slightly grayish because we don't want a full um light mode but slightly light let's go with that for now so if we switch so now it's got a kind of a gray version to it um but I'm happy with that I think I like that it's not fully a light mode you can see some of this I think this yeah this is a menu here that's kind of messed up but that's fine these are using mui components so it might be interesting to know why these aren't tied into the theme uh let's go here interesting you see everything else switches in the theme so when we start doing the side menu uh we'll tidy this up and get rid of this because we're going to take a lot of the the menu logic and and put it into here so for that we'll leave that for now one thing that I do want to check is the responsiveness of this so yeah this is problematic here uh we don't really need this um so far down let me just grab that so signed in a session uh uh so what we can do is we can use mobile check here and if it goes over uh this then it just hides it so if it goes into it then it just hides it so yeah it's a bit too small actually we need that a bit bigger so it won't be mobile check so we actually want to change this to tablet check so let's change that to tablet check and let's go back to Mobile Track and change that there oops and then we just change this to seven six eight pixels now generally what you can do is you can create your standardized sizes for all of these so in a typescript file somewhere you could create a variable which has all these sizes in and then you would just simply pass that in here and you just pass these strings in to use midi query so you could put just tablet size and that would essentially crew contain this um so that's one way of standardizing it so you don't have to think about the actual sizes and it's the same across the project so tablet checks should be done so let's test this out and there we go that is a lot better in my opinion and that looks good on mobile happy with that yeah there we go so we've got the themes toggling dark and light we've got our theme added we have uh the header somewhat tidied up and responsive I think the next part would be to tie the dashboard up a little bit add some bass out of a bit of a base layout and some base styling let's head over to the dashboard component or the dashboard page and currently we've got it set to a H1 which is just that we want a little bit more so let's update this so what we've done here is we've added some basic box and grid containers uh We've added some guttering with The Gap property here and we've added a class name so we want to add some styling to all of this so these individual grid items we've used the paper component and we've added the data card CSS module to them and I'll show you what all that is and that hopefully should add some styling so let's go create that style sheet for it now so if we go in here and we go to dashboard.module.sas and we'll just create a dashboard module for it and within there and there we go so the data card here which we were looking at which these individual cards uh contain at 20 pixels of padding we're also going to use CSS grid to arrange all of these I'm going to use media queries which is very rare that you actually need a media query uh it is needed here uh simply because we're using grid templates we could use autofill and all that stuff but we kind of want this set in stone because it is a dashboard we do want the slightly hard changes we don't want to be too fluid I mean it depends on the the layout and the style and the design of your dashboard but personally I don't think dashboards do well with that kind of fluid design where just things merge into each other and flow into each other um they usually are very tightly packed with analytics and graphs and things like that and you can't really just shift things around so fluidly and let things collapse like that so that's why we're using grid with media queries uh so right so we've added top cards container with the CSS grid the data cards with a little bit of padding we've added some guttering here with The Gap command and what we're doing is we're just dictating the size here of this so 12 mean meaning that um within a 12 column layout it's using all 12 columns so it's maximum width and then it's adding some margin on the top and the bottom for this component which is margin Y and we've added uh two of that so let's go check that out make sure this is imported correctly and there we go so that's what the dashboard currently looks like and my thinking is that with this setup we can add some kind of graph here a graph here a table and we can start to perform how our dashboard is going to look and you can imagine that this side menu is now going to go here it's going to start to really resemble a dashboard and we can start to implement um statistics and anal analytics that are going to be important to the datasoft team this super huge really important uh big company that is totally legit so yeah let's check how responsive it is as well so there you go it goes full width in mobile view which is perfect and it works great with theming so mui takes care of all the theming for you because you're using mui components and there we go so again don't worry about this we're going to take care of this when we get to the side menu but yeah this is looking pretty good now the final piece of the theming and styling puzzle is making sure we can work on these components in isolation it's all well and good trying to work in the dev environment on the full layout view but it's not always ideal you kind of want certain use cases for components and you want to put them through the ringer and you want to test them in certain ways and states and things and the best way to do that is in an isolated environment where you have full control and that's why we're going to be using storybook so let's install that now so let's go here so we want to install sorry book so so let's install storybook now so we want to use npx SB init and click enter and what that should do is that should go and install storybook into our project after it detects what our current Technologies are and our projects and it will add everything related to that and things like Babel webpack um stuff to run storybook and typescript things like that so that's installed what I want to do is go and take a look at the package.json and see what it's actually installed so if you see here storybook has automatically updated your package.json to add a whole bunch of things so it's added its own linter it's added storybook to start as a command you can even build storybook package it up and use it as a demo of your components for your team or just everyone to view sometimes people create Design Systems and burnt libraries on storybook and then just put that out there for other people to see and kind of look to see all the building blocks of how a big app works you know things like um I think NASA do it the BBC do it the guardian Do It um the World Health Organization IBM does it so yeah all kinds of companies do it so yeah storybooks added all of these base add-ons in bubble loader bubble core so yeah lots of good stuff let's actually run storybook now so let's just do yarn storybook that should open it automatically for us and there we go there's our storybook now we can see that it's in light mode right now because we've not added any kind of storybook and it's got a default set of stories so it's giving you an introduction page as well so you can update this to include whatever you want what we're going to do is we're just going to go here um should have added a stories folder which is it and it's got all that stuff there we don't actually want that so we're just going to delete that and if we go back to storybook you can see there's no stories one other thing I want to do is I actually want to add a very quick add-on there's lots of add-ons out there for Storybook in fact I made a video about the top add-ons that I prefer for storybook so you can go check that out and it will show you some of the ones that I use and I've even done a course on storybook which shows you how I would set it up from scratch but let's add one here very quickly so just Google storybook dark mode it is my favorite so let's copy that at yarn add and then story about dark mode go back to here and we just need to grab this so we're going to need to add this to the main.js so we go here and that should be added let's see if that's installed that's still installing I'll wait for that to go ahead uh yarn storybook boom and now we have dark mode on our storybook uh we can actually toggle it here so if you want light mode and dark mode you can do but I like it on dark mode by Deep now let's actually add a story let's add the side menu component to storybook so let's go to components let's go to side menu and we will add side menu Dot stories.tsx and this will create our side menu story so this is our story so essentially what we're doing is we're saying that we're we're creating this uh breadcrumb Trail for our storybook so we're saying within the components section we have the side menu pull the side menu this is the template that I want you to run within the wrapper within the storybook wrapper and it's just a side menu with some arguments with some side menu props now it doesn't have any props as of now so we'll just add that uh so we'll add that in the future so the default props are empty there's nothing in there and then we just say it's a side menu story use the template and these are our default props we haven't got any um and that's it and then it's just exporting that as that let's go take a look if we refresh we can now see that we've got our side menu uh currently there's literally no styling there let's add a light background so then we can see what it looks like on the light background and that is the beauty of storybook um we can obviously add some actions here if we wanted if we actually had a bit more of a interesting component that did things say like a button or an input or something like that we could add some more it would automatically add the options here based on the props and the attributes and stuff cool so that storybook setup and I think that's the final one we're pretty much good to go now so our styling and theming are all set up so we can now actually start to to build out some of these core components and get some really cool views is going and start to transform this into a data dashboard so there we go we've now added all the styling and theming we need to get this data dashboard into a place where it starts to resemble or some kind of analytical admin dashboard we've gone and set up the theming sorted out the styling cleared it added some base styling even set up some components like the header component that has a light and dark toggle is responsive we've tidied up the dashboard component we've even added storybook to be able to work on components in isolation or whilst working within the Paradigm of material design and material UI setting up the themes on the fly with the toggles and making sure that we have a foundation that we can start to build all of this on so components like the dashboard the side menu the mobile menu all these things that we can work on now in the future have a great Foundation so if you've been following along make sure to subscribe down below click the Bell notification like the video to support the channel and try to stay in the loop for when the next video is going to appear also make sure to follow me on the hashton on Twitter which I do post updates about when I'm about to release the next video or what possibly might be coming onto the channel in the future so it's great for people from the Curious bike Community to go and uh get involved but yeah that was styling and theming make sure to stay tuned for the next one my name is Harry and this has been curious bite

Channel: Curious Byte

Views: 7,925

Keywords: data visualization, dashboard, mui, material ui, material ui react tutorial, react admin dashboard, admin dashboard html css, module css react, module css, scss, storybook, storybook react, theming in material ui, theming

Id: z7wmK-2yfqg

Length: 43min 58sec (2638 seconds)

Published: Tue Mar 21 2023