Renamed Flags.css and added custom styling Toasts

Author: kumaran-14

src/app/components/SocketHandler.tsx

@@ -1,4 +1,5 @@
 import { SOCKET_BASE_URL } from 'app/../config/config';
+import 'app/styles/ReactToastNotifications.css';
 import * as SocketHandlerInterfaces from 'app/types/SocketHandler';
 import * as React from 'react';
 import { useToasts } from 'react-toast-notifications';

src/app/components/UserProfileModal/EditProfile.tsx

@@ -1,5 +1,5 @@
 import * as styles1 from 'app/styles/Authentication.module.css';
-import 'app/styles/Flags.css';
+import 'app/styles/ReactFlagsSelect.css';
 import * as styles from 'app/styles/UserProfileModal.module.css';
 import { Avatar } from 'app/types/Authentication/Register';
 import { InputName } from 'app/types/UserProfileModal';

src/app/styles/Flags.css renamed to src/app/styles/ReactFlagsSelect.css

@@ -1,3 +1,4 @@
+/* Overriding react-flag-select package styles */
 .flag-select {
   align-items: center !important;
   width: 100% !important;

src/app/styles/ReactToastNotifications.css

@@ -0,0 +1,4 @@
+/* Overriding the react-toast-notifications package-styles */
+.react-toast-notifications__container {
+  overflow: hidden !important;
+}