[ENHANCEMENT] Minor aesthetic improvements

[SethCram]

Is your feature request related to a problem? Please describe.

• Yes, the aesthetic of the website isn't very good

Describe the solution you'd like

• Minor aesthetic improvements

Additional context

• each post on the home page should have a background
  • marks where it ends and a new post begins

Development

• add bg to each post on homepage

  • reused sidebar bg for dark and light
  • each post can have diff sized outline tho
  • should center contents and have same box size regardless
    • if not enough description, image may not be justified to the top

• display each post's author on homepage too

• add site name to topbar

  • in the middle for phones
  • on the LHS for desktops
  • was able to add favicon too
    • used favicon.io and created my own
    • said to add to root of repo, but had to add to public folder for root access
    • likely bc index.html is in public folder too
    • still had to keep 2 copies of favicon tho bc
      • "Module not found: Error: You attempted to import ../../../public/favicon/android-chrome-512x512.png which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
        You can either move it inside src/, or add a symlink to it from project's node_modules/."

• center single-column posts on the screen

  • centered all posts on screen
  • changed flex from 90% to 100% and justified content to center
    • not sure why it was at 90% before
    • possibly bc user sidebar was always present

• w/ user not displayed, allow homepage full flex

• tell user when login fails

  • can look at other pages that do this
  • output error msg from backend

• fix error 404 link and wording

  • should be worded "Get Help"
  • changed containers so that space around link didnt go anywhere

• dont display categories section if no cats but follow at icons present

  • changed to check array length instead of non-related icon links

• use CSS variable for dark mode

  • can change it depending on light or dark mode
  • should be applied to all black text in project
    • so can then turn it white
  • should test with simple implementation before replacing variable names everywhere
    • didn't work properly
  • changed to going down to app.css and implementing default color based on whether dark or light active

• set max width for user sidebar

  • set to 50% of page width for w/ displayed below other contents in isolation

• consolidate MultiSelect configuration into a single reusable component

  • completed during [ENHANCEMENT] Category related improvements #36
  • not a good isolation tho
  • but no point to abstract alota the categories related things since only reused for category related purposes

• emphasize dropdown arrow on write page in darkmode

  • couldn't change its color
  • so added a grey border around it
  • kinda weird looking since arrow not rlly centered
    • so moved it up
    • looks a bit better but not perfect

• link sidebar username to search posts by username

• add criteria that was searched by w/ search results shown

  • luckily, already a url parsing method in use
  • restricted it to rerun everytime search url changed and parse for username, category, searchContents, and page number
  • then displayed those fields in the search results header

• set visibility timeout for all error and success messages

• clear searchbar suggestions when enter pressed

• restrict max post title length

  • or atleast max post title length of a single word
  • leads to title row overflow of post container

• only display what username replying to if not replying to root comment

• only require favicon in one location instead of 2 duplicates