@expressms/smartapp-ui 1.1.0 → 1.1.2

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/constants/constants.d.ts

@@ -26,6 +26,10 @@ export declare enum PLATFORM {
     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

@@ -29,6 +29,11 @@ export var PLATFORM;
     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,4 +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,6 +1,6 @@
 import { PLATFORM } from '../constants';
-export var getIconColor = function (iconColor, defaultIconColor) {
-    return (iconColor && CSS.supports('color', iconColor)) ? iconColor : defaultIconColor;
+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; };

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

@@ -23,10 +23,14 @@ $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: rgba(0, 0, 0, 0.6);
 
 .smartapp-action-modal {
+  padding: 0 20px;
+  width: 100%;
+
   &__content {
     position: relative;
     display: flex;
@@ -35,7 +39,8 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     padding: 24px;
     border: 1px solid $border-color;
     border-radius: 3px;
-    width: 320px;
+    width: 100%;
+    box-sizing: border-box;
 
     &__cancel-cross {
       cursor: pointer;
@@ -170,9 +175,9 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   &__color--blue {
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: normal;
     background: $color-blue;
     color: $color-white;
     text-align: center;
@@ -180,9 +185,9 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   &__color--white {
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: normal;
     background: $color-white;
     color: $color-blue;
     text-align: center;
@@ -190,9 +195,9 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   &__color--red {
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: normal;
     background: $color-red;
     color: $color-white;
     text-align: center;
@@ -420,12 +425,16 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 }
 
 .smartapp-confirmation-modal {
+  width: 100%;
+  padding: 0 20px;
+
   &__content {
     background-color: $color-white;
     padding: 24px;
     border: 1px solid $border-color;
     border-radius: 3px;
-    width: 320px;
+    box-sizing: border-box;
+    width: 100%;
 
     &--title {
       color: $color-black;
@@ -658,7 +667,8 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     padding-right: 82px;
   }
 
-  &__ios, &__android {
+  &__ios,
+  &__android {
     width: calc(100% - 125px);
     padding-right: 109px;
   }
@@ -986,6 +996,15 @@ input:checked + .smartapp-slider:before {
 }
 
 .smartapp-stories-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: $color-black;
+  border: none;
+  padding: 0;
+
   &__background-video {
     position: absolute;
     width: 100%;
@@ -1136,3 +1155,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.45ch;
+      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);
+  }
+}