@expressms/smartapp-ui 1.1.2 → 1.1.4

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

@@ -9,6 +9,7 @@ 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 DEFAULT_POPUP_BACKGROUND_COLOR = "rgba(37, 77, 145, 0.2)";
 export declare const INPUT_TYPE_PASSWORD = "password";
 export declare const INPUT_TYPE_TEXT = "text";
 export declare enum FONT_SIZE {

package/build/main/constants/constants.js

@@ -9,6 +9,7 @@ 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 DEFAULT_POPUP_BACKGROUND_COLOR = 'rgba(37, 77, 145, 0.2)';
 export var INPUT_TYPE_PASSWORD = 'password';
 export var INPUT_TYPE_TEXT = 'text';
 export var FONT_SIZE;

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

@@ -2,3 +2,5 @@ export declare const getColor: (color: string | undefined, defaultColor: string)
 export declare const isWebPlatform: (platform: string) => boolean;
 export declare const isIosPlatform: (platform: string) => boolean;
 export declare const isAndroidPlatform: (platform: string) => boolean;
+export declare const isMobilePlatform: (platform: string) => boolean;
+export declare const getClassNames: (className: string, delimiter: string, platform: string) => string;

package/build/main/helpers/index.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { PLATFORM } from '../constants';
 export var getColor = function (color, defaultColor) {
     return (color && CSS.supports('color', color)) ? color : defaultColor;
@@ -5,3 +6,5 @@ export var getColor = function (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; };
+export var isMobilePlatform = function (platform) { return isAndroidPlatform(platform) || isIosPlatform(platform); };
+export var getClassNames = function (className, delimiter, platform) { return classNames(className, "".concat(className).concat(delimiter).concat(platform)); };

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

@@ -21,45 +21,66 @@ $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);
+$popup-background: rgba(37, 77, 145, 0.2);
 
 $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%;
+  padding: 0 20px;
+
+  &__ios,
+  &__android {
+    padding: 0;
+  }
 
   &__content {
+    box-sizing: border-box;
     position: relative;
     display: flex;
     flex-direction: column;
+    width: 100%;
     background-color: $color-white;
+    border-radius: 4px;
     padding: 24px;
-    border: 1px solid $border-color;
-    border-radius: 3px;
-    width: 100%;
-    box-sizing: border-box;
 
-    &__cancel-cross {
-      cursor: pointer;
+    &--ios,
+    &--android {
+      border-radius: 12px 12px 0 0;
+      padding: 24px 24px 40px 24px;
+    }
+
+    &--cancel-cross {
       position: absolute;
-      right: 10px;
-      top: 10px;
+      top: 8px;
+      right: 8px;
+      cursor: pointer;
     }
 
     &--title {
-      color: $color-black;
-      font-weight: 800;
-      font-size: 18px;
-      line-height: 20px;
-      margin-bottom: 16px;
+      font-family: Open Sans, 'sans-serif';
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 22px;
       text-align: center;
+      color: $color-black;
+      margin: 8px 0 24px 0;
+
+      &__ios,
+      &__android {
+        margin-top: 0;
+      }
     }
 
     &--input {
-      margin-bottom: 16px;
+      margin-bottom: 24px;
+    }
+
+    &--delimiter {
+      border-top: 0.5px solid $color-gray;
+      margin: 0 -24px 16px -24px;
     }
 
     &--buttons {
@@ -70,13 +91,27 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 }
 
-.popup-content {
+.action-modal-content {
   width: 100%;
   height: 100%;
-  background: $popup-background;
+  background: var(--action-modal-background, $popup-background);
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
+}
+
+.action-modal-ios-content,
+.action-modal-android-content {
+  height: fit-content;
+  border-radius: 12px 12px 0 0;
+  margin: auto 0 0 !important;
+}
+
+.action-modal-ios-overlay,
+.action-modal-android-overlay {
+  background: var(--action-modal-background, $popup-background);
+  cursor: pointer;
 }
 
 .smartapp-attached-file {
@@ -158,16 +193,25 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
 .smartapp-button {
   width: 100%;
+
   &__standard {
     cursor: pointer;
     padding: 12px 32px;
     border-radius: 8px;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   &__low {
     cursor: pointer;
     padding: 5px 32px;
     border-radius: 3px;
+
+    &:focus-visible {
+      outline: none;
+    }
   }
 
   &__disabled {
@@ -175,32 +219,35 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 
   &__color--blue {
-    font-weight: 600;
+    font-family: Open Sans, 'sans-serif';
     font-size: 14px;
-    line-height: normal;
-    background: $color-blue;
-    color: $color-white;
+    font-weight: 600;
+    line-height: 19px;
     text-align: center;
+    color: $color-white;
+    background: $color-blue;
     border: 0;
   }
 
   &__color--white {
-    font-weight: 600;
+    font-family: Open Sans, 'sans-serif';
     font-size: 14px;
-    line-height: normal;
-    background: $color-white;
-    color: $color-blue;
+    font-weight: 600;
+    line-height: 19px;
     text-align: center;
+    color: $color-blue;
+    background: $color-white;
     border: 1px solid $color-blue;
   }
 
   &__color--red {
-    font-weight: 600;
+    font-family: Open Sans, 'sans-serif';
     font-size: 14px;
-    line-height: normal;
-    background: $color-red;
-    color: $color-white;
+    font-weight: 600;
+    line-height: 19px;
     text-align: center;
+    color: $color-white;
+    background: $color-red;
     border: 0;
   }
 }
@@ -428,48 +475,79 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   width: 100%;
   padding: 0 20px;
 
+  &__ios,
+  &__android {
+    padding: 0;
+  }
+
   &__content {
-    background-color: $color-white;
-    padding: 24px;
-    border: 1px solid $border-color;
-    border-radius: 3px;
     box-sizing: border-box;
     width: 100%;
+    background-color: $color-white;
+    border-radius: 4px;
+    padding: 32px 24px 24px 24px;
+
+    &--ios,
+    &--android {
+      border-radius: 12px 12px 0 0;
+      padding: 24px 24px 40px 24px;
+    }
 
     &--title {
-      color: $color-black;
-      margin: 0 0 24px 0;
+      font-family: Open Sans, 'sans-serif';
+      font-size: 16px;
       font-weight: 700;
-      font-size: 20px;
-      line-height: 20px;
+      line-height: 22px;
       text-align: center;
+      color: $color-black;
+      margin: 0 0 24px 0;
     }
 
     &--text {
-      color: $color-black;
-      font-weight: 400;
+      font-family: Open Sans, 'sans-serif';
       font-size: 14px;
+      font-weight: 400;
       line-height: 16px;
-      margin-bottom: 16px;
       text-align: center;
+      color: $color-black;
+      margin: 0 0 24px 0;
+    }
+
+    &--delimiter {
+      border-top: 0.5px solid $color-gray;
+      margin: 0 -24px 16px -24px;
     }
 
     &--buttons {
       display: flex;
       flex-direction: row;
       justify-content: center;
-      gap: 16px;
+      gap: 8px;
     }
   }
 }
 
-.popup-content {
+.confirmation-modal-content {
   width: 100%;
   height: 100%;
-  background: $popup-background;
+  background: var(--confirmation-modal-background, $popup-background);
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
+}
+
+.confirmation-modal-ios-content,
+.confirmation-modal-android-content {
+  height: fit-content;
+  border-radius: 12px 12px 0 0;
+  margin: auto 0 0 !important;
+}
+
+.confirmation-modal-ios-overlay,
+.confirmation-modal-android-overlay {
+  background: var(--confirmation-modal-background, $popup-background);
+  cursor: pointer;
 }
 
 .smartapp-custom-select {
@@ -741,9 +819,10 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
       box-sizing: border-box;
 
       &::placeholder {
-        font-weight: 400;
+        font-family: Open Sans, 'sans-serif';
         font-size: 14px;
-        line-height: 20px;
+        font-weight: 400;
+        line-height: 19px;
         color: $color-darker-gray;
       }