[feat] Better color choices

Signed-off-by: LoriaLawrenceZ <[email protected]>
TeamXFive · Oct 24, 2024 · 59d3633 · 59d3633
1 parent bf3ec2b
commit 59d3633
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 23 deletions.
diff --git a/src/components/KnowledgeDocument/KnowledgeDocument.jsx b/src/components/KnowledgeDocument/KnowledgeDocument.jsx
@@ -1,12 +1,16 @@
 /* eslint-disable react/prop-types */
 import '../../style/KnowledgeDocument/KnowledgeDocument.css'
 
-function KnowledgeDocument({ file, index }) {
+function KnowledgeDocument({ file, index, originFile }) {
     return (
         <li className={`knowledge-documents-item`} key={index}>
-            <span>{file.filename}</span>
-
-            <button>X</button>            
+            <span>{(originFile === "local") ? file.name : file.filename}</span>
+
+            {(originFile === "local") ? (
+                <span>Uploading...</span>
+            ) : (
+                <button>X</button>            
+            )}
         </li>
     );
 }

diff --git a/src/pages/Knowledge/Knowledge.jsx b/src/pages/Knowledge/Knowledge.jsx
@@ -154,7 +154,7 @@ function Knowledge() {
                 <section className={`knowledge-left-side`}>
                     <div className={`knowledge-upload-container`}>
                         <div className={`knowledge-upload-description`}>
-                            <h1>CREATE DOCUMENTS</h1>
+                            <h1>UPLOAD DOCUMENTS</h1>
 
                             <span>You can create a new document by uploading an existing document</span>
                         </div>
@@ -182,28 +182,52 @@ function Knowledge() {
                     </div>
 
                     <div className={`knowledge-documents-uploading`}>
-                        <span>These are the files that are currently being uploaded.</span>
+                        <div className={`knowledge-documents-uploading-header`}>
+                            <span>These are the files that are currently being uploaded.</span>
+                        </div>
 
                         <ul className={`knowledge-documents-uploading-list`}>
+                            {filesUploading.length === 0 && (
+                                <span
+                                    style={{
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        height: '100%',
+                                    }}
+                                >No files are being uploaded.</span>
+                            )}
+
                             {filesUploading.map((file, index) => (
-                                <KnowledgeDocument file={file} key={index}/>
+                                <KnowledgeDocument file={file} key={index} originFile={"local"}/>
                             ))}
                         </ul>
                     </div>
                 </section>
 
                 <section className={`knowledge-documents-container`}>
                     <div className={`knowledge-documents-container-header`}>
-                        <h1>Stored Documents</h1>
+                        <h1>STORED DOCUMENTS</h1>
+
+                        <span>These are the files you have uploaded.</span>
                     </div>
 
                     <div className={`knowledge-documents-container-content`}>
-                        <div className={`knowledge-documents-retrieved`}>
-                            <span>These are the files you have uploaded.</span>
+                    <div className={`knowledge-documents-retrieved`}>
+                            {files.length === 0 && (
+                                <span
+                                    style={{
+                                        display: 'flex',
+                                        justifyContent: 'center',
+                                        alignItems: 'center',
+                                        height: '100%',
+                                    }}
+                                >No files uploaded yet.</span>
+                            )}
 
                             <ul className={`knowledge-documents-retrieved-list`}>
                                 {files.map((file, index) => (
-                                    <KnowledgeDocument file={file} key={index} />
+                                    <KnowledgeDocument file={file} key={index} originFile={"openai"} />
                                 ))}
                             </ul>
                         </div>

diff --git a/src/style/Knowledge/Knowledge.css b/src/style/Knowledge/Knowledge.css
@@ -1,15 +1,14 @@
 .knowledge-container {
     height: calc(100vh - 62px - 5vh);
     max-width: 1820px;
-    width: 95%;
+    width: 98%;
     display: flex;
     align-items: center;
-    justify-content: flex-start;
+    justify-content: space-around;
     margin-top: 2.5vh;
     border-radius: .5em;
     overflow: hidden;
     color: var(--white-gray);
-    background-color: var(--darker-gray);
     padding: 0 15px;
 }
 .knowledge-container ul {
@@ -25,6 +24,8 @@
 .knowledge-left-side {
     height: 100%;
     width: 35%;
+    background-color: var(--darker-gray);
+    border-radius: .5em;
 }
 .knowledge-upload-container {
     height: 40%;
@@ -35,13 +36,18 @@
     justify-content: flex-start;
 }
 .knowledge-upload-description {
-    min-height: 70px;
-    height: 40%;
-    width: 100%;
+    min-height: calc(70px - 2.5%);
+    height: calc(40% - 2.5%);
+    width: 97.5%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    margin-bottom: 2.5%;
+    border-bottom: solid 1px var(--dex-red);
+}
+.knowledge-upload-description span {
+    text-align: center;
 }
 .knowledge-upload-drag-drop-container {
     height: 65%;
@@ -65,8 +71,8 @@
     transition: all 0.3s;
 }
 .dragging {
-    border-color: var(--medium-green);
-    color: var(--medium-green);
+    border-color: var(--dex-red);
+    color: var(--dex-red);
     background-color: var(--black-gray);
 }
 
@@ -79,25 +85,55 @@
     justify-content: flex-start;
     margin-top: 2.5%;
 }
-
+.knowledge-documents-uploading-header {
+    min-height: 30px;
+    height: 15%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.knowledge-documents-uploading-header span {
+    height: 100%;
+    width: 95%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    border-bottom: solid 1px var(--dark-gray);
+}
+.knowledge-documents-uploading-list {
+    height: 85%;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    overflow-y: auto;
+    scrollbar-color: var(--black-gray) var(--darker-gray);
+    scrollbar-width: thin;
+}
 
 .knowledge-documents-container {
     height: 100%;
-    width: 65%;
+    width: 62.5%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
+    background-color: var(--darker-gray);
+    border-radius: .5em;
 }
 
 .knowledge-documents-container-header {
     min-height: 70px;
     height: 10%;
-    width: 100%;
+    width: 97.5%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    border-bottom: solid 1px var(--dark-gray);
+    border-bottom: solid 1px var(--dex-red);
 }
 
 .knowledge-documents-container-content {
@@ -114,4 +150,8 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+}
+
+.knowledge-documents-retrieved-list {
+    width: 95%;
 }
diff --git a/src/style/index.css b/src/style/index.css
@@ -33,6 +33,9 @@
   /*Colors*/
   --medium-red: #ff0000;
   --medium-green: #00ff00;
+  --medium-magenta: #ff00ff;
+  --dex-red: #ff003b;
+  --dex-purple: #6f42c1;
 
   /*-| When alpha is necessary |-*/
   /*Black n White*/