@djb25/digit-ui-css 1.0.0

package/src/components/grey.scss

@@ -0,0 +1,3 @@
+.grey {
+  @apply text-text-secondary;
+}

package/src/components/hoc/InboxComposer.scss

@@ -0,0 +1,115 @@
+.InboxComposerWrapper {
+  .form-field-flex-one {
+    .form-field {
+      @apply flex-1;
+    }
+  }
+}
+
+.inboxPopupMobileWrapper {
+  @apply block p-md w-full overflow-scroll;
+  .submit {
+    @apply flex left-0 w-full px-xl items-center flex-row-reverse !important;
+  }
+  .form-field {
+    margin: 0 !important;
+    @apply w-full;
+  }
+  .InboxMobilePopupCloseButtonWrapper {
+    @apply flex flex-row-reverse;
+  }
+}
+
+@screen dt {
+  .InboxComposerWrapper {
+    grid-template-columns: calc(25% - 32px) 75%;
+    @apply grid gap-x-8 gap-y-6;
+  }
+
+  .wns-inbox-composer {
+    .filter-form {
+      height: fit-content;
+    }
+
+    .wns-search-field {
+      width: 30% !important;
+      .field-container {
+      }
+    }
+    .form-field {
+      width: 100% !important;
+    }
+
+    .SubmitAndClearAllContainer {
+      width: 100%;
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      .clear-search {
+        width: 30%;
+        display: inline-block;
+        vertical-align: middle;
+        text-align: right;
+        cursor: pointer;
+        p {
+          padding: 1rem;
+          color: rgb(244, 119, 56);
+          text-align: end;
+        }
+      }
+      .submit {
+        width: 30% !important;
+        margin-left: unset !important;
+        button {
+          width: 100% !important;
+        }
+      }
+    }
+  }
+
+  .search-form-wns-inbox {
+    .clear-search-container {
+      grid-column: 2/3;
+      text-align: right;
+      .clear-search {
+        width: 100%;
+        color: rgb(244, 119, 56);
+      }
+    }
+    button {
+      width: 100%;
+    }
+
+    .filter-form {
+      height: fit-content;
+    }
+
+    .search-complaint-container {
+      flex-direction: column;
+      align-items: flex-start;
+      --bg-opacity: 1;
+      background-color: #fff;
+      background-color: rgba(255, 255, 255, var(--bg-opacity));
+      padding: 16px;
+      display: unset;
+      flex-wrap: unset;
+      justify-content: unset;
+      margin-bottom: 0;
+      .complaint-input-container {
+        display: grid;
+        grid-template-columns: 33.33% 33.33% 33.33%;
+      }
+      .form-field {
+        width: 100%;
+        padding-right: 15px;
+        .clear-search {
+          padding-top: 10px;
+        }
+      }
+    }
+    .submit {
+      margin-top: 0;
+      right: 0;
+    }
+  }
+}

package/src/components/hoc/index.scss

@@ -0,0 +1 @@
+@import "./InboxComposer.scss"

package/src/components/howItWorks.scss

@@ -0,0 +1,71 @@
+.how-it-works-page{
+    width: 92%;
+    margin: 16px;
+    .how-it-works-page-header{
+        margin-bottom: 15px;
+    }
+}
+
+.video-icon{
+    float: left;
+    background-color: #6F6F6F;
+    height: 60px;
+    width: 100px;
+    cursor: pointer;
+    margin: 5px;
+
+    .vid-svg{
+        padding-left: 35px;
+        padding-top: 18px;
+    }
+}
+
+.how-it-works-header-description{
+    padding: 5px;
+    overflow-wrap: break-word;
+    h2{
+        font-size: 16px;
+        font-weight: 400;
+    }
+    p{
+        font-size: 12px;
+        font-weight: 400;
+    }
+}
+
+.how-it-works-pdf-section{
+    display: flex;
+    justify-content: space-between;
+    .pdf-icon-header-desc{
+        float: left;
+        .pdf-icon{
+            display: inline-block;
+        }
+        .pdf-header-desc{
+            display: inline-block;
+            position: absolute;
+            padding: 5px;
+            overflow-wrap: break-word;
+            h2{
+                font-size: 16px;
+                font-weight: 400;
+            }
+            p{
+                font-size: 12px;
+                font-weight: 400;
+            }
+        }
+    }
+    .download-icon{
+        float: right;
+    }
+}
+
+.how-it-works-video-play{
+    display: inline-block;
+    .close-button{
+        float: right;
+        cursor: pointer;
+    }
+}
+

package/src/components/imageviewer.scss

@@ -0,0 +1,33 @@
+.image-viewer-wrap {
+  @apply bg-text-primary p-md top-0 left-0 z-20 fixed w-full h-full;
+
+  svg {
+    top: 90px;
+    right: 16px;
+    @apply absolute h-6 w-6;
+  }
+
+  img {
+    margin-top: 40%;
+    @apply max-w-full h-auto;
+  }
+}
+
+@screen dt {
+  .image-viewer-wrap {
+    @apply flex fixed top-0 left-0 w-full h-full z-20 bg-text-primary p-md;
+
+    svg {
+      top: 90px;
+      right: 16px;
+      @apply absolute h-6 w-6;
+    }
+
+    img {
+      width: auto;
+      height: auto;
+      max-width: 640px;
+      margin: auto;
+    }
+  }
+}

package/src/components/inboxv2/InboxLinks.scss

@@ -0,0 +1,59 @@
+@import url("../../digitv2/index.scss");
+
+.inbox-search-links-container {
+    @extend .light-paper-primary;
+    height: 100%;
+    width: 100% !important;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    .header {
+        @extend .light-text-color-primary;
+        display: grid;
+        grid-template-columns: 20% 1fr;
+        .logo {
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            .inbox-search-icon--projects {
+                fill : #f47738;
+                height: 2rem;
+                width: 2rem;
+            }
+        }
+        .text {
+            @extend .light-text-color-primary;
+            line-height: 32px;
+            font-weight: 700;
+            color : black;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+        }
+
+        @media (min-width: 1024px) {
+            .text {
+                font-size: 24px;
+            }
+        }
+
+        @media (max-width: 1024px) {
+            .text {
+                font-size: 20px;
+            }
+        }
+    }
+    .contents {
+        margin-top: 1rem;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        .link {
+            @extend .light-primary;
+            padding: 8px;
+            --text-opacity: 1;
+            color: #f47738;
+            color: rgba(244, 119, 56, var(--text-opacity));
+        }
+    }
+}

package/src/components/inboxv2/horizontalNav.scss

@@ -0,0 +1,224 @@
+@import url("../../digitv2/index.scss");
+
+.horizontal-nav {
+    @extend .light-paper-primary;
+    @extend .light-text-color-primary;
+    overflow: auto;
+    display: flex;
+    margin-top: 3rem;
+
+    .menu-item {
+        border: 10px;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        cursor: pointer;
+        text-decoration: none;
+        margin: 0px;
+        padding: 0px;
+        outline: none;
+        font-size: 16px;
+        position: relative;
+        color: rgb(95, 92, 98);
+        line-height: 48px;
+        transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+        min-height: 48px;
+        white-space: initial;
+        background: none;
+
+        .icon {
+            @extend .light-background;
+            display: block;
+            color: rgb(117, 117, 117);
+            fill: rgb(117, 117, 117);
+            height: 21px !important;
+            width: 21px !important;
+            float: left;
+            margin-top: 12px;
+        }
+
+        .edit-btn-ico {
+            height: 17px;
+            width: 17px;
+            margin-top: 16px;
+        }
+
+        .icon+.menu-label {
+            margin-left: 36px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+   
+    @media (min-width: 780px) {
+        .sidebar-list {
+            padding-right: 30px;
+            padding-left: 30px;
+            background-color: #EEEEEE;
+            border: 1px solid #DDDDDD;
+            border-radius: 8px 8px 0px 0px;
+
+            &.active {
+                font-weight: 600;
+                border-bottom: 3px solid theme(colors.primary.main);
+
+                background-color: #FFFFFF;
+
+                .menu-label {
+                    color: theme(colors.primary.main);
+                }
+
+                .icon {
+                    fill: theme(colors.primary.main);
+                }
+            }
+
+            .submenu-container {
+                cursor: pointer;
+                display: flex;
+                flex-direction: column;
+
+                .sidebar-link {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 15px!important;
+                    padding-top: 20px!important;
+                    svg {
+                        width: 24px !important;
+                        height: 24px !important;
+                        color: rgb(117, 117, 117);
+                        fill: rgb(117, 117, 117);
+                    }
+
+                    .actions {
+                        .tooltip {
+                            margin-left: 16px;
+                        }
+                    }
+                }
+
+                .actions {
+                    display: flex;
+                    align-items: center;
+                    overflow: hidden !important;
+
+                    span {
+                        margin-left: 13px;
+                        line-height: 48px;
+                        white-space: nowrap;
+                        color: #5f5c62;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+            .submenu-container:first-child {
+                margin-top:5px;
+                .employee-search-input{
+                    margin-left:16px !important;
+                }
+              }
+        }
+        .sidebar-list-search-form {
+            padding-right: 30px;
+            padding-left: 30px;
+
+            &.active {
+                font-weight: 600;
+                border-bottom: 3px solid theme(colors.primary.main);
+
+                background-color: #FFFFFF;
+
+                .menu-label {
+                    color: theme(colors.primary.main);
+                }
+
+                .icon {
+                    fill: theme(colors.primary.main);
+                }
+            }
+
+            .submenu-container {
+                cursor: pointer;
+                display: flex;
+                flex-direction: column;
+
+                .sidebar-link {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 15px!important;
+                    padding-top: 20px!important;
+                    svg {
+                        width: 24px !important;
+                        height: 24px !important;
+                        color: rgb(117, 117, 117);
+                        fill: rgb(117, 117, 117);
+                    }
+
+                    .actions {
+                        .tooltip {
+                            margin-left: 16px;
+                        }
+                    }
+                }
+
+                .actions {
+                    display: flex;
+                    align-items: center;
+                    overflow: hidden !important;
+
+                    span {
+                        margin-left: 13px;
+                        line-height: 48px;
+                        white-space: nowrap;
+                        color: #5f5c62;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                }
+            }
+            .submenu-container:first-child {
+                margin-top:5px;
+                .employee-search-input{
+                    margin-left:16px !important;
+                }
+              }
+        }
+
+
+        .dropdown-link {
+            .actions {
+                display: flex;
+                padding: 1em;
+
+                svg {
+                    width: 21px;
+                    height: 21px;
+                    color: rgb(117, 117, 117);
+                    fill: rgb(117, 117, 117);
+                }
+
+                span {
+                    color: #5f5c62;
+                }
+            }
+        }
+    }
+}
+
+
+
+.sidebar-link {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px!important;
+    padding-top: 20px!important;
+    svg {
+        width: 24px !important;
+        height: 26px !important;
+        color: rgb(117, 117, 117);
+        fill: rgb(117, 117, 117);
+    }
+}

package/src/components/inboxv2/inboxSearch.scss

@@ -0,0 +1,116 @@
+@import url("../../digitv2/index.scss");
+
+.search-wrapper {
+    @extend .light-text-color-primary;
+  @extend .light-paper-primary;
+  height: 100%;
+  width: 100%;
+  padding: 1rem;
+
+  .popup-label {
+    display: flex;
+    font-size: large;
+    @extend .light-text-color-primary;
+    .header {
+      @extend .light-text-color-primary;
+      width: 100%;
+      font-weight: normal;
+      font-size: large;
+      .icon {
+        @extend .light-primary;
+        margin-right: 12px;
+        margin-top: 5px;
+      }
+    }
+  }
+
+  .filter-header-wrapper {
+    @extend .light-text-color-primary;
+    display: grid;
+    grid-template-columns: 15% 1fr 15%;
+    height: 3rem;
+    margin-bottom: 1rem;
+    .icon-refresh {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid #00000017;
+      cursor: pointer;
+      svg {
+        height: 60%;
+        width: 40%;
+      }
+    }
+    .label {
+      @extend .light-text-color-primary;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
+
+    @media (min-width: 1024px) {
+      .label {
+        font-size: 24px;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      .label {
+        font-size: 16px;
+      }
+    }
+
+    .icon-filter {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+    }
+  }
+
+  .search-field-wrapper {
+    display: grid;
+    row-gap: 0.25rem;
+    column-gap: 1rem;
+    &.inbox {
+      grid-template-columns: repeat(3, 1fr);
+      &.filter {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+    &.search {
+      grid-template-columns: repeat(4, 1fr);
+    }
+    .text-input{
+        @extend .light-primary;
+    }
+  }
+
+  .search-button-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 1rem;
+    padding-top: 8px;
+    &.inbox {
+      grid-column: 2 / span 2;
+      &.filter {
+        button {
+          width: 100%;
+        }
+      }
+    }
+    &.search {
+      grid-column: 3 / span 2;
+    }
+  }
+}
+
+@screen sm {
+  .search-wrapper {
+    .search-field-wrapper {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+}