Made profile editing of languages and technologies in profile settings page look a lot better

4 files changed, 60 insertions, 18 deletions

diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
index 7e0978d..2aecef5 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.css
@@ -50,12 +50,40 @@ hr {
   transform: translate(0, -1.2em);
 }
 
+#all-languages, #all-technologies {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#all-languages > *, #all-technologies > * {
+  width: fit-content;
+  margin-top: .1em;
+  margin-bottom: .1em;
+}
+
 /* Buttons */
 
+.edit-btn {
+  border-radius: 0 !important;
+  color: var(--focus-color);
+  background-color: white;
+  border-color: var(--focus-color);
+}
+
+.edit-btn:hover {
+  color: white;
+  background-color: black;
+  border-color: black !important;
+}
+
 .submit-btn {
   margin-bottom: .5em;
 }
 
+#update-profile-btn {
+  margin-top: 1em;
+}
+
 #delete-account:hover {
   color: indianred;
   border-color: indianred !important;
diff --git a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
index 16b537c..1b713d7 100644
--- a/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
+++ b/src/DevHive.Angular/src/app/components/profile-settings/profile-settings.component.html
@@ -58,28 +58,42 @@
 					<label *ngIf="updateUserFormGroup.get('password')?.errors?.pattern" class="error">*At least 1 number</label>
 				</div>
 			</div>
-			<button type="button" (click)="toggleLanguages()">Edit Languages</button>
+			<button type="button" class="submit-btn edit-btn" (click)="toggleLanguages()">▼ Edit Languages ▼</button>
 			<div *ngIf="showLanguages">
-				Type in your desired languages, separated by a space.
-				<input type="text" class="input-field" formControlName="languageInput" required>
+				<div class="input-selection">
+					<input type="text" class="input-field" formControlName="languageInput" required>
+
+					<div class="input-errors">
+						<label class="error">Type in your desired languages, separated by a space</label>
+					</div>
+				</div>
 				Available languages:
-				<div *ngFor="let lang of availableLanguages">
-					{{ lang.name }}
+				<div id="all-languages">
+					<div class="user-language" *ngFor="let lang of availableLanguages">
+						{{ lang.name }}
+					</div>
 				</div>
 			</div>
 
-			<button type="button" (click)="toggleTechnologies()">Edit Technologies</button>
+			<button type="button" class="submit-btn edit-btn" (click)="toggleTechnologies()">▼ Edit Technologies ▼</button>
 			<div *ngIf="showTechnologies">
-				Type in your desired technologies, separated by a space.
-				<input type="text" class="input-field" formControlName="technologyInput" required>
+				<div class="input-selection">
+					<input type="text" class="input-field" formControlName="technologyInput" required>
+
+					<div class="input-errors">
+						<label class="error">Type in your desired technologies, separated by a space</label>
+					</div>
+				</div>
 				Available technologies:
-				<div *ngFor="let tech of availableTechnologies">
-					{{ tech.name }}
+				<div id="all-technologies">
+					<div class="user-technology" *ngFor="let tech of availableTechnologies">
+						{{ tech.name }}
+					</div>
 				</div>
 			</div>
 
 
-			<button class="submit-btn" type="submit">Update profile</button>
+			<button id="update-profile-btn" class="submit-btn" type="submit">Update profile</button>
 			<app-success-bar></app-success-bar>
 			<app-error-bar></app-error-bar>
 		</form>
diff --git a/src/DevHive.Angular/src/app/components/profile/profile.component.css b/src/DevHive.Angular/src/app/components/profile/profile.component.css
index 7d96624..3f9ede3 100644
--- a/src/DevHive.Angular/src/app/components/profile/profile.component.css
+++ b/src/DevHive.Angular/src/app/components/profile/profile.component.css
@@ -74,13 +74,6 @@ hr {
   align-items: center;
 }
 
-.user-language, .user-technology {
-  border-radius: .4em;
-  background-color: lightgrey;
-  padding: .2em;
-  margin: 0 .2em;
-}
-
 /* Posts */
 
 #posts {
diff --git a/src/DevHive.Angular/src/styles.css b/src/DevHive.Angular/src/styles.css
index 1320795..aaa1bd5 100644
--- a/src/DevHive.Angular/src/styles.css
+++ b/src/DevHive.Angular/src/styles.css
@@ -73,6 +73,13 @@ input:focus, button:focus {
   scrollbar-width: none;  /* Firefox */
 }
 
+.user-language, .user-technology {
+  border-radius: .4em;
+  background-color: lightgrey;
+  padding: .26em;
+  margin: 0 .2em;
+}
+
 /* Inputs, the type found in login and register */
 
 .input-selection {