From a2645c2ed433f466beb3ebd5ef243d4c7a35d3ab Mon Sep 17 00:00:00 2001
From: Jaideep Guntupalli <63718527+JaideepGuntupalli@users.noreply.github.com>
Date: Wed, 19 Jul 2023 03:00:17 +0530
Subject: [PATCH] feat: replaced slack icon with Discord (#10193)

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
---
 apps/web/pages/404.tsx                  | 21 ++++-----------------
 packages/features/shell/Shell.tsx       |  4 ++--
 packages/ui/components/icon/Discord.tsx | 14 ++++++++++++++
 packages/ui/package.json                |  3 ++-
 4 files changed, 22 insertions(+), 20 deletions(-)
 create mode 100644 packages/ui/components/icon/Discord.tsx

diff --git a/apps/web/pages/404.tsx b/apps/web/pages/404.tsx
index d5023d1a5c..ec14c8be1b 100644
--- a/apps/web/pages/404.tsx
+++ b/apps/web/pages/404.tsx
@@ -1,13 +1,14 @@
 import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { orgDomainConfig, subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { DOCS_URL, JOIN_DISCORD, WEBSITE_URL, IS_CALCOM } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HeadSeo } from "@calcom/ui";
 import { BookOpen, Check, ChevronRight, FileText, Shield } from "@calcom/ui/components/icon";
+import { Discord } from "@calcom/ui/components/icon/Discord";
 
 import PageWrapper from "@components/PageWrapper";
 
@@ -205,14 +206,7 @@ export default function Custom404() {
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <svg
-                            className="text-default h-6 w-6"
-                            fill="currentColor"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 127.14 96.36">
-                            <title>Discord Logo</title>
-                            <path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z" />
-                          </svg>
+                          <Discord className="text-default h-6 w-6" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
@@ -350,14 +344,7 @@ export default function Custom404() {
                       className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
                       <div className="flex-shrink-0">
                         <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <svg
-                            className="text-default h-6 w-6"
-                            fill="currentColor"
-                            xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 127.14 96.36">
-                            <title>Discord Logo</title>
-                            <path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z" />
-                          </svg>
+                          <Discord className="text-default h-6 w-6" />
                         </span>
                       </div>
                       <div className="min-w-0 flex-1">
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 9761ba15ae..5381ba6a13 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -73,11 +73,11 @@ import {
   ChevronDown,
   Copy,
   Settings,
-  Slack,
   Users,
   Zap,
   User as UserIcon,
 } from "@calcom/ui/components/icon";
+import { Discord } from "@calcom/ui/components/icon/Discord";
 
 import FreshChatProvider from "../ee/support/lib/freshchat/FreshChatProvider";
 import { NProgressNextRouter } from "./NProgressPageIndicator";
@@ -434,7 +434,7 @@ function UserDropdown({ small }: UserDropdownProps) {
                 <DropdownMenuSeparator />
                 <DropdownMenuItem>
                   <DropdownItem
-                    StartIcon={(props) => <Slack strokeWidth={1.5} {...props} />}
+                    StartIcon={(props) => <Discord className="text-default h-4 w-4" />}
                     target="_blank"
                     rel="noreferrer"
                     href={JOIN_DISCORD}>
diff --git a/packages/ui/components/icon/Discord.tsx b/packages/ui/components/icon/Discord.tsx
new file mode 100644
index 0000000000..3be3410d6a
--- /dev/null
+++ b/packages/ui/components/icon/Discord.tsx
@@ -0,0 +1,14 @@
+import React, { forwardRef } from "react";
+
+export const Discord = forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(function Discord(props, ref) {
+  return (
+    <svg
+      className={props.className}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 127.14 96.36">
+      <title>Discord Logo</title>
+      <path d="M107.7 8.07A105.15 105.15 0 0 0 81.47 0a72.06 72.06 0 0 0-3.36 6.83 97.68 97.68 0 0 0-29.11 0A72.37 72.37 0 0 0 45.64 0a105.89 105.89 0 0 0-26.25 8.09C2.79 32.65-1.71 56.6.54 80.21a105.73 105.73 0 0 0 32.17 16.15 77.7 77.7 0 0 0 6.89-11.11 68.42 68.42 0 0 1-10.85-5.18c.91-.66 1.8-1.34 2.66-2a75.57 75.57 0 0 0 64.32 0c.87.71 1.76 1.39 2.66 2a68.68 68.68 0 0 1-10.87 5.19 77 77 0 0 0 6.89 11.1 105.25 105.25 0 0 0 32.19-16.14c2.64-27.38-4.51-51.11-18.9-72.15ZM42.45 65.69C36.18 65.69 31 60 31 53s5-12.74 11.43-12.74S54 46 53.89 53s-5.05 12.69-11.44 12.69Zm42.24 0C78.41 65.69 73.25 60 73.25 53s5-12.74 11.44-12.74S96.23 46 96.12 53s-5.04 12.69-11.43 12.69Z" />
+    </svg>
+  );
+});
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 55c10e642c..0b2b27ff10 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -7,7 +7,8 @@
   "exports": {
     ".": "./index.tsx",
     "./components/toast": "./components/toast/index.tsx",
-    "./components/icon": "./components/icon/index.ts"
+    "./components/icon": "./components/icon/index.ts",
+    "./components/icon/Discord": "./components/icon/Discord.tsx"
   },
   "types": "./index.tsx",
   "license": "MIT",