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';
@@ -24,75 +25,75 @@ export const SocketHandler = (props: SocketHandlerInterfaces.Props) => {
     } = props;
 
     socket.on('Info', (message: string) => {
-      addToast(message, { appearance: 'info', autoDismiss: true });
+      addToast(message, { appearance: 'info', autoDismiss: false });
     });
 
     socket.on('Success', (message: string) => {
-      addToast(message, { appearance: 'success', autoDismiss: true });
+      addToast(message, { appearance: 'success', autoDismiss: false });
     });
 
     socket.on('Error', (message: string) => {
-      addToast(message, { appearance: 'error', autoDismiss: true });
+      addToast(message, { appearance: 'error', autoDismiss: false });
     });
 
     socket.on('connect', () => {
-      addToast('Connected to Server!', { appearance: 'success', autoDismiss: true });
+      addToast('Connected to Server!', { appearance: 'success', autoDismiss: false });
     });
 
     socket.on('Compile Info', (message: string) => {
-      addToast(message, { appearance: 'info', autoDismiss: true });
+      addToast(message, { appearance: 'info', autoDismiss: false });
     });
 
     socket.on('Compile Success', () => {
-      addToast('Compiled Successfully!', { appearance: 'success', autoDismiss: true });
+      addToast('Compiled Successfully!', { appearance: 'success', autoDismiss: false });
       sendCompileSuccess();
     });
 
     socket.on('Compile Error', (message: string) => {
-      addToast(`Compile Error: ${message}`, { appearance: 'error', autoDismiss: true }),
+      addToast(`Compile Error: ${message}`, { appearance: 'error', autoDismiss: false }),
         sendCompileError('');
     });
 
     socket.on('Compile Error Log', (log: string) => {
-      addToast('Compile Error', { appearance: 'error', autoDismiss: true }), sendCompileError(log);
+      addToast('Compile Error', { appearance: 'error', autoDismiss: false }), sendCompileError(log);
     });
 
     socket.on('Match Info', (message: string) => {
-      addToast(message, { appearance: 'info', autoDismiss: true });
+      addToast(message, { appearance: 'info', autoDismiss: false });
     });
 
     socket.on('Match Error', (message: string) => {
-      addToast(message, { appearance: 'error', autoDismiss: true }), sendExecuteError(message);
+      addToast(message, { appearance: 'error', autoDismiss: false }), sendExecuteError(message);
     });
 
     socket.on('Match Result Success', (result: string) => {
-      addToast(result, { appearance: 'success', autoDismiss: true });
+      addToast(result, { appearance: 'success', autoDismiss: false });
     });
 
     socket.on('Match Result Error', (result: string) => {
-      addToast(result, { appearance: 'error', autoDismiss: true });
+      addToast(result, { appearance: 'error', autoDismiss: false });
     });
 
     socket.on('Match Success', (matchLogs: string) => {
-      addToast('Match Executed Successfully!', { appearance: 'success', autoDismiss: true });
+      addToast('Match Executed Successfully!', { appearance: 'success', autoDismiss: false });
       sendExecuteSuccess(matchLogs);
     });
 
     socket.on('Debug Run Info', (message: string) => {
-      addToast(message, { appearance: 'info', autoDismiss: true });
+      addToast(message, { appearance: 'info', autoDismiss: false });
     });
 
     socket.on('Debug Run Success', (stackTrace: string) => {
       sendDebugRunSuccess(stackTrace);
     });
 
     socket.on('Debug Run Error', (message: string) => {
-      addToast(`Debug Run Error: ${message}`, { appearance: 'error', autoDismiss: true }),
+      addToast(`Debug Run Error: ${message}`, { appearance: 'error', autoDismiss: false }),
         sendDebugRunError();
     });
 
     socket.on('disconnect', () => {
-      addToast('Disconnected', { appearance: 'error', autoDismiss: true });
+      addToast('Disconnected', { appearance: 'error', autoDismiss: false });
     });
 
     return () => {

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 src/app/styles/ReactFlagsSelect.csssrc/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;
+}