- added login page;

- added file upload;
- added faq item edit modal;

src/assets/scss/components/appForm.scss

@@ -7,6 +7,7 @@
   display: flex;
   flex-direction: column;
   gap: 14px;
+  padding: 5px 0;
 
   label {
     font-size: 14px;
@@ -40,14 +41,32 @@
     }
   }
 }
+
+.appForm__fileUploadItem {
+  display: flex;
+  justify-content: space-between;
+}
+
+.appForm__fileUploadItemName {
+
+}
+
+.appForm__row {
+  display: flex;
+  gap: 7px;
+  align-items: center;
+}
+
 .appForm__oneCol {
   display: flex;
   flex-direction: column;
+  gap: 7px;
 
   label {
     font-weight: 400;
   }
 }
+
 .appForm__twoCols {
   display: flex;
   gap: 1rem;
@@ -99,4 +118,12 @@
 .appForm__faqTabItem {
   display: flex;
   gap: 0.5rem;
+  align-items: center;
+
+  .p-togglebutton[data-p-highlight="true"] {
+    .p-button:not(.p-button-danger) {
+      background: var(--menuitem-active-background);
+      border: 1px solid var(--menuitem-active-background);
+    }
+  }
 }

src/assets/scss/components/appPage.scss

@@ -1,6 +1,7 @@
 .appPage {
     display: flex;
     flex-direction: column;
+    flex-grow: 2;
 
     h1 {
         color: var(--primary-color);
@@ -26,6 +27,10 @@
     }
 }
 
+.appPageSection__table {
+    width: 100%;
+}
+
 .appTableHeader {
     display: flex;
     justify-content: space-between;
@@ -65,12 +70,5 @@
 .appPageSection__actions {
     display: flex;
     gap: 24px;
-    margin-bottom: 24px;
-}
-
-.mb-2 {
-    margin-bottom: 4px;
-}
-.mb-8 {
-    margin-bottom: 16px;
+    padding: 24px 0 48px;
 }

src/assets/scss/components/formBuilder.scss

@@ -32,6 +32,9 @@
 
 .formBuilder__element {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
   padding: 10px 20px;
   border: 1px dashed var(--button-secondary-borderColor);
   font-size: 14px;
@@ -61,14 +64,21 @@
   list-style: none;
   padding: 0;
   margin: 0;
+}
+.formBuilder__elementItem {
+  display: flex;
+  padding: 10px 20px;
+  border: 1px dashed var(--button-secondary-borderColor);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
 
-  li {
-    display: flex;
-    padding: 10px 20px;
-    border: 1px dashed var(--button-secondary-borderColor);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 21px;
+  &:hover {
+    cursor: grab;
   }
+}
+
+.formBuilder__elementSettings {
+  width: 40rem;
 }

src/assets/scss/components/layout.scss

@@ -0,0 +1,89 @@
+html {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin: 0;
+  font-family: 'Montserrat';
+
+  p, span, input, label:not(.p-error), textarea, a, li, h1, h2, h3, h4, h5, h6, div, th, td, button {
+    font-family: 'Montserrat';
+    color: var(--global-textColor);
+  }
+}
+
+#root, .wrapper {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+.inner {
+  display: flex;
+  height: 100%;
+  min-height: 0;
+  flex-grow: 1;
+
+  > aside {
+    flex: 0 0 320px;
+    border-right: 1px solid var(--menu-borderColor);
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li a, li button {
+        display: flex;
+        padding: 10.5px 17.5px;
+        align-items: center;
+        gap: 7px;
+        width: 100%;
+        border: 0;
+        border-bottom: 1px solid var(--menu-borderColor);
+        color: var(--menuitem-color);
+        background-color: transparent;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 100%;
+        text-decoration: none;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        i {
+          color: var(--text-color-secondary);
+        }
+
+        &.active {
+          color: var(--menuitem-active-color);
+          background-color: var(--menuitem-active-background);
+
+          i {
+            color: white;
+          }
+
+          span {
+            color: var(--menuitem-active-color);
+          }
+        }
+      }
+    }
+  }
+
+  > main {
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    padding: 0 24px 50px;
+  }
+}

src/assets/scss/components/login.scss

@@ -0,0 +1,14 @@
+.appPageLogin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.appPageLogin__wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 540px;
+  padding: 24px;
+}

src/assets/scss/components/misc.scss

@@ -0,0 +1,59 @@
+.p-steps {
+  .p-highlight {
+    span.p-steps-number {
+      color: var(--menuitem-active-color);
+    }
+  }
+}
+.p-badge {
+  color: var(--menuitem-active-color);
+}
+.p-button:not(.p-button-outlined, .p-button-secondary),
+.p-button:not(.p-button-outlined, .p-button-secondary) span {
+  color: var(--menuitem-active-color);
+}
+.p-fileupload-row {
+  .p-button-danger {
+    background-color: #f44336;
+    opacity: 0.8;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+.p-tag {
+  .p-tag-value {
+    color: var(--menuitem-active-color);
+  }
+}
+
+.p-paginator-page {
+  color: var(--menuitem-active-color);
+}
+
+.p-datepicker-buttonbar .p-button {
+  color: var(--global-textColor);
+}
+
+.p-message.p-message-error {
+  background: #ffdbdb;
+  border-left: 5px solid #C2504D;
+
+  svg {
+    path {
+      fill: var(--global-textColor);
+    }
+  }
+}
+
+
+
+.mb-2 {
+  margin-bottom: 4px;
+}
+.mb-8 {
+  margin-bottom: 16px;
+}
+.mr-8 {
+  margin-right: 16px;
+}

src/assets/scss/components/statsBigBadges.scss

@@ -5,6 +5,7 @@
     align-items: center;
     grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
     gap: 24px;
+    width: 100%;
 }
 
 .statsBigBadges__gridItem {