fixed styles for star ratings on customer order history

raynelfss · May 16, 2022 · e4de78d · e4de78d
1 parent df69538
commit e4de78d
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 23 deletions.
diff --git a/build/dashboard-customerorders.html b/build/dashboard-customerorders.html
@@ -32,19 +32,19 @@ <h1 class="order-id"></h1>
                     <label for="rate2" class="fas fa-star"></label>
                     <input type="radio" name="rate" id ="rate1">
                     <label for="rate1" class="fas fa-star"></label>
-                </div>
-                <form action="#">
-                    <div class="textarea">
-                        <textarea cols="30"></textarea>
-                    </div>
-                    <div class="btn">
-                        <button type="submit">Submit Rating</button>
-                    </div>
-                </form>
+                    <form action="#">
+                        <div class="textarea">
+                            <textarea cols="25" rows="3" placeholder="Type your review here..."></textarea>
+                        </div>
+                        <div class="btn">
+                            <button type="submit" class="submitrating">Submit Rating</button>
+                        </div>
+                    </form>
+                </div>  
             </div> 
         </div>
         <div>
-            <button onclick="closeModel()">Close</button>
+            <button onclick="closeModel()" class="close">Close</button>
         </div>
     </div>
 <!-- <script src="/scripts/showstatus.js"></script> -->

diff --git a/build/styles/dashboard-customerorders.css b/build/styles/dashboard-customerorders.css
@@ -41,28 +41,30 @@
     padding: 20px;
     justify-content: center;
 }
-.stars{
-    /* width: 20%; */
-    display: flex;
-    flex-direction: row;
+
+
+.stars {
+    text-align: center;
+    padding-right: 20px;
 }
+
 .stars input {
     display:none;
+
 }
 
 .stars label{
     font-size: 30px;
     color: #444;
-    /* padding: 10px; */
-    /* float:right; */
+    float:right;
     transition: all 0.2s ease;
-    text-align: center;
-    /* margin-right: 40px; */
+
 }
 
 .stars input:not(:checked) ~ label:hover,
 .stars input:not(:checked) ~ label:hover ~label{
     color:#fd4;
+
 }
 input:checked ~ label{
     color:#fd4;
@@ -87,6 +89,22 @@ input#rate5:checked ~ label{
     color:#fe7;
     text-shadow: 0 0 20px #952;
 }
+input#rate1:checked ~ form header:before{
+    content:"I hate it."
+}
+input#rate2:checked ~ form header:before{
+    content:"I dislike it."
+}
+input#rate3:checked ~ form header:before{
+    content:"It was okay."
+}
+input#rate4:checked ~ form header:before{
+    content:"It was good."
+}
+input#rate5:checked ~ form header:before{
+    content:"It was excellent."
+}
+
 form header{
     /* width:100%; */
     font-size: 25px;
@@ -97,8 +115,10 @@ form header{
 }
 form .textarea{
     height: 50px;
+    margin-left: 20px;
     /* width: 100%; */
-    overflow: hidden;
+
+
   }
 form .textarea textarea{
     /* width: 100%;
@@ -113,8 +133,17 @@ form .textarea textarea{
   .textarea textarea:focus{
     border-color: #444;
   }
-  button {
-      cursor:pointer;
-  }
+
+.btn .submitrating {
+    margin-top: 80px;
+    margin-left:20px;
+    cursor:pointer;
+    border-radius: 15px;
+    background-color: rgb(255, 94, 137);
+    color:white;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
+}
 
-
+.btn .submitrating:hover {
+    background-color: rgb(171, 44, 78);
+}