From 4b1acb8f45d8c8e000228510baaa834d902bcfe2 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sun, 12 Jun 2022 14:04:21 +0100
Subject: [PATCH 1/7] refactor topbar buttons

---
 .../src/Components/Basic/Button/Button.css    |  0
 .../src/Components/Basic/Button/Button.tsx    | 48 +++++++--------
 .../Basic/Button/DropdownButton.tsx           | 37 ------------
 .../Components/Basic/Button/DropdownItem.tsx  | 23 --------
 .../Components/Basic/Button/IconButton.tsx    | 29 ++++++++++
 .../MenuButton.scss}                          |  0
 .../Basic/Button/MenuButton/MenuButton.tsx    | 34 +++++++++++
 .../Basic/Button/MenuButton/MenuItem.tsx      | 30 ++++++++++
 .../Basic/Button/MenuButton/MenuLegend.tsx    | 17 ++++++
 .../Button}/TopbarMenu/MenuItem.scss          |  0
 .../Button}/TopbarMenu/MenuItem.tsx           |  0
 .../Button}/TopbarMenu/MenuLink.scss          |  0
 .../Button}/TopbarMenu/MenuLinkItem.tsx       |  0
 .../Button}/TopbarMenu/TopbarMenu.tsx         |  0
 .../Button}/TopbarMenuButton/MenuButton.scss  |  0
 .../Button}/TopbarMenuButton/MenuButton.tsx   |  0
 CommonUI/src/Components/Basic/Icon/Icon.tsx   |  6 +-
 .../TopBar}/UserProfile/UserInfo.tsx          |  0
 Dashboard/src/Components/CreateButton.tsx     | 58 -------------------
 Dashboard/src/Components/HelpButton.tsx       | 53 -----------------
 .../src/Components/Monitor/MonitorTable.tsx   | 30 +++-------
 .../ProjectPicker/CurrentProject.tsx          |  2 +-
 .../src/Components/TopBar/CreateButton.tsx    | 20 +++++++
 .../src/Components/TopBar/HelpButton.tsx      | 21 +++++++
 .../Components/TopBar/NotificationButton.tsx  | 21 +++++++
 Dashboard/src/Components/TopBar/TopBar.tsx    | 11 ++--
 .../Components/TopBar/UserProfileButton.tsx   | 17 ++++++
 .../UserProfile/UserProfileButton.tsx         | 41 -------------
 28 files changed, 230 insertions(+), 268 deletions(-)
 delete mode 100644 CommonUI/src/Components/Basic/Button/Button.css
 delete mode 100644 CommonUI/src/Components/Basic/Button/DropdownButton.tsx
 delete mode 100644 CommonUI/src/Components/Basic/Button/DropdownItem.tsx
 create mode 100644 CommonUI/src/Components/Basic/Button/IconButton.tsx
 rename CommonUI/src/Components/Basic/Button/{DropdownButton.scss => MenuButton/MenuButton.scss} (100%)
 create mode 100644 CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.tsx
 create mode 100644 CommonUI/src/Components/Basic/Button/MenuButton/MenuItem.tsx
 create mode 100644 CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend.tsx
 rename CommonUI/src/Components/{Dashboard/TopBar => Basic/Button}/TopbarMenu/MenuItem.scss (100%)
 rename CommonUI/src/Components/{Dashboard/TopBar => Basic/Button}/TopbarMenu/MenuItem.tsx (100%)
 rename CommonUI/src/Components/{Dashboard/TopBar => Basic/Button}/TopbarMenu/MenuLink.scss (100%)
 rename CommonUI/src/Components/{Dashboard/TopBar => Basic/Button}/TopbarMenu/MenuLinkItem.tsx (100%)
 rename CommonUI/src/Components/{Dashboard/TopBar => Basic/Button}/TopbarMenu/TopbarMenu.tsx (100%)
 rename CommonUI/src/Components/{Dashboard/TopBar => Basic/Button}/TopbarMenuButton/MenuButton.scss (100%)
 rename CommonUI/src/Components/{Dashboard/TopBar => Basic/Button}/TopbarMenuButton/MenuButton.tsx (100%)
 rename {Dashboard/src/Components => CommonUI/src/Components/Dashboard/TopBar}/UserProfile/UserInfo.tsx (100%)
 delete mode 100644 Dashboard/src/Components/CreateButton.tsx
 delete mode 100644 Dashboard/src/Components/HelpButton.tsx
 create mode 100644 Dashboard/src/Components/TopBar/CreateButton.tsx
 create mode 100644 Dashboard/src/Components/TopBar/HelpButton.tsx
 create mode 100644 Dashboard/src/Components/TopBar/NotificationButton.tsx
 create mode 100644 Dashboard/src/Components/TopBar/UserProfileButton.tsx
 delete mode 100644 Dashboard/src/Components/UserProfile/UserProfileButton.tsx

diff --git a/CommonUI/src/Components/Basic/Button/Button.css b/CommonUI/src/Components/Basic/Button/Button.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/CommonUI/src/Components/Basic/Button/Button.tsx b/CommonUI/src/Components/Basic/Button/Button.tsx
index 50dd5672d6..e36477bba3 100644
--- a/CommonUI/src/Components/Basic/Button/Button.tsx
+++ b/CommonUI/src/Components/Basic/Button/Button.tsx
@@ -7,23 +7,24 @@ export interface ComponentProps {
     title: string;
     onClick?: MouseOnClick;
     disabled?: boolean;
-    id: string;
+    id?: string;
     shortcutKey?: ShortcutKey;
     type?: ButtonType;
     isLoading?: boolean;
 }
 
-const Button: FunctionComponent<ComponentProps> = (
-    props: ComponentProps
-): ReactElement => {
-    // props validation
-    if (!props.type) {
-        props.type = ButtonType.Button;
-    }
-
+const Button: FunctionComponent<ComponentProps> = ({
+    title,
+    onClick,
+    disabled,
+    id,
+    shortcutKey,
+    type = ButtonType.Button,
+    isLoading = false,
+}: ComponentProps): ReactElement => {
     useEffect(() => {
         // componentDidMount
-        if (props.shortcutKey) {
+        if (shortcutKey) {
             window.addEventListener('keydown', (e: KeyboardEventProp) => {
                 return handleKeyboard(e);
             });
@@ -31,7 +32,7 @@ const Button: FunctionComponent<ComponentProps> = (
 
         // componentDidUnmount
         return () => {
-            if (props.shortcutKey) {
+            if (shortcutKey) {
                 window.removeEventListener(
                     'keydown',
                     (e: KeyboardEventProp) => {
@@ -46,12 +47,12 @@ const Button: FunctionComponent<ComponentProps> = (
         if (
             event.target instanceof HTMLBodyElement &&
             event.key &&
-            props.shortcutKey
+            shortcutKey
         ) {
             switch (event.key) {
-                case props.shortcutKey.toUpperCase():
-                case props.shortcutKey.toLowerCase():
-                    props.onClick && props.onClick();
+                case shortcutKey.toUpperCase():
+                case shortcutKey.toLowerCase():
+                    onClick && onClick();
                     return;
                 default:
                     return;
@@ -60,28 +61,23 @@ const Button: FunctionComponent<ComponentProps> = (
     };
 
     return (
-        <button
-            id={props.id}
-            onClick={props.onClick}
-            type={props.type}
-            disabled={props.disabled}
-        >
-            {!props.isLoading && (
+        <button id={id} onClick={onClick} type={type} disabled={disabled}>
+            {!isLoading && (
                 <div>
                     <div>
                         <div></div>
                     </div>
                     <span>
-                        <span>{props.title}</span>
-                        {props.shortcutKey && (
+                        <span>{title}</span>
+                        {shortcutKey && (
                             <span className="newButtonKeycode">
-                                {props.shortcutKey}
+                                {shortcutKey}
                             </span>
                         )}
                     </span>
                 </div>
             )}
-            {props.isLoading && <div>Implement Loader here</div>}
+            {isLoading && <div>Implement Loader here</div>}
         </button>
     );
 };
diff --git a/CommonUI/src/Components/Basic/Button/DropdownButton.tsx b/CommonUI/src/Components/Basic/Button/DropdownButton.tsx
deleted file mode 100644
index e97199efde..0000000000
--- a/CommonUI/src/Components/Basic/Button/DropdownButton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, {
-    MouseEventHandler,
-    ReactElement,
-    FunctionComponent,
-} from 'react';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-import './DropdownButton.scss';
-import { MenuOutlineButton } from '../../Dashboard/TopBar/TopbarMenuButton/MenuButton';
-
-export interface ComponentProps {
-    showDropdown?: boolean;
-    onClick?: MouseEventHandler;
-    children?: Array<ReactElement>;
-    title: string;
-}
-
-const DropdownButton: FunctionComponent<ComponentProps> = ({
-    onClick,
-    title,
-    children,
-    showDropdown,
-}: ComponentProps): ReactElement => {
-    return (
-        <div className="dropdownButton">
-            <MenuOutlineButton
-                text={title}
-                icon={faChevronDown}
-                onClick={onClick!}
-            />
-            {showDropdown && (
-                <div className="dropdownButtonLists">{children}</div>
-            )}
-        </div>
-    );
-};
-
-export default DropdownButton;
diff --git a/CommonUI/src/Components/Basic/Button/DropdownItem.tsx b/CommonUI/src/Components/Basic/Button/DropdownItem.tsx
deleted file mode 100644
index fdff373480..0000000000
--- a/CommonUI/src/Components/Basic/Button/DropdownItem.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React, {
-    FunctionComponent,
-    MouseEventHandler,
-    ReactElement,
-} from 'react';
-
-export interface ComponentProps {
-    title: string;
-    action?: MouseEventHandler;
-}
-
-const DropdownItem: FunctionComponent<ComponentProps> = ({
-    action,
-    title,
-}: ComponentProps): ReactElement => {
-    return (
-        <div className="dropdownButtonListItem" onClick={action}>
-            {title}
-        </div>
-    );
-};
-
-export default DropdownItem;
diff --git a/CommonUI/src/Components/Basic/Button/IconButton.tsx b/CommonUI/src/Components/Basic/Button/IconButton.tsx
new file mode 100644
index 0000000000..9648e4d7ff
--- /dev/null
+++ b/CommonUI/src/Components/Basic/Button/IconButton.tsx
@@ -0,0 +1,29 @@
+import React, {
+    ReactElement,
+    MouseEventHandler,
+    FunctionComponent,
+} from 'react';
+import Icon, { IconProp } from '../Icon/Icon';
+
+export interface ComponentProps {
+    icon?: IconProp;
+    onClick?: MouseEventHandler;
+    children: ReactElement | Array<ReactElement>;
+}
+
+const IconButton: FunctionComponent<ComponentProps> = ({
+    icon,
+    onClick,
+    children,
+}: ComponentProps): ReactElement => {
+    return (
+        <div className="buttonLayout">
+            <div className="iconButton" onClick={onClick}>
+                {icon && <Icon icon={icon} />}
+            </div>
+            <div className="dropdownButtonLists">{children}</div>
+        </div>
+    );
+};
+
+export default IconButton;
diff --git a/CommonUI/src/Components/Basic/Button/DropdownButton.scss b/CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.scss
similarity index 100%
rename from CommonUI/src/Components/Basic/Button/DropdownButton.scss
rename to CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.scss
diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.tsx
new file mode 100644
index 0000000000..dece380b82
--- /dev/null
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.tsx
@@ -0,0 +1,34 @@
+import React, { ReactElement, FunctionComponent } from 'react';
+import './MenuButton.scss';
+import Button from '../Button';
+import useComponentOutsideClick from '../../../../Types/UseComponentOutsideClick';
+
+export interface ComponentProps {
+    children?: ReactElement | Array<ReactElement>;
+    title: string;
+}
+
+const MenuButton: FunctionComponent<ComponentProps> = ({
+    title,
+    children,
+}: ComponentProps): ReactElement => {
+    const { ref, isComponentVisible, setIsComponentVisible } =
+        useComponentOutsideClick(false);
+
+    return (
+        <div className="dropdownButton" ref={ref}>
+            <Button
+                title={title}
+                onClick={() => {
+                    setIsComponentVisible(true);
+                }}
+            />
+
+            {isComponentVisible && (
+                <div className="dropdownButtonLists">{children}</div>
+            )}
+        </div>
+    );
+};
+
+export default MenuButton;
diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/MenuItem.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/MenuItem.tsx
new file mode 100644
index 0000000000..78e09fd0a9
--- /dev/null
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/MenuItem.tsx
@@ -0,0 +1,30 @@
+import Route from 'Common/Types/API/Route';
+import React, {
+    FunctionComponent,
+    MouseEventHandler,
+    ReactElement,
+} from 'react';
+import Navigation from '../../../../Utils/Navigation';
+
+export interface ComponentProps {
+    title: string;
+    onClick?: MouseEventHandler;
+    route?: Route;
+}
+
+const MenuItem: FunctionComponent<ComponentProps> = ({
+    onClick,
+    title,
+    route
+}: ComponentProps): ReactElement => {
+    return (
+        <div className="dropdownButtonListItem" onClick={route ? () => {
+            Navigation.navigate(route);
+        } : onClick
+        }>
+            {title}
+        </div>
+    );
+};
+
+export default MenuItem;
diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend.tsx
new file mode 100644
index 0000000000..35946af2ea
--- /dev/null
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend.tsx
@@ -0,0 +1,17 @@
+import React, { FunctionComponent, ReactElement } from 'react';
+
+export interface ComponentProps {
+    title: string;
+}
+
+const MenuLegend: FunctionComponent<ComponentProps> = ({
+    title,
+}: ComponentProps): ReactElement => {
+    return (
+        <div className="lists">
+            <p className="legend">{title}</p>
+        </div>
+    );
+};
+
+export default MenuLegend;
diff --git a/CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuItem.scss b/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.scss
similarity index 100%
rename from CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuItem.scss
rename to CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.scss
diff --git a/CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuItem.tsx b/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.tsx
similarity index 100%
rename from CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuItem.tsx
rename to CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.tsx
diff --git a/CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuLink.scss b/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLink.scss
similarity index 100%
rename from CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuLink.scss
rename to CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLink.scss
diff --git a/CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuLinkItem.tsx b/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLinkItem.tsx
similarity index 100%
rename from CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuLinkItem.tsx
rename to CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLinkItem.tsx
diff --git a/CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/TopbarMenu.tsx b/CommonUI/src/Components/Basic/Button/TopbarMenu/TopbarMenu.tsx
similarity index 100%
rename from CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/TopbarMenu.tsx
rename to CommonUI/src/Components/Basic/Button/TopbarMenu/TopbarMenu.tsx
diff --git a/CommonUI/src/Components/Dashboard/TopBar/TopbarMenuButton/MenuButton.scss b/CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.scss
similarity index 100%
rename from CommonUI/src/Components/Dashboard/TopBar/TopbarMenuButton/MenuButton.scss
rename to CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.scss
diff --git a/CommonUI/src/Components/Dashboard/TopBar/TopbarMenuButton/MenuButton.tsx b/CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.tsx
similarity index 100%
rename from CommonUI/src/Components/Dashboard/TopBar/TopbarMenuButton/MenuButton.tsx
rename to CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.tsx
diff --git a/CommonUI/src/Components/Basic/Icon/Icon.tsx b/CommonUI/src/Components/Basic/Icon/Icon.tsx
index e8e382399e..525acc1292 100644
--- a/CommonUI/src/Components/Basic/Icon/Icon.tsx
+++ b/CommonUI/src/Components/Basic/Icon/Icon.tsx
@@ -11,11 +11,15 @@ export enum SizeProp {
 
 export enum IconProp {
     File = 'file',
+    User = 'user',
+    Settings = 'cog',
+    Notification = 'bell',
+    Help = 'question',
 }
 
 export interface ComponentProps {
     icon: IconProp;
-    size: SizeProp;
+    size?: SizeProp;
 }
 
 const Icon: FunctionComponent<ComponentProps> = ({
diff --git a/Dashboard/src/Components/UserProfile/UserInfo.tsx b/CommonUI/src/Components/Dashboard/TopBar/UserProfile/UserInfo.tsx
similarity index 100%
rename from Dashboard/src/Components/UserProfile/UserInfo.tsx
rename to CommonUI/src/Components/Dashboard/TopBar/UserProfile/UserInfo.tsx
diff --git a/Dashboard/src/Components/CreateButton.tsx b/Dashboard/src/Components/CreateButton.tsx
deleted file mode 100644
index 6c656ee356..0000000000
--- a/Dashboard/src/Components/CreateButton.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, {
-    ReactElement,
-    FunctionComponent,
-    useState,
-    MouseEventHandler,
-} from 'react';
-import { MenuOutlineButton } from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenuButton/MenuButton';
-import TopbarMenu from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/TopbarMenu';
-import MenuItem from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuItem';
-import {
-    faChevronDown,
-    faFileInvoice,
-    faRecycle,
-    faLink,
-} from '@fortawesome/free-solid-svg-icons';
-
-const CreateButton: FunctionComponent = (): ReactElement => {
-    const [showList, setShowList] = useState(false);
-    const toggle: Function = () => {
-        return setShowList(!showList);
-    };
-
-    return (
-        <MenuOutlineButton
-            text="Create"
-            icon={faChevronDown}
-            onClick={toggle as MouseEventHandler}
-            showModal={showList}
-            modalContent={
-                <TopbarMenu
-                    legend="Online Payments"
-                    items={[
-                        <MenuItem
-                            text="Invoice"
-                            icon={faFileInvoice}
-                            shortcuts={['c', 'i']}
-                            key={1}
-                        />,
-                        <MenuItem
-                            text="Subscription"
-                            icon={faRecycle}
-                            shortcuts={['c', 's']}
-                            key={2}
-                        />,
-                        <MenuItem
-                            text="Payment link"
-                            icon={faLink}
-                            shortcuts={['c', 'l']}
-                            key={3}
-                        />,
-                    ]}
-                />
-            }
-        />
-    );
-};
-
-export default CreateButton;
diff --git a/Dashboard/src/Components/HelpButton.tsx b/Dashboard/src/Components/HelpButton.tsx
deleted file mode 100644
index 4f693a18d6..0000000000
--- a/Dashboard/src/Components/HelpButton.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, {
-    FunctionComponent,
-    MouseEventHandler,
-    ReactElement,
-    useState,
-} from 'react';
-
-import MenuButton from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenuButton/MenuButton';
-import MenuLinkItem from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuLinkItem';
-import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
-import TopbarMenu from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/TopbarMenu';
-
-const HelpButton: FunctionComponent = (): ReactElement => {
-    const [showList, setShowList] = useState(false);
-    const toggle: Function = () => {
-        return setShowList(!showList);
-    };
-
-    return (
-        <MenuButton
-            icon={faQuestionCircle}
-            onClick={toggle as MouseEventHandler}
-            showModal={showList}
-            modalContent={
-                <>
-                    <TopbarMenu
-                        legend="Resources"
-                        items={[
-                            <MenuLinkItem
-                                key={1}
-                                text="Support articles"
-                                openInNewTab={true}
-                            />,
-                            <MenuLinkItem
-                                key={2}
-                                text="Developer docs"
-                                openInNewTab={true}
-                            />,
-                            <MenuLinkItem key={1} text="Keyboard shortcuts" />,
-                        ]}
-                    />
-                    <hr />
-                    <TopbarMenu
-                        legend="Get in touch"
-                        items={[<MenuLinkItem key={1} text="Share feedback" />]}
-                    />
-                </>
-            }
-        />
-    );
-};
-
-export default HelpButton;
diff --git a/Dashboard/src/Components/Monitor/MonitorTable.tsx b/Dashboard/src/Components/Monitor/MonitorTable.tsx
index 9285063aa0..82b962589c 100644
--- a/Dashboard/src/Components/Monitor/MonitorTable.tsx
+++ b/Dashboard/src/Components/Monitor/MonitorTable.tsx
@@ -1,24 +1,15 @@
-import React, {
-    FunctionComponent,
-    MouseEventHandler,
-    ReactElement,
-    useState,
-} from 'react';
+import React, { FunctionComponent, ReactElement } from 'react';
 import Container from 'CommonUI/src/Components/Dashboard/Container/Container/Container';
 import Pagination from 'CommonUI/src/Components/Dashboard/Container/Container/Pagination';
 import Table from 'CommonUI/src/Components/Dashboard/Table/Table';
 import Button from 'CommonUI/src/Components/Basic/Button/Button';
 import ButtonTypes from 'CommonUI/src/Components/Basic/Button/ButtonTypes';
-import DropdownButton from 'CommonUI/src/Components/Basic/Button/DropdownButton';
-import DropdownItem from 'CommonUI/src/Components/Basic/Button/DropdownItem';
+import MenuButton from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuButton';
+import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
 import ShortcutKey from 'CommonUI/src/Components/Basic/ShortcutKey/ShortcutKey';
 import { ColumnSort } from 'CommonUI/src/Components/Dashboard/Table/Type/Table';
 
 const MonitorTable: FunctionComponent = (): ReactElement => {
-    const [showList, setShowList] = useState(false);
-    const toggleDropdown: Function = (): void => {
-        setShowList(!showList);
-    };
     return (
         <Container
             title="Monitors"
@@ -39,16 +30,11 @@ const MonitorTable: FunctionComponent = (): ReactElement => {
                 </Pagination>
             }
             headerButtons={[
-                <DropdownButton
-                    key={1}
-                    title="Filter By"
-                    onClick={toggleDropdown as MouseEventHandler}
-                    showDropdown={showList}
-                >
-                    <DropdownItem title="Clear Filters" />
-                    <DropdownItem title="Unacknowledged" />
-                    <DropdownItem title="Unresolved" />
-                </DropdownButton>,
+                <MenuButton key={1} title="Filter By">
+                    <MenuItem title="Clear Filters" />
+                    <MenuItem title="Unacknowledged" />
+                    <MenuItem title="Unresolved" />
+                </MenuButton>,
                 <Button
                     key={2}
                     title="Create New Monitor"
diff --git a/Dashboard/src/Components/ProjectPicker/CurrentProject.tsx b/Dashboard/src/Components/ProjectPicker/CurrentProject.tsx
index 7faf867827..987e618209 100644
--- a/Dashboard/src/Components/ProjectPicker/CurrentProject.tsx
+++ b/Dashboard/src/Components/ProjectPicker/CurrentProject.tsx
@@ -15,7 +15,7 @@ const CurrentProject: FunctionComponent = (): ReactElement => {
                 ref={ref}
                 className="preview"
                 onClick={() => {
-                    return setIsComponentVisible(!isComponentVisible);
+                    return setIsComponentVisible(true);
                 }}
             >
                 <img src="/img/placeholder.png" alt="Project Image" />
diff --git a/Dashboard/src/Components/TopBar/CreateButton.tsx b/Dashboard/src/Components/TopBar/CreateButton.tsx
new file mode 100644
index 0000000000..9550b03f3a
--- /dev/null
+++ b/Dashboard/src/Components/TopBar/CreateButton.tsx
@@ -0,0 +1,20 @@
+import React, { ReactElement, FunctionComponent } from 'react';
+import MenuButton from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuButton';
+import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
+import MenuLegend from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend';
+
+const CreateButton: FunctionComponent = (): ReactElement => {
+    return (
+        <MenuButton title={'Create'}>
+            <MenuLegend title={'Basic'} />
+            <MenuItem title="Monitors" />
+            <MenuItem title="Incident" />
+            <MenuItem title="Status Page" />
+            <MenuLegend title={'Advanced'} />
+            <MenuItem title="Automated Script" />
+            <MenuItem title="Logs" />
+        </MenuButton>
+    );
+};
+
+export default CreateButton;
diff --git a/Dashboard/src/Components/TopBar/HelpButton.tsx b/Dashboard/src/Components/TopBar/HelpButton.tsx
new file mode 100644
index 0000000000..1b0505123b
--- /dev/null
+++ b/Dashboard/src/Components/TopBar/HelpButton.tsx
@@ -0,0 +1,21 @@
+import React, { ReactElement, FunctionComponent } from 'react';
+import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
+import MenuLegend from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend';
+import IconButton from 'CommonUI/src/Components/Basic/Button/IconButton';
+import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
+
+const CreateButton: FunctionComponent = (): ReactElement => {
+    return (
+        <IconButton icon={IconProp.Help}>
+            <MenuLegend title="Basic" />
+            <MenuItem title="Monitors" />
+            <MenuItem title="Incident" />
+            <MenuItem title="Status Page" />
+            <MenuLegend title="Advanced" />
+            <MenuItem title="Automated Script" />
+            <MenuItem title="Logs" />
+        </IconButton>
+    );
+};
+
+export default CreateButton;
diff --git a/Dashboard/src/Components/TopBar/NotificationButton.tsx b/Dashboard/src/Components/TopBar/NotificationButton.tsx
new file mode 100644
index 0000000000..45ef12ab20
--- /dev/null
+++ b/Dashboard/src/Components/TopBar/NotificationButton.tsx
@@ -0,0 +1,21 @@
+import React, { ReactElement, FunctionComponent } from 'react';
+import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
+import MenuLegend from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend';
+import IconButton from 'CommonUI/src/Components/Basic/Button/IconButton';
+import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
+
+const NotificationButton: FunctionComponent = (): ReactElement => {
+    return (
+        <IconButton icon={IconProp.Notification}>
+            <MenuLegend title={'Basic'} />
+            <MenuItem title="Monitors" />
+            <MenuItem title="Incident" />
+            <MenuItem title="Status Page" />
+            <MenuLegend title={'Advanced'} />
+            <MenuItem title="Automated Script" />
+            <MenuItem title="Logs" />
+        </IconButton>
+    );
+};
+
+export default NotificationButton;
diff --git a/Dashboard/src/Components/TopBar/TopBar.tsx b/Dashboard/src/Components/TopBar/TopBar.tsx
index 13059bc9df..fdb7061acd 100644
--- a/Dashboard/src/Components/TopBar/TopBar.tsx
+++ b/Dashboard/src/Components/TopBar/TopBar.tsx
@@ -1,12 +1,11 @@
 import TopBar from 'CommonUI/src/Components/Dashboard/TopBar/TopBar';
 import CurrentProject from '../../Components/ProjectPicker/CurrentProject';
 import SearchBar from 'CommonUI/src/Components/Dashboard/TopBar/SearchBar/SearchBar';
-import { MenuIconButton } from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenuButton/MenuButton';
-import { faBell } from '@fortawesome/free-solid-svg-icons';
-import CreateButton from '../../Components/CreateButton';
-import HelpButton from '../../Components/HelpButton';
-import UserProfileButton from '../../Components/UserProfile/UserProfileButton';
+import CreateButton from './CreateButton';
+import HelpButton from './HelpButton';
+import UserProfileButton from './UserProfileButton';
 import React, { FunctionComponent } from 'react';
+import NotificationButton from './NotificationButton';
 
 const TopBarComponent: FunctionComponent = () => {
     return (
@@ -16,7 +15,7 @@ const TopBarComponent: FunctionComponent = () => {
             rightContent={[
                 <CreateButton key={1} />,
                 <HelpButton key={2} />,
-                <MenuIconButton key={3} icon={faBell} />,
+                <NotificationButton key={3} />,
                 <UserProfileButton key={4} />,
             ]}
         />
diff --git a/Dashboard/src/Components/TopBar/UserProfileButton.tsx b/Dashboard/src/Components/TopBar/UserProfileButton.tsx
new file mode 100644
index 0000000000..6d766f59bd
--- /dev/null
+++ b/Dashboard/src/Components/TopBar/UserProfileButton.tsx
@@ -0,0 +1,17 @@
+import React, { ReactElement, FunctionComponent } from 'react';
+import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
+import UserInfo from 'CommonUI/src/Components/Dashboard/TopBar/UserProfile/UserInfo';
+import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
+import IconButton from 'CommonUI/src/Components/Basic/Button/IconButton';
+
+const CreateButton: FunctionComponent = (): ReactElement => {
+    return (
+        <IconButton icon={IconProp.Help}>
+            <UserInfo name="Username" role="Admin" />
+            <MenuItem title="Profile" />
+            <MenuItem title="Log out" />
+        </IconButton>
+    );
+};
+
+export default CreateButton;
diff --git a/Dashboard/src/Components/UserProfile/UserProfileButton.tsx b/Dashboard/src/Components/UserProfile/UserProfileButton.tsx
deleted file mode 100644
index 5e3a9ed954..0000000000
--- a/Dashboard/src/Components/UserProfile/UserProfileButton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, {
-    ReactElement,
-    FunctionComponent,
-    useState,
-    MouseEventHandler,
-} from 'react';
-import TopbarMenu from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/TopbarMenu';
-import MenuLinkItem from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenu/MenuLinkItem';
-import { MenuIconButton } from 'CommonUI/src/Components/Dashboard/TopBar/TopbarMenuButton/MenuButton';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
-import UserInfo from './UserInfo';
-
-const UserProfileButton: FunctionComponent = (): ReactElement => {
-    const [showProfile, setShowProfile] = useState(false);
-    const toggle: Function = () => {
-        return setShowProfile(!showProfile);
-    };
-
-    return (
-        <MenuIconButton
-            icon={faUser}
-            showModal={showProfile}
-            onClick={toggle as MouseEventHandler}
-            modalContent={
-                <TopbarMenu
-                    items={[
-                        <UserInfo
-                            name="Caleb Okpara"
-                            role="Administrator"
-                            key={1}
-                        />,
-                        <MenuLinkItem text="Profile" key={2} />,
-                        <MenuLinkItem text="Sign out" key={3} />,
-                    ]}
-                />
-            }
-        />
-    );
-};
-
-export default UserProfileButton;

From bddc811d09d1b26a270f58cc15100a40a8f132f1 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sun, 12 Jun 2022 14:08:57 +0100
Subject: [PATCH 2/7] fix lint

---
 .../Basic/Button/MenuButton/MenuItem.tsx         | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/MenuItem.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/MenuItem.tsx
index 78e09fd0a9..fa5f62ff8f 100644
--- a/CommonUI/src/Components/Basic/Button/MenuButton/MenuItem.tsx
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/MenuItem.tsx
@@ -15,13 +15,19 @@ export interface ComponentProps {
 const MenuItem: FunctionComponent<ComponentProps> = ({
     onClick,
     title,
-    route
+    route,
 }: ComponentProps): ReactElement => {
     return (
-        <div className="dropdownButtonListItem" onClick={route ? () => {
-            Navigation.navigate(route);
-        } : onClick
-        }>
+        <div
+            className="dropdownButtonListItem"
+            onClick={
+                route
+                    ? () => {
+                          Navigation.navigate(route);
+                      }
+                    : onClick
+            }
+        >
             {title}
         </div>
     );

From 28ae20dec3e4582ae3baf8b0518315bae1e50d98 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sun, 12 Jun 2022 14:20:15 +0100
Subject: [PATCH 3/7] fix font awesome icons

---
 .../Components/Basic/Button/IconButton.tsx    | 29 ---------------
 .../Basic/Button/MenuButton/IconButton.tsx    | 37 +++++++++++++++++++
 CommonUI/src/Components/Basic/Icon/Icon.tsx   | 12 +++---
 .../src/Components/TopBar/HelpButton.tsx      |  2 +-
 .../Components/TopBar/NotificationButton.tsx  |  2 +-
 .../Components/TopBar/UserProfileButton.tsx   |  2 +-
 6 files changed, 46 insertions(+), 38 deletions(-)
 delete mode 100644 CommonUI/src/Components/Basic/Button/IconButton.tsx
 create mode 100644 CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx

diff --git a/CommonUI/src/Components/Basic/Button/IconButton.tsx b/CommonUI/src/Components/Basic/Button/IconButton.tsx
deleted file mode 100644
index 9648e4d7ff..0000000000
--- a/CommonUI/src/Components/Basic/Button/IconButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, {
-    ReactElement,
-    MouseEventHandler,
-    FunctionComponent,
-} from 'react';
-import Icon, { IconProp } from '../Icon/Icon';
-
-export interface ComponentProps {
-    icon?: IconProp;
-    onClick?: MouseEventHandler;
-    children: ReactElement | Array<ReactElement>;
-}
-
-const IconButton: FunctionComponent<ComponentProps> = ({
-    icon,
-    onClick,
-    children,
-}: ComponentProps): ReactElement => {
-    return (
-        <div className="buttonLayout">
-            <div className="iconButton" onClick={onClick}>
-                {icon && <Icon icon={icon} />}
-            </div>
-            <div className="dropdownButtonLists">{children}</div>
-        </div>
-    );
-};
-
-export default IconButton;
diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
new file mode 100644
index 0000000000..d6e0937b33
--- /dev/null
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
@@ -0,0 +1,37 @@
+import React, {
+    ReactElement,
+    FunctionComponent,
+} from 'react';
+import useComponentOutsideClick from '../../../../Types/UseComponentOutsideClick';
+import Icon, { IconProp } from '../../Icon/Icon';
+
+export interface ComponentProps {
+    icon?: IconProp;
+    onClick?: Function;
+    children: ReactElement | Array<ReactElement>;
+}
+
+const IconButton: FunctionComponent<ComponentProps> = ({
+    icon,
+    onClick,
+    children,
+}: ComponentProps): ReactElement => {
+
+    const { ref, isComponentVisible, setIsComponentVisible } =
+    useComponentOutsideClick(false);
+    return (
+        <div className="buttonLayout">
+            <div className="iconButton" ref={ref} onClick={() => {
+                setIsComponentVisible(!isComponentVisible);
+                if (onClick) {
+                    onClick();
+                }
+            }}>
+                {icon && <Icon icon={icon} />}
+            </div>
+            {isComponentVisible && <div className="dropdownButtonLists">{children}</div>}
+        </div>
+    );
+};
+
+export default IconButton;
diff --git a/CommonUI/src/Components/Basic/Icon/Icon.tsx b/CommonUI/src/Components/Basic/Icon/Icon.tsx
index 525acc1292..e9af44397d 100644
--- a/CommonUI/src/Components/Basic/Icon/Icon.tsx
+++ b/CommonUI/src/Components/Basic/Icon/Icon.tsx
@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactElement } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 
 export enum SizeProp {
     ExtraSmall = 'xs',
@@ -10,11 +10,11 @@ export enum SizeProp {
 }
 
 export enum IconProp {
-    File = 'file',
-    User = 'user',
-    Settings = 'cog',
-    Notification = 'bell',
-    Help = 'question',
+    File = 'fa-file',
+    User = 'fa-user',
+    Settings = 'fa-cog',
+    Notification = 'fa-bell',
+    Help = 'fa-circle-question',
 }
 
 export interface ComponentProps {
diff --git a/Dashboard/src/Components/TopBar/HelpButton.tsx b/Dashboard/src/Components/TopBar/HelpButton.tsx
index 1b0505123b..246a613d15 100644
--- a/Dashboard/src/Components/TopBar/HelpButton.tsx
+++ b/Dashboard/src/Components/TopBar/HelpButton.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, FunctionComponent } from 'react';
 import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
 import MenuLegend from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend';
-import IconButton from 'CommonUI/src/Components/Basic/Button/IconButton';
+import IconButton from 'CommonUI/src/Components/Basic/Button/MenuButton/IconButton';
 import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
 
 const CreateButton: FunctionComponent = (): ReactElement => {
diff --git a/Dashboard/src/Components/TopBar/NotificationButton.tsx b/Dashboard/src/Components/TopBar/NotificationButton.tsx
index 45ef12ab20..eb87373562 100644
--- a/Dashboard/src/Components/TopBar/NotificationButton.tsx
+++ b/Dashboard/src/Components/TopBar/NotificationButton.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, FunctionComponent } from 'react';
 import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
 import MenuLegend from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend';
-import IconButton from 'CommonUI/src/Components/Basic/Button/IconButton';
+import IconButton from 'CommonUI/src/Components/Basic/Button/MenuButton/IconButton';
 import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
 
 const NotificationButton: FunctionComponent = (): ReactElement => {
diff --git a/Dashboard/src/Components/TopBar/UserProfileButton.tsx b/Dashboard/src/Components/TopBar/UserProfileButton.tsx
index 6d766f59bd..dbcb4fba80 100644
--- a/Dashboard/src/Components/TopBar/UserProfileButton.tsx
+++ b/Dashboard/src/Components/TopBar/UserProfileButton.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, FunctionComponent } from 'react';
 import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
 import UserInfo from 'CommonUI/src/Components/Dashboard/TopBar/UserProfile/UserInfo';
 import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
-import IconButton from 'CommonUI/src/Components/Basic/Button/IconButton';
+import IconButton from 'CommonUI/src/Components/Basic/Button/MenuButton/IconButton';
 
 const CreateButton: FunctionComponent = (): ReactElement => {
     return (

From a12d16b2a1f032e692f98244fc9933650f378659 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sun, 12 Jun 2022 20:40:59 +0100
Subject: [PATCH 4/7] add icons

---
 CommonUI/package-lock.json                    | 26 ++++++---
 CommonUI/package.json                         |  6 +--
 .../Basic/Button/MenuButton/IconButton.tsx    |  6 ++-
 CommonUI/src/Components/Basic/Icon/Icon.tsx   | 53 ++++++++++++++-----
 CommonUI/src/Styles/BrandColors.scss          |  2 +
 .../Components/ProjectPicker/ProjectItem.tsx  |  1 -
 .../src/Components/TopBar/HelpButton.tsx      |  4 +-
 .../Components/TopBar/NotificationButton.tsx  |  4 +-
 .../Components/TopBar/UserProfileButton.tsx   |  4 +-
 9 files changed, 73 insertions(+), 33 deletions(-)
 create mode 100644 CommonUI/src/Styles/BrandColors.scss

diff --git a/CommonUI/package-lock.json b/CommonUI/package-lock.json
index bef706ed48..5889a67da5 100644
--- a/CommonUI/package-lock.json
+++ b/CommonUI/package-lock.json
@@ -9,9 +9,9 @@
             "version": "1.0.0",
             "license": "MIT",
             "dependencies": {
-                "@fortawesome/fontawesome-svg-core": "^6.1.0",
-                "@fortawesome/free-regular-svg-icons": "^6.1.0",
-                "@fortawesome/free-solid-svg-icons": "^6.1.0",
+                "@fortawesome/fontawesome-svg-core": "^6.1.1",
+                "@fortawesome/free-regular-svg-icons": "^6.1.1",
+                "@fortawesome/free-solid-svg-icons": "^6.1.1",
                 "@fortawesome/react-fontawesome": "^0.1.18",
                 "bootstrap": "^5.2.0-beta1",
                 "Common": "file:../Common",
@@ -4652,8 +4652,9 @@
         },
         "node_modules/@fortawesome/fontawesome-svg-core": {
             "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+            "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
             "hasInstallScript": true,
-            "license": "MIT",
             "dependencies": {
                 "@fortawesome/fontawesome-common-types": "6.1.1"
             },
@@ -4663,8 +4664,9 @@
         },
         "node_modules/@fortawesome/free-regular-svg-icons": {
             "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
+            "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
             "hasInstallScript": true,
-            "license": "(CC-BY-4.0 AND MIT)",
             "dependencies": {
                 "@fortawesome/fontawesome-common-types": "6.1.1"
             },
@@ -4674,8 +4676,9 @@
         },
         "node_modules/@fortawesome/free-solid-svg-icons": {
             "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+            "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
             "hasInstallScript": true,
-            "license": "(CC-BY-4.0 AND MIT)",
             "dependencies": {
                 "@fortawesome/fontawesome-common-types": "6.1.1"
             },
@@ -4685,7 +4688,8 @@
         },
         "node_modules/@fortawesome/react-fontawesome": {
             "version": "0.1.18",
-            "license": "MIT",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+            "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
             "dependencies": {
                 "prop-types": "^15.8.1"
             },
@@ -5812,24 +5816,32 @@
         },
         "@fortawesome/fontawesome-svg-core": {
             "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.1.1.tgz",
+            "integrity": "sha512-NCg0w2YIp81f4V6cMGD9iomfsIj7GWrqmsa0ZsPh59G7PKiGN1KymZNxmF00ssuAlo/VZmpK6xazsGOwzKYUMg==",
             "requires": {
                 "@fortawesome/fontawesome-common-types": "6.1.1"
             }
         },
         "@fortawesome/free-regular-svg-icons": {
             "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.1.1.tgz",
+            "integrity": "sha512-xXiW7hcpgwmWtndKPOzG+43fPH7ZjxOaoeyooptSztGmJxCAflHZxXNK0GcT0uEsR4jTGQAfGklDZE5NHoBhKg==",
             "requires": {
                 "@fortawesome/fontawesome-common-types": "6.1.1"
             }
         },
         "@fortawesome/free-solid-svg-icons": {
             "version": "6.1.1",
+            "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.1.1.tgz",
+            "integrity": "sha512-0/5exxavOhI/D4Ovm2r3vxNojGZioPwmFrKg0ZUH69Q68uFhFPs6+dhAToh6VEQBntxPRYPuT5Cg1tpNa9JUPg==",
             "requires": {
                 "@fortawesome/fontawesome-common-types": "6.1.1"
             }
         },
         "@fortawesome/react-fontawesome": {
             "version": "0.1.18",
+            "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.18.tgz",
+            "integrity": "sha512-RwLIB4TZw0M9gvy5u+TusAA0afbwM4JQIimNH/j3ygd6aIvYPQLqXMhC9ErY26J23rDPyDZldIfPq/HpTTJ/tQ==",
             "requires": {
                 "prop-types": "^15.8.1"
             }
diff --git a/CommonUI/package.json b/CommonUI/package.json
index 982e56b2b7..41f95f6392 100644
--- a/CommonUI/package.json
+++ b/CommonUI/package.json
@@ -11,9 +11,9 @@
     "license": "MIT",
     "type": "module",
     "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.1.0",
-        "@fortawesome/free-regular-svg-icons": "^6.1.0",
-        "@fortawesome/free-solid-svg-icons": "^6.1.0",
+        "@fortawesome/fontawesome-svg-core": "^6.1.1",
+        "@fortawesome/free-regular-svg-icons": "^6.1.1",
+        "@fortawesome/free-solid-svg-icons": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
         "bootstrap": "^5.2.0-beta1",
         "Common": "file:../Common",
diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
index d6e0937b33..38c034d3e4 100644
--- a/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
@@ -3,18 +3,20 @@ import React, {
     FunctionComponent,
 } from 'react';
 import useComponentOutsideClick from '../../../../Types/UseComponentOutsideClick';
-import Icon, { IconProp } from '../../Icon/Icon';
+import Icon, { IconProp, SizeProp } from '../../Icon/Icon';
 
 export interface ComponentProps {
     icon?: IconProp;
     onClick?: Function;
     children: ReactElement | Array<ReactElement>;
+    size?: SizeProp
 }
 
 const IconButton: FunctionComponent<ComponentProps> = ({
     icon,
     onClick,
     children,
+    size
 }: ComponentProps): ReactElement => {
 
     const { ref, isComponentVisible, setIsComponentVisible } =
@@ -27,7 +29,7 @@ const IconButton: FunctionComponent<ComponentProps> = ({
                     onClick();
                 }
             }}>
-                {icon && <Icon icon={icon} />}
+                {icon && <Icon icon={icon} size={size ? size : SizeProp.Regular} />}
             </div>
             {isComponentVisible && <div className="dropdownButtonLists">{children}</div>}
         </div>
diff --git a/CommonUI/src/Components/Basic/Icon/Icon.tsx b/CommonUI/src/Components/Basic/Icon/Icon.tsx
index e9af44397d..6576c285f1 100644
--- a/CommonUI/src/Components/Basic/Icon/Icon.tsx
+++ b/CommonUI/src/Components/Basic/Icon/Icon.tsx
@@ -1,20 +1,37 @@
 import React, { FunctionComponent, ReactElement } from 'react';
-import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+    faCircleQuestion,
+    faUser,
+    faCog,
+    faBell,
+    faFile,
+    IconDefinition
+} from '@fortawesome/free-solid-svg-icons';
+import Dictionary from 'Common/Types/Dictionary';
 
 export enum SizeProp {
-    ExtraSmall = 'xs',
-    Small = 'sm',
-    Regular = '1x',
-    Large = 'lg',
-    ExtraLarge = '3x',
+    ExtraSmall = '8px',
+    Small = '12px',
+    Regular = '15px',
+    Large = '18px',
+    ExtraLarge = '25px',
 }
 
 export enum IconProp {
-    File = 'fa-file',
-    User = 'fa-user',
-    Settings = 'fa-cog',
-    Notification = 'fa-bell',
-    Help = 'fa-circle-question',
+    File = 'File',
+    User = 'User',
+    Settings = 'Settings',
+    Notification = 'Notifications',
+    Help = 'Help',
+}
+
+const IconDictionary: Dictionary<IconDefinition> = {
+    [IconProp.Help]: faCircleQuestion,
+    [IconProp.User]: faUser,
+    [IconProp.Notification]: faBell,
+    [IconProp.Settings]: faCog,
+    [IconProp.File]: faFile
 }
 
 export interface ComponentProps {
@@ -23,12 +40,20 @@ export interface ComponentProps {
 }
 
 const Icon: FunctionComponent<ComponentProps> = ({
-    icon,
     size = SizeProp.Regular,
+    icon
 }: ComponentProps): ReactElement => {
     return (
-        <span>
-            <FontAwesomeIcon icon={icon} size={size} />
+        <span style={ 
+            {
+                cursor: "pointer"
+            }
+        }>
+            <FontAwesomeIcon icon={IconDictionary[icon] as IconDefinition} style={ 
+                {
+                    fontSize: size
+                }
+            } />
         </span>
     );
 };
diff --git a/CommonUI/src/Styles/BrandColors.scss b/CommonUI/src/Styles/BrandColors.scss
new file mode 100644
index 0000000000..7d6283ac5d
--- /dev/null
+++ b/CommonUI/src/Styles/BrandColors.scss
@@ -0,0 +1,2 @@
+$color-black: #000000;
+$color-white: #ffffff;
diff --git a/Dashboard/src/Components/ProjectPicker/ProjectItem.tsx b/Dashboard/src/Components/ProjectPicker/ProjectItem.tsx
index 8851a51fb6..d33b1cfd3f 100644
--- a/Dashboard/src/Components/ProjectPicker/ProjectItem.tsx
+++ b/Dashboard/src/Components/ProjectPicker/ProjectItem.tsx
@@ -7,7 +7,6 @@ const SingleProject: FunctionComponent = (): ReactElement => {
                 <img src="/img/placeholder.png" alt="Project Image" />
                 <p>Project name</p>
             </div>
-            <span>Edit</span>
         </div>
     );
 };
diff --git a/Dashboard/src/Components/TopBar/HelpButton.tsx b/Dashboard/src/Components/TopBar/HelpButton.tsx
index 246a613d15..054388bbc3 100644
--- a/Dashboard/src/Components/TopBar/HelpButton.tsx
+++ b/Dashboard/src/Components/TopBar/HelpButton.tsx
@@ -2,11 +2,11 @@ import React, { ReactElement, FunctionComponent } from 'react';
 import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
 import MenuLegend from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend';
 import IconButton from 'CommonUI/src/Components/Basic/Button/MenuButton/IconButton';
-import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
+import { IconProp, SizeProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
 
 const CreateButton: FunctionComponent = (): ReactElement => {
     return (
-        <IconButton icon={IconProp.Help}>
+        <IconButton icon={IconProp.Help} size={SizeProp.Large}>
             <MenuLegend title="Basic" />
             <MenuItem title="Monitors" />
             <MenuItem title="Incident" />
diff --git a/Dashboard/src/Components/TopBar/NotificationButton.tsx b/Dashboard/src/Components/TopBar/NotificationButton.tsx
index eb87373562..afa7e32ec5 100644
--- a/Dashboard/src/Components/TopBar/NotificationButton.tsx
+++ b/Dashboard/src/Components/TopBar/NotificationButton.tsx
@@ -2,11 +2,11 @@ import React, { ReactElement, FunctionComponent } from 'react';
 import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
 import MenuLegend from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend';
 import IconButton from 'CommonUI/src/Components/Basic/Button/MenuButton/IconButton';
-import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
+import { IconProp, SizeProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
 
 const NotificationButton: FunctionComponent = (): ReactElement => {
     return (
-        <IconButton icon={IconProp.Notification}>
+        <IconButton icon={IconProp.Notification} size={SizeProp.Large}>
             <MenuLegend title={'Basic'} />
             <MenuItem title="Monitors" />
             <MenuItem title="Incident" />
diff --git a/Dashboard/src/Components/TopBar/UserProfileButton.tsx b/Dashboard/src/Components/TopBar/UserProfileButton.tsx
index dbcb4fba80..5c12368aeb 100644
--- a/Dashboard/src/Components/TopBar/UserProfileButton.tsx
+++ b/Dashboard/src/Components/TopBar/UserProfileButton.tsx
@@ -1,12 +1,12 @@
 import React, { ReactElement, FunctionComponent } from 'react';
 import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
 import UserInfo from 'CommonUI/src/Components/Dashboard/TopBar/UserProfile/UserInfo';
-import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
+import { IconProp, SizeProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
 import IconButton from 'CommonUI/src/Components/Basic/Button/MenuButton/IconButton';
 
 const CreateButton: FunctionComponent = (): ReactElement => {
     return (
-        <IconButton icon={IconProp.Help}>
+        <IconButton icon={IconProp.User} size={SizeProp.Large}>
             <UserInfo name="Username" role="Admin" />
             <MenuItem title="Profile" />
             <MenuItem title="Log out" />

From 9aee8c98fa791f86f3b37fa57f4575c257cd1e9a Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sun, 12 Jun 2022 21:55:17 +0100
Subject: [PATCH 5/7] refactor css

---
 .../src/Components/Basic/Button/Button.tsx    |  43 ++++++-
 .../Basic/Button/MenuButton/IconButton.scss   |  11 ++
 .../Basic/Button/MenuButton/IconButton.tsx    |  37 +++---
 .../Basic/Button/MenuButton/MenuButton.tsx    |  10 +-
 .../Basic/Button/TopbarMenu/MenuItem.scss     |  54 --------
 .../Basic/Button/TopbarMenu/MenuItem.tsx      |  41 ------
 .../Basic/Button/TopbarMenu/MenuLink.scss     |  68 ----------
 .../Basic/Button/TopbarMenu/MenuLinkItem.tsx  |  26 ----
 .../Basic/Button/TopbarMenu/TopbarMenu.tsx    |  25 ----
 .../Button/TopbarMenuButton/MenuButton.scss   | 117 ------------------
 .../Button/TopbarMenuButton/MenuButton.tsx    |  79 ------------
 CommonUI/src/Components/Basic/Icon/Icon.tsx   |  36 +++---
 .../TopBar/MenuButton/MenuButton.scss         |   9 ++
 .../TopBar/MenuButton/MenuButton.tsx          |  30 +++++
 .../Components/Dashboard/TopBar/TopBar.scss   |   2 +-
 CommonUI/src/Styles/BrandColors.scss          |   8 ++
 .../src/Components/ProjectPicker/Project.scss |  14 +--
 .../src/Components/TopBar/CreateButton.tsx    |   2 +-
 18 files changed, 161 insertions(+), 451 deletions(-)
 create mode 100644 CommonUI/src/Components/Basic/Button/MenuButton/IconButton.scss
 delete mode 100644 CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.scss
 delete mode 100644 CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.tsx
 delete mode 100644 CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLink.scss
 delete mode 100644 CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLinkItem.tsx
 delete mode 100644 CommonUI/src/Components/Basic/Button/TopbarMenu/TopbarMenu.tsx
 delete mode 100644 CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.scss
 delete mode 100644 CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.tsx
 create mode 100644 CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton.scss
 create mode 100644 CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton.tsx

diff --git a/CommonUI/src/Components/Basic/Button/Button.tsx b/CommonUI/src/Components/Basic/Button/Button.tsx
index e36477bba3..aa062a075b 100644
--- a/CommonUI/src/Components/Basic/Button/Button.tsx
+++ b/CommonUI/src/Components/Basic/Button/Button.tsx
@@ -2,6 +2,8 @@ import React, { FunctionComponent, ReactElement, useEffect } from 'react';
 import { MouseOnClick, KeyboardEventProp } from '../../../Types/HtmlEvents';
 import ShortcutKey from '../ShortcutKey/ShortcutKey';
 import ButtonType from './ButtonTypes';
+import CSS from 'csstype';
+import Icon, { IconProp, SizeProp } from '../Icon/Icon';
 
 export interface ComponentProps {
     title: string;
@@ -11,6 +13,10 @@ export interface ComponentProps {
     shortcutKey?: ShortcutKey;
     type?: ButtonType;
     isLoading?: boolean;
+    style?: CSS.Properties;
+    icon?: IconProp;
+    showIconOnRight?: boolean;
+    iconSize?: SizeProp;
 }
 
 const Button: FunctionComponent<ComponentProps> = ({
@@ -21,6 +27,10 @@ const Button: FunctionComponent<ComponentProps> = ({
     shortcutKey,
     type = ButtonType.Button,
     isLoading = false,
+    style,
+    icon,
+    iconSize,
+    showIconOnRight = false,
 }: ComponentProps): ReactElement => {
     useEffect(() => {
         // componentDidMount
@@ -61,14 +71,45 @@ const Button: FunctionComponent<ComponentProps> = ({
     };
 
     return (
-        <button id={id} onClick={onClick} type={type} disabled={disabled}>
+        <button
+            style={style}
+            id={id}
+            onClick={onClick}
+            type={type}
+            disabled={disabled}
+            className="button"
+        >
             {!isLoading && (
                 <div>
                     <div>
                         <div></div>
                     </div>
                     <span>
+                        <span>
+                            {icon && !showIconOnRight && (
+                                <Icon
+                                    icon={icon}
+                                    size={
+                                        iconSize ? iconSize : SizeProp.Regular
+                                    }
+                                />
+                            )}
+                        </span>
                         <span>{title}</span>
+                        <span
+                            style={{
+                                marginLeft: '5px',
+                            }}
+                        >
+                            {icon && showIconOnRight && (
+                                <Icon
+                                    icon={icon}
+                                    size={
+                                        iconSize ? iconSize : SizeProp.Regular
+                                    }
+                                />
+                            )}
+                        </span>
                         {shortcutKey && (
                             <span className="newButtonKeycode">
                                 {shortcutKey}
diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.scss b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.scss
new file mode 100644
index 0000000000..fb7968722e
--- /dev/null
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.scss
@@ -0,0 +1,11 @@
+
+@use '../../../../Styles/BrandColors.scss';
+
+.icon {
+
+    color: BrandColors.$color-grey !important;
+
+    &:hover {
+        color: BrandColors.$color-black !important;
+    }   
+}
\ No newline at end of file
diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
index 38c034d3e4..2eb448bbaa 100644
--- a/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
@@ -1,37 +1,42 @@
-import React, {
-    ReactElement,
-    FunctionComponent,
-} from 'react';
+import React, { ReactElement, FunctionComponent } from 'react';
 import useComponentOutsideClick from '../../../../Types/UseComponentOutsideClick';
 import Icon, { IconProp, SizeProp } from '../../Icon/Icon';
+import './IconButton.scss'
 
 export interface ComponentProps {
     icon?: IconProp;
     onClick?: Function;
     children: ReactElement | Array<ReactElement>;
-    size?: SizeProp
+    size?: SizeProp;
 }
 
 const IconButton: FunctionComponent<ComponentProps> = ({
     icon,
     onClick,
     children,
-    size
+    size,
 }: ComponentProps): ReactElement => {
-
     const { ref, isComponentVisible, setIsComponentVisible } =
-    useComponentOutsideClick(false);
+        useComponentOutsideClick(false);
     return (
         <div className="buttonLayout">
-            <div className="iconButton" ref={ref} onClick={() => {
-                setIsComponentVisible(!isComponentVisible);
-                if (onClick) {
-                    onClick();
-                }
-            }}>
-                {icon && <Icon icon={icon} size={size ? size : SizeProp.Regular} />}
+            <div
+                className="iconButton"
+                ref={ref}
+                onClick={() => {
+                    setIsComponentVisible(!isComponentVisible);
+                    if (onClick) {
+                        onClick();
+                    }
+                }}
+            >
+                {icon && (
+                    <Icon className="icon" icon={icon} size={size ? size : SizeProp.Regular} />
+                )}
             </div>
-            {isComponentVisible && <div className="dropdownButtonLists">{children}</div>}
+            {isComponentVisible && (
+                <div className="dropdownButtonLists">{children}</div>
+            )}
         </div>
     );
 };
diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.tsx
index dece380b82..3b3e493e53 100644
--- a/CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.tsx
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/MenuButton.tsx
@@ -2,15 +2,19 @@ import React, { ReactElement, FunctionComponent } from 'react';
 import './MenuButton.scss';
 import Button from '../Button';
 import useComponentOutsideClick from '../../../../Types/UseComponentOutsideClick';
+import CSS from 'csstype';
+import { IconProp, SizeProp } from '../../Icon/Icon';
 
 export interface ComponentProps {
-    children?: ReactElement | Array<ReactElement>;
+    children: ReactElement | Array<ReactElement>;
     title: string;
+    style?: CSS.Properties;
 }
 
 const MenuButton: FunctionComponent<ComponentProps> = ({
     title,
     children,
+    style,
 }: ComponentProps): ReactElement => {
     const { ref, isComponentVisible, setIsComponentVisible } =
         useComponentOutsideClick(false);
@@ -22,6 +26,10 @@ const MenuButton: FunctionComponent<ComponentProps> = ({
                 onClick={() => {
                     setIsComponentVisible(true);
                 }}
+                style={style ? style : {}}
+                icon={IconProp.ChevronDown}
+                showIconOnRight={true}
+                iconSize={SizeProp.Small}
             />
 
             {isComponentVisible && (
diff --git a/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.scss b/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.scss
deleted file mode 100644
index 72db365e1a..0000000000
--- a/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-$primaryColor: rgb(246, 248, 250);
-$lightDark: #888;
-$dark: #333;
-$transition: all 0.1s ease;
-
-.legend {
-    font-size: 1.3rem;
-    font-weight: 400;
-    text-transform: uppercase;
-    padding: 0 15px;
-    color: #888;
-}
-
-.menu-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 2px 0;
-    cursor: pointer;
-
-    &:hover {
-        background-color: $primaryColor;
-    }
-
-    div {
-        padding: 0 15px;
-        display: flex;
-        align-items: center;
-
-        & > * {
-            padding-right: 10px;
-        }
-
-        svg {
-            font-size: 1.1rem !important;
-        }
-
-        p {
-            padding: 0;
-            margin: 0;
-            font-size: 1.4rem !important;
-        }
-
-        code {
-            display: block;
-            color: #999;
-            background-color: lighten($dark, 75%);
-            padding: 0 5px;
-            margin: 0 1px;
-            border-radius: 2px;
-            font-size: 1.3rem;
-        }
-    }
-}
diff --git a/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.tsx b/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.tsx
deleted file mode 100644
index fcecd36138..0000000000
--- a/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuItem.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, {
-    ReactElement,
-    MouseEventHandler,
-    FunctionComponent,
-} from 'react';
-import Shortcut from '../../../Basic/ShortcutKey/Shortcut';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import Char from 'Common/Types/Char';
-
-import './MenuItem.scss';
-
-export interface ComponentProps {
-    text: string;
-    icon?: IconProp;
-    shortcuts?: Array<Char>;
-    action?: MouseEventHandler;
-}
-
-const MenuItem: FunctionComponent<ComponentProps> = ({
-    text,
-    icon,
-    shortcuts,
-    action,
-}: ComponentProps): ReactElement => {
-    return (
-        <div onClick={action} className="menu-item">
-            <div className="name">
-                {icon && <FontAwesomeIcon icon={icon} />}
-                <p>{text}</p>
-            </div>
-            {shortcuts && (
-                <div className="shortcut">
-                    <Shortcut shortcuts={shortcuts} />
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default MenuItem;
diff --git a/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLink.scss b/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLink.scss
deleted file mode 100644
index b40fa00e00..0000000000
--- a/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLink.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-$primaryColor: rgb(246, 248, 250);
-$lightDark: #888;
-$dark: #333;
-$black: black;
-$transition: all 0.1s ease;
-
-.legend {
-    font-size: 1.3rem;
-    font-weight: 400;
-    text-transform: uppercase;
-    padding: 0 15px;
-    margin: 0;
-    margin-bottom: 3px;
-    color: #888;
-}
-
-.menu-link {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0;
-    cursor: pointer;
-
-    &:hover {
-        background-color: $primaryColor;
-    }
-
-    div {
-        padding: 0 15px;
-        display: flex;
-        align-items: center;
-        font-size: 1.3rem;
-        transition: color 0.2s linear;
-
-        & > * {
-            padding-right: 10px;
-        }
-
-        svg {
-            font-size: 1.3rem;
-            font-weight: 700;
-            color: $black;
-        }
-
-        p {
-            font-weight: 500;
-            padding: 5px 0;
-            margin: 0;
-            font-size: 1.5rem;
-            color: $black;
-            padding-right: 7px;
-        }
-
-        &:hover > svg {
-            color: $dark;
-        }
-    }
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
diff --git a/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLinkItem.tsx b/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLinkItem.tsx
deleted file mode 100644
index f95940bcc6..0000000000
--- a/CommonUI/src/Components/Basic/Button/TopbarMenu/MenuLinkItem.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React, { ReactElement, FunctionComponent } from 'react';
-import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import './MenuLink.scss';
-
-export interface ComponentProps {
-    text: string;
-    openInNewTab?: boolean;
-}
-
-const MenuLinkItem: FunctionComponent<ComponentProps> = ({
-    text,
-    openInNewTab,
-}: ComponentProps): ReactElement => {
-    return (
-        <div className="menu-link">
-            <div className="name">
-                <p>{text}</p>
-                {openInNewTab && <FontAwesomeIcon icon={faUpRightFromSquare} />}
-            </div>
-        </div>
-    );
-};
-
-export default MenuLinkItem;
diff --git a/CommonUI/src/Components/Basic/Button/TopbarMenu/TopbarMenu.tsx b/CommonUI/src/Components/Basic/Button/TopbarMenu/TopbarMenu.tsx
deleted file mode 100644
index d15f90e993..0000000000
--- a/CommonUI/src/Components/Basic/Button/TopbarMenu/TopbarMenu.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { ReactElement, FunctionComponent } from 'react';
-import './MenuItem.tsx';
-
-export interface ComponentProps {
-    legend?: string;
-    items: Array<ReactElement>;
-}
-
-const TopbarMenu: FunctionComponent<ComponentProps> = ({
-    legend,
-    items,
-}: ComponentProps): ReactElement => {
-    return (
-        <div className="lists">
-            <p className="legend">{legend}</p>
-            <>
-                {items.map((item: ReactElement, index: number) => {
-                    return <React.Fragment key={index}>{item}</React.Fragment>;
-                })}
-            </>
-        </div>
-    );
-};
-
-export default TopbarMenu;
diff --git a/CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.scss b/CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.scss
deleted file mode 100644
index 95b688e22c..0000000000
--- a/CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.scss
+++ /dev/null
@@ -1,117 +0,0 @@
-$primaryColor: rgb(246, 248, 250);
-$lightDark: #000;
-$dark: #000;
-$transition: all 0.1s ease;
-
-.buttonLayout {
-    user-select: none;
-    position: relative;
-
-    .iconButton {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        cursor: pointer;
-
-        svg {
-            color: #000;
-            font-size: 1.6rem;
-        }
-    }
-
-    .button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-weight: 300;
-        font-size: 1.3rem;
-        outline: 1px solid $lightDark;
-        color: $lightDark;
-        border-radius: 100px;
-        padding: 3px 15px;
-        cursor: pointer;
-        transition: $transition;
-
-        svg {
-            color: #000;
-            font-size: 1.2rem;
-            padding-left: 5px;
-        }
-
-        &:hover {
-            outline: 1px solid $dark;
-            color: white;
-            background-color: $dark;
-        }
-
-        &:hover > svg {
-            color: white;
-        }
-    }
-
-    .menuButton {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 1.3rem;
-        font-weight: 300;
-        cursor: pointer;
-        outline: none !important;
-
-        svg {
-            padding-right: 2px;
-            font-size: 1.9rem;
-        }
-
-        &:hover {
-            outline: none !important;
-        }
-    }
-
-    .buttonModal {
-        position: absolute;
-        top: 35px;
-        right: -4px;
-        padding: 10px 5px;
-        min-width: 225px;
-        width: max-content;
-        max-width: max-content;
-        height: fit-content;
-        background-color: white;
-        border-radius: 7px;
-        box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);
-        color: darken($primaryColor, 70%);
-        animation: fadeIn 0.2s linear;
-        z-index: 20;
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: -7px;
-            right: 3px;
-            width: 15px;
-            height: 10px;
-            background-color: white;
-            box-shadow: -1px -30px 10px rgba(0, 0, 0, 0.6);
-            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-        }
-
-        .modal-text {
-            padding: 0 10px;
-        }
-
-        .text {
-            font-size: 1.2rem;
-        }
-    }
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
diff --git a/CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.tsx b/CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.tsx
deleted file mode 100644
index 8f1c494493..0000000000
--- a/CommonUI/src/Components/Basic/Button/TopbarMenuButton/MenuButton.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import React, {
-    ReactElement,
-    MouseEventHandler,
-    FunctionComponent,
-} from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-
-import './MenuButton.scss';
-
-export interface MenuIconButtonComponentProps {
-    icon?: IconProp;
-    onClick?: MouseEventHandler;
-    modalContent?: ReactElement;
-    showModal?: boolean;
-}
-
-export interface MenuOutlineButtonComponentProps
-    extends MenuIconButtonComponentProps {
-    text?: string;
-}
-
-export const MenuIconButton: FunctionComponent<
-    MenuIconButtonComponentProps
-> = ({
-    icon,
-    onClick,
-    showModal,
-    modalContent,
-}: MenuIconButtonComponentProps): ReactElement => {
-    return (
-        <div className="buttonLayout">
-            <div className="iconButton" onClick={onClick}>
-                {icon && <FontAwesomeIcon icon={icon} />}
-            </div>
-            {showModal && <div className="buttonModal">{modalContent}</div>}
-        </div>
-    );
-};
-
-export const MenuOutlineButton: FunctionComponent<
-    MenuOutlineButtonComponentProps
-> = ({
-    text,
-    icon,
-    onClick,
-    showModal,
-    modalContent,
-}: MenuOutlineButtonComponentProps): ReactElement => {
-    return (
-        <div className="buttonLayout">
-            <div className={`button`} onClick={onClick}>
-                <span>{text}</span>
-                {icon && <FontAwesomeIcon icon={icon} />}
-            </div>
-            {showModal && <div className="buttonModal">{modalContent}</div>}
-        </div>
-    );
-};
-
-const MenuButton: FunctionComponent<MenuOutlineButtonComponentProps> = ({
-    text,
-    icon,
-    onClick,
-    showModal,
-    modalContent,
-}: MenuOutlineButtonComponentProps): ReactElement => {
-    return (
-        <div className="buttonLayout">
-            <div className="menuButton" onClick={onClick}>
-                {icon && <FontAwesomeIcon icon={icon} />}
-                <span>{text}</span>
-            </div>
-            {showModal && <div className="buttonModal">{modalContent}</div>}
-        </div>
-    );
-};
-
-export default MenuButton;
diff --git a/CommonUI/src/Components/Basic/Icon/Icon.tsx b/CommonUI/src/Components/Basic/Icon/Icon.tsx
index 6576c285f1..3c3c75582c 100644
--- a/CommonUI/src/Components/Basic/Icon/Icon.tsx
+++ b/CommonUI/src/Components/Basic/Icon/Icon.tsx
@@ -6,12 +6,14 @@ import {
     faCog,
     faBell,
     faFile,
-    IconDefinition
+    faChevronDown,
+    IconDefinition,
 } from '@fortawesome/free-solid-svg-icons';
 import Dictionary from 'Common/Types/Dictionary';
 
 export enum SizeProp {
     ExtraSmall = '8px',
+    Smaller = '10px',
     Small = '12px',
     Regular = '15px',
     Large = '18px',
@@ -24,6 +26,7 @@ export enum IconProp {
     Settings = 'Settings',
     Notification = 'Notifications',
     Help = 'Help',
+    ChevronDown = 'ChevronDown',
 }
 
 const IconDictionary: Dictionary<IconDefinition> = {
@@ -31,29 +34,34 @@ const IconDictionary: Dictionary<IconDefinition> = {
     [IconProp.User]: faUser,
     [IconProp.Notification]: faBell,
     [IconProp.Settings]: faCog,
-    [IconProp.File]: faFile
-}
+    [IconProp.File]: faFile,
+    [IconProp.ChevronDown]: faChevronDown,
+};
 
 export interface ComponentProps {
     icon: IconProp;
     size?: SizeProp;
+    className?: string
 }
 
 const Icon: FunctionComponent<ComponentProps> = ({
     size = SizeProp.Regular,
-    icon
+    icon,
+    className, 
 }: ComponentProps): ReactElement => {
     return (
-        <span style={ 
-            {
-                cursor: "pointer"
-            }
-        }>
-            <FontAwesomeIcon icon={IconDictionary[icon] as IconDefinition} style={ 
-                {
-                    fontSize: size
-                }
-            } />
+        <span
+            style={{
+                cursor: 'pointer',
+            }}
+            className={className ? className : ''}
+        >
+            <FontAwesomeIcon
+                icon={IconDictionary[icon] as IconDefinition}
+                style={{
+                    fontSize: size,
+                }}
+            />
         </span>
     );
 };
diff --git a/CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton.scss b/CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton.scss
new file mode 100644
index 0000000000..a7b4859ec1
--- /dev/null
+++ b/CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton.scss
@@ -0,0 +1,9 @@
+
+@use '../../../../Styles/BrandColors.scss';
+
+.dropdownButton > .button{
+    &:hover {
+        background: BrandColors.$color-black !important;
+        color: BrandColors.$color-white !important;
+    }
+}
\ No newline at end of file
diff --git a/CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton.tsx b/CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton.tsx
new file mode 100644
index 0000000000..711f007bed
--- /dev/null
+++ b/CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton.tsx
@@ -0,0 +1,30 @@
+import React, { FunctionComponent, ReactElement } from 'react';
+import MenuButton, {
+    ComponentProps,
+} from '../../../Basic/Button/MenuButton/MenuButton';
+import './MenuButton.scss';
+
+const TopBarMenyuButton: FunctionComponent<ComponentProps> = (
+    props: ComponentProps
+): ReactElement => {
+    return (
+        <MenuButton
+            style={{
+                fontSize: '13px',
+                borderColor: 'black',
+                borderStyle: 'solid',
+                borderRadius: '20px',
+                paddingRight: '10px',
+                borderWidth: '1px',
+                paddingLeft: '10px',
+                background: 'transparent',
+                color: 'black',
+            }}
+            {...props}
+        >
+            {props.children}
+        </MenuButton>
+    );
+};
+
+export default TopBarMenyuButton;
diff --git a/CommonUI/src/Components/Dashboard/TopBar/TopBar.scss b/CommonUI/src/Components/Dashboard/TopBar/TopBar.scss
index 3b9b875266..63ab218cab 100644
--- a/CommonUI/src/Components/Dashboard/TopBar/TopBar.scss
+++ b/CommonUI/src/Components/Dashboard/TopBar/TopBar.scss
@@ -26,7 +26,7 @@ $primaryColor: rgb(246, 248, 250);
             align-items: center;
 
             & > * {
-                padding-left: 20px;
+                margin-left: 20px;
             }
         }
     }
diff --git a/CommonUI/src/Styles/BrandColors.scss b/CommonUI/src/Styles/BrandColors.scss
index 7d6283ac5d..9d0294f2df 100644
--- a/CommonUI/src/Styles/BrandColors.scss
+++ b/CommonUI/src/Styles/BrandColors.scss
@@ -1,2 +1,10 @@
+// basic colors
 $color-black: #000000;
 $color-white: #ffffff;
+$color-grey: #575757;
+$color-light-grey: rgb(144, 139, 139);
+$color-very-light-grey: #F3F3F3;
+
+// shadows
+$color-box-shadow: rgba(0, 0, 0, 0.2);
+$box-shadow: 1px 3px 10px $color-box-shadow;
\ No newline at end of file
diff --git a/Dashboard/src/Components/ProjectPicker/Project.scss b/Dashboard/src/Components/ProjectPicker/Project.scss
index 98fd02ff8e..d74ae7a6fa 100644
--- a/Dashboard/src/Components/ProjectPicker/Project.scss
+++ b/Dashboard/src/Components/ProjectPicker/Project.scss
@@ -1,4 +1,4 @@
-$primaryColor: rgb(246, 248, 250);
+@use '../../../../CommonUI/src/Styles/BrandColors.scss';
 
 .projectPreview {
     position: relative;
@@ -20,13 +20,13 @@ $primaryColor: rgb(246, 248, 250);
             padding: 0;
             margin: 0;
             font-size: 1.3rem;
-            color: rgb(77, 75, 75);
+            color: BrandColors.$color-grey;
             font-weight: 400;
             margin-right: 7px;
         }
 
         svg {
-            color: rgb(144, 139, 139);
+            color: BrandColors.$color-light-grey;
             font-size: 1.2rem;
         }
     }
@@ -40,8 +40,8 @@ $primaryColor: rgb(246, 248, 250);
         height: fit-content;
         background-color: white;
         border-radius: 5px;
-        box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.2);
-        color: darken($primaryColor, 70%);
+        box-shadow: BrandColors.$box-shadow;
+        color:  BrandColors.$color-grey;
         animation: fadeIn 0.2s linear;
 
         div {
@@ -71,8 +71,8 @@ $primaryColor: rgb(246, 248, 250);
             }
 
             &:hover {
-                color: $primaryColor !important;
-                background-color: #333;
+                color: BrandColors.$color-grey;
+                background-color: BrandColors.$color-very-light-grey;
             }
         }
     }
diff --git a/Dashboard/src/Components/TopBar/CreateButton.tsx b/Dashboard/src/Components/TopBar/CreateButton.tsx
index 9550b03f3a..316d45b88c 100644
--- a/Dashboard/src/Components/TopBar/CreateButton.tsx
+++ b/Dashboard/src/Components/TopBar/CreateButton.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement, FunctionComponent } from 'react';
-import MenuButton from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuButton';
+import MenuButton from 'CommonUI/src/Components/Dashboard/TopBar/MenuButton/MenuButton';
 import MenuItem from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuItem';
 import MenuLegend from 'CommonUI/src/Components/Basic/Button/MenuButton/MenuLegend';
 

From aea15e41b8052688ccf2421f9b81a6a9c39ecd9e Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sun, 12 Jun 2022 23:01:01 +0100
Subject: [PATCH 6/7] view breadcrumbs

---
 CommonUI/src/Components/Basic/Icon/Icon.tsx   |  6 ++++++
 .../Dashboard/Breadcrumbs/BreadcrumbItem.tsx  | 20 ++++++++++++++++++
 .../Breadcrumbs.scss}                         |  0
 .../Breadcrumbs.tsx}                          | 21 +++++++++++--------
 Dashboard/src/Pages/Home/Home.tsx             |  9 +++++++-
 5 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem.tsx
 rename CommonUI/src/Components/Dashboard/{Container/Breadcrumb/Breadcrumb.scss => Breadcrumbs/Breadcrumbs.scss} (100%)
 rename CommonUI/src/Components/Dashboard/{Container/Breadcrumb/Breadcrumb.tsx => Breadcrumbs/Breadcrumbs.tsx} (65%)

diff --git a/CommonUI/src/Components/Basic/Icon/Icon.tsx b/CommonUI/src/Components/Basic/Icon/Icon.tsx
index 3c3c75582c..c87088a2f7 100644
--- a/CommonUI/src/Components/Basic/Icon/Icon.tsx
+++ b/CommonUI/src/Components/Basic/Icon/Icon.tsx
@@ -7,7 +7,9 @@ import {
     faBell,
     faFile,
     faChevronDown,
+    faChevronRight,
     IconDefinition,
+    faHome,
 } from '@fortawesome/free-solid-svg-icons';
 import Dictionary from 'Common/Types/Dictionary';
 
@@ -27,6 +29,8 @@ export enum IconProp {
     Notification = 'Notifications',
     Help = 'Help',
     ChevronDown = 'ChevronDown',
+    ChevronRight = 'ChevronRight',
+    Home = "Home"
 }
 
 const IconDictionary: Dictionary<IconDefinition> = {
@@ -36,6 +40,8 @@ const IconDictionary: Dictionary<IconDefinition> = {
     [IconProp.Settings]: faCog,
     [IconProp.File]: faFile,
     [IconProp.ChevronDown]: faChevronDown,
+    [IconProp.ChevronRight]: faChevronRight,
+    [IconProp.Home]: faHome,
 };
 
 export interface ComponentProps {
diff --git a/CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem.tsx b/CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem.tsx
new file mode 100644
index 0000000000..9bb4c9d15a
--- /dev/null
+++ b/CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem.tsx
@@ -0,0 +1,20 @@
+import Route from 'Common/Types/API/Route';
+import React, { FunctionComponent, ReactElement } from 'react';
+import Navigation from '../../../Utils/Navigation';
+
+export interface ComponentProps { 
+    title: string, 
+    route?: Route
+}
+
+const BreadcrumbItem: FunctionComponent<ComponentProps> = (props: ComponentProps): ReactElement => {
+    return (<p onClick={() => {
+        if (props.route) {
+            Navigation.navigate(props.route);
+        }
+    }}>
+        { props.title }
+    </p>)
+}
+
+export default BreadcrumbItem;
\ No newline at end of file
diff --git a/CommonUI/src/Components/Dashboard/Container/Breadcrumb/Breadcrumb.scss b/CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.scss
similarity index 100%
rename from CommonUI/src/Components/Dashboard/Container/Breadcrumb/Breadcrumb.scss
rename to CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.scss
diff --git a/CommonUI/src/Components/Dashboard/Container/Breadcrumb/Breadcrumb.tsx b/CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.tsx
similarity index 65%
rename from CommonUI/src/Components/Dashboard/Container/Breadcrumb/Breadcrumb.tsx
rename to CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.tsx
index ba249716a1..42bd10f2cb 100644
--- a/CommonUI/src/Components/Dashboard/Container/Breadcrumb/Breadcrumb.tsx
+++ b/CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.tsx
@@ -1,25 +1,28 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faChevronRight } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { FunctionComponent, ReactElement } from 'react';
-import './Breadcrumb.scss';
+import './Breadcrumbs.scss';
+import Icon, { IconProp } from '../../Basic/Icon/Icon';
 
 export interface ComponentProps {
     icon: IconProp;
     title: string;
-    children: Array<ReactElement>;
+    children: ReactElement | Array<ReactElement>;
 }
 
-const Breadcrumb: FunctionComponent<ComponentProps> = ({
+const Breadcrumbs: FunctionComponent<ComponentProps> = ({
     icon,
     title,
     children,
 }: ComponentProps): ReactElement => {
+
+    if (!Array.isArray(children)) {
+        children = [children];
+    }
+
     return (
         <div className="breadcrumb-container">
             <div className="breadcrumb_detail">
                 <div className="breadcrumb_detail__summary">
-                    <FontAwesomeIcon icon={icon} />
+                    <Icon icon={icon} />
                     <h2>{title}</h2>
                 </div>
                 <div className="breadcrumb_detail__crumbs">
@@ -27,7 +30,7 @@ const Breadcrumb: FunctionComponent<ComponentProps> = ({
                         return (
                             <React.Fragment key={index}>
                                 {child}
-                                <FontAwesomeIcon icon={faChevronRight} />
+                                <Icon icon={IconProp.ChevronRight} />
                             </React.Fragment>
                         );
                     })}
@@ -37,4 +40,4 @@ const Breadcrumb: FunctionComponent<ComponentProps> = ({
     );
 };
 
-export default Breadcrumb;
+export default Breadcrumbs;
diff --git a/Dashboard/src/Pages/Home/Home.tsx b/Dashboard/src/Pages/Home/Home.tsx
index dbdab80f0c..215ba43ab3 100644
--- a/Dashboard/src/Pages/Home/Home.tsx
+++ b/Dashboard/src/Pages/Home/Home.tsx
@@ -1,13 +1,20 @@
 import React, { FunctionComponent, ReactElement } from 'react';
 import PageContainer from 'CommonUI/src/Components/Dashboard/Container/PageContainer/PageContainer';
 import PageComponentProps from '../PageComponentProps';
+import Breadcrumbs from 'CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs'
+import BreadcrumbItem from 'CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem'
+import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
 
 const Home: FunctionComponent<PageComponentProps> = (
     _props: PageComponentProps
 ): ReactElement => {
     return (
         <PageContainer title="OneUptime | Home">
-            <div></div>
+            <Breadcrumbs icon={IconProp.Home} title="Home">
+                <BreadcrumbItem title="Home"/>
+                <BreadcrumbItem title="Monitors" />
+                <div>Hello</div>
+            </Breadcrumbs>
         </PageContainer>
     );
 };

From fcbb8e7e407479319e4d2272e485cbe9bb25fea8 Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Sun, 12 Jun 2022 23:01:48 +0100
Subject: [PATCH 7/7] eslint

---
 .../Basic/Button/MenuButton/IconButton.tsx    |  8 +++--
 CommonUI/src/Components/Basic/Icon/Icon.tsx   |  6 ++--
 .../Dashboard/Breadcrumbs/BreadcrumbItem.tsx  | 32 +++++++++++--------
 .../Dashboard/Breadcrumbs/Breadcrumbs.tsx     |  1 -
 Dashboard/src/Pages/Home/Home.tsx             |  6 ++--
 5 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
index 2eb448bbaa..aa846499e5 100644
--- a/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
+++ b/CommonUI/src/Components/Basic/Button/MenuButton/IconButton.tsx
@@ -1,7 +1,7 @@
 import React, { ReactElement, FunctionComponent } from 'react';
 import useComponentOutsideClick from '../../../../Types/UseComponentOutsideClick';
 import Icon, { IconProp, SizeProp } from '../../Icon/Icon';
-import './IconButton.scss'
+import './IconButton.scss';
 
 export interface ComponentProps {
     icon?: IconProp;
@@ -31,7 +31,11 @@ const IconButton: FunctionComponent<ComponentProps> = ({
                 }}
             >
                 {icon && (
-                    <Icon className="icon" icon={icon} size={size ? size : SizeProp.Regular} />
+                    <Icon
+                        className="icon"
+                        icon={icon}
+                        size={size ? size : SizeProp.Regular}
+                    />
                 )}
             </div>
             {isComponentVisible && (
diff --git a/CommonUI/src/Components/Basic/Icon/Icon.tsx b/CommonUI/src/Components/Basic/Icon/Icon.tsx
index c87088a2f7..976a146836 100644
--- a/CommonUI/src/Components/Basic/Icon/Icon.tsx
+++ b/CommonUI/src/Components/Basic/Icon/Icon.tsx
@@ -30,7 +30,7 @@ export enum IconProp {
     Help = 'Help',
     ChevronDown = 'ChevronDown',
     ChevronRight = 'ChevronRight',
-    Home = "Home"
+    Home = 'Home',
 }
 
 const IconDictionary: Dictionary<IconDefinition> = {
@@ -47,13 +47,13 @@ const IconDictionary: Dictionary<IconDefinition> = {
 export interface ComponentProps {
     icon: IconProp;
     size?: SizeProp;
-    className?: string
+    className?: string;
 }
 
 const Icon: FunctionComponent<ComponentProps> = ({
     size = SizeProp.Regular,
     icon,
-    className, 
+    className,
 }: ComponentProps): ReactElement => {
     return (
         <span
diff --git a/CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem.tsx b/CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem.tsx
index 9bb4c9d15a..539a152952 100644
--- a/CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem.tsx
+++ b/CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem.tsx
@@ -2,19 +2,25 @@ import Route from 'Common/Types/API/Route';
 import React, { FunctionComponent, ReactElement } from 'react';
 import Navigation from '../../../Utils/Navigation';
 
-export interface ComponentProps { 
-    title: string, 
-    route?: Route
+export interface ComponentProps {
+    title: string;
+    route?: Route;
 }
 
-const BreadcrumbItem: FunctionComponent<ComponentProps> = (props: ComponentProps): ReactElement => {
-    return (<p onClick={() => {
-        if (props.route) {
-            Navigation.navigate(props.route);
-        }
-    }}>
-        { props.title }
-    </p>)
-}
+const BreadcrumbItem: FunctionComponent<ComponentProps> = (
+    props: ComponentProps
+): ReactElement => {
+    return (
+        <p
+            onClick={() => {
+                if (props.route) {
+                    Navigation.navigate(props.route);
+                }
+            }}
+        >
+            {props.title}
+        </p>
+    );
+};
 
-export default BreadcrumbItem;
\ No newline at end of file
+export default BreadcrumbItem;
diff --git a/CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.tsx b/CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.tsx
index 42bd10f2cb..3994039bf8 100644
--- a/CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.tsx
+++ b/CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs.tsx
@@ -13,7 +13,6 @@ const Breadcrumbs: FunctionComponent<ComponentProps> = ({
     title,
     children,
 }: ComponentProps): ReactElement => {
-
     if (!Array.isArray(children)) {
         children = [children];
     }
diff --git a/Dashboard/src/Pages/Home/Home.tsx b/Dashboard/src/Pages/Home/Home.tsx
index 215ba43ab3..5d9ffbf6f3 100644
--- a/Dashboard/src/Pages/Home/Home.tsx
+++ b/Dashboard/src/Pages/Home/Home.tsx
@@ -1,8 +1,8 @@
 import React, { FunctionComponent, ReactElement } from 'react';
 import PageContainer from 'CommonUI/src/Components/Dashboard/Container/PageContainer/PageContainer';
 import PageComponentProps from '../PageComponentProps';
-import Breadcrumbs from 'CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs'
-import BreadcrumbItem from 'CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem'
+import Breadcrumbs from 'CommonUI/src/Components/Dashboard/Breadcrumbs/Breadcrumbs';
+import BreadcrumbItem from 'CommonUI/src/Components/Dashboard/Breadcrumbs/BreadcrumbItem';
 import { IconProp } from 'CommonUI/src/Components/Basic/Icon/Icon';
 
 const Home: FunctionComponent<PageComponentProps> = (
@@ -11,7 +11,7 @@ const Home: FunctionComponent<PageComponentProps> = (
     return (
         <PageContainer title="OneUptime | Home">
             <Breadcrumbs icon={IconProp.Home} title="Home">
-                <BreadcrumbItem title="Home"/>
+                <BreadcrumbItem title="Home" />
                 <BreadcrumbItem title="Monitors" />
                 <div>Hello</div>
             </Breadcrumbs>