kuhyx/ARAI
1
0
Fork 0
mirror of https://github.com/kuhyx/ARAI.git synced 2026-07-04 15:43:12 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: final version

Browse Source
This commit is contained in:
Krzysztof Rudnicki 2024-03-09 21:24:12 +01:00
parent 81612bbc39
commit 4e0412a48d
2 changed files with 45 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
arai-frontend/src/app/cost-view/cost-view.component.html
View File

@ -1,3 +1,4 @@
<div class="main">
<div class="legal-costs"> <div class="legal-costs">
Przewidywalne minimalne koszta: Przewidywalne minimalne koszta:
@if(costData !== null) { @if(costData !== null) {
@ -9,7 +10,9 @@
</div> </div>
<h1 class="bait"> Chcesz zminimalizować koszta aż o <strong> 90%? </strong> </h1> <h1 class="bait"> Chcesz zminimalizować koszta aż do <strong> 90%? </strong> </h1>
<div class="center-button"> <div class="center-button">
<button mat-raised-button color="primary" class="find-mediator" type="submit" (click)="onSubmit()" class="submit-button">Znajdź Mediatora</button> <button mat-raised-button color="primary" class="find-mediator" type="submit" (click)="onSubmit()" class="submit-button">Znajdź Mediatora</button>
</div> </div>
</div>

65
arai-frontend/src/app/cost-view/cost-view.component.scss
View File

@ -1,44 +1,51 @@
.legal-costs { .legal-costs {
font-family: 'Times New Roman', serif; font-family: 'Times New Roman', serif;
color: #2a2a2a; // Dark text for readability color: #2a2a2a;
background-color: #f5f5f5; // Light background to keep the content subtle background-color: #f5f5f5;
padding: 20px; padding: 20px;
border: 1px solid #ddd; // Slight border for definition border: 1px solid #ddd;
border-radius: 5px; // Soften the edges for a modern look border-radius: 5px;
font-size: 16px; font-size: 16px;
width: 300px;
margin: 0 auto;
}
.cost-details { .main {
margin-top: 10px; display: flex;
padding: 10px; justify-content: center;
background-color: #fff; // A clean background for the cost details flex-direction: column;
border-left: 5px solid #004085; // A striking left border for emphasis }
font-size: 24px;
span { .legal-costs .cost-details {
font-weight: bold; // Make the dynamic content pop margin-top: 10px;
} padding: 10px;
background-color: #fff;
border-left: 5px solid #004085;
font-size: 24px;
}
.cost { .legal-costs .cost-details span {
color: #007bff; // A professional blue for costs font-weight: bold;
} }
.time { .legal-costs .cost-details .cost {
color: #28a745; // A hopeful green for the time color: #007bff;
} }
}
}
.legal-costs .cost-details .time {
color: #28a745;
}
.bait { .bait {
text-align: center; text-align: center;
} }
.find-mediator { .find-mediator {
width: 100%; width: 100%;
} }
.center-button { .center-button {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }