From b12d1031d436ddef70353183d9b1c360443e3904 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 17:27:28 -0700 Subject: [PATCH 01/22] Create sass mixin for card-border --- docs/_sass/_main.scss | 30 +++++++++++++----------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index f3f9eea2c19e..e79942819df5 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -349,34 +349,30 @@ textarea { display: flex; flex-wrap: nowrap; 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; + @mixin card-border($border-color, $border-width: 1.5px) { + border-color: $border-color; border-width: 1.5px; + border-style: solid; - &:hover { - border-color: darken($color-blue, $border-amount-darken); + &.hover { + border-color: darken($border-color, $border-amount-darken); } } - &.request-money { - border-color: $color-green; - border-width: 1.5px; + @include card-border($color-gray2, 1px); - &:hover { - border-color: darken($color-green, $border-amount-darken); - } + &.send-money { + @include card-border($color-blue); + } + + &.request-money { + @include card-border($color-green); } .left-icon { @@ -481,4 +477,4 @@ textarea { margin-left: auto; margin-right: auto; } -} \ No newline at end of file +} From 563d997e7abbb8154add081f054db4043bb1130b Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 17:33:37 -0700 Subject: [PATCH 02/22] Create liquid constants file --- docs/_includes/CONST.html | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 docs/_includes/CONST.html diff --git a/docs/_includes/CONST.html b/docs/_includes/CONST.html new file mode 100644 index 000000000000..2778f4d2982d --- /dev/null +++ b/docs/_includes/CONST.html @@ -0,0 +1,5 @@ +{% if jekyll.environment == "production" %} + {% assign MAIN_SITE_URL = "https://new.expensify.com/" %} +{% else %} + {% assign MAIN_SITE_URL = "https://new.expensify.com.dev/" %} +{% endif %} From fd210660ce3eaa240855046c670349dbde1b6983 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 17:52:40 -0700 Subject: [PATCH 03/22] Add help card to default layout --- docs/_includes/CONST.html | 4 ++-- docs/_layouts/default.html | 12 +++++++++++- docs/_sass/_colors.scss | 1 + docs/_sass/_main.scss | 17 +++++++++++++++++ 4 files changed, 31 insertions(+), 3 deletions(-) diff --git a/docs/_includes/CONST.html b/docs/_includes/CONST.html index 2778f4d2982d..9eb4003a3685 100644 --- a/docs/_includes/CONST.html +++ b/docs/_includes/CONST.html @@ -1,5 +1,5 @@ {% if jekyll.environment == "production" %} - {% assign MAIN_SITE_URL = "https://new.expensify.com/" %} + {% assign MAIN_SITE_URL = "https://new.expensify.com" %} {% else %} - {% assign MAIN_SITE_URL = "https://new.expensify.com.dev/" %} + {% assign MAIN_SITE_URL = "https://new.expensify.com.dev" %} {% endif %} diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index a82e4e034b75..852dd309bede 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -1,6 +1,8 @@ +{% include CONST.html %} + Expensify Help @@ -74,7 +76,15 @@

- + +
+
Didn't find what you were looking for?
+
Concierge is here to answer all your questions.
+
+
+ +
+
{% endif %} diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index bf4e46b61e7b..1fac634f6f45 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -6,3 +6,4 @@ $color-gray2: #ECECEC; $color-gray3: #C6C9CA; $color-white: #FFFFFF; $color-green: #07d973; +$color-pink: #F68DFE; diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index e79942819df5..47972630d4b8 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -130,6 +130,19 @@ textarea { color: $color-dark; } +button { + border-radius: 12px; + padding: 12px; + font-family: "GTAmericaExp-Bold", "Helvetica Neue", "Helvetica", Arial, sans-serif; + font-size: 15px; + font-weight: bold; + + &.success { + background-color: $color-green; + color: $color-white; + } +} + #logo { width: 240px; padding: 80px; @@ -375,6 +388,10 @@ textarea { @include card-border($color-green); } + &.get-help { + @include card-border($color-pink); + } + .left-icon { display: flex; align-items: center; From f58744c3ba2f237eb1fe9ebca3f7e7ce11c46344 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 18:26:23 -0700 Subject: [PATCH 04/22] Implement floating concierge button in LHN --- docs/_layouts/default.html | 26 ++++++++++++-------------- docs/_sass/_main.scss | 26 +++++++++++++++++++++++++- 2 files changed, 37 insertions(+), 15 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 852dd309bede..4e892af5625a 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -56,9 +56,9 @@ -
- -
+ + Chat with concierge +
@@ -75,17 +75,15 @@

-
- -
-
Didn't find what you were looking for?
-
Concierge is here to answer all your questions.
-
-
- -
- -
+ +
+
Didn't find what you were looking for?
+
Concierge is here to answer all your questions.
+
+
+ +
+ {% endif %} diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 47972630d4b8..ac2b16218af5 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -85,6 +85,10 @@ a { &:hover { color: $color-blueHover; } + + img { + display: block; + } } h1, @@ -140,6 +144,11 @@ button { &.success { background-color: $color-green; color: $color-white; + + &:hover { + background-color: desaturate($color-green, 15%); + cursor: pointer; + } } } @@ -183,7 +192,7 @@ button { #lhn-content { height: calc(100% - 150px); - padding-right: 24px; + padding-right: 44px; padding-bottom: 44px; padding-left: 44px; overflow: auto; @@ -495,3 +504,18 @@ button { margin-right: auto; } } + +#floating-concierge-button { + position: absolute; + bottom: 2rem; + right: 2rem; + + img { + width: 4rem; + height: 4rem; + + &:hover { + filter: saturate(2); + } + } +} From 2f72ad018ba55d29b106e42959f16955eef8fd70 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 23:10:51 -0700 Subject: [PATCH 05/22] Implement concierge utility route --- src/ROUTES.js | 4 ++ .../Navigation/AppNavigator/AuthScreens.js | 6 +++ .../Navigation/AppNavigator/PublicScreens.js | 6 +++ src/libs/Navigation/linkingConfig.js | 1 + src/pages/ConciergePage.js | 44 +++++++++++++++++++ 5 files changed, 61 insertions(+) create mode 100644 src/pages/ConciergePage.js diff --git a/src/ROUTES.js b/src/ROUTES.js index 0900bf9a2f9e..9b03715f1353 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -42,6 +42,10 @@ export default { REPORT, REPORT_WITH_ID: 'r/:reportID', getReportRoute: reportID => `r/${reportID}`, + + /** This is a utility route used to go to the users concierge chat, or the sign-in page if the user's not authenticated */ + CONCIERGE: 'concierge', + IOU_REQUEST, IOU_BILL, IOU_SEND, diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 79868dbe51e3..202ea37c7f58 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -37,6 +37,7 @@ import defaultScreenOptions from './defaultScreenOptions'; import * as App from '../../actions/App'; import * as Session from '../../actions/Session'; import LogOutPreviousUserPage from '../../../pages/LogOutPreviousUserPage'; +import ConciergePage from '../../../pages/ConciergePage'; let currentUserEmail; Onyx.connect({ @@ -219,6 +220,11 @@ class AuthScreens extends React.Component { options={defaultScreenOptions} component={LogOutPreviousUserPage} /> + {/* These are the various modal routes */} {/* Note: Each modal must have it's own stack navigator since we want to be able to navigate to any diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.js b/src/libs/Navigation/AppNavigator/PublicScreens.js index e072e72b4c57..4bfa5265fb01 100644 --- a/src/libs/Navigation/AppNavigator/PublicScreens.js +++ b/src/libs/Navigation/AppNavigator/PublicScreens.js @@ -4,6 +4,7 @@ import SignInPage from '../../../pages/signin/SignInPage'; import SetPasswordPage from '../../../pages/SetPasswordPage'; import ValidateLoginPage from '../../../pages/ValidateLoginPage'; import LogInWithShortLivedTokenPage from '../../../pages/LogInWithShortLivedTokenPage'; +import ConciergePage from '../../../pages/ConciergePage'; import SCREENS from '../../../SCREENS'; import defaultScreenOptions from './defaultScreenOptions'; @@ -31,6 +32,11 @@ const PublicScreens = () => ( options={defaultScreenOptions} component={SetPasswordPage} /> + ); diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 63d286580c84..23cfa9ea349c 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -28,6 +28,7 @@ export default { SetPassword: ROUTES.SET_PASSWORD_WITH_VALIDATE_CODE, ValidateLogin: ROUTES.VALIDATE_LOGIN, [SCREENS.TRANSITION_FROM_OLD_DOT]: ROUTES.TRANSITION_FROM_OLD_DOT, + Concierge: ROUTES.CONCIERGE, // Modal Screens Settings: { diff --git a/src/pages/ConciergePage.js b/src/pages/ConciergePage.js new file mode 100644 index 000000000000..efde8c1db55c --- /dev/null +++ b/src/pages/ConciergePage.js @@ -0,0 +1,44 @@ +import _ from 'underscore'; +import React from 'react'; +import PropTypes from 'prop-types'; +import {withOnyx} from 'react-native-onyx'; +import CONST from '../CONST'; +import ONYXKEYS from '../ONYXKEYS'; +import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator'; +import Navigation from '../libs/Navigation/Navigation'; +import * as Report from '../libs/actions/Report'; + +const propTypes = { + /** Session info for the currently logged in user. */ + session: PropTypes.shape({ + /** Currently logged in user authToken */ + authToken: PropTypes.string, + + /** Currently logged in user email */ + email: PropTypes.string, + }).isRequired, +}; + +/* + * This is a "utility page", that does this: + * - If the user is authenticated, find their concierge chat and re-route to it + * - Else re-route to the login page + */ +const ConciergePage = (props) => { + if (_.has(props.session, 'authToken')) { + Report.fetchOrCreateChatReport([props.session.email, CONST.EMAIL.CONCIERGE]); + } else { + Navigation.navigate(); + } + + return ; +}; + +ConciergePage.propTypes = propTypes; +ConciergePage.displayName = 'ConciergePage'; + +export default withOnyx({ + session: { + key: ONYXKEYS.SESSION, + }, +})(ConciergePage); From 395c5060426d21417b335c09f00ab5dc5ddfa17e Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 23:15:39 -0700 Subject: [PATCH 06/22] Use localhost:8080 not new.expensify.com.dev --- docs/_includes/CONST.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_includes/CONST.html b/docs/_includes/CONST.html index 9eb4003a3685..f03e2b50f0c8 100644 --- a/docs/_includes/CONST.html +++ b/docs/_includes/CONST.html @@ -1,5 +1,5 @@ {% if jekyll.environment == "production" %} {% assign MAIN_SITE_URL = "https://new.expensify.com" %} {% else %} - {% assign MAIN_SITE_URL = "https://new.expensify.com.dev" %} + {% assign MAIN_SITE_URL = "http://localhost:8080" %} {% endif %} From 93762a8b7a68c73d4346682100a9ba8592506390 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 23:16:01 -0700 Subject: [PATCH 07/22] Open concierge chat in new tab --- docs/_layouts/default.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 4e892af5625a..a9d9907a545e 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -56,7 +56,7 @@ - + Chat with concierge @@ -75,7 +75,7 @@

- +
Didn't find what you were looking for?
Concierge is here to answer all your questions.
From 9bc81f152080eee5d2eb89aabf29557c104da097 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 23:49:25 -0700 Subject: [PATCH 08/22] Make floating concierge button work on mobile --- docs/_includes/floating-concierge-button.html | 3 +++ docs/_layouts/default.html | 6 ++--- docs/_sass/_main.scss | 23 +++++++++++++++++-- docs/main.html | 5 +++- 4 files changed, 30 insertions(+), 7 deletions(-) create mode 100644 docs/_includes/floating-concierge-button.html diff --git a/docs/_includes/floating-concierge-button.html b/docs/_includes/floating-concierge-button.html new file mode 100644 index 000000000000..60728a3c775b --- /dev/null +++ b/docs/_includes/floating-concierge-button.html @@ -0,0 +1,3 @@ + + Chat with concierge + diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index a9d9907a545e..f601179140a8 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -55,10 +55,8 @@
- - - Chat with concierge - + + {% include floating-concierge-button.html id="floating-concierge-button-lhn" %}
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index ac2b16218af5..4ebe402523c5 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -505,8 +505,27 @@ button { } } -#floating-concierge-button { - position: absolute; +@media screen and (max-width: 800px) { + #floating-concierge-button-lhn { + display: none; + } + + .floating-concierge-button { + position: fixed; + } +} + +@media screen and (min-width: 800px) { + #floating-concierge-button-global { + display: none; + } + + .floating-concierge-button { + position: absolute; + } +} + +.floating-concierge-button { bottom: 2rem; right: 2rem; diff --git a/docs/main.html b/docs/main.html index cc552844bfa1..b73ee4f7dfb2 100644 --- a/docs/main.html +++ b/docs/main.html @@ -75,5 +75,8 @@

+ + {% include floating-concierge-button.html id="floating-concierge-button-global" %} + - \ No newline at end of file + From 66773e3db82321b8d450d8c35d2cd566e0e8c7eb Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 23:52:05 -0700 Subject: [PATCH 09/22] Fix borderWidth in mixin --- docs/_sass/_main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 4ebe402523c5..d785e5fa9118 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -379,7 +379,7 @@ button { @mixin card-border($border-color, $border-width: 1.5px) { border-color: $border-color; - border-width: 1.5px; + border-width: $border-width; border-style: solid; &.hover { From 67cb42cadf9614d6b0c1e461b3754366ce613578 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Tue, 16 Aug 2022 23:56:07 -0700 Subject: [PATCH 10/22] Fix off-by-one error in media query --- docs/_sass/_main.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index d785e5fa9118..28bf994b316e 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -515,7 +515,7 @@ button { } } -@media screen and (min-width: 800px) { +@media screen and (min-width: 801px) { #floating-concierge-button-global { display: none; } From 7400f4355ea61069df24c8c6ca6bc2363c1cce2e Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 09:07:40 -0700 Subject: [PATCH 11/22] Make cards more responsive --- docs/_layouts/default.html | 2 +- docs/_sass/_main.scss | 26 +++++++++++++++++++++++--- docs/main.html | 28 ++++++++++++++++------------ 3 files changed, 40 insertions(+), 16 deletions(-) diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index f601179140a8..5aa338dab5ff 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -78,7 +78,7 @@

Didn't find what you were looking for?
Concierge is here to answer all your questions.
-
+
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 28bf994b316e..9c61d6eae8df 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -149,6 +149,10 @@ button { background-color: desaturate($color-green, 15%); cursor: pointer; } + + @media screen and (max-width: 800px) { + width: 100%; + } } } @@ -362,14 +366,14 @@ button { column-gap: 4%; padding-bottom: 20px; - @media screen and (min-width: 800px) { + @media screen and (min-width: 1120px) { grid-template-columns: 48% 48%; } } .card { display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; border-radius: 16px; padding: 28px; font-weight: bold; @@ -401,6 +405,11 @@ button { @include card-border($color-pink); } + .row { + display: flex; + flex-basis:100%; + } + .left-icon { display: flex; align-items: center; @@ -417,6 +426,17 @@ button { padding-left: 16px; } + .submit-button { + display: flex; + align-items: center; + padding-left: 16px; + + @media screen and (max-width: 1120px) { + margin-top: 16px; + padding-left: 0; + } + } + .body { display: flex; flex-wrap: nowrap; @@ -496,7 +516,7 @@ button { font-size: 20px; } - #icon { + .icon { width: 76px; padding: 28px; display: block; diff --git a/docs/main.html b/docs/main.html index b73ee4f7dfb2..c44e09240f8c 100644 --- a/docs/main.html +++ b/docs/main.html @@ -20,22 +20,26 @@

-
- -
-
-
Send money
-
Brief description of who would fall under this category.
+
+
+ shield +
+
+
Send money
+
Brief description of who would fall under this category.
+
-
- -
-
-
Request money
-
Brief description of who would fall under this category.
+
+
+ users +
+
+
Request money
+
Brief description of who would fall under this category.
+
From 0c6c00dffb67bb2d058dd354668301a322439968 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 09:20:52 -0700 Subject: [PATCH 12/22] Create constant for concierge URL --- docs/_includes/CONST.html | 2 ++ docs/_includes/floating-concierge-button.html | 2 +- docs/_layouts/default.html | 2 +- 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/_includes/CONST.html b/docs/_includes/CONST.html index f03e2b50f0c8..5ec5d296a336 100644 --- a/docs/_includes/CONST.html +++ b/docs/_includes/CONST.html @@ -3,3 +3,5 @@ {% else %} {% assign MAIN_SITE_URL = "http://localhost:8080" %} {% endif %} + +{% capture CONCIERGE_CHAT_URL %}{{MAIN_SITE_URL}}/concierge{% endcapture %} diff --git a/docs/_includes/floating-concierge-button.html b/docs/_includes/floating-concierge-button.html index 60728a3c775b..05fc44c9fca6 100644 --- a/docs/_includes/floating-concierge-button.html +++ b/docs/_includes/floating-concierge-button.html @@ -1,3 +1,3 @@ - + Chat with concierge diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 5aa338dab5ff..103ff018a55a 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -73,7 +73,7 @@

- +
Didn't find what you were looking for?
Concierge is here to answer all your questions.
From 831bed658866073d3473b9e623558c092db2f7fa Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 09:50:43 -0700 Subject: [PATCH 13/22] Use h3 and p instead of just divs --- docs/README.md | 6 +++--- docs/_layouts/default.html | 4 ++-- docs/_sass/_main.scss | 10 ++++++++-- docs/hubs/request-money.html | 2 +- docs/main.html | 24 ++++++++++++------------ 5 files changed, 26 insertions(+), 20 deletions(-) diff --git a/docs/README.md b/docs/README.md index 30b83dc6e406..d5474de2ba6f 100644 --- a/docs/README.md +++ b/docs/README.md @@ -70,7 +70,7 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt
-
SmartScan
+

SmartScan

@@ -79,7 +79,7 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt
-
Another Article
+

Another Article

@@ -121,7 +121,7 @@ In order to add a new Card button in the respective hub page ([send-money/index. ```html
-
SmartScan
+

SmartScan

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 103ff018a55a..471ffc30f4de 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -75,8 +75,8 @@

-
Didn't find what you were looking for?
-
Concierge is here to answer all your questions.
+

Didn't find what you were looking for?

+

Concierge is here to answer all your questions.

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 9c61d6eae8df..0a5aa6215023 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -444,8 +444,14 @@ button { flex-grow: 2; } - .description { - margin-top: 16px; + h3 { + padding: 0; + margin: 0; + } + + p.description { + padding: 0; + margin: 16px 0 0 0; font-weight: normal; } } diff --git a/docs/hubs/request-money.html b/docs/hubs/request-money.html index b242268e8d13..e583d5e983f9 100644 --- a/docs/hubs/request-money.html +++ b/docs/hubs/request-money.html @@ -26,7 +26,7 @@

-
SmartScan
+

SmartScan

diff --git a/docs/main.html b/docs/main.html index c44e09240f8c..0c5ae5d357fa 100644 --- a/docs/main.html +++ b/docs/main.html @@ -25,8 +25,8 @@

shield

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

Send money

+

Brief description of who would fall under this category.

@@ -37,8 +37,8 @@

users

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

Request money

+

Brief description of who would fall under this category.

@@ -53,29 +53,29 @@

-
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.
-
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.

 From 96f61a836579314b3a420f41a83c55e6ddeb090e Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 10:52:19 -0700 Subject: [PATCH 14/22] Alphabetical order colors --- docs/_sass/_colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss index 1fac634f6f45..1b046f3c6e64 100644 --- a/docs/_sass/_colors.scss +++ b/docs/_sass/_colors.scss @@ -4,6 +4,6 @@ $color-dark: #0B1B34; $color-gray1: #FAFAFA; $color-gray2: #ECECEC; $color-gray3: #C6C9CA; -$color-white: #FFFFFF; $color-green: #07d973; $color-pink: #F68DFE; +$color-white: #FFFFFF; From 312fc35736364ea1ba6465f7a556897c5d2be516 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 10:57:35 -0700 Subject: [PATCH 15/22] Move mixins to separate partial --- docs/_sass/_main.scss | 12 +----------- docs/_sass/_mixins.scss | 9 +++++++++ 2 files changed, 10 insertions(+), 11 deletions(-) create mode 100644 docs/_sass/_mixins.scss diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 0a5aa6215023..f7d2fb44bfe1 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -1,5 +1,6 @@ @import 'colors'; @import 'fonts'; +@import 'mixins'; * { margin: 0; @@ -378,19 +379,8 @@ button { padding: 28px; font-weight: bold; cursor: pointer; - $border-amount-darken: 15%; color: $color-dark; - @mixin card-border($border-color, $border-width: 1.5px) { - border-color: $border-color; - border-width: $border-width; - border-style: solid; - - &.hover { - border-color: darken($border-color, $border-amount-darken); - } - } - @include card-border($color-gray2, 1px); &.send-money { diff --git a/docs/_sass/_mixins.scss b/docs/_sass/_mixins.scss new file mode 100644 index 000000000000..018ed4a96e63 --- /dev/null +++ b/docs/_sass/_mixins.scss @@ -0,0 +1,9 @@ +@mixin card-border($border-color, $border-width: 1.5px) { + border-color: $border-color; + border-width: $border-width; + border-style: solid; + + &.hover { + border-color: darken($border-color, 15%); + } +} From b39915b6682ed1f5027c6864efe3ee13f0de9196 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 11:01:02 -0700 Subject: [PATCH 16/22] Get rid of unnecessary breakpoint --- docs/_sass/_main.scss | 12 +++++------- src/ROUTES.js | 2 +- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index f7d2fb44bfe1..1cc0e11bdbf1 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -521,14 +521,12 @@ button { } } -@media screen and (max-width: 800px) { - #floating-concierge-button-lhn { - display: none; - } +#floating-concierge-button-lhn { + display: none; +} - .floating-concierge-button { - position: fixed; - } +.floating-concierge-button { + position: fixed; } @media screen and (min-width: 801px) { diff --git a/src/ROUTES.js b/src/ROUTES.js index 9b03715f1353..0cd8b4164a8e 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -43,7 +43,7 @@ export default { REPORT_WITH_ID: 'r/:reportID', getReportRoute: reportID => `r/${reportID}`, - /** This is a utility route used to go to the users concierge chat, or the sign-in page if the user's not authenticated */ + /** This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated */ CONCIERGE: 'concierge', IOU_REQUEST, From c267c3ade95ec02238c20b8b1d19afa1df204ddc Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 12:45:47 -0700 Subject: [PATCH 17/22] Make mixins for breakpoints --- docs/_sass/_breakpoints.scss | 9 ++ docs/_sass/_main.scss | 165 +++++++++++++++++------------------ 2 files changed, 91 insertions(+), 83 deletions(-) create mode 100644 docs/_sass/_breakpoints.scss diff --git a/docs/_sass/_breakpoints.scss b/docs/_sass/_breakpoints.scss new file mode 100644 index 000000000000..26440ef197b8 --- /dev/null +++ b/docs/_sass/_breakpoints.scss @@ -0,0 +1,9 @@ +$breakpoint-tablet: 800px; +$breakpoint-desktop: 1120px; +$breakpoint-wide: 1600px; + +@mixin breakpoint($breakpoint) { + @media screen and (min-width: $breakpoint) { + @content + } +} diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 1cc0e11bdbf1..07be1778c8d4 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -1,3 +1,4 @@ +@import 'breakpoints'; @import 'colors'; @import 'fonts'; @import 'mixins'; @@ -145,14 +146,15 @@ button { &.success { background-color: $color-green; color: $color-white; + width: 100%; &:hover { background-color: desaturate($color-green, 15%); cursor: pointer; } - @media screen and (max-width: 800px) { - width: 100%; + @include breakpoint($breakpoint-tablet) { + width: auto; } } } @@ -167,26 +169,25 @@ button { } #lhn { - width: 420px; - height: 100%; position: fixed; background-color: $color-gray1; box-sizing: border-box; border-right-color: $color-gray2; border-right-width: 1px; border-style: solid; + width: 100%; + height: auto; + &.expanded { + height: 100%; + } - @media screen and (max-width: 1024px) { + @include breakpoint($breakpoint-tablet) { width: 320px; } - @media screen and (max-width: 800px) { - width: 100%; - height: auto; - - &.expanded { - height: 100%; - } + @include breakpoint($breakpoint-desktop) { + width: 420px; + height: 100%; } ul, @@ -196,10 +197,6 @@ button { #lhn-content { - height: calc(100% - 150px); - padding-right: 44px; - padding-bottom: 44px; - padding-left: 44px; overflow: auto; -ms-overflow-style: none; /* IE and Edge */ @@ -214,16 +211,21 @@ button { display: block; } - @media screen and (max-width: 800px) { - height: calc(100% - 100px); - padding-right: 24px; - padding-bottom: 24px; - padding-left: 24px; - display: none; + height: calc(100% - 100px); + padding-right: 24px; + padding-bottom: 24px; + padding-left: 24px; + display: none; - &.expanded { - display: block; - } + @include breakpoint($breakpoint-tablet) { + height: calc(100% - 150px); + padding-right: 44px; + padding-bottom: 44px; + padding-left: 44px; + } + + &.expanded { + display: block; } .article-toc { @@ -232,30 +234,32 @@ button { } .lhn-header { - padding: 44px; - - @media screen and (max-width: 800px) { - padding: 24px; + padding: 24px; + @include breakpoint($breakpoint-tablet) { + padding: 44px; } #header-button { position: absolute; - display: none; - - @media screen and (max-width: 800px) { - display: block; + display: block; + @include breakpoint($breakpoint-tablet) { + display: none; } } .logo { - width: 210px; - - @media screen and (max-width: 800px) { - width: 160px; - align-content: center; - display: block; - margin-left: auto; - margin-right: auto; + width: 160px; + align-content: center; + display: block; + margin-left: auto; + margin-right: auto; + + @include breakpoint($breakpoint-tablet) { + width: 210px; + align-content: normal; + display: flex; + margin-left: 0; + margin-right: 0; } } } @@ -279,31 +283,27 @@ button { } #content-area { + margin-left: 0; + padding: 80px 24px 24px 24px; - /* Same as the width of the lhn */ - margin-left: 420px; - padding: 52px 68px; - box-sizing: border-box; + @include breakpoint($breakpoint-tablet) { + margin-left: 320px; + } - @media screen and (min-width: 1600px) { + @include breakpoint($breakpoint-desktop) { + /* Same as the width of the lhn */ + margin-left: 420px; + padding: 52px 68px; + box-sizing: border-box; + } + + @include breakpoint($breakpoint-wide) { /* 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; - } - - @media screen and (max-width: 800px) { - margin-left: 0; - padding-top: 80px; - padding-left: 24px; - padding-right: 24px; - padding-bottom: 24px; - } - ul, ol { margin-left: 24px; @@ -367,7 +367,7 @@ button { column-gap: 4%; padding-bottom: 20px; - @media screen and (min-width: 1120px) { + @include breakpoint($breakpoint-desktop) { grid-template-columns: 48% 48%; } } @@ -419,11 +419,12 @@ button { .submit-button { display: flex; align-items: center; - padding-left: 16px; + margin-top: 16px; + padding-left: 0; - @media screen and (max-width: 1120px) { - margin-top: 16px; - padding-left: 0; + @include breakpoint($breakpoint-desktop) { + margin-top: 0; + padding-left: 16px; } } @@ -458,11 +459,11 @@ button { .homepage { h1 { + margin-top: 0; padding-bottom: 20px; - - @media screen and (max-width: 800px) { - margin-top: 0; - padding-top: 8px; + padding-top: 8px; + @include breakpoint($breakpoint-tablet) { + padding-top: 0px; } } h2 { @@ -477,30 +478,28 @@ button { } .centered-content { - width: 500px; height: 240px; text-align: center; font-size: larger; position: absolute; - top: calc((100vh - 240px)/2); - right: calc((100vw - 500px)/2); + top: calc((100vh - 240px) / 2); - &.with-lhn { - right: calc((100vw - 420px - 500px)/2); + width: 380px; + right: calc((100vw - 380px) / 2); + @include breakpoint($breakpoint-tablet) { + width: 500px; + right: calc((100vw - 500px) / 2); } - @media screen and (max-width: 1024px) { - &.with-lhn { - right: calc((100vw - 320px - 500px)/2); - } - } + &.with-lhn { + right: calc((100vw - 380px) / 2); - @media screen and (max-width: 800px) { - width: 380px; - right: calc((100vw - 380px)/2); + @include breakpoint($breakpoint-tablet) { + right: calc((100vw - 320px - 500px ) / 2); + } - &.with-lhn { - right: calc((100vw - 380px)/2); + @include breakpoint($breakpoint-desktop) { + right: calc((100vw - 420px - 500px) / 2); } } @@ -529,7 +528,7 @@ button { position: fixed; } -@media screen and (min-width: 801px) { +@include breakpoint($breakpoint-tablet) { #floating-concierge-button-global { display: none; } From ef9970655326146306d5578b852ff6825e9f1537 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 12:53:56 -0700 Subject: [PATCH 18/22] Fix concierge icon in LHN --- docs/_sass/_main.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 07be1778c8d4..f0de92b2df23 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -522,26 +522,26 @@ button { #floating-concierge-button-lhn { display: none; -} - -.floating-concierge-button { - position: fixed; + @include breakpoint($breakpoint-tablet) { + display: block; + } } @include breakpoint($breakpoint-tablet) { #floating-concierge-button-global { display: none; } - - .floating-concierge-button { - position: absolute; - } } .floating-concierge-button { bottom: 2rem; right: 2rem; + position: fixed; + @include breakpoint($breakpoint-tablet) { + position: absolute; + } + img { width: 4rem; height: 4rem; From a09d1981656a93495096af966d3746274f31def7 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 13:01:03 -0700 Subject: [PATCH 19/22] Fix LHN height --- docs/_sass/_main.scss | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index f0de92b2df23..713373c234a0 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -183,11 +183,11 @@ button { @include breakpoint($breakpoint-tablet) { width: 320px; + height: 100%; } @include breakpoint($breakpoint-desktop) { width: 420px; - height: 100%; } ul, @@ -520,16 +520,19 @@ button { } } -#floating-concierge-button-lhn { - display: none; +#floating-concierge-button-global { + position: fixed; + display: block; @include breakpoint($breakpoint-tablet) { - display: block; + display: none; } } -@include breakpoint($breakpoint-tablet) { - #floating-concierge-button-global { - display: none; +#floating-concierge-button-lhn { + position: absolute; + display: none; + @include breakpoint($breakpoint-tablet) { + display: block; } } @@ -537,11 +540,6 @@ button { bottom: 2rem; right: 2rem; - position: fixed; - @include breakpoint($breakpoint-tablet) { - position: absolute; - } - img { width: 4rem; height: 4rem; From e70d2e65778905f141a21f7ed1eac4cad3cf8b1e Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 13:06:49 -0700 Subject: [PATCH 20/22] Fix LHN display --- docs/_sass/_main.scss | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index 713373c234a0..f2c54e85634a 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -211,17 +211,14 @@ button { display: block; } - height: calc(100% - 100px); - padding-right: 24px; - padding-bottom: 24px; - padding-left: 24px; display: none; + height: calc(100% - 100px); + padding: 0 24px 24px 24px; @include breakpoint($breakpoint-tablet) { + display: block; height: calc(100% - 150px); - padding-right: 44px; - padding-bottom: 44px; - padding-left: 44px; + padding: 0 44px 44px 44px; } &.expanded { From e781fad8d692bf585803e4a7ba690acc868838c0 Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 15:59:49 -0700 Subject: [PATCH 21/22] Use icon class instead of id --- docs/404.html | 2 +- docs/index.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/404.html b/docs/404.html index 225dcecfc040..ccbbded12cae 100644 --- a/docs/404.html +++ b/docs/404.html @@ -3,7 +3,7 @@ lhn_content: '404' ---
- + Hmm it's not here...
That page is nowhere to be found.
diff --git a/docs/index.html b/docs/index.html index 507f1bebf181..7d501dcccd8e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,7 +5,7 @@
- + Coming soon
Looking for our old help site? Check it out here.
From ab1f8391e94a213d0c0a77a96d8444ccad5f1e7d Mon Sep 17 00:00:00 2001 From: Rory Abraham Date: Fri, 19 Aug 2022 16:01:48 -0700 Subject: [PATCH 22/22] Use title class instead of just h3 --- docs/README.md | 6 +++--- docs/_layouts/default.html | 2 +- docs/_sass/_main.scss | 2 +- docs/hubs/request-money.html | 2 +- docs/main.html | 12 ++++++------ 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/README.md b/docs/README.md index d5474de2ba6f..c583fd94eb81 100644 --- a/docs/README.md +++ b/docs/README.md @@ -70,7 +70,7 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt
-

SmartScan

+

SmartScan

@@ -79,7 +79,7 @@ There are 3 main components in the hub page: 1. Stage title, 2. Row of Card butt
-

Another Article

+

Another Article

@@ -121,7 +121,7 @@ In order to add a new Card button in the respective hub page ([send-money/index. ```html
-

SmartScan

+

SmartScan

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 471ffc30f4de..9b1a7c647a2d 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -75,7 +75,7 @@

-

Didn't find what you were looking for?

+

Didn't find what you were looking for?

Concierge is here to answer all your questions.

diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss index f2c54e85634a..95a68ce345e1 100644 --- a/docs/_sass/_main.scss +++ b/docs/_sass/_main.scss @@ -432,7 +432,7 @@ button { flex-grow: 2; } - h3 { + h3.title { padding: 0; margin: 0; } diff --git a/docs/hubs/request-money.html b/docs/hubs/request-money.html index e583d5e983f9..6eff0606150b 100644 --- a/docs/hubs/request-money.html +++ b/docs/hubs/request-money.html @@ -26,7 +26,7 @@

-

SmartScan

+

SmartScan

diff --git a/docs/main.html b/docs/main.html index 0c5ae5d357fa..f76f218b4c1e 100644 --- a/docs/main.html +++ b/docs/main.html @@ -25,7 +25,7 @@

shield

-

Send money

+

Send money

Brief description of who would fall under this category.

@@ -37,7 +37,7 @@

Send money

users

-

Request money

+

Request money

Brief description of who would fall under this category.

@@ -53,28 +53,28 @@

-

Getting started

+

Getting started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui.
-

Getting started

+

Getting started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui.
-

Getting started

+

Getting started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui.
-

Getting started

+

Getting started

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit euismod dui.