From ee6c26cf2a2a60fcf8a5682dd671bc32277bd30b Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Mon, 15 May 2023 11:51:13 -0300
Subject: [PATCH] Fixed examples wrapping and dark mode classes, edited
 ReactFlow attribution

---
 .../src/components/codeAreaComponent/index.tsx        |  2 +-
 src/frontend/src/components/promptComponent/index.tsx |  2 +-
 .../src/components/textAreaComponent/index.tsx        |  2 +-
 .../src/modals/importModal/buttonBox/index.tsx        |  4 ++--
 src/frontend/src/pages/FlowPage/index.tsx             |  2 ++
 src/frontend/tailwind.config.js                       | 11 +++++++++++
 6 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx
index 2086b467c..2da5323e8 100644
--- a/src/frontend/src/components/codeAreaComponent/index.tsx
+++ b/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>
diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 71ad501c9..842e5e7d8 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/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>
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index 17afe304e..3737e02f0 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/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>
diff --git a/src/frontend/src/modals/importModal/buttonBox/index.tsx b/src/frontend/src/modals/importModal/buttonBox/index.tsx
index 51e091e3a..5e3038d8a 100644
--- a/src/frontend/src/modals/importModal/buttonBox/index.tsx
+++ b/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
 							)}
diff --git a/src/frontend/src/pages/FlowPage/index.tsx b/src/frontend/src/pages/FlowPage/index.tsx
index dcc7aacc6..8f94ff599 100644
--- a/src/frontend/src/pages/FlowPage/index.tsx
+++ b/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">
diff --git a/src/frontend/tailwind.config.js b/src/frontend/tailwind.config.js
index 7bb93d514..9776a8595 100644
--- a/src/frontend/tailwind.config.js
+++ b/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'),