refactor: icons and update packages

xgeekshq · Apr 6, 2022 · 01de795 · 01de795
1 parent 9e38355
commit 01de795
Show file tree

Hide file tree

Showing 29 changed files with 13,987 additions and 16,083 deletions.
diff --git a/README.md b/README.md
@@ -59,7 +59,7 @@ The mongo image is downloaded, two containers are built and a database is create
 
 ### Dependencies
 
-Inside the project root's folder you should run `npm i`. It will also start the husky package.
+Inside the project root's folder you should run `npm i` If an error is shown you can use the flag `--legacy-peer-deps`. After succesfully installed you should run `npx husky install`.
 
 ### Backend
 

diff --git a/backend/package.json b/backend/package.json
@@ -23,16 +23,16 @@
     "pre-commit": "lint-staged"
   },
   "dependencies": {
-    "@nestjs/common": "^8.4.1",
+    "@nestjs/common": "^8.4.3",
     "@nestjs/config": "^2.0.0",
-    "@nestjs/core": "^8.4.1",
+    "@nestjs/core": "^8.4.3",
     "@nestjs/jwt": "^8.0.0",
     "@nestjs/mongoose": "^9.0.3",
     "@nestjs/passport": "^8.2.1",
-    "@nestjs/platform-express": "^8.4.1",
-    "@nestjs/platform-socket.io": "^8.4.1",
-    "@nestjs/schedule": "^1.0.2",
-    "@nestjs/websockets": "^8.4.1",
+    "@nestjs/platform-express": "^8.4.3",
+    "@nestjs/platform-socket.io": "^8.4.3",
+    "@nestjs/schedule": "^1.1.0",
+    "@nestjs/websockets": "^8.4.3",
     "@types/bcrypt": "^5.0.0",
     "@types/passport-jwt": "^3.0.6",
     "@types/passport-local": "^1.0.34",
@@ -43,45 +43,45 @@
     "class-validator": "^0.13.2",
     "dotenv": "^16.0.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^16.1.3",
+    "eslint-config-airbnb-typescript": "^17.0.0",
     "express": "^4.17.3",
     "joi": "^17.6.0",
     "jwt-decode": "^3.1.2",
     "lint-staged": "^12.3.7",
-    "mongodb": "^4.4.1",
-    "mongoose": "^6.2.7",
+    "mongodb": "^4.5.0",
+    "mongoose": "^6.2.10",
     "passport": "^0.5.2",
     "passport-jwt": "^4.0.0",
     "passport-local": "^1.0.0",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "rxjs": "^7.5.5",
     "socket.io": "^4.4.1",
-    "@faker-js/faker": "^6.0.0"
+    "@faker-js/faker": "^6.1.2"
   },
   "devDependencies": {
-    "@nestjs/cli": "^8.2.3",
-    "@nestjs/schematics": "^8.0.8",
-    "@nestjs/testing": "^8.4.1",
+    "@nestjs/cli": "^8.2.4",
+    "@nestjs/schematics": "^8.0.9",
+    "@nestjs/testing": "^8.4.3",
     "@types/express": "^4.17.13",
     "@types/jest": "^27.4.1",
     "@types/mongodb": "^4.0.7",
-    "@types/node": "^17.0.21",
-    "@types/supertest": "^2.0.11",
-    "@typescript-eslint/eslint-plugin": "^5.15.0",
-    "@typescript-eslint/parser": "^5.15.0",
-    "eslint": "^8.11.0",
+    "@types/node": "^17.0.23",
+    "@types/supertest": "^2.0.12",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.5.1",
-    "prettier": "^2.6.0",
+    "prettier": "^2.6.2",
     "source-map-support": "^0.5.21",
     "supertest": "^6.2.2",
-    "ts-jest": "^27.1.3",
+    "ts-jest": "^27.1.4",
     "ts-loader": "^9.2.8",
     "ts-node": "^10.7.0",
-    "tsconfig-paths": "^3.14.0",
-    "typescript": "^4.6.2"
+    "tsconfig-paths": "^3.14.1",
+    "typescript": "^4.6.3"
   },
   "lint-staged": {
     "*.{js,ts,tsx}": [

diff --git a/frontend/components/Primitives/AlertBox.tsx b/frontend/components/Primitives/AlertBox.tsx
@@ -1,9 +1,9 @@
 import * as React from "react";
 import Text from "./Text";
-import AlertIcon from "../../public/icons/toast/alert.svg";
+import AlertIcon from "../icons/toast/alert";
+import InfoAlertIcon from "../icons/toast/infoAlert";
 import Flex from "./Flex";
 import { styled } from "../../stitches.config";
-import InfoIcon from "../../public/icons/toast/infoAlert.svg";
 
 interface AlertBoxProps {
   type: "warning" | "info";
@@ -42,7 +42,7 @@ const AlertBox: React.FC<AlertBoxProps> = ({ type, title, text }) => {
         border: isWarning ? "1px solid $colors$highlight4Base" : "1px solid $colors$infoBase",
       }}
     >
-      <AlertIconStyle> {isWarning ? <AlertIcon /> : <InfoIcon />}</AlertIconStyle>
+      <AlertIconStyle> {isWarning ? <AlertIcon /> : <InfoAlertIcon />}</AlertIconStyle>
       <AlertText direction="column">
         {!!title && <Text heading="5">{title}</Text>}
 

diff --git a/frontend/components/Primitives/Input.tsx b/frontend/components/Primitives/Input.tsx
@@ -4,8 +4,8 @@ import Text from "./Text";
 import { styled } from "../../stitches.config";
 import Flex from "./Flex";
 import isEmpty from "../../utils/isEmpty";
-import InfoIcon from "../../public/icons/info.svg";
-import EyeIcon from "../../public/icons/eye.svg";
+import InfoIcon from "../icons/info";
+import EyeIcon from "../icons/eye";
 
 const PlaceholderText = styled(Text, {
   color: "$primary300",

diff --git a/frontend/components/Primitives/Toast.tsx b/frontend/components/Primitives/Toast.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { slate } from "@radix-ui/colors";
 import * as ToastPrimitive from "@radix-ui/react-toast";
 import { styled, keyframes } from "../../stitches.config";
-import AlertIcon from "../../public/icons/toast/alert.svg";
+import AlertIcon from "../icons/toast/alert";
 import Text from "./Text";
 import { ToastStateEnum } from "../../utils/enums/toast-types";
 

diff --git a/frontend/components/auth/LoginForm.tsx b/frontend/components/auth/LoginForm.tsx
@@ -12,7 +12,7 @@ import { TabsContent } from "../Primitives/Tab";
 import Text from "../Primitives/Text";
 import SchemaLoginForm from "../../schema/schemaLoginForm";
 import { DASHBOARD_ROUTE } from "../../utils/routes";
-import Logo from "../../public/icons/logo.svg";
+import LogoIcon from "../icons/logo";
 import Input from "../Primitives/Input";
 import Button from "../Primitives/Button";
 import OrSeparator from "../Primitives/OrSeparator";
@@ -23,8 +23,8 @@ import {
   NEXT_PUBLIC_ENABLE_GOOGLE,
 } from "../../utils/constants";
 import useUser from "../../hooks/useUser";
-import MicrosoftIcon from "../../public/icons/microsoft.svg";
-import GitHubIcon from "../../public/icons/gitHub.svg";
+import MicrosoftIcon from "../icons/microsoft";
+import GitHubIcon from "../icons/github";
 import { transformLoginErrorCodes } from "../../utils/errorCodes";
 import Toast from "../Primitives/Toast";
 import { ToastStateEnum } from "../../utils/enums/toast-types";
@@ -113,7 +113,7 @@ const LoginForm: React.FC<LoginFormProps> = ({ setShowTroubleLogin }) => {
             handleLogin(credentials);
           })}
         >
-          <Logo />
+          <LogoIcon />
           <Text css={{ mt: "$24" }} heading="1">
             Log In
           </Text>

diff --git a/frontend/components/auth/TroubleLogin.tsx b/frontend/components/auth/TroubleLogin.tsx
@@ -5,10 +5,10 @@ import SchemaEmail from "../../schema/schemaEmail";
 import { styled } from "../../stitches.config";
 import Button from "../Primitives/Button";
 import Flex from "../Primitives/Flex";
-import Logo from "../../public/icons/logo.svg";
+import LogoIcon from "../icons/logo";
 import Input from "../Primitives/Input";
 import Text from "../Primitives/Text";
-import LeftArrowIcon from "../../public/icons/leftArrow.svg";
+import LeftArrowIcon from "../icons/leftArrow";
 import { EmailUser } from "../../types/user/user";
 
 const MainContainer = styled("form", Flex, {
@@ -59,7 +59,7 @@ const TroubleLogin: React.FC<TroubleLoginProps> = ({ setShowTroubleLogin }) => {
       })}
     >
       <FormProvider {...methods}>
-        <Logo />
+        <LogoIcon />
         <Text css={{ mt: "$24" }} heading="1">
           Trouble logging in?
         </Text>

diff --git a/frontend/components/icons/eye.tsx b/frontend/components/icons/eye.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+const EyeIcon = () => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M12 8.11079C11.632 8.11654 11.2667 8.17501 10.9153 8.2844C11.0778 8.57028 11.1644 8.89305 11.1667 9.2219C11.1667 9.47725 11.1164 9.7301 11.0187 9.96601C10.9209 10.2019 10.7777 10.4163 10.5971 10.5968C10.4166 10.7774 10.2022 10.9206 9.96632 11.0183C9.73041 11.1161 9.47757 11.1664 9.22222 11.1664C8.89336 11.1641 8.57059 11.0775 8.28471 10.915C8.05917 11.6972 8.08546 12.5305 8.35985 13.297C8.63425 14.0634 9.14284 14.7241 9.8136 15.1855C10.4843 15.6468 11.2832 15.8854 12.0971 15.8675C12.911 15.8496 13.6987 15.576 14.3484 15.0856C14.9982 14.5951 15.4772 13.9127 15.7176 13.1349C15.958 12.3571 15.9475 11.5234 15.6877 10.7519C15.428 9.98033 14.932 9.31009 14.2702 8.83609C13.6083 8.36208 12.8141 8.10833 12 8.11079ZM21.8792 11.4927C19.9962 7.81878 16.2684 5.33301 12 5.33301C7.73159 5.33301 4.00276 7.82051 2.12081 11.4931C2.04138 11.6502 2 11.8238 2 11.9999C2 12.1759 2.04138 12.3495 2.12081 12.5066C4.0038 16.1806 7.73159 18.6664 12 18.6664C16.2684 18.6664 19.9972 16.1789 21.8792 12.5063C21.9586 12.3492 22 12.1756 22 11.9995C22 11.8235 21.9586 11.6499 21.8792 11.4927ZM12 16.9997C8.57465 16.9997 5.43436 15.09 3.73853 11.9997C5.43436 8.9094 8.5743 6.99968 12 6.99968C15.4257 6.99968 18.5656 8.9094 20.2615 11.9997C18.566 15.09 15.4257 16.9997 12 16.9997Z"
+        fill="#768291"
+      />
+    </svg>
+  );
+};
+
+export default EyeIcon;
diff --git a/frontend/components/icons/github.tsx b/frontend/components/icons/github.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const GitHubIcon = () => {
+  return (
+    <svg viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M34.9393 48.3273C34.9393 48.8443 35.2914 49.4677 36.3254 49.2697C44.3963 46.6662 50.1681 39.2333 50.1681 30.5097C50.1681 19.5639 41.1438 10.69 30 10.69C18.8562 10.69 9.83193 19.5456 9.83193 30.4914C9.83193 39.248 15.611 46.6735 23.6122 49.2843C24.6206 49.4714 24.9873 48.8076 24.9873 48.3346C24.9873 48.1697 24.9846 47.9106 24.9812 47.5732C24.9747 46.943 24.9653 46.0394 24.9653 44.9647C19.3549 46.1565 18.1705 42.3025 18.1705 42.3025C17.2538 40.018 15.9264 39.4057 15.9264 39.4057C14.1002 38.1772 16.0694 38.2029 16.0694 38.2029C18.0935 38.3386 19.1569 40.2454 19.1569 40.2454C20.9464 43.2743 23.8689 42.3979 25.024 41.8918C25.1156 40.8831 25.5689 39.9415 26.3001 39.2406C21.8411 38.7456 17.1328 37.0405 17.1328 29.45C17.1042 27.4747 17.849 25.5665 19.2083 24.1329C18.9992 23.6379 18.3025 21.6211 19.4026 18.8856C19.4026 18.8856 21.0931 18.3502 24.9507 20.917C28.2531 20.0272 31.7322 20.0272 35.0347 20.917C38.8483 18.3539 40.5351 18.8856 40.5351 18.8856C41.6205 21.6138 40.9384 23.6306 40.7367 24.1329C42.0927 25.571 42.8347 27.481 42.8049 29.4573C42.8049 37.0698 38.0892 38.7456 33.6046 39.2333C34.3086 39.8274 34.965 41.0411 34.965 42.9002C34.965 44.6755 34.9535 46.2173 34.9459 47.2361C34.9421 47.7387 34.9393 48.1141 34.9393 48.3273ZM12 0C5.37258 0 0 5.37258 0 12V48C0 54.6274 5.37258 60 12 60H48C54.6274 60 60 54.6274 60 48V12C60 5.37258 54.6274 0 48 0H12Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
+
+export default GitHubIcon;
diff --git a/frontend/components/icons/info.tsx b/frontend/components/icons/info.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const InfoIcon = () => {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C21.993 17.52 17.52 21.993 12.001 22H12ZM12 4C7.582 4 4 7.582 4 12C4 16.418 7.582 20 12 20C16.418 20 20 16.418 20 12C19.995 7.584 16.416 4.005 12 4H11.999H12ZM13 16V12C13 11.448 12.552 11 12 11C11.448 11 11 11.448 11 12V16C11 16.552 11.448 17 12 17C12.552 17 13 16.552 13 16ZM12.19 8.98C12.261 8.969 12.325 8.948 12.384 8.918L12.381 8.92C12.446 8.899 12.503 8.868 12.552 8.829L12.551 8.83C12.611 8.794 12.664 8.754 12.712 8.709L12.711 8.71C12.799 8.617 12.87 8.508 12.919 8.387L12.921 8.38C12.972 8.268 13.001 8.138 13.001 8C13.001 7.862 12.972 7.732 12.919 7.614L12.921 7.62C12.87 7.492 12.799 7.383 12.711 7.29C12.664 7.246 12.611 7.206 12.555 7.172L12.551 7.17C12.503 7.132 12.446 7.101 12.385 7.081L12.381 7.08C12.326 7.051 12.262 7.03 12.194 7.02H12.191C12.132 7.006 12.065 6.997 11.996 6.997C11.927 6.997 11.86 7.005 11.795 7.021L11.801 7.02C11.733 7.032 11.673 7.053 11.617 7.082L11.621 7.08C11.552 7.104 11.492 7.134 11.438 7.172L11.441 7.17C11.385 7.21 11.336 7.249 11.29 7.291L11.291 7.29C11.203 7.383 11.132 7.492 11.083 7.613L11.081 7.62C11.03 7.732 11.001 7.862 11.001 8C11.001 8.138 11.03 8.268 11.083 8.386L11.081 8.38C11.222 8.746 11.57 9 11.978 9C11.986 9 11.994 9 12.002 9H12.001C12.07 8.998 12.135 8.991 12.199 8.979L12.191 8.98H12.19Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default InfoIcon;
diff --git a/frontend/components/icons/leftArrow.tsx b/frontend/components/icons/leftArrow.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+const LeftArrowIcon = () => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.52858 13.1377C7.78892 13.3981 8.21103 13.3981 8.47138 13.1377C8.73173 12.8774 8.73173 12.4553 8.47138 12.1949L4.94279 8.66634L12.6666 8.66634C13.0348 8.66634 13.3333 8.36786 13.3333 7.99967C13.3333 7.63148 13.0348 7.33301 12.6666 7.33301L4.94279 7.33301L8.47138 3.80441C8.73173 3.54406 8.73173 3.12195 8.47138 2.8616C8.21104 2.60125 7.78893 2.60125 7.52858 2.8616L2.86235 7.52783L2.86191 7.52827M2.71723 8.25486C2.74977 8.33349 2.79799 8.40716 2.86191 8.47108L7.52858 13.1377M2.71723 8.25486C2.68464 8.17626 2.66665 8.09007 2.66665 7.99967ZM2.66665 7.99967C2.66665 7.83096 2.73029 7.66225 2.85758 7.53264Z"
+        fill="#060D16"
+      />
+    </svg>
+  );
+};
+
+export default LeftArrowIcon;
diff --git a/frontend/public/icons/logo.svg → frontend/components/icons/logo.tsx b/frontend/public/icons/logo.svg → frontend/components/icons/logo.tsx
@@ -1,3 +1,7 @@
+import React from "react";
+
+const LogoIcon = () => {
+  return (
     <svg width="42" height="40" viewBox="0 0 42 40" fill="black" xmlns="http://www.w3.org/2000/svg">
       <g clipPath="url(#clip0_169_20252)">
         <path
@@ -30,4 +34,8 @@
           <rect width="42.1053" height="40" fill="black" />
         </clipPath>
       </defs>
-</svg>
+    </svg>
+  );
+};
+
+export default LogoIcon;
diff --git a/frontend/components/icons/microsoft.tsx b/frontend/components/icons/microsoft.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+
+const MicrosoftIcon = () => {
+  return (
+    <svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M60 32.0166V47.9998C60 54.6272 54.6274 59.9998 48 59.9998H32.0168V32.0166H60Z"
+        fill="#FFC107"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M27.9832 59.9998H12C5.37258 59.9998 0 54.6272 0 47.9998V32.0166H27.9832V59.9998Z"
+        fill="#2196F3"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M60 27.9832H32.0168V0H48C54.6274 0 60 5.37258 60 12V27.9832Z"
+        fill="#4CAF50"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M27.9832 0V27.9832H0V12C0 5.37258 5.37258 0 12 0H27.9832Z"
+        fill="#F44336"
+      />
+    </svg>
+  );
+};
+
+export default MicrosoftIcon;
diff --git a/frontend/components/icons/toast/alert.tsx b/frontend/components/icons/toast/alert.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const AlertIcon = () => {
+  return (
+    <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.36621 30.2746C14.1157 34.7636 25.2683 29.9783 28.9954 21.8554C32.7226 13.7325 30.8344 7.60134 23.0849 3.11237C15.3354 -1.37661 6.20395 -1.62868 2.47678 6.4942C-1.25039 14.6171 -1.3833 25.7857 6.36621 30.2746Z"
+        fill="#C80F3B"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.0427 23.0527C13.1062 23.0527 11.2043 22.8852 9.34811 22.5621L9.55575 22.5921C9.21078 22.5283 8.90231 22.3908 8.63164 22.1931L8.64093 22.1999C7.98483 21.7633 7.55164 20.9684 7.55164 20.0584C7.55164 19.8142 7.58282 19.5776 7.64119 19.3544L7.63721 19.3717C9.03432 15.2571 10.9933 11.7233 13.4399 8.70569L13.4207 8.72974L13.4273 8.72222C13.6263 8.50733 13.8665 8.33901 14.1325 8.23382L14.1464 8.22931C14.4071 8.11735 14.7083 8.05273 15.0234 8.05273C15.6404 8.05273 16.2056 8.30069 16.6461 8.71396L16.6421 8.7102C19.0854 11.7173 21.0544 15.2698 22.3858 19.1808L22.4535 19.407C22.5158 19.5963 22.5516 19.8142 22.5516 20.0419C22.5516 20.1456 22.5443 20.247 22.5297 20.3455L22.5311 20.335C22.3586 21.5034 21.5499 22.411 20.5283 22.5914L20.515 22.5936C18.8705 22.8859 16.9745 23.0527 15.0433 23.0527C15.0433 23.0527 15.0433 23.0527 15.0427 23.0527ZM14.3508 9.80047C12.0727 12.6302 10.2271 15.9611 8.964 19.6226L8.89833 19.839C8.8897 19.8706 8.88108 19.8961 8.87179 19.9209L8.87312 19.9164C8.8698 19.948 8.86847 19.9848 8.86847 20.0224C8.86847 20.4108 9.05953 20.749 9.34081 20.9233L9.34545 20.9263C9.46221 21.0127 9.59953 21.0758 9.74747 21.1051L9.7541 21.1059C11.3423 21.3884 13.1746 21.55 15.0394 21.55C16.9062 21.55 18.7398 21.3884 20.5296 21.0766L20.3299 21.1051C20.7664 21.0165 21.1094 20.646 21.2116 20.1697L21.2129 20.1614C21.2189 20.1298 21.2229 20.0938 21.2229 20.0562C21.2229 20.0036 21.2156 19.9525 21.2023 19.9044L21.203 19.9082C19.8735 16.0017 18.0187 12.646 15.7054 9.77191L15.7253 9.79671C15.5296 9.64568 15.2881 9.55551 15.0281 9.55551C14.8642 9.55551 14.7077 9.59158 14.5637 9.65695L14.5723 9.65395C14.4868 9.68776 14.4125 9.7381 14.3501 9.80272L14.3508 9.80197V9.80047ZM15.8142 16.3083V13.3027C15.8142 12.8879 15.517 12.5513 15.1508 12.5513C14.7846 12.5513 14.4874 12.8879 14.4874 13.3027V16.3083C14.4874 16.723 14.7846 17.0596 15.1508 17.0596C15.517 17.0596 15.8142 16.723 15.8142 16.3083ZM15.511 19.2161C15.5694 19.1493 15.6165 19.0689 15.649 18.981L15.6503 18.9757C15.6829 18.8915 15.7021 18.7939 15.7034 18.6909V18.6902C15.7014 18.5842 15.6822 18.4835 15.6484 18.3919L15.6503 18.3971C15.6165 18.3039 15.5694 18.2236 15.511 18.1567C15.389 18.0214 15.2211 17.938 15.0367 17.938C14.9472 17.938 14.8616 17.9576 14.7833 17.9936L14.7879 17.9921C14.703 18.0334 14.6307 18.0891 14.569 18.1574C14.5106 18.2243 14.4635 18.3047 14.431 18.3926L14.4297 18.3979C14.3979 18.4843 14.3786 18.585 14.3766 18.6902V18.6909C14.3766 18.6917 14.3766 18.6924 14.3766 18.6932C14.3766 18.8983 14.4503 19.0831 14.569 19.2169C14.6287 19.2875 14.7024 19.3439 14.784 19.3807L14.7879 19.3822C14.8636 19.4205 14.9518 19.4423 15.0447 19.4423C15.2278 19.4423 15.3936 19.3559 15.511 19.2169V19.2161Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default AlertIcon;
diff --git a/frontend/components/icons/toast/infoAlert.tsx b/frontend/components/icons/toast/infoAlert.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+
+const InfoAlertIcon = () => {
+  return (
+    <svg width="31" height="32" viewBox="0 0 31 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.36621 30.2746C14.1157 34.7636 25.2683 29.9783 28.9954 21.8554C32.7226 13.7325 30.8344 7.60134 23.0849 3.11237C15.3354 -1.37661 6.20395 -1.62868 2.47678 6.4942C-1.25039 14.6171 -1.3833 25.7857 6.36621 30.2746Z"
+        fill="#3589EB"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.0518 24.0532C10.9095 24.0532 7.55176 20.6955 7.55176 16.5532C7.55176 12.411 10.9095 9.05322 15.0518 9.05322C19.194 9.05322 22.5518 12.411 22.5518 16.5532C22.5465 20.6932 19.1918 24.048 15.0525 24.0532H15.0518ZM15.0518 10.5532C11.7383 10.5532 9.05176 13.2397 9.05176 16.5532C9.05176 19.8667 11.7383 22.5532 15.0518 22.5532C18.3653 22.5532 21.0518 19.8667 21.0518 16.5532C21.048 13.2412 18.3638 10.557 15.0518 10.5532H15.051H15.0518ZM15.8018 19.5532V16.5532C15.8018 16.1392 15.4658 15.8032 15.0518 15.8032C14.6378 15.8032 14.3018 16.1392 14.3018 16.5532V19.5532C14.3018 19.9672 14.6378 20.3032 15.0518 20.3032C15.4658 20.3032 15.8018 19.9672 15.8018 19.5532ZM15.1943 14.2882C15.2475 14.28 15.2955 14.2642 15.3398 14.2417L15.3375 14.2432C15.3863 14.2275 15.429 14.2042 15.4658 14.175L15.465 14.1757C15.51 14.1487 15.5498 14.1187 15.5858 14.085L15.585 14.0857C15.651 14.016 15.7043 13.9342 15.741 13.8435L15.7425 13.8382C15.7808 13.7542 15.8025 13.6567 15.8025 13.5532C15.8025 13.4497 15.7808 13.3522 15.741 13.2637L15.7425 13.2682C15.7043 13.1722 15.651 13.0905 15.585 13.0207C15.5498 12.9877 15.51 12.9577 15.468 12.9322L15.465 12.9307C15.429 12.9022 15.3863 12.879 15.3405 12.864L15.3375 12.8632C15.2963 12.8415 15.2483 12.8257 15.1973 12.8182H15.195C15.1508 12.8077 15.1005 12.801 15.0488 12.801C14.997 12.801 14.9468 12.807 14.898 12.819L14.9025 12.8182C14.8515 12.8272 14.8065 12.843 14.7645 12.8647L14.7675 12.8632C14.7158 12.8812 14.6708 12.9037 14.6303 12.9322L14.6325 12.9307C14.5905 12.9607 14.5538 12.99 14.5193 13.0215L14.52 13.0207C14.454 13.0905 14.4008 13.1722 14.364 13.263L14.3625 13.2682C14.3243 13.3522 14.3025 13.4497 14.3025 13.5532C14.3025 13.6567 14.3243 13.7542 14.364 13.8427L14.3625 13.8382C14.4683 14.1127 14.7293 14.3032 15.0353 14.3032C15.0413 14.3032 15.0473 14.3032 15.0533 14.3032H15.0525C15.1043 14.3017 15.153 14.2965 15.201 14.2875L15.195 14.2882H15.1943Z"
+        fill="white"
+      />
+    </svg>
+  );
+};
+
+export default InfoAlertIcon;