UX FIX: Make fields narrower on Create Commons Form

[github-actions[bot]]

User Story

• As an admin or developer
• I can create/edit a new commons more easily
• So that I am less annoyed

Discussion

The form used on the CreateCommons Page and the Edit Commons page could use some UI tweaks.

Currently the size of the fields scales with the page as it grows and shrinks. But all of the fields are pretty short (numbers); that space is just wasted. It might be more reasonable to set a fixed width in characters or pixels, since the maximum size needed would pretty much fit on even the tiniest screens.

The date field is particularly annoying, since the date picker is all the way at the right, so you have to move the mouse a long way to reach it.

Default values on the create form, and/or suggested values (or advice on picking a value, brief explanation of what the values mean) might also be helpful.

I suggest looking at the various ways of doing layout available in React Bootstrap (such as Row and Col; see links below) and reorganizing the page for convenience:

• https://react-bootstrap.netlify.app/docs/layout/grid
• https://react-bootstrap.netlify.app/docs/forms/overview

You can also include default values as was done by the s23-6pm-3 team---visit their Create Commons page and see what they did:

https://proj-happycows-s23-6pm-3.dokku-12.cs.ucsb.edu/

This is what it looks like when you first load the form; notice how default values are suggested:

Here's what the code looks like for that; notice the various uses of code such as defaultValue={10000}

• https://github.com/ucsb-cs156-s23/proj-happycows-s23-6pm-3/blob/main/frontend/src/main/components/Commons/CommonsForm.js

One thing that would be nicer is if these default values were all organized, for example, in an object at the top of the file, something like:

const defaultValues = {
  startingBalance: 10000,
  cowPrice: 100,
  milkPrice: 20,
  // etc...
} 

And then each default value was something like:

• defaultValue={defaultValues.startingBalance} instead of defaultValue={10000}
• defaultValue={defaultValues.cowPrice} instead of defaultValue={100}
• etc...

Acceptance Criteria

• [x] The field widths have been adjusted in a way that makes the form more usable.
• [x] The date field, in particular, has been adjusted so that the place you click is not so far to the right
• [x] There are suitable default values when you are creating a commons.
• [x] The default value are organized into an easy to read object near the top of the CommonsForm.js file.

Optional but helpful:

• [x] The start date defaults to today's date
• [ ] The end date defaults to today's date plus 30 days
• [x] There are explanations (in small font near the field, or in "tooltips" that come up when you hover over a field).

[publicqi]

Need fix

[yuanchenmeng]

What needs to fix?

[publicqi]

I'm on this. The starting date cutoff did not apply to edit page. I think it's a merge conflict fix.