[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

• [x] 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

• [x] display each post's author on homepage too

• [x] 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/."

• [x] 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

• [x] w/ user not displayed, allow homepage full flex

• [x] tell user when login fails

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

• [x] fix error 404 link and wording

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

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

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

• [x] 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

• [x] set max width for user sidebar

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

• [x] consolidate MultiSelect configuration into a single reusable component

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

• [x] 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

• [x] link sidebar username to search posts by username

• [x] 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