diff --git a/docs/README.md b/docs/README.md index fee70463178..30b83dc6e40 100644 --- a/docs/README.md +++ b/docs/README.md @@ -68,23 +68,23 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt -
+
SmartScan
-
+ -
+
Another Article
-
+ @@ -119,14 +119,14 @@ A card button is the box that contains the article title and the caret right ico In order to add a new Card button in the respective hub page ([send-money/index.html](https://github.com/Expensify/App/blob/main/docs/hubs/send-money.html) or [request-money/index.html](https://github.com/Expensify/App/blob/main/docs/hubs/request-money.html)) just copy and pase the following Card element: ```html -
+
SmartScan
-
+ ``` Then replace the article title accordingly (in this case replace the value `SmartScan` with the new article title) and add a link to the relative path of the article (in this case replace `./request-money/SmartScan` accordingly to the path of the new article file without the file extension). diff --git a/docs/_includes/home-lhn.html b/docs/_includes/home-lhn.html index 4d165f97091..6ff3a4462dc 100644 --- a/docs/_includes/home-lhn.html +++ b/docs/_includes/home-lhn.html @@ -1,17 +1,17 @@ diff --git a/docs/_includes/request-money-lhn.html b/docs/_includes/request-money-lhn.html index b5f459b80bc..bed3e3c3f89 100644 --- a/docs/_includes/request-money-lhn.html +++ b/docs/_includes/request-money-lhn.html @@ -1,12 +1,12 @@ diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index a7d905fcf2b..b263a75502b 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -24,7 +24,7 @@
-
+
@@ -41,7 +41,7 @@ {% when "send-money" %} {% include send-money-lhn.html %} {% else %} -
+ diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index d21afc51559..bf4e46b61e7 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -5,3 +5,4 @@ $color-gray1: #FAFAFA; $color-gray2: #ECECEC; $color-gray3: #C6C9CA; $color-white: #FFFFFF; +$color-green: #07d973; diff --git a/docs/_sass/_fonts.scss b/docs/_sass/_fonts.scss index a43d35ed9d2..ad6eaf46660 100644 --- a/docs/_sass/_fonts.scss +++ b/docs/_sass/_fonts.scss @@ -93,7 +93,3 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -strong { - font-weight: 600; -} diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 6b3e7d8ae69..83299926ef0 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -67,11 +67,11 @@ hr { display: inline-block; width: 24px; height: 2px; - margin: 0 0 15px; + margin: 0 0 16px; } strong { - font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-weight: bold; } em { @@ -84,7 +84,6 @@ a { &:hover { color: $color-blueHover; - text-decoration: underline; } } @@ -95,9 +94,15 @@ h4, h5, h6 { color: $color-dark; - font-family: "GTAmericaExp-Regular"; font-weight: bold; padding-bottom: 12px; +} + +h2, +h3, +h4, +h5, +h6 { margin-top: 20px; } @@ -197,7 +202,7 @@ textarea { padding: 24px; } - .header-button { + #header-button { position: absolute; display: none; @@ -223,15 +228,12 @@ textarea { display: grid; grid-template-columns: 40px auto; cursor: pointer; + } - &.selected { - cursor: auto; - - span { - font-weight: bold; - color: $color-dark; - } - } + .selected { + cursor: auto; + font-weight: bold; + color: $color-dark; } .hide { @@ -247,6 +249,13 @@ textarea { padding: 52px 68px; box-sizing: border-box; + @media screen and (min-width: 1600px) { + /* Center content area for bigger screens */ + margin-left: calc(420px + (100vw - 1000px - 420px)/2); + padding: 52px 0; + max-width: 1000px; + } + @media screen and (max-width: 1024px) { margin-left: 320px; } @@ -279,7 +288,6 @@ textarea { &:hover { color: $color-blueHover; - text-decoration: underline; } } @@ -331,22 +339,51 @@ textarea { .card { display: flex; flex-wrap: nowrap; - border-radius: 15px; + border-radius: 16px; border: 1px solid $color-gray2; padding: 28px; font-weight: bold; cursor: pointer; + $border-amount-darken: 15%; + color: $color-dark; + + &:hover { + border-color: darken($color-gray2, $border-amount-darken); + color: $color-dark; + } + + &.send-money { + border-color: $color-blue; + border-width: 1.5px; + + &:hover { + border-color: darken($color-blue, $border-amount-darken); + } + } + + &.request-money { + border-color: $color-green; + border-width: 1.5px; + + &:hover { + border-color: darken($color-green, $border-amount-darken); + } + } .left-icon { display: flex; align-items: center; - padding-right: 15px; + padding-right: 28px; + + img { + width: 32px; + } } .right-icon { display: flex; align-items: center; - padding-left: 15px; + padding-left: 16px; } .body { @@ -357,7 +394,8 @@ textarea { } .description { - margin-top: 15px; + margin-top: 16px; + font-weight: normal; } } @@ -371,6 +409,26 @@ textarea { } } +.homepage { + h1 { + padding-bottom: 20px; + + @media screen and (max-width: 800px) { + margin-top: 0; + padding-top: 8px; + } + } + h2 { + padding-bottom: 24px; + } + p { + margin-bottom: 20px; + } + .cards-group { + padding-bottom: 32px; + } +} + .coming-soon { overflow: hidden; diff --git a/docs/assets/images/concierge-avatar.svg b/docs/assets/images/concierge-avatar.svg new file mode 100644 index 00000000000..2372f3ea918 --- /dev/null +++ b/docs/assets/images/concierge-avatar.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/docs/assets/images/shield.svg b/docs/assets/images/shield.svg new file mode 100644 index 00000000000..9066e116c94 --- /dev/null +++ b/docs/assets/images/shield.svg @@ -0,0 +1,4 @@ + + + + diff --git a/docs/assets/images/users.svg b/docs/assets/images/users.svg new file mode 100644 index 00000000000..c7f34b28443 --- /dev/null +++ b/docs/assets/images/users.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js index 2de6d84efb8..efa68a6b1e7 100644 --- a/docs/assets/js/main.js +++ b/docs/assets/js/main.js @@ -1,14 +1,5 @@ /* eslint-disable no-unused-vars */ -function navigateTo(path) { - window.location.href = path; -} - -function navigateToHome() { - // TODO: Change to '/index' when the site is live - navigateTo('/main'); -} - function toggleHeaderMenu() { const lhn = document.getElementById('lhn'); const lhnContent = document.getElementById('lhn-content'); @@ -40,38 +31,48 @@ function navigateBack() { setTimeout(toggleHeaderMenu, 250); } -if (window.tocbot) { - window.tocbot.init({ +window.addEventListener('DOMContentLoaded', () => { + if (window.tocbot) { + window.tocbot.init({ // Where to render the table of contents. - tocSelector: '.article-toc', + tocSelector: '.article-toc', - // Where to grab the headings to build the table of contents. - contentSelector: '.article-toc-content', + // Where to grab the headings to build the table of contents. + contentSelector: '.article-toc-content', - // Disable the collapsible functionality of the library by - // setting the maximum number of heading levels (6) - collapseDepth: 6, + // Disable the collapsible functionality of the library by + // setting the maximum number of heading levels (6) + collapseDepth: 6, - // Main class to add to lists. - listClass: 'lhn-items', + // Main class to add to lists. + listClass: 'lhn-items', - // Main class to add to links. - linkClass: 'link', + // Main class to add to links. + linkClass: 'link', - // Class to add to active links, - // the link corresponding to the top most heading on the page. - activeLinkClass: 'selected-article', + // Class to add to active links, + // the link corresponding to the top most heading on the page. + activeLinkClass: 'selected-article', - // Headings offset between the headings and the top of the document (requires scrollSmooth enabled) - headingsOffset: 80, - scrollSmoothOffset: -80, - scrollSmooth: true, + // Headings offset between the headings and the top of the document (requires scrollSmooth enabled) + headingsOffset: 80, + scrollSmoothOffset: -80, + scrollSmooth: true, - // onclick function to apply to all links in toc. will be called with - // the event as the first parameter, and this can be used to stop, - // propagation, prevent default or perform action - onClick() { - toggleHeaderMenu(); - }, - }); -} + // onclick function to apply to all links in toc. will be called with + // the event as the first parameter, and this can be used to stop, + // propagation, prevent default or perform action + onClick() { + toggleHeaderMenu(); + }, + }); + } + + document.getElementById('header-button').addEventListener('click', toggleHeaderMenu); + + // Back button doesn't exist on all the pages + const backButton = document.getElementById('back-button'); + if (backButton) { + backButton.addEventListener('click', navigateBack); + } +}); diff --git a/docs/hubs/request-money.html b/docs/hubs/request-money.html index e08699537aa..b242268e8d1 100644 --- a/docs/hubs/request-money.html +++ b/docs/hubs/request-money.html @@ -24,14 +24,14 @@

-
+
SmartScan
-
+ diff --git a/docs/main.html b/docs/main.html index 92f93b1613a..cc552844bfa 100644 --- a/docs/main.html +++ b/docs/main.html @@ -2,4 +2,78 @@ lhn_content: 'homepage' --- - +
+ +

+ Welcome to Expensify Help! +

+ +

+ Find all the answers to all your Expensify questions, as well as support for user and admin questions from the + Expensify Community. +

+ +

+ Which best describes how you use Expensify? +

+ +
+ + +
+ +
+
+
Send money
+
Brief description of who would fall under this category.
+
+ + + +
+ +
+
+
Request money
+
Brief description of who would fall under this category.
+
+ + +
+ +

+ Our most popular guides and tutorials +

+ +
+ + +
+
Getting started
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui.
+
+ + + +
+
Getting started
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui.
+
+ + + +
+
Getting started
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui.
+
+ + + +
+
Getting started
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui.
+
+ + +
+
\ No newline at end of file