Merge pull request #6343 from vishalvivekm/fix-form

[commonForm component] rm field gradient and fix responsive issues

Author: Vivek Vishal

src/components/CommonForm/commonForm.style.js

@@ -46,8 +46,8 @@ margin: 1rem;
 
 .form{
     font-size: .9rem;
-    width: fit-content !important;
-    margin: 0 1rem 1rem;
+    width: 100%;
+    margin: 0 0 1rem;
     padding: 1rem;
     
     .supscript{
@@ -58,7 +58,7 @@ margin: 1rem;
 
       label {
         display: block;
-        font-size: 1rem;
+        font-size: .98rem;
       }
 
       .required-sign {
@@ -97,7 +97,7 @@ margin: 1rem;
         display: block;
       }
       .formRight select {
-        background: linear-gradient(90deg, rgba(0,179,159,0.15) 0%, rgba(208,228,228,.7) 40%);
+        background: ${props => props.theme.grey212121ToWhite};
         border: 1px solid black;
         border-radius: 10px;
         height: 50px;
@@ -108,14 +108,6 @@ margin: 1rem;
         color: ${props => props.theme.primaryColor};
       }
 
-      .options {
-        color: ${props => props.theme.textColor};
-      }
-
-      .formRight option {
-        color: black;
-      }
-
       .custom-arrow {
         background-color: white;
         width: 2rem;
@@ -146,8 +138,9 @@ margin: 1rem;
         border-radius: 10px;
         padding: .5rem .5rem;
         font-size: .85rem;
-        background: linear-gradient(90deg, rgba(0,179,159,0.15) 0%, rgba(208,228,228,.7) 40%);
+        background: ${props => props.theme.grey212121ToWhite};
         color: ${props => props.theme.primaryColor};
+        resize: none;
       }
 
       .text-field:focus {