Fixed examples wrapping and dark mode classes, edited ReactFlow attribution

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -57,7 +57,7 @@ export default function CodeAreaComponent({
 						);
 					}}
 				>
-					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
 				</button>
 			</div>
 		</div>

src/frontend/src/components/promptComponent/index.tsx

@@ -58,7 +58,7 @@ export default function PromptAreaComponent({
 						);
 					}}
 				>
-					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
 				</button>
 			</div>
 		</div>

src/frontend/src/components/textAreaComponent/index.tsx

@@ -25,7 +25,7 @@ export default function TextAreaComponent({ value, onChange, disabled }:TextArea
             {myValue !== "" ? myValue : 'Text empty'}
         </span>
         <button onClick={()=>{openPopUp(<TextAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600 dark:text-gray-300" />
         </button>
       </div>
     </div>

src/frontend/src/modals/importModal/buttonBox/index.tsx

@@ -92,10 +92,10 @@ export default function ButtonBox({
 								<div className={textColor}>{icon}</div>
 							</div>
 						</div>
-						<div className="mt-auto mb-auto">
+						<div className="w-full mt-auto mb-auto">
 						<h3
 							className={classNames(
-								"font-semibold text-white dark:text-white/80",
+								"w-full font-semibold break-words text-white dark:text-white/80",
 								titleFontSize,
 								marginTop
 							)}

src/frontend/src/pages/FlowPage/index.tsx

@@ -323,6 +323,8 @@ export default function FlowPage({ flow }: { flow: FlowType }) {
 						onDrop={onDrop}
 						onNodesDelete={onDelete}
 						selectNodesOnDrag={false}
+						attributionPosition="top-right"
+						className="theme-attribution"
 					>
 						<Background className="dark:bg-gray-900" />
 						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">

src/frontend/tailwind.config.js

@@ -76,6 +76,17 @@ module.exports = {
           '&::-webkit-scrollbar-thumb:hover': {
             'backgroundColor': '#bbb'
         }
+      },
+      '.theme-attribution .react-flow__attribution':{
+        'borderRadius':'0.2rem',
+        'top':'5px',
+        'right':'5px',
+      },
+      '.dark .theme-attribution .react-flow__attribution':{
+        'backgroundColor': 'rgba(255, 255, 255, 0.2)',
+      },
+      '.dark .theme-attribution .react-flow__attribution a':{
+        'color':'black',
       }
     })
     }),require('@tailwindcss/line-clamp'),require('@tailwindcss/typography'),