@expressms/smartapp-ui 1.0.6 → 1.1.0

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,8 +3,24 @@ 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",

package/build/main/constants/constants.js

@@ -3,8 +3,26 @@ 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";

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

@@ -1 +1,4 @@
 export declare const getIconColor: (iconColor: string | undefined, defaultIconColor: 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 @@
+import { PLATFORM } from '../constants';
 export var getIconColor = function (iconColor, defaultIconColor) {
     return (iconColor && CSS.supports('color', iconColor)) ? iconColor : defaultIconColor;
 };
+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,16 +5,18 @@ $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);
@@ -22,7 +24,7 @@ $border-color: rgba(85, 85, 85, 0.2);
 $popup-background: rgba(0, 0, 0, 0.3);
 
 $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 +136,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 +648,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 +675,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 +742,7 @@ $box-shadow-dark-color: rgb(0 0 0 / 60%);
         outline: none;
       }
     }
+
     &--eye-button {
       display: flex;
       align-items: center;
@@ -729,31 +772,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 +986,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 +1022,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 +1042,10 @@ input:checked + .smartapp-slider:before {
     width: 100%;
   }
 
+  &__video {
+    z-index: 1;
+  }
+
   &__story {
     color: $color-white;
     padding-top: var(--padding);
@@ -1006,8 +1083,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;