Admin Dashboard Style Guidelines

This guide documents the UI, content, and formatting conventions for Techtonica’s Admin dashboard page, found in /admin/dashboard.

Use this guide when building or updating the Admin Dashboard, or when adding new dashboards on the Techtonica website.

Refer to the canva Techtonica UI doc for site-wide styling guidelines. The relevant page for this feature is on page 09 Admin Dashboard - UI Elements

UI Elements

Admin Box Cards

Cards are named Admin Box with class="admin-box" containing the below style found in ‎static/sass/style.scss

.admin-box {
  flex-grow: 2;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 3px 5px 1px #ccc;
  margin: 1em;
  padding: 0.5em 1em;
}

Status Label Colors

• Submitted
  • #003a6c
  • #9be1ff

#submitted-text {
  color: #003a6c;
  background-color: #9be1ff;
}

• In Review
• Accepted
• Rejected

Icons

Various icons currently are directly written in the markup as svg/xml code. The SVG icons themselves can be downloaded from the canva Techtonica UI doc Uploads button and viewable on page 09