Adding another home page

[erikanoms]

Suggestion It is unclear especially to nontechnical users what the whole process is. Making another home page that explains the process, and having an option to go to either web capture or upload would be helpful.

[pavanposani]

@erikanoms , Could you please drop here any suggestions that you have for the changes in UI

[erikanoms]

HOMEPAGE Figma file: https://www.figma.com/file/exSOAQauxk9QRcca9uwgD4/ReproServer-Redesign?node-id=302%3A103&t=zOT6Vv2kVVvJvdna-1 **you can see CSS by clicking an element and selecting Inspect tab from the top right bar

1. Make "Share reproducible work" bold text
2. Change the text description under "share reproducible work" to the one in the Figma file. (Fixed some errors, got rid of the bottom margins, and made the text 18px)
3. Texts inside the ellipses look like the bottom line of the text box is aligned center in the circles, so maybe get rid of the bottom margin of the texts? (currently, it shows as margin-bottom: 0.5rem)
4. Change the colors of the ellipses to make them more accessible. For HEX codes, please refer to the Figma file(just something to consider but you could use an image for the trace-pack-record-replay part? It might be easier to make it responsive)
5. Add a margin of 15px between the ellipses and the texts at the bottom (please refer to the Figma file)
6. Change the color of the arrows to #838383
7. Get rid of the horizontal lines around the upload section. Instead, change the background colors of each section (Top section: #F9F9F9, upload section #FFFFFF, Examples section #F9F9F9)
8. Add the text "Select a package to upload" to the upload section
9. Change the text size for "Upload a .rpz file to get started" & "or provide a package's URL" to 18px
10. Get rid of the box around choose file (It confuses users between text boxes), and shorten the text box for the URL. please refer to the Figma file

[erikanoms]

WHILE UPLOADING

1. Can you make the Upload button disappear while uploading?
2. Change the progress text "x% uploaded... please wait" to "Uploading... x%" and bring it below the progress bar

[erikanoms]

PACKAGE (Please refer to the design systems page on the figma file)

1. Change the text sizes Package xxx: Bold 36px Run the experiment: Regular 13px Parameters, Expose ports, Input files: Bold 24px Other texts above text boxes and files: Regular 18px
2. Get rid of boxes around "Choose File No file chosen" and can you change them to a button? (Screenshot is from the home page on the Figma file).

[erikanoms]

WEB CAPTURE

1. Change the text sizes Web Capture: Bold 36px The description below that: Regular 18px RPZ File, WACZ File, Hostname, Port number: Regular 18px
2. Get rid of the text description under "Web Capture"
3. Get rid of the text "Would you like to replace the web archive?"
4. Add text above the three buttons "Click "Record from browser" if you want to have more control and manually crawl. Click "Start automated crawl" if you prefer to crawl automatically. After the crawl is complete, you will be redirected to this page. From there, download the new RPZ file (It has a WACZ file in it)."
5. Add horizontal spaces of 30px between three buttons

[pavanposani]

WEB CAPTURE

1. Change the text sizes Web Capture: Bold 36px - changed to display-6 in bootstrap, as text is responsive(40 px) The description below that: Regular 18px - RPZ File, WACZ File, Hostname, Port number: Regular 18px - Done ( changed to h5, which is 20 px)
2. Get rid of the text description under "Web Capture" - Done
3. Get rid of the text "Would you like to replace the web archive?" - Done
4. Add text above the three buttons "Click "Record from browser" if you want to have more control and manually crawl. Click "Start automated crawl" if you prefer to crawl automatically. After the crawl is complete, you will be redirected to this page. From there, download the new RPZ file (It has a WACZ file in it)." - Done
5. Add horizontal spaces of 30px between three buttons - Spacing added using bootstrap utility(mx-4), 24 px

[pavanposani]

WHILE UPLOADING

1. Can you make the Upload button disappear while uploading? - done
2. Change the progress text "x% uploaded... please wait" to "Uploading... x%" and bring it below the progress bar - done

[pavanposani]

HOMEPAGE Figma file: https://www.figma.com/file/exSOAQauxk9QRcca9uwgD4/ReproServer-Redesign?node-id=302%3A103&t=zOT6Vv2kVVvJvdna-1 **you can see CSS by clicking an element and selecting Inspect tab from the top right bar

1. Make "Share reproducible work" bold text - Done
2. Change the text description under "share reproducible work" to the one in the Figma file. (Fixed some errors, got rid of the bottom margins, and made the text 18px) - Done
3. Texts inside the ellipses look like the bottom line of the text box is aligned center in the circles, so maybe get rid of the bottom margin of the texts? (currently, it shows as margin-bottom: 0.5rem) - Not Sure about this
4. Change the colors of the ellipses to make them more accessible. For HEX codes, please refer to the Figma file(just something to consider but you could use an image for the trace-pack-record-replay part? It might be easier to make it responsive)
5. Add a margin of 15px between the ellipses and the texts at the bottom (please refer to the Figma file) - Done (16px - mt3)
6. Change the color of the arrows to #838383 - Done
7. Get rid of the horizontal lines around the upload section. Instead, change the background colors of each section (Top section: #F9F9F9, upload section #FFFFFF, Examples section #F9F9F9) - Done
8. Add the text "Select a package to upload" to the upload section - Done
9. Change the text size for "Upload a .rpz file to get started" & "or provide a package's URL" to 18px
10. Get rid of the box around choose file (It confuses users between text boxes), and shorten the text box for the URL. please refer to the Figma file - Needs Rework