From 145b601a96e56f24103875f5d37a0cc64c0bffbc Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 27 Jan 2022 18:57:33 +0700
Subject: [PATCH] fixed modal backdrops on safari and placeholders

---
 src/components/input/InputWrapper/styles.module.scss |  1 -
 src/styles/_inputs.scss                              |  2 +-
 src/styles/_mixins.scss                              | 12 ++++++++----
 src/utils/ssr/getPageTitle.ts                        |  2 +-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/input/InputWrapper/styles.module.scss b/src/components/input/InputWrapper/styles.module.scss
index c87337f2..a2789f27 100644
--- a/src/components/input/InputWrapper/styles.module.scss
+++ b/src/components/input/InputWrapper/styles.module.scss
@@ -14,7 +14,6 @@
   ::placeholder {
     font: $input_placeholder_font;
     color: $input-grey_color;
-    text-transform: uppercase;
   }
 
   &.has_error {
diff --git a/src/styles/_inputs.scss b/src/styles/_inputs.scss
index 3ec64a15..5284b00e 100644
--- a/src/styles/_inputs.scss
+++ b/src/styles/_inputs.scss
@@ -5,7 +5,7 @@ $input_text_color: #bbbbbb;
 $input_shadow: inset transparentize(white, 0.9) 0 0 0 1px;
 $input_shadow_error: inset $red 0 0 0 1px;
 $input_shadow_filled: $input_shadow;
-$input_font: $font_16_semibold;
+$input_font: $font_16_medium;
 $input_placeholder_font: $font_16_medium;
 $input_bg_color: darken($content_bg, 2%);
 $input_grey_color: #444444;
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 961dccb3..6c051d1a 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -115,12 +115,14 @@
 }
 
 @mixin blur($color: $content_bg, $radius: 15px, $opacity: 0.5) {
-  background: transparentize($color, $opacity / 2);
+  background: transparentize($color, $opacity / 1.5);
+  backdrop-filter: blur($radius);
+  -webkit-backdrop-filter: blur($radius);
 
   @include can_backdrop {
     backdrop-filter: blur($radius);
     -webkit-backdrop-filter: blur($radius);
-    background: transparentize($color, $opacity);
+    background-color: transparentize($color, $opacity);
   }
 }
 
@@ -246,9 +248,11 @@
 
 @mixin modal_backdrop {
   @include blur();
-  background: url('../../src/sprites/noise.png');
+  background: transparentize($content_bg, 0.3) url('../../src/sprites/noise.png');
 
   @include can_backdrop {
-    background: url('../../src/sprites/noise.png');
+    @supports (backdrop-filter: blur(5px)) and (background-image: url('../../src/sprites/noise.png')) {
+      background: transparentize($content_bg, 0.5) url('../../src/sprites/noise.png');
+    }
   }
 }
diff --git a/src/utils/ssr/getPageTitle.ts b/src/utils/ssr/getPageTitle.ts
index 323d6f22..d564ea98 100644
--- a/src/utils/ssr/getPageTitle.ts
+++ b/src/utils/ssr/getPageTitle.ts
@@ -1,4 +1,4 @@
-/** just combinates title elements to form title of the page */
+/** just combines title elements to form title of the page */
 export const getPageTitle = (...props: string[]): string => {
   return ['Убежище', ...props].filter(it => it.trim()).join(' • ');
 };