fix(clarity): new version style issues

client/src/app/editor/editor.component.html

@@ -203,7 +203,7 @@
 
               <span clrTooltipTrigger>
                 {{ libdsParsed.libName }}.<a
-                  class="mr-10"
+                  class="mr-10 view-table"
                   [routerLink]="'/view/data/' + libds!"
                   >{{ libdsParsed.tableName.replace('-FC', '') }}</a
                 >

client/src/app/editor/editor.component.scss

@@ -214,6 +214,10 @@ hot-table {
   width: 150px;
 }
 
+.view-table {
+  font-size: inherit !important;
+}
+
 // FIXME
 // Let's leave it here for a reference if there
 // is an issue with viewboxes/filter modal overlaying

client/src/app/query/query.component.html

@@ -143,7 +143,6 @@
                   (ngModelChange)="
                     setVariableOperator(queryIndex, query.operator, clauseIndex)
                   "
-                  class="mt-2"
                   clrSelect
                 >
                   <option *ngFor="let opr of query.operators">{{ opr }}</option>

client/src/app/viewer/viewer.component.html

@@ -364,7 +364,7 @@
         <h3
           class="viewerTitle clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center"
         >
-          <clr-tooltip class="d-flex">
+          <clr-tooltip class="d-flex clr-align-items-center">
             <clr-icon
               clrTooltipTrigger
               (click)="datasetInfo = true"
@@ -376,7 +376,7 @@
             <clr-icon
               *ngIf="tableTitle?.includes('-FC')"
               shape="bolt"
-              class="color-yellow mt-5 mr-5"
+              class="color-yellow mr-5"
             ></clr-icon>
 
             <span clrTooltipTrigger *ngIf="tableTitle && tableTitle.length > 0">
@@ -425,62 +425,50 @@
             options
           </button>
           <clr-dropdown-menu clrPosition="bottom-right" *clrIfOpen>
-            <button
-              type="button"
-              class="btn btn-sm btn-success-outline"
+            <div
               (click)="newViewbox()"
               clrDropdownItem
             >
               <clr-icon shape="view-cards"></clr-icon>
               <span>Viewboxes</span>
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-success-outline"
+            </div>
+            <div
               *ngIf="tableEditExists()"
               (click)="editTable()"
               clrDropdownItem
             >
               <clr-icon shape="pencil"></clr-icon>
               <span>Edit</span>
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-success-outline"
+            </div>
+            <div
               *ngIf="tableuri"
               (click)="goToLineage()"
               clrDropdownItem
             >
               <clr-icon shape="switch"></clr-icon>
               <span>Lineage</span>
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-outline btn-block"
+            </div>
+            <div
               (click)="openQb()"
               clrDropdownItem
             >
               <clr-icon shape="filter"></clr-icon>
               <span>Filter</span>
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-success-outline"
+            </div>
+            <div
               (click)="openDownload = true"
               clrDropdownItem
             >
               <clr-icon shape="download"></clr-icon>
               <span>Download</span>
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-success-outline"
+            </div>
+            <div
               (click)="showWebQuery()"
               clrDropdownItem
             >
               <clr-icon shape="download-cloud"></clr-icon>
               <span>Web Query URL</span>
-            </button>
+            </div>
           </clr-dropdown-menu>
         </clr-dropdown>
       </div>

client/src/app/viewer/viewer.component.scss

@@ -57,6 +57,7 @@ clr-tree-node button {
 .viewerTitle {
   text-align:center;
   margin-bottom: 15px;
+  margin-top: 16px;
 }
 
 .dropdown-menu {

client/src/styles.scss

@@ -686,6 +686,11 @@ clr-icon.is-info {
   color: #fff;
 }
 
+// Vertical align fix for small buttons with icons
+.btn.btn-sm:has(clr-icon) {
+  line-height: 2;
+}
+
 .d-none {
   display: none !important;
 }