App fixed

indigoai-us · Nov 8, 2023 · 506f509 · 506f509
1 parent a2bf92a
commit 506f509
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 75 deletions.
diff --git a/assets/images/IndigoLogoHorizontal2.png b/assets/images/IndigoLogoHorizontal2.png
diff --git a/src/components/job/Message.tsx b/src/components/job/Message.tsx
@@ -101,15 +101,15 @@ const Message = (props: MessageProps) => {
   return (
     <div
       key={index}
-      className={messageType === "user" && loading ? 'usermessagewaiting' : (messageType === "initial" || messageType === "api" || messageType === 'existing_api') ? "apimessage" : "usermessage"}
+      className={messageType === "user" && loading ? 'usermessagewaiting' : (messageType === "initial" || messageType === "api" || messageType === 'existing_api') ? "apimessage pt-4 pb-10 px-6 text-white text-sm" : "usermessage py-4 px-6 bg-gray-900 text-gray-500 italic text-sm"}
     >
       {messageType === 'user' ? <img src = {usericon} alt = "User" width = "30" height = "30" className = "usericon" />
       : <img src = {indigosmall} alt = "AI" width = "30" height = "30" className = "boticon" />}
       <div className = "markdownanswer">
         {/* <ReactMarkdown
           remarkPlugins={[remarkMath, rehypeKatex]}
         > */}
-        <code style={{color: '#e0e0e0'}}>
+        <code>
           {output}
         </code>
         {
@@ -121,7 +121,7 @@ const Message = (props: MessageProps) => {
         {/* </ReactMarkdown>   */}
       </div>
       {messageType !== 'user' &&
-        <div style={{position: 'absolute', bottom: 10, right: 10, display: 'flex', color: '#6D5ACF'}} title="Copy">
+        <div style={{position: 'absolute', bottom: 25, right: 25, display: 'flex', color: '#6D5ACF'}} title="Copy">
           <div onClick={copyToClipboard}>
             <svg viewBox='0 0 115.77 122.88' className="svgiconbutton" xmlns='http://www.w3.org/2000/svg'>
               <path d="M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02 v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02 c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1 c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7 h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02 c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65 v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02 h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02 v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z"/>

diff --git a/src/components/job/RunJob.tsx b/src/components/job/RunJob.tsx
@@ -4,6 +4,8 @@ import Message from './Message';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { useNavigate } from 'react-router-dom';
+import IconBack from '../../renderer/icons/IconBack';
+import IconHistory from '../../renderer/icons/IconHistory';
 
 export const runtime = 'edge';
 
@@ -151,14 +153,14 @@ export default function RunJob({id}: any) {
   }
 
   return (
-    <main className="main">
+    <main className="main flex flex-col h-screen overflow-x-hidden">
       {/* <button onClick={getJob}>
         Get Initial Job
       </button> */}
       {/* <div className = {styles.originalPrompt}>
         {originalPrompt}
       </div> */}
-      <div className="cloud">
+      <div className="cloud flex-grow overflow-y-auto">
         <div
           ref={messageListRef}
           className="messagelist"
@@ -179,22 +181,22 @@ export default function RunJob({id}: any) {
 
       <div className="center">
 
-        <div className="cloudform">
-          <form onSubmit={onSubmit}>
+        <div className="cloudform px-4">
+          <form className='relative' onSubmit={onSubmit}>
             <input
               disabled = {loading}
               autoFocus = {false}
               type="text"
               placeholder="Ask..."
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              className="textarea"
+              className="textarea w-full py-3 px-4 bg-gray-800  rounded-lg"
               ref = {textAreaRef}
             />
             <button
               type = "submit"
               disabled = {loading}
-              className="generatebutton"
+              className=" top-4 right-4 absolute"
             >
               <svg
                 viewBox='0 0 20 20'
@@ -209,7 +211,16 @@ export default function RunJob({id}: any) {
         <ToastContainer />
 
       </div>
-
+      <div className="flex flex-row">
+      <div onClick={() => navigate(-1)} className='flex flex-row flex-grow text-white cursor-pointer my-4 mx-8 w-auto'>
+          <span className='mr-2 w-auto'><IconBack/></span>
+          <span className='text-gray-400 text-xs'>Back</span>
+      </div>
+      <div onClick={() => navigate('/history')} className='flex flex-row text-white cursor-pointer my-4 mx-8 w-auto'>
+          <span className='mr-2 w-auto'><IconHistory/></span>
+          <span className='text-gray-400 text-xs'>History</span>
+      </div>
+      </div>
     </main>
   );
 }
diff --git a/src/components/job/styles.css b/src/components/job/styles.css
@@ -1,8 +1,4 @@
 .main {
-  display: block;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
   /* padding: 0rem;
   position: absolute;
   top: 0;
@@ -17,19 +13,12 @@
 }
 
 .cloudform {
-  position: relative;
+  /* position: relative; */
 }
 
 .textarea {
   position: relative;
   resize: none;
-  font-size: 14px;
-  padding: 1rem 2rem 1rem 2rem;
-  width: 100vw;
-  border: rgba(72,71,80,0.8) 1px solid;
-  border-radius: 0.5rem;
-  background: #161617;
-  color: #DCD9F1;
   outline: none;
 }
 
@@ -43,8 +32,6 @@
 
 .generatebutton {
   position: absolute;
-  top: 0.87rem;
-  right: 1rem;
   color: rgb(165, 162, 162);
   background: none;
   padding: 0.3rem;
@@ -114,12 +101,9 @@
 }
 
 .usermessage {
-  background: #333341;
-  padding: 1.5rem;
-  color: #DCD9F1;
-  font-size: 14px;
   position: relative;
   margin-bottom: 10px;
+  box-shadow: rgba(150, 129, 175, 0.1) 0px 0px 200px 0px inset;
 }
 
 .usermessagewaiting{
@@ -144,12 +128,10 @@
 }
 
 .apimessage {
-  background: #1c1b21;
-  padding: 1.5rem;
-  color: #DCD9F1;
+
   animation: fadein 0.5s;
-  font-size: 14px;
   position: relative;
+  box-shadow: rgba(66, 54, 77, 0.1) 0px 0px 400px 0px inset;
 }
 
 @keyframes fadein {
@@ -163,7 +145,6 @@
 
 .markdownanswer {
   line-height: 1.75;
-  font-size: 15px;
 }
 
 .markdownanswer a:hover {
@@ -172,14 +153,12 @@
 
 .markdownanswer a {
   color: #16bed7;
-  font-weight: 500;
 }
 
 .markdownanswer code {
-  color: #15cb19;
-  font-weight:300;
   white-space: pre-wrap !important;
   font-family: 'Inter', sans-serif;
+  font-weight: 300;
 
 }
 
@@ -199,43 +178,12 @@
 
 
 .center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 59px;
-  position: absolute;
-  bottom: 10px;
-  /* padding: 2rem 0; */
-  flex-direction: column;
 }
 
 .cloud {
-  width: 100vw;
-  height: 100vh;
-  padding-bottom: 69px;
-  display: flex;
-  flex: 1;
-  justify-content: center;
-}
-
-.cloud ::-webkit-scrollbar {
-  /* width: 6px; */
-  width: 9px;
-  background: transparent; /* make scrollbar transparent */
-  height: 5px;
-  z-index: 100;
 }
 
-.cloud ::-webkit-scrollbar-thumb {
-  background: #343245;
-  /* border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px; */
-  border-radius: 6px;
-}
 
-.cloud ::-webkit-scrollbar-thumb:hover {
-  background: #3e3b55;
-}
 
 .originalPrompt {
   width: 100vw;

diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 body {
   position: relative;

diff --git a/src/renderer/Commands.tsx b/src/renderer/Commands.tsx
@@ -9,6 +9,7 @@ import IconArrowDown from './icons/IconArrowDown';
 import IconArrowUp from './icons/IconArrowUp';
 import IconEsc from './icons/IconEsc';
 import { useAppStore } from '../../lib/store';
+import IconHistory from './icons/IconHistory';
 
 const Commands = () => {
   const [baseCommands, setBaseCommands] = useState([]);
@@ -203,8 +204,9 @@ const Commands = () => {
         <button className='text-gray-300' type="button" onClick={handleLogout}>
           Logout
         </button>
-        <button className='text-gray-300' type="button" onClick={() => navigate('/history')}>
-          History
+        <button className='text-gray-300 flex flex-row align-middle' type="button" onClick={() => navigate('/history')}>
+        <span className='mr-1'><IconHistory/></span>
+          <span className='text-gray-400'>History</span>
         </button>
       </div>
     </div>

diff --git a/src/renderer/Job.tsx b/src/renderer/Job.tsx
@@ -10,8 +10,8 @@ const Job = () => {
   useEffect(() => {
     window.electron.ipcRenderer.send(
       'window-resize',
-      900, // height
-      600  // width
+      1080, // height
+      768  // width
     )
   }, []);
 
@@ -39,9 +39,7 @@ const Job = () => {
           id={location.state.id}
         />
       }
-      <div onClick={() => navigate(-1)} className='fixed bottom-1 left-2 text-white-500 cursor-pointer'>
-        Go Back
-      </div>
+
     </div>
   );
 };

diff --git a/src/renderer/Login.tsx b/src/renderer/Login.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Auth, API } from 'aws-amplify';
 import { useNavigate } from 'react-router-dom';
 import logo from '../../assets/images/IndigoLogoHorizontal2.png';
@@ -10,6 +10,13 @@ const Login = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [loginIncorrect, setLoginIncorrect] = useState(false);
   const navigate = useNavigate();
+  const emailRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (emailRef.current) {
+      emailRef.current.focus();
+    }
+  }, []);
 
   useEffect(() => {
     window.electron.ipcRenderer.send(
@@ -50,6 +57,7 @@ const Login = () => {
             Email
           </label>
           <input
+            ref={emailRef}
             type="email"
             name="email"
             onChange={(e) => setEmail(e.target.value)}

diff --git a/src/renderer/icons/IconHistory.tsx b/src/renderer/icons/IconHistory.tsx
@@ -0,0 +1,13 @@
+export default function IconHistory({
+  size = 18, // or any default size of your choice
+  className = "",
+  colorClass = "text-gray-300"
+}) {
+  return (
+    <div className={colorClass}>
+      <svg className="fill-current" width={size} height={size} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10 2.5C7.39502 2.5 5.09521 3.8208 3.75 5.83984V3.75H2.5V8.125H6.875V6.875H4.60938C5.68848 5.01221 7.68555 3.75 10 3.75C13.4595 3.75 16.25 6.54053 16.25 10C16.25 13.4595 13.4595 16.25 10 16.25C6.54053 16.25 3.75 13.4595 3.75 10H2.5C2.5 14.1357 5.86426 17.5 10 17.5C14.1357 17.5 17.5 14.1357 17.5 10C17.5 5.86426 14.1357 2.5 10 2.5ZM9.375 5V10.625H13.75V9.375H10.625V5H9.375Z"/>
+      </svg>
+    </div>
+  )
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,6 +3,7 @@ module.exports = {
   theme: {
     extend: {
     colors: {
+      white: "#F7F1F9",
       gray:{
         500: '#A4A4C2',
         600: '#61617E',