[ECO-1814] update icons (#121)

src/typescript/frontend/src/components/footer/constants.tsx

@@ -1,10 +1,10 @@
-import Facebook from "components/svg/icons/Facebook";
+import Discord from "@icons/Discord";
+import Telegram from "@icons/Telegram";
 import Twitter from "components/svg/icons/Twitter";
-import Instagram from "components/svg/icons/Instagram";
 import { LINKS } from "configs";
 
 export const SOCIAL_ICONS = [
-  { icon: Facebook, href: LINKS.facebook },
-  { icon: Twitter, href: LINKS.twitter },
-  { icon: Instagram, href: LINKS.instagram },
+  { icon: Discord, href: LINKS.discord },
+  { icon: Telegram, href: LINKS.telegram },
+  { icon: Twitter, href: LINKS.x },
 ];

src/typescript/frontend/src/components/header/components/mobile-menu/components/mobile-social-links/constants.tsx

@@ -1,10 +1,10 @@
-import GitHubOutlineIcon from "components/svg/icons/GitHubOutlineIcon";
 import TwitterOutlineIcon from "components/svg/icons/TwitterOutlineIcon";
-import PlanetOutline from "components/svg/icons/PlanetOutline";
 import { LINKS } from "configs";
+import DiscordOutlineIcon from "@icons/DiscordOutlineIcon";
+import TelegramOutlineIcon from "@icons/TelegramOutlineIcon";
 
 export const SOCIAL_ICONS = [
-  { icon: GitHubOutlineIcon, href: LINKS.github },
-  { icon: TwitterOutlineIcon, href: LINKS.twitter },
-  { icon: PlanetOutline, href: LINKS.econia_labs },
+  { icon: DiscordOutlineIcon, href: LINKS.discord },
+  { icon: TelegramOutlineIcon, href: LINKS.telegram },
+  { icon: TwitterOutlineIcon, href: LINKS.x },
 ];

src/typescript/frontend/src/components/svg/icons/Discord.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Svg from "components/svg/Svg";
+import { type SvgProps } from "../types";
+import { useThemeContext } from "context/theme-context";
+
+const Icon: React.FC<SvgProps> = ({ color = "black", ...props }) => {
+  const { theme } = useThemeContext();
+  return (
+    <Svg viewBox="0 0 27 27" {...props} color="transparent">
+      <circle cx="14.2522" cy="13.4504" r="13.4504" fill="white" />
+      <path
+        d="M19.6869 8.37806C21.4035 10.902 22.2513 13.749 21.9344 17.0265C21.933 17.0403 21.9258 17.0531 21.9144 17.0614C20.6144 18.016 19.3549 18.5953 18.1131 18.9795C18.1034 18.9824 18.0931 18.9822 18.0835 18.979C18.0739 18.9758 18.0656 18.9696 18.0597 18.9614C17.7728 18.5622 17.5121 18.1414 17.2837 17.6994C17.2706 17.6734 17.2826 17.6421 17.3096 17.6318C17.7236 17.4758 18.1173 17.2889 18.4959 17.0675C18.5258 17.05 18.5277 17.0073 18.5001 16.9868C18.4197 16.9271 18.3401 16.8644 18.2639 16.8017C18.2497 16.7901 18.2305 16.7878 18.2144 16.7956C15.756 17.9309 13.0629 17.9309 10.5754 16.7956C10.5593 16.7884 10.5401 16.7909 10.5262 16.8023C10.4502 16.865 10.3704 16.9271 10.2908 16.9868C10.2633 17.0073 10.2655 17.05 10.2956 17.0675C10.6742 17.2847 11.0679 17.4758 11.4813 17.6326C11.5081 17.6428 11.5209 17.6734 11.5076 17.6994C11.2841 18.142 11.0234 18.5628 10.7312 18.962C10.7185 18.9781 10.6976 18.9856 10.6778 18.9795C9.44188 18.5953 8.18238 18.016 6.8824 17.0614C6.87157 17.0531 6.86378 17.0398 6.86264 17.0259C6.59778 14.1909 7.13757 11.3204 9.10805 8.37749C9.1128 8.3697 9.12002 8.36362 9.12838 8.36001C10.098 7.91503 11.1367 7.58766 12.2223 7.4007C12.2421 7.39766 12.2619 7.40678 12.2721 7.42426C12.4063 7.66176 12.5596 7.96633 12.6633 8.21523C13.8077 8.04043 14.9699 8.04043 16.1382 8.21523C16.242 7.97165 16.39 7.66176 16.5236 7.42426C16.5283 7.41559 16.5357 7.40864 16.5446 7.40441C16.5536 7.40018 16.5636 7.39888 16.5733 7.4007C17.6596 7.58823 18.6983 7.9156 19.6671 8.36001C19.6756 8.36362 19.6827 8.3697 19.6869 8.37806V8.37806ZM13.2451 13.7684C13.2571 12.9303 12.646 12.2368 11.879 12.2368C11.1183 12.2368 10.5131 12.9242 10.5131 13.7684C10.5131 14.6123 11.1302 15.2997 11.879 15.2997C12.64 15.2997 13.2451 14.6123 13.2451 13.7684V13.7684ZM18.2957 13.7684C18.3076 12.9303 17.6966 12.2368 16.9298 12.2368C16.1688 12.2368 15.5637 12.9242 15.5637 13.7684C15.5637 14.6123 16.1808 15.2997 16.9298 15.2997C17.6966 15.2997 18.2957 14.6123 18.2957 13.7684V13.7684Z"
+        fill={theme.colors[color]}
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

src/typescript/frontend/src/components/svg/icons/DiscordOutlineIcon.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Svg from "components/svg/Svg";
+import { type SvgProps } from "../types";
+import { useThemeContext } from "context/theme-context";
+
+const Icon: React.FC<SvgProps> = ({ color = "black", ...props }) => {
+  const { theme } = useThemeContext();
+  return (
+    <Svg viewBox="0 0 27 27" {...props} color="transparent">
+      <circle cx="14.2522" cy="13.4504" r="12.9504" stroke="black" />
+      <path
+        d="M19.6869 8.37806C21.4035 10.902 22.2513 13.749 21.9344 17.0265C21.933 17.0403 21.9258 17.0531 21.9144 17.0614C20.6144 18.016 19.3549 18.5953 18.1131 18.9795C18.1034 18.9824 18.0931 18.9822 18.0835 18.979C18.0739 18.9758 18.0656 18.9696 18.0597 18.9614C17.7728 18.5622 17.5121 18.1414 17.2837 17.6994C17.2706 17.6734 17.2826 17.6421 17.3096 17.6318C17.7236 17.4758 18.1173 17.2889 18.4959 17.0675C18.5258 17.05 18.5277 17.0073 18.5001 16.9868C18.4197 16.9271 18.3401 16.8644 18.2639 16.8017C18.2497 16.7901 18.2305 16.7878 18.2144 16.7956C15.756 17.9309 13.0629 17.9309 10.5754 16.7956C10.5593 16.7884 10.5401 16.7909 10.5262 16.8023C10.4502 16.865 10.3704 16.9271 10.2908 16.9868C10.2633 17.0073 10.2655 17.05 10.2956 17.0675C10.6742 17.2847 11.0679 17.4758 11.4813 17.6326C11.5081 17.6428 11.5209 17.6734 11.5076 17.6994C11.2841 18.142 11.0234 18.5628 10.7312 18.962C10.7185 18.9781 10.6976 18.9856 10.6778 18.9795C9.44188 18.5953 8.18238 18.016 6.8824 17.0614C6.87157 17.0531 6.86378 17.0398 6.86264 17.0259C6.59778 14.1909 7.13757 11.3204 9.10805 8.37749C9.1128 8.3697 9.12002 8.36362 9.12838 8.36001C10.098 7.91503 11.1367 7.58766 12.2223 7.4007C12.2421 7.39766 12.2619 7.40678 12.2721 7.42426C12.4063 7.66176 12.5596 7.96633 12.6633 8.21523C13.8077 8.04043 14.9699 8.04043 16.1382 8.21523C16.242 7.97165 16.39 7.66176 16.5236 7.42426C16.5283 7.41559 16.5357 7.40864 16.5446 7.40441C16.5536 7.40018 16.5636 7.39888 16.5733 7.4007C17.6596 7.58823 18.6983 7.9156 19.6671 8.36001C19.6756 8.36362 19.6827 8.3697 19.6869 8.37806V8.37806ZM13.2451 13.7684C13.2571 12.9303 12.646 12.2368 11.879 12.2368C11.1183 12.2368 10.5131 12.9242 10.5131 13.7684C10.5131 14.6123 11.1302 15.2997 11.879 15.2997C12.64 15.2997 13.2451 14.6123 13.2451 13.7684V13.7684ZM18.2957 13.7684C18.3076 12.9303 17.6966 12.2368 16.9298 12.2368C16.1688 12.2368 15.5637 12.9242 15.5637 13.7684C15.5637 14.6123 16.1808 15.2997 16.9298 15.2997C17.6966 15.2997 18.2957 14.6123 18.2957 13.7684V13.7684Z"
+        fill={theme.colors[color]}
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

src/typescript/frontend/src/components/svg/icons/Telegram.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Svg from "components/svg/Svg";
+import { type SvgProps } from "../types";
+import { useThemeContext } from "context/theme-context";
+
+const Icon: React.FC<SvgProps> = ({ color = "black", ...props }) => {
+  const { theme } = useThemeContext();
+  return (
+    <Svg viewBox="0 0 27 27" {...props} color="transparent">
+      <circle cx="13.4504" cy="13.4504" r="13.4504" fill="white" />
+      <path
+        d="M6.92287 13.0875C6.92287 13.0875 12.4956 10.8005 14.4282 9.99517C15.1691 9.67307 17.6817 8.64226 17.6817 8.64226C17.6817 8.64226 18.8413 8.19132 18.7447 9.28651C18.7124 9.73749 18.4548 11.3159 18.1971 13.0231C17.8105 15.439 17.3918 18.0804 17.3918 18.0804C17.3918 18.0804 17.3273 18.8213 16.7797 18.9501C16.2321 19.0789 15.3302 18.4992 15.1691 18.3703C15.0403 18.2737 12.7532 16.8241 11.9157 16.1154C11.6902 15.9222 11.4326 15.5357 11.9479 15.0847C13.1076 14.0217 14.4927 12.701 15.3302 11.8635C15.7167 11.4769 16.1033 10.575 14.4927 11.6702C12.2056 13.2486 9.9508 14.7303 9.9508 14.7303C9.9508 14.7303 9.4354 15.0524 8.46905 14.7625C7.50266 14.4727 6.37524 14.0861 6.37524 14.0861C6.37524 14.0861 5.60219 13.6029 6.92287 13.0875V13.0875Z"
+        fill={theme.colors[color]}
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

src/typescript/frontend/src/components/svg/icons/TelegramOutlineIcon.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Svg from "components/svg/Svg";
+import { type SvgProps } from "../types";
+import { useThemeContext } from "context/theme-context";
+
+const Icon: React.FC<SvgProps> = ({ color = "black", ...props }) => {
+  const { theme } = useThemeContext();
+  return (
+    <Svg viewBox="0 0 27 27" {...props} color="transparent">
+      <circle cx="13.4504" cy="13.4504" r="12.9504" stroke="black" />
+      <path
+        d="M6.92287 13.0875C6.92287 13.0875 12.4956 10.8005 14.4282 9.99517C15.1691 9.67307 17.6817 8.64226 17.6817 8.64226C17.6817 8.64226 18.8413 8.19132 18.7447 9.28651C18.7124 9.73749 18.4548 11.3159 18.1971 13.0231C17.8105 15.439 17.3918 18.0804 17.3918 18.0804C17.3918 18.0804 17.3273 18.8213 16.7797 18.9501C16.2321 19.0789 15.3302 18.4992 15.1691 18.3703C15.0403 18.2737 12.7532 16.8241 11.9157 16.1154C11.6902 15.9222 11.4326 15.5357 11.9479 15.0847C13.1076 14.0217 14.4927 12.701 15.3302 11.8635C15.7167 11.4769 16.1033 10.575 14.4927 11.6702C12.2056 13.2486 9.9508 14.7303 9.9508 14.7303C9.9508 14.7303 9.4354 15.0524 8.46905 14.7625C7.50266 14.4727 6.37524 14.0861 6.37524 14.0861C6.37524 14.0861 5.60219 13.6029 6.92287 13.0875V13.0875Z"
+        fill={theme.colors[color]}
+      />
+    </Svg>
+  );
+};
+
+export default Icon;

src/typescript/frontend/src/configs/links.ts

@@ -1,7 +1,7 @@
 export const LINKS = {
-  facebook: "https://twitter.com/",
-  twitter: "https://twitter.com/",
-  instagram: "https://twitter.com/",
-  github: "https://github.com/",
+  x: "https://x.com/EconiaLabs",
+  github: "https://github.com/econia-labs/emojicoin-dot-fun",
   econia_labs: "https://econialabs.com/",
+  discord: "https://discord.gg/econia",
+  telegram: "https://discord.gg/econia",
 };