From bad14a7d09380d91558452e7902f067a3f85f656 Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Sat, 12 Feb 2022 15:01:38 +0530
Subject: [PATCH 1/3] feat: slack community link is updated

---
 frontend/src/container/SideNav/Slack.tsx | 48 ++++++++++++++++++++++++
 frontend/src/container/SideNav/index.tsx | 17 ++++++++-
 frontend/src/container/SideNav/styles.ts | 17 ++++++++-
 3 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/container/SideNav/Slack.tsx

diff --git a/frontend/src/container/SideNav/Slack.tsx b/frontend/src/container/SideNav/Slack.tsx
new file mode 100644
index 0000000000..d0cc536e38
--- /dev/null
+++ b/frontend/src/container/SideNav/Slack.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+const Slack = (): JSX.Element => {
+	return (
+		<svg
+			width="28"
+			height="28"
+			viewBox="0 0 28 28"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M6.08886 17.6001C6.08886 19.1778 4.79997 20.4667 3.2222 20.4667C1.64442 20.4667 0.35553 19.1778 0.35553 17.6001C0.35553 16.0223 1.64442 14.7334 3.2222 14.7334H6.08886V17.6001Z"
+				fill="#E01E5A"
+			/>
+			<path
+				d="M7.53333 17.6001C7.53333 16.0223 8.82221 14.7334 10.4 14.7334C11.9778 14.7334 13.2667 16.0223 13.2667 17.6001V24.7778C13.2667 26.3556 11.9778 27.6445 10.4 27.6445C8.82221 27.6445 7.53333 26.3556 7.53333 24.7778V17.6001Z"
+				fill="#E01E5A"
+			/>
+			<path
+				d="M10.4 6.08892C8.82221 6.08892 7.53333 4.80004 7.53333 3.22226C7.53333 1.64448 8.82221 0.355591 10.4 0.355591C11.9778 0.355591 13.2667 1.64448 13.2667 3.22226V6.08892H10.4Z"
+				fill="#36C5F0"
+			/>
+			<path
+				d="M10.4 7.53333C11.9778 7.53333 13.2666 8.82221 13.2666 10.4C13.2666 11.9778 11.9778 13.2667 10.4 13.2667H3.2222C1.64442 13.2667 0.35553 11.9778 0.35553 10.4C0.35553 8.82221 1.64442 7.53333 3.2222 7.53333H10.4Z"
+				fill="#36C5F0"
+			/>
+			<path
+				d="M21.9111 10.4C21.9111 8.82221 23.2 7.53333 24.7778 7.53333C26.3556 7.53333 27.6445 8.82221 27.6445 10.4C27.6445 11.9778 26.3556 13.2667 24.7778 13.2667H21.9111V10.4Z"
+				fill="#2EB67D"
+			/>
+			<path
+				d="M20.4667 10.4C20.4667 11.9778 19.1778 13.2667 17.6 13.2667C16.0222 13.2667 14.7333 11.9778 14.7333 10.4V3.22226C14.7333 1.64448 16.0222 0.355591 17.6 0.355591C19.1778 0.355591 20.4667 1.64448 20.4667 3.22226V10.4Z"
+				fill="#2EB67D"
+			/>
+			<path
+				d="M17.6 21.9111C19.1778 21.9111 20.4667 23.2 20.4667 24.7778C20.4667 26.3556 19.1778 27.6445 17.6 27.6445C16.0222 27.6445 14.7333 26.3556 14.7333 24.7778V21.9111H17.6Z"
+				fill="#ECB22E"
+			/>
+			<path
+				d="M17.6 20.4667C16.0222 20.4667 14.7333 19.1778 14.7333 17.6001C14.7333 16.0223 16.0222 14.7334 17.6 14.7334H24.7778C26.3556 14.7334 27.6444 16.0223 27.6444 17.6001C27.6444 19.1778 26.3556 20.4667 24.7778 20.4667H17.6Z"
+				fill="#ECB22E"
+			/>
+		</svg>
+	);
+};
+
+export default Slack;
diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index c96e46b18d..64da5b5a44 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -1,5 +1,5 @@
 import { Menu, Typography } from 'antd';
-import { ToggleButton } from './styles';
+import { MenuItem, SlackButton, ToggleButton } from './styles';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
@@ -17,6 +17,7 @@ import setTheme from 'lib/theme/setTheme';
 
 import menus from './menuItems';
 import { Logo, Sider, ThemeSwitcherWrapper } from './styles';
+import Slack from './Slack';
 
 const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 	const [collapsed, setCollapsed] = useState<boolean>(false);
@@ -57,10 +58,18 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 		[pathname],
 	);
 
+	const onClickSlackHandler = () => {
+		window.open('https://signoz.io/slack', '_blank');
+	};
+
 	return (
 		<Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={200}>
 			<ThemeSwitcherWrapper>
-				<ToggleButton checked={isDarkMode} onChange={toggleTheme} defaultChecked={isDarkMode} />
+				<ToggleButton
+					checked={isDarkMode}
+					onChange={toggleTheme}
+					defaultChecked={isDarkMode}
+				/>
 			</ThemeSwitcherWrapper>
 			<NavLink to={ROUTES.APPLICATION}>
 				<Logo src={'/signoz.svg'} alt="SigNoz" collapsed={collapsed} />
@@ -81,6 +90,10 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 						<Typography>{name}</Typography>
 					</Menu.Item>
 				))}
+
+				<MenuItem onClick={onClickSlackHandler} icon={<Slack />}>
+					<SlackButton>Slack</SlackButton>
+				</MenuItem>
 			</Menu>
 		</Sider>
 	);
diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts
index 11583359e1..47d452f55d 100644
--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@@ -1,4 +1,4 @@
-import { Layout, Switch } from 'antd';
+import { Layout, Menu, Switch, Typography } from 'antd';
 import styled from 'styled-components';
 const { Sider: SiderComponent } = Layout;
 
@@ -36,3 +36,18 @@ export const ToggleButton = styled(Switch)<DarkModeProps>`
 	}
 `;
 
+export const SlackButton = styled(Typography)`
+	&&& {
+		margin-left: 1rem;
+	}
+`;
+
+export const MenuItem = styled(Menu.Item)`
+	&&& {
+		position: fixed;
+		bottom: 48px;
+		width: 100%;
+		height: 48px;
+		background: #262626;
+	}
+`;

From 31f0a9f0b6eb6df54b95c5b07c605ec53648f14a Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Sat, 12 Feb 2022 15:17:40 +0530
Subject: [PATCH 2/3] feat: slack community link is updated

---
 frontend/src/container/SideNav/index.tsx | 15 ++++++++++----
 frontend/src/container/SideNav/styles.ts | 25 +++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index 64da5b5a44..472ee6f2ae 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -1,5 +1,10 @@
 import { Menu, Typography } from 'antd';
-import { MenuItem, SlackButton, ToggleButton } from './styles';
+import {
+	MenuItem,
+	SlackButton,
+	SlackMenuItemContainer,
+	ToggleButton,
+} from './styles';
 import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import React, { useCallback, useState } from 'react';
@@ -91,9 +96,11 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 					</Menu.Item>
 				))}
 
-				<MenuItem onClick={onClickSlackHandler} icon={<Slack />}>
-					<SlackButton>Slack</SlackButton>
-				</MenuItem>
+				<SlackMenuItemContainer collapsed={collapsed}>
+					<MenuItem onClick={onClickSlackHandler} icon={<Slack />}>
+						<SlackButton>Slack</SlackButton>
+					</MenuItem>
+				</SlackMenuItemContainer>
 			</Menu>
 		</Sider>
 	);
diff --git a/frontend/src/container/SideNav/styles.ts b/frontend/src/container/SideNav/styles.ts
index 47d452f55d..a4790e84a0 100644
--- a/frontend/src/container/SideNav/styles.ts
+++ b/frontend/src/container/SideNav/styles.ts
@@ -1,5 +1,5 @@
 import { Layout, Menu, Switch, Typography } from 'antd';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 const { Sider: SiderComponent } = Layout;
 
 export const ThemeSwitcherWrapper = styled.div`
@@ -51,3 +51,26 @@ export const MenuItem = styled(Menu.Item)`
 		background: #262626;
 	}
 `;
+
+export const SlackMenuItemContainer = styled.div<LogoProps>`
+	&&& {
+		li {
+			${({ collapsed }) =>
+				collapsed &&
+				css`
+					padding-left: 24px;
+				`}
+		}
+
+		svg {
+			margin-left: ${({ collapsed }) => (collapsed ? '0' : '24px')};
+
+			${({ collapsed }) =>
+				collapsed &&
+				css`
+					height: 100%;
+					margin: 0 auto;
+				`}
+		}
+	}
+`;

From 567c81c0f9bf646e123513df3333ab8384a80883 Mon Sep 17 00:00:00 2001
From: Palash gupta <palash@signoz.io>
Date: Sun, 13 Feb 2022 12:05:20 +0530
Subject: [PATCH 3/3] chore:button text is updated

---
 frontend/src/container/SideNav/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/container/SideNav/index.tsx b/frontend/src/container/SideNav/index.tsx
index 472ee6f2ae..6e203d4ab2 100644
--- a/frontend/src/container/SideNav/index.tsx
+++ b/frontend/src/container/SideNav/index.tsx
@@ -98,7 +98,7 @@ const SideNav = ({ toggleDarkMode }: Props): JSX.Element => {
 
 				<SlackMenuItemContainer collapsed={collapsed}>
 					<MenuItem onClick={onClickSlackHandler} icon={<Slack />}>
-						<SlackButton>Slack</SlackButton>
+						<SlackButton>Support</SlackButton>
 					</MenuItem>
 				</SlackMenuItemContainer>
 			</Menu>