From b2ed1699761182e9b3b76d3e5067bf8b5936a585 Mon Sep 17 00:00:00 2001
From: mchouliara <mchouliara@cite.gr>
Date: Tue, 3 Sep 2024 17:39:38 +0300
Subject: [PATCH] fix attach file button styling, load more button

---
 ...description-template.dialog.component.scss |  17 +-
 ...mport-plan-blueprint.dialog.component.scss |  14 --
 .../editor/logo/logo-editor.component.scss    |  15 --
 .../recent-edited-activity.component.html     |   2 +-
 .../recent-edited-activity.component.scss     |  13 --
 .../form-field/form-field.component.html      |   4 +-
 .../form-field/form-field.component.scss      |  21 ---
 .../description-listing.component.html        |   2 +-
 .../description-listing.component.scss        |  13 --
 .../description-listing-item.component.scss   |  14 --
 .../plan-listing-item.component.scss          |  14 --
 .../plan/listing/plan-listing.component.html  |   2 +-
 .../plan/listing/plan-listing.component.scss  |  12 --
 .../plan-upload-dialog.component.html         |   6 +-
 .../plan-upload-dialog.component.scss         |  37 +---
 frontend/src/styles.scss                      | 164 +++++++++++-------
 16 files changed, 112 insertions(+), 238 deletions(-)

diff --git a/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.scss b/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.scss
index 2e681f421..953b0aa1a 100644
--- a/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.scss
+++ b/frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.scss
@@ -46,19 +46,4 @@
 
 .attach-btn {
 	top: -20px;
-}
-
-.attach-file {
-	width: 156px;
-	height: 44px;
-	color: #ffffff;
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #1e202029;
-	border-radius: 30px;
-}
-
-.attach-file:hover {
-	background-color: #ffffff;
-	border: 1px solid var(--primary-color);
-	color: var(--primary-color);
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss
index c79fa2851..0b4772fdb 100644
--- a/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss
+++ b/frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss
@@ -82,20 +82,6 @@ min-width: 101px;
 	top: -20px;
 }
 
-.attach-file {
-	width: 156px;
-	height: 44px;
-	color: #ffffff;
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #1e202029;
-	border-radius: 30px;
-}
-
-.attach-file:hover {
-	background-color: #ffffff;
-	border: 1px solid var(--primary-color);
-	color: var(--primary-color);
-}
 
 .close-btn:hover{
     cursor: pointer;
diff --git a/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.scss b/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.scss
index 67a64bbdd..aac6fad40 100644
--- a/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.scss
+++ b/frontend/src/app/ui/admin/tenant-configuration/editor/logo/logo-editor.component.scss
@@ -2,18 +2,3 @@
 .attach-btn {
 	top: -20px;
 }
-
-.attach-file {
-	width: 156px;
-	height: 44px;
-	color: #ffffff;
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #1e202029;
-	border-radius: 30px;
-}
-
-.attach-file:hover {
-	background-color: #ffffff;
-	border: 1px solid var(--primary-color);
-	color: var(--primary-color);
-}
diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
index e43e63e73..ed95af6ee 100644
--- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
+++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
@@ -44,7 +44,7 @@
 			</div>
 
 			<div *ngIf="listingItems && listingItems.length > 0 && this.lookup.page.offset < currentPage*pageSize" class="d-flex justify-content-center">
-				<button type="button" mat-button class="rounded-btn btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+				<button type="button" mat-button class="rounded-btn load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
index aa2a0bc13..30ec96771 100644
--- a/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
+++ b/frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.scss
@@ -78,19 +78,6 @@ input[type="text"] {
 	color: var(--primary-color) !important;
 }
 
-.btn-load-more {
-	border: 2px solid #212121;
-	opacity: 1;
-	min-width: 132px;
-    width: auto;
-	margin-top: 4.125rem;
-}
-
-.btn-load-more:hover {
-	background-color: black;
-	color: white;
-}
-
 .draft {
 	color: #f16868;
 }
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
index 1a5de3cf4..32013b6ef 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.html
@@ -140,12 +140,12 @@
 			</ngx-dropzone>
 		</div>
 		<div class="col-12 d-flex justify-content-center attach-btn">
-			<button *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file-btn" [disabled]="!!propertiesFormGroup?.get(field.id).get('textValue').value || propertiesFormGroup?.get(field.id).get('textValue').disabled">
+			<button *ngIf="!propertiesFormGroup?.get(field.id).get('textValue').value || filesToUpload" mat-button (click)="drop.showFileSelector()" type="button" class="attach-file" [disabled]="!!propertiesFormGroup?.get(field.id).get('textValue').value || propertiesFormGroup?.get(field.id).get('textValue').disabled">
 				<mat-icon class="mr-2">upload</mat-icon>
 				<mat-label>{{field.data.label}}</mat-label>
 			</button>
 
-			<button *ngIf="propertiesFormGroup?.get(field.id).get('textValue').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file-btn">
+			<button *ngIf="propertiesFormGroup?.get(field.id).get('textValue').value && !filesToUpload" mat-button (click)="download()" type="button" class="attach-file">
 				<mat-icon class="mr-2">download</mat-icon>
 				<mat-label>{{ "TYPES.DESCRIPTION-TEMPLATE-UPLOAD-TYPE.DOWNLOAD" | translate }}</mat-label>
 			</button>
diff --git a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.scss b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.scss
index 0326f3911..daa2ebed0 100644
--- a/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.scss
+++ b/frontend/src/app/ui/description/editor/description-form/components/form-field/form-field.component.scss
@@ -34,27 +34,6 @@
 	top: -20px;
 }
 
-.attach-file-btn {
-	min-width: 156px;
-	height: 44px;
-	color: #ffffff;
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #1e202029;
-	border-radius: 30px;
-}
-
-.attach-file-btn:hover {
-	background-color: #ffffff;
-	border: 1px solid var(--primary-color);
-	color: var(--primary-color);
-}
-
-.attach-file-btn.mdc-button-disabled, .attach-file-btn.mdc-button-disabled:hover {
-	background-color: #ffffff;
-	border: 1px solid darkgray;
-	color: darkgrey !important;
-}
-
 .drop-file {
 	background-color: #fafafa;
 	border: 1px dashed #d1d1d1;
diff --git a/frontend/src/app/ui/description/listing/description-listing.component.html b/frontend/src/app/ui/description/listing/description-listing.component.html
index a5a8684ec..4864a2eb3 100644
--- a/frontend/src/app/ui/description/listing/description-listing.component.html
+++ b/frontend/src/app/ui/description/listing/description-listing.component.html
@@ -82,7 +82,7 @@
 							></app-description-listing-item-component>
 						</div>
 						<div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
-							<button mat-button type="button" class="rounded-btn btn-load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button>
+							<button mat-button type="button" class="rounded-btn load-more" (click)="loadMore()">{{'DESCRIPTION-LISTING.ACTIONS.LOAD-MORE' | translate}}</button>
 						</div>
 					</div>
 					<div *ngIf="!hasListingItems && hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
diff --git a/frontend/src/app/ui/description/listing/description-listing.component.scss b/frontend/src/app/ui/description/listing/description-listing.component.scss
index 6957ce2a8..434916e35 100644
--- a/frontend/src/app/ui/description/listing/description-listing.component.scss
+++ b/frontend/src/app/ui/description/listing/description-listing.component.scss
@@ -101,19 +101,6 @@
   height: 45px;
 }
 
-.btn-load-more {
-	border: 2px solid #212121;
-	opacity: 1;
-	min-width: 132px;
-    width: auto;
-	margin-top: 4.125rem;
-}
-
-.btn-load-more:hover {
-	background-color: black;
-	color: white;
-}
-
 .center-content {
   font-size: 0.875rem;
   font-weight: 600;
diff --git a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
index 142a0a433..7b6720861 100644
--- a/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
+++ b/frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.scss
@@ -220,20 +220,6 @@ input[type="text"] {
 	color: var(--primary-color) !important;
 }
 
-.btn-load-more {
-	border: 2px solid #212121;
-	border-radius: 30px;
-	opacity: 1;
-	min-width: 132px;
-    width: auto;
-	height: 40px;
-	margin-top: 4.125rem;
-}
-
-.btn-load-more:hover {
-	background-color: black;
-	color: white;
-}
 
 .draft {
 	color: #f16868;
diff --git a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
index 34b563de3..66974a038 100644
--- a/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
+++ b/frontend/src/app/ui/plan/listing/listing-item/plan-listing-item.component.scss
@@ -240,20 +240,6 @@ input[type="text"] {
 	color: var(--primary-color) !important;
 }
 
-.btn-load-more {
-	border: 2px solid #212121;
-	border-radius: 30px;
-	opacity: 1;
-	min-width: 132px;
-    width: auto;
-	height: 40px;
-	margin-top: 4.125rem;
-}
-
-.btn-load-more:hover {
-	background-color: black;
-	color: white;
-}
 
 .draft {
 	color: #f16868;
diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.html b/frontend/src/app/ui/plan/listing/plan-listing.component.html
index c2f058963..24eba51fe 100644
--- a/frontend/src/app/ui/plan/listing/plan-listing.component.html
+++ b/frontend/src/app/ui/plan/listing/plan-listing.component.html
@@ -67,7 +67,7 @@
                                 ></app-plan-listing-item-component>
                         </div>
                         <div *ngIf="hasListingItems && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
-                            <button type="button" mat-button class="rounded-btn btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
+                            <button type="button" mat-button class="rounded-btn load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
                         </div>
                     </div>
                     <div *ngIf="!hasListingItems && !hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
diff --git a/frontend/src/app/ui/plan/listing/plan-listing.component.scss b/frontend/src/app/ui/plan/listing/plan-listing.component.scss
index 23e2d3791..be7d785fa 100644
--- a/frontend/src/app/ui/plan/listing/plan-listing.component.scss
+++ b/frontend/src/app/ui/plan/listing/plan-listing.component.scss
@@ -134,18 +134,6 @@
 	padding: 0.4rem;
 }
 
-.btn-load-more {
-	border: 2px solid #212121;
-	opacity: 1;
-	min-width: 132px;
-    width: auto;
-	margin-top: 4.125rem;
-}
-
-.btn-load-more:hover {
-	background-color: black;
-	color: white;
-}
 
 .info-text {
   text-align: left;
diff --git a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html
index c1b18c3ad..ed11a7c07 100644
--- a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html
+++ b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.html
@@ -25,7 +25,7 @@
 			</ngx-dropzone>
 		</div>
 		<div class="col-12 mb-2 d-flex justify-content-center attach-btn">
-			<button mat-button type="button" class="col-auto attach-file" (click)="fileInput.click()">
+			<button mat-button type="button" class="attach-file" (click)="fileInput.click()">
 				<mat-icon class="mr-2">input</mat-icon>
 				<span *ngIf="!hasFile()">{{'GENERAL.START-NEW-PLAN-DIALOG.UPLOAD-FILE' | translate}}</span>
 				<span *ngIf="hasFile()">{{'GENERAL.START-NEW-PLAN-DIALOG.REPLACE-FILE' | translate}}</span>
@@ -81,10 +81,10 @@
 		<div></div>
 		<div class="d-flex justify-content-between">
 			<div class="col-auto">
-				<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
+				<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
 			</div>
 			<div class="col-auto">
-				<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="next-btn">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
+				<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="rounded-btn primary-inverted next-btn">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
 			</div>
 		</div>
 	</div>
diff --git a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.scss b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.scss
index 880062b08..c3eb7e5d3 100644
--- a/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.scss
+++ b/frontend/src/app/ui/plan/new/upload-dialogue/plan-upload-dialog.component.scss
@@ -37,27 +37,7 @@ min-width: 101px;
 	font-weight: 500;
 }
 
-.next-btn {
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid var(--primary-color);
-	border-radius: 30px;
-	opacity: 1;
-min-width: 101px;
-	height: 43px;
-	color: var(--primary-color);
-	font-weight: 500;
-}
-
-.next-btn[disabled] {
-	width: 100px;
-	height: 43px;
-	background: #ffffff 0% 0% no-repeat padding-box;
-	border: 1px solid #b5b5b5;
-	border-radius: 30px;
-	opacity: 1;
-}
-
-.next-btn:not([disabled]):hover {
+.next-btn:hover {
 	background-color: var(--primary-color);
 	color: #ffffff;
 }
@@ -66,21 +46,6 @@ min-width: 101px;
 	top: -20px;
 }
 
-.attach-file {
-	min-width: 156px;
-	height: 44px;
-	color: #ffffff;
-	background: var(--primary-color) 0% 0% no-repeat padding-box;
-	box-shadow: 0px 3px 6px #1e202029;
-	border-radius: 30px;
-}
-
-.attach-file:hover {
-	background-color: #ffffff;
-	border: 1px solid var(--primary-color);
-	color: var(--primary-color);
-}
-
 .drop-file {
 	background-color: #fafafa;
 	border: 1px dashed #d1d1d1;
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 0340b7e7d..7775478ed 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -402,7 +402,8 @@ $mat-dark-theme: mat.m2-define-dark-theme((color: (primary: $mat-dark-theme-prim
 	@include mat.all-component-densities(-10); 
 }
 
-button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]), .md-button {
+button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[matButtonIcon]), .md-button, .mat-mdc-button:not(:disabled) {
+
     &.rounded-btn{
         padding: 0.62rem 1.87rem;
         height: 40px;
@@ -412,71 +413,104 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
         // padding-left: 2em;
         // padding-right: 2em;
         box-shadow: 0px 3px 6px #1E202029;
-
-        &.primary {
-            background: var(--primary-color) 0% 0% no-repeat padding-box;
+    }
+    &.primary {
+        background: var(--primary-color) 0% 0% no-repeat padding-box;
+        color: #ffffff;
+        border: none;
+        &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
+            background: #CBCBCB;
             color: #ffffff;
             border: none;
-            &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-                background: #CBCBCB;
-                color: #ffffff;
-                border: none;
-            }
-        }
-
-        &.secondary {
-            background: var(--secondary-color) 0% 0% no-repeat padding-box;
-            color: #000000;
-            border: none;
-            &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-                background: #CBCBCB;
-                color: #ffffff;
-                border: none;
-            }
-        }
-
-        &.primary-inverted {
-            color: var(--primary-color);
-            border: 1px solid var(--primary-color);
-            background: #fafafafa;
-            &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-                border: 1px solid #CBCBCB;
-                color: #CBCBCB;
-            }
-        }
-
-
-        &.neutral{
-            border: 1px solid #CBCBCB;
-            background: #fafafafa;
-            color: #000000;
-            &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
-                color: #CBCBCB;
-            }
-        }
-
-        &.delete {
-            background: var(--warning-color);
-            border: none;
-            color: #ffffff;
-        }
-
-        &.delete-inverted {
-            background: #fafafafa;
-            border: 1px solid var(--warning-color);
-            color: var(--warning-color);
-        }
-
-        &.import {
-            border: 1px solid #000000;
-            background: #fafafafa;
-            color: #000000;
-        }
-
-        &.stepper {
-            width: 9rem;
         }
     }
+
+    &.secondary {
+        background: var(--secondary-color) 0% 0% no-repeat padding-box;
+        color: #000000;
+        border: none;
+        &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
+            background: #CBCBCB;
+            color: #ffffff;
+            border: none;
+        }
+    }
+
+    &.primary-inverted {
+        color: var(--primary-color);
+        border: 1px solid var(--primary-color);
+        background: #fafafafa;
+        &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
+            border: 1px solid #CBCBCB;
+            color: #CBCBCB;
+        }
+    }
+
+
+    &.neutral{
+        border: 1px solid #CBCBCB;
+        background: #fafafafa;
+        color: #000000;
+        &:disabled, &.mat-mdc-button.mat-mdc-button-disabled{
+            color: #CBCBCB;
+        }
+    }
+
+    &.delete {
+        background: var(--warning-color);
+        border: none;
+        color: #ffffff;
+    }
+
+    &.delete-inverted {
+        background: #fafafafa;
+        border: 1px solid var(--warning-color);
+        color: var(--warning-color);
+    }
+
+    &.import {
+        border: 1px solid #000000;
+        background: #fafafafa;
+        color: #000000;
+    }
+
+    &.stepper {
+        width: 9rem;
+    }
+    
+
+    &.load-more {
+        border: 2px solid #212121;
+        min-width: 132px;
+        margin-top: 4.125rem;
+        
+        &:hover {
+            background-color: black;
+            color: white;
+        }
+    }
+
+    &.attach-file {
+        min-width: 156px;
+        height: 44px;
+        color: #ffffff;
+        background: var(--primary-color) 0% 0% no-repeat padding-box;
+        box-shadow: 0px 3px 6px #1e202029;
+        border-radius: 30px;
+        &:hover {
+            background-color: #ffffff;
+            border: 1px solid var(--primary-color);
+            color: var(--primary-color);
+        }
+    
+        &.attach-file.mdc-button-disabled, &.attach-file.mdc-button-disabled:hover {
+            background-color: #ffffff;
+            border: 1px solid darkgray;
+            color: darkgrey !important;
+        }
+    }
+
+
 }
 
 .mdc-fab.mdc-fab--mini.mat-mdc-mini-fab {
@@ -504,6 +538,7 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
             color: #ffffff;
         }
     }
+    
 }
 
 .status-chip {
@@ -529,6 +564,11 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma
     }
 }
 
+
+.pointer {
+	cursor: pointer;
+}
+
 .gap-1-rem{
     gap: 1rem;
 }