Running Prettier in Project

src/app/header/header-dropdown/header-dropdown.component.css

@@ -2,19 +2,19 @@
     width: fit-content;
     border-radius: 8px;
     background-color: #ffffff;
-    border: 1px solid rgba(46, 46, 46, .3);
+    border: 1px solid rgba(46, 46, 46, 0.3);
     box-sizing: 0 5px 25px rgba(0, 0, 0, 0.1);
     box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.2);
 }
 
 .dropdown:before {
-    content: '';
+    content: "";
     width: 15px;
     height: 15px;
     position: absolute;
     background-color: #ffffff;
-    border-top: 1px solid rgba(46, 46, 46, .3);
-    border-left: 1px solid rgba(46, 46, 46, .3);
+    border-top: 1px solid rgba(46, 46, 46, 0.3);
+    border-left: 1px solid rgba(46, 46, 46, 0.3);
     transform: translateX(120px) translateY(-50%) rotate(45deg);
 }
 .info {
@@ -40,7 +40,7 @@
 }
 
 .dropdown-item {
-    display: flex; 
+    display: flex;
     align-items: center;
     padding: 8px 30px;
     border-top: 1px solid rgba(0, 0, 0, 0.05);
@@ -59,14 +59,14 @@
 .dropdown-item:hover .icon-box fa-icon {
     opacity: 1;
     color: #f44336;
-    transition: .5s;
+    transition: 0.5s;
 }
 
 .dropdown-item p {
     color: #555555;
-    font-family: 'Montserrat', sans-serif;
+    font-family: "Montserrat", sans-serif;
     font-weight: 400;
     text-decoration: none;
     padding-left: 10px;
     margin: 0;
-}
+}

src/app/header/header-dropdown/header-dropdown.component.html

@@ -6,9 +6,12 @@
     [ignoreElementList]="ignoreClickOutside"
     [@dropdownState]="dropDownState"
     (@dropdownState.start)="$event.element.style.display = 'block'"
-    (@dropdownState.done)="$event.element.style.display = (state ? 'block' : 'none')">
+    (@dropdownState.done)="
+        $event.element.style.display = state ? 'block' : 'none'
+    "
+>
     <div class="info">
-        <h3>{{ this.user ? this.user.username : 'User Account' }}</h3>
+        <h3>{{ this.user ? this.user.username : "User Account" }}</h3>
     </div>
     <div #management>
         <ul class="user-management" *ngIf="!this.user">
@@ -34,13 +37,19 @@
             </li>
             <li class="dropdown-item" (click)="onHelpClicked()">
                 <div class="icon-box">
-                    <fa-icon class="fas fa-question-circle" [icon]="questionCircleIcon"></fa-icon>
+                    <fa-icon
+                        class="fas fa-question-circle"
+                        [icon]="questionCircleIcon"
+                    ></fa-icon>
                 </div>
                 <p>Help</p>
             </li>
             <li class="dropdown-item" (click)="onLogout()">
                 <div class="icon-box">
-                    <fa-icon class="fas fa-sign-out-alt" [icon]="signOutAltIcon"></fa-icon>
+                    <fa-icon
+                        class="fas fa-sign-out-alt"
+                        [icon]="signOutAltIcon"
+                    ></fa-icon>
                 </div>
                 <p>Logout</p>
             </li>

src/app/header/header-dropdown/header-dropdown.component.spec.ts

@@ -8,9 +8,8 @@ describe('HeaderDropdownComponent', () => {
 
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            declarations: [ HeaderDropdownComponent ]
-        })
-            .compileComponents();
+            declarations: [HeaderDropdownComponent],
+        }).compileComponents();
 
         fixture = TestBed.createComponent(HeaderDropdownComponent);
         component = fixture.componentInstance;

src/app/header/header-dropdown/header-dropdown.component.ts

@@ -1,12 +1,32 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import {Component, ComponentRef, EventEmitter, Input, OnDestroy, OnInit, Output, ViewContainerRef} from '@angular/core';
-import { faEdit, faQuestionCircle, faSignOutAlt, faUser } from '@fortawesome/free-solid-svg-icons';
+import {
+    animate,
+    state,
+    style,
+    transition,
+    trigger,
+} from '@angular/animations';
+import {
+    Component,
+    ComponentRef,
+    EventEmitter,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    ViewContainerRef,
+} from '@angular/core';
+import {
+    faEdit,
+    faQuestionCircle,
+    faSignOutAlt,
+    faUser,
+} from '@fortawesome/free-solid-svg-icons';
 import { Subscription } from 'rxjs';
 import { AuthService } from 'src/app/shared/auth/auth.service';
-import {User} from "../../shared/model/user/user.model";
-import UserChecker from "../../shared/model/user/user.checker";
-import {HelpComponent} from "../header-popup/help/help.component";
-import {MyProfileComponent} from "../header-popup/my-profile/my-profile.component";
+import { User } from '../../shared/model/user/user.model';
+import UserChecker from '../../shared/model/user/user.checker';
+import { HelpComponent } from '../header-popup/help/help.component';
+import { MyProfileComponent } from '../header-popup/my-profile/my-profile.component';
 
 @Component({
     selector: 'app-header-dropdown',
@@ -14,19 +34,24 @@ import {MyProfileComponent} from "../header-popup/my-profile/my-profile.componen
     styleUrls: ['./header-dropdown.component.css'],
     animations: [
         trigger('dropdownState', [
-            state('hide', style({
-                'opacity': '0'
-            })),
-            state('show', style({
-                'opacity': '1'
-            })),
+            state(
+                'hide',
+                style({
+                    opacity: '0',
+                }),
+            ),
+            state(
+                'show',
+                style({
+                    opacity: '1',
+                }),
+            ),
             transition('hide => show', animate('20ms ease-in')),
-            transition('show => hide', animate('5ms ease-out'))
-        ])
-    ]
+            transition('show => hide', animate('5ms ease-out')),
+        ]),
+    ],
 })
 export class HeaderDropdownComponent implements OnInit, OnDestroy {
-
     userIcon = faUser;
 
     editIcon = faEdit;
@@ -40,38 +65,41 @@ export class HeaderDropdownComponent implements OnInit, OnDestroy {
     private userSubscription!: Subscription;
 
     @Input()
-        state: boolean = false;
+    state: boolean = false;
 
     @Input()
-        ignoreClickOutside!: HTMLDivElement[];
+    ignoreClickOutside!: HTMLDivElement[];
 
     @Output()
-        clickOutside = new EventEmitter();
+    clickOutside = new EventEmitter();
 
     @Output()
-        loginPopupState: EventEmitter<boolean> = new EventEmitter();
+    loginPopupState: EventEmitter<boolean> = new EventEmitter();
 
     @Output()
-        signupPopupState: EventEmitter<boolean> = new EventEmitter();
+    signupPopupState: EventEmitter<boolean> = new EventEmitter();
 
     @Output()
-        helpPopupState: EventEmitter<boolean> = new EventEmitter();
+    helpPopupState: EventEmitter<boolean> = new EventEmitter();
 
     @Output()
-        myProfilePopupState: EventEmitter<boolean> = new EventEmitter();
+    myProfilePopupState: EventEmitter<boolean> = new EventEmitter();
 
-    constructor(private viewContainerRef: ViewContainerRef, private authService: AuthService) { }
+    constructor(
+        private viewContainerRef: ViewContainerRef,
+        private authService: AuthService,
+    ) {}
 
     ngOnInit(): void {
         this.userSubscription = this.authService.authSubject.subscribe(
-            res => {
+            (res) => {
                 if (res && UserChecker.test(res)) {
                     this.user = <User>res;
                 } else {
                     this.user = null;
                 }
-            }
-        )
+            },
+        );
     }
 
     ngOnDestroy(): void {