Clean up userdropdown a bit

client/src/app/pages/dashboard/users/UserIntegrationsPage.tsx

@@ -625,9 +625,10 @@ function ServicesPage({ reqUser }: { reqUser: PublicUserDocument }) {
 				<span>
 					This is for <b>Configuring Integrations!</b>
 				</span>
+				<br />
 				<Muted>
-					Some services have had their names truncated to their first three characters for
-					privacy reasons.
+					Note: Some services have had their names truncated to their first three
+					characters for privacy reasons.
 				</Muted>
 				<Divider />
 			</Col>

client/src/components/layout/header/UserProfileDropdown.tsx

@@ -1,5 +1,6 @@
 import Divider from "components/util/Divider";
 import DropdownToggleOverride from "components/util/DropdownToggleOverride";
+import Icon from "components/util/Icon";
 import { UserContext } from "context/UserContext";
 import React, { useContext } from "react";
 import { Button } from "react-bootstrap";
@@ -50,7 +51,7 @@ export function UserProfileDropdown({ user }: { user: PublicUserDocument }) {
 					>
 						<div className="navi-link">
 							<div className="navi-icon mr-2">
-								<i className="flaticon2-calendar-3 text-success" />
+								<Icon type="user" colour="primary" />
 							</div>
 							<div className="navi-text">
 								<div className="font-weight-bold cursor-pointer">My Profile</div>
@@ -64,12 +65,28 @@ export function UserProfileDropdown({ user }: { user: PublicUserDocument }) {
 					>
 						<div className="navi-link">
 							<div className="navi-icon mr-2">
-								<i className="flaticon2-settings text-info" />
+								<Icon type="cog" colour="info" />
 							</div>
 							<div className="navi-text">
 								<div className="font-weight-bold cursor-pointer">My Settings</div>
 								<div className="text-muted">
-									Manage your profile, service integrations, and more!
+									Manage your profile picture, status, and more!
+								</div>
+							</div>
+						</div>
+					</Link>
+					<Link
+						to={`/dashboard/users/${user.username}/integrations`}
+						className="navi-item px-8 cursor-pointer"
+					>
+						<div className="navi-link">
+							<div className="navi-icon mr-2">
+								<Icon type="wrench" colour="danger" />
+							</div>
+							<div className="navi-text">
+								<div className="font-weight-bold cursor-pointer">My Account</div>
+								<div className="text-muted">
+									Manage your API Keys and integrations with other services.
 								</div>
 							</div>
 						</div>

client/src/components/util/Icon.tsx

@@ -5,16 +5,20 @@ export default function Icon({
 	noPad,
 	brand,
 	onClick,
+	colour,
 }: {
 	type: string;
 	noPad?: boolean;
 	brand?: boolean;
 	onClick?: () => void;
+	colour?: "info" | "primary" | "danger" | "warning";
 }) {
 	return (
 		<i
 			onClick={onClick}
-			className={`fa${brand ? "b" : "s"} fa-${type} ${noPad ? "p-0" : ""}`}
+			className={`fa${brand ? "b" : "s"} fa-${type} ${noPad ? "p-0" : ""} ${
+				colour ? `text-${colour}` : ""
+			}`}
 		/>
 	);
 }