Bb/bootstrap integration

[bbland1]

Description

We discussed using bootstrap and react-bootstap in the application this installs them and changes our buttons, inputs, navbar to utilize it. Makes sure the app still looks and functions the same with the bootstrap default styling basically.

Acceptance Criteria

• A working and functioning app that uses the new package 😅

Type of Changes

	Type
✓	💄 Style

Updates

Before

After

Testing Steps / QA Criteria

• Opening the preview link in the PR you should see the changes

To make sure the dependencies and code function as should:

• From your terminal, pull down this branch with git pull origin bb/bootstrap-integration and check that branch out with git checkout `bb/bootstrap-integration``
• Then npm ci to install the newly added dependencies locally and npm start to launch the app.
• Open a second terminal to run the typescript compiler using tsc --noEmit --watch to see any type issue.
• After installing the new dependencies and starting the app you should see that default styling of the bootstrap on all buttons and inputs
• Navigate through the application making sure all functionality still works

[github-actions]

Visit the preview URL for this PR (updated for commit 22cc8fd):

https://tcl-77-smart-shopping-list--pr45-bb-bootstrap-integra-bdivb2e4.web.app

_{(expires Sat, 05 Oct 2024 09:57:22 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

[RossaMania]

Great implementation of Bootstrap! You were able to install and import Bootstrap, and use some default Bootstrap components without making big styling decisions! Nice job! This should give us some inspiration

[eternalmaha]

Thanks for implementing this! The blue and more animated feel of the buttons in the list view is growing on me. Everything appears to be working as it should too and I dont see anything breaking at all!!!
This is probably unrealted, but the only odd thing I noticed is that for my absurdly large list, the list is cut off at when my window is minimized somewhat. Im not able to scroll down to the bottom of the list. The issue goes away and I can scroll normally at full window. This probably existed beforehand and am just now realizing this about the list since I don't see how bootstrap would change this unless its a default sizing thing built in, i'm not really sure honestly?) I'm assuming this will all be taken care of anyways when and if we make the app mobile responsive! :) Great job with all the integration!!!!! Thanks for doing this and getting us started!!!

[bbland1]

This is not the right background color but needed to set it to something to see the scrolling and make sure ti stuck to the top correctly!

[alex-andria]

Nice work Brianna and thanks for taking initiative on this! Already looking great and can't wait to see how you all style this with the SCSS PR Falak put up as well.