@konfuzio/document-validation-ui 0.1.1

package/src/assets/scss/document_edit.scss

@@ -0,0 +1,431 @@
+@import "./imports.scss";
+
+.document-edit {
+  display: flex;
+  flex: 1;
+  background-color: $background;
+
+  &.split-overview-component {
+    min-width: 600px;
+    flex: 0;
+  }
+
+  .pages-section {
+    width: 100%;
+    overflow-y: scroll;
+    border-right: $component-border;
+    border-left: $component-border;
+
+    .document-grid {
+      padding: 42px;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(138px, 138px));
+      justify-items: center;
+      gap: 20px;
+
+      .image-section {
+        width: 138px;
+        height: 138px;
+        display: flex;
+        align-items: center;
+
+        .img-container {
+          &:hover {
+            cursor: pointer;
+          }
+
+          .img-thumbnail {
+            border: $component-border;
+            border-radius: 2px;
+          }
+
+          &.selected {
+            .img-thumbnail {
+              border-color: $dark-blue;
+              filter: contrast(0.7);
+            }
+          }
+        }
+
+        .splitting-lines {
+          cursor: pointer;
+          position: relative;
+          height: 130px;
+          display: flex;
+          align-items: center;
+          padding-bottom: 20px;
+
+          .lines {
+            display: flex;
+            margin-left: 6px;
+            padding-right: 19px;
+            width: 25px;
+            align-items: center;
+            justify-content: center;
+          }
+
+          .scissors-icon {
+            display: none;
+            transform: rotate(-90deg);
+            position: absolute;
+            z-index: 999;
+            top: 42px;
+            left: 3.3px;
+          }
+
+          &:hover {
+            .scissors-icon {
+              display: block;
+            }
+          }
+
+          &.active-split {
+            .lines {
+              margin-left: 3px;
+              margin-right: 3px;
+              padding-right: 12px;
+            }
+
+            &:hover {
+              .scissors-icon {
+                display: none;
+              }
+            }
+          }
+        }
+
+        &:last-child {
+          .splitting-lines {
+            display: none;
+          }
+        }
+
+        .image-container {
+          width: fit-content;
+          display: flex;
+          flex-direction: column;
+
+          .thumbnail {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            height: 130px;
+            width: 138px;
+
+            &:hover {
+              .icon-container {
+                display: flex;
+              }
+            }
+
+            .icon-container {
+              position: absolute;
+              width: auto;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              gap: 6px;
+              display: none;
+
+              .action-icon {
+                border-radius: 60px;
+                background-color: $dark-blue;
+                width: 32px;
+                height: 32px;
+                color: $white;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+
+                svg {
+                  height: 21px;
+                }
+              }
+            }
+          }
+
+          .page-number {
+            color: $text-lighter;
+            font-size: 12px;
+            line-height: 12px;
+            font-weight: 400;
+            align-self: center;
+            padding-bottom: 10px;
+          }
+
+          &.split-overview {
+            img {
+              height: 30px !important;
+              width: 30px !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sidebar {
+    width: 45%;
+    background-color: $background;
+
+    .edit-sidebar {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      height: calc(100% - 60px);
+      gap: 50px;
+
+      .sidebar-header {
+        width: 85%;
+        height: 50%;
+
+        h3 {
+          color: $dark-blue;
+          font-weight: 600;
+          font-size: 16px;
+          line-height: 24px;
+          padding-bottom: 15px;
+        }
+
+        .description {
+          color: $grey;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 20px;
+
+          &:last-child {
+            padding-top: 12px;
+          }
+        }
+      }
+
+      .buttons-container {
+        width: 85%;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        color: $grey-dark;
+
+        .pages-selected {
+          font-weight: 400;
+          font-size: 14px;
+
+          &.disabled {
+            color: $grey;
+          }
+        }
+
+        .rotate {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .rotate-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 0 !important;
+          white-space: initial;
+          line-height: 1;
+          gap: 5px;
+
+          .button-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .button-text {
+              font-size: 16px;
+              max-width: 70%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @media (max-width: 1150px) {
+    .sidebar {
+      width: 50%;
+    }
+  }
+
+  @media (max-width: 1100px) {
+    .sidebar {
+      width: 60%;
+    }
+  }
+
+  &.split-overview-component {
+    background-color: $background;
+
+    .split-overview-section {
+      padding-left: 30px;
+      padding-right: 10px;
+      overflow-y: scroll;
+      width: 100%;
+    }
+
+    .split-overview {
+      margin-top: 20px;
+
+      .back-section {
+        display: flex;
+        align-items: center;
+        gap: 11px;
+        width: fit-content;
+        margin-bottom: 26px;
+        cursor: pointer;
+
+        .back-btn-section {
+          padding-top: 5px;
+        }
+
+        .back-text {
+          color: $grey;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+        }
+      }
+
+      .overview-title {
+        color: $dark-blue;
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      .new-documents-container {
+        padding-bottom: 30px;
+        padding-top: 35px;
+        padding-right: 10px;
+
+        .document-details {
+          display: flex;
+          align-items: center;
+          gap: 20px;
+          padding-bottom: 40px;
+
+          .overview-thumbnails {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 60px;
+
+            .split-documents {
+              display: flex;
+              align-items: center;
+
+              .image-container {
+                .thumbnail {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+
+                  .page-thumbnail {
+                    border: $component-border;
+                    border-radius: 2px;
+                  }
+
+                  &.page-stack {
+                    .page-thumbnail {
+                      box-shadow: 2px 2px $white, 3px 3px $detail,
+                        5px 5px $white, 6px 6px $detail;
+                    }
+                  }
+                }
+              }
+
+              .icon-container {
+                position: absolute;
+                display: none;
+
+                .action-icon {
+                  border-radius: 60px;
+                  background-color: $dark-blue;
+                  width: 28px;
+                  height: 28px;
+                  color: $white;
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
+                  cursor: pointer;
+
+                  svg {
+                    height: 21px;
+                  }
+                }
+              }
+
+              &:hover {
+                .icon-container {
+                  display: flex;
+                }
+              }
+            }
+          }
+
+          .doc-info {
+            display: flex;
+            justify-content: space-between;
+            flex: 1;
+            gap: 8px;
+
+            .file-name-section {
+              display: flex;
+              height: 40px;
+              flex: 2;
+
+              .control {
+                .input {
+                  border-radius: 4px 0 0 4px !important;
+                  box-shadow: none !important;
+                  border-right: 0;
+
+                  &:hover {
+                    border-color: $grey-outline;
+                  }
+                }
+              }
+
+              .name-input {
+                display: flex;
+                align-items: center;
+                height: 100%;
+                width: 100%;
+                max-width: 100%;
+                padding: 12px;
+                border-radius: 4px 0 0 4px;
+                border: 1px solid $grey-outline;
+                border-right: 0;
+                background-color: $white;
+                cursor: text;
+              }
+
+              .file-extension-container {
+                display: flex;
+                align-items: center;
+                padding: 13px;
+                height: 40px;
+                border-radius: 0 4px 4px 0;
+                border: 1px solid $grey-outline;
+                background-color: $white;
+                color: $grey-blue;
+              }
+            }
+
+            .category {
+              flex: 1;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/scss/document_error.scss

@@ -0,0 +1,81 @@
+@import "./imports.scss";
+
+.document-error-modal {
+  text-align: left;
+
+  .modal {
+    &.is-active {
+      .modal-content {
+        height: auto;
+        max-width: 400px !important;
+
+        .modal-close {
+          display: none !important;
+        }
+
+        .modal-card-body {
+          background: $white;
+          border-radius: 12px 12px 0 0 !important;
+
+          .header {
+            display: flex;
+            justify-content: space-between;
+
+            .error-icon {
+              width: 48px;
+              height: 48px;
+              border-radius: 50%;
+              background: $low-opacity-red;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+            }
+
+            .close-btn {
+              color: $grey;
+
+              &:hover {
+                cursor: pointer;
+              }
+            }
+          }
+
+          .content {
+            padding-top: 15px;
+            color: $dark-blue !important;
+
+            h3 {
+              font-weight: 500 !important;
+              font-size: 18px !important;
+              line-height: 28px !important;
+              padding-bottom: 5px;
+            }
+
+            p {
+              font-weight: 400;
+              line-height: 20px;
+              font-size: 14px;
+            }
+          }
+        }
+
+        .modal-card-foot {
+          display: flex;
+          justify-content: center;
+          border: none;
+          background: $white;
+          border-radius: 0 0 12px 12px;
+          padding-top: 0 !important;
+
+          .button {
+            width: 100%;
+            height: 44px;
+            font-weight: 500 !important;
+            font-size: 16px !important;
+            line-height: 24px !important;
+          }
+        }
+      }
+    }
+  }
+}

package/src/assets/scss/document_handover.scss

@@ -0,0 +1,200 @@
+@import "./imports.scss";
+
+.handover-container {
+  .handover-btn {
+    font-size: 14px;
+    font-weight: 500;
+
+    &:hover {
+      background-color: $darker-green;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .handover-collapse {
+    position: absolute !important;
+    right: 20px;
+    top: 52px;
+    max-width: 435px;
+    max-height: 264px;
+    margin: 0;
+
+    .collapse-content {
+      .notification {
+        background-color: $white;
+        border: 1px solid $subtle-grey;
+        box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+          0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+        padding: 0;
+
+        .content {
+          .container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          }
+
+          .header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid $subtle-grey;
+            padding: 15px;
+
+            .title {
+              margin: 0 !important;
+              color: $dark-blue;
+              font-size: 14px;
+            }
+          }
+
+          .input-container {
+            .input-section {
+              margin-top: 7px;
+              padding-left: 15px;
+              padding-right: 15px;
+              font-size: 14px;
+
+              ::placeholder {
+                font-size: 14px;
+                font-weight: 400;
+                color: $grey;
+              }
+
+              .handover-btn-menu {
+                height: 40px;
+                width: 97px;
+                background-color: $dark-blue;
+                color: $white;
+                font-size: 14px;
+                border: 0;
+
+                &:focus {
+                  box-shadow: none;
+                  border: 0;
+                }
+              }
+
+              .field {
+                margin: 0 !important;
+                padding-right: 8px;
+
+                .validation-message {
+                  display: none;
+                }
+
+                .control {
+                  width: 298px;
+                  height: 40px;
+
+                  .input {
+                    border-color: $subtlest-grey;
+                    font-size: 14px;
+                    height: 40px;
+
+                    &:focus {
+                      box-shadow: none !important;
+                    }
+                  }
+                }
+              }
+
+              .loading-overlay.is-active {
+                position: relative;
+                height: 40px;
+                width: 97px;
+                border-radius: 4px;
+                background-color: $dark-blue;
+
+                .spinner {
+                  color: $white;
+                }
+              }
+            }
+
+            &.invalid {
+              .input {
+                border-color: $red !important;
+              }
+            }
+
+            .invalid-email-msg {
+              color: $red;
+              margin: 8px 15px 20px 15px;
+            }
+          }
+
+          .members-section {
+            margin: 15px;
+            margin-right: 0;
+
+            .members-title {
+              display: flex !important;
+              margin-bottom: 10px;
+
+              .title {
+                color: $grey !important;
+                font-size: 12px !important;
+                font-weight: 400 !important;
+                margin-bottom: 0 !important;
+              }
+            }
+
+            .member-list {
+              max-height: 110px;
+              padding-right: 15px;
+
+              &.scroll {
+                overflow: auto;
+              }
+
+              .member {
+                padding-bottom: 7px;
+
+                .email {
+                  margin-bottom: 0 !important;
+                  color: $grey-darker;
+                }
+
+                .select-btn {
+                  height: 32px;
+                  color: $dark-blue;
+                  font-weight: 500;
+                  font-size: 14px;
+
+                  &:hover {
+                    background-color: $grey-hover;
+                  }
+
+                  &:focus {
+                    box-shadow: none;
+                    border-color: $grey-outline;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .close-icon-container {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      .close-btn {
+        &.error-icon {
+          color: $grey;
+        }
+
+        &.snackbar-icon {
+          color: $white;
+        }
+      }
+    }
+  }
+}