diff --git a/cerberus/src/app/applications/status/status.component.html b/cerberus/src/app/applications/status/status.component.html
index c8ff217..1fe7cd1 100644
--- a/cerberus/src/app/applications/status/status.component.html
+++ b/cerberus/src/app/applications/status/status.component.html
@@ -1,13 +1,13 @@
-
-
- There is no any application.
-
-
- Add one by clicking here:
-
-
+
+
There is no any application.
+
+ Add one by clicking here:
+
+
+
\ No newline at end of file
diff --git a/cerberus/src/app/core/components/application-card/application-card.component.html b/cerberus/src/app/core/components/application-card/application-card.component.html
index 4f13caf..bc9d6bd 100644
--- a/cerberus/src/app/core/components/application-card/application-card.component.html
+++ b/cerberus/src/app/core/components/application-card/application-card.component.html
@@ -2,6 +2,11 @@
+
+ edit
+
{{applicationStatus?.application?.name}}
\ No newline at end of file
diff --git a/cerberus/src/app/core/components/application-card/application-card.component.scss b/cerberus/src/app/core/components/application-card/application-card.component.scss
index 478196a..d858a6a 100644
--- a/cerberus/src/app/core/components/application-card/application-card.component.scss
+++ b/cerberus/src/app/core/components/application-card/application-card.component.scss
@@ -7,6 +7,12 @@
.logo {
position: relative;
+
+ &:hover {
+ button {
+ opacity: 1;
+ }
+ }
img {
width: 164px;
@@ -34,6 +40,14 @@
border: 2px solid #770000;
}
}
+
+ button {
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ opacity: 0;
+ transition: opacity .2s ease;
+ }
}
diff --git a/cerberus/src/app/core/components/application-card/application-card.component.ts b/cerberus/src/app/core/components/application-card/application-card.component.ts
index 754d506..adc3fa8 100644
--- a/cerberus/src/app/core/components/application-card/application-card.component.ts
+++ b/cerberus/src/app/core/components/application-card/application-card.component.ts
@@ -2,6 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
import { Application } from '../../entities/Application';
import { ApplicationStatus } from '../../entities/ApplicationStatus';
import { ApplicationService } from '../../services/application.service';
+import { ModalService } from '../../services/modal.service';
interface AppDisplaying {
name: string,
@@ -18,6 +19,11 @@ export class ApplicationCardComponent {
@Input() applicationStatus: ApplicationStatus | undefined;
constructor(
- private _applicationService: ApplicationService
+ private _applicationService: ApplicationService,
+ private _modalService: ModalService
) {}
+
+ edit(): void {
+ // this._modalService.open();
+ }
}
diff --git a/cerberus/src/components-styles/button.scss b/cerberus/src/components-styles/button.scss
index ff8e761..d279a29 100644
--- a/cerberus/src/components-styles/button.scss
+++ b/cerberus/src/components-styles/button.scss
@@ -1,50 +1,62 @@
-@import '../colors.scss';
+@import "../colors.scss";
+
+button, a.button {
+ background-image: linear-gradient(
+ $btn-primary-background-top,
+ $btn-primary-background-bottom
+ );
+ color: white;
+ border: solid 1px $btn-primary-background-bottom;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-width: 5rem;
+ border-radius: 0.3rem;
+ padding: 0.15rem 1rem;
+ font-weight: 600;
+ margin: 0.2rem 0.5rem;
+
+ &:active {
+ border-color: $btn-primary-active-border;
+ background-image: linear-gradient(
+ $btn-primary-active-background-top,
+ $btn-primary-active-background-bottom
+ );
+ }
+
+ &.secondary {
+ background-image: none;
+ background-color: $btn-secondary-background;
+ border-color: $btn-secondary-border;
+ color: #222;
+ font-weight: 500;
-button {
- // background-color: $blue;
- background-image: linear-gradient($btn-primary-background-top, $btn-primary-background-bottom);
- color: white;
- border: solid 1px $btn-primary-background-bottom;
- display: flex;
- justify-content: center;
- align-items: center;
- min-width: 5rem;
- border-radius: .3rem;
- padding: .15rem 1rem;
- font-weight: 600;
- margin: .2rem .5rem;
-
&:active {
- border-color: $btn-primary-active-border;
- background-image: linear-gradient($btn-primary-active-background-top, $btn-primary-active-background-bottom);
+ background-color: $btn-secondary-active-background;
+ border-color: $btn-secondary-active-border;
}
-
- &.secondary {
- background-image: none;
- background-color: $btn-secondary-background;
- border-color: $btn-secondary-border;
- color: #222;
- font-weight: 500;
-
- &:active {
- background-color: $btn-secondary-active-background;
- border-color: $btn-secondary-active-border;
- }
+ }
+
+ &.help {
+ border-radius: 10em;
+ padding: 0;
+ background-image: none;
+ background-color: #eeeeee;
+ color: #333;
+ border-color: #bbb;
+ min-width: min-content;
+ width: 1.5rem;
+ height: 1.5rem;
+
+ &:hover {
+ background-color: #dddddd;
}
-
- &.help {
- border-radius: 10em;
- padding: 0;
- background-image: none;
- background-color: #eeeeee;
- color: #333;
- border-color: #bbb;
- min-width: min-content;
- width: 1.5rem;
- height: 1.5rem;
-
- &:hover {
- background-color: #dddddd;
- }
- }
- }
\ No newline at end of file
+ }
+
+ &.icon {
+ padding-left: 0;
+ padding-right: 0;
+ min-width: 25px;
+ width: 25px;
+ }
+}