diff options
Diffstat (limited to 'src/DevHive.Angular')
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 { |