Merge pull request #50 from moduslabs/feature/user-feedback-form

feat: [FSET-1033] feedback submission form
moduslabs · Dec 7, 2022 · 641a920 · 641a920
2 parents 7445bdf + 54ed13d
commit 641a920
Show file tree

Hide file tree

Showing 8 changed files with 302 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -16,6 +16,8 @@ export namespace Components {
         "to"?: string;
         "value": string | number;
     }
+    interface AppFeedback {
+    }
     interface AppLanding {
     }
     interface AppLayout {
@@ -44,6 +46,12 @@ declare global {
         prototype: HTMLAppButtonElement;
         new (): HTMLAppButtonElement;
     };
+    interface HTMLAppFeedbackElement extends Components.AppFeedback, HTMLStencilElement {
+    }
+    var HTMLAppFeedbackElement: {
+        prototype: HTMLAppFeedbackElement;
+        new (): HTMLAppFeedbackElement;
+    };
     interface HTMLAppLandingElement extends Components.AppLanding, HTMLStencilElement {
     }
     var HTMLAppLandingElement: {
@@ -76,6 +84,7 @@ declare global {
     };
     interface HTMLElementTagNameMap {
         "app-button": HTMLAppButtonElement;
+        "app-feedback": HTMLAppFeedbackElement;
         "app-landing": HTMLAppLandingElement;
         "app-layout": HTMLAppLayoutElement;
         "app-result": HTMLAppResultElement;
@@ -94,6 +103,8 @@ declare namespace LocalJSX {
         "to"?: string;
         "value"?: string | number;
     }
+    interface AppFeedback {
+    }
     interface AppLanding {
     }
     interface AppLayout {
@@ -110,6 +121,7 @@ declare namespace LocalJSX {
     }
     interface IntrinsicElements {
         "app-button": AppButton;
+        "app-feedback": AppFeedback;
         "app-landing": AppLanding;
         "app-layout": AppLayout;
         "app-result": AppResult;
@@ -122,6 +134,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "app-button": LocalJSX.AppButton & JSXBase.HTMLAttributes<HTMLAppButtonElement>;
+            "app-feedback": LocalJSX.AppFeedback & JSXBase.HTMLAttributes<HTMLAppFeedbackElement>;
             "app-landing": LocalJSX.AppLanding & JSXBase.HTMLAttributes<HTMLAppLandingElement>;
             "app-layout": LocalJSX.AppLayout & JSXBase.HTMLAttributes<HTMLAppLayoutElement>;
             "app-result": LocalJSX.AppResult & JSXBase.HTMLAttributes<HTMLAppResultElement>;

diff --git a/src/global/app.css b/src/global/app.css
@@ -82,6 +82,12 @@ h2 {
   font-weight: 600;
 }
 
+textarea, ion-select {
+  background: #ededed !important;
+  border-radius: 3px;
+  margin-bottom: 20px;
+}
+
 @media only screen and (max-width: 390px) {
   h2 {
     margin-top: 10px;

diff --git a/src/helpers/routes.ts b/src/helpers/routes.ts
@@ -11,6 +11,10 @@ const routes = {
     url: '/page/result',
     component: 'app-result',
   },
+  feedback: {
+    url: '/page/feedback',
+    component: 'app-feedback',
+  },
 };
 
 export default routes;
diff --git a/src/pages/feedback/feedback.css b/src/pages/feedback/feedback.css
@@ -0,0 +1,68 @@
+.feedback-btn {
+  margin-top: 30px;
+  display: grid;
+  justify-content: center;
+}
+
+.rating-column {
+	display: flex;
+	justify-content: center;
+}
+.rating-message {
+	display: block;
+	text-align: center;
+	margin-bottom: 16px;
+}
+.error {
+ border: 1px solid red;
+}
+
+ion-textarea {
+    --padding-start: 12px;
+}
+
+.rate-area {
+	float: left;
+	display: revert;
+	padding: 0px;
+	border-style: none;
+	margin-bottom: 0px;
+}
+
+.rate-area:not(:checked) > input {
+	position: absolute;
+	top: -9999px;
+	clip: rect(0, 0, 0, 0);
+}
+
+.rate-area:not(:checked) > ion-label {
+	float: right;
+	width: 1em;
+	overflow: hidden;
+	white-space: nowrap;
+	cursor: pointer;
+	font-size: 180%;
+	color: lightgrey;
+}
+
+.rate-area:not(:checked) > ion-label:before {
+	content: "★";
+}
+
+.rate-area > input:checked ~ ion-label {
+	color: gold;
+}
+
+.rate-area:not(:checked) > ion-label:hover,
+.rate-area:not(:checked) > ion-label:hover ~ ion-label {
+	color: gold;
+}
+
+.rate-area > input:checked + ion-label:hover,
+.rate-area > input:checked + ion-label:hover ~ ion-label,
+.rate-area > input:checked ~ ion-label:hover,
+.rate-area > input:checked ~ ion-label:hover ~ ion-label,
+.rate-area > ion-label:hover ~ input:checked ~ ion-label {
+	color: gold;
+}
+