adding smaller yaml button

Author: Hubert-Szczepanski-SAP

src/components/Graphs/CustomNode.module.css

@@ -27,5 +27,21 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 120px;
+  max-width: 180px;
+}
+
+.nodeType {
+  font-size: 12px;
+  color: #888;
+  margin-top: 2px;
+}
+
+.yamlButtonWrapper {
+  margin-left: 0px;
+  display: flex;
+  align-items: center;
+}
+
+.statusIcon {
+  margin-right: 6px;
 }

src/components/Graphs/CustomNode.tsx

@@ -11,16 +11,18 @@ const CustomNode: React.FC<CustomNodeProps> = ({ data }) => (
     <Handle type="target" position={Position.Top} style={{ visibility: 'hidden' }} />
     <Handle type="source" position={Position.Bottom} style={{ visibility: 'hidden' }} />
     <div className={styles.nodeContent}>
-      <StatusIcon status={data.status} />
+      <div className={styles.statusIcon}>
+        <StatusIcon status={data.status} />
+      </div>
       <div className={styles.nodeTextContainer}>
         <div className={styles.nodeLabel} title={data.label}>
           {data.label}
         </div>
-        {data.type && <div>{data.type}</div>}
+        {data.type && <div className={styles.nodeType}>{data.type}</div>}
       </div>
     </div>
     <div className={styles.yamlButtonWrapper}>
-      <YamlViewButton resourceObject={data.item} />
+      <YamlViewButton resourceObject={data.item} smallerIcon={true} />
     </div>
   </div>
 );

src/components/Yaml/YamlViewButton.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@ui5/webcomponents-react';
+import { Button, Icon } from '@ui5/webcomponents-react';
 import { FC, useMemo, useState } from 'react';
 import styles from './YamlViewer.module.css';
 import { useTranslation } from 'react-i18next';
@@ -10,9 +10,10 @@ import { YamlViewDialog } from './YamlViewDialog.tsx';
 
 export type YamlViewButtonProps = {
   resourceObject: unknown;
+  smallerIcon?: boolean;
 };
 
-export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject }) => {
+export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject, smallerIcon }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { t } = useTranslation();
   const resource = resourceObject as Resource;
@@ -33,15 +34,15 @@ export const YamlViewButton: FC<YamlViewButtonProps> = ({ resourceObject }) => {
       />
 
       <Button
-        className={styles.button}
+        className={smallerIcon ? styles.smallerIconButton : styles.button}
         design={'Transparent'}
         aria-label={t('buttons.viewResource')}
         title={t('buttons.viewResource')}
         onClick={() => {
           setIsOpen(true);
         }}
       >
-        <YamlIcon />
+        {smallerIcon ? <Icon name="document" className={styles.smallIcon} /> : <YamlIcon />}
       </Button>
     </span>
   );

src/components/Yaml/YamlViewer.module.css

@@ -9,6 +9,17 @@
   z-index: 1;
 }
 
+.smallIcon {
+  color: #004CA3;
+}
+
+.smallerIconButton {
+  width: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .button {
   width: 4rem;
   display: flex;