Usability & Styling catch-all issue

[XuanLi-Leong]

Is your feature request related to a problem? Please describe.
We're lacking design conception sorry 😢

Describe the solution you'd like

WIP

RFR

Done

• 🦊 Register page - show text to show instructions for how to create a username. Also the field should be username not email
• Better alerting upon successful login and register
• 🦊 Only show user-related pages on FE Profile page should not be displayed when not logged in #107
• When should we post quiz results? Upon componentWillUnmount?
• 🌎 Universal alerts on errors: add code on each page FE: Create alert component to display on bad api calls #138 @alicesf2
• 🔭 Tablet / Mobile -- Make use of chrome inspector emulator to explore cross-device adaptability
• .Empty quiz redo danger button in bottom left of quiz pages @XuanLi-Leong
• Import search component to RO homepage
• 🦊 Pagination: (1) Show selected page as differently styled (2) Disable next/prev when we're on last/first page
• Quiz should show a more guided approach -- a start screen, an ending screen, a progress bar.
  FE: Add Visual Progress to Quiz #156 @hungryflamingcat
• Quiz should show ability to redo on the ending screen Quiz: Add ability to redo the quiz #26 @hungryflamingcat
• 🦊 Philareads info page: get from their about me. include a link to philareads.org .
• 🦊 phila READS not reads in navbar
• ❗️Use username instead of email Use username, not email #176
• Read search string from query param Search: Allow search via query params in URL #115 @XuanLi-Leong
• 🌎 Smarter reroutes 404 page, Reroutes #181 @XuanLi-Leong
• 🌎 404 page 404 page, Reroutes #181 @XuanLi-Leong

Legend

❗️ - BIG important change
🚧 - WIP Someone's already working on it
FE:
🦊 - QUICK FIX, please take these up they are very small tasks that just ned to be done
🌎 - Tasks that are related to site-wide stuff ("global" har har)
🔨 - Tasks that would require distinct, unrelated changes in multiple places of code. Aka feel free to open a PR that only solves the task in X file. It's still progress.
🔭 - Just needs your eyes. This is the "use our website and document any bugs you find" task.

BE

• Backend deleting rows - SQLAlchemy might throw a fit if we delete books/quizzes and foreign keys are messed up uh ohhhhhh 😖 😓
• More user-friendly error messages from backend errors More user-friendly error messages from backend errors #61
• Allow fuzzy search Fuzzy searching not working for books #102
• Login failure error message --- say "Username or password" instead?
• P1: Add docs, .md files for subdirectories, project structure etc

FE

Admin feature lol

• P1: Add parents advice admin pages
• P1: Admin page doesn’t show up in Navbar -- experiment to see when React re-renders navbar and stuff
• 🦊Update the /admin landing - right now it looks kinda weird, do some styling to make it nicer
• 🦊P2: Bold the username in admin upgrade

Handle edge cases

• 🔨 Handle return values smartly, API call server errors, better error alerts, handle null/undefined variables
• When server is down -- add a catch to all promises to return the desired structure
• 🔨 Add empty states
• P2: Empty state for “No quizzes” -- there is an example of empty state on the search page
• P2: Empty state for “No books” (e.g. mistyped URL to a year we don’t have books for) -- there is an example of empty state on the search page

Polishing

• Guide on the page regarding website, hinting users to make accounts
• Site titles (the thing that shows up in the tab)
• Favicon - this can wait till after talking to philareads
• Loading screen flash can be distracting when it happens for only a fraction of a second

Usability

• If a user is logged in, there should be an easy way to see if they have already done a quiz based on their quiz history stored in db, so that they can easily find new quizzes
• 🦊 Badges page doesn’t show labels/ numbers for stuff that's in progress
• 🦊 Important: Badges don’t hover text to explain what the badge is
• 🦊When user presses login, change button to loading animation so user doesn't get confused if login takes a while
• Change reactstrap NavLink to react-router Link components via NavLink and React Router - results in complete site reload reactstrap/reactstrap#298
• Quiz page should collapse book information -- it's not the focus of the page
• 🦊Changing color on focus in book selection -- probably a .css :hover property
• 🌎 P3: Show breadcrumbs / history within each nav tab's stack of pages -- ability to easily navigate to previous page -- more context here https://www.smashingmagazine.com/2009/03/breadcrumbs-in-web-design-examples-and-best-practices/
• 🦊 More clickability: Clicking on a book on a quiz page should bring you back to the book
• 🦊 P1: Make entire question answer row clickable, not just the text -- just use an onClick function on the div
• 🦊Book catalog image aligney thing -- book icon is "shorter" than a book cover image -- hotfix done but can try to do with svg
• 🦊Pagination should visually disable back/next on first/last pages
• If a user is on a quiz (or other) page when they click login, we should redirect them back to that page after a successful login -- either use queryparam or use this.props.state.referrer (see how we render the Login alert on Home)
• Edit/Add another uses an <a> tag. This causes react router to re-render the entire page. We should try to use a <Link> and change how we control the state of the form / other components on the edit/add pages.
• P2: Admin page: better way to select book (e.g. by year, text auto filter)

Styling

• 🦊 P2: Add page title to account manage users page
• 🦊 Search icon to RedirectSearchBar -- just gotta fight with flex a little
• 🦊 Styling on the quiz published checkbox -- see the styling done for the book form
• 🦊 P1: Page font size bigger + fix bootswatch border problem
• ? Columns
• ? Use card decks when more appropriate?