ok

src/components/Header.js

@@ -20,7 +20,7 @@ const Title = styled.h2`
   font-family: "Poppins", sans-serif;
   font-weight: 500;
   font-style: normal;
-  font-size: 6vw;
+  font-size:${(props) => (props.HeaderSize)};
   color: rgba(88, 55, 50, 1);
 `;
 
@@ -214,6 +214,7 @@ const Child = styled.div`
 
 const Header = ({
   HeaderText,
+  HeaderSize='6vw',
   shopId,
   shopName,
   shopImage,
@@ -300,7 +301,7 @@ const Header = ({
   };
   return (
     <HeaderBar>
-      <Title>
+      <Title HeaderSize={HeaderSize}>
         {shopName == null
           ? HeaderText == null
             ? "kedaimaster"
@@ -309,9 +310,9 @@ const Header = ({
       </Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
-          src={shopImage || "https://static-00.iconduck.com/assets.00/profile-major-icon-1024x1024-9rtgyx30.png"}
+          src={user.username == undefined? shopImage : "https://static-00.iconduck.com/assets.00/profile-major-icon-1024x1024-9rtgyx30.png"}
           alt="Profile"
-          onClick={handleImageClick}
+          onClick={user.username !== undefined?handleImageClick: null}
           animate={showRectangle && animate}
         />
         <ProfileName animate={showRectangle && animate}>
@@ -325,9 +326,6 @@ const Header = ({
                   this is the guest side of {guestSideOfClerk.clerkUsername}
                 </Child>
               )}
-              {user.username === undefined && !guestSideOfClerk && (
-                <Child onClick={goToLogin}>Click to login</Child>
-              )}
               {user.username !== undefined && (
                 <Child onClick={() => setModal("edit_account")}>
                   Ubah profil
@@ -340,22 +338,17 @@ const Header = ({
                 user.username !== undefined &&
                 user.roleId === 1 && (
                   <>
-
-                    {/* <Child onClick={() => setModal("update_stock")}>
-                      update stock
-                    </Child> */}
                     <Child hasChildren>
                       {shopName}
 
-                      <div class="toggle-switch">
-                        <label class="toggle-switch-label" for="toggleSwitch">
-                          Mode edit
-                        </label>
+                      <Child>
+                        Mode edit 
                         <Switch
+                        borderRadius={0}
                           checked={isEditMode}
                           onChange={() => setIsEditMode(!isEditMode)}
                         />
-                      </div>
+                      </Child>
 
                       <Child onClick={() => setModal("welcome_config")}>
                         Halaman sambutan
@@ -401,15 +394,14 @@ const Header = ({
                   <Child hasChildren>
                     {shopName}
 
-                    <div class="toggle-switch">
-                      <label class="toggle-switch-label" for="toggleSwitch">
-                        Mode edit
-                      </label>
-                      <Switch
-                        checked={isEditMode}
-                        onChange={() => setIsEditMode(!isEditMode)}
-                      />
-                    </div>
+                      <Child>
+                        Mode edit&nbsp;
+                        <Switch
+                        borderRadius={0}
+                          checked={isEditMode}
+                          onChange={() => setIsEditMode(!isEditMode)}
+                        />
+                      </Child>
                     <Child onClick={() => setModal("add_material")}>
                       stok
                     </Child>