Issues-559: Fixed styles for a popup

Author: atelomycterus

design/custom.css

@@ -17,7 +17,9 @@
   border-radius: 20px !important;
   padding: 0 20px !important;
 }
-
+.Button.Primary.Delete, .Buttons .Close {
+  letter-spacing: 0.8px !important;
+}
 
 .Button.Primary.SignIn.BigButton{
   font-size: $global-medium_fontSize !important;

design/custom.css.map

@@ -21,6 +21,7 @@ $global-grey-light-bg: #FBFBFB;
 $global-grey-bg-dark: #d4d4d4;
 $global-grey-very-dark-bg: #f4f4f4;
 $global-color_whitesmoke: #bcbec1;
+$global-color_turquoise: #1e94a3;
 $global-blue: #0d61bf;
 $global-pink: #EF476F;
 
@@ -70,6 +71,7 @@ $global-medium_fontSize: 14px !default;
 $global-small_fontSize: 12px !default;
 $global-very_small_fontSize: 9px !default;
 
+$global-popup_title_fontSize: 34px !default;
 $global-title_fontSize: 32px !default;
 $global-mediumTitle_fontSize: 24px !default;
 $global-smallTitle_fontSize: 20px !default;

src/scss/base/_button.scss

@@ -1,29 +1,83 @@
 div.Popup {
+  .Border {
+    min-width: 440px;
+    width: 440px;
+    padding: 0px;
+  }
   .Body {
-    a {
-      color: $global-blue;
-      &:focus,
-      &:hover {
+      border-radius: 10px;
+      padding: 33px 18px 36px 18px;
+      box-shadow: 0 2px 9px 0 rgba(21, 21, 22, 0.15);
+  }
+  .Content {
+    > h1:first-child, h2:first-child, h3:first-child {
+      @include barlowcondensed-medium;
+      color: $global-color_turquoise !important;
+      font-size: $global-popup_title_fontSize;
+      font-weight: bold !important;
+      line-height: 34px !important;
+      text-align: center;
+      margin-bottom: 25px;
+      text-transform: uppercase;
+    }
+    .P.Message {
+      $font-family: $global-body_fontFamily !important;
+      font-size: $global-large_fontSize !important;
+      color: $global-color_black_light !important;
+      text-align: center;
+      margin: 0px;
+    }
+    .Body {
+      a {
         color: $global-blue;
-        text-decoration: $theme-link-hover_textDecoration;
+
+        &:focus,
+        &:hover {
+          color: $global-blue;
+          text-decoration: $theme-link-hover_textDecoration;
+        }
       }
-    }
-    .Buttons .Close {
-      &:focus,
-      &:hover {
-        color: $global-color_white;
+
+      .Buttons .Close {
+        &:focus,
+        &:hover {
+          color: $global-color_white;
+        }
       }
     }
   }
 
+  .Footer {
+    .Close {
+      @if ($staticVariables) {
+        @include CloseButton($popup_fg);
+      }
 
-  a.Close {
-    top: 24px;
-    right: 28px;
-    @if ($staticVariables) {
-      @include CloseButton($popup_fg);
+      display: none;
+      top: 24px;
+      right: 28px;
     }
   }
+
+  .Buttons-Confirm {
+    margin-top: 26px;
+    #Form_OK, .Button.Primary {
+      background: $global-color_primary;
+      border: 1px solid $global-color_primary;
+      color: $global-color_white;
+    }
+    .Close {
+      border: 1px solid $global-color_primary;
+      color: $global-color_primary;
+    }
+    .Button.Primary.Delete{
+      background: $global-pink;
+      padding: 0px 22px !important;
+      border: 1px solid  $global-pink;
+      color: #FAFAFB;
+    }
+  }
+
 }
 .InformWrapper {
   margin: 0px;
@@ -66,6 +120,10 @@ div.Popup {
   }
 }
 
+.Overlay {
+  background: rgba($global-color_black_light, 0.9);
+}
+
 @media (max-width: 500px) {
   .InformMessages {
     margin-left: 0px;