fix(admin-ui): Fix styles to work with Clarity v2

admin-ui/src/app/core/components/main-nav/main-nav.component.html

@@ -140,7 +140,6 @@
                     </a>
                 </li>
                 <li>
-                    í
                     <a
                         class="nav-link"
                         [routerLink]="['/settings', 'global-settings']"

admin-ui/src/app/shared/components/data-table/data-table.component.scss

@@ -33,3 +33,7 @@ thead th {
         font-size: 22px;
     }
 }
+
+::ng-deep .align-middle {
+    vertical-align: middle!important;
+}

admin-ui/src/app/shared/components/form-field/form-field.component.scss

@@ -2,8 +2,9 @@
 
 :host {
     display: block;
+
     .form-group > label:first-child {
-        top: 16px;
+        top: 6px;
     }
     .form-group > label:nth-of-type(2) {
         flex: 1;
@@ -53,3 +54,52 @@
         }
     }
 }
+
+.tooltip.tooltip-validation.invalid::before {
+    position: absolute;
+    content: '';
+    height: .666667rem;
+    width: .666667rem;
+    top: .125rem;
+    right: .25rem;
+    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20viewBox%3D%225%205%2026%2026%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cstyle%3E.clr-i-outline%7Bfill%3A%23a32100%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ctitle%3Eexclamation-circle-line%3C%2Ftitle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-1%22%20d%3D%22M18%2C6A12%2C12%2C0%2C1%2C0%2C30%2C18%2C12%2C12%2C0%2C0%2C0%2C18%2C6Zm0%2C22A10%2C10%2C0%2C1%2C1%2C28%2C18%2C10%2C10%2C0%2C0%2C1%2C18%2C28Z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22clr-i-outline%20clr-i-outline-path-2%22%20d%3D%22M18%2C20.07a1.3%2C1.3%2C0%2C0%2C1-1.3-1.3v-6a1.3%2C1.3%2C0%2C1%2C1%2C2.6%2C0v6A1.3%2C1.3%2C0%2C0%2C1%2C18%2C20.07Z%22%3E%3C%2Fpath%3E%3Ccircle%20class%3D%22clr-i-outline%20clr-i-outline-path-3%22%20cx%3D%2217.95%22%20cy%3D%2223.02%22%20r%3D%221.5%22%3E%3C%2Fcircle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E);
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+    margin: 0;
+}
+
+
+element.style {
+}
+.tooltip.tooltip-sm > .tooltip-content, .tooltip .tooltip-content.tooltip-sm {
+    width: 5rem;
+}
+.tooltip.tooltip-top-left > .tooltip-content, .tooltip .tooltip-content.tooltip-top-left {
+    color: #fff;
+    font-size: 0.541667rem;
+    font-weight: 400;
+    letter-spacing: normal;
+    background: #000;
+    border-radius: 0.125rem;
+    line-height: 0.75rem;
+    margin: 0;
+    padding: 0.375rem 0.5rem;
+    width: 10rem;
+    position: absolute;
+    top: auto;
+    bottom: 100%;
+    right: 50%;
+    left: auto;
+    border-bottom-right-radius: 0;
+    margin-bottom: 0.666667rem;
+}
+
+.tooltip:hover > .tooltip-content {
+    right: 12px;
+    margin-bottom: 0;
+}
+
+.tooltip:not(.invalid):hover > .tooltip-content {
+    display: none;
+}

admin-ui/src/styles/_variables.scss

@@ -1,5 +1,3 @@
-@import "../../node_modules/@clr/ui/src/color/variables.color";
-
 // colors
 $color-primary-100: #e1e4ff;
 $color-primary-200: #afdaf3;

admin-ui/src/styles/styles.scss

@@ -1,5 +1,5 @@
 // Clarity Component SCSS
-@import "~@clr/ui/src/utils/components.clarity";
+@import "~@clr/ui/src/main";
 
 @import "theme/theme";
 

admin-ui/src/styles/theme/_forms.scss

@@ -4,6 +4,33 @@
     margin-top: 0;
 }
 
+.form, form {
+    padding-top: .5rem;
+}
+
+.form-group {
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    padding-left: 9.5rem;
+    margin-bottom: .5rem;
+    font-size: .541667rem;
+    letter-spacing: normal;
+    line-height: 1rem;
+
+    label:first-child {
+        position: absolute;
+        width: 8.5rem;
+        left: 0;
+        top: .25rem;
+        margin: 0;
+    }
+}
+
+.form .form-block, form .form-block {
+    margin: .5rem 0 1.5rem;
+}
+
 input, select {
     border-radius: 3px !important;
     border: 1px solid $color-grey-300 !important;
@@ -51,7 +78,7 @@ select {
     }
 }
 .ng-select.ng-select-single>.ng-select-container{
-       padding-top: 9px;
+    padding-top: 9px;
 }
 .ng-select.ng-select-focused>.ng-select-container {
     border-color: $color-primary-500 !important;