added payment status functionality

css/main.css

@@ -50,8 +50,8 @@ button {
       -ms-flex-pack: center;
           justify-content: center;
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.08em;
-  padding: 0.6rem 1rem;
+  padding: 0.4rem 0.7rem;
   font-weight: 600;
   cursor: pointer;
   border-radius: 0.2em;
@@ -152,6 +152,10 @@ input:invalid {
   gap: 1em;
 }
 
+.label {
+  margin-bottom: 0.4rem;
+}
+
 .light-text {
   color: rgba(var(--text-light), 1);
 }
@@ -544,8 +548,8 @@ form {
   display: -ms-flexbox;
   display: flex;
   background: rgba(var(--foreground), 1);
-  -webkit-transform: translateY(1rem);
+  -webkit-transform: translateY(100%);
-          transform: translateY(1rem);
+          transform: translateY(100%);
   -webkit-transition: -webkit-transform 0.3s;
   transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
@@ -841,7 +845,7 @@ form {
   font-size: 0.9em;
   text-transform: uppercase;
   width: 100%;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.08em;
 }
 
 #navbar .navbar-item h5 {
@@ -914,7 +918,7 @@ form {
 }
 
 .options-tab .option h4 {
-  font-weight: 600;
+  font-weight: 400;
 }
 
 .options-tab .option:nth-of-type(1) .icon {
@@ -988,6 +992,7 @@ form {
 .request h5 {
   color: rgba(var(--text-light), 1);
   margin-bottom: 0.4rem;
+  text-transform: capitalize;
 }
 
 .request h3, .request h4 {
@@ -1171,6 +1176,7 @@ form {
 .time {
   font-family: 'Roboto', sans-serif;
   margin-bottom: 1.5rem !important;
+  font-weight: 400;
 }
 
 #report_popup h4 {
@@ -1196,12 +1202,55 @@ form {
       align-self: flex-start;
 }
 
+.complaint {
+  display: -ms-grid;
+  display: grid;
+  gap: 1.5rem 0;
+}
+
+.complaint .complaint-actions {
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 1.5rem 0 0 0;
+}
+
+.complaint .processed {
+  color: #007732;
+}
+
+.complaint .unprocessed {
+  color: #d43125;
+}
+
+.complaint button .icon {
+  padding: 0.2rem;
+  margin-right: 0.5rem;
+  stroke: var(--primary-color);
+  stroke-width: 8;
+}
+
+.complaints-container {
+  padding-top: 1.5rem;
+  display: -ms-grid;
+  display: grid;
+  gap: 1.5rem;
+}
+
+@media only screen and (max-width: 640px) {
+  sm-select {
+    width: 100%;
+  }
+}
+
 @media only screen and (min-width: 640px) {
   body {
     padding: 1rem 6vw;
     margin-left: 6rem;
   }
   .popup-container .popup {
+    -webkit-transform: translateY(0) scale(0.96);
+            transform: translateY(0) scale(0.96);
     width: 24rem;
     -ms-flex-item-align: center;
         -ms-grid-row-align: center;
@@ -1332,6 +1381,35 @@ form {
     -ms-grid-columns: (1fr)[3];
         grid-template-columns: repeat(3, 1fr);
   }
+  .complaint {
+    gap: 0 1.5rem;
+    -ms-grid-columns: 1fr 1fr;
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas: '. . ' 'header header';
+  }
+  .complaint .complaint-actions {
+    -ms-grid-row: 2;
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 2;
+    grid-area: header;
+  }
+  .complaint .left {
+    border-right: 1px solid rgba(var(--text), 0.2);
+  }
+  .complaint .left, .complaint .right {
+    padding-right: 1.5rem;
+  }
+  .complaint .right {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+  }
 }
 
 @media only screen and (min-width: 1280px) {

css/main.scss

@@ -37,8 +37,8 @@ button{
     align-items: center;
     justify-content: center;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.08em;
-    padding: 0.6rem 1rem;
+    padding: 0.4rem 0.7rem;
     font-weight: 600;
     cursor: pointer;
     border-radius: 0.2em;
@@ -102,6 +102,9 @@ input:invalid{
     grid-template-columns: auto auto;
     gap: 1em;
 }
+.label{
+    margin-bottom: 0.4rem;
+}
 .light-text{
     color: rgba(var(--text-light), 1);
 }
@@ -353,7 +356,7 @@ form{
         position: relative;
         display: flex;
         background: rgba(var(--foreground), 1);
-        transform: translateY(1rem);
+        transform: translateY(100%);
         transition: transform 0.3s;
         box-shadow: 0 2rem 2rem rgba($color: #000000, $alpha: 0.24);
         overflow-y: auto;
@@ -561,7 +564,7 @@ form{
         font-size: 0.9em;
         text-transform: uppercase;
         width: 100%;
-        letter-spacing: 0.1em;
+        letter-spacing: 0.08em;
         h5{
             font-size: 0.6em;
             margin-top: 0.4em;
@@ -616,7 +619,7 @@ form{
             stroke: rgba(var(--text), 0.4);
         }
         h4{
-            font-weight: 600;
+            font-weight: 400;
         }
         &:nth-of-type(1){
             .icon{
@@ -682,6 +685,7 @@ form{
     h5{
         color: rgba(var(--text-light), 1);
         margin-bottom: 0.4rem;
+        text-transform: capitalize;
     }
     h3,h4{
         margin-bottom: 1.5rem;
@@ -818,6 +822,7 @@ form{
 .time{
     font-family: 'Roboto', sans-serif;
     margin-bottom: 1.5rem !important;
+    font-weight: 400;
 }
 #report_popup{
     h4{
@@ -834,6 +839,38 @@ form{
         align-self: flex-start;
     }
 }
+.complaint{
+    display: grid;
+    gap: 1.5rem 0;
+    .complaint-actions{
+        align-items: center;
+        margin: 1.5rem 0 0 0;
+    }
+    .processed{
+        color: #007732;
+    }
+    .unprocessed{
+        color: #d43125;
+    }
+    button{
+        .icon{
+            padding: 0.2rem;
+            margin-right: 0.5rem;
+            stroke: var(--primary-color);
+            stroke-width: 8;
+        }
+    }
+}
+.complaints-container{
+    padding-top: 1.5rem;
+    display: grid;
+    gap: 1.5rem;
+}
+@media only screen and (max-width: 640px){
+    sm-select{
+        width: 100%;
+    }
+}
 @media only screen and (min-width: 640px){
     body{
         padding: 1rem 6vw;
@@ -841,6 +878,7 @@ form{
     }
     .popup-container{
         .popup{
+            transform: translateY(0) scale(0.96);
             width: 24rem;
             align-self: center;
             border-radius: 0.2rem;
@@ -947,6 +985,25 @@ form{
     .container{
         grid-template-columns: repeat(3, 1fr);
     }
+    .complaint{
+        gap: 0 1.5rem;
+        grid-template-columns: 1fr 1fr;
+        grid-template-areas: '. . ' 'header header';
+        .complaint-actions{
+            grid-area: header;
+        }
+        .left{
+            border-right: 1px solid rgba(var(--text), 0.2);
+        }
+        .left, .right{
+            padding-right: 1.5rem;
+        }
+        .right{ 
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
 }
 @media only screen and (min-width: 1280px){
     body{