P1: Update Internal Catalog Display

[ajefts]

Objective: Improve the presentation of the internal Connect catalog for work options.

Requirements:

Designs - https://marvelapp.com/cc9e4j1/screen/62801529

• All 3 screens of the Connect catalog will require updates to UI and content, including:

  • Screen 1: Solutions vs. On Demand options

  • Screen 2: Full List of Solution Options

  • Screen 3: Full List of On Demand options (TaaS/Capacity)

• Screens 2 & 3 will include substantial UI design updates, with new content displayed for:

  • Solution Description

  • Solution Deliverables

  • A link to a case study on the website

  • A 'select' button

[ajefts]

Link to feature: https://tcprod.productboard.com/feature-board/planning/features/2851875

[maxceem]

Here we have to do the next final fixes:

1. Increase icons size to take the same space as on new design https://marvelapp.com/cc9e4j1/screen/65344038/handoff and https://marvelapp.com/cc9e4j1/screen/65344039. So icons should have size up to 79px x 79px. We want to achieve the same sizing of the cards as in design.
2. Add font mixins https://fonts.google.com/specimen/Roboto+Condensed to the https://github.com/appirio-tech/connect-app/blob/414027e3fcee24061943ef5e5062d03828426929/src/styles/_fonts.scss with all 6 variations (light, regular, bold + italic) and select these languages, while adding font files to "src/fonts/roboto-condensed". To create fonts in all required formats eot/svg/ttf/woff you may use service https://www.fontsquirrel.com/tools/webfont-generator.
3. After font mixings are there update styles of all the headers that use Roboto-Condensed to match the design:
   • https://monosnap.com/file/LZxAP1rEJksnFZNX9y58jSGkJtrdP2
   • https://monosnap.com/file/y0vkVnldB82LavGFhVIUf1jhTGxzO0
   • as we don't have Roboto-Condensed Medium font-weight, use Regular or Bold depend on which one looks closer to design.

[maxceem]

@vikasrohit after increasing icon size to 79px as per design it looks like this:

I guess we should not increase the icon size and just make space around icons similar to the design but without color. What do you think?

[maxceem]

For now, all final fixes are done and pushed to DEV as per current requirements.

[vikasrohit]

Thanks @maxceem. I liked the increased icons on the first step but yes, on the second step they are looking bit odd. I even tried to create that weird oval shape around the icons, using the css shared by the designers, but not able to create that exactly. What kind of space around icons, you are thinking we can create?

[maxceem]

What kind of space around icons, you are thinking we can create?

I mean to keep the icon size as it was before. But just add white space around. Actually to make it the same as in design, but without a stylish background, so instead of the background, there would be just a white space.

[vikasrohit]

Ohk, that is what we had before increasing the size of the icons, right?

I found an svg, which has similar shape, from marketing website. I have modified the colors to match something from our current palette. Let me know if we can use this.

<svg width="79px" height="70px" viewBox="0 0 79 70" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
                  <linearGradient x1="50%" y1="4.84564022%" x2="70.3177409%" y2="89.2565294%" id="linearGradient-2">
                    <stop stop-color="#0B71E6" offset="0%"></stop>
                    <stop stop-color="#26ADE9" offset="100%"></stop>
                  </linearGradient>
                </defs>
                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                  <g transform="translate(-681.000000, -1700.000000)" fill="url(#linearGradient-2)">
                    <path d="M718.54015,1770 C745.222539,1770 756.340201,1748 759.675499,1729 C763.010798,1710 740.030553,1700 718.54015,1700 C697.049748,1700 674.069503,1710 682.963632,1735 C691.857762,1760 691.857762,1770 718.54015,1770 Z" id="Oval-Copy-5"></path>
                  </g>
                </g>
              </svg>

[maxceem]

@vikasrohit it's done using this BG and pushed to dev, looks good to me!