logout

src/component/Main/Headerc.js

@@ -169,30 +169,94 @@ onClickClassChange = ({ key }) => {
 render() {
   const currentClass = authenticationService.currentClassNameValue;
   this.state.className = currentClass;
-  return (
-    <Header className="app-header">
-      {authenticationService.currentUserValue?.role_id !== 4 ?
-        <div>
 
-          <Dropdown overlay={this.menuClass} trigger={['click']}>
-            <a style={{ color: 'blue' }} className="ant-dropdown-link" onClick={e => e.preventDefault()}>
-              {this.state.className} <DownOutlined />
+  return (
+    <Header
+      className="app-header"
+      style={{
+        display: "flex",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        padding: "0 24px",
+        height: "64px",
+        background: "transparent",
+        borderBottom: "1px solid rgba(0,0,0,0.06)",
+      }}
+    >
+      {authenticationService.currentUserValue?.role_id !== 4 && (
+        <div style={{ marginRight: "auto" }}>
+          <Dropdown overlay={this.menuClass} trigger={["click"]}>
+            <a
+              style={{
+                color: "#0E3997",
+                fontWeight: 500,
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                fontSize: "15px",
+                textDecoration: "none",
+                transition: "opacity 0.2s",
+              }}
+              onClick={(e) => e.preventDefault()}
+              onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.8")}
+              onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
+            >
+              {this.state.className} <DownOutlined style={{ fontSize: "12px" }} />
             </a>
           </Dropdown>
-        </div> : ""}
-      <div>
-
-        <Dropdown overlay={this.menu} trigger={['click']} >
-          <Avatar gap={4} size={34} onClick={e => e.preventDefault()} style={{
-            color: '#0E3997', textAlign: 'right', backgroundColor: 'white', cursor: 'pointer', display: 'grid', placeItems: 'center'
-          }}> {this.state.language_code.toUpperCase()} <DownOutlined />
-          </Avatar>
-        </Dropdown>
         </div>
-      <div>
-        <Button type='primary' size='small' onClick={logout} danger>Logout</Button>
+      )}
+
+      <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+        <Dropdown overlay={this.menu} trigger={["click"]}>
+          <div
+            onClick={(e) => e.preventDefault()}
+            style={{
+              cursor: "pointer",
+              color: "#0E3997",
+              fontWeight: 600,
+              fontSize: "15px",
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              transition: "opacity 0.2s",
+            }}
+            onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.8")}
+            onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
+          >
+            {this.state.language_code.toUpperCase()}{" "}
+            <DownOutlined style={{ fontSize: "12px" }} />
+          </div>
+        </Dropdown>
+
+        <Button
+          type="primary"
+          size="middle"
+          onClick={logout}
+          danger
+          style={{
+            background: "#dc3545",
+            border: "none",
+            borderRadius: "20px",
+            padding: "0 18px",
+            fontWeight: 500,
+            boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
+            transition: "all 0.2s ease-in-out",
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = "#c82333";
+            e.currentTarget.style.transform = "scale(1.03)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "#dc3545";
+            e.currentTarget.style.transform = "scale(1)";
+          }}
+        >
+          Logout
+        </Button>
       </div>
     </Header>
   );
 }
+
 }