From 9100a4a01dca9b982a62bfd82b37ff82b9586a9b Mon Sep 17 00:00:00 2001
From: root <root@Thigs>
Date: Sun, 10 Mar 2024 23:04:23 -0300
Subject: [PATCH] Style Task Form

---
 app/static/app/js/components/EditTaskForm.jsx | 38 +++++----
 app/static/app/js/components/NewTaskPanel.jsx | 12 +--
 app/static/app/js/css/EditTaskForm.scss       | 42 ++++++++++
 app/static/app/js/css/NewTaskPanel.scss       | 84 ++++++++++++++++++-
 app/static/app/js/css/TagsField.scss          |  8 ++
 5 files changed, 159 insertions(+), 25 deletions(-)

diff --git a/app/static/app/js/components/EditTaskForm.jsx b/app/static/app/js/components/EditTaskForm.jsx
index 64a7ae17..036f37d3 100644
--- a/app/static/app/js/components/EditTaskForm.jsx
+++ b/app/static/app/js/components/EditTaskForm.jsx
@@ -581,8 +581,8 @@ class EditTaskForm extends React.Component {
       taskOptions = (
         <div>
           {tagsField}
-          <div className="form-group">
-            <label className="col-sm-2 control-label">{_("Processing Node")}</label>
+          <div className="form-group col-sm-10 form-group-data">
+            {/* <label className="col-sm-2 control-label">{_("Processing Node")}</label>
               <div className="col-sm-10">
                 <select className="form-control" value={this.state.selectedNode.key} onChange={this.handleSelectNode}>
                 {this.state.processingNodes.map(node => 
@@ -598,7 +598,11 @@ class EditTaskForm extends React.Component {
                <div className="review-options">
                 {this.getAvailableOptionsOnlyText(this.state.selectedPreset.options, this.state.selectedNode.options)}
                </div>}
-            </div>
+            </div> */}
+
+            <label className="col-sm-2 control-label">{_("Data")}</label>
+            <input type="text" className="col-sm-10 input-field data-input"/>
+
           </div>
 
           {this.state.editingPreset ? 
@@ -622,22 +626,20 @@ class EditTaskForm extends React.Component {
 
     return (
       <div className="edit-task-form">
-        <div className="form-group">
+        <div className="form-group col-sm-10">
           <label className="col-sm-2 control-label">{_("Name")}</label>
-          <div className="col-sm-10 name-fields">
-            {this.state.loadingTaskName ? 
-            <i className="fa fa-circle-notch fa-spin fa-fw name-loading"></i>
-            : ""}
-            <input type="text" 
-              onChange={this.handleNameChange} 
-              className="form-control"
-              placeholder={this.state.namePlaceholder} 
-              value={this.state.name}
-            />
-            <button type="button" title={_("Add tags")} onClick={this.toggleTagsField} className="btn btn-sm btn-secondary toggle-tags">
-              <i className="fa fa-tag"></i>
-            </button>
-
+            <div className="col-sm-10 name-fields input-field">
+              {this.state.loadingTaskName ? 
+              <i className="fa fa-circle-notch fa-spin fa-fw name-loading"></i>
+              : ""}
+              <input type="text" 
+                onChange={this.handleNameChange} 
+                className="remove-style name-input"
+                placeholder={this.state.namePlaceholder} 
+                value={this.state.name}/>
+              <button type="button" title={_("Add tags")} onClick={this.toggleTagsField} className="remove-style">
+                <i className="fa fa-tag"></i>
+              </button>
           </div>
         </div>
         {taskOptions}
diff --git a/app/static/app/js/components/NewTaskPanel.jsx b/app/static/app/js/components/NewTaskPanel.jsx
index f72a2256..db9d0cb3 100644
--- a/app/static/app/js/components/NewTaskPanel.jsx
+++ b/app/static/app/js/components/NewTaskPanel.jsx
@@ -131,7 +131,7 @@ class NewTaskPanel extends React.Component {
       <div className="new-task-panel theme-background-highlight">
         <div className="form-horizontal">
           <div className={this.state.inReview ? "disabled" : ""}>
-            <p>{interpolate(_("%(count)s files selected. Please check these additional options:"), { count: this.props.filesCount})}</p>
+            <p className='files-text'>{interpolate(_("%(count)s files selected. Please check these additional options:"), { count: this.props.filesCount})}</p>
 
             {!filesCountOk ? 
             <div className="alert alert-warning">
@@ -153,11 +153,11 @@ class NewTaskPanel extends React.Component {
 
             {this.state.editTaskFormLoaded && this.props.showResize ?
               <div>
-                <div className="form-group">
+                <div className="form-group resize-images-container">
                   <label className="col-sm-2 control-label">{_("Resize Images")}</label>
                   <div className="col-sm-10">
                       <div className="btn-group">
-                      <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                      <button type="button" className="btn btn-default-s dropdown-toggle" data-toggle="dropdown">
                           {ResizeModes.toHuman(this.state.resizeMode)} <span className="caret"></span>
                       </button>
                       <ul className="dropdown-menu">
@@ -174,7 +174,7 @@ class NewTaskPanel extends React.Component {
                       <input 
                           type="number" 
                           step="100"
-                          className="form-control"
+                          className="form-control input-field"
                           onChange={this.handleResizeSizeChange} 
                           value={this.state.resizeSize} 
                       />
@@ -195,11 +195,11 @@ class NewTaskPanel extends React.Component {
           {this.state.editTaskFormLoaded ? 
             <div className="form-group">
               <div className="col-sm-offset-2 col-sm-10 text-right">
-                {this.props.onCancel !== undefined && <button type="submit" className="btn btn-danger" onClick={this.cancel} style={{marginRight: 4}}><i className="glyphicon glyphicon-remove-circle"></i> {_("Cancel")}</button>}
+                {this.props.onCancel !== undefined && <button type="submit" className="btn btn-danger" onClick={this.cancel} style={{marginRight: 4}}>{_("Cancel")}</button>}
                 {this.state.loading ?
                   <button type="submit" className="btn btn-primary" disabled={true}><i className="fa fa-circle-notch fa-spin fa-fw"></i>{_("Loading…")}</button>
                   :
-                  <button type="submit" className="btn btn-primary" onClick={this.save} disabled={this.props.filesCount < 1 || !filesCountOk}><i className="glyphicon glyphicon-saved"></i> {!this.state.inReview ? _("Review") : _("Start Processing")}</button>
+                  <button type="submit" className="btn btn-confirm" onClick={this.save} disabled={this.props.filesCount < 1 || !filesCountOk}>{!this.state.inReview ? _("Próximo") : _("Start Processing")}</button>
                 }
               </div>
             </div>
diff --git a/app/static/app/js/css/EditTaskForm.scss b/app/static/app/js/css/EditTaskForm.scss
index 1b4966fb..210c2b26 100644
--- a/app/static/app/js/css/EditTaskForm.scss
+++ b/app/static/app/js/css/EditTaskForm.scss
@@ -46,4 +46,46 @@
             border-bottom-right-radius: 0;
         }
     }
+}
+
+/* ---------------------Button---------------------- */
+
+.form-group {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+.form-group-data {
+    justify-content: start;
+}
+
+.input-field {
+    background-color: #FFFFFF;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    outline: none;
+}
+
+.name-input {
+    width: 100%;
+}
+
+.data-input {
+    width: 95px;
+}
+
+.remove-style {
+    background: none;
+    border: none;
+    outline: none;
+}
+
+.fa-tag {
+    color: #14A5A2;
+    transform: scale(1.2);
 }
\ No newline at end of file
diff --git a/app/static/app/js/css/NewTaskPanel.scss b/app/static/app/js/css/NewTaskPanel.scss
index 84d0d2d1..d10f46d4 100644
--- a/app/static/app/js/css/NewTaskPanel.scss
+++ b/app/static/app/js/css/NewTaskPanel.scss
@@ -1,7 +1,11 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
+
 .new-task-panel{
-    padding: 10px;
+    padding: 15px;
     margin-top: 10px;
     margin-bottom: 10px;
+    border-radius: 20px;
+    background-color: #E3E3E3;
 
     .alert{
     	margin-top: 4px;
@@ -46,4 +50,82 @@
         margin-top: 0;
         margin-left: 10px;
     }
+}
+
+.text-right {
+    display: flex;
+    justify-content: end;
+}
+
+.resize-images-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+/* ---------------------File Text---------------------- */
+
+.files-text {
+    font-weight: 600;
+    font-family: "Montserrat", sans-serif;
+    color: #838383;
+}
+
+/* ---------------------Cancel Button---------------------- */
+
+.btn-danger {
+    background-color: #AFAFAF;
+    border: none;
+    border-radius: 50px;
+    padding: 15px 20px;
+    transition: all 0.2s;
+}
+
+.btn-danger:hover {
+    background-color: rgb(220, 45, 45);
+}
+
+/* ---------------------Next/Confirm Button---------------------- */
+
+.btn-confirm {
+    color: #fff;
+    background-color: #74B16F;
+    border: none;
+    border-radius: 50px;
+    padding: 15px 35px;
+    transition: all 0.2s;
+}
+
+.btn-confirm:hover {
+    background-color: #529A4C;
+}
+
+/* ---------------------Button Default---------------------- */
+
+.btn-default-s {
+    color: #fff;
+    background-color: #AFAFAF;
+    border-radius: 15px;
+    border: none;
+    transition: all 0.2s;
+}
+
+.btn-default-s:hover, .btn-default-s:active {
+    background-color: #6a6a6a;
+}
+
+/* ---------------------Icons---------------------- */
+
+.caret {
+    width: 10px;
+    height: auto;
+}
+
+.input-field {
+    background-color: #FFFFFF;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    display: flex;
+    justify-content: space-between;
+    outline: none;
 }
\ No newline at end of file
diff --git a/app/static/app/js/css/TagsField.scss b/app/static/app/js/css/TagsField.scss
index dc744d0c..4e003c51 100644
--- a/app/static/app/js/css/TagsField.scss
+++ b/app/static/app/js/css/TagsField.scss
@@ -38,3 +38,11 @@
     }
     
 }
+
+.tags-field {
+    background-color: #FFFFFF;
+    padding: 10px;
+    border: none;
+    border-radius: 10px;
+    outline: none
+}
\ No newline at end of file