fix: Updated onboarding flow to match newer mocks. (#209)

Adding a layer above the connector in the 'app' that helps users select which connector they want to use if none are selected.

Making the onboarding for GitHub use a list instead of using a grid.

src/sass/_config.sass

@@ -3,8 +3,10 @@
 // Typography
 $le-font-size: 14px !default
 $le-font-size-small: 12px !default
+$le-font-size-medium: $le-font-size
 $le-font-size-large: 18px !default
 $le-font-size-xlarge: 24px !default
+$le-font-size-xxlarge: 48px !default
 $le-font-size-icon: 18px !default
 $le-font-size-icon-menu: 16px !default
 $le-font-size-icon-small: 14px !default

src/sass/_scheme.sass

@@ -9,6 +9,8 @@
   --font-family-default: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"
   --font-family-mono: "SFMono-Regular", Menlo, Consolas, "PT Mono", "Liberation Mono", Courier, monospace
   --font-weight-default: 400
+  --font-weight-heavy: 500
+  --font-weight-bold: 700
 
   +perfersAndClass('light')
     --color-background: #ffffff

src/sass/editor.sass

@@ -21,18 +21,47 @@
 
   a
     color: inherit
-    font-weight: 700
+    font-weight: var(--font-weight-bold)
     text-decoration: dotted
 
     &:hover
       text-decoration: underline
 
   p
     line-height: $le-line-height-paragraph
+    margin: $le-space-medium 0
 
   pre
     margin: 0
 
+  h1
+    font-size: $le-font-size-xxlarge
+    font-weight: var(--font-weight-default)
+
+  h2
+    font-size: $le-font-size-xlarge
+    font-weight: var(--font-weight-bold)
+
+  h3
+    font-size: $le-font-size-xlarge
+    font-weight: var(--font-weight-heavy)
+
+  h4
+    font-size: $le-font-size-large
+    font-weight: var(--font-weight-bold)
+
+  h5
+    font-size: $le-font-size-large
+    font-weight: var(--font-weight-heavy)
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5
+    margin: $le-space-medium 0
+    line-height: $le-line-height
+
   .material-icons
     font-size: $le-font-size-icon
     vertical-align: middle

src/sass/parts/_menu.sass

@@ -19,7 +19,7 @@
 
 .le__part__menu__project
   flex-grow: 1
-  font-weight: 700
+  font-weight: var(--font-weight-bold)
   overflow: hidden
   padding: $le-space-medium
   text-overflow: ellipsis

src/sass/parts/_onboarding.sass

@@ -2,22 +2,33 @@
   display: flex
   flex-flow: column
 
-.le__part__onboarding__header,
+.le__part__onboarding__header
+  display: flex
+  flex-flow: column
+  min-height: $le-space-xxxlarge - $le-space-large
+  justify-content: flex-end
+  flex-shrink: 0
+
+.le__part__onboarding__header__inner
+  align-items: center
+  column-gap: $le-space-medium
+  display: flex
+  flex-flow: column
+
 .le__part__onboarding__section
+  margin: $le-space-medium 0
   text-align: center
 
 .le__part__onboarding__icon
   text-align: center
-  margin: $le-space-large 0 $le-space-medium 0
 
+  img,
   svg
-    max-height: $le-space-xxlarge
-    max-width: $le-space-xxlarge
+    height: $le-space-xlarge
+    max-width: $le-space-xlarge
     width: 100%
 
 .le__part__onboarding__filter
-  margin: $le-space-medium 0
-
   input
     background-color: var(--color-background)
     border: $le-border-size-medium solid var(--color-border)
@@ -28,8 +39,6 @@
 
 .le__part__onboarding__help
   align-items: center
-  background-color: var(--color-tertiary)
-  color: var(--color-on-tertiary)
   display: flex
   flex-flow: row
   justify-content: center
@@ -45,18 +54,49 @@
 .le__part__onboarding__help__message
   padding: $le-space-medium
 
+.le__part__onboarding__description
+  margin-left: auto
+  margin-right: auto
+  max-width: $le-space-max-body-width
+  padding: $le-space-medium
+  width: 100%
+
 .le__part__onboarding__options
   contain: layout inline-size style
   margin-left: auto
   margin-right: auto
-  max-width: $le-space-max-content-width
+  max-width: $le-space-max-body-width
   padding: $le-space-medium
   width: 100%
 
-  img
-    max-height: $le-space-xlarge
-    max-width: $le-space-xlarge
-    margin-bottom: $le-space-small
+
+  .le__list__item
+    display: grid
+    column-gap: $le-space-medium
+    grid-template-areas: "avatar label data"
+    grid-template-columns: $le-space-large 1fr 1fr
+
+  img,
+  svg
+    max-height: $le-space-large
+    max-width: $le-space-large
+
+  .le__list__item__avatar
+    grid-area: avatar
+
+  .le__list__item__title
+    grid-area: label
+
+    &--no-avatar
+      grid-area:  avatar / avatar / avatar / label
+
+  .le__list__item__data
+    grid-area: data
+    text-align: right
+
+  .le__list__item--header
+    .le__list__item__title
+      grid-area:  avatar / avatar / avatar / label
 
 .le__part__onboarding__loading
   align-items: center
@@ -67,5 +107,6 @@
 
 @import './onboarding/toolbar'
 
+@import './onboarding/generic'
 @import './onboarding/github'
 @import './onboarding/local'

src/sass/parts/_overview.sass

@@ -11,7 +11,7 @@
 
 .le__part__overview__title
   flex-grow: 1
-  font-weight: 700
+  font-weight: var(--font-weight-bold)
   padding: $le-space-medium 0
 
 .le__part__overview__menu

src/sass/parts/content/_header.sass

@@ -15,7 +15,7 @@
   padding: $le-space-medium $le-space-medium calc(#{$le-space-medium} - #{$le-border-size-large})
   border-bottom: $le-border-size-large solid transparent
   font-size: $le-font-size-small
-  font-weight: 700
+  font-weight: var(--font-weight-bold)
   text-transform: uppercase
   transition: opacity $le-speed-xslow
 

src/sass/parts/content/_toolbar.sass

@@ -21,7 +21,7 @@
 
   strong
     font-family: var(--font-family-default)
-    font-weight: 700
+    font-weight: var(--font-weight-bold)
 
 .le__part__content__toolbar__icons
   margin-right: $le-space-small

src/sass/parts/onboarding/_generic.sass

@@ -0,0 +1,25 @@
+.le__part__onboarding__generic
+  .le__part__onboarding__options
+    .le__grid__item
+      column-gap: $le-space-medium
+      display: grid
+      grid-template-columns: $le-space-xlarge 1fr
+      grid-template-rows: $le-space-large 1fr
+      grid-template-areas: "icon title" "icon label"
+
+      svg
+        max-height: $le-space-xlarge
+        max-width: $le-space-xlarge
+
+.le__part__onboarding__generic__icon
+  grid-area: icon
+
+.le__part__onboarding__generic__label
+  font-weight: var(--font-weight-heavy)
+  line-height: $le-line-height-paragraph
+  grid-area: label
+
+.le__part__onboarding__generic__title
+  font-size: $le-font-size-large
+  font-weight: var(--font-weight-bold)
+  grid-area: title

src/sass/parts/onboarding/_github.sass

@@ -22,9 +22,19 @@
   width: 100%
 
 .le__part__onboarding__github__login
-  padding: $le-space-medium
   text-align: center
 
-.le__part__onboarding__github__time
-  margin-top: $le-space-small
-  font-size: $le-font-size-small
+  .le__button
+    display: inline-block
+    margin-top: $le-space-large
+
+  .le__button__inner
+    align-items: center
+    column-gap: $le-space-small
+    display: flex
+    flex-flow: row
+    width: auto
+
+    svg
+      max-height: $le-space-medium
+      width: $le-space-medium

src/sass/parts/onboarding/_local.sass

@@ -16,7 +16,7 @@
   margin-top: $le-space-medium
 
   a
-    font-weight: 700
+    font-weight: var(--font-weight-bold)
 
   pre
     margin: 0
@@ -41,7 +41,7 @@
     background: transparent
     border: none
     color: var(--color-on-background)
-    font-weight: 700
+    font-weight: var(--font-weight-bold)
     padding: 0
     width: auto
 

src/sass/parts/onboarding/_toolbar.sass

@@ -1,15 +1,40 @@
 .le__part__onboarding__toolbar
   align-items: center
-  background: var(--color-primary-light)
-  color: var(--color-on-primary-light)
+  background: var(--color-primary)
+  color: var(--color-on-primary)
   display: flex
   flex-flow: row
   justify-content: space-between
 
   a
-    color: var(--color-on-primary-light)
+    color: var(--color-on-primary)
 
 .le__part__onboarding__toolbar__title
   flex-grow: 1
-  font-weight: 700
+  font-weight: var(--font-weight-bold)
+  padding: $le-space-medium
+
+.le__part__onboarding__breadcrumb
+  align-items: center
+  display: flex
+  flex-flow: row
+  justify-content: flex-start
+
+  >
+    div
+      &::after
+        border-right: $le-border-size-medium solid var(--color-background)
+        border-top: $le-border-size-medium solid var(--color-background)
+        content: ' '
+        display: inline-block
+        height: $le-space-large
+        margin-left: -$le-space-small
+        margin-top: -$le-space-small - 1px
+        opacity: $le-opacity-disabled
+        pointer-events: none
+        position: absolute
+        transform: scale(.5, 1) rotate(45deg)
+        width: $le-space-large
+
+.le__part__onboarding__breadcrumb__item
   padding: $le-space-medium

src/sass/parts/preview/_toolbar.sass

@@ -43,6 +43,6 @@
 
 .le__part__preview__toolbar__label
   font-size: $le-font-size-small
-  font-weight: 700
+  font-weight: var(--font-weight-bold)
   text-transform: uppercase
   margin: $le-space-medium

src/sass/selective/_field.sass

@@ -23,7 +23,7 @@
   align-items: center
   display: flex
   flex-flow: row
-  font-weight: 700
+  font-weight: var(--font-weight-bold)
   margin-bottom: $le-space-small
 
   &--error
@@ -144,7 +144,7 @@
     color: var(--color-on-primary-light)
     content: 'Drop file…'
     font-size: $le-font-size-large
-    font-weight: 700
+    font-weight: var(--font-weight-bold)
     left: 50%
     position: absolute
     top: 50%

src/sass/selective/field/_grow_string.sass

@@ -7,4 +7,4 @@
   white-space: nowrap
 
   span
-    font-weight: 700
+    font-weight: var(--font-weight-bold)

src/sass/selective/field/_list.sass

@@ -87,7 +87,7 @@
       color: var(--color-on-tertiary)
       display: flex
       flex-flow: row
-      font-weight: 700
+      font-weight: var(--font-weight-bold)
       padding: $le-space-small
       position: sticky
       top: 0

src/sass/selective/field/_media.sass

@@ -40,7 +40,7 @@
       margin-right: 0
 
   .selective__media__meta__label
-    font-weight: 700
+    font-weight: var(--font-weight-bold)
 
   .selective__media__upload
     // Do not need to display the field to be able to 'click'.
@@ -55,7 +55,7 @@
       > .selective__field__header
         .selective__field__label
           +field-section-heading
-          font-weight: 400
+          font-weight: var(--font-weight-default)
           margin: 0
 
         .selective__field__actions