chore(frontend): make chevron icons transition consistently

Signed-off-by: Jakob Steiner <jakob.steiner@glasskube.eu>

Author: kosmoz

frontend/ui/src/app/artifacts/artifact-licenses/edit-artifact-license.component.html

@@ -68,7 +68,10 @@
                         : getSelectedItemsCount(artifactCtrl) + ' tags selected'
                     }}
                   </span>
-                  <fa-icon [icon]="faChevronDown"></fa-icon>
+                  <fa-icon
+                    class="transition duration-150 ease-in-out"
+                    [class.rotate-x-180]="openedArtifactIdx() === i"
+                    [icon]="faChevronDown" />
                 </button>
 
                 <ng-template

frontend/ui/src/app/components/nav-bar/nav-bar.component.html

@@ -77,8 +77,9 @@ <h1 class="font-display self-center text-xl font-semibold sm:text-2xl whitespace
                     }
                   </span>
                   <fa-icon
-                    class="ml-2 text-gray-900 dark:text-gray-300"
-                    [icon]="organizationsOpened ? faChevronUp : faChevronDown"></fa-icon>
+                    class="ml-2 text-gray-900 dark:text-gray-300 transition duration-150 ease-in-out"
+                    [class.rotate-x-180]="organizationsOpened"
+                    [icon]="faChevronDown" />
                 </button>
               </div>
               <ng-template

frontend/ui/src/app/components/side-bar/side-bar.component.html

@@ -54,8 +54,8 @@
             <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">Agents</span>
             <fa-icon
               [icon]="faChevronDown"
-              [class.rotate-180]="agentsSubMenuOpen()"
-              class="transition duration-150"></fa-icon>
+              [class.rotate-x-180]="agentsSubMenuOpen()"
+              class="transition duration-150 ease-in-out"></fa-icon>
           </button>
           @if (agentsSubMenuOpen()) {
             <ul class="space-y-1">
@@ -106,8 +106,8 @@
             <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">Registry</span>
             <fa-icon
               [icon]="faChevronDown"
-              [class.rotate-180]="registrySubMenuOpen()"
-              class="transition duration-150"></fa-icon>
+              [class.rotate-x-180]="registrySubMenuOpen()"
+              class="transition duration-150 ease-in-out"></fa-icon>
           </button>
           @if (registrySubMenuOpen()) {
             <ul class="space-y-1">
@@ -146,8 +146,8 @@
               <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">Licenses</span>
               <fa-icon
                 [icon]="faChevronDown"
-                [class.rotate-180]="licenseSubMenuOpen()"
-                class="transition duration-150"></fa-icon>
+                [class.rotate-x-180]="licenseSubMenuOpen()"
+                class="transition duration-150 ease-in-out"></fa-icon>
             </button>
             @if (licenseSubMenuOpen()) {
               <ul class="space-y-1">

frontend/ui/src/app/licenses/edit-license.component.html

@@ -59,7 +59,10 @@
                 : subjectItemsSelected + ' versions selected'
             }}
           </span>
-          <fa-icon [icon]="faChevronDown"></fa-icon>
+          <fa-icon
+            class="transition duration-150 ease-in-out"
+            [class.rotate-x-180]="dropdownOpen()"
+            [icon]="faChevronDown" />
         </button>
 
         <ng-template