Style changes on buttons

This commit is contained in:
apapachristou 2020-10-26 17:31:39 +02:00
parent 5b78943131
commit cd618563bf
5 changed files with 70 additions and 27 deletions

View File

@ -30,3 +30,8 @@
color: #129d99;
font-weight: 500;
}
.confirm-btn:hover {
background-color: #129d99;
color: #ffffff;
}

View File

@ -1,6 +1,9 @@
<div class="clone-dialog">
<div *ngIf="!data.isNewVersion" class="heading-1">{{'DMP-EDITOR.TITLE.CLONE-DMP' | translate}}</div>
<div *ngIf="data.isNewVersion" class="heading-1">{{'DMP-EDITOR.TITLE.NEW-VERSION' | translate}}</div>
<div mat-dialog-title class="row d-flex m-0">
<div *ngIf="!data.isNewVersion" class="heading-1">{{'DMP-EDITOR.TITLE.CLONE-DMP' | translate}}</div>
<div *ngIf="data.isNewVersion" class="heading-1">{{'DMP-EDITOR.TITLE.NEW-VERSION' | translate}}</div>
<span class="ml-auto align-self-center" (click)="close()"><mat-icon class="close-icon">close</mat-icon></span>
</div>
<!-- Title Field -->
<div class="row">
<div class="col-12">
@ -66,7 +69,7 @@
</div>
<div class="row pt-4">
<div class="col"></div>
<div class="col-auto"><button mat-raised-button type="button" (click)="cancel()">{{ data.cancelButton }}</button></div>
<div class="col-auto"><button mat-raised-button type="button" (click)="confirm()" color="accent">{{ data.confirmButton }}</button></div>
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button></div>
<div class="col-auto"><button mat-raised-button type="button" class="confirm-btn" (click)="confirm()" color="accent">{{ data.confirmButton }}</button></div>
</div>
</div>

View File

@ -1,21 +1,55 @@
.clone-dialog {
.heading {
text-align: left;
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-bottom: 0.625rem;
}
.heading {
text-align: left;
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-bottom: 0.625rem;
}
.heading-1 {
text-align: center;
font-weight: 700;
font-size: 20px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-bottom: 0.625rem;
}
.heading-1 {
text-align: left;
font-weight: 700;
font-size: 20px;
letter-spacing: 0px;
color: #212121;
opacity: 0.81;
margin-bottom: 0.625rem;
}
.close-icon {
cursor: pointer;
margin-right: 20px;
}
// .close-icon:hover {
// background-color: #ECECED !important;
// border-radius: 50%;
// }
.cancel-btn {
width: 101px;
height: 43px;
background: #ffffff;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}
.confirm-btn {
width: 84px;
height: 43px;
background: #ffffff;
color: #129d99;
border: 1px solid #129d99;
border-radius: 30px;
opacity: 1;
}
.confirm-btn:hover {
background-color: #129d99;
color: #ffffff;
}
}

View File

@ -186,14 +186,14 @@
<div class="col-auto field-title">{{ 'USER-PROFILE.ZENODO.TITLE' | translate}}</div>
</div>
<div class="row">
<div *ngIf="hasZenodo()" class="col-auto language-form">
<div *ngIf="hasZenodo()" class="col-auto language-form d-flex">
<mat-form-field>
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.ZENODO' | translate}}" value="{{zenodoEmail}}" matInput disabled>
<mat-hint>{{'USER-PROFILE.ZENODO.DESCRIPTION' | translate}}</mat-hint>
</mat-form-field>
</div>
<div *ngIf="hasZenodo()" class="col-auto d-flex align-items-center">
<div class="remove-btn"><button mat-raised-button type="button" (click)="RemoveZenodo()" class="confirm unlinkBtn">{{'USER-PROFILE.ZENODO.LOGOUT' | translate}}</button></div>
<div *ngIf="hasZenodo()" class="col-auto d-flex">
<div class="remove-btn"><button mat-raised-button type="button" (click)="RemoveZenodo()" class="confirm unlinkBtn">{{'USER-PROFILE.ZENODO.LOGOUT' | translate}}</button></div>
</div>
</div>
<div *ngIf="!hasZenodo()" class="col-md-4">
<button mat-raised-button type="button" (click)="loginToZenodo()" class="confirm" color="primary">{{'USER-PROFILE.ZENODO.LOGIN' | translate}}</button>

View File

@ -98,7 +98,8 @@
}
.remove-btn {
padding-bottom: 1.34375em;
padding-top: .8rem;
// padding-bottom: 1.34375em;
}
.unlinkBtn {