@expressms/smartapp-ui 1.0.7 → 1.1.1

package/build/main/assets/icons/loader.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 8C1.5 4.13401 4.63401 1 8.5 1C12.366 1 15.5 4.13401 15.5 8C15.5 11.866 12.366 15 8.5 15C7.94772 15 7.5 14.5523 7.5 14C7.5 13.4477 7.94772 13 8.5 13C11.2614 13 13.5 10.7614 13.5 8C13.5 5.23858 11.2614 3 8.5 3C5.73858 3 3.5 5.23858 3.5 8C3.5 8.55228 3.05228 9 2.5 9C1.94772 9 1.5 8.55228 1.5 8Z" fill="currentColor"/>
+</svg>

package/build/main/assets/icons/refresh.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.56794 9.99964C3.56794 8.12635 4.388 6.44602 5.67438 5.2722L7.58787 7.18569V2.36176H2.76395L4.53272 4.13054C2.95691 5.59379 1.95996 7.67612 1.95996 9.99964C1.95996 13.8617 4.6804 17.0832 8.30458 17.8602C8.77703 17.9615 9.19585 17.5803 9.19585 17.0972C9.19585 16.6848 8.88658 16.3426 8.48574 16.2459C5.66795 15.5657 3.56794 13.0229 3.56794 9.99964ZM18.0397 9.99964C18.0397 6.13764 15.3193 2.91614 11.6951 2.1391C11.2226 2.03781 10.8038 2.41894 10.8038 2.90212C10.8038 3.31447 11.1131 3.65666 11.5139 3.75342C14.3317 4.4336 16.4317 6.97643 16.4317 9.99964C16.4317 11.8729 15.6117 13.5533 14.3253 14.7271L12.4118 12.8136V17.6375H17.2357L15.4669 15.8688C17.0428 14.4055 18.0397 12.3232 18.0397 9.99964Z" fill="#111111" fill-opacity="0.3"/>
+</svg>

package/build/main/constants/constants.d.ts

@@ -3,13 +3,33 @@ export declare const DEFAULT_BLUE_ICON_COLOR = "#4799E3";
 export declare const DEFAULT_RED_ICON_COLOR = "#EB5545";
 export declare const DEFAULT_GRAY_ICON_COLOR = "#1111114D";
 export declare const DEFAULT_BLACK_ICON_COLOR = "#111111";
+export declare const DEFAULT_HEADER_TEXT_COLOR = "#111111";
+export declare const DEFAULT_HEADER_BACKGROUND_COLOR = "#FFFFFF";
+export declare const DEFAULT_WHITE_LOADER_BACKGROUND_COLOR = "#FFFFFF";
+export declare const DEFAULT_GRAY_LOADER_BACKGROUND_COLOR = "#E0E4EC66";
+export declare const DEFAULT_TEXT_BUTTON_COLOR = "#111111";
+export declare const DEFAULT_BACKGROUND_BUTTON_COLOR = "#FFFFFF";
 export declare const INPUT_TYPE_PASSWORD = "password";
 export declare const INPUT_TYPE_TEXT = "text";
+export declare enum FONT_SIZE {
+    small = "14px",
+    default = "16px",
+    large = "22px"
+}
+export declare enum LINE_HEIGHT {
+    small = "19px",
+    default = "22px",
+    large = "30px"
+}
 export declare enum PLATFORM {
     web = "web",
     ios = "ios",
     android = "android"
 }
+export declare enum THEME {
+    default = "default",
+    dark = "dark"
+}
 export declare const BUTTON_PADDING: number;
 export declare const MAX_PADDING_FOR_IMAGE: number;
 export declare const DEFAULT_FONT_FAMILY: string;

package/build/main/constants/constants.js

@@ -3,14 +3,37 @@ export var DEFAULT_BLUE_ICON_COLOR = '#4799E3';
 export var DEFAULT_RED_ICON_COLOR = '#EB5545';
 export var DEFAULT_GRAY_ICON_COLOR = '#1111114D';
 export var DEFAULT_BLACK_ICON_COLOR = '#111111';
+export var DEFAULT_HEADER_TEXT_COLOR = '#111111';
+export var DEFAULT_HEADER_BACKGROUND_COLOR = '#FFFFFF';
+export var DEFAULT_WHITE_LOADER_BACKGROUND_COLOR = '#FFFFFF';
+export var DEFAULT_GRAY_LOADER_BACKGROUND_COLOR = '#E0E4EC66';
+export var DEFAULT_TEXT_BUTTON_COLOR = '#111111';
+export var DEFAULT_BACKGROUND_BUTTON_COLOR = '#FFFFFF';
 export var INPUT_TYPE_PASSWORD = 'password';
 export var INPUT_TYPE_TEXT = 'text';
+export var FONT_SIZE;
+(function (FONT_SIZE) {
+    FONT_SIZE["small"] = "14px";
+    FONT_SIZE["default"] = "16px";
+    FONT_SIZE["large"] = "22px";
+})(FONT_SIZE || (FONT_SIZE = {}));
+export var LINE_HEIGHT;
+(function (LINE_HEIGHT) {
+    LINE_HEIGHT["small"] = "19px";
+    LINE_HEIGHT["default"] = "22px";
+    LINE_HEIGHT["large"] = "30px";
+})(LINE_HEIGHT || (LINE_HEIGHT = {}));
 export var PLATFORM;
 (function (PLATFORM) {
     PLATFORM["web"] = "web";
     PLATFORM["ios"] = "ios";
     PLATFORM["android"] = "android";
 })(PLATFORM || (PLATFORM = {}));
+export var THEME;
+(function (THEME) {
+    THEME["default"] = "default";
+    THEME["dark"] = "dark";
+})(THEME || (THEME = {}));
 export var BUTTON_PADDING = 32;
 export var MAX_PADDING_FOR_IMAGE = 200;
 export var DEFAULT_FONT_FAMILY = 'Open Sans';

package/build/main/helpers/index.d.ts

@@ -1 +1,4 @@
-export declare const getIconColor: (iconColor: string | undefined, defaultIconColor: string) => string;
+export declare const getColor: (color: string | undefined, defaultColor: string) => string;
+export declare const isWebPlatform: (platform: string) => boolean;
+export declare const isIosPlatform: (platform: string) => boolean;
+export declare const isAndroidPlatform: (platform: string) => boolean;

package/build/main/helpers/index.js

@@ -1,3 +1,7 @@
-export var getIconColor = function (iconColor, defaultIconColor) {
-    return (iconColor && CSS.supports('color', iconColor)) ? iconColor : defaultIconColor;
+import { PLATFORM } from '../constants';
+export var getColor = function (color, defaultColor) {
+    return (color && CSS.supports('color', color)) ? color : defaultColor;
 };
+export var isWebPlatform = function (platform) { return platform === PLATFORM.web; };
+export var isIosPlatform = function (platform) { return platform === PLATFORM.ios; };
+export var isAndroidPlatform = function (platform) { return platform === PLATFORM.android; };

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

@@ -5,24 +5,27 @@ $color-black: rgba(17, 17, 17, 1);
 $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: #ccc;
+$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-lighter-gray: rgba(224, 228, 236, 1);
 $color-lighter-gray-opacity: rgba(224, 228, 236, 0.4);
 $color-lightest-gray: rgba(0, 0, 0, 0.05);
 $color-white: rgba(255, 255, 255, 1);
+$color-dark-red: rgba(222, 97, 97, 1);
 $color-red: rgba(235, 85, 69, 1);
+$color-purple: rgba(130, 98, 223, 1);
 $color-blue: rgba(71, 153, 227, 1);
-$color-light-blue: #cdf4ff;
+$color-light-blue: rgba(205, 244, 255, 1);
 $color-lighter-blue: rgba(71, 153, 227, 0.2);
 
 $border-color: rgba(85, 85, 85, 0.2);
 
 $popup-background: rgba(0, 0, 0, 0.3);
 
+$box-shadow-light-color: rgba(0, 0, 0, 0.05);
 $box-shadow-color: rgba(0, 0, 0, 0.25);
-$box-shadow-dark-color: rgb(0 0 0 / 60%);
+$box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
 .smartapp-action-modal {
   &__content {
@@ -134,12 +137,19 @@ $box-shadow-dark-color: rgb(0 0 0 / 60%);
   height: 40px;
   font-size: 18px;
   color: $color-white;
-  background-color: $color-light-blue;
+  background: linear-gradient(135deg, $color-purple 0%, $color-dark-red 100%);
   text-decoration: none;
   white-space: nowrap;
   font-weight: 500;
   border-radius: 50%;
   cursor: pointer;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: 50%;
+  }
 }
 
 .smartapp-button {
@@ -639,13 +649,20 @@ $box-shadow-dark-color: rgb(0 0 0 / 60%);
 }
 
 .smartapp-header {
-  width: 100%;
   font-weight: 700;
-  font-size: 16px;
-  line-height: 22px;
-  color: $color-black;
   display: flex;
   justify-content: space-between;
+  padding: 14.5px 0 14.5px 16px;
+
+  &__web {
+    width: calc(100% - 98px);
+    padding-right: 82px;
+  }
+
+  &__ios, &__android {
+    width: calc(100% - 125px);
+    padding-right: 109px;
+  }
 
   &__info {
     display: flex;
@@ -659,6 +676,32 @@ $box-shadow-dark-color: rgb(0 0 0 / 60%);
       margin: 0;
     }
   }
+
+  &__icons {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    &--trash {
+      display: flex;
+      align-items: center;
+    }
+
+    &--refresh {
+      cursor: default !important;
+      animation: spin 1s linear infinite;
+    }
+  }
+
+  svg {
+    cursor: pointer;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .smartapp-input {
@@ -700,6 +743,7 @@ $box-shadow-dark-color: rgb(0 0 0 / 60%);
         outline: none;
       }
     }
+
     &--eye-button {
       display: flex;
       align-items: center;
@@ -729,31 +773,33 @@ $box-shadow-dark-color: rgb(0 0 0 / 60%);
 }
 
 .smartapp-loader-wrapper {
-  position: fixed;
-  z-index: 100;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: $color-lighter-gray;
+
+  &__full-screen {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+  }
 }
 
 .smartapp-loader {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 150px;
+  gap: 16px;
+  padding: 8px 0;
 
   &__title {
-    margin: 8px 0 0 0;
     font-weight: 400;
-    font-size: 14px;
-    line-height: 19px;
+    text-align: center;
     color: $color-darker-gray;
     word-break: break-word;
+    margin: 0;
   }
 }
 
@@ -941,6 +987,23 @@ input:checked + .smartapp-slider:before {
 }
 
 .smartapp-stories-content {
+  &__background-video {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: $color-black;
+    object-fit: cover;
+    -webkit-filter: brightness(0.8) blur(15px);
+    filter: brightness(0.8) blur(15px);
+    -webkit-transform: scale(1.2, 1.1);
+    transform: scale(1.2, 1.1);
+  }
+
+  & > .smartapp-stories-content__background-video:last-child {
+    -webkit-transform: scale(1.1, 1.1);
+    transform: scale(1.1, 1.1);
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -960,6 +1023,17 @@ input:checked + .smartapp-slider:before {
   height: 100%;
   position: relative;
 
+  & > div > div:nth-child(2) > div {
+    width: 100%;
+    height: 100%;
+
+    & > video:first-child {
+      width: 100% !important;
+      height: 100%;
+      z-index: 2;
+    }
+  }
+
   &__web {
     width: 400px;
   }
@@ -969,6 +1043,10 @@ input:checked + .smartapp-slider:before {
     width: 100%;
   }
 
+  &__video {
+    z-index: 1;
+  }
+
   &__story {
     color: $color-white;
     padding-top: var(--padding);
@@ -1006,8 +1084,6 @@ input:checked + .smartapp-slider:before {
       font-weight: 600;
       line-height: 19px;
       text-align: center;
-      color: $color-black;
-      background: $color-white;
       border-radius: 8px;
       padding: 12px 32px;
       cursor: pointer;
@@ -1061,3 +1137,90 @@ input:checked + .smartapp-slider:before {
     padding-right: 24px !important;
   }
 }
+
+.smartapp-sync-loader {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 100px;
+  box-shadow: 0 1px 8px 0 $box-shadow-light-color;
+  padding: 8px 12px;
+  margin: 16px auto 0 auto;
+  z-index: 1000;
+  animation: loader-appear 0.25s linear;
+
+  &__text {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 16px;
+    display: flex;
+    color: $color-black;
+
+    &--dark {
+      color: $color-white;
+    }
+
+    &--dots {
+      width: 1.5ch;
+      display: flex;
+      justify-content: flex-start;
+
+      &__dot {
+        opacity: 0;
+        animation: dot-appear 1s ease-in 1;
+
+        &:nth-child(1) {
+          animation-delay: 0.2s;
+        }
+
+        &:nth-child(2) {
+          animation-delay: 0.4s;
+        }
+
+        &:nth-child(3) {
+          animation-delay: 0.6s;
+        }
+      }
+    }
+  }
+
+  &__icon {
+    animation: loader-spin 1s linear infinite;
+  }
+}
+
+@keyframes loader-appear {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes dot-appear {
+  0% {
+    opacity: 0;
+  }
+  25% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}