Skip to content

Commit

Permalink
Merge pull request #32586 from Expensify/shawn-helpsite
Browse files Browse the repository at this point in the history 
Updating colors for the Help Site, add fine print to footer
  • Loading branch information
@stitesExpensify
stitesExpensify authored Dec 11, 2023
2 parents bb6bc9c + 4e334ef commit a16df0d
Show file tree
Hide file tree
Showing 4 changed files with 67 additions and 63 deletions.
2 changes: 2 additions & 0 deletions docs/_includes/footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,8 @@ <h3>Get Started</h3>
</div>
</div>

<p class="page-footer__fine-print">The Expensify Visa® Commercial Card is issued by The Bancorp Bank, N.A., Member FDIC, pursuant to a license from Visa U.S.A. Inc. and may not be used at all merchants that accept Visa cards. Apple® and the Apple logo® are trademarks of Apple Inc., registered in the U.S. and other countries. App Store is a service mark of Apple Inc. Google Play and the Google Play logo are trademarks of Google LLC.</p>

<div class="page-footer__logo">
<img src="/assets/images/expensify-footer-logo.svg" alt="Expensify" />
</div>
Expand Down
48 changes: 35 additions & 13 deletions docs/_sass/_colors.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,36 @@
$color-green400: #03D47C;
$color-green-icons: #8B9C8F;
$color-green-borders: #1A3D32;
$color-button-background: #1A3D32;
$color-button-hovered: #2A604F;
$color-green-highlightBG: #072419;
$color-green-highlightBG-hover: #06231c;
$color-green-appBG: #061B09;
$color-green-hover: #00a862;
$color-light-gray-green: #AFBBB0;
$color-blue300: #5AB0FF;
// Product Color Spectrum
$color-product-dark-100: #061B09;
$color-product-dark-200: #072419;
$color-product-dark-300: #0A2E25;
$color-product-dark-400: #1A3D32;
$color-product-dark-500: #224F41;
$color-product-dark-600: #2A604F;
$color-product-dark-700: #8B9C8F;
$color-product-dark-800: #AFBBB0;
$color-product-dark-900: #E7ECE9;

// Colors for Links and Success
$color-blue200: #B0D9FF;
$color-white: #E7ECE9;
$color-gray-label: #afbbb0;
$color-blue300: #5AB0FF;
$color-green400: #03D47C;
$color-green500: #00a862;

// Overlay BG color
$color-overlay-background: rgba(26, 61, 50, 0.72);

// UI Colors
$color-text: $color-product-dark-900;
$color-text-supporting: $color-product-dark-800;
$color-icons: $color-product-dark-700;
$color-borders: $color-product-dark-400;
$color-highlightBG: $color-product-dark-200;
$color-row-hover: $color-product-dark-300;
$color-appBG: $color-product-dark-100;
$color-success: $color-green400;
$color-accent : $color-green400;
$color-link: $color-blue300;
$color-link-hovered: $color-blue200;
$color-button-background: $color-product-dark-400;
$color-button-background-hover: $color-product-dark-500;
$color-button-success-background: $color-green400;
$color-button-success-background-hover: $color-green500;
54 changes: 24 additions & 30 deletions docs/_sass/_main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,6 @@
@import 'fonts';
@import 'search-bar';

$color-appBG: $color-green-appBG;
$color-highlightBG: $color-green-highlightBG;
$color-accent : $color-green400;
$color-borders: $color-green-borders;
$color-icons: $color-green-icons;
$color-text: $color-white;
$color-link: $color-blue300;
$color-link-hovered: $color-blue200;
$color-success: $color-green400;
$color-text-supporting: $color-light-gray-green;
$color-green-hover: $color-green-hover;
$color-gray-label: $color-gray-label;

* {
margin: 0;
padding: 0;
Expand Down Expand Up @@ -78,6 +65,7 @@ body {
height: 100%;
min-height: 100%;
background: $color-appBG;
color: $color-text-supporting;
}

hr {
Expand Down Expand Up @@ -148,7 +136,7 @@ textarea {
font-weight: 400;
font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 16px;
color: $color-text;
color: $color-text-supporting;
}

button {
Expand All @@ -159,15 +147,15 @@ button {
font-weight: bold;

&.success {
background-color: $color-success;
background-color: $color-button-success-background;
color: $color-text;
width: 100%;
border-radius: 100px;
padding-left: 20px;
padding-right: 20px;

&:hover {
background-color: desaturate($color-success, 15%);
background-color: $color-button-success-background-hover;
cursor: pointer;
}

Expand Down Expand Up @@ -262,13 +250,15 @@ button {

.lhn-header {
padding: 24px;

@include breakpoint($breakpoint-tablet) {
padding: 44px;
}

#header-button {
display: block;
padding-right: 24px;

@include breakpoint($breakpoint-tablet) {
display: none;
}
Expand All @@ -282,7 +272,7 @@ button {
margin-right: auto;

@include breakpoint($breakpoint-desktop) {
width: 210px;
width: 180px;
align-content: normal;
display: flex;
margin-left: 0;
Expand Down Expand Up @@ -372,7 +362,7 @@ button {
// Box shadow is used here because border-radius and border-collapse don't work together. It leads to double borders.
// https://stackoverflow.com/questions/628301/the-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i-use
border-style: hidden;
box-shadow: 0 0 0 1px $color-green-borders;
box-shadow: 0 0 0 1px $color-borders;
}

th:first-child {
Expand All @@ -394,12 +384,12 @@ button {
th,
td {
padding: 6px 13px;
border: 1px solid $color-green-borders;
border: 1px solid $color-borders;
}

thead tr th {
font-weight: bold;
background-color: $color-green-highlightBG;
background-color: $color-highlightBG;
}

.img-wrap {
Expand Down Expand Up @@ -457,11 +447,11 @@ button {

.link {
display: inline;
color: $color-link;
color: $color-text-supporting;
cursor: pointer;

&:hover {
color: $color-link-hovered;
color: $color-link;
}
}

Expand Down Expand Up @@ -530,7 +520,7 @@ button {
background-color: $color-highlightBG;

&:hover {
background-color: darken($color-highlightBG, 1%);
background-color: $color-row-hover;
}

.row {
Expand Down Expand Up @@ -629,13 +619,14 @@ button {
}

p.description {
color: $color-text-supporting;
padding: 20px 0 20px 0;
}

p.url {
padding: 0;
font-size: 0.8em;
color: $color-gray-label;
color: $color-text-supporting;
}
}

Expand Down Expand Up @@ -739,7 +730,7 @@ button {

.get-help {
flex-wrap: wrap;
margin-top: auto;
margin-top: 40px;
}

.floating-concierge-button {
Expand Down Expand Up @@ -773,9 +764,12 @@ button {

h3 {
color: $color-success;
font-family: "ExpensifyNewKansas", "Helvetica Neue", "Helvetica", Arial, sans-serif;
font-size: 17px;
font-weight: 700;
font-weight: 500;
padding: 0;
margin-bottom: 16px;
margin-top: 0;
}

ul {
Expand All @@ -787,13 +781,13 @@ button {
margin: 0 0 8px;

a {
color: $color-text;
color: $color-text-supporting;
display: block;
padding: 4px 0;
word-break: break-word;

&:hover {
color: $color-success;
color: $color-link;
}
}
}
Expand All @@ -803,11 +797,11 @@ button {
padding-bottom: 20px;

a {
color: $color-text;
color: $color-text-supporting;
display: inline-block;

&:hover {
color: $color-success;
color: $color-link;
}
}
}
Expand Down
26 changes: 6 additions & 20 deletions docs/_sass/_search-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,6 @@
@import 'colors';
@import 'fonts';

$color-appBG: $color-green-appBG;
$color-highlightBG: $color-green-highlightBG;
$color-highlightBG-hover: $color-green-highlightBG-hover;
$color-accent : $color-green400;
$color-borders: $color-green-borders;
$color-icons: $color-green-icons;
$color-text: $color-white;
$color-link: $color-blue300;
$color-link-hovered: $color-blue200;
$color-success: $color-green400;
$color-text-supporting: $color-light-gray-green;
$color-green-hover: $color-green-hover;
$color-gray-label: $color-gray-label;

.search-icon {
margin: auto 0px;
}
Expand Down Expand Up @@ -81,7 +67,7 @@ $color-gray-label: $color-gray-label;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
background-color: $color-overlay-background;
z-index: 1;
}

Expand Down Expand Up @@ -158,7 +144,7 @@ label.search-label {
transform: translateY(-50%);
left: 20px;
pointer-events: none;
color: $color-gray-label;
color: $color-text-supporting;
transform-origin: left top;
user-select: none;
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms;
Expand Down Expand Up @@ -194,14 +180,14 @@ label.search-label {
margin-left: 15px;
margin-right: 20px;
border-radius: 25px;
background-color: $color-green400;
background-color: $color-button-success-background;
cursor: pointer;
width: 40px;
height: 40px;
}

.gsc-search-button.gsc-search-button-v2:hover {
background-color: $color-green-hover;
background-color: $color-button-success-background-hover;
}

.gsc-search-button.gsc-search-button-v2 svg {
Expand All @@ -227,7 +213,7 @@ label.search-label {

/* Change Font result Paragraph color */
.gsc-results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType {
color: $color-text;
color: $color-text-supporting;
}


Expand Down Expand Up @@ -278,7 +264,7 @@ label.search-label {
color: $color-text;

&:hover {
background-color: $color-button-hovered;
background-color: $color-button-background-hover;
text-decoration: none;
}
}

0 comments on commit a16df0d

Please sign in to comment.