fix style

Real-Dev-Squad · Oct 10, 2023 · 9221757 · 9221757
1 parent 459e113
commit 9221757
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 25 deletions.
diff --git a/app/components/task/holder.hbs b/app/components/task/holder.hbs
@@ -18,7 +18,7 @@
         <Task::MultipleExtensionForm
           @task={{@task}}
           @closeForm={{this.closeExtensionForm}}
-          @title='Form for extension Request'
+          @title='Extension Details'
           @closeModel={{this.closeExtensionModel}}
         />
       {{else}}

diff --git a/app/components/task/latest-extension-info.js b/app/components/task/latest-extension-info.js
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
 
 export default class LatestExtensionInfoComponent extends Component {
   extension = this.args.extension;
@@ -9,10 +8,4 @@ export default class LatestExtensionInfoComponent extends Component {
   localTime(time) {
     return new Date(time * 1000).toLocaleString();
   }
-
-  @action
-  closeForm() {
-    // Call the closeForm action passed from the parent component
-    this.args.closeForm();
-  }
 }
diff --git a/app/components/task/multiple-extension-form.hbs b/app/components/task/multiple-extension-form.hbs
@@ -7,19 +7,27 @@
   >
   </div>
   <div class='extension-form__container-main'>
-    <h2 data-test-title>{{@title}}</h2>
+    <h2 data-test-title>
+      {{#if this.createExtensionRequest}}
+        Extension Request Form
+      {{else}}
+        Extension Details
+      {{/if}}
+    </h2>
     {{#if this.createExtensionRequest}}
       <div class='extension-form__content' data-test-extension-from-content>
-        <h3>Create Extension Request!!!</h3>
+        {{!-- <h3>Create Extension Request!!!</h3> --}}
         <form {{on 'submit' this.submitExtensionRequest}}>
           {{#if this.createExtensionRequestError}}
-            <h4 data-test-extension-from-error>Error:
+            <div class="error-container">
+            <h4 class= "error-message" data-test-extension-from-error>Error:
               {{this.createExtensionRequestError}}</h4>
+            </div>
           {{/if}}
           <label for='reason'>Reason</label>
           <input
             required
-            type='text'
+            type='text-box'
             id='reason'
             name='reason'
             data-test-extension-form-reason-input
@@ -37,12 +45,12 @@
           <label for='title'>Title</label>
           <input
             required
-            type='text'
+            type='text-box'
             id='title'
             name='title'
             data-test-extension-form-title-input
           />
-          <button type='submit'>Create</button>
+          <button class ='multiple-extension-form__create-button primary-button-style' type='submit'>Submit Request</button>
         </form>
       </div>
     {{else}}
@@ -60,7 +68,7 @@
         {{else if this.extensionData.error}}
           <h4>{{this.extensionData.error}}</h4>
           <button
-            class='extension-form__open-button'
+            class='multiple-extension-form__open-button primary-button-style'
             data-test-create-extension-button
             type='button'
             {{on 'click' this.createNewExtensionRequest}}
@@ -76,20 +84,24 @@
     }}
       {{#unless this.createExtensionRequest}}
         <button
-          class='extension-form__open-button'
+          class='multiple-extension-form__open-button primary-button-style'
           data-test-create-another-extension type="button" {{on 'click' this.createNewExtensionRequest}}
         >
-          Create New Extension
+          Request Extension
         </button>
       {{/unless}}
     {{/if}}
     <button
-      class='extension-form__container-close'
+      class='multiple-extension-form__container-close'
       data-test-extension-form-container-close
       type='button'
       {{on 'click' @closeForm}}
     >
-      Close Form
+      {{#if this.createExtensionRequest}}
+        Cancel
+      {{else}}
+        Close Details
+      {{/if}}
     </button>
   </div>
 </div>
diff --git a/app/components/task/multiple-extension-form.js b/app/components/task/multiple-extension-form.js
@@ -108,7 +108,7 @@ export default class ExtensionFormComponent extends Component {
       e.submitter.disabled = false;
       this.disableExtensionRequestClose = false;
       this.createExtensionRequestError =
-        'The newEndsOn value cannot be smaller than the oldEndsOn value';
+        'New ETA must be later than the existing ETA.';
       return;
     }
     json['newEndsOn'] = extensionTime;
@@ -165,7 +165,7 @@ export default class ExtensionFormComponent extends Component {
       });
       e.target.value = '';
       this.createExtensionRequestError =
-        'The newEndsOn value cannot be smaller than the oldEndsOn value';
+        'New ETA must be later than the existing ETA.';
       return;
     } else this.createExtensionRequestError = null;
   }

diff --git a/app/styles/tasks.css b/app/styles/tasks.css
@@ -420,7 +420,7 @@
   padding: 18px;
   border-radius: 10px;
   background-color: var(--white);
-  overflow-y: scroll;
+  /* overflow-y: scroll; */
   position: absolute;
   left: 30%;
   right: 30%;
@@ -452,6 +452,7 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  width: 100%;
   flex-direction: column;
   margin: 10px 0px;
 }
@@ -479,7 +480,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  width: 80%;
+  width: 100%;
 }
 .extension-form__content form > label {
   font-weight: bold;
@@ -494,7 +495,9 @@
   color: var(--button-proceed--text);
   font-size: 1.2rem;
   border: none;
+  width: 100%;
   border-radius: 8px;
+  margin-top: 1rem;
   padding: 5px 9px;
 }
 
@@ -511,8 +514,8 @@
   margin: 5px 0px 15px 0px;
   padding: 5px;
   width: 100%;
-  border: none;
-  border-bottom: 1px solid var(--input-field-border);
+  border: 1px solid var(--input-field-border);
+  /* border-bottom: 1px solid var(--input-field-border); */
 }
 
 .extension-info__content > table,
@@ -582,3 +585,69 @@
     align-items: center;
   }
 }
+
+.extension-info__content table td {
+  white-space: normal;
+}
+
+.primary-button-style {
+  background-color: #008000;
+  color: var(--button-proceed--text);
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 8px;
+  padding: 5px 9px;
+  transition: background-color 0.3s ease;
+}
+.multiple-extension-form__open-button {
+  background-color: #008000;
+  color: var(--button-proceed--text);
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 8px;
+  padding: 5px 9px;
+  transition: background-color 0.3s ease;
+}
+
+.multiple-extension-form__create-button {
+  background-color: #008000;
+  color: var(--button-proceed--text);
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 8px;
+  padding: 5px 9px;
+  transition: background-color 0.3s ease;
+}
+
+.multiple-extension-form__open-button:hover {
+  background-color: #01ad01;
+  color: #fff;
+}
+
+.multiple-extension-form__create-button:hover {
+  background-color: #01ad01;
+  color: #fff;
+}
+
+.multiple-extension-form__container-close:hover{
+  background-color: #d50707;
+  color:#fff
+}
+
+.multiple-extension-form__container-close {
+  background-color:#a70606;
+  color: var(--button-proceed--text);
+  font-size: 1.2rem;
+  border: none;
+  border-radius: 8px;
+  padding: 5px 9px;
+}
+.error-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.error-message {
+  color: red;
+  text-align: center;
+}