@expressms/smartapp-ui 1.1.6 → 1.1.8

package/build/main/styles/stories.module.scss

@@ -2,17 +2,25 @@
 @import 'react-datepicker/dist/react-datepicker';
 
 $color-black: rgba(17, 17, 17, 1);
+$color-light-black-50: rgba(17, 17, 17, 0.5);
+$color-light-black-30: rgba(17, 17, 17, 0.3);
+$color-light-black-20: rgba(85, 85, 85, 0.2);
+$color-light-black-10: rgba(17, 17, 17, 0.1);
+$color-black-60: rgba(0, 0, 0, 0.6);
+$color-black-20: rgba(0, 0, 0, 0.2);
 $color-black-10: rgba(0, 0, 0, 0.1);
 $color-black-8: rgba(0, 0, 0, 0.08);
-$color-dark-gray: rgba(17, 17, 17, 0.5);
-$color-darker-gray: rgba(17, 17, 17, 0.3);
-$color-darker-gray-opacity: rgba(0, 0, 0, 0.2);
-$color-darkest-gray-opacity: rgba(204, 204, 204, 1);
-$color-gray: rgba(17, 17, 17, 0.1);
-$color-light-gray: rgba(239, 242, 244, 1);
+$color-black-5: rgba(0, 0, 0, 0.05);
+$color-darkest-gray: rgba(61, 61, 61, 1);
+$color-darker-gray: rgba(102, 102, 102, 1);
+$color-dark-gray: rgba(128, 128, 128, 1);
+$color-gray: rgba(140, 140, 140, 1);
+$color-light-gray: rgba(204, 204, 204, 1);
 $color-lighter-gray: rgba(224, 228, 236, 1);
-$color-lightest-gray: rgba(0, 0, 0, 0.05);
+$color-lightest-gray: rgba(239, 242, 244, 1);
 $color-white: rgba(255, 255, 255, 1);
+$color-white-30: rgba(255, 255, 255, 0.3);
+$color-white-5: rgba(255, 255, 255, 0.05);
 $color-dark-red: rgba(222, 97, 97, 1);
 $color-red: rgba(235, 85, 69, 1);
 $color-light-red: rgba(200, 66, 53, 1);
@@ -24,13 +32,8 @@ $color-orange: rgba(252, 158, 90, 1);
 $color-orange-10: rgba(252, 158, 90, 0.1);
 $color-light-orange: rgba(253, 246, 228, 1);
 
-$border-dark-gray-color: rgba(102, 102, 102, 1);
-$border-gray-color: rgba(128, 128, 128, 1);
-
 $popup-background: rgba(37, 77, 145, 0.2);
-
-$box-shadow-light-color: rgba(0, 0, 0, 0.05);
-$box-shadow-dark-color: rgba(0, 0, 0, 0.6);
+$blurred-background: linear-gradient(0deg, rgba(85, 85, 85, 0.8) 0%, rgba(85, 85, 85, 0.8) 100%), rgba(255, 255, 255, 0.01);
 
 .smartapp-action-modal {
   width: 100%;
@@ -84,7 +87,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     }
 
     &--delimiter {
-      border-top: 0.5px solid $color-gray;
+      border-top: 0.5px solid $color-light-black-10;
       margin: 0 -24px 16px -24px;
     }
 
@@ -94,6 +97,22 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       justify-content: center;
     }
   }
+
+  &__dark {
+    .smartapp-action-modal {
+      &__content {
+        background-color: $color-darkest-gray;
+
+        &--title {
+          color: $color-white;
+        }
+
+        &--delimiter {
+          border-top-color: $color-white-5;
+        }
+      }
+    }
+  }
 }
 
 .action-modal-content {
@@ -122,7 +141,9 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 .smartapp-attached-file {
   display: flex;
   align-items: center;
+  font-family: Open Sans, 'sans-serif';
   margin-bottom: 8px;
+
   &--icon {
     display: flex;
     align-items: flex-start;
@@ -134,6 +155,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     flex-direction: row;
     gap: 12px;
     width: 100%;
+
     &--info {
       &__name {
         font-weight: 700;
@@ -147,7 +169,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        color: $color-dark-gray;
+        color: $color-light-black-50;
         margin: 0;
       }
     }
@@ -179,6 +201,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   justify-content: center;
   width: 40px;
   height: 40px;
+  font-family: Open Sans, 'sans-serif';
   font-size: 18px;
   color: $color-white;
   background: linear-gradient(135deg, $color-purple 0%, $color-dark-red 100%);
@@ -255,6 +278,15 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     background: $color-red;
     border: 0;
   }
+
+  &__dark--blue,
+  &__dark--red {
+    color: $color-darkest-gray;
+  }
+
+  &__dark--white {
+    background-color: $color-darkest-gray;
+  }
 }
 
 .smartapp-calendar-component {
@@ -266,7 +298,8 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   .react-datepicker {
-    border-color: $color-gray !important;
+    font-family: Open Sans, 'sans-serif';
+    border-color: $color-light-black-10 !important;
     box-shadow: 0 9px 24px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.14) !important;
     padding-bottom: 24px;
 
@@ -283,8 +316,8 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
     // Голова
     &__header {
-      background: $color-light-gray !important;
-      color: $color-dark-gray;
+      background: $color-lightest-gray !important;
+      color: $color-light-black-50;
       padding: 0;
       border-bottom: 0;
     }
@@ -294,7 +327,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       font-weight: 700;
       font-size: 14px;
       line-height: 19px;
-      color: $color-dark-gray;
+      color: $color-light-black-50;
       padding: 8px 0 !important;
     }
 
@@ -303,7 +336,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       font-weight: 700;
       font-size: 12px;
       line-height: 16px;
-      color: $color-dark-gray;
+      color: $color-light-black-50;
       margin-top: 16px;
     }
 
@@ -314,7 +347,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       font-size: 12px;
       line-height: 16px;
       text-transform: uppercase;
-      color: $color-dark-gray !important;
+      color: $color-light-black-50 !important;
       background: $color-white;
     }
 
@@ -325,7 +358,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
     // Дни, которые уже прошли
     &__day--disabled {
-      color: $color-darkest-gray-opacity !important;
+      color: $color-light-gray !important;
     }
 
     // Каждый день
@@ -339,7 +372,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
       &:hover {
         border-radius: 8px;
-        background-color: $color-darker-gray;
+        background-color: $color-light-black-30;
         color: $color-black;
       }
     }
@@ -377,6 +410,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
   // // Сам input для календаря с выбранными датами
   .smartapp-calendar-input {
+    font-family: Open Sans, 'sans-serif';
     font-weight: 400;
     font-size: 14px;
     line-height: 19px;
@@ -384,7 +418,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     align-items: center;
     cursor: pointer;
     padding: 12px 16px;
-    border: 1px solid $color-lightest-gray;
+    border: 1px solid $color-black-5;
     border-radius: 8px;
     box-sizing: border-box;
     width: 100%;
@@ -409,24 +443,24 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     width: 17px;
     height: 17px;
     background-color: $color-white;
-    border: 1.5px solid $border-gray-color;
+    border: 1.5px solid $color-dark-gray;
     border-radius: 50%;
     cursor: pointer;
   }
 
   /* стили при наведении курсора на радио */
   &__custom-check-box:not(:disabled):not(:checked) + .checkmark:hover::before {
-    border-color: $border-dark-gray-color;
+    border-color: $color-darker-gray;
   }
 
   /* стили для активной радиокнопки (при нажатии на неё) */
   &__custom-check-box:not(:disabled):active + .checkmark::before {
-    border-color: $border-gray-color;
+    border-color: $color-dark-gray;
   }
 
   /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
   &__custom-check-box:focus:not(:checked) + .checkmark::before {
-    border-color: $border-gray-color;
+    border-color: $color-dark-gray;
     background-size: 60% 60%;
   }
 
@@ -452,10 +486,11 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   display: flex;
   box-sizing: border-box;
   justify-content: space-between;
+  font-family: Open Sans, 'sans-serif';
   max-width: 172px;
   padding: 4px 8px 4px 4px;
   border-radius: 20px;
-  background-color: $color-light-gray;
+  background-color: $color-lightest-gray;
 
   &__info {
     display: flex;
@@ -523,7 +558,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     }
 
     &--delimiter {
-      border-top: 0.5px solid $color-gray;
+      border-top: 0.5px solid $color-light-black-10;
       margin: 0 -24px 16px -24px;
     }
 
@@ -563,6 +598,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   display: flex;
   flex-direction: row;
   align-items: center;
+  font-family: Open Sans, 'sans-serif';
   font-size: 14px;
   line-height: 19px;
   color: $color-black;
@@ -615,7 +651,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         font-weight: 400;
         font-size: 12px;
         line-height: 16px;
-        color: $color-dark-gray;
+        color: $color-light-black-50;
       }
     }
   }
@@ -640,7 +676,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       font-weight: 400;
       font-size: 12px;
       line-height: 16px;
-      color: $color-dark-gray;
+      color: $color-light-black-50;
     }
   }
 
@@ -655,6 +691,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         cursor: pointer;
 
         &--name {
+          font-family: Open Sans, 'sans-serif';
           font-weight: 400;
           font-size: 14px;
           line-height: 20px;
@@ -714,6 +751,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   flex-direction: column;
+  font-family: Open Sans, 'sans-serif';
   background-color: $color-white;
 
   &__icon {
@@ -737,13 +775,14 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     font-weight: 400;
     font-size: 16px;
     line-height: 22px;
-    color: $color-dark-gray;
+    color: $color-light-black-50;
     word-break: break-word;
     text-align: center;
   }
 }
 
 .smartapp-header {
+  font-family: Open Sans, 'sans-serif';
   font-weight: 700;
   display: flex;
   justify-content: space-between;
@@ -801,44 +840,45 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 }
 
 .smartapp-input {
+  font-family: Open Sans, 'sans-serif';
   display: flex;
   flex-direction: column;
   position: relative;
 
   &__title {
-    font-weight: 700;
     font-size: 14px;
+    font-weight: 600;
     line-height: 19px;
-    margin: 0 0 8px 0;
     color: $color-black;
+    margin: 0 0 8px 0;
   }
 
   &__container {
     position: relative;
 
     &--field {
-      padding: 13px 16px;
-      border: 1px solid $color-lightest-gray;
-      border-radius: 8px;
-      font-weight: 400;
-      color: $color-black;
       width: 100%;
       box-sizing: border-box;
+      font-family: inherit;
+      font-weight: 400;
+      color: $color-black;
+      border: 1px solid $color-black-5;
+      border-radius: 8px;
+      padding: 13px 16px;
 
       &__with-clear-button {
         padding-right: 44px;
       }
 
       &::placeholder {
-        font-family: Open Sans, 'sans-serif';
         font-size: inherit;
         font-weight: 400;
         line-height: inherit;
-        color: $color-darker-gray;
+        color: $color-light-black-30;
       }
 
       &:focus-visible {
-        border: 1px solid $color-blue;
+        border: 1px solid $color-blue !important;
         outline: none;
       }
     }
@@ -856,6 +896,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       position: absolute;
       right: 1px;
       top: 15px;
+      color: $color-gray;
 
       &:active {
         transform: scale(0.95);
@@ -875,12 +916,33 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   &__error {
     font-size: 12px;
     line-height: 16px;
-    color: $color-red;
+    color: $color-light-red;
     margin: 8px 0 0 0;
   }
+
+  &__dark {
+    .smartapp-input {
+      &__title {
+        color: $color-white;
+      }
+
+      &__container {
+        &--field {
+          color: $color-white;
+          background: $color-darkest-gray;
+          border-color: $color-black-5;
+
+          &::placeholder {
+            color: $color-white-30;
+          }
+        }
+      }
+    }
+  }
 }
 
 .smartapp-loader-wrapper {
+  font-family: Open Sans, 'sans-serif';
   display: flex;
   align-items: center;
   justify-content: center;
@@ -905,9 +967,14 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   &__title {
     font-weight: 400;
     text-align: center;
-    color: $color-darker-gray;
+    color: $color-light-black-30;
     word-break: break-word;
     margin: 0;
+
+    &--dark {
+      color: $color-white;
+      opacity: 0.3;
+    }
   }
 }
 
@@ -915,7 +982,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   position: absolute;
   padding: 16px;
   box-sizing: border-box;
-  box-shadow: 2px 2px 6px $box-shadow-dark-color;
+  box-shadow: 2px 2px 6px $color-black-60;
   max-width: 330px;
   top: 45px;
   background-color: $color-white;
@@ -924,6 +991,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   &__container {
     position: relative;
     display: inline-flex;
+    font-family: Open Sans, 'sans-serif';
     z-index: 1;
     max-width: 330px;
   }
@@ -999,16 +1067,18 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 }
 
 .smartapp-switcher {
+  font-family: Open Sans, 'sans-serif';
+
   &__instance {
     padding: 8px 16px;
-    background: $color-lightest-gray;
+    background: $color-black-5;
     border-radius: 4px;
     border: 0;
     font-weight: 700;
     font-size: 12px;
     line-height: 16px;
     letter-spacing: -0.01em;
-    color: $color-darker-gray-opacity;
+    color: $color-black-20;
     text-decoration: none;
     white-space: nowrap;
     box-sizing: border-box;
@@ -1056,14 +1126,14 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   right: 0;
   bottom: 0;
   border-radius: 69px;
-  background: $border-gray-color;
+  background: $color-dark-gray;
   transition: 0.2s;
   -webkit-transition: 0.2s;
   cursor: pointer;
 
   &__disabled {
     opacity: 0.3;
-    background: $border-gray-color !important;
+    background: $color-dark-gray !important;
     cursor: default;
   }
 
@@ -1083,7 +1153,7 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   &:hover {
-    background: $border-dark-gray-color;
+    background: $color-darker-gray;
   }
 }
 
@@ -1111,7 +1181,9 @@ input:checked + .smartapp-slider:before {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $color-black;
+  background: $blurred-background;
+  -webkit-backdrop-filter: blur(15px);
+  backdrop-filter: blur(15px);
   border: none;
   padding: 0;
 
@@ -1162,6 +1234,12 @@ input:checked + .smartapp-slider:before {
     }
   }
 
+  &:has(> div:first-child > div:nth-child(2) > div:first-child > .smartapp-stories__story > .smartapp-stories__story--loader) {
+    & > div:first-child > div:first-child {
+      opacity: 1 !important;
+    }
+  }
+
   &__web {
     width: 400px;
   }
@@ -1182,6 +1260,10 @@ input:checked + .smartapp-slider:before {
     justify-content: center;
     color: $color-white;
 
+    &--image-bg {
+      background: $color-light-black-20;
+    }
+
     &--title {
       font-size: 24px;
       font-weight: 700;
@@ -1231,6 +1313,18 @@ input:checked + .smartapp-slider:before {
         right: 16px;
       }
     }
+
+    &--loader {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      svg {
+        animation: loading 1s linear infinite;
+      }
+    }
   }
 
   &__animate-right {
@@ -1269,6 +1363,12 @@ input:checked + .smartapp-slider:before {
   }
 }
 
+@keyframes loading {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .smartapp-sync-loader {
   position: absolute;
   left: 0;
@@ -1278,7 +1378,7 @@ input:checked + .smartapp-slider:before {
   align-items: center;
   gap: 8px;
   border-radius: 100px;
-  box-shadow: 0 1px 8px 0 $box-shadow-light-color;
+  box-shadow: 0 1px 8px 0 $color-black-5;
   padding: 8px 12px;
   margin: 16px auto 0 auto;
   z-index: 1000;
@@ -1400,6 +1500,18 @@ input:checked + .smartapp-slider:before {
       cursor: pointer;
     }
   }
+
+  &__dark {
+    .smartapp-modal {
+      &__content {
+        background-color: $color-darkest-gray;
+
+        &--title {
+          color: $color-white;
+        }
+      }
+    }
+  }
 }
 
 .modal-content {
@@ -1483,7 +1595,7 @@ input:checked + .smartapp-slider:before {
     justify-content: center;
     width: 20px;
     height: 20px;
-    border: 1.5px solid $border-gray-color;
+    border: 1.5px solid $color-dark-gray;
     border-radius: 50%;
     background-color: $color-white;
     margin: 0;
@@ -1492,7 +1604,7 @@ input:checked + .smartapp-slider:before {
   }
 
   input[type="radio"]:not(:disabled):hover {
-    border-color: $border-dark-gray-color;
+    border-color: $color-darker-gray;
     cursor: pointer;
   }