From c7030eb0fcf65f16a1fc7dd3faa63553dd01d389 Mon Sep 17 00:00:00 2001
From: Kalki <parth.pathak@science.christuniversity.in>
Date: Mon, 31 Jul 2023 14:28:57 +0530
Subject: [PATCH] ToolkitWorkspace.js refactoring done

---
 .../Content/Toolkits/ToolkitWorkspace.js      | 73 ++++++-------------
 gui/pages/_app.css                            | 30 ++++++++
 2 files changed, 54 insertions(+), 49 deletions(-)

diff --git a/gui/pages/Content/Toolkits/ToolkitWorkspace.js b/gui/pages/Content/Toolkits/ToolkitWorkspace.js
index 048b6b331..d47c483f7 100644
--- a/gui/pages/Content/Toolkits/ToolkitWorkspace.js
+++ b/gui/pages/Content/Toolkits/ToolkitWorkspace.js
@@ -109,87 +109,62 @@ export default function ToolkitWorkspace({env, toolkitDetails, internalId}) {
   }, [internalId]);
 
   return (<>
+    '
     <div className="row">
       <div className="col-3"></div>
-      <div className="col-6" style={{overflowY: 'scroll', height: 'calc(100vh - 92px)', padding: '25px 20px'}}>
+      <div className="col-6 col-6-scrollable">
         <div className={styles.tools_container}>
-          <div style={{display: 'flex', justifyContent: 'flex-start', marginBottom: '20px', width: '95%'}}>
-            <div>
-              <Image src={returnToolkitIcon(toolkitDetails?.name)} alt="toolkit-icon" width={45} height={45}
-                     style={{borderRadius: '25px', background: 'black'}}/>
-            </div>
-            <div style={{display: 'flex', alignItems: 'center'}}>
-              <div style={{marginLeft: '15px', textAlign: 'left', paddingRight: '10px'}}>
-                <div style={{fontSize: '17px', marginTop: '-3px'}}>{toolkitDetails.name}</div>
-                <div className={styles.toolkit_description}
-                     style={!showDescription ? {overflow: 'hidden'} : {display: 'block'}}>
-                  {`${showDescription ? toolkitDetails.description : toolkitDetails.description.slice(0, 70)}`}
-                  {toolkitDetails.description.length > 70 &&
+          <div className="horizontal_container align_start mb_20">
+            <Image src={returnToolkitIcon(toolkitDetails?.name)} alt="toolkit-icon" width={45} height={45} className="bg_black border_radius_25" />
+            <div className="vertical_containers ml_15 text_align_left mr_10">
+              <div className="text_17">{toolkitDetails.name}</div>
+              <div className={styles.toolkit_description} style={!showDescription ? {overflow: 'hidden'} : {display: 'block'}}>
+                {`${showDescription ? toolkitDetails.description : toolkitDetails.description.slice(0, 70)}`}
+                {toolkitDetails.description.length > 70 &&
                     <span className={styles.show_more_button} onClick={() => setShowDescription(!showDescription)}>
                       {showDescription ? '...less' : '...more'}
                   </span>}
-                </div>
               </div>
             </div>
           </div>
-          <div style={{display: 'flex', alignItems: 'center', marginBottom: '20px'}}>
-            <div className={styles.tool1_box}
-                 onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'configuration', setActiveTab)}
-                 style={activeTab === 'configuration' ? {background: '#454254'} : {background: 'transparent'}}>
+          <div className="horizontal_container mb_20">
+            <div className={activeTab === 'configuration' ? 'tab_button_small_selected' : 'tab_button_small'}
+                 onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'configuration', setActiveTab)}>
               <div className={styles.tab_text}>Configuration</div>
             </div>
-            <div className={styles.tool1_box}
-                 onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'tools_included', setActiveTab)}
-                 style={activeTab === 'tools_included' ? {background: '#454254'} : {background: 'transparent'}}>
+            <div className={activeTab === 'tools_included' ? 'tab_button_small_selected' : 'tab_button_small'}
+                 onClick={() => setLocalStorageValue('toolkit_tab_' + String(internalId), 'tools_included', setActiveTab)}>
               <div className={styles.tab_text}>Tools Included</div>
             </div>
           </div>
           {!loading && activeTab === 'configuration' && <div>
             {apiConfigs.length > 0 ? (apiConfigs.map((config, index) => (
               <div key={index}>
-                <div style={{
-                  color: '#888888',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'flex-start',
-                  marginBottom: '20px'
-                }}>
-                  <label style={{marginBottom: '6px'}}>{convertToTitleCase(config.key)}</label>
+                <div className="vertical_containers color_gray mb_20 text_align_left">
+                  <label className="mb_6">{convertToTitleCase(config.key)}</label>
                   <div className={styles.search_box}>
-                    <input type="text" style={{color: 'white', width: '100%'}} value={config.value || ''}
-                           onChange={(event) => handleKeyChange(event, index)}/>
+                    <input className="color_white w_100" type="text" value={config.value || ''} onChange={(event) => handleKeyChange(event, index)}/>
                   </div>
                 </div>
               </div>
-            ))) : (<div style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              marginTop: '40px',
-              width: '100%'
-            }}>
+            ))) : (<div className="vertical_container mt_40 w_100">
               <Image width={150} height={60} src="/images/no_permissions.svg" alt="no-permissions"/>
-              <span className={styles.feed_title} style={{marginTop: '8px'}}>No Keys found!</span>
+              <span className="feed_title mt_8">No Keys found!</span>
             </div>)}
 
             {apiConfigs.length > 0 && (
-              <div style={{marginLeft: 'auto', display: 'flex', justifyContent: 'space-between'}}>
-                <div>{authenticateToolkits.includes(toolkitDetails.name) &&
-                  <button style={{width: 'fit-content'}} className="primary_button"
-                          onClick={() => handleAuthenticateClick(toolkitDetails.name)}>Authenticate Tool</button>
-                }</div>
-                <div style={{display: 'flex', justifyContent: 'flex-end'}}>
+              <div className="horizontal_space_between">
+                {authenticateToolkits.includes(toolkitDetails.name) &&
+                  <button className="primary_button w_fit_content" onClick={() => handleAuthenticateClick(toolkitDetails.name)}>Authenticate Tool</button>}
                   <button className="primary_button" onClick={handleUpdateChanges}>Update Changes</button>
-                </div>
               </div>)}
           </div>}
           {activeTab === 'tools_included' && <div>
             {toolsIncluded.map((tool, index) => (
               <div key={index} className={styles.tools_included}>
                 <div>
-                  <div style={{color: 'white'}}>{tool.name}</div>
-                  <div style={{color: '#888888', marginTop: '5px'}}>{tool.description}</div>
+                  <div className="color_white">{tool.name}</div>
+                  <div className="color_gray mt_5">{tool.description}</div>
                 </div>
               </div>
             ))}
diff --git a/gui/pages/_app.css b/gui/pages/_app.css
index cee450a3c..92a9a49e0 100644
--- a/gui/pages/_app.css
+++ b/gui/pages/_app.css
@@ -716,6 +716,7 @@ p {
 }
 
 .mt_4{margin-top: 4px;}
+.mt_5{margin-top: 5px;}
 .mt_6{margin-top: 6px;}
 .mt_8{margin-top: 8px;}
 .mt_10{margin-top: 10px;}
@@ -895,6 +896,14 @@ p {
     line-height: normal;
 }
 
+.text_17{
+    color: #FFF;
+    font-size: 17px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
 .text_20_bold{
     color: #FFF;
     font-size: 20px;
@@ -986,6 +995,7 @@ p {
 
 .justify_center{justify-content: center}
 .justify_end{justify-content: flex-end}
+.justify_start{justify-content: flex-start}
 .justify_space_between{justify-content: space-between}
 
 .display_flex{display: inline-flex}
@@ -1015,6 +1025,7 @@ p {
 .gap_20{gap:20px;}
 
 .border_radius_8{border-radius: 8px;}
+.border_radius_25{border-radius: 25px;}
 
 .color_white{color:#FFFFFF}
 .color_gray{color:#888888}
@@ -1455,6 +1466,25 @@ tr{
     background: #454254;
 }
 
+.tab_button_small, .tab_button_small_selected{
+    height: 30px;
+    font-size: 12px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.tab_button_small{
+    background: transparent;
+}
+
+.tab_button_small_selected{
+    background: #454254;
+}
+
 .detail_top {
     width: 100%;
     height: fit-content;