fix textarea styling

Real-Dev-Squad · Aug 18, 2024 · 4c86a14 · 4c86a14
1 parent 3d78242
commit 4c86a14
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/app/styles/app.css b/app/styles/app.css
@@ -41,6 +41,7 @@
 @import url("tooltip.module.css");
 @import url("debug.module.css");
 @import url("unauthenticated.module.css");
+@import url("feedback.css");
 
 * {
   margin: 0;

diff --git a/app/styles/feedback.css b/app/styles/feedback.css
@@ -1,10 +1,18 @@
-.comment-box {
-  width: 100%;
-  height: 200px;
-  padding: 15px;
-  margin-top: 20px;
-  font-size: 16px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  resize: none;
+.superuser-feedback {
+  width: 34rem;
+  padding: 1rem 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.superuser-feedback__label {
+  display: block;
+  font-size: 1.25rem;
+  font-weight: 700;
+  padding-bottom: 0.5rem;
+}
+
+.superuser-feedback__textarea {
+  padding: 0.5rem;
+  border-radius: 0.5rem;
 }
diff --git a/app/templates/intro.hbs b/app/templates/intro.hbs
@@ -19,13 +19,17 @@
           @isSuperUser={{this.login.userData.roles.super_user}}
         />
 
-        <label for="comment-box">Your Comment:</label>
-        <textarea
-          aria-label="Application remarks"
-          class="comment-box"
-          placeholder="Enter your comments here..."
-          {{on "change" this.updateRemarks}}
-        ></textarea>
+        <div class="superuser-feedback">
+          <label for="superuserFeedback" class="superuser-feedback__label">
+            Your remarks:
+          </label>
+          <textarea
+            id="superuserFeedback"
+            class="superuser-feedback__textarea"
+            placeholder="Enter your remarks"
+            {{on "change" this.updateRemarks}}
+          ></textarea>
+        </div>
 
         <div class="action-buttons">
           <button