From 7aec266672d6a14d9aa13c2b0a6e1d6dbd6ae6dc Mon Sep 17 00:00:00 2001
From: "Md. Mosiur Rahman" <connect.mosiur@gmail.com>
Date: Tue, 25 Mar 2025 14:48:29 +0600
Subject: [PATCH] fixed the css in client deliver and added responsiveness

---
 .../client-service.component.html             |  3 +-
 .../client-service.component.scss             | 48 +++++++++++++++++--
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/app/components/pages/client-service/client-service.component.html b/src/app/components/pages/client-service/client-service.component.html
index 35c7724..7ccf76d 100644
--- a/src/app/components/pages/client-service/client-service.component.html
+++ b/src/app/components/pages/client-service/client-service.component.html
@@ -1,5 +1,6 @@
 <div class="container">
     <div class="form-container">
+        <h2>Enter New Task</h2>
         <form action="" #clientForm="ngForm" (ngSubmit)="addNewClient()">
             <div class="form-control">
                 <label for="clientName">Client Name</label>
@@ -69,7 +70,7 @@
         [columnDefs]="colDefs" />
     </div>
     
-    <div class="pending-cotainer">
+    <div class="pending-container">
         <h1>Pending Tasks</h1>
    <!-- <div class="client_list">
             <h1>Pending Task</h1>
diff --git a/src/app/components/pages/client-service/client-service.component.scss b/src/app/components/pages/client-service/client-service.component.scss
index 304369d..e6c2913 100644
--- a/src/app/components/pages/client-service/client-service.component.scss
+++ b/src/app/components/pages/client-service/client-service.component.scss
@@ -1,6 +1,5 @@
-// TODO1: Style the Input fields
-// TODO2: Style the Table
 @import "../../../shared/scss/colors.scss";
+@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
 
 .container {
     display: flex;
@@ -10,6 +9,10 @@
     padding-top: 5rem;
     padding-left: 15rem;
     position: relative;
+    font-family: "Prompt", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    color: $navcolor;
 }
 
 .container div {
@@ -34,10 +37,38 @@ form, form div {
 
 input, select {
     border-radius: 10px;
+    height: 2rem;
+    border: none;
+    transition: border-bottom 0.1s ease-out;
+}
+
+label {
+    padding-bottom: 0.5rem;
+}
+
+input:focus, select:focus{
+    outline: none;
+    border-bottom: solid 4px $danger;
 }
 
 button {
-    margin-top: 0.5rem;
+    margin-top: 1rem;
+    height: 2rem;
+    border-radius: 1rem;
+    border: none;
+    background-color: $navcolor;
+    color: $nav-text-color;
+    font-weight: 300;
+}
+
+button:hover {
+    background-color: rgba($navcolor,0.5);
+    cursor: pointer;
+}
+
+button:disabled {
+    background-color: rgba($navcolor,0.2);
+    cursor: not-allowed;
 }
 
 // table-container css
@@ -50,6 +81,15 @@ h1 {
     text-align: center;
 }
 
-.pending-cotainer h1 {
+.pending-container h1 {
     color: $danger;
+}
+
+@media screen and (max-width: 1300px) {
+    .form-container {
+        position: initial;
+    }
+    .container {
+        padding-left: 0;
+    }
 }
\ No newline at end of file