FPH and Business Side Bars CSS

[joshualipton]

Overview

"Computer programmers obtain quasi-magical, superhuman coding ability when they have a blood alcohol concentration percentage between 0.129% and 0.138%" - Former CEO of Microsoft

Running the program

1. Clone the repo through git clone
2. Navigate to the directory of your fph-frontend repo using the cd command.
3. Run git checkout dev and then git pull.
4. Create a branch off the dev branch in fph-frontend. For the name of the branch, use what the title of this issue as. Use git checkout -b <insert_branch_name>.
5. Install the necessary dependencies through running yarn. Test that your application works by running yarn format followed by yarn dev
6. Create your necessary code through creating files within the component folder.
7. Run the code with yarn (to install), yarn format (to format the code), and yarn start (to start the program).
8. Access localhost:3000/.

Task

You guys have the honor of working on the first CSS task for FPH!

FPH Navbar
Business Navbar

Try your best to match the wireframes provided by the designers. If you click on the figma element, you can see the properties such as color and size. Try not to use px and manully size things, instead try to use the chakra components in place as much as possible to do css like in the codeblock below:

// Sample card from Airbnb

function AirbnbExample() {
  const property = {
    imageUrl: "https://bit.ly/2Z4KKcF",
    imageAlt: "Rear view of modern home with pool",
    beds: 3,
    baths: 2,
    title: "Modern home in city center in the heart of historic Los Angeles",
    formattedPrice: "$1,900.00",
    reviewCount: 34,
    rating: 4,
  };

  return (
    <Box maxW="sm" borderWidth="1px" rounded="lg" overflow="hidden">
      <Image src={property.imageUrl} alt={property.imageAlt} />

      <Box p="6">
        <Box d="flex" alignItems="baseline">
          <Badge rounded="full" px="2" variantColor="teal">
            New
          </Badge>
          <Box
            color="gray.500"
            fontWeight="semibold"
            letterSpacing="wide"
            fontSize="xs"
            textTransform="uppercase"
            ml="2"
          >
            {property.beds} beds &bull; {property.baths} baths
          </Box>
        </Box>

        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          {property.title}
        </Box>

        <Box>
          {property.formattedPrice}
          <Box as="span" color="gray.600" fontSize="sm">
            / wk
          </Box>
        </Box>

        <Box d="flex" mt="2" alignItems="center">
          {Array(5)
            .fill("")
            .map((_, i) => (
              <StarIcon
                key={i}
                color={i < property.rating ? "teal.500" : "gray.300"}
              />
            ))}
          <Box as="span" ml="2" color="gray.600" fontSize="sm">
            {property.reviewCount} reviews
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

For other css, put it in a Navbar.module.css. Also note the Navbar.jsx file is not in the components folder, please move it to the components folder and give it its own folder in that folder and refactor the files that import the navbar to reflect this move.

Lastly, make sure the component is scalable. This means if you were to zoom in and out of the page the nav bar should still look relatively the same.

Support

Feel free to reach out to Madhu and Josh on Slack/Messenger for assistance.