Section 6 (Lesson 2/9): We’re going to clone the company dashboard to create our new candidate dashboard. You’ll learn about refactoring and how it not only speeds up the design process, but also helps with design consistency.

Some key steps we’ll cover include:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Okay, diving straight in! Head across to your company page, please. Navigate up here to your company page. So now I'm going to clone this page because I want to retain a lot of our work that we've already done. So let's go to "Edit" and then "Clone this Page," and let's call this "candidate." And then Create.

Okay, here we are. Let's bring up the Property Editor, and this is where we start the refactoring process. So the first thing we're going to do is we're going to change
"Company" in the Page title, and I can actually see that this should have been dynamic on the company page, and we'll do that soon. But let's change this to "Candidate."

And this next step is going to cause a lot of issues, but don't worry. And issue checking is something that I want you to be comfortable with as well, because as you start building in your early days, that issue checker will start ticking up, okay? 1 issue, 3 issues, 12 issues... but Bubble makes it super easy to fix these.

Okay, so here we go. We're going to change the type of content. We're going to clear the selection because we don't need page data. We'll always be referencing the Current User. So clear selection, and here we've got 30 issues. Now I'm going to leave these 30 issues here. I'm not even going to have a look, because as we start deleting unneeded groups, removing unwanted functionality, you'll see that that will start to clear itself.

Okay, let's just start on the left-hand side. This is going to be a dark dashboard. But what we'll do is we're going to change the text "Orbit" - that also should have been dynamic - we're just going to type "Workplace." And this image can actually now be static. So first, clear your dynamic image. You can see you've got 28 issues now. This is all good. Let's go into the resources folder and upload the Workplace logo, the light logo. It's called Workplace-light.svg. Okay. Don't need an ALT tag because this is behind a login. Google can't get to it. Now, let's change this font color to our light primary contrast. And then when we change the background to black, we'll be able to see it.

This first tab is going to be called "Account". The next one - and we'll do the icons in a second - the next one will be called "Applications". And then we have "Settings" which we'll retain.

So let's go ahead and delete Group Navlink (Candidates). Down to 26 issues, perfect! So for Account, I think the home icon is absolutely fine. For Applications, also, I think that this briefcase does work well. I do want to rename things, though, folks, just so we're doing this properly. So let's change the name of Group Navlinks (Overview) to Group Navlinks (Account). On the Conditional tab, let's say, "Get v from page URL is account". All lowercase, please.

And then on the next one down, the name of Group Navlink (Jobs) now becomes Group Navlink (Applications). Let's change "job-posts" to "applications" in the Conditional tab. Perfect. And Settings remains the same!

Now, let's highlight all of the text, head over to the Appearance tab, change the color to primary contrast. Let's do the same with the icons. So you can see this is much faster than having to rebuild all of this stuff.

Okay, now that we've done that, click back on FloatingGroup menu and let's change the color. Let's use our a dark color. Actually, let's choose our charcoal color instead. You know what? Let's do a unique color here. I want something in between, so I'm going to drag this down, and I definitely want it a bit darker. There you go, maybe #303030. I'm not going to create a style for this because this is a one-off, but I am going to just copy this, and I'm going to highlight each of these Group Navlinks holding down the shift key and then let's also just clear this old background color out and paste in the #303030. So that's our starting point.

But what about the color when one of these buttons is active? So currently, if I go to the Conditional tab, we can see we've got a border color here and a background color. Let's make this slightly lighter. Let's actually choose now the charcoal color for the background color and I'm actually going to just remove borders. Okay, I'm going to do the same on the one below. I'm going to change the background color once it's active to charcoal. And I'm going to remove border style, which also removes the border color. Let's do the same with Settings. Charcoal, background color, and remove border style. Okay, refactoring is going really well.

Now, let's just look at the workflows for each of these, please. So edit the workflow on Group Navlink (Account). So Bubble has recognized that the destination needs to be the same page, and we can clear out "Data to send." Now, let's change what v is equal to to
"account." Lovely stuff.

While I'm in this workflow section, I can see Group Navlink (Applications) exists here as well, so I'm going to click across to Group Navlink (Applications), click on "Go to page candidate," clear out "Data to send," and change "job-posts" to "applications".

And then Group Navlink (Settings) is just to the right-hand side, and we've got a state, and we're going to reuse that state. Actually, let's just delete the logo, but we do need "Current User's Avatar" for the value. And then "Go to page candidate", clear our data to send, but we do want the v = settings.

So why don't we have page data? Basically, because with Hana, we were referencing Hana's company, so we pulled down the page data that represented the company in the database. But, with the candidate dashboard, we don't need to do that because this is a private dashboard, and we can just reference the Current User for all of the Current User's stuff. If it was a public-facing page, such as a user profile, your Facebook profile, your TikTok profile, then you would have page data, and that page data would be of type User. That would make more sense because then other people are viewing your data. Hopefully that is clear, but we still got a bit to go on this course, and we will be jumping back into the company dashboard, and I think it'll become clear why we need page data in certain instances and why we don't need page data in other instances.

What I want to do here is in this little Image Logo, let's go back to the sign-up page, I want to make this a style because we're starting to use it in different areas. It's got this little border going on here, which I really love. I'm going to detach the style, and I'm going to click "Create a new style..." and this will be called "Image borders". Create that.

Okay, now we can head back to our candidate page and we can double-click on the Image Logo and just apply this new style called Image borders. Look at that! Very, very nice. And what I might do is just override the borders here and make the roundness 8 px, just because it's a bit smaller, this logo. And then I'm going to make the spread radius 3 px, just because this logo is smaller. Let's see, 32 px width, yeah, the previous one, I think, was 40 px or 44 px. But anyway, we've done some good work there.

Okay, let's continue on this refactor. So what do we need to do up here? FloatingGroup Nav. This should be referencing the Current User, which it is. Got the log out flow. Fantastic.

Let's go top to bottom then. I'm going to right-click on FloatingGroup menu in the Elements Tree. I'm going to click "Collapse all children." I'm going to do the same with the Nav, click "Collapse all children." And we'll get to the Group Container in a second.

I just want to delete things that we don't need. So do we need a Popup Job? No, we don't. Okay, so I'm going to highlight the Popup Job, and then I'm going to click this delete button on the bottom of the Appearance tab. And then we don't need Popup Delete job, so I'm just going to show you another way to delete, which is just right-click where you are and then delete. All right, down to 14 issues!

So we've got our two overlays, FloatingGroup menu, Nav, no popups. And on our Layers, we've got our Group Container, okay, well, we want that. We want our alert, we're going to keep that. Group setting, we're going to keep Group setting.

But what we're actually going to do is change this, click into your Group settings and let's call this Group Account. Why are we doing this? Well, basically, with Hana, her Overview section, which we'll be building out in next week's section, section 7, her Overview section or the top most, the replacement for the Account here is called
"Overview," and that has charts, and we can see some data and some numbers. And then because she needed to fill out her own personal details and her company details, we put that in the bottom section called Settings.

But with a candidate, a candidate doesn't need dashboards and all these fancy numbers, so it doesn't have an Overview. So instead, we're going to use the Account view in a similar vein that we did, the Settings view for the Company. But then I'm just going to for design purposes only, I'm going to just keep that little Settings button there because in reality, there would also be a separate Settings section, where maybe a user manages their plan and can do other things. But just for design purposes, humor me for a moment and just keep it in there because it looks good.

So we changed the name to Group Account, and on the Conditional tab, we're going to change "Get v from page URL is settings" to "Get v from page URL is account". Let's change "Settings" in the Appearance tab to "Account," and let's say, "Here are your personal details" in the text element beneath the title. I'm just going to remove a few words. Okay, we're going to get to this next section in the next lesson.

So that's Group Account, and let's open up Group jobs. This is going to be called "Group Application," and the nice thing about this particular view is that we're actually going to retain and just refactor this table. This is going to be a very similar design, and it will reference the candidate's job applications, jobs he's applied for, and the status of those jobs.

So we're going to say "Applications" in the Appearance tab for the title and "Here are your current applications" as the subtitle text. Actually, we also need to do is on Group Application on the Conditional tab, change "job-posts" to "applications," all lowercase.

Okay, we don't need this "New job" button. We're going to just backspace and delete that new job, but we will be utilizing this search. Okay, no data. Yeah, we'll come back and tidy that up.

I just wanted to I'll go back to the company page very quickly before the break because I want this text to be dynamic (where it currently says "Orbit"). So this is going to be the "Current page's Company's Name." I'm going to type in "Orbit" here in the canvas placeholder, and we probably do have a lot of space here. So that's 5 letters, probably another 10, 15. It'll be unusual if a company's name was longer than 15 characters. But let's say that a company's name is two words, which means it might go beyond 15 characters. So what we're going to do is this. The current height of this text is 25 pixels. Fine. Let's head over to the Layout tab, please, and I want you to set a fixed height. I'm going to set a fixed height of 26 px.

So what I'm trying to do here is I am instructing the text element that cannot grow vertically, so it cannot wrap to the next line. Instead, it's just going to be truncated because that element is fixed. So the text has to fit within this element. Element has a fixed height now. So it's just going to be truncated with three dots. And I've given myself more than 15 characters to work with for the first part of the company name if it's a two-part name. So I think that that is most of what we need to cover to make sure that we can dynamically display a name (or most of it). And it's normal practice to see truncation. You'll be seeing it every day in your professional life or personal life when you're using your different applications, you'll see truncation everywhere, it's for design purposes.

And another option here to employ is to use a Conditional to then say that if a company name is more than, say, 16 characters long, then reduce the text size so then it can actually fit more characters. I'll let you work on that on your own.

What was the other thing I wanted to do here as well? I think there was one other thing. I can't remember at this moment. I'll come back to it later. All right, anyway, how fast was that? Okay, we do have some issues to fix, and we're going to come back to that. A lot of that will be workflow-related. But, in the next lesson, we're actually going to finish off the Account view, so I'll see you then.