Set Creation: New Problem Set Button (Small Screens, e.g. Single Column)

[alexrcabral]

Set Creation: New Problem Set Button (Small Screens, e.g. Single Column) 

New Problem Set Button

The "New Problem Set" should be the first item in the new "My Created Sets" section. 

When pressed, the "New Problem Set" should create a new empty /edit set, using the existing naming convention (e.g. "New Problem Set 12-21-2020"), and take the user to the editing view of the newly created set. 

Appearance: as shown above, a rounded rectangle with an icon (white plus sign within a purple circle) next to the words "New Problem Set". When the problem set cards are in a single column (e.g. for smaller width screens), the New Problem Set button should match the length of the problem set cards

Alt Text: "Add New Problem Set" 

Acceptance criteria: 

Given that I'm a logged-in user (student/teacher/other) on the v2 view, when I go to the "My Created Sections", I should encounter a button to add a New Problem Set. If I click this button, I should be brought to the edit page of a new empty problem set. 

[abaranowska1]

Tested with success

• The "New Problem Set" is the first item in the new "My Created Sets" section
• After click new button I should am brought to the edit page of a new empty problem set.

[alexrcabral]

the New Problem Set button should match the length of the problem set cards

@rupeshparab I'm getting some weird behavior on this. when the problem set cards are exceptionally long, the new problem set button remains short.

And then when the problem set cards are short, the new problem set button sometimes corrects to be longer than the cards themselves.

[rupeshparab]

@alexrcabral Do we always want the width of the New Problem Set button to be same as the card?

I have kept a breakpoint of 480px, when the screen size is less than that the button size would match for larger mobile screens, the button size would be fit for the inner content

[alexrcabral]

Addressed on touch-point call:

• The long width problem sets are notably on iPad screens
• Button width should match horizontally but not vertically
• Will require some fiddling with breakpoints

[abaranowska1]

In my opinion, now it looks fine.

[alexrcabral]

Thanks @rupeshparab, this is looking much better