Merge pull request #66 from FlowTestAI/ui-logo-v1

jsajal · web-flow · commit b054b290078b · 2024-04-09T09:37:11.000-07:00
Adding multiple logos for version 1
diff --git a/src/assets/icons/Flow-GPU-text-no-background-white.png b/src/assets/icons/Flow-GPU-text-no-background-white.png
diff --git a/src/assets/icons/Flow-GPU-text-no-background.png b/src/assets/icons/Flow-GPU-text-no-background.png
diff --git a/src/assets/icons/flow-GPU.png b/src/assets/icons/flow-GPU.png
diff --git a/src/assets/icons/flow-triangle.png b/src/assets/icons/flow-triangle.png
diff --git a/src/components/atoms/Tabs.js b/src/components/atoms/Tabs.js
@@ -48,7 +48,7 @@ const Tabs = () => {
   };
 
   return (
-    <div role='tablist' className='overflow-scroll tabs tabs-lg'>
+    <div role='tablist' className='tabs tabs-lg'>
       {tabs
         // tabs belonging to one collection will be shown at a time
         //.reverse()
diff --git a/src/components/atoms/common/HomeLoadingScreen.js b/src/components/atoms/common/HomeLoadingScreen.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import FlowGPU from 'assets/icons/Flow-GPU-text-no-background-white.png';
+
+const HomeLoadingScreen = (props) => {
+  return (
+    <div className='absolute z-50 flex flex-col items-center justify-center w-full h-full p-4 bg-slate-500/50'>
+      <div className='h-72 w-72'>
+        <img src={FlowGPU} alt='FlowTestAI app logo' />
+      </div>
+      <span className='mt-8 text-white loading loading-spinner loading-lg'></span>
+    </div>
+  );
+};
+
+HomeLoadingScreen.propTypes = {};
+
+export default HomeLoadingScreen;
diff --git a/src/components/molecules/headers/MainHeader.js b/src/components/molecules/headers/MainHeader.js
@@ -1,12 +1,20 @@
 import React from 'react';
 import ThemeController from 'components/atoms/ThemeController';
 import AppLogo from 'components/atoms/Logo';
+import FlowGPU from 'assets/icons/flow-GPU.png';
+import FlowTriangle from 'assets/icons/flow-triangle.png';
 
 const MainHeader = () => {
   return (
     <header className='flex items-center justify-between px-4 py-2 font-semibold tracking-widest border-b border-neutral-300'>
-      <div className='flex items-center gap-2'>
+      <div className='flex items-center gap-4'>
         <AppLogo styleClasses='w-6 h-6' />
+        <div className='w-6 h-6'>
+          <img src={FlowGPU} alt='FlowTestAI app logo' />
+        </div>
+        <div className='w-6 h-6'>
+          <img src={FlowTriangle} alt='FlowTestAI app logo' />
+        </div>
         <h2>FlowTestAI</h2>
       </div>
       <ThemeController />
diff --git a/src/components/molecules/headers/WorkspaceHeader.js b/src/components/molecules/headers/WorkspaceHeader.js
@@ -15,7 +15,7 @@ const WorkspaceHeader = () => {
 
   return (
     <div className='flex items-center justify-between gap-8 pr-4 border-b border-neutral-300 bg-slate-100'>
-      <div className='flex items-center overflow-scroll'>
+      <div className='flex items-center overflow-x-auto'>
         <Tabs />
         <button className='flex cursor-not-allowed flex-col items-center bg-slate-100 p-3.5 text-center text-slate-400'>
           <Tippy content='Coming Soon!' placement='right'>
diff --git a/src/components/molecules/modals/GenerateFlowTestModal.js b/src/components/molecules/modals/GenerateFlowTestModal.js
@@ -46,7 +46,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
               leaveFrom='opacity-100 scale-100'
               leaveTo='opacity-0 scale-95'
             >
-              <Dialog.Panel className='w-full max-w-md p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl'>
+              <Dialog.Panel className='w-full max-w-2xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl'>
                 <Dialog.Title
                   as='h3'
                   className='pb-4 text-lg font-semibold text-center text-gray-900 border-b border-neutral-300'
@@ -56,7 +56,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                 <div className='mt-6'>
                   <Listbox value={selectedModel} onChange={setSelectedModel}>
                     <div className='relative flex w-full h-full'>
-                      <Listbox.Button className='flex items-center justify-between w-full gap-4 py-4 border rounded cursor-default border-neutral-300'>
+                      <Listbox.Button className='flex items-center justify-between w-full gap-4 px-2 py-4 border rounded cursor-default border-neutral-300'>
                         <div className='pl-2 text-left min-w-32'>{selectedModel ? selectedModel : 'Select model'}</div>
                         <ChevronUpDownIcon className='w-5 h-5' aria-hidden='true' />
                       </Listbox.Button>
@@ -66,7 +66,7 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                         leaveFrom='opacity-100'
                         leaveTo='opacity-0'
                       >
-                        <Listbox.Options className='absolute right-0 z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded shadow-lg top-6 max-h-60 ring-1 ring-black/5'>
+                        <Listbox.Options className='absolute right-0 z-10 w-full py-1 mt-1 overflow-auto text-base bg-white rounded shadow-lg top-12 max-h-60 ring-1 ring-black/5'>
                           {Object.values(GENAI_MODELS).map((modelType) => (
                             <Listbox.Option
                               key={modelType}
@@ -95,10 +95,30 @@ const GenerateFlowTestModal = ({ closeFn = () => null, open = false, collectionI
                       </Transition>
                     </div>
                   </Listbox>
-                  <div className='mt-4'>
+                  {selectedModel === GENAI_MODELS.openai ? (
+                    <div className='flex items-center justify-center w-full h-12 mt-8 text-sm border rounded-md border-neutral-500 text-neutral-500 outline-0 focus:ring-0'>
+                      <label
+                        className='flex items-center w-32 h-full px-4 border-r border-r-neutral-500'
+                        htmlFor='openAIkey'
+                      >
+                        OpenAI Key
+                      </label>
+                      <input
+                        id='openAIkey'
+                        type='text'
+                        className='nodrag nowheel block w-full p-2.5'
+                        name='keyName'
+                        placeholder='Enter your Open AI key'
+                        onChange={(e) => console.log(e.target.value)}
+                      />
+                    </div>
+                  ) : (
+                    ''
+                  )}
+                  <div className='mt-8'>
                     <textarea
                       id='gen-ai-text'
-                      className='block w-full rounded border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
+                      className='block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded min-h-80 bg-gray-50 outline-blue-300 focus:border-blue-100 focus:ring-blue-100'
                       placeholder='Describe your flow step by step'
                       onChange={(event) => setTextareaValue(event.target.value)}
                     />
diff --git a/src/components/molecules/sidebar/content/Collections.js b/src/components/molecules/sidebar/content/Collections.js
@@ -59,7 +59,7 @@ const Collections = ({ collections }) => {
 
   return (
     <div
-      className='h-[87vh] overflow-y-scroll'
+      className='h-[87vh] overflow-y-auto'
       onClick={(event) => {
         const clickFromElementDataSet = event.target.dataset;
         const clickFrom = clickFromElementDataSet?.clickFrom;
diff --git a/src/components/molecules/sidebar/content/Environments.js b/src/components/molecules/sidebar/content/Environments.js
@@ -12,7 +12,7 @@ const Environments = ({ collections }) => {
 
   return (
     <div
-      className='h-[87vh] overflow-y-scroll'
+      className='h-[87vh] overflow-y-auto'
       onClick={(event) => {
         const clickFromElementDataSet = event.target.dataset;
         const clickFrom = clickFromElementDataSet?.clickFrom;
diff --git a/src/components/pages/Home.js b/src/components/pages/Home.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import SplitPane from '../layouts/SplitPane';
 import MainHeader from '../molecules/headers/MainHeader';
 import MainFooter from '../molecules/footers/MainFooter';
@@ -7,10 +7,12 @@ import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import useCommonStore from 'stores/CommonStore';
 import LoadingSpinner from 'components/atoms/common/LoadingSpinner';
+import HomeLoadingScreen from 'components/atoms/common/HomeLoadingScreen';
 
 const Home = () => {
   const showLoader = useCommonStore((state) => state.showLoader);
   registerMainEventHandlers();
+  const [showHomeLoadingScreen, setShowHomeLoadingScreen] = useState(true);
   return (
     <div className='relative flex flex-col h-full'>
       <>
@@ -20,6 +22,10 @@ const Home = () => {
         <ToastContainer position='bottom-left' />
       </>
       {showLoader ? <LoadingSpinner spinnerColor={'text-cyan-950'} /> : ''}
+      {setTimeout(() => {
+        setShowHomeLoadingScreen(false);
+      }, 2000)}
+      {showHomeLoadingScreen ? <HomeLoadingScreen /> : ''}
     </div>
   );
 };
