From 5fb6e62017a5a97beb3520d50a8eed5df12818a8 Mon Sep 17 00:00:00 2001
From: apapachristou <apapachristou@cite.gr>
Date: Thu, 31 Oct 2019 10:19:56 +0200
Subject: [PATCH] Styles published icon on dmp listing

---
 .../dmp-info-counter.component.spec.ts        | 25 -------------------
 .../dmp-listing-item.component.html           |  5 ++--
 .../dmp-listing-item.component.scss           | 20 +++++++++++++++
 .../explore-dmp-listing-item.component.html   |  4 +--
 4 files changed, 23 insertions(+), 31 deletions(-)
 delete mode 100644 dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.spec.ts

diff --git a/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.spec.ts b/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.spec.ts
deleted file mode 100644
index 25f83e934..000000000
--- a/dmp-frontend/src/app/ui/dashboard/dmp-info-counter/dmp-info-counter.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { DmpInfoCounterComponent } from './dmp-info-counter.component';
-
-describe('DmpInfoCounterComponent', () => {
-  let component: DmpInfoCounterComponent;
-  let fixture: ComponentFixture<DmpInfoCounterComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ DmpInfoCounterComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(DmpInfoCounterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
index 07a9a11b0..bcf1271df 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
@@ -34,9 +34,8 @@
 					<mat-icon *ngIf="isFinalized && !isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.FINALIZED' | translate}}" class="lock-icon">
 						lock
 					</mat-icon>
-					<mat-icon *ngIf="isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}" class="published-icon">
-						radio_button_checked
-					</mat-icon>
+					<div *ngIf="isPublished" class="outer-circle"><div class="inner-circle" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}"></div></div>
+					<!-- <mat-icon *ngIf="isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon> -->
 				</div>
 				<div class="col">
 					<div class="row d-flex flex-wrap">
diff --git a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
index 7d71dac05..41678d7ac 100644
--- a/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
+++ b/dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
@@ -86,3 +86,23 @@ p {
 .description {
   margin-bottom: 0.4em;
 }
+
+.outer-circle {
+  background: #08bd6342;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  position: relative;
+  margin-top: 3px;
+}
+
+.inner-circle {
+  position: absolute;
+  background: #08bd63;
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+  top: 50%;
+  left: 50%;
+  margin: -5px 0px 0px -5px;
+}
diff --git a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
index 7f809c7b2..1668731ed 100644
--- a/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
+++ b/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
@@ -8,9 +8,7 @@
 			</div>
 			<div class="row">
 				<div class="col-auto">
-					<div class="outer-circle">
-						<div class="inner-circle" matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}"></div>
-					</div>
+					<div class="outer-circle"><div class="inner-circle" matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}"></div></div>
 					<!-- <mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">fiber_manual_record</mat-icon> -->
 					<!-- <mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon> -->
 				</div>