Better and Responsive Picture Selector

src/app/header/header-popup/my-profile/my-profile.component.css

@@ -2,13 +2,7 @@
     margin: 0;
 }
 
-.profile-container .row {
+.profile-options-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-
-.profile-container {
     justify-content: space-around;
     display: flex !important;
     flex-direction: column;
@@ -18,6 +12,14 @@
     max-width: 400px;
 }
 
+.profile-options-row {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+}
+
 .separator-line {
     justify-content: center;
     align-content: center;
@@ -33,7 +35,7 @@
     border-radius: 50px;
 }
 
-.profile-container button {
+.profile-options-container button {
 
     text-decoration: none;
     border-radius: 8px;
@@ -56,7 +58,7 @@
 
 @media (min-width:767px) {
 
-    .profile-container {
+    .profile-options-container {
         all: unset;
         justify-content: space-around;
         width: 600px;
@@ -65,7 +67,7 @@
         height: 200px;
     }
 
-    .profile-container .row {
+    .profile-options-container .row {
         all: unset;
         display: flex;
         height: 200px;

src/app/header/header-popup/my-profile/my-profile.component.html

@@ -9,11 +9,11 @@
                        [@showErrorMessage]="showErrorMessage()">
         </app-error-box>
 
-        <div class="container profile-container"
+        <div class="container profile-options-container"
              [@hideAuthContainer]="hideErrorMessage()"
              (@hideAuthContainer.done)="hideAuthContainer($event)">
 
-            <div class="row">
+            <div class="row profile-options-row">
 
                 <div class="btn-container">
                     <app-profile-picture-picker

src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.html

@@ -8,12 +8,12 @@
                    (change)="handleFileInput($event)">
             <label class="custom-file-label"
                    for="inputProfilePicture">
-                Profile Picture
+                {{isProfilePictureSelected ? getFileName() : 'Profile Picture'}}
             </label>
         </div>
         <div class="input-group-append">
             <button class="btn btn-outline-secondary"
-            [disabled]="isProfilePictureSelected"
+            [disabled]="!isProfilePictureSelected"
             (click)="uploadProfilePicture()">Upload</button>
         </div>
     </div>

src/app/header/header-popup/my-profile/profile-picture-picker/profile-picture-picker.component.ts

@@ -28,8 +28,12 @@ export class ProfilePicturePickerComponent  {
         this.imageSent.emit(true);
     }
 
+    getFileName(): string {
+        return this.profilePicture.name;
+    }
+
     get isProfilePictureSelected(): boolean {
-        return !this.profilePicture;
+        return !!this.profilePicture;
     }
 
 }