adicu/devfest-2024

Titlebar/Header Styling

Closed this issue · 2 comments

ethmth commented

Task

I've created a placeholder Header component in src/components/Header.jsx that currently looks like this:

2023-10-01T15:58:23,685785291-04:00

The goal is to make it look like this (from the Figma):

2023-10-01T15:58:41,128431242-04:00

With the Index having a dropdown to the different items "Track 1", "Track 2", "Judges," etc (also in the Figma).

  • You should be able to make almost all changes in the Header.jsx file, without touching the src/pages/index.js file that defines the entire page.
  • Feel free to remove anything I've already included in Header.jsx as needed.
  • Feel free to use any styling method you wish, (with a preference for @emotion/styled styled components), as long as you ensure that all of your styling is local and won't interfere with the rest of the app's styles.
  • Feel free to make additional components, but keep them organized. One way to do this is making a new components folder, such as 'src/components/header-components' and put your custom components in there.
  • If you install any npm packages for fonts or otherwise, be sure to commit your package.json file.
  • If you include any fonts/images manually using a file, be sure to place them in the appropriate place, like 'public/fonts' or 'public/images' (with appropriate subdirectories if needed) and be conscious of image file sizes.

Dev Logistics

Create a new branch based on the 'main' branch by clicking "Create a branch" button under the "Development" pane to the right of this issue page. Be sure to checkout the branch in your local repo. Please don't commit directly to the 'main' branch.
Create a pull request when you're done, and someone will review it and merge it into main

lejara commented

Hello! Good day.

May i take this on?

ethmth commented

Hello! Good day.

May i take this on?

Unfortunately we're going to keep these issues internal to our team to give our members more experience. Probably should have made that more clear, apologies.