feat: move loader and text to ui directory

src/components/ui/Loader.tsx

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import { Stack } from "@mui/material";
+import { useThemeMode } from "../../context/theme-provider";
+
+interface LoaderProps {
+  text: string;
+}
+
+export const Loader: React.FC<LoaderProps> = ({ text }) => {
+  const { darkMode } = useThemeMode();
+
+  return (
+    <Stack direction="column" sx={{ margin: "30px 0px", alignItems: "center" }}>
+      <DotsContainer>
+        <Dot />
+        <Dot />
+        <Dot />
+        <Dot />
+      </DotsContainer>
+      <StyledParagraph darkMode={darkMode}>{text}</StyledParagraph>
+    </Stack>
+  );
+};
+
+interface StyledParagraphProps {
+  darkMode: boolean;
+}
+
+const StyledParagraph = styled.p<StyledParagraphProps>`
+  font-size: large;
+  font-family: inherit;
+  color: ${({ darkMode }) => (darkMode ? 'white' : '#333')};
+  margin-top: 20px;
+`;
+
+const DotsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px; /* Space between dots */
+`;
+
+const Dot = styled.div`
+  width: 15px;
+  height: 15px;
+  background-color: #ff00c3;
+  border-radius: 50%;
+  animation: intensePulse 1.2s infinite ease-in-out both, bounceAndPulse 1.5s infinite ease-in-out;
+
+  &:nth-child(1) {
+    animation-delay: -0.3s;
+  }
+  &:nth-child(2) {
+    animation-delay: -0.2s;
+  }
+  &:nth-child(3) {
+    animation-delay: -0.1s;
+  }
+  &:nth-child(4) {
+    animation-delay: 0s;
+  }
+
+  @keyframes bounceAndPulse {
+    0%, 100% {
+      transform: translateY(0) scale(1);
+    }
+    50% {
+      transform: translateY(-10px) scale(1.3);
+    }
+  }
+
+  @keyframes intensePulse {
+    0%, 100% {
+      box-shadow: 0 0 0 0 rgba(255, 0, 195, 0.7);
+    }
+    50% {
+      box-shadow: 0 0 15px 10px rgba(255, 0, 195, 0.3);
+    }
+  }
+`;

src/components/ui/texts.tsx

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+
+export const WarningText = styled.p`
+  border: 1px solid orange;
+  display: flex;
+  margin: 10px;
+  flex-direction: column;
+  font-size: small;
+  background: rgba(255,165,0,0.15);
+  padding: 5px;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0.00938em;
+`