From a9e88e5dfd9994559993978763bb34192d1980d2 Mon Sep 17 00:00:00 2001
From: Danylo Shevchenko <60629098+shedanny@users.noreply.github.com>
Date: Mon, 23 Aug 2021 13:23:22 +0300
Subject: [PATCH] Bugfix Styles in the login popup do not work (#542)

* Fix styles in the popup

* Add generic font family
---
 src/old/lib/components/Users/LoginModal.css   | 35 +++++++++++++++++++
 .../lib/components/Users/LoginModal.styles.ts | 34 ------------------
 src/old/lib/components/Users/LoginModal.tsx   |  9 ++---
 3 files changed, 40 insertions(+), 38 deletions(-)
 create mode 100644 src/old/lib/components/Users/LoginModal.css

diff --git a/src/old/lib/components/Users/LoginModal.css b/src/old/lib/components/Users/LoginModal.css
new file mode 100644
index 000000000..9db7abd7a
--- /dev/null
+++ b/src/old/lib/components/Users/LoginModal.css
@@ -0,0 +1,35 @@
+.congratulation-container .swal2-popup {
+  width: 480px;
+}
+
+.congratulation-title-text {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 500;
+  font-size: 64px;
+  line-height: 66px;
+  margin-top: -25px; /* -15px and -35px, without 90px */
+}
+
+.congratulation-sub-text {
+  font-family: 'Raleway', sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 38px;
+  margin-top: -22px;
+}
+
+.congratulation-button {
+  padding: 14px 60px;
+  border-radius: 50px;
+  background-color: #4fdfff;
+  color: whitesmoke;
+  font-weight: 700;
+  font-size: 18px;
+  font-family: 'Raleway', sans-serif;
+  margin: 10px 0 60px 0; /* '10px 0 40px or 60px 0' bottom, without '18px 0 71px 0' */
+}
+
+.congratulation-button:hover {
+  background-color: #106ba3;
+  cursor: pointer;
+}
diff --git a/src/old/lib/components/Users/LoginModal.styles.ts b/src/old/lib/components/Users/LoginModal.styles.ts
index 74d4cb2e6..f61f35b97 100644
--- a/src/old/lib/components/Users/LoginModal.styles.ts
+++ b/src/old/lib/components/Users/LoginModal.styles.ts
@@ -140,38 +140,4 @@ export const useStyles = makeStyles((theme: Theme) => ({
       backgroundColor: '#ffaa00',
     },
   },
-  congratulationContainer: {
-    '& .swal2-popup': {
-      width: 480,
-    },
-  },
-  congratulationTitleText: {
-    fontFamily: 'Raleway',
-    fontWeight: 500,
-    fontSize: '64px',
-    lineHeight: '66px',
-    marginTop: '-25px', // -15px and -35px, without 90px
-  },
-  congratulationSubText: {
-    fontFamily: 'Raleway',
-    fontWeight: 500,
-    fontSize: '24px',
-    lineHeight: '38px',
-    padding: '0 -20px',
-    marginTop: '-22px',
-  },
-  congratulationButton: {
-    padding: '14px 60px',
-    borderRadius: 50,
-    backgroundColor: '#4FDFFF',
-    color: theme.palette.common.white,
-    fontWeight: 700,
-    fontSize: '18px',
-    fontFamily: 'Raleway',
-    margin: '10px 0 60px 0', // '10px 0 40px or 60px 0' bottom, without '18px 0 71px 0'
-    '&:hover': {
-      backgroundColor: '#106ba3',
-      cursor: 'pointer',
-    },
-  },
 }));
diff --git a/src/old/lib/components/Users/LoginModal.tsx b/src/old/lib/components/Users/LoginModal.tsx
index b61664b0a..ab80fc01d 100644
--- a/src/old/lib/components/Users/LoginModal.tsx
+++ b/src/old/lib/components/Users/LoginModal.tsx
@@ -25,6 +25,7 @@ import { langTokens } from '../../../../locales/localizationInit';
 import { BasicButton, BasicInput } from '../../../../components/Form';
 import { useActions } from '../../../../shared/hooks';
 import { getAuthoritiesAsyncAction } from '../../../../models/authorities';
+import './LoginModal.css';
 
 export const LoginModal: React.FC = () => {
   const { t } = useTranslation();
@@ -54,10 +55,10 @@ export const LoginModal: React.FC = () => {
 
   const swalWithCustomButton = Swal.mixin({
     customClass: {
-      container: classes.congratulationContainer,
-      title: classes.congratulationTitleText,
-      htmlContainer: classes.congratulationSubText,
-      confirmButton: classes.congratulationButton,
+      container: 'congratulation-container',
+      title: 'congratulation-title-text',
+      htmlContainer: 'congratulation-sub-text',
+      confirmButton: 'congratulation-button',
     },
     buttonsStyling: false,
   });