Component specs for the Manaus map

[SAUMILDHANKAR]

Description

Ensure that all React components in the map dashboard match the layout specifications defined in the index.html update issue. This includes verifying Material UI grid usage, spacing, icon sizes, and responsive behavior across desktop and mobile views. Typography styling is handled separately in issue #159

Goals

• Match layout structure to design prototype
• Apply correct spacing, margins, and grid spans using Material UI
• Use correct icon sizes and colors
• Ensure responsive behavior across defined breakpoints
• Validate all pixel values and layout rules

Implementation Instructions

1. Use Material UI’s <Container>, <Grid container>, and <Grid item> components to structure layout
2. Apply spacing using MUI’s theme.spacing() or sx prop
3. Use MUI breakpoints to define layout changes at:
   • 360px (minimum mobile width)
   • 960px (mobile → desktop transition)
   • 961px (desktop → mobile transition)
   • 1280px (large desktop breakpoint)
4. Ensure the page layout includes 4 areas:
   • Navigation menu bar (spans 12 columns)
   • Map visualization
   • Map information (includes all text and icons under “Biodiversity Conservation”)
   • Footer (spans 12 columns)
5. Desktop layout:
   • Map visualization area spans 8 columns
   • Map information area spans 4 columns
   • Default MUI gutter spacing between areas
6. Mobile layout:
   • Map visualization area spans 12 columns
   • Map information area spans 12 columns
   • 24px space between map visualization and map information
   • 24px space between map information and footer
7. Typography:
   • H1: “Biodiversity Conservation”
   • H2: “Maps”, “Legend”
   • H3: “Points”, “Areas”
   • Paragraph text for all other content
8. Section spacing:
   • 24px between “Maps” and “Legend”
   • 16px between “Points” and “Areas”
   • 12px between each row of information
   • 8px between icon and text in each row
9. Icon sizes:
   • “Points” section: 16px × 16px
   • “Areas” section: 30px × 30px
10. Icon colors:

• Landmarks: grey-darken-3 #424242 → [Font Awesome Circle](https://fontawesome.com/icons/circle?f=classic&s=solid)
• Animals: blue #2196F3 → [Font Awesome Dove](https://fontawesome.com/icons/dove?f=classic&s=solid)
• Plants: green-darken-1 #43A047 → [Font Awesome Seedling](https://fontawesome.com/icons/seedling?f=classic&s=solid)
• Species: yellow circle →
• Water Polygon: blue hexagon →
• Canopy Polygon: green hexagon →

Acceptance Criteria

• All layout areas are present and correctly structured
• Grid spans match spec for both desktop and mobile views
• All spacing values (24px, 16px, 12px, 8px) are correctly applied
• Icons are rendered with correct size and color
• Responsive behavior matches breakpoints and layout rules
• All changes are verified against the design prototype and spacing file

Resources

• [Design prototype](https://www.figma.com/proto/eRcnlUKzSsIJv3JcOMddwU/Map-Dashboard---Astar?page-id=14%3A727&node-id=5153-1312&viewport=-1071%2C388%2C0.41&t=BEOWGyV0vxUf75al-1&scaling=min-zoom&content-scaling=fixed)
• [Design file w/spacing](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/Map-Dashboard---Astar?node-id=5147-398&t=v6l4V7SwkxUhuIhA-1)
• [Material UI Grid System](https://mui.com/material-ui/react-grid/)
• [Material UI Breakpoints](https://mui.com/material-ui/customization/breakpoints/)
• [Material UI Colors](https://mui.com/material-ui/customization/color/)
• [Font Awesome SVG Icons](https://docs.fontawesome.com/web/add-icons/svg-bare)

Reference Issues

• Typography styling sub-issue: Change the typography styles for react #159

---