Web capture: design changes

[erikanoms]

• For hostname and port number, shorten the input box so they only extends to the middle of the screen size.
• Put "Hostname:" and "Port number:" on top of the input boxes instead of left
• Next to "Hostname", put "(optional) Enter the hostname the server is expecting" in italic on top of the input box. Text color should be #757575
• Under the hostname input box, add "Example: localhost" in italic and #757575
• Next to "Port number", put "Enter the port number that the web server listens on" in italic and #757575
• Under the port number input box, add "Example: 3000" in italic and #757575

[erikanoms]

• For buttons, make each section smaller and align to the left
• Change the text: "Manually capture" "You will see the app running. Click on the elements you want to record." "Manual capture"
• Change the text: "Start automated capture" "ReproZip-Web will attempt to capture everything." "Automated capture"
• Change the text: "Upload existing file" "if you have a WACZ file ready, upload to replay the web app" "Upload existing file". Also change the button background color to #CAAED9
• Change the button width and padding: vertical padding equal to font height, and set horizontal padding to 1.33 times vertical height. If a font height is 20px, vertical padding is 20px, and horizontal padding would be 27px
• Make button texts bold ** To check specific css of the design, go to the Web capture V3 page on the figma file, go to inspect on the top right https://www.figma.com/file/exSOAQauxk9QRcca9uwgD4/ReproServer-Redesign?node-id=567%3A109&t=d38zHoO0MxhGbVhx-1