From c735142276ff4f91d73899af72f3c87774126cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 1 Jul 2022 17:38:24 -0300
Subject: [PATCH] Refactor SnackbarIndicator

---
 .../index.js}                                         |  7 +++++--
 src/components/SnackbarIndicator/styles.js            | 11 +++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)
 rename src/components/{SnackbarIndicator.js => SnackbarIndicator/index.js} (78%)
 create mode 100644 src/components/SnackbarIndicator/styles.js

diff --git a/src/components/SnackbarIndicator.js b/src/components/SnackbarIndicator/index.js
similarity index 78%
rename from src/components/SnackbarIndicator.js
rename to src/components/SnackbarIndicator/index.js
index 0240e9b..4292532 100644
--- a/src/components/SnackbarIndicator.js
+++ b/src/components/SnackbarIndicator/index.js
@@ -1,8 +1,11 @@
 import { useState, useEffect, forwardRef } from 'react';
 import { Snackbar, Alert } from '@mui/material';
 
+import styles from './styles';
+
 function SnackbarIndicator({ isOpen, severity, message }) {
   const [open, setOpen] = useState(false);
+  const { snackbarContainer, customAlert } = styles;
 
   useEffect(() => {
     setOpen(isOpen);
@@ -16,12 +19,12 @@ function SnackbarIndicator({ isOpen, severity, message }) {
 
   return (
     <Snackbar
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      anchorOrigin={snackbarContainer}
       open={open}
       autoHideDuration={5000}
       onClose={onClose}
     >
-      <CustomAlert onClose={onClose} severity={severity} sx={{ width: '100%' }}>
+      <CustomAlert onClose={onClose} severity={severity} sx={customAlert}>
         {message}
       </CustomAlert>
     </Snackbar>
diff --git a/src/components/SnackbarIndicator/styles.js b/src/components/SnackbarIndicator/styles.js
new file mode 100644
index 0000000..523c120
--- /dev/null
+++ b/src/components/SnackbarIndicator/styles.js
@@ -0,0 +1,11 @@
+const snackbarContainer = {
+  vertical: 'bottom',
+  horizontal: 'center',
+};
+
+const customAlert = {
+  width: '100%',
+};
+
+const styles = { snackbarContainer, customAlert };
+export default styles;