From 72734e7d30bd597efd8137da73657f6c9549eed1 Mon Sep 17 00:00:00 2001
From: shashank-kavli <121170732+shashank-kavli@users.noreply.github.com>
Date: Tue, 26 Sep 2023 22:08:41 +0530
Subject: [PATCH 1/4] [UX] Theme Toggle icon Fix

Signed-off-by: shashank-kavli <121170732+shashank-kavli@users.noreply.github.com>
---
 site/src/components/Navigation/index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
index e1ca0b4..93d5e06 100644
--- a/site/src/components/Navigation/index.js
+++ b/site/src/components/Navigation/index.js
@@ -33,6 +33,7 @@ function Navigation({theme, toggleTheme, showSignUpButton}) {
           {/* <a href="https://playground.meshery.io" className="login-btn" role="button">Login</a> */}
         </div>
         <div className="dropdown_btn" onClick={handleNavOpen}>
+          <Toggle theme={theme} toggleTheme={toggleTheme} />
           {openNav ? 
             (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="hamburger-icon">
               <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -43,9 +44,9 @@ function Navigation({theme, toggleTheme, showSignUpButton}) {
         </div>        
       </nav>
       <div className={openNav ? "dropdown_menu_opened" : "dropdown_menu_closed"}>
-            <div className="mode-btn">
+            {/* <div className="mode-btn">
               <Toggle theme={theme} toggleTheme={toggleTheme} />
-            </div>
+            </div> */}
             <div className="action-btns">
               <a href="#signup-form" className="signup-btn" role="button">Sign Up</a>
               {/* <a href="https://demo.meshery.io" className="login-btn" role="button">Login</a> */}
@@ -55,4 +56,4 @@ function Navigation({theme, toggleTheme, showSignUpButton}) {
   )
 }
 
-export default Navigation
\ No newline at end of file
+export default Navigation

From f242a096dbb2731c1451f8716401bd7bb282e981 Mon Sep 17 00:00:00 2001
From: shashank-kavli <121170732+shashank-kavli@users.noreply.github.com>
Date: Tue, 26 Sep 2023 22:11:22 +0530
Subject: [PATCH 2/4] [UX] Theme Toggle icon Fix

Signed-off-by: shashank-kavli <121170732+shashank-kavli@users.noreply.github.com>
---
 site/src/components/Navigation/Navigation.styles.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/site/src/components/Navigation/Navigation.styles.js b/site/src/components/Navigation/Navigation.styles.js
index f59f02c..ea65414 100644
--- a/site/src/components/Navigation/Navigation.styles.js
+++ b/site/src/components/Navigation/Navigation.styles.js
@@ -177,9 +177,9 @@ export const Header = styled.header`
         padding: 10px 0;
         display: flex;
         justify-content: center;
-        align-items:center;
-        border-radius:20px;
-        border: 1px solid gray
+        align-items:center
+        // border-radius:20px;
+        // border: 1px solid gray
     }
     .btn-container{
         display: none;
@@ -213,4 +213,4 @@ export const Header = styled.header`
   }
 `
 
-export default Header;
\ No newline at end of file
+export default Header;

From d49ea2b793c4bdcd83388e60c4a052e769b8f832 Mon Sep 17 00:00:00 2001
From: shashank-kavli <121170732+shashank-kavli@users.noreply.github.com>
Date: Thu, 28 Sep 2023 22:38:20 +0530
Subject: [PATCH 3/4] [UI] Theme Toggle

Signed-off-by: shashank-kavli <121170732+shashank-kavli@users.noreply.github.com>
---
 site/src/components/Navigation/index.js | 30 ++++++++++++-------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
index 93d5e06..bc78277 100644
--- a/site/src/components/Navigation/index.js
+++ b/site/src/components/Navigation/index.js
@@ -27,26 +27,24 @@ function Navigation({theme, toggleTheme, showSignUpButton}) {
     <Header>       
       <nav className={scroll ? "scrolled" : ""}>
         <img className="logo" src={Logo} alt="Meshery Logo" />
-        <div className="btn-container">
+        <div className="container">
           <Toggle theme={theme} toggleTheme={toggleTheme} />
-          {showSignUpButton && <a href="#signup-form" className="signup-btn" role="button">Sign Up</a>}
-          {/* <a href="https://playground.meshery.io" className="login-btn" role="button">Login</a> */}
-        </div>
-        <div className="dropdown_btn" onClick={handleNavOpen}>
-          <Toggle theme={theme} toggleTheme={toggleTheme} />
-          {openNav ? 
-            (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="hamburger-icon">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>)
-            : (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="hamburger-icon" >
-                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
-              </svg>)}
+          <div className="btn-container">
+            {showSignUpButton && <a href="#signup-form" className="signup-btn" role="button">Sign Up</a>}
+            {/* <a href="https://playground.meshery.io" className="login-btn" role="button">Login</a> */}
+          </div>
+          <div className="dropdown_btn" onClick={handleNavOpen}>
+            {openNav ? 
+              (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="hamburger-icon">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>)
+              : (<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="hamburger-icon" >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 9h16.5m-16.5 6.75h16.5" />
+                </svg>)}
+          </div>
         </div>        
       </nav>
       <div className={openNav ? "dropdown_menu_opened" : "dropdown_menu_closed"}>
-            {/* <div className="mode-btn">
-              <Toggle theme={theme} toggleTheme={toggleTheme} />
-            </div> */}
             <div className="action-btns">
               <a href="#signup-form" className="signup-btn" role="button">Sign Up</a>
               {/* <a href="https://demo.meshery.io" className="login-btn" role="button">Login</a> */}

From 4707f59ee0ee70e34730e96335cb0cc0747b4b06 Mon Sep 17 00:00:00 2001
From: shashank-kavli <121170732+shashank-kavli@users.noreply.github.com>
Date: Thu, 28 Sep 2023 22:39:05 +0530
Subject: [PATCH 4/4] [UI] Theme Toggle

Signed-off-by: shashank-kavli <121170732+shashank-kavli@users.noreply.github.com>
---
 site/src/components/Navigation/Navigation.styles.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/site/src/components/Navigation/Navigation.styles.js b/site/src/components/Navigation/Navigation.styles.js
index ea65414..c0acade 100644
--- a/site/src/components/Navigation/Navigation.styles.js
+++ b/site/src/components/Navigation/Navigation.styles.js
@@ -45,6 +45,10 @@ export const Header = styled.header`
     max-width: 400px;
     height: auto;
   }
+  .container{
+    display: flex;
+    align-items: center;
+  }
   .themeToggle {
     margin: auto .5rem;
     padding: auto .5rem;
@@ -178,8 +182,6 @@ export const Header = styled.header`
         display: flex;
         justify-content: center;
         align-items:center
-        // border-radius:20px;
-        // border: 1px solid gray
     }
     .btn-container{
         display: none;
@@ -201,9 +203,6 @@ export const Header = styled.header`
         box-shadow: rgba(0, 179, 159, 0.2) 0 20px 20px -2px;
         padding: 20px 0px;
     }
-    .mode-btn{
-      width:95%;
-    }
     .action-btns{
         display: flex;
         width: 95%;