refactor: adjustments and improvements

Data-Export:
- Minor styling changes

Login:
- add aria labels

Welcome-Banner:
- bug fixing

Styles:
- minor adjustments

User Profil:
- new default picture 
- label for file upload
- minor styling changes

frontend/src/app/data-export/data-export.component.scss

@@ -32,4 +32,6 @@ mat-card{
 
 .captcha-image {
  float: left;
+ margin-top: 20px;
+ margin-bottom: 10px;
 }

frontend/src/app/login/login.component.html

@@ -27,11 +27,11 @@ <h1>Login</h1>
  <button *ngIf="hide" mat-icon-button matSuffix (click)="hide = !hide"
  aria-label="Button to display the password" matTooltip="{{ 'SHOW_PWD_TOOLTIP' | translate }}"
  matTooltipPosition=right>
- <i class="fas fa-eye"></i>
+ <i class="fas fa-eye" aria-label="Eye"></i>
  </button>
  <button *ngIf="!hide" mat-icon-button matSuffix (click)="hide = !hide" aria-label="Button to hide the password" matTooltip="{{ 'HIDE_PWD_TOOLTIP' | translate }}"
  matTooltipPosition=right>
- <i class="fas fa-eye-slash"></i>
+ <i class="fas fa-eye-slash" aria-label="Eye Slash"></i>
  </button>
  <mat-error *ngIf="passwordControl.invalid" translate>MANDATORY_PASSWORD</mat-error>
  </mat-form-field>
@@ -61,7 +61,7 @@ <h1>Login</h1>
  </div>
 
  <button id="loginButtonGoogle" *ngIf="!oauthUnavailable" mat-raised-button color="accent" (click)="googleLogin()"
- aria-label="Login with Google"><i
+ aria-label="Login with Google" class="gButton"><i
  class="fab fa-google fa-lg"></i> {{'BTN_GOOGLE_LOGIN' | translate}}
  </button>
 

frontend/src/app/welcome-banner/welcome-banner.component.html

@@ -1,7 +1,7 @@
 <div class="mat-typography">
  <h1><span translate [translateParams]="{appname: applicationName}">WELCOME_BANNER_TITLE</span></h1>
  <div class="text-justify" [innerHtml]="'WELCOME_BANNER_DESCRIPTION' | translate:{appname: applicationName}"></div>
- <button mat-button mat-raised-button class="close-dialog" (click)="closeWelcome()" color="primary">
+ <button mat-raised-button class="close-dialog" (click)="closeWelcome()" color="primary">
  {{"BTN_DISMISS" | translate}}
  </button>
 </div>

frontend/src/styles.scss

@@ -12,6 +12,10 @@
  a:active {
  text-decoration: underline;
  }
+
+ a{
+ outline: none;
+ }
 }
 
 @mixin notification-theme($theme) {
@@ -92,13 +96,20 @@
  }
 }
 
+@mixin gButton($theme) {
+ .gButton {
+ background-color: mat-color(map-get($theme, accent), darker) !important;
+ }
+}
+
 @mixin custom-components-theme($theme) {
  @include link-theme($theme);
  @include notification-theme($theme);
  @include image-thumbnail-theme($theme);
  @include bar-rating-theme($theme);
  @include score-star-theme($theme);
  @include snackbar($theme);
+ @include gButton($theme);
 }
 
 .deeppurple-amber-theme {

views/userProfile.pug

@@ -41,11 +41,12 @@ html(lang='en')
  .mdl-card__supporting-text.mdl-grid.mdl-grid--no-spacing
  h1.mdl-cell.mdl-cell--12-col(style='color: _textColor_; font-size: 24px; line-height: 32px; margin-top: 16px; margin-bottom: 16px; font-weight: 400;') User Profile
  .mdl-cell.mdl-cell--6-col-desktop.mdl-cell--12-col-tablet.mdl-cell--12-col-phone
- img.img-rounded(src='assets/public/images/uploads/' + profileImage, alt='Cinque Terre', width='90%', height='236', style='margin-right: 5%; margin-left: 5%;')
+ img.img-rounded(src='assets/public/images/uploads/' + profileImage, alt='profile picture', width='90%', height='236', style='margin-right: 5%; margin-left: 5%;')
  p(style='margin-top:8%; color: _textColor_; text-align: center;') _username_
  form(action='/profile/image/file' , style='margin-top:10%; width: 90%; margin-right: auto; margin-left: auto;', method='post', enctype='multipart/form-data')
  .form-group
- input#picture(type='file', accept='image/*', name='file', size='150', style='color: _textColor_;', aria-label='Input for selecting the profile picture')
+ label(for='picture', style='color: _textColor_; font-size: 12px;') File Upload:
+ input#picture(type='file', accept='image/*', name='file', size='150', style='color: _textColor_; margin-top: 4px;', aria-label='Input for selecting the profile picture')
  .mdl-tooltip(for='picture', style='width: 150px; text-align: left;')
  | • Maximum file size 150Kb
  br