From bba406e0550081f48da4cd5ed0ac67f1ec5c7609 Mon Sep 17 00:00:00 2001
From: Nirmal Kumar <nirmalkc@gmail.com>
Date: Wed, 16 Mar 2022 16:00:51 +0530
Subject: [PATCH] navbar RWD fix

---
 src/App.css                  | 10 +++++++++-
 src/common/header/Header.js  |  6 +++---
 src/common/header/header.css | 37 ++++++++++++++++++++++++++++++------
 src/images/img-logo-sm.svg   |  1 +
 src/images/img-logo.svg      |  1 +
 5 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 src/images/img-logo-sm.svg
 create mode 100644 src/images/img-logo.svg

diff --git a/src/App.css b/src/App.css
index d4ba20f45..ff952dd17 100644
--- a/src/App.css
+++ b/src/App.css
@@ -73,6 +73,10 @@
   --screen-lg-max: 1200px;
   --screen-xl-max: 1400px;
 
+  /* Header */
+  --navbar-icon-size-rg: 24px;
+  --navbar-icon-size-sm: 16px;
+
   /* Play */
   --play-thumb-size: 268px;
 
@@ -143,6 +147,10 @@ code {
     --fs-lg: 1.4rem;
     --fs-xl: 1.8rem;
     --fs-xxl: 2rem;
+
+    /* Header */
+    --navbar-icon-size-rg: 20px;
+    --navbar-icon-size-sm: 14px;
   }
 }
 
@@ -167,7 +175,7 @@ code {
 .app-footer {
   padding: 0 2rem;
   text-align: center;
-  font-size: var(--fs-sm);
+  font-size: var(--fs-xs);
   font-weight: var(--fw-light);
   color: var(--color-neutral-50);
   border-top: solid 1px var(--color-neutral-30);
diff --git a/src/common/header/Header.js b/src/common/header/Header.js
index 66a955f90..882739e62 100644
--- a/src/common/header/Header.js
+++ b/src/common/header/Header.js
@@ -39,19 +39,19 @@ const Header = () => {
           <ul className="header-links">
             <li>
               <a href="https://github.com/atapas/react-play" target="_blank" rel="noopener noreferrer">
-                <BsGithub className="icon" size="24px" />
+                <BsGithub className="icon" />
                 <span className="sr-only">GitHub</span>
               </a>
             </li>
             <li>
               <a href="https://twitter.com/tapasadhikary" target="_blank" rel="noopener noreferrer">
-                <BsTwitter className="icon" size="24px" />
+                <BsTwitter className="icon" />
                 <span className="sr-only">Twitter</span>
               </a>
             </li>
             <li>
               <a href="https://github.com/atapas/react-play" target="_blank" rel="noopener noreferrer" className="app-header-btn">
-                <BsShareFill className="icon" size="16px" />
+                <BsShareFill className="icon" />
                 <span className="btn-label">Share</span>
               </a>
             </li>
diff --git a/src/common/header/header.css b/src/common/header/header.css
index 7ba8aeb9f..f66879423 100644
--- a/src/common/header/header.css
+++ b/src/common/header/header.css
@@ -11,7 +11,13 @@
   background: var(--color-neutral-90);
   color: #fff;
   height: 64px;
-  padding: 0 1rem;
+  padding: 0 1rem 0 0.6rem;
+}
+
+@media screen and (max-width: 768px) {
+  .app-header {
+    padding: 0 1rem 0 0.2rem;
+  }
 }
 
 .app-header-home {
@@ -22,15 +28,30 @@
   display: block;
   width: 178px;
   height: 60px;
-	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='179.712' height='60.577' viewBox='0 0 179.712 60.577'%3E%3Cg id='Group_12' data-name='Group 12' transform='translate(-301.998 -4.291)'%3E%3Cg id='Group_11' data-name='Group 11' transform='translate(297 12.413)'%3E%3Cpath id='Path_11' data-name='Path 11' d='M2 0V-19.17h8.478a5.441 5.441 0 0 1 2.444.554 6.321 6.321 0 0 1 1.931 1.458 6.88 6.88 0 0 1 1.269 2.052 6.172 6.172 0 0 1 .459 2.308 6.375 6.375 0 0 1-.932 3.389 5.347 5.347 0 0 1-2.524 2.2L17.5 0H13.311L9.4-6.426H5.724V0ZM5.724-9.693H10.4a1.97 1.97 0 0 0 .958-.243 2.452 2.452 0 0 0 .77-.661 3.3 3.3 0 0 0 .513-.985 3.818 3.818 0 0 0 .189-1.215 3.462 3.462 0 0 0-.216-1.242 3.241 3.241 0 0 0-.58-.985 2.625 2.625 0 0 0-.837-.648 2.173 2.173 0 0 0-.959-.23H5.724ZM25.758.27A7.851 7.851 0 0 1 22.68-.311 7.058 7.058 0 0 1 20.331-1.89a7.011 7.011 0 0 1-1.5-2.322 7.452 7.452 0 0 1-.526-2.781 7.88 7.88 0 0 1 .513-2.849A6.952 6.952 0 0 1 20.3-12.191 7.09 7.09 0 0 1 22.667-13.8a7.864 7.864 0 0 1 3.119-.594 7.669 7.669 0 0 1 3.092.594A7.109 7.109 0 0 1 31.2-12.2a6.77 6.77 0 0 1 1.458 2.322 7.733 7.733 0 0 1 .5 2.754q0 .351-.014.675a2.746 2.746 0 0 1-.067.54H22.14a4.2 4.2 0 0 0 .405 1.485 3.67 3.67 0 0 0 .837 1.107 3.645 3.645 0 0 0 1.161.7 3.813 3.813 0 0 0 1.35.243A4.171 4.171 0 0 0 27.932-2.9a2.787 2.787 0 0 0 1.309-1.391l3.1.864a6.312 6.312 0 0 1-2.5 2.66A7.741 7.741 0 0 1 25.758.27ZM29.43-8.262a3.761 3.761 0 0 0-1.175-2.551 3.59 3.59 0 0 0-2.524-.958 3.6 3.6 0 0 0-1.364.256 3.558 3.558 0 0 0-1.12.716 3.708 3.708 0 0 0-.8 1.107 3.9 3.9 0 0 0-.364 1.431ZM39.231.27a5.367 5.367 0 0 1-1.917-.338 4.608 4.608 0 0 1-1.539-.945A4.4 4.4 0 0 1 34.763-2.43 4.293 4.293 0 0 1 34.4-4.212a3.926 3.926 0 0 1 .445-1.85 4.241 4.241 0 0 1 1.242-1.444 6.157 6.157 0 0 1 1.9-.931 8.3 8.3 0 0 1 2.43-.338 10.471 10.471 0 0 1 1.85.162 7.533 7.533 0 0 1 1.606.459v-.81a2.836 2.836 0 0 0-.8-2.16 3.312 3.312 0 0 0-2.362-.756 6.257 6.257 0 0 0-2.214.405 10.282 10.282 0 0 0-2.214 1.188l-1.107-2.3a10.445 10.445 0 0 1 5.886-1.809 6.9 6.9 0 0 1 4.738 1.5 5.491 5.491 0 0 1 1.688 4.334v4.4a1.271 1.271 0 0 0 .2.81.887.887 0 0 0 .662.27V0a8.055 8.055 0 0 1-1.593.189A2.412 2.412 0 0 1 45.185-.27 1.973 1.973 0 0 1 44.5-1.485l-.081-.783a6.261 6.261 0 0 1-2.3 1.89A6.59 6.59 0 0 1 39.231.27Zm1.026-2.646A4.713 4.713 0 0 0 42-2.7a3.161 3.161 0 0 0 1.282-.864 1.3 1.3 0 0 0 .594-1.026V-6.21a8.858 8.858 0 0 0-1.4-.392 7.562 7.562 0 0 0-1.458-.148 3.865 3.865 0 0 0-2.3.635 1.905 1.905 0 0 0-.891 1.606 1.933 1.933 0 0 0 .7 1.526A2.548 2.548 0 0 0 40.257-2.376Zm9.72-4.7a7.7 7.7 0 0 1 .513-2.808A6.838 6.838 0 0 1 51.975-12.2 7.228 7.228 0 0 1 54.324-13.8a7.766 7.766 0 0 1 3.1-.594 7.441 7.441 0 0 1 3.955 1 6.381 6.381 0 0 1 2.444 2.619l-3.537 1.08a3.177 3.177 0 0 0-1.215-1.2 3.4 3.4 0 0 0-1.674-.418A3.446 3.446 0 0 0 55.944-11a3.584 3.584 0 0 0-1.174.864A4 4 0 0 0 53.986-8.8 5.044 5.044 0 0 0 53.7-7.074 4.837 4.837 0 0 0 54-5.346 4.356 4.356 0 0 0 54.8-4a3.5 3.5 0 0 0 1.174.878 3.384 3.384 0 0 0 1.431.31 3.47 3.47 0 0 0 1.8-.486 2.733 2.733 0 0 0 1.147-1.188L63.882-3.4a5.946 5.946 0 0 1-2.4 2.646A7.552 7.552 0 0 1 57.456.27a7.766 7.766 0 0 1-3.1-.594A7.123 7.123 0 0 1 52-1.931 7.128 7.128 0 0 1 50.5-4.28 7.556 7.556 0 0 1 49.977-7.074Zm24.6 6.345a16.145 16.145 0 0 1-1.782.648 7.486 7.486 0 0 1-2.214.324A5.139 5.139 0 0 1 69.161.054 3.117 3.117 0 0 1 68-.553a2.967 2.967 0 0 1-.8-1.08 3.909 3.909 0 0 1-.3-1.607v-8.127H65.043v-2.781h1.863v-4.59h3.618v4.59h2.97v2.781h-2.97v6.912a1.286 1.286 0 0 0 .392 1.067 1.494 1.494 0 0 0 .959.31 3.328 3.328 0 0 0 1.107-.189q.54-.189.864-.324ZM128.655 0V-19.17h8.127a5.441 5.441 0 0 1 2.443.554 6.321 6.321 0 0 1 1.93 1.458 6.88 6.88 0 0 1 1.269 2.052 6.172 6.172 0 0 1 .459 2.308 6.653 6.653 0 0 1-.432 2.363A6.56 6.56 0 0 1 141.237-8.4a5.969 5.969 0 0 1-1.89 1.431 5.468 5.468 0 0 1-2.43.54h-4.536V0Zm3.726-9.693h4.32a2.134 2.134 0 0 0 1.714-.837A3.463 3.463 0 0 0 139.1-12.8a3.735 3.735 0 0 0-.216-1.309 3.181 3.181 0 0 0-.567-.985 2.256 2.256 0 0 0-.824-.608 2.413 2.413 0 0 0-.958-.2h-4.158ZM145.1-19.71h3.618V-4.536a1.786 1.786 0 0 0 .378 1.215 1.358 1.358 0 0 0 1.08.432A2.71 2.71 0 0 0 150.89-3a4.84 4.84 0 0 0 .743-.27l.486 2.754a7 7 0 0 1-1.7.54 9.28 9.28 0 0 1-1.755.189 3.623 3.623 0 0 1-2.633-.9 3.429 3.429 0 0 1-.932-2.579ZM157.545.27a5.367 5.367 0 0 1-1.917-.338 4.608 4.608 0 0 1-1.539-.945 4.4 4.4 0 0 1-1.012-1.418 4.293 4.293 0 0 1-.365-1.782 3.926 3.926 0 0 1 .445-1.85A4.241 4.241 0 0 1 154.4-7.506a6.157 6.157 0 0 1 1.9-.931 8.3 8.3 0 0 1 2.43-.338 10.47 10.47 0 0 1 1.85.162 7.533 7.533 0 0 1 1.606.459v-.81a2.836 2.836 0 0 0-.8-2.16 3.312 3.312 0 0 0-2.363-.756 6.257 6.257 0 0 0-2.214.405 10.281 10.281 0 0 0-2.214 1.188l-1.107-2.3a10.445 10.445 0 0 1 5.886-1.809 6.9 6.9 0 0 1 4.739 1.5 5.491 5.491 0 0 1 1.688 4.334v4.4a1.271 1.271 0 0 0 .2.81.887.887 0 0 0 .661.27V0a8.055 8.055 0 0 1-1.593.189A2.412 2.412 0 0 1 163.5-.27a1.973 1.973 0 0 1-.689-1.215l-.081-.783a6.262 6.262 0 0 1-2.295 1.89A6.59 6.59 0 0 1 157.545.27Zm1.026-2.646a4.713 4.713 0 0 0 1.742-.324 3.161 3.161 0 0 0 1.283-.864 1.3 1.3 0 0 0 .594-1.026V-6.21a8.858 8.858 0 0 0-1.4-.392 7.562 7.562 0 0 0-1.458-.148 3.865 3.865 0 0 0-2.295.635 1.905 1.905 0 0 0-.891 1.606 1.933 1.933 0 0 0 .7 1.526A2.548 2.548 0 0 0 158.571-2.376Zm10.557 5.13a6.98 6.98 0 0 0 .891.2 4.855 4.855 0 0 0 .729.068 1.548 1.548 0 0 0 .648-.135 1.388 1.388 0 0 0 .54-.473 4.613 4.613 0 0 0 .486-.931q.243-.594.513-1.485l-5.589-14.148h3.726l3.834 11.016 3.4-11.016h3.4L175.77 2.808a5.066 5.066 0 0 1-1.755 2.43 4.935 4.935 0 0 1-3.078.945 5.852 5.852 0 0 1-.878-.068 5.611 5.611 0 0 1-.932-.229Z' transform='translate(3 33.587)' fill='%23fff'/%3E%3Cg id='Group_5' data-name='Group 5' transform='translate(83.211)'%3E%3Cg id='Group_10' data-name='Group 10'%3E%3Cg id='Ellipse_8' data-name='Ellipse 8' transform='translate(18.197 0) rotate(60)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.579' cy='8.689' rx='20.579' ry='8.689' stroke='none'/%3E%3Cellipse cx='20.579' cy='8.689' rx='19.279' ry='7.389' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_9' data-name='Ellipse 9' transform='translate(-0.211 13.587)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.5' cy='8.5' rx='20.5' ry='8.5' stroke='none'/%3E%3Cellipse cx='20.5' cy='8.5' rx='19.2' ry='7.2' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_10' data-name='Ellipse 10' transform='translate(38.776 8.689) rotate(120)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.579' cy='8.689' rx='20.579' ry='8.689' stroke='none'/%3E%3Cellipse cx='20.579' cy='8.689' rx='19.279' ry='7.389' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath id='Path_1' data-name='Path 1' d='M408.4 30.28l-4.563 7.985 4.563 6.274h7.7l4.706-6.844L416.81 30.28Z' transform='translate(-11.246 -2.736)' fill='%2361dafb'/%3E%3Cpath id='Polygon_2' data-name='Polygon 2' d='M26.2 12.227a2.645 2.645 0 0 1 4.523 2.6l-.018.048a2.645 2.645 0 0 0 2.04 3.529l.087.015a2.645 2.645 0 0 1 0 5.216l-.087.015a2.645 2.645 0 0 0-2.04 3.529l.018.048a2.645 2.645 0 0 1-4.523 2.6h0a2.645 2.645 0 0 0-4.089 0h0a2.645 2.645 0 0 1-4.523-2.6l.018-.048a2.645 2.645 0 0 0-2.04-3.529l-.087-.015a2.645 2.645 0 0 1 0-5.216l.087-.015a2.645 2.645 0 0 0 2.04-3.529l-.018-.048a2.645 2.645 0 0 1 4.523-2.6h0a2.645 2.645 0 0 0 4.089 0Z' transform='translate(390.665 4.291) rotate(30)' fill='%2300f2fe'/%3E%3Cpath id='Polygon_3' data-name='Polygon 3' d='M5.689 1.122a1 1 0 0 1 1.621 0l4.544 6.292A1 1 0 0 1 11.044 9H1.956a1 1 0 0 1-.811-1.585Z' transform='translate(407 27.544) rotate(90)' fill='%23010326'/%3E%3C/g%3E%3C/svg%3E");
+  margin-right: 1rem;
+	/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='179.712' height='60.577' viewBox='0 0 179.712 60.577'%3E%3Cg id='Group_12' data-name='Group 12' transform='translate(-301.998 -4.291)'%3E%3Cg id='Group_11' data-name='Group 11' transform='translate(297 12.413)'%3E%3Cpath id='Path_11' data-name='Path 11' d='M2 0V-19.17h8.478a5.441 5.441 0 0 1 2.444.554 6.321 6.321 0 0 1 1.931 1.458 6.88 6.88 0 0 1 1.269 2.052 6.172 6.172 0 0 1 .459 2.308 6.375 6.375 0 0 1-.932 3.389 5.347 5.347 0 0 1-2.524 2.2L17.5 0H13.311L9.4-6.426H5.724V0ZM5.724-9.693H10.4a1.97 1.97 0 0 0 .958-.243 2.452 2.452 0 0 0 .77-.661 3.3 3.3 0 0 0 .513-.985 3.818 3.818 0 0 0 .189-1.215 3.462 3.462 0 0 0-.216-1.242 3.241 3.241 0 0 0-.58-.985 2.625 2.625 0 0 0-.837-.648 2.173 2.173 0 0 0-.959-.23H5.724ZM25.758.27A7.851 7.851 0 0 1 22.68-.311 7.058 7.058 0 0 1 20.331-1.89a7.011 7.011 0 0 1-1.5-2.322 7.452 7.452 0 0 1-.526-2.781 7.88 7.88 0 0 1 .513-2.849A6.952 6.952 0 0 1 20.3-12.191 7.09 7.09 0 0 1 22.667-13.8a7.864 7.864 0 0 1 3.119-.594 7.669 7.669 0 0 1 3.092.594A7.109 7.109 0 0 1 31.2-12.2a6.77 6.77 0 0 1 1.458 2.322 7.733 7.733 0 0 1 .5 2.754q0 .351-.014.675a2.746 2.746 0 0 1-.067.54H22.14a4.2 4.2 0 0 0 .405 1.485 3.67 3.67 0 0 0 .837 1.107 3.645 3.645 0 0 0 1.161.7 3.813 3.813 0 0 0 1.35.243A4.171 4.171 0 0 0 27.932-2.9a2.787 2.787 0 0 0 1.309-1.391l3.1.864a6.312 6.312 0 0 1-2.5 2.66A7.741 7.741 0 0 1 25.758.27ZM29.43-8.262a3.761 3.761 0 0 0-1.175-2.551 3.59 3.59 0 0 0-2.524-.958 3.6 3.6 0 0 0-1.364.256 3.558 3.558 0 0 0-1.12.716 3.708 3.708 0 0 0-.8 1.107 3.9 3.9 0 0 0-.364 1.431ZM39.231.27a5.367 5.367 0 0 1-1.917-.338 4.608 4.608 0 0 1-1.539-.945A4.4 4.4 0 0 1 34.763-2.43 4.293 4.293 0 0 1 34.4-4.212a3.926 3.926 0 0 1 .445-1.85 4.241 4.241 0 0 1 1.242-1.444 6.157 6.157 0 0 1 1.9-.931 8.3 8.3 0 0 1 2.43-.338 10.471 10.471 0 0 1 1.85.162 7.533 7.533 0 0 1 1.606.459v-.81a2.836 2.836 0 0 0-.8-2.16 3.312 3.312 0 0 0-2.362-.756 6.257 6.257 0 0 0-2.214.405 10.282 10.282 0 0 0-2.214 1.188l-1.107-2.3a10.445 10.445 0 0 1 5.886-1.809 6.9 6.9 0 0 1 4.738 1.5 5.491 5.491 0 0 1 1.688 4.334v4.4a1.271 1.271 0 0 0 .2.81.887.887 0 0 0 .662.27V0a8.055 8.055 0 0 1-1.593.189A2.412 2.412 0 0 1 45.185-.27 1.973 1.973 0 0 1 44.5-1.485l-.081-.783a6.261 6.261 0 0 1-2.3 1.89A6.59 6.59 0 0 1 39.231.27Zm1.026-2.646A4.713 4.713 0 0 0 42-2.7a3.161 3.161 0 0 0 1.282-.864 1.3 1.3 0 0 0 .594-1.026V-6.21a8.858 8.858 0 0 0-1.4-.392 7.562 7.562 0 0 0-1.458-.148 3.865 3.865 0 0 0-2.3.635 1.905 1.905 0 0 0-.891 1.606 1.933 1.933 0 0 0 .7 1.526A2.548 2.548 0 0 0 40.257-2.376Zm9.72-4.7a7.7 7.7 0 0 1 .513-2.808A6.838 6.838 0 0 1 51.975-12.2 7.228 7.228 0 0 1 54.324-13.8a7.766 7.766 0 0 1 3.1-.594 7.441 7.441 0 0 1 3.955 1 6.381 6.381 0 0 1 2.444 2.619l-3.537 1.08a3.177 3.177 0 0 0-1.215-1.2 3.4 3.4 0 0 0-1.674-.418A3.446 3.446 0 0 0 55.944-11a3.584 3.584 0 0 0-1.174.864A4 4 0 0 0 53.986-8.8 5.044 5.044 0 0 0 53.7-7.074 4.837 4.837 0 0 0 54-5.346 4.356 4.356 0 0 0 54.8-4a3.5 3.5 0 0 0 1.174.878 3.384 3.384 0 0 0 1.431.31 3.47 3.47 0 0 0 1.8-.486 2.733 2.733 0 0 0 1.147-1.188L63.882-3.4a5.946 5.946 0 0 1-2.4 2.646A7.552 7.552 0 0 1 57.456.27a7.766 7.766 0 0 1-3.1-.594A7.123 7.123 0 0 1 52-1.931 7.128 7.128 0 0 1 50.5-4.28 7.556 7.556 0 0 1 49.977-7.074Zm24.6 6.345a16.145 16.145 0 0 1-1.782.648 7.486 7.486 0 0 1-2.214.324A5.139 5.139 0 0 1 69.161.054 3.117 3.117 0 0 1 68-.553a2.967 2.967 0 0 1-.8-1.08 3.909 3.909 0 0 1-.3-1.607v-8.127H65.043v-2.781h1.863v-4.59h3.618v4.59h2.97v2.781h-2.97v6.912a1.286 1.286 0 0 0 .392 1.067 1.494 1.494 0 0 0 .959.31 3.328 3.328 0 0 0 1.107-.189q.54-.189.864-.324ZM128.655 0V-19.17h8.127a5.441 5.441 0 0 1 2.443.554 6.321 6.321 0 0 1 1.93 1.458 6.88 6.88 0 0 1 1.269 2.052 6.172 6.172 0 0 1 .459 2.308 6.653 6.653 0 0 1-.432 2.363A6.56 6.56 0 0 1 141.237-8.4a5.969 5.969 0 0 1-1.89 1.431 5.468 5.468 0 0 1-2.43.54h-4.536V0Zm3.726-9.693h4.32a2.134 2.134 0 0 0 1.714-.837A3.463 3.463 0 0 0 139.1-12.8a3.735 3.735 0 0 0-.216-1.309 3.181 3.181 0 0 0-.567-.985 2.256 2.256 0 0 0-.824-.608 2.413 2.413 0 0 0-.958-.2h-4.158ZM145.1-19.71h3.618V-4.536a1.786 1.786 0 0 0 .378 1.215 1.358 1.358 0 0 0 1.08.432A2.71 2.71 0 0 0 150.89-3a4.84 4.84 0 0 0 .743-.27l.486 2.754a7 7 0 0 1-1.7.54 9.28 9.28 0 0 1-1.755.189 3.623 3.623 0 0 1-2.633-.9 3.429 3.429 0 0 1-.932-2.579ZM157.545.27a5.367 5.367 0 0 1-1.917-.338 4.608 4.608 0 0 1-1.539-.945 4.4 4.4 0 0 1-1.012-1.418 4.293 4.293 0 0 1-.365-1.782 3.926 3.926 0 0 1 .445-1.85A4.241 4.241 0 0 1 154.4-7.506a6.157 6.157 0 0 1 1.9-.931 8.3 8.3 0 0 1 2.43-.338 10.47 10.47 0 0 1 1.85.162 7.533 7.533 0 0 1 1.606.459v-.81a2.836 2.836 0 0 0-.8-2.16 3.312 3.312 0 0 0-2.363-.756 6.257 6.257 0 0 0-2.214.405 10.281 10.281 0 0 0-2.214 1.188l-1.107-2.3a10.445 10.445 0 0 1 5.886-1.809 6.9 6.9 0 0 1 4.739 1.5 5.491 5.491 0 0 1 1.688 4.334v4.4a1.271 1.271 0 0 0 .2.81.887.887 0 0 0 .661.27V0a8.055 8.055 0 0 1-1.593.189A2.412 2.412 0 0 1 163.5-.27a1.973 1.973 0 0 1-.689-1.215l-.081-.783a6.262 6.262 0 0 1-2.295 1.89A6.59 6.59 0 0 1 157.545.27Zm1.026-2.646a4.713 4.713 0 0 0 1.742-.324 3.161 3.161 0 0 0 1.283-.864 1.3 1.3 0 0 0 .594-1.026V-6.21a8.858 8.858 0 0 0-1.4-.392 7.562 7.562 0 0 0-1.458-.148 3.865 3.865 0 0 0-2.295.635 1.905 1.905 0 0 0-.891 1.606 1.933 1.933 0 0 0 .7 1.526A2.548 2.548 0 0 0 158.571-2.376Zm10.557 5.13a6.98 6.98 0 0 0 .891.2 4.855 4.855 0 0 0 .729.068 1.548 1.548 0 0 0 .648-.135 1.388 1.388 0 0 0 .54-.473 4.613 4.613 0 0 0 .486-.931q.243-.594.513-1.485l-5.589-14.148h3.726l3.834 11.016 3.4-11.016h3.4L175.77 2.808a5.066 5.066 0 0 1-1.755 2.43 4.935 4.935 0 0 1-3.078.945 5.852 5.852 0 0 1-.878-.068 5.611 5.611 0 0 1-.932-.229Z' transform='translate(3 33.587)' fill='%23fff'/%3E%3Cg id='Group_5' data-name='Group 5' transform='translate(83.211)'%3E%3Cg id='Group_10' data-name='Group 10'%3E%3Cg id='Ellipse_8' data-name='Ellipse 8' transform='translate(18.197 0) rotate(60)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.579' cy='8.689' rx='20.579' ry='8.689' stroke='none'/%3E%3Cellipse cx='20.579' cy='8.689' rx='19.279' ry='7.389' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_9' data-name='Ellipse 9' transform='translate(-0.211 13.587)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.5' cy='8.5' rx='20.5' ry='8.5' stroke='none'/%3E%3Cellipse cx='20.5' cy='8.5' rx='19.2' ry='7.2' fill='none'/%3E%3C/g%3E%3Cg id='Ellipse_10' data-name='Ellipse 10' transform='translate(38.776 8.689) rotate(120)' fill='none' stroke='%2300f2fe' stroke-linecap='round' stroke-width='2.6'%3E%3Cellipse cx='20.579' cy='8.689' rx='20.579' ry='8.689' stroke='none'/%3E%3Cellipse cx='20.579' cy='8.689' rx='19.279' ry='7.389' fill='none'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cpath id='Path_1' data-name='Path 1' d='M408.4 30.28l-4.563 7.985 4.563 6.274h7.7l4.706-6.844L416.81 30.28Z' transform='translate(-11.246 -2.736)' fill='%2361dafb'/%3E%3Cpath id='Polygon_2' data-name='Polygon 2' d='M26.2 12.227a2.645 2.645 0 0 1 4.523 2.6l-.018.048a2.645 2.645 0 0 0 2.04 3.529l.087.015a2.645 2.645 0 0 1 0 5.216l-.087.015a2.645 2.645 0 0 0-2.04 3.529l.018.048a2.645 2.645 0 0 1-4.523 2.6h0a2.645 2.645 0 0 0-4.089 0h0a2.645 2.645 0 0 1-4.523-2.6l.018-.048a2.645 2.645 0 0 0-2.04-3.529l-.087-.015a2.645 2.645 0 0 1 0-5.216l.087-.015a2.645 2.645 0 0 0 2.04-3.529l-.018-.048a2.645 2.645 0 0 1 4.523-2.6h0a2.645 2.645 0 0 0 4.089 0Z' transform='translate(390.665 4.291) rotate(30)' fill='%2300f2fe'/%3E%3Cpath id='Polygon_3' data-name='Polygon 3' d='M5.689 1.122a1 1 0 0 1 1.621 0l4.544 6.292A1 1 0 0 1 11.044 9H1.956a1 1 0 0 1-.811-1.585Z' transform='translate(407 27.544) rotate(90)' fill='%23010326'/%3E%3C/g%3E%3C/svg%3E"); */
+  background-image: url("../../images/img-logo.svg");
   background-size: contain;
+  background-repeat: no-repeat;
   transition: all 0.16s ease-in-out;
 }
 
 @media screen and (max-width: 768px) {
   .app-logo {
-    width: 132px;
-    height: 45px;
+    width: 58px;
+    height: 64px;
+    margin-right: 0;
+    background-image: url("../../images/img-logo-sm.svg");
+    background-position: center center;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .app-logo {
+    width: 50px;
+    height: 64px;
+    margin-right: 0;
+    background-position: center center;
   }
 }
 
@@ -46,8 +67,8 @@
   color: #fff;
   margin-left: 1rem;
   display: block;
-  width: 24px;
-  height: 24px;
+  width: var(--navbar-icon-size-rg);
+  height: var(--navbar-icon-size-rg);
 }
 
 .header-links > li > a.app-header-btn {
@@ -65,6 +86,8 @@
 }
 
 .header-links > li > a .icon {
+  width: var(--navbar-icon-size-rg);
+  height: var(--navbar-icon-size-rg);
   fill: var(--color-neutral-40);
 }
 
@@ -73,6 +96,8 @@
 }
 
 .header-links > li > a.app-header-btn .icon {
+  width: var(--navbar-icon-size-sm);
+  height: var(--navbar-icon-size-sm);
   fill: var(--color-neutral-20);
 }
 
diff --git a/src/images/img-logo-sm.svg b/src/images/img-logo-sm.svg
new file mode 100644
index 000000000..e53c72f3f
--- /dev/null
+++ b/src/images/img-logo-sm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="57.439" height="55.344" viewBox="0 0 57.439 55.344"><g transform="translate(-358.623 -4.291)"><path d="M18.8,2.6A33.121,33.121,0,0,0,6.518,4.72C3.826,5.857,2.6,7.185,2.6,7.938s1.226,2.081,3.918,3.218A33.121,33.121,0,0,0,18.8,13.277a33.122,33.122,0,0,0,12.283-2.12C33.777,10.02,35,8.691,35,7.938S33.777,5.857,31.085,4.72A33.122,33.122,0,0,0,18.8,2.6m0-2.6C29.185,0,37.6,3.554,37.6,7.938s-8.418,7.938-18.8,7.938S0,12.323,0,7.938,8.418,0,18.8,0Z" transform="translate(384.908 11.711) rotate(60)" fill="#00f2fe"/><path d="M18.729,2.6A33.565,33.565,0,0,0,6.482,4.676C3.815,5.782,2.6,7.053,2.6,7.766s1.215,1.984,3.882,3.09a33.565,33.565,0,0,0,12.248,2.076,33.565,33.565,0,0,0,12.248-2.076c2.667-1.106,3.882-2.377,3.882-3.09s-1.215-1.984-3.882-3.09A33.565,33.565,0,0,0,18.729,2.6m0-2.6C29.073,0,37.459,3.477,37.459,7.766s-8.385,7.766-18.729,7.766S0,12.055,0,7.766,8.385,0,18.729,0Z" transform="translate(368.09 24.125)" fill="#00f2fe"/><path d="M18.8,2.6A33.121,33.121,0,0,0,6.518,4.72C3.826,5.857,2.6,7.185,2.6,7.938s1.226,2.081,3.918,3.218A33.121,33.121,0,0,0,18.8,13.277a33.122,33.122,0,0,0,12.283-2.12C33.777,10.02,35,8.691,35,7.938S33.777,5.857,31.085,4.72A33.122,33.122,0,0,0,18.8,2.6m0-2.6C29.185,0,37.6,3.554,37.6,7.938s-8.418,7.938-18.8,7.938S0,12.323,0,7.938,8.418,0,18.8,0Z" transform="translate(403.709 19.649) rotate(120)" fill="#00f2fe"/><path d="M23.939,11.171a2.416,2.416,0,0,1,4.133,2.375l-.016.044a2.416,2.416,0,0,0,1.863,3.225l.08.013a2.416,2.416,0,0,1,0,4.765l-.08.013a2.416,2.416,0,0,0-1.863,3.225l.016.044a2.416,2.416,0,0,1-4.133,2.375h0a2.416,2.416,0,0,0-3.736,0h0a2.416,2.416,0,0,1-4.133-2.375l.016-.044a2.416,2.416,0,0,0-1.863-3.225l-.08-.013a2.416,2.416,0,0,1,0-4.765l.08-.013a2.416,2.416,0,0,0,1.863-3.225l-.016-.044A2.416,2.416,0,0,1,20.2,11.171h0a2.416,2.416,0,0,0,3.736,0Z" transform="translate(377.833 4.291) rotate(30)" fill="#00f2fe"/><path d="M5.128,1.122a1,1,0,0,1,1.621,0l3.983,5.515a1,1,0,0,1-.811,1.585H1.956a1,1,0,0,1-.811-1.585Z" transform="translate(392.758 25.535) rotate(90)" fill="#010326"/></g></svg>
\ No newline at end of file
diff --git a/src/images/img-logo.svg b/src/images/img-logo.svg
new file mode 100644
index 000000000..7c7b590aa
--- /dev/null
+++ b/src/images/img-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="153.088" height="55.344" viewBox="0 0 153.088 55.344"><g transform="translate(-301.702 -4.291)"><path d="M1.7,0V-16.33H8.924a4.635,4.635,0,0,1,2.082.472,5.385,5.385,0,0,1,1.645,1.242,5.861,5.861,0,0,1,1.081,1.748,5.258,5.258,0,0,1,.391,1.967,5.43,5.43,0,0,1-.793,2.887,4.555,4.555,0,0,1-2.151,1.874L14.9,0H11.339L8-5.474H4.876V0ZM4.876-8.257H8.855a1.679,1.679,0,0,0,.816-.207,2.088,2.088,0,0,0,.656-.563,2.809,2.809,0,0,0,.437-.84,3.253,3.253,0,0,0,.161-1.035,2.949,2.949,0,0,0-.184-1.058,2.761,2.761,0,0,0-.495-.839,2.236,2.236,0,0,0-.713-.552,1.851,1.851,0,0,0-.817-.2H4.876ZM21.942.23A6.688,6.688,0,0,1,19.32-.265a6.012,6.012,0,0,1-2-1.345,5.973,5.973,0,0,1-1.277-1.978,6.348,6.348,0,0,1-.448-2.369,6.713,6.713,0,0,1,.437-2.426,5.922,5.922,0,0,1,1.265-2,6.039,6.039,0,0,1,2.013-1.369,6.7,6.7,0,0,1,2.656-.506,6.533,6.533,0,0,1,2.633.506A6.056,6.056,0,0,1,26.576-10.4a5.767,5.767,0,0,1,1.242,1.978,6.587,6.587,0,0,1,.425,2.346q0,.3-.011.575a2.339,2.339,0,0,1-.058.46H18.86A3.576,3.576,0,0,0,19.2-3.772a3.126,3.126,0,0,0,.713.943,3.105,3.105,0,0,0,.989.6,3.249,3.249,0,0,0,1.15.207,3.553,3.553,0,0,0,1.736-.448,2.374,2.374,0,0,0,1.116-1.185l2.645.736A5.377,5.377,0,0,1,25.427-.656,6.594,6.594,0,0,1,21.942.23ZM25.07-7.038a3.2,3.2,0,0,0-1-2.174,3.058,3.058,0,0,0-2.151-.816,3.07,3.07,0,0,0-1.161.219,3.031,3.031,0,0,0-.955.61,3.159,3.159,0,0,0-.678.943,3.323,3.323,0,0,0-.311,1.219ZM33.419.23a4.572,4.572,0,0,1-1.633-.288,3.925,3.925,0,0,1-1.311-.805,3.747,3.747,0,0,1-.863-1.208,3.657,3.657,0,0,1-.31-1.518,3.344,3.344,0,0,1,.379-1.576A3.613,3.613,0,0,1,30.74-6.394a5.245,5.245,0,0,1,1.621-.793,7.073,7.073,0,0,1,2.07-.288,8.919,8.919,0,0,1,1.576.138,6.417,6.417,0,0,1,1.368.391v-.69a2.416,2.416,0,0,0-.678-1.84,2.821,2.821,0,0,0-2.013-.644,5.33,5.33,0,0,0-1.886.345,8.758,8.758,0,0,0-1.886,1.012l-.943-1.955a8.9,8.9,0,0,1,5.014-1.541,5.875,5.875,0,0,1,4.036,1.277,4.677,4.677,0,0,1,1.438,3.692v3.749a1.083,1.083,0,0,0,.173.69.756.756,0,0,0,.563.23V0a6.862,6.862,0,0,1-1.357.161A2.055,2.055,0,0,1,38.491-.23,1.681,1.681,0,0,1,37.9-1.265l-.069-.667A5.334,5.334,0,0,1,35.88-.322,5.614,5.614,0,0,1,33.419.23Zm.874-2.254A4.015,4.015,0,0,0,35.777-2.3a2.693,2.693,0,0,0,1.093-.736,1.107,1.107,0,0,0,.506-.874V-5.29a7.546,7.546,0,0,0-1.2-.334,6.442,6.442,0,0,0-1.242-.126,3.293,3.293,0,0,0-1.955.54,1.623,1.623,0,0,0-.759,1.368,1.647,1.647,0,0,0,.6,1.3A2.171,2.171,0,0,0,34.293-2.024Zm8.28-4a6.558,6.558,0,0,1,.437-2.392A5.825,5.825,0,0,1,44.275-10.4a6.157,6.157,0,0,1,2-1.357,6.615,6.615,0,0,1,2.645-.506,6.339,6.339,0,0,1,3.369.851,5.435,5.435,0,0,1,2.082,2.231l-3.013.92a2.707,2.707,0,0,0-1.035-1.023A2.9,2.9,0,0,0,48.9-9.637a2.936,2.936,0,0,0-1.242.265,3.053,3.053,0,0,0-1,.736A3.409,3.409,0,0,0,45.989-7.5a4.3,4.3,0,0,0-.242,1.472A4.12,4.12,0,0,0,46-4.554a3.71,3.71,0,0,0,.679,1.15,2.981,2.981,0,0,0,1,.747,2.883,2.883,0,0,0,1.219.265,2.956,2.956,0,0,0,1.529-.414,2.328,2.328,0,0,0,.978-1.012l3.013.92A5.065,5.065,0,0,1,52.371-.644,6.433,6.433,0,0,1,48.944.23,6.615,6.615,0,0,1,46.3-.276a6.068,6.068,0,0,1-2-1.369,6.072,6.072,0,0,1-1.277-2A6.437,6.437,0,0,1,42.573-6.026ZM63.526-.621a13.754,13.754,0,0,1-1.518.552,6.377,6.377,0,0,1-1.886.276A4.378,4.378,0,0,1,58.915.046a2.655,2.655,0,0,1-.989-.518,2.528,2.528,0,0,1-.679-.92,3.33,3.33,0,0,1-.253-1.369V-9.683H55.407v-2.369h1.587v-3.91h3.082v3.91h2.53v2.369h-2.53V-3.8a1.1,1.1,0,0,0,.333.908,1.273,1.273,0,0,0,.817.264,2.835,2.835,0,0,0,.943-.161q.46-.161.736-.276ZM109.595,0V-16.33h6.923a4.635,4.635,0,0,1,2.081.472,5.385,5.385,0,0,1,1.645,1.242,5.861,5.861,0,0,1,1.081,1.748,5.258,5.258,0,0,1,.391,1.967,5.667,5.667,0,0,1-.368,2.012,5.588,5.588,0,0,1-1.035,1.737,5.085,5.085,0,0,1-1.61,1.219,4.658,4.658,0,0,1-2.07.46h-3.864V0Zm3.174-8.257h3.68a1.818,1.818,0,0,0,1.461-.713A2.95,2.95,0,0,0,118.5-10.9a3.182,3.182,0,0,0-.184-1.116,2.71,2.71,0,0,0-.483-.839,1.922,1.922,0,0,0-.7-.518,2.055,2.055,0,0,0-.816-.172h-3.542ZM123.6-16.79h3.082V-3.864a1.521,1.521,0,0,0,.322,1.035,1.157,1.157,0,0,0,.92.368,2.309,2.309,0,0,0,.609-.092,4.123,4.123,0,0,0,.633-.23l.414,2.346a5.96,5.96,0,0,1-1.449.46,7.905,7.905,0,0,1-1.5.161A3.086,3.086,0,0,1,124.4-.587a2.921,2.921,0,0,1-.794-2.2ZM134.2.23a4.572,4.572,0,0,1-1.633-.288,3.925,3.925,0,0,1-1.311-.805A3.747,3.747,0,0,1,130.4-2.07a3.657,3.657,0,0,1-.311-1.518,3.344,3.344,0,0,1,.38-1.576,3.613,3.613,0,0,1,1.058-1.231,5.245,5.245,0,0,1,1.622-.793,7.073,7.073,0,0,1,2.07-.288,8.919,8.919,0,0,1,1.576.138,6.417,6.417,0,0,1,1.368.391v-.69a2.416,2.416,0,0,0-.678-1.84,2.821,2.821,0,0,0-2.012-.644,5.33,5.33,0,0,0-1.886.345A8.758,8.758,0,0,0,131.7-8.763l-.943-1.955a8.9,8.9,0,0,1,5.014-1.541,5.875,5.875,0,0,1,4.036,1.277,4.677,4.677,0,0,1,1.438,3.692v3.749a1.083,1.083,0,0,0,.173.69.756.756,0,0,0,.564.23V0a6.862,6.862,0,0,1-1.357.161,2.055,2.055,0,0,1-1.345-.391,1.681,1.681,0,0,1-.587-1.035l-.069-.667a5.334,5.334,0,0,1-1.955,1.61A5.614,5.614,0,0,1,134.2.23Zm.874-2.254a4.015,4.015,0,0,0,1.484-.276,2.693,2.693,0,0,0,1.092-.736,1.107,1.107,0,0,0,.506-.874V-5.29a7.546,7.546,0,0,0-1.2-.334,6.442,6.442,0,0,0-1.242-.126,3.293,3.293,0,0,0-1.955.54,1.623,1.623,0,0,0-.759,1.368,1.647,1.647,0,0,0,.6,1.3A2.171,2.171,0,0,0,135.079-2.024Zm8.993,4.37a5.946,5.946,0,0,0,.759.172,4.136,4.136,0,0,0,.621.057A1.318,1.318,0,0,0,146,2.461a1.182,1.182,0,0,0,.46-.4,3.929,3.929,0,0,0,.414-.793q.207-.506.437-1.265l-4.761-12.052h3.174l3.266,9.384,2.9-9.384h2.9L149.73,2.392a4.315,4.315,0,0,1-1.495,2.07,4.2,4.2,0,0,1-2.622.805,4.985,4.985,0,0,1-.748-.057,4.781,4.781,0,0,1-.793-.2Z" transform="translate(300 41.557)" fill="#fff"/><path d="M18.8,2.6A33.121,33.121,0,0,0,6.518,4.72C3.826,5.857,2.6,7.185,2.6,7.938s1.226,2.081,3.918,3.218A33.121,33.121,0,0,0,18.8,13.277a33.122,33.122,0,0,0,12.283-2.12C33.777,10.02,35,8.691,35,7.938S33.777,5.857,31.085,4.72A33.122,33.122,0,0,0,18.8,2.6m0-2.6C29.185,0,37.6,3.554,37.6,7.938s-8.418,7.938-18.8,7.938S0,12.323,0,7.938,8.418,0,18.8,0Z" transform="translate(384.908 11.711) rotate(60)" fill="#00f2fe"/><path d="M18.729,2.6A33.565,33.565,0,0,0,6.482,4.676C3.815,5.782,2.6,7.053,2.6,7.766s1.215,1.984,3.882,3.09a33.565,33.565,0,0,0,12.248,2.076,33.565,33.565,0,0,0,12.248-2.076c2.667-1.106,3.882-2.377,3.882-3.09s-1.215-1.984-3.882-3.09A33.565,33.565,0,0,0,18.729,2.6m0-2.6C29.073,0,37.459,3.477,37.459,7.766s-8.385,7.766-18.729,7.766S0,12.055,0,7.766,8.385,0,18.729,0Z" transform="translate(368.09 24.125)" fill="#00f2fe"/><path d="M18.8,2.6A33.121,33.121,0,0,0,6.518,4.72C3.826,5.857,2.6,7.185,2.6,7.938s1.226,2.081,3.918,3.218A33.121,33.121,0,0,0,18.8,13.277a33.122,33.122,0,0,0,12.283-2.12C33.777,10.02,35,8.691,35,7.938S33.777,5.857,31.085,4.72A33.122,33.122,0,0,0,18.8,2.6m0-2.6C29.185,0,37.6,3.554,37.6,7.938s-8.418,7.938-18.8,7.938S0,12.323,0,7.938,8.418,0,18.8,0Z" transform="translate(403.709 19.649) rotate(120)" fill="#00f2fe"/><path d="M23.939,11.171a2.416,2.416,0,0,1,4.133,2.375l-.016.044a2.416,2.416,0,0,0,1.863,3.225l.08.013a2.416,2.416,0,0,1,0,4.765l-.08.013a2.416,2.416,0,0,0-1.863,3.225l.016.044a2.416,2.416,0,0,1-4.133,2.375h0a2.416,2.416,0,0,0-3.736,0h0a2.416,2.416,0,0,1-4.133-2.375l.016-.044a2.416,2.416,0,0,0-1.863-3.225l-.08-.013a2.416,2.416,0,0,1,0-4.765l.08-.013a2.416,2.416,0,0,0,1.863-3.225l-.016-.044A2.416,2.416,0,0,1,20.2,11.171h0a2.416,2.416,0,0,0,3.736,0Z" transform="translate(377.833 4.291) rotate(30)" fill="#00f2fe"/><path d="M5.128,1.122a1,1,0,0,1,1.621,0l3.983,5.515a1,1,0,0,1-.811,1.585H1.956a1,1,0,0,1-.811-1.585Z" transform="translate(392.758 25.535) rotate(90)" fill="#010326"/></g></svg>
\ No newline at end of file