eclipse-tractusx · matbmoser · Mar 10, 2025 · Mar 6, 2025 · Mar 6, 2025 · Mar 6, 2025
diff --git a/ichub-frontend/index.html b/ichub-frontend/index.html
@@ -25,9 +25,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="/logo_tractus-x-min.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Industry Core Hub - Eclipse Tractus-X</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/ichub-frontend/public/eclipse-tractus-x-logo.png b/ichub-frontend/public/eclipse-tractus-x-logo.png
diff --git a/ichub-frontend/public/main-bg-new.png b/ichub-frontend/public/main-bg-new.png
diff --git a/ichub-frontend/src/App.css b/ichub-frontend/src/App.css
@@ -25,6 +25,19 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  --brand-dark: #000;
+  --brand-orange: #faa023;
+  --brand-text: #f8f9fa;
+  --brand-secondary-text: #d3d3d3;
+  --brand-shadow: #ffffff80;
+}
+body{
+  font-family: "Manrope", sans-serif!important;
+}
+
+/****** Colors ******/
+.bg-brand-dark {
+  background-color: var(--brand-dark);
 }
 
 /****** General Styling ******/
@@ -153,7 +166,6 @@
 .text-left { text-align: left; }
 .text-right { text-align: right; }
 
-
 /* Wrapper for sidebar and content area */
 .pageWrapper {
   display: flex;
@@ -164,14 +176,27 @@
 .sidebarArea {
   width: 250px;
   padding: 20px;
-  background-color: #f4f4f4;
+  background-color: var(--brand-dark);
+  border-right: 3px outset var(--brand-shadow);
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
 }
+.sidebarArea a, .sidebarArea svg, .sidebarArea span {
+  color: #fff!important;
+}
+.sidebarArea .cx-menu a:hover {
+  color: var(--brand-dark);
+  font-weight: bold;
+}
+.sidebarArea .cx-menu .cx-menu a {
+  color: var(--brand-secondary-text)!important;
+  word-wrap: break-word;
+}
 
 /* Content area styling */
 .contentArea {
   flex-grow: 1;
   padding: 20px;
+  background-image: url('/main-bg-new.png') !important;
 }
 
 /* Mobile responsiveness: stack layout vertically */
@@ -194,6 +219,59 @@
   margin-right: auto;
 }
 
+.productDetail, .cx-card__decision--item .cx-card__decision--button {
+  background: #1e1e1e !important;
+  border-radius: unset!important;
+  border: none!important;
+  box-shadow: 0 0 10px var(--brand-shadow);
+}
+
+.cx-card__decision *, 
+.productDetail  * {
+  color: var(--brand-text)!important;
+}
+.productDetail .MuiChip-root span{
+  color: var(--brand-dark)!important;
+}
+
+.productDetail .cx-dropdown-menu button {
+  background-color: var(--brand-dark);
+  color: var(--brand-text);
+  border: 1px solid white;
+}
+
+.productDetail .cx-dropdown-menu button:hover {
+  background-color: var(--brand-dark);
+  color: var(--brand-text);
+  border: 1px solid white;
+}
+
+.productDetail .cx-dropdown-menu .dropdown-buttons {
+  background-color: var(--brand-dark);
+}
+
+div[role="presentation"] > div.MuiPaper-root.MuiPopover-paper.MuiMenu-paper {
+  background-color: var(--brand-dark);
+  box-shadow: 0 0 10px var(--brand-shadow)
+}
+
+div[role="presentation"] > div.MuiPaper-root.MuiPopover-paper.MuiMenu-paper button {
+  background-color: var(--brand-orange);
+  color: var(--brand-dark);
+  font-weight: 600;
+}
+div[role="presentation"] > div.MuiPaper-root.MuiPopover-paper.MuiMenu-paper button:hover {
+  box-shadow: 0px 0px 5px 1px rgba(255,255,255,1);
+}
+
+/* List view cards */
+.cx-card__decision--button .cx-card__decision--chip span {
+  color: var(--brand-dark)!important;
+}
+.cx-card__decision--button:hover {
+  box-shadow: 0 0 15px var(--brand-orange)!important;
+}
+
 .grid-70-30{
   display: grid;
   grid-template-columns: 70% 30%;
@@ -207,3 +285,46 @@
 .share-dropdown-btn {
   margin: 5px 0!important;
 }
+
+/* Navigation bar */
+.cx-main-navigation__wrapper {
+  background-image: url('/main-bg-new.png') !important;
+  border-bottom: 2px solid white;
+}
+
+.cx-navigation-item a {
+  color: var(--brand-text);
+}
+.cx-main-navigation nav.cx-navigation a {
+  color: var(--brand-text);
+  font-weight: 900;
+  font-size: 25px!important;
+  font-family: 'Manrope';
+  padding-top: 0px!important;
+  cursor: default;
+}
+
+.cx-main-navigation__children-bottom button {
+  background-color: var(--brand-dark);
+  color: var(--brand-text);
+  border: 1px solid white;
+}
+.cx-main-navigation__children-bottom button:hover {
+  color: var(--brand-text);
+  font-weight: bold;
+  background-color: var(--brand-dark);
+  box-shadow: 0 0 15px var(--brand-orange)!important;
+}
+
+.navbar-user-dropdown .MuiPaper-root {
+  margin-top: 20px;
+}
+.navbar-user-dropdown .MuiPaper-root *{
+  color: #fff!important;
+}
+.navbar-user-dropdown .MuiPaper-root hr{
+  border-color: rgba(255, 255, 255, 0.486);
+}
+.navbar-user-dropdown .MuiPaper-root li:hover{
+  color: var(--brand-orange)!important;
+}
diff --git a/ichub-frontend/src/components/Header.tsx b/ichub-frontend/src/components/Header.tsx
@@ -20,53 +20,82 @@
  * SPDX-License-Identifier: Apache-2.0
 ********************************************************************************/
 
-import { MainNavigation, Button } from '@catena-x/portal-shared-components';
+import { useState } from 'react';
+import { MainNavigation, Button, IconButton } from '@catena-x/portal-shared-components';
+import PersonIcon from '@mui/icons-material/Person';
+import { Menu, MenuItem, Typography, Divider, ListItemIcon } from '@mui/material';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import SettingsIcon from '@mui/icons-material/Settings';
+import LogoutIcon from '@mui/icons-material/Logout';
 
 const Header = () => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
   return (
     <MainNavigation
       items={[
-        {
-          href: '/',
-          title: 'Link 1',
-        },
-        {
-          href: '/',
-          title: 'Link 2',
-        },
-        {
-          href: '/',
-          title: 'Link 3',
-        },
-        {
-          href: '/',
-          title: 'Link 4',
-        },
+        { href: '/', title: 'Industry Core Hub' },
       ]}
     >
       <a href="/">
         <img
-          src="@/assets/IndustryCoreHubLogo.png"
-          alt="Logo"
-          style={{
-            display: 'inline-block',
-            height: '40px',
-            width: '170px',
-          }}
+          src="/eclipse-tractus-x-logo.png"
+          alt="Eclipse Tractus-X logo"
+          style={{ display: 'inline-block', height: '40px', width: '170px' }}
         />
       </a>
       <div>
-        <Button color="secondary" size="small" variant="contained"
-          sx={{
-            backgroundColor: 'white',
-            marginRight: '16px',
-          }}
+        <IconButton aria-label="user-menu" onClick={handleMenuOpen}>
+          <PersonIcon />
+        </IconButton>
+        <Menu
+          anchorEl={anchorEl}
+          open={open}
+          onClose={handleMenuClose}
+          className='navbar-user-dropdown'
         >
-          Help
-        </Button>
+          {/* Encabezado con nombre y email */}
+          <Typography variant="subtitle1" sx={{ padding: '8px 16px 0px 16px', fontWeight: 'bold' }}>
+            Mathias Brunkow Moser
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ padding: '0 16px 8px', fontStyle: 'italic' }}>
+            CX-Operator
+          </Typography>
+          <Divider />
+
+          {/* Opciones del menú */}
+          <MenuItem onClick={handleMenuClose}>
+            <ListItemIcon>
+              <AccountCircleIcon fontSize="small" />
+            </ListItemIcon>
+            Profile
+          </MenuItem>
+          <MenuItem onClick={handleMenuClose}>
+            <ListItemIcon>
+              <SettingsIcon fontSize="small" />
+            </ListItemIcon>
+            Settings
+          </MenuItem>
+          <Divider />
+          <MenuItem onClick={handleMenuClose}>
+            <ListItemIcon>
+              <LogoutIcon fontSize="small" />
+            </ListItemIcon>
+            Logout
+          </MenuItem>
+        </Menu>
       </div>
     </MainNavigation>
   );
 };
 
-export default Header;
+export default Header;
diff --git a/ichub-frontend/src/components/JsonViewerDialog.tsx b/ichub-frontend/src/components/JsonViewerDialog.tsx
@@ -0,0 +1,69 @@
+/********************************************************************************
+ * Eclipse Tractus-X - Industry Core Hub Frontend
+ *
+ * Copyright (c) 2025 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. See the
+ * License for the specific language govern in permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+********************************************************************************/
+
+import { useState } from 'react';
+import { Button, Dialog, DialogHeader, DialogContent, Icon } from '@catena-x/portal-shared-components';
+
+import { JsonViewerDialogProps } from '../types/jsonViewer';
+
+const JsonViewerDialog = ({ open, onClose, carJsonData }: JsonViewerDialogProps) => {
+    const [copied, setCopied] = useState(false);
+    const title = carJsonData?.Name ? `${carJsonData.Name} JSON data` : "DCM JSON Data";
+    const description = carJsonData?.Description ? `${carJsonData.Description}` : "";
+
+    const handleCopy = () => {
+        var json_string = JSON.stringify(carJsonData, null, 2);
+        navigator.clipboard.writeText(json_string)
+          .then(() => {
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2000);
+          })
+          .catch((error) => {
+            console.error("Failed to copy text: ", error);
+          });
+      };
+
+    return (
+        <Dialog open={open} maxWidth="xl">
+            <DialogHeader intro={description} title={title} />
+            <DialogContent>
+                <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', background: '#f4f4f4', padding: '0 10px', borderRadius: '5px', textAlign: 'right' }}>
+                    <span className='mr-3'>{copied ? "JSON copied ✅" : ""}</span>
+                    <Button variant="text" onClick={handleCopy} size='small'>
+                        <Icon fontSize="16" iconName="ContentCopy" />
+                    </Button>
+                </pre>
+                <pre style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', background: '#f4f4f4', padding: '0 10px 5px 10px', borderRadius: '5px' }}>
+                    {JSON.stringify(carJsonData, null, 2)}
+                </pre>
+            </DialogContent>
+            <div className="mx-auto my-4 text-center">
+                <Button variant="outlined" onClick={onClose} size='small'>
+                    <Icon fontSize="16" iconName="Close" />
+                    Close
+                </Button>
+            </div>
+        </Dialog>
+    )
+}
+
+export default JsonViewerDialog