-
-
diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss
index aaaf83f..8479fcb 100644
--- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss
+++ b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.scss
@@ -3,10 +3,21 @@
:host {
+ $feedback_left: 47px;
+
+ .side {
+ padding-top: 16px;
+ padding-right: 16px;
+
+ + .side {
+ text-align: right
+ }
+ }
+
.feedback-button {
font-family: variables.$font-family;
background: #E3EAF1;
- color: #005AA2;
+ color: variables.$main-color-400;
border-radius: 8px 8px 0 0;
transform: rotate(270deg);
cursor: pointer;
@@ -29,6 +40,11 @@
line-height: 8px; /* 57.143% */
+ &.is-active {
+
+ right: 646px;
+ }
+
&:hover {
background: #d9e8f6;
}
@@ -36,173 +52,224 @@
i {
font-size: 16px;
}
+ }
- // Modal styles
- .feedback-modal-overlay {
- position: fixed;
- top: 92px;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1000;
- }
+ // Modal styles
+ .feedback-modal-overlay {
- .feedback-modal {
- background: #E3EAF1;
- border-radius: 8px;
- width: 90vw;
- max-width: 500px;
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
- display: flex;
- flex-direction: column;
- max-height: 90vh;
- overflow: hidden;
- }
-
- .modal-header {
- background: transparent;
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 16px 20px;
- border-bottom: 1px solid #eee;
-
- h3 {
- margin: 0;
- font-size: 18px;
- font-weight: 600;
- color: #083b7d;
- }
-
- .close-button {
- background: none;
- border: none;
- cursor: pointer;
- font-size: 20px;
- color: #666;
- padding: 4px;
-
- &:hover {
- color: #333;
- }
- }
- }
-
- .modal-body {
- padding: 20px;
- overflow-y: auto;
- background: transparent;
-
- .modal-description {
- margin-bottom: 16px;
- color: #555;
- }
-
- textarea {
- width: 100%;
- padding: 12px;
- border: 1px solid #ddd;
- border-radius: 4px;
- resize: vertical;
- font-family: inherit;
- font-size: 14px;
-
- &:focus {
- outline: none;
- border-color: #083b7d;
- }
-
- &:disabled {
- background-color: #f5f5f5;
- cursor: not-allowed;
- }
- }
-
- .success-message, .error-message {
- margin-top: 16px;
- padding: 10px;
- border-radius: 4px;
- display: flex;
- align-items: center;
- gap: 8px;
-
- i {
- font-size: 18px;
- }
- }
-
- .success-message {
- background-color: #e6f7e6;
- color: #2e7d32;
- }
-
- .error-message {
- background-color: #fdecea;
- color: #d32f2f;
- }
- }
-
- .modal-footer {
- padding: 16px 20px;
- border-top: 1px solid #eee;
- display: flex;
- justify-content: flex-end;
- gap: 12px;
-
- button {
- padding: 8px 16px;
- border-radius: 4px;
- font-weight: 500;
- cursor: pointer;
-
- &:disabled {
- opacity: 0.6;
- cursor: not-allowed;
- }
- }
-
- .cancel-button {
- background: none;
- border: 1px solid #ddd;
- color: #555;
-
- &:hover:not(:disabled) {
- background-color: #f5f5f5;
- }
- }
-
- .submit-button {
- background-color: #083b7d;
- color: white;
- border: none;
- display: flex;
- align-items: center;
- gap: 8px;
-
- &:hover:not(:disabled) {
- background-color: #062c5e;
- }
- }
- }
-
- // Spinner animation
- .spinning {
- animation: spin 1s linear infinite;
- }
-
- @keyframes spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
- }
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: end;
+ align-items: start;
+ z-index: 1000;
+ overflow: hidden;
+ width: 100vw;
+ height: 100vh;
+ padding-top: 200px;
}
+ .feedback-modal {
+ background: #E3EAF1;
+ border-radius: 8px;
+ width: 90vw;
+ max-width: 700px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+ display: flex;
+ flex-direction: column;
+ max-height: 90vh;
+ overflow: hidden;
+
+
+ .feedback-button {
+ background: transparent;
+ }
+ }
+
+ .modal-header {
+ background: transparent;
+ display: flex;
+ justify-content: space-between;
+ align-items: top;
+ padding: 13px 0;
+ border-bottom: 1px solid #eee;
+ padding-left: $feedback_left;
+
+ h3 {
+ margin: 0;
+ font-size: 18px;
+ font-weight: 600;
+ color: var(--Black-text, #1B1D27);
+ leading-trim: both;
+ text-edge: cap;
+ font-family: Barlow;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 0; /* 0% */
+ margin-bottom: 8px;
+ margin-top: 12px;
+ }
+
+ sae-m-button {
+ margin-left: 6px;
+ }
+
+
+ .close-button {
+ background: none;
+ border: none;
+ cursor: pointer;
+ font-size: 20px;
+ color: #666;
+ padding: 4px;
+
+ &:hover {
+ color: #333;
+ }
+ }
+ }
+
+ .modal-body {
+ padding: 0 20px;
+ overflow-y: auto;
+ background: transparent;
+ padding-left: $feedback_left;
+
+ .modal-description {
+ margin-bottom: 16px;
+ leading-trim: both;
+ text-edge: cap;
+ font-family: Barlow;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 0; /* 0% */
+ color: variables.$neutral-blue;
+
+ }
+
+ textarea {
+ margin-top: 16px;
+ width: 100%;
+ padding: 12px;
+ resize: vertical;
+ font-family: inherit;
+ font-size: 14px;
+ height: 140px;
+ border: solid 1px #a8acc2;
+ color: #000;
+ line-height: 140%; /* 19.6px */
+ border-radius: 8px;
+
+ background: #FFF;
+
+
+ &:focus {
+ outline: none;
+ border-color: #083b7d;
+ }
+
+ &:disabled {
+ background-color: #f5f5f5;
+ cursor: not-allowed;
+ }
+ }
+
+ .success-message, .error-message {
+ margin-top: 16px;
+ padding: 10px;
+ border-radius: 4px;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ i {
+ font-size: 18px;
+ }
+ }
+
+ .success-message {
+ background-color: #e6f7e6;
+ color: #2e7d32;
+ }
+
+ .error-message {
+ background-color: #fdecea;
+ color: #d32f2f;
+ }
+ }
+
+ .modal-footer {
+ padding: 16px 20px;
+ border-top: 1px solid #eee;
+ display: flex;
+ justify-content: flex-end;
+ gap: 12px;
+
+ button {
+ padding: 8px 16px;
+ border-radius: 4px;
+ font-weight: 500;
+ cursor: pointer;
+
+ &:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ }
+ }
+
+ .cancel-button {
+ background: none;
+ border: 1px solid #ddd;
+ color: #555;
+
+ &:hover:not(:disabled) {
+ background-color: #f5f5f5;
+ }
+ }
+
+ .submit-button {
+ background-color: #083b7d;
+ color: white;
+ border: none;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+
+ &:hover:not(:disabled) {
+ background-color: #062c5e;
+ }
+ }
+ }
+
+ // Spinner animation
+ .spinning {
+ animation: spin 1s linear infinite;
+ }
+
+ @keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+ }
+
+
+ .star-row {
+ padding-top: 9px;
+
+ i {
+ font-size: 20px;
+ }
+ }
}
+
+
diff --git a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts
index 4598f06..429c901 100644
--- a/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts
+++ b/my-workspace/projects/sae-lib/buttons/feedback-button/feedback-button.ts
@@ -1,12 +1,14 @@
import {Component} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {MainButton} from '../main-button/main-button';
+import {NgClass} from '@angular/common';
@Component({
selector: 'sae-feedback-button',
imports: [
FormsModule,
- MainButton
+ MainButton,
+ NgClass
],
templateUrl: './feedback-button.html',
styleUrl: './feedback-button.scss'
@@ -14,11 +16,12 @@ import {MainButton} from '../main-button/main-button';
export class FeedbackButton {
isModalOpen: boolean = false;
+ // isModalOpen: boolean = true;
feedbackText: string = '';
isSubmitting: boolean = false;
submitSuccess: boolean = false;
submitError: boolean = false;
-
+ protected readonly close = close;
toggleModal() {
this.isModalOpen = !this.isModalOpen;
@@ -30,14 +33,6 @@ export class FeedbackButton {
this.submitError = false;
}
- // Update app state to show/hide feedback panel
- // this.store.dispatch({
- // type: ActionTypes.UPDATE_APP,
- // payload: {
- // displayFeedBackPanel: this.isModalOpen,
- // feedBackInput: this.feedbackText
- // }
- // });
}
async submitFeedback() {
@@ -50,24 +45,6 @@ export class FeedbackButton {
this.submitError = false;
try {
- // Update Redux state with feedback text
- // this.store.dispatch({
- // type: ActionTypes.UPDATE_APP,
- // payload: {
- // feedBackInput: this.feedbackText
- // }
- // });
- //
- // // Dispatch action to send feedback
- // this.store.dispatch({
- // type: ActionTypes.SEND_USER_FEEDBACK,
- // payload: {
- // feedback: this.feedbackText
- // }
- // });
- //
- // // Call API service directly
- // await this.apiService.sendUserFeedback(this.feedbackText);
this.submitSuccess = true;