Development: Move rotate icon css to global style (#8646)

src/main/webapp/app/admin/standardized-competencies/import/admin-import-standardized-competencies.component.html

@@ -2,7 +2,7 @@
     <h2 jhiTranslate="artemisApp.standardizedCompetency.manage.import.title"></h2>
     <div class="card mt-3">
         <div class="card-header d-flex align-items-center mw-100 clickable" (click)="toggleCollapse()">
-            <div class="icon-container me-2">
+            <div class="me-2">
                 <fa-icon [icon]="faChevronRight" class="rotate-icon chevron-position" [class.rotated]="!isCollapsed" />
             </div>
             <h5 class="mb-0" jhiTranslate="artemisApp.standardizedCompetency.manage.import.format.title"></h5>

src/main/webapp/app/admin/standardized-competencies/import/admin-import-standardized-competencies.component.ts

@@ -26,7 +26,6 @@ interface ImportCount {
 @Component({
     selector: 'jhi-admin-import-standardized-competencies',
     templateUrl: './admin-import-standardized-competencies.component.html',
-    styleUrls: ['admin-import-standardized-competencies.component.scss'],
 })
 export class AdminImportStandardizedCompetenciesComponent {
     protected isLoading = false;

src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.html

@@ -1,7 +1,7 @@
 <div class="card form-group" [formGroup]="form">
     <div class="card-header">
         <div class="d-flex align-items-center mw-100 clickable" (click)="toggle()">
-            <div class="icon-container me-3">
+            <div class="me-3">
                 <fa-icon [icon]="faChevronRight" class="rotate-icon chevron-position" [class.rotated]="!isCollapsed" />
             </div>
             <h6 class="mb-0 text-nowrap text-truncate overflow-hidden">{{ titleControl.value ?? '' }}</h6>

src/main/webapp/app/course/competencies/generate-competencies/competency-recommendation-detail.component.scss

@@ -1,16 +1,3 @@
-.chevron-position {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.rotate-icon {
-    transition: transform 0.3s ease;
-}
-
-.rotate-icon.rotated {
-    transform: rotate(90deg);
-}
-
 .card {
     background-color: var(--overview-light-background-color);
     margin-bottom: 0.5rem;

src/main/webapp/app/exam/participate/summary/collapsible-card.component.ts

@@ -4,12 +4,7 @@ import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 @Component({
     selector: 'jhi-collapsible-card',
     templateUrl: './collapsible-card.component.html',
-    styleUrls: [
-        '../../../course/manage/course-exercise-card.component.scss',
-        '../../../exercises/quiz/shared/quiz.scss',
-        'exam-result-summary.component.scss',
-        'collapsible-card.component.scss',
-    ],
+    styleUrls: ['../../../course/manage/course-exercise-card.component.scss', '../../../exercises/quiz/shared/quiz.scss', 'exam-result-summary.component.scss'],
 })
 export class CollapsibleCardComponent {
     @Input() isCardContentCollapsed: boolean;

src/main/webapp/app/overview/course-overview.scss

@@ -93,19 +93,6 @@ Course Info Bar
     }
 }
 
-.chevron-position {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.rotate-icon {
-    transition: transform 0.3s ease;
-}
-
-.rotated {
-    transform: rotate(90deg);
-}
-
 .icon-container {
     display: inline-block;
     vertical-align: middle;

src/main/webapp/app/overview/discussion-section/discussion-section.component.scss

@@ -35,6 +35,7 @@ $discussion-section-card-min-width: 360px;
             align-items: center;
             background-color: var(--artemis-dark);
             cursor: pointer;
+            border-radius: 1em 1em 0 0;
 
             .card-title {
                 display: flex;

src/main/webapp/app/overview/header-course.component.scss

@@ -22,10 +22,6 @@
     }
 }
 
-.rotate-icon {
-    transition: transform 0.3s ease;
-}
-
 .rotate180 {
     transform: rotate(180deg);
 }

src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.html

@@ -9,7 +9,7 @@
                 {{ 'artemisApp.courseOverview.sidebar.' + groupKey | artemisTranslate | titlecase }}
                 ({{ (groupedData[groupKey].entityData | searchFilter: ['title', 'type'] : searchValue)?.length }})
             </div>
-            <div class="icon-container pe-3">
+            <div class="pe-3">
                 <fa-icon [icon]="faChevronRight" class="rotate-icon chevron-position" [class.rotated]="!collapseState[groupKey]" />
             </div>
         </div>

src/main/webapp/app/shared/sidebar/sidebar-accordion/sidebar-accordion.component.scss

@@ -1,12 +1,3 @@
-.rotate-icon {
-    display: inline-block;
-    transition: transform 0.3s ease;
-}
-
-.rotate-icon.rotated {
-    transform: rotate(90deg);
-}
-
 .bg-module {
     background-color: var(--module-bg);
 }

src/main/webapp/app/shared/standardized-competencies/knowledge-area-tree.component.html

@@ -2,7 +2,7 @@
     <mat-nested-tree-node *matTreeNodeDef="let knowledgeArea" [class.d-none]="!knowledgeArea.isVisible">
         <div class="card tree-card">
             <div class="d-flex align-items-center clickable me-2" matTreeNodeToggle>
-                <div class="icon-container me-2">
+                <div class="me-2">
                     <fa-icon [icon]="faChevronRight" class="rotate-icon chevron-position" [class.rotated]="treeControl.isExpanded(knowledgeArea)" />
                 </div>
                 <h5 class="mb-0">{{ knowledgeArea.title }}</h5>

src/main/webapp/app/shared/standardized-competencies/knowledge-area-tree.component.scss

@@ -1,16 +1,3 @@
-.chevron-position {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.rotate-icon {
-    transition: transform 0.3s ease;
-}
-
-.rotate-icon.rotated {
-    transform: rotate(90deg);
-}
-
 .tree-indent {
     padding-left: 3rem;
 }

src/main/webapp/content/scss/global.scss

@@ -315,6 +315,21 @@ a:hover {
     cursor: pointer;
 }
 
+/* Styles for rotating chevron icons */
+
+.rotate-icon {
+    transition: transform 0.3s ease;
+}
+
+.rotated {
+    transform: rotate(90deg);
+}
+
+.chevron-position {
+    display: inline-block;
+    vertical-align: middle;
+}
+
 /* ==========================================================================
 entity tables helpers
 ========================================================================== */