From b4f9f21ceeb27e0004bdd3a9f5c665f2125615f3 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 17 Apr 2023 12:24:18 +0700
Subject: [PATCH 01/13] expensify help website color code and caret icons are
 not updated

---
 docs/_includes/article-card.html   |  2 +-
 docs/_includes/lhn-template.html   |  4 ++--
 docs/_layouts/default.html         |  4 ++--
 docs/_sass/_colors.scss            | 10 +++++-----
 docs/_sass/_main.scss              | 10 ++++++----
 docs/assets/images/arrow-right.svg | 10 ++++++++++
 docs/assets/images/arrow-up.svg    | 10 ++++++++++
 docs/assets/images/back-left.svg   | 10 ++++++++++
 docs/assets/images/down.svg        | 10 ++++++++++
 9 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 docs/assets/images/arrow-right.svg
 create mode 100644 docs/assets/images/arrow-up.svg
 create mode 100644 docs/assets/images/back-left.svg
 create mode 100644 docs/assets/images/down.svg

diff --git a/docs/_includes/article-card.html b/docs/_includes/article-card.html
index 644863c83d04..46e6b3c3c963 100644
--- a/docs/_includes/article-card.html
+++ b/docs/_includes/article-card.html
@@ -3,6 +3,6 @@
         <h3 class="title">{{ include.title }}</h3>
     </div>
     <div class="right-icon">
-        <i class="fa-solid fa-angle-right icon"></i>
+        <img src="../assets/images/arrow-right.svg" class="icon icon-right"></img>
     </div>
 </a>
diff --git a/docs/_includes/lhn-template.html b/docs/_includes/lhn-template.html
index cbc5f3bae539..deff0fd50fe5 100644
--- a/docs/_includes/lhn-template.html
+++ b/docs/_includes/lhn-template.html
@@ -13,7 +13,7 @@
         {% if hub.href == activeHub %}
             <li>
                 <div class="icon-with-link selected">
-                    <i class="fa-solid fa-angle-down icon"></i>
+                    <img src="../assets/images/down.svg" class="icon icon-down"></img>
                     <span>{{ hub.title }}</span>
                 </div>
                 <ul class="nested-treeview">
@@ -38,7 +38,7 @@
         {% else %}
             <li>
                 <a href="/hubs/{{ hub.href }}" class="icon-with-link link">
-                    <i class="fa-solid fa-angle-right icon"></i>
+                    <img src="../assets/images/arrow-right.svg" class="icon icon-right"></img>
                     {{ hub.title }}
                 </a>
             </li>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 9c256602144a..f8fe58f49610 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -22,7 +22,7 @@
 
         <div class="lhn-header">
             <div id="header-button">
-                <i id="angle-up-icon" class="fa-solid fa-angle-up icon hide"></i>
+                <img src="/assets/images/arrow-up.svg" class="icon icon-up"></img>
                 <i id="bars-icon" class="fa-solid fa-bars icon"></i>
             </div>
             <a href="/">
@@ -36,7 +36,7 @@
                 {% include lhn-template.html %}
             {% else %}
                 <div id="back-button" class="icon-with-link">
-                    <i class="fa-solid fa-angle-left icon"></i>
+                    <img src="/assets/images/back-left.svg" class="icon icon-left"></img>
                     <div class="link">Back</div>
                 </div>
                 <div class="article-toc"></div>
diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
index baf4df4ddef0..54b03630d852 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -2,16 +2,16 @@ $color-dark: #0B1B34;
 $color-gray1: #FAFAFA;
 $color-gray2: #ECECEC;
 $color-gray3: #C6C9CA;
-$color-green: #07d973;
+$color-green: #03D47C;
 $color-pink: #F68DFE;
-$color-white: #FFFFFF;
+$color-white: #E7ECE9;
 
 $color-light-grey-green: #C9D3C5;
 $color-gray-green: #8B9C8F;
-$color-dark-green: #1B5744;
-$color-darker-green: #002E22;
+$color-dark-green: #1A3D32;
+$color-darker-green: #07271F;
 $color-super-dark-green: #061B09;
 $color-light-blue: #8DC8FF;
 
 $color-link: #5AB0FF;
-$color-link-hovered: #B0D9FF;
+$color-link-hovered: #B0D9FF;
\ No newline at end of file
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 67eca4121b06..2e96f651e2cf 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -174,7 +174,7 @@ button {
 
 #lhn {
     position: fixed;
-    background-color: $color-darker-green;
+    background-color: $color-super-dark-green;
     box-sizing: border-box;
     border-right-color: $color-dark-green;
     border-right-width: 1px;
@@ -269,6 +269,7 @@ button {
         display: grid;
         grid-template-columns: 40px auto;
         cursor: pointer;
+        align-items: center;
     }
 
     .selected {
@@ -489,9 +490,10 @@ button {
     color: $color-gray-green;
     font-size: larger;
     display: inline;
-
-    &.fa-angle-right {
-        padding-left: 4px;
+    
+    &.icon-left, &.icon-right, &.icon-up, &.icon-down {
+        width: 16px;
+        height: 16px;
     }
 }
 
diff --git a/docs/assets/images/arrow-right.svg b/docs/assets/images/arrow-right.svg
new file mode 100644
index 000000000000..01e94332393c
--- /dev/null
+++ b/docs/assets/images/arrow-right.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#8B9C8F;}
+</style>
+<path class="st0" d="M5.6,1.6c0.8-0.8,2-0.8,2.8,0l8.4,8.4l-8.4,8.4c-0.8,0.8-2,0.8-2.8,0c-0.8-0.8-0.8-2,0-2.8l5.6-5.6L5.6,4.4
+	C4.8,3.6,4.8,2.4,5.6,1.6z"/>
+</svg>
diff --git a/docs/assets/images/arrow-up.svg b/docs/assets/images/arrow-up.svg
new file mode 100644
index 000000000000..9f609925d910
--- /dev/null
+++ b/docs/assets/images/arrow-up.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#8B9C8F;}
+</style>
+<path class="st0" d="M18.4,14.4c0.8-0.8,0.8-2,0-2.8L10,3.2l-8.4,8.4c-0.8,0.8-0.8,2,0,2.8c0.8,0.8,2,0.8,2.8,0L10,8.8l5.6,5.6
+	C16.4,15.2,17.6,15.2,18.4,14.4z"/>
+</svg>
diff --git a/docs/assets/images/back-left.svg b/docs/assets/images/back-left.svg
new file mode 100644
index 000000000000..071cd22b1644
--- /dev/null
+++ b/docs/assets/images/back-left.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#8B9C8F;}
+</style>
+<path class="st0" d="M14.4,1.6c-0.8-0.8-2-0.8-2.8,0L3.2,10l8.4,8.4c0.8,0.8,2,0.8,2.8,0c0.8-0.8,0.8-2,0-2.8L8.8,10l5.6-5.6
+	C15.2,3.6,15.2,2.4,14.4,1.6z"/>
+</svg>
diff --git a/docs/assets/images/down.svg b/docs/assets/images/down.svg
new file mode 100644
index 000000000000..d0925eeb1336
--- /dev/null
+++ b/docs/assets/images/down.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#8B9C8F;}
+</style>
+<path class="st0" d="M18.4,5.6c0.8,0.8,0.8,2,0,2.8L10,16.8L1.6,8.4c-0.8-0.8-0.8-2,0-2.8c0.8-0.8,2-0.8,2.8,0l5.6,5.6l5.6-5.6
+	C16.4,4.8,17.6,4.8,18.4,5.6z"/>
+</svg>

From c839e167e061192aefd2490c8c0c2b88d9a02a5b Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 17 Apr 2023 14:45:29 +0700
Subject: [PATCH 02/13] edit LHN background color

---
 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 2e96f651e2cf..bd9325c90bd4 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -174,7 +174,7 @@ button {
 
 #lhn {
     position: fixed;
-    background-color: $color-super-dark-green;
+    background-color: $color-darker-green;
     box-sizing: border-box;
     border-right-color: $color-dark-green;
     border-right-width: 1px;

From 5f732bd24b5d6451451331d4b54ed19328b19a45 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 18 Apr 2023 00:42:17 +0700
Subject: [PATCH 03/13] fix weird linking compared to other linking in
 default.html

---
 docs/_includes/article-card.html | 2 +-
 docs/_includes/lhn-template.html | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/_includes/article-card.html b/docs/_includes/article-card.html
index 46e6b3c3c963..e446582e9a13 100644
--- a/docs/_includes/article-card.html
+++ b/docs/_includes/article-card.html
@@ -3,6 +3,6 @@
         <h3 class="title">{{ include.title }}</h3>
     </div>
     <div class="right-icon">
-        <img src="../assets/images/arrow-right.svg" class="icon icon-right"></img>
+        <img src="/assets/images/arrow-right.svg" class="icon icon-right"></img>
     </div>
 </a>
diff --git a/docs/_includes/lhn-template.html b/docs/_includes/lhn-template.html
index deff0fd50fe5..ce2c8aa323c7 100644
--- a/docs/_includes/lhn-template.html
+++ b/docs/_includes/lhn-template.html
@@ -13,7 +13,7 @@
         {% if hub.href == activeHub %}
             <li>
                 <div class="icon-with-link selected">
-                    <img src="../assets/images/down.svg" class="icon icon-down"></img>
+                    <img src="/assets/images/down.svg" class="icon icon-down"></img>
                     <span>{{ hub.title }}</span>
                 </div>
                 <ul class="nested-treeview">
@@ -38,7 +38,7 @@
         {% else %}
             <li>
                 <a href="/hubs/{{ hub.href }}" class="icon-with-link link">
-                    <img src="../assets/images/arrow-right.svg" class="icon icon-right"></img>
+                    <img src="/assets/images/arrow-right.svg" class="icon icon-right"></img>
                     {{ hub.title }}
                 </a>
             </li>

From c84e61ebebca8c32048a35106ba6142335bc0146 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 18 Apr 2023 20:39:32 +0700
Subject: [PATCH 04/13] refactor css cleanner

---
 docs/Gemfile.lock                |  5 ++++-
 docs/_includes/article-card.html |  2 +-
 docs/_includes/lhn-template.html |  4 ++--
 docs/_layouts/default.html       |  6 +++---
 docs/_sass/_main.scss            | 13 ++++---------
 docs/assets/images/menu.svg      | 11 +++++++++++
 6 files changed, 25 insertions(+), 16 deletions(-)
 create mode 100644 docs/assets/images/menu.svg

diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
index 1a5b26e2dc23..8edabe4e8b7f 100644
--- a/docs/Gemfile.lock
+++ b/docs/Gemfile.lock
@@ -215,6 +215,8 @@ GEM
       racc (~> 1.4)
     nokogiri (1.13.10-x86_64-darwin)
       racc (~> 1.4)
+    nokogiri (1.13.10-x86_64-linux)
+      racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
@@ -258,6 +260,7 @@ PLATFORMS
   arm64-darwin-22
   x86_64-darwin-20
   x86_64-darwin-21
+  x86_64-linux
 
 DEPENDENCIES
   github-pages
@@ -270,4 +273,4 @@ DEPENDENCIES
   webrick (~> 1.7)
 
 BUNDLED WITH
-   2.4.3
+   2.4.12
diff --git a/docs/_includes/article-card.html b/docs/_includes/article-card.html
index e446582e9a13..193b6b5973df 100644
--- a/docs/_includes/article-card.html
+++ b/docs/_includes/article-card.html
@@ -3,6 +3,6 @@
         <h3 class="title">{{ include.title }}</h3>
     </div>
     <div class="right-icon">
-        <img src="/assets/images/arrow-right.svg" class="icon icon-right"></img>
+        <img src="/assets/images/arrow-right.svg" class="base-icon icon icon"></img>
     </div>
 </a>
diff --git a/docs/_includes/lhn-template.html b/docs/_includes/lhn-template.html
index ce2c8aa323c7..8389ccc7fc93 100644
--- a/docs/_includes/lhn-template.html
+++ b/docs/_includes/lhn-template.html
@@ -13,7 +13,7 @@
         {% if hub.href == activeHub %}
             <li>
                 <div class="icon-with-link selected">
-                    <img src="/assets/images/down.svg" class="icon icon-down"></img>
+                    <img src="/assets/images/down.svg" class="base-icon"></img>
                     <span>{{ hub.title }}</span>
                 </div>
                 <ul class="nested-treeview">
@@ -38,7 +38,7 @@
         {% else %}
             <li>
                 <a href="/hubs/{{ hub.href }}" class="icon-with-link link">
-                    <img src="/assets/images/arrow-right.svg" class="icon icon-right"></img>
+                    <img src="/assets/images/arrow-right.svg" class="base-icon"></img>
                     {{ hub.title }}
                 </a>
             </li>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index f8fe58f49610..6827e83476f3 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -22,8 +22,8 @@
 
         <div class="lhn-header">
             <div id="header-button">
-                <img src="/assets/images/arrow-up.svg" class="icon icon-up"></img>
-                <i id="bars-icon" class="fa-solid fa-bars icon"></i>
+                <img src="/assets/images/arrow-up.svg" class="base-icon"></img>
+                <img src="/assets/images/menu.svg" class="base-icon"></img>
             </div>
             <a href="/">
                 <img src="/assets/images/expensify-help.svg" class="logo" />
@@ -36,7 +36,7 @@
                 {% include lhn-template.html %}
             {% else %}
                 <div id="back-button" class="icon-with-link">
-                    <img src="/assets/images/back-left.svg" class="icon icon-left"></img>
+                    <img src="/assets/images/back-left.svg" class="base-icon"></img>
                     <div class="link">Back</div>
                 </div>
                 <div class="article-toc"></div>
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index bd9325c90bd4..3b655c11daa2 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -486,17 +486,12 @@ button {
     }
 }
 
-.icon {
-    color: $color-gray-green;
-    font-size: larger;
-    display: inline;
-    
-    &.icon-left, &.icon-right, &.icon-up, &.icon-down {
-        width: 16px;
-        height: 16px;
-    }
+.base-icon {
+    width: 20px;
+    height: 20px;
 }
 
+
 .homepage {
     h1 {
         margin-top: 0;
diff --git a/docs/assets/images/menu.svg b/docs/assets/images/menu.svg
new file mode 100644
index 000000000000..4fc34e918899
--- /dev/null
+++ b/docs/assets/images/menu.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#8B9C8F;}
+</style>
+<path class="st0" d="M2,3c0-1.1,0.9-2,2-2h12c1.1,0,2,0.9,2,2s-0.9,2-2,2H4C2.9,5,2,4.1,2,3z"/>
+<path class="st0" d="M2,10c0-1.1,0.9-2,2-2h9c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2H4C2.9,12,2,11.1,2,10z"/>
+<path class="st0" d="M4,15c-1.1,0-2,0.9-2,2c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2H4z"/>
+</svg>
\ No newline at end of file

From 82f03d7bbc9eeea5f6c8e189e7e094cc61d110ad Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Tue, 18 Apr 2023 21:59:06 +0700
Subject: [PATCH 05/13] format code

---
 docs/Gemfile.lock                | 5 +----
 docs/_includes/article-card.html | 2 +-
 docs/_sass/_main.scss            | 1 -
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
index 8edabe4e8b7f..ce9ffb769893 100644
--- a/docs/Gemfile.lock
+++ b/docs/Gemfile.lock
@@ -215,8 +215,6 @@ GEM
       racc (~> 1.4)
     nokogiri (1.13.10-x86_64-darwin)
       racc (~> 1.4)
-    nokogiri (1.13.10-x86_64-linux)
-      racc (~> 1.4)
     octokit (4.25.1)
       faraday (>= 1, < 3)
       sawyer (~> 0.9)
@@ -260,7 +258,6 @@ PLATFORMS
   arm64-darwin-22
   x86_64-darwin-20
   x86_64-darwin-21
-  x86_64-linux
 
 DEPENDENCIES
   github-pages
@@ -273,4 +270,4 @@ DEPENDENCIES
   webrick (~> 1.7)
 
 BUNDLED WITH
-   2.4.12
+   2.4.3
\ No newline at end of file
diff --git a/docs/_includes/article-card.html b/docs/_includes/article-card.html
index 193b6b5973df..a088e5e406db 100644
--- a/docs/_includes/article-card.html
+++ b/docs/_includes/article-card.html
@@ -3,6 +3,6 @@
         <h3 class="title">{{ include.title }}</h3>
     </div>
     <div class="right-icon">
-        <img src="/assets/images/arrow-right.svg" class="base-icon icon icon"></img>
+        <img src="/assets/images/arrow-right.svg" class="base-icon"></img>
     </div>
 </a>
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 3b655c11daa2..cd1f60b217a3 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -491,7 +491,6 @@ button {
     height: 20px;
 }
 
-
 .homepage {
     h1 {
         margin-top: 0;

From ae65bed1bd161e75c9d6d0b72dd4e9d024cd237b Mon Sep 17 00:00:00 2001
From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com>
Date: Tue, 18 Apr 2023 22:12:14 +0700
Subject: [PATCH 06/13] Update Gemfile.lock

---
 docs/Gemfile.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/Gemfile.lock b/docs/Gemfile.lock
index ce9ffb769893..1a5b26e2dc23 100644
--- a/docs/Gemfile.lock
+++ b/docs/Gemfile.lock
@@ -270,4 +270,4 @@ DEPENDENCIES
   webrick (~> 1.7)
 
 BUNDLED WITH
-   2.4.3
\ No newline at end of file
+   2.4.3

From d757dd48d267d1fc73e0af54281b385f0c20ce23 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 19 Apr 2023 17:06:43 +0700
Subject: [PATCH 07/13] update the color name for help dot

---
 docs/_sass/_colors.scss | 12 ++++++------
 docs/_sass/_main.scss   | 28 ++++++++++++++--------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
index 54b03630d852..cddaa5de6fcd 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -2,16 +2,16 @@ $color-dark: #0B1B34;
 $color-gray1: #FAFAFA;
 $color-gray2: #ECECEC;
 $color-gray3: #C6C9CA;
-$color-green: #03D47C;
+$color-green400: #03D47C;
 $color-pink: #F68DFE;
 $color-white: #E7ECE9;
 
 $color-light-grey-green: #C9D3C5;
-$color-gray-green: #8B9C8F;
-$color-dark-green: #1A3D32;
-$color-darker-green: #07271F;
-$color-super-dark-green: #061B09;
-$color-light-blue: #8DC8FF;
+$color-green-icons: #8B9C8F;
+$color-green-borders: #1A3D32;
+$color-green-highlightBG: #07271F;
+$color-green-appBG: #061B09;
+$color-blue200: #8DC8FF;
 
 $color-link: #5AB0FF;
 $color-link-hovered: #B0D9FF;
\ No newline at end of file
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index cd1f60b217a3..9170f8815518 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -63,11 +63,11 @@ html,
 body {
     height: 100%;
     min-height: 100%;
-    background: $color-darker-green;
+    background: $color-green-highlightBG;
 }
 
 hr {
-    background: $color-light-blue;
+    background: $color-blue200;
     border: none;
     display: inline-block;
     width: 24px;
@@ -84,7 +84,7 @@ em {
 }
 
 a {
-    color: $color-light-blue;
+    color: $color-blue200;
     text-decoration: none;
 
     img {
@@ -145,7 +145,7 @@ button {
     font-weight: bold;
 
     &.success {
-        background-color: $color-green;
+        background-color: $color-green400;
         color: $color-white;
         width: 100%;
         border-radius: 100px;
@@ -153,7 +153,7 @@ button {
         padding-right: 20px;
 
         &:hover {
-            background-color: desaturate($color-green, 15%);
+            background-color: desaturate($color-green400, 15%);
             cursor: pointer;
         }
 
@@ -174,9 +174,9 @@ button {
 
 #lhn {
     position: fixed;
-    background-color: $color-darker-green;
+    background-color: $color-green-highlightBG;
     box-sizing: border-box;
-    border-right-color: $color-dark-green;
+    border-right-color: $color-green-borders;
     border-right-width: 1px;
     border-style: solid;
     width: 100%;
@@ -287,7 +287,7 @@ button {
 #content-area {
     display: flex;
     flex-direction: column;
-    background-color: $color-super-dark-green;
+    background-color: $color-green-appBG;
     min-height: 100vh;
     margin-left: 0;
     padding: 80px 24px 0px 24px;
@@ -414,10 +414,10 @@ button {
     font-weight: 700;
     cursor: pointer;
     color: $color-white;
-    background-color: $color-darker-green;
+    background-color: $color-green-highlightBG;
 
     &:hover {
-        background-color: darken($color-darker-green, 1%);
+        background-color: darken($color-green-highlightBG, 1%);
     }
 
     .row {
@@ -605,7 +605,7 @@ button {
     }
 
     h3 {
-        color: $color-green;
+        color: $color-green400;
         font-size: 17px;
         font-weight: 700;
         margin-bottom: 16px;
@@ -626,7 +626,7 @@ button {
                 word-break: break-word;
 
                 &:hover {
-                    color: $color-green;
+                    color: $color-green400;
                 }
             }
         }
@@ -640,13 +640,13 @@ button {
             display: inline-block;
 
             &:hover {
-                color: $color-green;
+                color: $color-green400;
             }
         }
     }
 
     &__fine-print {
-        color: $color-gray-green;
+        color: $color-green-icons;
         font-size: 10px;
 
         a {

From 71033246a017ca75b341b973ac26f66d76592a2f Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 19 Apr 2023 22:31:00 +0700
Subject: [PATCH 08/13] remove colors are not used

---
 docs/_sass/_colors.scss | 10 +-------
 docs/_sass/_main.scss   | 52 ++++++++++++++++++++++++-----------------
 2 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
index cddaa5de6fcd..0d92866a1d0e 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -1,17 +1,9 @@
-$color-dark: #0B1B34;
-$color-gray1: #FAFAFA;
-$color-gray2: #ECECEC;
-$color-gray3: #C6C9CA;
 $color-green400: #03D47C;
-$color-pink: #F68DFE;
 $color-white: #E7ECE9;
-
-$color-light-grey-green: #C9D3C5;
 $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
 $color-green-highlightBG: #07271F;
 $color-green-appBG: #061B09;
 $color-blue200: #8DC8FF;
-
 $color-link: #5AB0FF;
-$color-link-hovered: #B0D9FF;
\ No newline at end of file
+$color-link-hovered: #B0D9FF;
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 9170f8815518..738790338cfd 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -2,6 +2,16 @@
 @import 'colors';
 @import 'fonts';
 
+$color-appBG: $color-green-appBG;
+$color-highlightBG: $color-green-highlightBG;
+$color-borders: $color-green-borders;
+$color-icons: $color-green-icons;
+$color-blue: $color-blue200;
+$color-text: $color-white;
+$color-link: $color-link;
+$color-link-hovered: $color-link-hovered;
+$color-green: $color-green400;
+
 * {
     margin: 0;
     padding: 0;
@@ -63,11 +73,11 @@ html,
 body {
     height: 100%;
     min-height: 100%;
-    background: $color-green-highlightBG;
+    background: $color-highlightBG;
 }
 
 hr {
-    background: $color-blue200;
+    background: $color-blue;
     border: none;
     display: inline-block;
     width: 24px;
@@ -84,7 +94,7 @@ em {
 }
 
 a {
-    color: $color-blue200;
+    color: $color-blue;
     text-decoration: none;
 
     img {
@@ -98,7 +108,7 @@ h3,
 h4,
 h5,
 h6 {
-    color: $color-white;
+    color: $color-text;
     font-weight: bold;
     padding-bottom: 12px;
 }
@@ -134,7 +144,7 @@ textarea {
     font-weight: 400;
     font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif;
     font-size: 16px;
-    color: $color-white;
+    color: $color-text;
 }
 
 button {
@@ -145,15 +155,15 @@ button {
     font-weight: bold;
 
     &.success {
-        background-color: $color-green400;
-        color: $color-white;
+        background-color: $color-green;
+        color: $color-text;
         width: 100%;
         border-radius: 100px;
         padding-left: 20px;
         padding-right: 20px;
 
         &:hover {
-            background-color: desaturate($color-green400, 15%);
+            background-color: desaturate($color-green, 15%);
             cursor: pointer;
         }
 
@@ -174,9 +184,9 @@ button {
 
 #lhn {
     position: fixed;
-    background-color: $color-green-highlightBG;
+    background-color: $color-highlightBG;
     box-sizing: border-box;
-    border-right-color: $color-green-borders;
+    border-right-color: $color-borders;
     border-right-width: 1px;
     border-style: solid;
     width: 100%;
@@ -275,7 +285,7 @@ button {
     .selected {
         cursor: auto;
         font-weight: bold;
-        color: $color-white;
+        color: $color-text;
     }
 
     .hide {
@@ -287,7 +297,7 @@ button {
 #content-area {
     display: flex;
     flex-direction: column;
-    background-color: $color-green-appBG;
+    background-color: $color-appBG;
     min-height: 100vh;
     margin-left: 0;
     padding: 80px 24px 0px 24px;
@@ -386,7 +396,7 @@ button {
 
     .selected-article {
         font-weight: bold;
-        color: $color-white;
+        color: $color-text;
     }
 
     .home-link {
@@ -413,8 +423,8 @@ button {
     padding: 28px;
     font-weight: 700;
     cursor: pointer;
-    color: $color-white;
-    background-color: $color-green-highlightBG;
+    color: $color-text;
+    background-color: $color-highlightBG;
 
     &:hover {
         background-color: darken($color-green-highlightBG, 1%);
@@ -605,7 +615,7 @@ button {
     }
 
     h3 {
-        color: $color-green400;
+        color: $color-green;
         font-size: 17px;
         font-weight: 700;
         margin-bottom: 16px;
@@ -620,13 +630,13 @@ button {
             margin: 0 0 8px;
 
             a {
-                color: $color-white;
+                color: $color-text;
                 display: block;
                 padding: 4px 0;
                 word-break: break-word;
 
                 &:hover {
-                    color: $color-green400;
+                    color: $color-green;
                 }
             }
         }
@@ -636,17 +646,17 @@ button {
         padding-bottom: 20px;
 
         a {
-            color: $color-white;
+            color: $color-text;
             display: inline-block;
 
             &:hover {
-                color: $color-green400;
+                color: $color-green;
             }
         }
     }
 
     &__fine-print {
-        color: $color-green-icons;
+        color: $color-icons;
         font-size: 10px;
 
         a {

From c80cfe925b3aa758538b05ad7323faf912a29362 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 20 Apr 2023 02:31:11 +0700
Subject: [PATCH 09/13] edit name of color

---
 docs/_sass/_colors.scss |  5 ++---
 docs/_sass/_main.scss   | 22 ++++++++++------------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
index 0d92866a1d0e..d1065892cd98 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -4,6 +4,5 @@ $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
 $color-green-highlightBG: #07271F;
 $color-green-appBG: #061B09;
-$color-blue200: #8DC8FF;
-$color-link: #5AB0FF;
-$color-link-hovered: #B0D9FF;
+$color-blue200: #5AB0FF;
+$color-blue100: #B0D9FF;
\ No newline at end of file
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 738790338cfd..723478e79048 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -6,11 +6,10 @@ $color-appBG: $color-green-appBG;
 $color-highlightBG: $color-green-highlightBG;
 $color-borders: $color-green-borders;
 $color-icons: $color-green-icons;
-$color-blue: $color-blue200;
 $color-text: $color-white;
-$color-link: $color-link;
-$color-link-hovered: $color-link-hovered;
-$color-green: $color-green400;
+$color-link: $color-blue200;
+$color-link-hovered: $color-blue100;
+$color-success: $color-green400;
 
 * {
     margin: 0;
@@ -77,7 +76,7 @@ body {
 }
 
 hr {
-    background: $color-blue;
+    background: $color-borders;
     border: none;
     display: inline-block;
     width: 24px;
@@ -94,7 +93,6 @@ em {
 }
 
 a {
-    color: $color-blue;
     text-decoration: none;
 
     img {
@@ -155,7 +153,7 @@ button {
     font-weight: bold;
 
     &.success {
-        background-color: $color-green;
+        background-color: $color-success;
         color: $color-text;
         width: 100%;
         border-radius: 100px;
@@ -163,7 +161,7 @@ button {
         padding-right: 20px;
 
         &:hover {
-            background-color: desaturate($color-green, 15%);
+            background-color: desaturate($color-success, 15%);
             cursor: pointer;
         }
 
@@ -427,7 +425,7 @@ button {
     background-color: $color-highlightBG;
 
     &:hover {
-        background-color: darken($color-green-highlightBG, 1%);
+        background-color: darken($color-highlightBG, 1%);
     }
 
     .row {
@@ -615,7 +613,7 @@ button {
     }
 
     h3 {
-        color: $color-green;
+        color: $color-success;
         font-size: 17px;
         font-weight: 700;
         margin-bottom: 16px;
@@ -636,7 +634,7 @@ button {
                 word-break: break-word;
 
                 &:hover {
-                    color: $color-green;
+                    color: $color-success;
                 }
             }
         }
@@ -650,7 +648,7 @@ button {
             display: inline-block;
 
             &:hover {
-                color: $color-green;
+                color: $color-success;
             }
         }
     }

From fe370ebf556a94dc5917c229f656ad47dacc33b6 Mon Sep 17 00:00:00 2001
From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com>
Date: Thu, 20 Apr 2023 02:34:23 +0700
Subject: [PATCH 10/13] Update _colors.scss

---
 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 d1065892cd98..121cbbf3d810 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -5,4 +5,4 @@ $color-green-borders: #1A3D32;
 $color-green-highlightBG: #07271F;
 $color-green-appBG: #061B09;
 $color-blue200: #5AB0FF;
-$color-blue100: #B0D9FF;
\ No newline at end of file
+$color-blue100: #B0D9FF;

From d1bac74028f0bcf94cced4fdaacae4823f4ca390 Mon Sep 17 00:00:00 2001
From: dukenv0307 <129500732+dukenv0307@users.noreply.github.com>
Date: Thu, 20 Apr 2023 02:55:16 +0700
Subject: [PATCH 11/13] Update _colors.scss

---
 docs/_sass/_colors.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
index 121cbbf3d810..b4d631df4dba 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -4,5 +4,5 @@ $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
 $color-green-highlightBG: #07271F;
 $color-green-appBG: #061B09;
-$color-blue200: #5AB0FF;
-$color-blue100: #B0D9FF;
+$color-blue300: #5AB0FF;
+$color-blue200: #B0D9FF;

From 939d3a1530648fa9f3be41b3994c2101f3b21a7a Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 20 Apr 2023 20:21:24 +0700
Subject: [PATCH 12/13] add color light gray  green

---
 docs/_sass/_colors.scss |  3 ++-
 docs/_sass/_main.scss   | 11 ++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
index b4d631df4dba..d9fa10d24b8e 100644
--- a/docs/_sass/_colors.scss
+++ b/docs/_sass/_colors.scss
@@ -1,8 +1,9 @@
 $color-green400: #03D47C;
-$color-white: #E7ECE9;
 $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
 $color-green-highlightBG: #07271F;
 $color-green-appBG: #061B09;
+$color-light-gray-green: #AFBBB0;
 $color-blue300: #5AB0FF;
 $color-blue200: #B0D9FF;
+$color-white: #E7ECE9;
diff --git a/docs/_sass/_main.scss b/docs/_sass/_main.scss
index 723478e79048..f623edb0e7d6 100644
--- a/docs/_sass/_main.scss
+++ b/docs/_sass/_main.scss
@@ -7,9 +7,10 @@ $color-highlightBG: $color-green-highlightBG;
 $color-borders: $color-green-borders;
 $color-icons: $color-green-icons;
 $color-text: $color-white;
-$color-link: $color-blue200;
-$color-link-hovered: $color-blue100;
+$color-link: $color-blue300;
+$color-link-hovered: $color-blue200;
 $color-success: $color-green400;
+$color-text-supporting: $color-light-gray-green;
 
 * {
     margin: 0;
@@ -72,7 +73,7 @@ html,
 body {
     height: 100%;
     min-height: 100%;
-    background: $color-highlightBG;
+    background: $color-appBG;
 }
 
 hr {
@@ -93,6 +94,7 @@ em {
 }
 
 a {
+    color: $color-link;
     text-decoration: none;
 
     img {
@@ -295,7 +297,6 @@ button {
 #content-area {
     display: flex;
     flex-direction: column;
-    background-color: $color-appBG;
     min-height: 100vh;
     margin-left: 0;
     padding: 80px 24px 0px 24px;
@@ -654,7 +655,7 @@ button {
     }
 
     &__fine-print {
-        color: $color-icons;
+        color: $color-text-supporting;
         font-size: 10px;
 
         a {

From deacd0b2c7bab39c9b2648e62a4f19f92f37796c Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Fri, 21 Apr 2023 08:01:06 +0700
Subject: [PATCH 13/13] fix both icon display in mWeb

---
 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 6827e83476f3..e0ed71b46818 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -22,8 +22,8 @@
 
         <div class="lhn-header">
             <div id="header-button">
-                <img src="/assets/images/arrow-up.svg" class="base-icon"></img>
-                <img src="/assets/images/menu.svg" class="base-icon"></img>
+                <img id="angle-up-icon" src="/assets/images/arrow-up.svg" class="base-icon hide"></img>
+                <img id="bars-icon" src="/assets/images/menu.svg" class="base-icon"></img>
             </div>
             <a href="/">
                 <img src="/assets/images/expensify-help.svg" class="logo" />