new UI: other element of cds-dashboard UI updated

Tiledesk · Oct 25, 2023 · 5aa9cc7 · 5aa9cc7
1 parent 8d7ed19
commit 5aa9cc7
Show file tree

Hide file tree

Showing 37 changed files with 884 additions and 1,356 deletions.
diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.html b/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.html
@@ -10,22 +10,21 @@
             <!-- displayBtnLabelSeeYourRequets
             displayBtnLabelSeeYourRequets
             displayBtnLabelSeeYourRequets -->
-            <div class="community-tab">
+            <div class="cds-bottom-nav">
                 <div (click)="displayUserCommunityInfo(seeUserCmntyInfo = !seeUserCmntyInfo)" class="btn-with-border--effect" [ngClass]="
                 { 'disabled-li' : seeUserCmntyInfo === false, 
                     'border-from-center' : seeUserCmntyInfo === true,
                     'li-active' : seeUserCmntyInfo === false
                 }">
-
-                    <a style="position: relative;top: 20px;" href="javascript:;" role="button"> Chatbot info</a>
+                    <a href="javascript:;" role="button"> Chatbot info</a>
                 </div>
 
                 <div (click)="displayUserCommunityInfo(seeUserCmntyInfo = !seeUserCmntyInfo)" class="btn-with-border--effect" [ngClass]="
                     { 'disabled-li' : seeUserCmntyInfo === true, 
                         'border-from-center' : seeUserCmntyInfo === false, 
                         'li-active' : seeUserCmntyInfo === true
                     }">
-                    <a style="position: relative;top: 20px;" href="javascript:;" role="button"> Personal info </a>
+                    <a href="javascript:;" role="button"> Personal info </a>
                 </div>
             </div>
             <div class="cds-community-btns-wrp">

diff --git a/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.scss b/src/app/chatbot-design-studio/cds-chatbot-details/community/community.component.scss
@@ -1,7 +1,42 @@
 @import "./src/assets/sass/md/_variables.scss";
+@import "./src/assets/sass/cds/_variables.scss";
+
+
+.cds-bottom-nav div {
+    float: left;
+    padding: 15px;
+    list-style: none;
+    position: relative;
+    display: block;
+    height: 53px;
+    border-bottom: 3px solid $blu-light-02;
+    cursor: pointer;
+}
+
+.cds-bottom-nav div a {
+    padding: 0px 15px;
+    color: $blu-light-02;
+    line-height: 20px;
+}
+
+.cds-bottom-nav div a:hover {
+    text-decoration: none;
+    //  background-color: #eee;
+}
+
+.li-active {
+    border-bottom: 3px solid $blu !important;
+    pointer-events: none;
+}
+.li-active a {
+    color: $blu !important;
+}
+.disabled-li {
+    pointer-events: none;
+}
 
 .cds--custom-label {
-    color: #9aa0a6;
+    color: $blu;
     height: 30px;
     padding-top: 7px;
     padding-left: 16px;
@@ -35,15 +70,11 @@ input[type="text"] {
     appearance: none;
     -webkit-appearance: none;
     background: #fff;
-    border: 1px solid #d9d9d9 !important;
-    border-top: 1px solid #c0c0c0;
-    /* border-radius: 2px; */
+    border: 1px solid $blu-light-02;
     padding: 0 8px;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    border-radius: 5px;
-    background-color: #fff !important;
-    border: solid 1px #ddd;
+    border-radius: 8px;
 }
 
 textarea[type="text"] {
@@ -55,18 +86,14 @@ textarea[type="text"] {
     appearance: none;
     -webkit-appearance: none;
     background: #fff;
-    border: 1px solid #d9d9d9 !important;
-    border-top: 1px solid #c0c0c0;
-    /* border-radius: 2px; */
+    border: 1px solid $blu-light-02;
     padding-right: 8px;
     padding-top: 5px;
     padding-left: 8px;
 
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    border-radius: 5px;
-    background-color: #fff !important;
-    border: solid 1px #ddd;
+    border-radius: 8px;
 }
 
 input[type="text"]:disabled {
@@ -112,24 +139,31 @@ ng-select {
     appearance: none;
     -webkit-appearance: none;
     background: #fff;
-    // border: 1px solid #d9d9d9 !important;
     // border-top: 1px solid #c0c0c0;
-    /* border-radius: 2px; */
+    border-radius: 8px;
     padding-right: 8px;
     padding-top: 5px;
     padding-left: 8px;
 
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     border-radius: 5px;
-    background-color: #fff !important;
     // border: solid 1px #ddd;
     margin: 0px;
     padding: 0px;
 
     &.ng-select-opened {
         border-radius: 5px 5px 0px 0px;
     }
+
+
+}
+
+::ng-deep {
+    .ng-select .ng-select-container {
+        border-radius: 8px;
+        border: 1px solid $blu-light-02;
+    }
 }
 
 .cds-community-btns-wrp {
@@ -268,14 +302,14 @@ ng-select {
 
 .border-from-center {
     &:hover {
-        color: $brand-primary;
+        color: $blu;
     }
 
     // Set up base styles, we're going to scale instead of animating width/height
     &::before,
     &::after {
-        //   top: 3px;
-        top: 0px;
+        top: 3px;
+        // top: 0px;
         left: 0;
         height: 100%;
         width: 100%;
@@ -285,7 +319,7 @@ ng-select {
     // scale3d(<scale-horizontal>, <scale-vertical>, <scale-depth>);
     &::before {
         // border-top: 2px solid $purple;
-        border-bottom: 3px solid $brand-primary;
+        border-bottom: 3px solid $blu;
         transform: scale3d(0, 1, 1); // Shrink only width
     }
 
@@ -296,13 +330,6 @@ ng-select {
     }
 }
 
-.disabled-li {
-    pointer-events: none;
-}
-
-.li-active {
-    border-bottom: 3px solid $brand-primary !important;
-}
 
 .community-tab {
     display: flex;