UI Feedback *added to Figma

Header
1. Header size does not match designs (Done)
2. User’s name should be to the left of “Logout” (Done)
a. User’s name should not be a link
3. The bottom border is neither the correct size or color (3px black) (Done)
4. Displayed typeface is either Arial or Helvetica, should be Proxima Nova (Done)
a. On my computer at least, the browser is identifying the font as Proxima Nova,
but displaying Helvetica, note the difference in the dots in the lowercase “i”
and the shape of the lowercase “a” as points of reference
b. Helvetica vvv

c. Proxima Nova vvv

5. Change favicon (icon: https://www.dropbox.com/s/u263algtd7o4b8b/flavion.png?dl=0)

(Done)

Courses
1. “Courses” Header is not the correct size and margin does not match designs (Done)
a. Updated the course cover photos on Figma
2. *Added #FBFBFB background to courses section (Done)
3. *Hover behavior for the course cards should scale (Done)
4. *Progress bars should follow the how they are presented in Figma (Done)
a. Solid background (Done)
b. No border-radius on top (Done)
c. Bottom border-radius must match the card’s (Done)
d. Text on “Continue Course” must be centered based on the card, not on the filled
space ( When we add a Text above a Progress bar, the text always appear in
the center of the progress bar not the whole box/main box. If we try to fix the
text as stated by you it disturbs the functionality of the progress bar.
e. Fix below, please review.
f. <div class="progress" style="position:relative">
 <span style="position: absolute; font-size: 15px; top:
13px; font-weight: 700; z-index: 2; color: black;text-
align: center; width: 100%;">
Continue Course
</span>
<span class=”sr-only”>Continue Course</span>
<div class="progress-bar progress-bar-warning
progress-bar-striped active" role="progressbar" aria-
valuenow="80" aria-valuemin="0" aria-valuemax="100"
style="width: 80%">
</div>
</div>
g. Background color for the progress bar must match designs (#BBBBBB) (Done)
5. Cards are based on courses, not lessons. (Done)
a. The courses page is still listing the lessons as the course, currently we have
only two courses. The titles and descriptions on Figma are accurate.
6. The image does not fill space on large screens (Done)
a. Border-radius also does not match (Done)
7. Resources should remain visible if we anticipate having a large number of courses we
may want to move that to a sidebar instead of keeping it at the bottom. I will add designs
if that’s the direction we want to go. (When the courses will increase then scroll bar will
be add automatically. I have added the functionality)
8. Line under Resources should extend to the end of the page. (Done)
9. Title next to favicon should be “Courses”. (Done)

Training Pages
1. *Added #FBFBFB background to body to offset the white border in many of the video
thumbnails (Done)
2. Video should fill 7 columns, phone/remote 5 (Done)
a. This was done as specified, but in reviewing, on my device at least, it looks like
the video player is scaling larger, forcing the page to scroll to fit the elements.
Let’s reduce the padding around the course title “VSTAlert Complete Training” to
25px.
b. Other challenge here is it seems like col-6 is making it too small but col-7 is
making it too large. We should keep it at col-7, but add margin to the right to meet
in the middle, keeping the whole UI on the screen if needed.
3. Phone and remote should be their own self-contained SVG or CSS elements not just
images. Placement of the interactive elements gets wonky on some screens. (I need only
images. SVG is not working as a background image. So provide me HD images then I
will replace)
a. The issue with images is that they are not scaling uniformly, the phone is cutting
itself off on larger screens, and ultimately it does not display or function like the
actual app. The remote and phone need to be their own uniform elements that
 behave consistently at different sizes. Using background images is likely not the
way to achieve this. Furthermore, the sizing, spacing, and design is not consistent
with the way that it actually appears and functions on the actual app itself.
Ultimately the app front end shown here should be able to achieve all or most of
the functionality of the actual front end, including the modals, and eventually
additional pages if we use this framework for VSTOne. There is no reason for this
to not function identically to the app front end.

4. There’s no progress bar on the video player (Done, but the reason that we hid the
progress bar was keeping view that the user will be able to forward or rewind the
video which can cause a break in the functionality)
a. I’m fine with not making it changeable as long as it’s visible.
5. Font size is incorrect across the board, see Figma for sizing. (Done 90% pixel perfect)
6. Next button should be greyed out when inactive. Should only be active if they have
completed the lesson or if they have gone backwards to a lesson they have already
completed. (Done)
a. I do not see this change reflected, currently the next button is not displaying at
all for me.
7. Previous button should be greyed out in lesson 1, but orange in all other lessons. Previous
button should not have an arrow. (Done)
8. *added “lesson complete” popup to figma. (This popup div will add when backend will
be functionality completed)
9. Button indicator does not match designs, see attached video for example:
https://www.dropbox.com/s/g9utubmkvsqhith/Simulation%20Page.mp4?dl=0 (Done)
 a. I do not see this change reflected
10. “Need Help?” Popup is too thin, on Figma it is 475px. (pending)
11. We should not have popovers explaining what each button does during the scenarios, but
for the lessons bootstraps popover design is fine. The red gradient does not match the
design. (Done)
a. I do not see this change reflected
12. Keep the remote and phone visible for all lessons. (It is not possible because we have
very limited page area)
a. Unclear. Both the phone and remote are displayed during the “What is
VSTAlert” lesson.
13. When sized correctly on a 1920x1080 screen the UI should fill the page as shown on
Figma. (Done)
14. Plus sign is off center on Add Room button (Done)
a. Plus sign still appears off-center.