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; color: #129d99;
font-weight: 500; font-weight: 500;
} }
.confirm-btn:hover {
background-color: #129d99;
color: #ffffff;
}

View File

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

View File

@ -1,21 +1,55 @@
.clone-dialog { .clone-dialog {
.heading { .heading {
text-align: left; text-align: left;
font-weight: 700; font-weight: 700;
font-size: 18px; font-size: 18px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: #212121;
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
.heading-1 { .heading-1 {
text-align: center; text-align: left;
font-weight: 700; font-weight: 700;
font-size: 20px; font-size: 20px;
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: #212121;
opacity: 0.81; opacity: 0.81;
margin-bottom: 0.625rem; 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 class="col-auto field-title">{{ 'USER-PROFILE.ZENODO.TITLE' | translate}}</div>
</div> </div>
<div class="row"> <div class="row">
<div *ngIf="hasZenodo()" class="col-auto language-form"> <div *ngIf="hasZenodo()" class="col-auto language-form d-flex">
<mat-form-field> <mat-form-field>
<input type="text" placeholder="{{'USER-PROFILE.SETTINGS.ZENODO' | translate}}" value="{{zenodoEmail}}" matInput disabled> <input type="text" placeholder="{{'USER-PROFILE.SETTINGS.ZENODO' | translate}}" value="{{zenodoEmail}}" matInput disabled>
<mat-hint>{{'USER-PROFILE.ZENODO.DESCRIPTION' | translate}}</mat-hint> <mat-hint>{{'USER-PROFILE.ZENODO.DESCRIPTION' | translate}}</mat-hint>
</mat-form-field> </mat-form-field>
</div> <div *ngIf="hasZenodo()" class="col-auto d-flex">
<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 class="remove-btn"><button mat-raised-button type="button" (click)="RemoveZenodo()" class="confirm unlinkBtn">{{'USER-PROFILE.ZENODO.LOGOUT' | translate}}</button></div> </div>
</div> </div>
<div *ngIf="!hasZenodo()" class="col-md-4"> <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> <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 { .remove-btn {
padding-bottom: 1.34375em; padding-top: .8rem;
// padding-bottom: 1.34375em;
} }
.unlinkBtn { .unlinkBtn {