From 15f1c3502e9d9c272cc647f977ea366a06ae0361 Mon Sep 17 00:00:00 2001
From: Syed Abdul Rahman <137684137+S-Abdul-Rahman@users.noreply.github.com>
Date: Tue, 4 Jun 2024 20:01:05 +0530
Subject: [PATCH] fix : Datasource container styling issue in datasources page
 (#9978)

* fix : datasource container styling issue

* fix : datasource container styling issue

* fix : styling color issue in drawer footer buttons

* fix : addded size md for drawerfooter button
---
 .../src/TooljetDatabase/Forms/ColumnForm.jsx  | 22 ---------
 .../src/TooljetDatabase/Forms/styles.scss     | 49 +++++++++++++------
 frontend/src/_styles/global-datasources.scss  | 11 +++--
 frontend/src/_ui/AppButton/AppButton.scss     | 12 ++++-
 4 files changed, 50 insertions(+), 44 deletions(-)

diff --git a/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx b/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
index 5cf7b7bd0f..a2870c523e 100644
--- a/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
+++ b/frontend/src/TooljetDatabase/Forms/ColumnForm.jsx
@@ -490,28 +490,6 @@ const ColumnForm = ({
             </div>
           </div>
         )}
-
-        <div className="row mb-3">
-          <div className="col-1">
-            <label className={`form-switch`}>
-              <input
-                className="form-check-input"
-                type="checkbox"
-                checked={isUniqueConstraint}
-                onChange={(e) => {
-                  setIsUniqueConstraint(e.target.checked);
-                }}
-                disabled={dataType?.value === 'serial'}
-              />
-            </label>
-          </div>
-          <div className="col d-flex flex-column">
-            <p className="m-0 p-0 fw-500 tj-switch-text">{isUniqueConstraint ? 'UNIQUE' : 'NOT UNIQUE'}</p>
-            <p className="fw-400 secondary-text tj-text-xsm tj-switch-text">
-              {isUniqueConstraint ? 'Unique value constraint is added' : 'Unique value constraint is not added'}
-            </p>
-          </div>
-        </div>
       </div>
       <DrawerFooter
         fetching={fetching}
diff --git a/frontend/src/TooljetDatabase/Forms/styles.scss b/frontend/src/TooljetDatabase/Forms/styles.scss
index 967d580b19..7dab60f878 100644
--- a/frontend/src/TooljetDatabase/Forms/styles.scss
+++ b/frontend/src/TooljetDatabase/Forms/styles.scss
@@ -4,36 +4,44 @@
   }
 }
 
-.card-body-wrapper{
+.card-body-wrapper {
   width: 640px;
   padding: 20px;
 }
 
-.card-body{
-  padding: 0;
-  .list-group-item{
-    padding: 0 !important;
+.drawer-card-wrapper {
+
+  .card-body {
+
+    padding: 0;
+
+    .list-group-item {
+      padding: 0 !important;
+    }
   }
+
 }
 
 .card-body.create-drawer-body,
 .card-body.edit-row-body,
-.card-body.edit-column-body{
+.card-body.edit-column-body {
   padding: 20px;
 }
 
 .form-label,
 .card-sub-title,
-.foreign-key-sub-title{
+.foreign-key-sub-title {
   font-size: 14px;
   line-height: 20px;
   font-weight: 500;
   margin-bottom: 4px;
 }
-.card-sub-title-light{
+
+.card-sub-title-light {
   color: #000000 !important;
 }
-.card-title{
+
+.card-title {
   font-size: 18px;
   line-height: 28px;
   font-weight: 500;
@@ -41,11 +49,11 @@
 
 .form-label-light,
 .card-title-light,
-.foreign-key-sub-title-light{
+.foreign-key-sub-title-light {
   color: #11181C !important;
 }
 
-.add-text{
+.add-text {
   font-size: 12px;
   line-height: 20px;
   font-weight: 500;
@@ -117,11 +125,12 @@
 
 .tj-app-input,
 .edit-row-container {
-  input{
+  input {
     font-size: 12px;
     line-height: 20px;
     font-weight: 500;
   }
+
   input.primary-idKey-light {
     gap: 16px !important;
     background: #f4f6fa !important;
@@ -531,6 +540,14 @@
     border-radius: 100px !important;
     margin-top: 10px !important;
   }
+
+  .tj-base-btn {
+    &:disabled {
+      background: none !important;
+      color: var(--slate9) !important;
+      cursor: auto !important;
+    }
+  }
 }
 
 // common css for two form components
@@ -711,11 +728,11 @@
   }
 }
 
-.add-relation-text-dark{
+.add-relation-text-dark {
   color: #545B64;
 }
 
-.add-relation-text-enabled{
+.add-relation-text-enabled {
   color: #3E63DD !important;
 }
 
@@ -724,7 +741,7 @@
 }
 
 .tj-switch-text,
-.tj-select-text{
+.tj-select-text {
   font-size: 12px;
   line-height: 20px;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/_styles/global-datasources.scss b/frontend/src/_styles/global-datasources.scss
index 1ed15c6df9..e04725a427 100644
--- a/frontend/src/_styles/global-datasources.scss
+++ b/frontend/src/_styles/global-datasources.scss
@@ -42,7 +42,7 @@
             .ds-delete-btn {
                 visibility: visible;
 
-                .disabled-button{
+                .disabled-button {
                     background-color: #FFFF;
                     width: 19px;
                     height: 19px;
@@ -62,8 +62,8 @@
             border: none;
             background: none;
         }
-        
-        .tooltip-sampl-db{
+
+        .tooltip-sampl-db {
             width: 10px;
         }
     }
@@ -141,6 +141,7 @@
 
 .datasource-inner-sidebar-wrap {
     height: 100%;
+
     .datasources-search {
         width: 240px;
         margin: 0 auto;
@@ -178,6 +179,7 @@
 .datasource-list-container {
     overflow-y: auto;
     max-height: calc(100vh - 64px);
+
     .datasource-list {
         width: 976px;
         margin: 0 auto;
@@ -226,6 +228,7 @@
 .datasource-card {
     height: 30px;
     height: 122px !important;
+
     button {
         display: none;
         padding: 5px 10px;
@@ -297,4 +300,4 @@
         border-radius: 6px;
         margin: auto;
     }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/_ui/AppButton/AppButton.scss b/frontend/src/_ui/AppButton/AppButton.scss
index b7d52d0014..c30b7e49b5 100644
--- a/frontend/src/_ui/AppButton/AppButton.scss
+++ b/frontend/src/_ui/AppButton/AppButton.scss
@@ -22,7 +22,15 @@
     }
 
     &:disabled {
-        color: var(--slate8) !important;
+        background: var(--slate6) !important;
+        color: var(--slate9) !important;
+        cursor: auto !important;
+
+        svg {
+            path {
+                fill: var(--slate9) !important;
+            }
+        }
     }
 }
 
@@ -213,7 +221,7 @@
     color: var(--slate12);
     border: none;
     background: transparent;
-    
+
     &:hover {
         background: var(--slate4, #ECEEF0) !important;
         color: var(--slate11);