From b3671ae7c251a34975cd1fd25afefe2a2d9caa2b Mon Sep 17 00:00:00 2001
From: ewinchel <ewinchel@redhat.com>
Date: Fri, 15 Sep 2023 11:23:06 -0400
Subject: [PATCH] Add Icon support for service dropdown

---
 .../AllServices/allServicesLinks.ts           |  2 +
 .../AllServicesDropdownIcons.ts               | 29 ++++++++
 .../AllServicesGalleryLink.tsx                |  5 +-
 .../AllServicesDropdown/icon-acs.tsx          | 25 +++++++
 .../AllServicesDropdown/icon-ansible.tsx      | 22 ++++++
 .../AllServicesDropdown/icon-app-services.tsx | 34 +++++++++
 .../AllServicesDropdown/icon-data-science.tsx | 47 ++++++++++++
 .../AllServicesDropdown/icon-edge.tsx         | 73 +++++++++++++++++++
 .../AllServicesDropdown/icon-insights.tsx     | 28 +++++++
 .../AllServicesDropdown/icon-openshift.tsx    | 40 ++++++++++
 .../AllServicesDropdown/icon-placeholder.tsx  | 33 +++++++++
 .../AllServicesDropdown/icon-quay-io.tsx      | 48 ++++++++++++
 .../AllServicesDropdown/icon-rh.tsx           | 33 +++++++++
 .../AllServicesDropdown/icon-services.tsx     | 35 +++++++++
 .../icon-subscriptions.tsx                    | 44 +++++++++++
 .../icon-trusted-content.tsx                  | 35 +++++++++
 16 files changed, 532 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AllServicesDropdown/AllServicesDropdownIcons.ts
 create mode 100644 src/components/AllServicesDropdown/icon-acs.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-ansible.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-app-services.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-data-science.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-edge.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-insights.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-openshift.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-placeholder.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-quay-io.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-rh.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-services.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-subscriptions.tsx
 create mode 100644 src/components/AllServicesDropdown/icon-trusted-content.tsx

diff --git a/src/components/AllServices/allServicesLinks.ts b/src/components/AllServices/allServicesLinks.ts
index 488c1b594..76e87b770 100644
--- a/src/components/AllServices/allServicesLinks.ts
+++ b/src/components/AllServices/allServicesLinks.ts
@@ -1,7 +1,9 @@
 import AllServicesIcons from './AllServicesIcons';
+import AllServicesDropdownIcons from './AllServicesDropdownIcons';
 
 export type AllServicesLink = {
   href: string;
+  icon?: keyof typeof AllServicesDropdownIcons;
   title: string;
   subtitle?: string;
   description?: string;
diff --git a/src/components/AllServicesDropdown/AllServicesDropdownIcons.ts b/src/components/AllServicesDropdown/AllServicesDropdownIcons.ts
new file mode 100644
index 000000000..0e1eef2a8
--- /dev/null
+++ b/src/components/AllServicesDropdown/AllServicesDropdownIcons.ts
@@ -0,0 +1,29 @@
+import ACSIcon from './icon-acs';
+import AnsibleIcon from './icon-ansible';
+import AppServicesIcon from './icon-app-services';
+import DataScienceIcon from './icon-data-science';
+import EdgeIcon from './icon-edge';
+import InsightsIcon from './icon-insights';
+import OpenShiftIcon from './icon-openshift';
+import PlaceholderIcon from './icon-placeholder';
+import QuayIoIcon from './icon-quay-io';
+import RHIcon from './icon-rh';
+import ServicesIcon from './icon-services';
+import SubscriptionsIcon from './icon-subscriptions';
+import TrustedContentIcon from './icon-trusted-content';
+
+export const AllServicesDropdownIcons = {
+  ACSIcon,
+  AnsibleIcon,
+  AppServicesIcon,
+  DataScienceIcon,
+  EdgeIcon,
+  InsightsIcon,
+  OpenShiftIcon,
+  PlaceholderIcon,
+  QuayIoIcon,
+  RHIcon,
+  ServicesIcon,
+  SubscriptionsIcon,
+  TrustedContentIcon,
+};
diff --git a/src/components/AllServicesDropdown/AllServicesGalleryLink.tsx b/src/components/AllServicesDropdown/AllServicesGalleryLink.tsx
index 09060a2a7..9d7fe429d 100644
--- a/src/components/AllServicesDropdown/AllServicesGalleryLink.tsx
+++ b/src/components/AllServicesDropdown/AllServicesGalleryLink.tsx
@@ -9,6 +9,7 @@ import StarIcon from '@patternfly/react-icons/dist/dynamic/icons/star-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/dynamic/icons/external-link-alt-icon';
 
 import { AllServicesLinkProps } from '../AllServices/AllServicesLink';
+import { AllServicesDropdownIcons } from './AllServicesDropdownIcons';
 import ChromeLink from '../ChromeLink';
 import classNames from 'classnames';
 import useFavoritePagesWrapper from '../../hooks/useFavoritePagesWrapper';
@@ -16,9 +17,10 @@ import { AllServicesDropdownContext } from './common';
 
 export type AllServicesGalleryLinkProps = AllServicesLinkProps;
 
-const AllServicesGalleryLink = ({ href, title, description, isExternal }: AllServicesGalleryLinkProps) => {
+const AllServicesGalleryLink = ({ href, title, icon, description, isExternal }: AllServicesGalleryLinkProps) => {
   const { favoritePage, unfavoritePage, favoritePages } = useFavoritePagesWrapper();
   const { onLinkClick } = useContext(AllServicesDropdownContext);
+  const TitleIcon = icon ? AllServicesDropdownIcons[icon] : null;
 
   const handleFavoriteToggle = (pathname: string, favorite?: boolean) => {
     if (favorite) {
@@ -42,6 +44,7 @@ const AllServicesGalleryLink = ({ href, title, description, isExternal }: AllSer
       >
         <CardBody className="pf-v5-u-p-md">
           <Split>
+            <SplitItem className="pf-v5-u-mr-sm">{TitleIcon && <TitleIcon />}</SplitItem>
             <SplitItem className="pf-v5-m-fill">
               <div className="pf-v5-u-mb-sm">{title}</div>
             </SplitItem>
diff --git a/src/components/AllServicesDropdown/icon-acs.tsx b/src/components/AllServicesDropdown/icon-acs.tsx
new file mode 100644
index 000000000..1704653c7
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-acs.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ACSIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>{`.uuid-2cc71784-83b2-4ce0-a27c-c558cca16f2a{fill:#e00;}.uuid-073bfd7c-dff4-432f-a7b0-f3a025d959a1{fill:#fff;}`}</style>
+      </defs>
+      <path d="m28,1H10C5.0294,1,1,5.0294,1,10v18c0,4.9706,4.0294,9,9,9h18c4.9706,0,9-4.0294,9-9V10c0-4.9706-4.0294-9-9-9h0Z" />
+      <path
+        className="uuid-073bfd7c-dff4-432f-a7b0-f3a025d959a1"
+        d="m27.1299,11.0889l-8-1.7002c-.0859-.0186-.1733-.019-.2598,0l-8,1.7002c-.2886.0615-.4951.3164-.4951.6113l.0005,9.356c.124,3.9253,2.2866,6.9487,5.7852,8.0874.9219.3003,1.874.4448,2.8169.4448,2.1254,0,4.1914-.7454,5.7529-2.083v.7148c0,.3452.2803.625.625.625s.625-.2798.625-.625v-2.251c0-.3452-.2803-.625-.625-.625h-2.1768c-.3447,0-.625.2798-.625.625s.2803.625.625.625h.692c-1.9273,1.6254-4.7543,2.196-7.3233,1.3608-3.02-.9834-4.8145-3.5122-4.9224-6.9185v-8.8301l7.375-1.5674,7.375,1.5674v8.8101c-.0244.7686-.1348,1.501-.3271,2.1763-.0947.332.0977.6777.4287.7725.332.0923.6777-.0977.7725-.4297.2207-.7734.3477-1.6074.376-2.499v-9.3364c0-.2949-.2061-.5498-.4951-.6113Z"
+      />
+      <path
+        className="uuid-2cc71784-83b2-4ce0-a27c-c558cca16f2a"
+        d="m19,24.6865c-.1079,0-.2158-.0278-.3125-.084l-2-1.1548c-.1934-.1113-.3125-.3179-.3125-.541v-2.3091c0-.2231.1191-.4297.3125-.541l2-1.1548c.1938-.1128.4316-.1118.625,0l2,1.1548c.1934.1113.3125.3179.3125.541v2.3091c0,.2231-.1191.4297-.3125.541l-2,1.1548c-.0967.0562-.2041.084-.3125.084Zm-1.375-2.1406l1.375.7939,1.375-.7939v-1.5874l-1.375-.7939-1.375.7939v1.5874Z"
+      />
+      <path
+        className="uuid-2cc71784-83b2-4ce0-a27c-c558cca16f2a"
+        d="m23,21.4707c-.2461,0-.4795-.1465-.5781-.3887-.1309-.3193.0225-.6846.3418-.8149.3711-.1519.6113-.5088.6113-.9102,0-.499-.3779-.9155-.8789-.9683-.333-.0352-.5781-.3257-.5586-.6592l.0088-.1582c0-1.3291-1.0811-2.4106-2.4102-2.4106-.96,0-1.8281.5698-2.2114,1.4512-.1162.2681-.4067.4194-.689.3652-.1021-.0195-.2065-.0308-.3145-.0308-.9355,0-1.6963.7612-1.6963,1.6968,0,.5557.2734,1.0776.731,1.3955.2837.1968.354.5859.1567.8696-.1958.2842-.5859.3545-.8696.1567-.7939-.5513-1.2681-1.4565-1.2681-2.4219,0-1.6484,1.3579-3.0005,3.0166-2.9458.6548-1.0986,1.8442-1.7866,3.1445-1.7866,1.9189,0,3.498,1.4849,3.6484,3.3667.8506.3198,1.4404,1.1348,1.4404,2.0796,0,.9111-.5449,1.7227-1.3887,2.0674-.0771.0317-.1572.0464-.2363.0464Z"
+      />
+    </svg>
+  );
+};
+export default ACSIcon;
diff --git a/src/components/AllServicesDropdown/icon-ansible.tsx b/src/components/AllServicesDropdown/icon-ansible.tsx
new file mode 100644
index 000000000..baf9f78cd
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-ansible.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+const AnsibleIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>{`.a{fill:#fff;}.b{fill:#e00;}`}</style>
+      </defs>
+      <rect x="1.6251" y="1.6252" width="34.75" height="34.75" rx="8.375" />
+      <path d="M28,2.25A7.7587,7.7587,0,0,1,35.75,10V28A7.7587,7.7587,0,0,1,28,35.75H10A7.7587,7.7587,0,0,1,2.25,28V10A7.7587,7.7587,0,0,1,10,2.25H28M28,1H10a9,9,0,0,0-9,9V28a9,9,0,0,0,9,9H28a9,9,0,0,0,9-9V10a9,9,0,0,0-9-9Z" />
+      <path
+        className="a"
+        d="M15,23.6252a.6145.6145,0,0,1-.2563-.0557.6245.6245,0,0,1-.313-.8262l2.021-4.4814.0083-.0176L18.43,13.8752a.65.65,0,0,1,1.14,0l4,8.8681a.6251.6251,0,0,1-.9453.7569L17.274,19.4787,15.57,23.257A.6251.6251,0,0,1,15,23.6252Zm2.8013-5.3145,3.6284,2.7276L19,15.6525Z"
+      />
+      <path
+        className="b"
+        d="M19,30.1252A11.125,11.125,0,1,1,30.1251,19,11.1374,11.1374,0,0,1,19,30.1252Zm0-21A9.875,9.875,0,1,0,28.8751,19,9.8859,9.8859,0,0,0,19,9.1252Z"
+      />
+    </svg>
+  );
+};
+export default AnsibleIcon;
diff --git a/src/components/AllServicesDropdown/icon-app-services.tsx b/src/components/AllServicesDropdown/icon-app-services.tsx
new file mode 100644
index 000000000..40b89163f
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-app-services.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+
+const AppServicesIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>{`.st0{fill:#EE0000;}.st1{fill:#FFFFFF;}`}</style>
+      </defs>
+      <g>
+        <path d="M27.5,0.5h-18c-4.97,0-9,4.03-9,9v18c0,4.97,4.03,9,9,9h18c4.97,0,9-4.03,9-9v-18C36.5,4.53,32.47,0.5,27.5,0.5L27.5,0.5z" />
+        <path
+          className="st1"
+          d="M25.51,22.17H12.64c-2.98,0-5.41-2.42-5.41-5.41c0-3.15,2.67-5.7,5.92-5.38c1.18-2.27,3.52-3.7,6.1-3.7
+            c3.75,0,6.81,3.02,6.88,6.76c1.71,0.44,2.94,1.98,2.94,3.79c0,1.96-1.45,3.6-3.33,3.89C25.68,22.15,25.6,22.17,25.51,22.17z
+             M12.64,12.61c-2.29,0-4.16,1.86-4.16,4.15s1.86,4.16,4.16,4.16h12.5c1.48,0,2.68-1.2,2.68-2.68c0-1.37-1.03-2.51-2.4-2.65
+            c-0.33-0.04-0.58-0.32-0.56-0.66l0.01-0.12c0.01-0.08,0.01-0.17,0.01-0.25c0-3.1-2.52-5.63-5.63-5.63c-2.24,0-4.27,1.33-5.16,3.39
+            c-0.12,0.27-0.4,0.42-0.69,0.37C13.15,12.63,12.89,12.61,12.64,12.61z"
+        />
+        <path
+          className="st0"
+          d="M25.5,23.87c-1.23,0-2.26,0.85-2.54,2h-1.92c-0.23-0.94-0.97-1.68-1.92-1.92v-7.95l0.93,0.93
+            c0.12,0.12,0.28,0.18,0.44,0.18s0.32-0.06,0.44-0.18c0.24-0.24,0.24-0.64,0-0.88l-2-2c-0.24-0.24-0.64-0.24-0.88,0l-2,2
+            c-0.24,0.24-0.24,0.64,0,0.88c0.24,0.24,0.64,0.24,0.88,0l0.93-0.93v7.95c-0.94,0.23-1.68,0.97-1.92,1.92h-1.92
+            c-0.28-1.15-1.31-2-2.54-2c-1.45,0-2.62,1.18-2.62,2.62s1.18,2.62,2.62,2.62c1.23,0,2.26-0.85,2.54-2h1.92c0.28,1.15,1.31,2,2.54,2
+            s2.26-0.85,2.54-2h1.92c0.28,1.15,1.31,2,2.54,2c1.45,0,2.62-1.18,2.62-2.62S26.95,23.87,25.5,23.87z M11.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S12.26,27.87,11.5,27.87z M18.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S19.26,27.87,18.5,27.87z M25.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S26.26,27.87,25.5,27.87z"
+        />
+      </g>
+    </svg>
+  );
+};
+export default AppServicesIcon;
diff --git a/src/components/AllServicesDropdown/icon-data-science.tsx b/src/components/AllServicesDropdown/icon-data-science.tsx
new file mode 100644
index 000000000..9b5e1a2b9
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-data-science.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+
+const DataScienceIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>
+          {`.uuid-00fb0b47-b01e-49bb-a511-91a567727439{fill:#e00;}.uuid-f46e1c4f-4336-4ea3-9a78-d01849a9fd26{fill:#fff;}.uuid-21bbc327-fd19-43c3-8c74-cd12b6253304{fill:#4d4d4d;}`}
+        </style>
+      </defs>
+      <rect x="1" y="1" width="36" height="36" rx="9" ry="9" />
+      <path
+        className="uuid-21bbc327-fd19-43c3-8c74-cd12b6253304"
+        d="m28,2.25c4.27338,0,7.75,3.47665,7.75,7.75v18c0,4.27335-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47665-7.75-7.75V10c0-4.27335,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02945,1,10v18c0,4.97055,4.02942,9,9,9h18c4.97058,0,9-4.02945,9-9V10c0-4.97055-4.02942-9-9-9h0Z"
+      />
+      <path
+        className="uuid-f46e1c4f-4336-4ea3-9a78-d01849a9fd26"
+        d="m28.01367,26.16211l-4.31152-10.34033v-4.19678h.875c.34473,0,.625-.28027.625-.625s-.28027-.625-.625-.625h-1.5c-.34473,0-.625.28027-.625.625v4.94727c0,.01703.00836.03131.0097.04797.005.06445.0119.12939.03815.19226l2.16321,5.1875h-4.10754c-.34473,0-.625.28027-.625.625s.28027.625.625.625h4.62885l1.67291,4.01172c.0625.15625.09473.32031.09473.48828,0,.68945-.56055,1.25-1.25,1.25h-9.75c-.68945,0-1.25-.56055-1.25-1.25,0-.16992.03125-.33398.0918-.48242l1.01758-2.44043c.13281-.31836-.01758-.68457-.33691-.81738-.31641-.13184-.68457.01758-.81738.33691l-1.01953,2.44629c-.12305.30371-.18555.62598-.18555.95703,0,1.37891,1.12109,2.5,2.5,2.5h9.75c1.37891,0,2.5-1.12109,2.5-2.5,0-.3291-.0625-.65137-.18848-.96289Z"
+      />
+      <path
+        className="uuid-f46e1c4f-4336-4ea3-9a78-d01849a9fd26"
+        d="m17.07715,11.625h.875v4.32227c0,.34473.28027.625.625.625s.625-.28027.625-.625v-4.94727c0-.34473-.28027-.625-.625-.625h-1.5c-.34473,0-.625.28027-.625.625s.28027.625.625.625Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m14.76953,16.57227c-1.33496,0-2.42188-1.08691-2.42188-2.42188s1.08691-2.4209,2.42188-2.4209,2.4209,1.08594,2.4209,2.4209-1.08594,2.42188-2.4209,2.42188Zm0-3.59277c-.64648,0-1.17188.52539-1.17188,1.1709,0,.64648.52539,1.17188,1.17188,1.17188.64551,0,1.1709-.52539,1.1709-1.17188,0-.64551-.52539-1.1709-1.1709-1.1709Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m10.97266,16.57227c-.34473,0-.625-.28027-.625-.625v-3.59277c0-.34473.28027-.625.625-.625s.625.28027.625.625v3.59277c0,.34473-.28027.625-.625.625Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m12.21973,22.625c-1.33496,0-2.42188-1.08691-2.42188-2.42188s1.08691-2.4209,2.42188-2.4209,2.4209,1.08594,2.4209,2.4209-1.08594,2.42188-2.4209,2.42188Zm0-3.59277c-.64648,0-1.17188.52539-1.17188,1.1709,0,.64648.52539,1.17188,1.17188,1.17188.64551,0,1.1709-.52539,1.1709-1.17188,0-.64551-.52539-1.1709-1.1709-1.1709Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m18.56543,22.625c-.34473,0-.625-.28027-.625-.625v-3.59277c0-.34473.28027-.625.625-.625s.625.28027.625.625v3.59277c0,.34473-.28027.625-.625.625Z"
+      />
+      <path
+        className="uuid-00fb0b47-b01e-49bb-a511-91a567727439"
+        d="m16.29297,22.625c-.34473,0-.625-.28027-.625-.625v-3.59277c0-.34473.28027-.625.625-.625s.625.28027.625.625v3.59277c0,.34473-.28027.625-.625.625Z"
+      />
+    </svg>
+  );
+};
+export default DataScienceIcon;
diff --git a/src/components/AllServicesDropdown/icon-edge.tsx b/src/components/AllServicesDropdown/icon-edge.tsx
new file mode 100644
index 000000000..56d049c10
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-edge.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+
+const EdgeIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 42 42">
+      <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="Group-8" fillRule="nonzero">
+          <path
+            d="M31.5,0 L10.5,0 C4.70101013,0 0,4.70101013 0,10.5 L0,31.5 C0,37.2989899 4.70101013,42 10.5,42 L31.5,42 C37.2989899,42 42,37.2989899 42,31.5 L42,10.5 C42,4.70101013 37.2989899,0 31.5,0 Z"
+            id="Path"
+            fill="#000000"
+          ></path>
+          <g id="Group-7" transform="translate(8.166667, 10.500000)">
+            <path
+              d="M26.2178899,20.956159 L0.615443425,20.956159 C0.275543407,20.956159 1.03620816e-14,20.7048059 1.03620816e-14,20.3947462 C1.03620816e-14,20.0846864 0.275543407,19.8333333 0.615443425,19.8333333 L26.2178899,19.8333333 C26.5577899,19.8333333 26.8333333,20.0846864 26.8333333,20.3947462 C26.8333333,20.7048059 26.5577899,20.956159 26.2178899,20.956159 L26.2178899,20.956159 Z"
+              id="Path"
+              fill="#EE0000"
+            ></path>
+            <path
+              d="M18.6097954,16.1248075 L9.6954576,16.1248075 C8.28044688,16.1213669 6.98002689,15.3462313 6.30389781,14.1032041 C5.62776874,12.8601768 5.68365161,11.3472973 6.44964312,10.1575392 C7.21563463,8.96778116 8.56969684,8.29069711 9.98110446,8.39167047 C11.0327839,6.4539731 13.250846,5.45940526 15.3972354,5.96310474 C17.5436247,6.46680423 19.0877042,8.34424489 19.1676152,10.5474959 C20.4428733,10.9249698 21.2869872,12.1349323 21.2009473,13.4620973 C21.1149074,14.7892622 20.1216326,15.8801071 18.808311,16.0897638 C18.7448052,16.1133613 18.6775423,16.1252312 18.6097954,16.1248075 Z M9.6954576,9.50281883 C8.17690894,9.50281883 6.94588203,10.7338458 6.94588203,12.2523945 C6.94588203,13.7709433 8.17690894,15.0019747 9.6954576,15.0019747 L18.3546894,15.0019747 C19.2737467,15.0040497 20.0329778,14.2850615 20.0809052,13.3672524 C20.1288325,12.4494432 19.4486167,11.6552881 18.5343415,11.5616321 C18.2345329,11.529532 18.013188,11.2670067 18.0322139,10.9660854 C18.0402982,10.851108 18.0456878,10.7864332 18.0456878,10.7244533 C18.0454303,8.93880251 16.7919134,7.39850414 15.0435526,7.03548504 C13.2951919,6.67246593 11.5320905,7.58641187 10.8209781,9.22435804 C10.7172798,9.46543454 10.4597751,9.60184847 10.2020766,9.55222316 C10.0351192,9.51995464 9.86550366,9.50341412 9.6954576,9.50281883 Z"
+              id="Shape"
+              fill="#FFFFFF"
+            ></path>
+            <g id="Group-2" transform="translate(1.166667, 9.333333)" fill="#EE0000" stroke="#EE0000">
+              <path
+                d="M0.374730956,1.10774728 C0.233685337,1.05777639 0.118244587,0.952783494 0.0541277307,0.816159947 C-0.00998912567,0.6795364 -0.0174555338,0.522632301 0.0333919459,0.380404285 L0.0333919459,0.380404285 C0.0840792057,0.236528339 0.189444598,0.119104272 0.326071553,0.0542285939 C0.462698507,-0.010647084 0.619267717,-0.0175995355 0.760982994,0.0349163634 L0.760982994,0.0349163634 C1.05020736,0.143959365 1.19854024,0.468577396 1.0933394,0.762259357 L1.0933394,0.762259357 C1.01491085,0.989439328 0.801077647,1.13984144 0.563365673,1.13502264 L0.563365673,1.13502264 C0.499537694,1.13488926 0.436042715,1.12570829 0.374730956,1.10774728 Z"
+                id="Path"
+              ></path>
+              <path
+                d="M23.4640626,0.933106332 C23.3668358,0.818896626 23.3187746,0.670073634 23.3305854,0.519789893 C23.3423963,0.369506152 23.413098,0.230245038 23.5269409,0.133029039 L23.5269409,0.133029039 C23.6407706,0.0357305815 23.7883723,-0.0113464898 23.9367496,0.00232184605 C24.085127,0.0159901819 24.2219067,0.0892641114 24.3165119,0.205763338 L24.3165119,0.205763338 C24.5152417,0.444818931 24.4876448,0.801057001 24.2545319,1.00584063 L24.2545319,1.00584063 C24.1508467,1.09164199 24.0201234,1.13682179 23.8862451,1.13312566 L23.8862451,1.13312566 C23.7228354,1.13468341 23.5675527,1.06111442 23.4640626,0.933106332 L23.4640626,0.933106332 Z"
+                id="Path"
+              ></path>
+            </g>
+            <g id="Group-3" transform="translate(0.000000, 14.000000)" fill="#EE0000" stroke="#EE0000">
+              <path
+                d="M25.706847,0.760425724 C25.6527369,0.619708027 25.6575839,0.462790561 25.7202732,0.325760161 C25.7829625,0.188729761 25.8980986,0.0833802605 26.0392034,0.0339392372 L26.0392034,0.0339392372 C26.3293359,-0.0718826109 26.6496918,0.0779063191 26.7578118,0.369939237 L26.7578118,0.369939237 C26.8619626,0.663229184 26.713965,0.98673213 26.4254554,1.09642572 L26.4254554,1.09642572 C26.3623082,1.12167722 26.2948359,1.13402327 26.2269398,1.13275005 L26.2269398,1.13275005 C25.9938629,1.1300416 25.7867703,0.981788067 25.706847,0.760425724 Z"
+                id="Path"
+              ></path>
+              <ellipse id="Oval" cx="0.561412846" cy="0.567567568" rx="1" ry="1"></ellipse>
+            </g>
+            <g id="Group-5" transform="translate(3.500000, 4.666667)" fill="#EE0000" stroke="#EE0000">
+              <path
+                d="M0.206980317,1.02737965 C0.0880463324,0.928374363 0.0141288259,0.786074097 0.00182368823,0.632427979 C-0.0104814495,0.478781861 0.0398568779,0.326664508 0.141536756,0.210229168 L0.141536756,0.210229168 C0.240168887,0.091185766 0.382687748,0.0163277465 0.53727088,0.00236985236 C0.691854012,-0.0115880417 0.845627475,0.0365166262 0.964255818,0.13594276 L0.964255818,0.13594276 C1.20620057,0.345313064 1.23527654,0.708365554 1.02969938,0.953093245 L1.02969938,0.953093245 C0.920397158,1.08811071 0.755374017,1.16664909 0.580943528,1.16666667 L0.580943528,1.16666667 C0.443657101,1.16546481 0.311210944,1.11613368 0.206980317,1.02737965 L0.206980317,1.02737965 Z"
+                id="Path"
+              ></path>
+              <path
+                d="M18.9586574,1.09187234 C18.6806172,0.931181233 18.5844771,0.577860285 18.7430964,0.299672562 L18.7430964,0.299672562 C18.8158031,0.161680778 18.9430997,0.060104648 19.0943203,0.0194141416 C19.2455408,-0.0212763648 19.4069757,0.00260770771 19.5397349,0.0853126204 L19.5397349,0.0853126204 C19.6742763,0.161644902 19.7726691,0.288161274 19.8131278,0.436849412 C19.8535865,0.585537551 19.8327731,0.744130005 19.7552959,0.877512403 L19.7552959,0.877512403 C19.6508424,1.0570411 19.4577688,1.16726208 19.2491961,1.16643232 L19.2491961,1.16643232 C19.1472047,1.1694323 19.0464526,1.14357661 18.9586574,1.09187234 Z"
+                id="Path"
+              ></path>
+            </g>
+            <g id="Group-6" transform="translate(7.000000, 1.166667)" fill="#EE0000" stroke="#EE0000">
+              <path
+                d="M0.0823010949,0.876975617 C0.000590879255,0.743325786 -0.0213597156,0.584415354 0.0213094493,0.435429095 C0.0639786141,0.286442836 0.167747137,0.159672799 0.309639358,0.0831874706 L0.309639358,0.0831874706 C0.450956305,0.00299152788 0.620371459,-0.0204185367 0.780077915,0.0181814971 C0.939784371,0.0567815309 1.07648978,0.154178986 1.15968677,0.28863852 L1.15968677,0.28863852 C1.32789495,0.570187177 1.22685492,0.927135279 0.932348512,1.09176535 L0.932348512,1.09176535 C0.837513468,1.13826152 0.732742392,1.1638068 0.625936071,1.16648602 L0.625936071,1.16648602 C0.403242543,1.16776426 0.196446997,1.05764047 0.0823010949,0.876975617 Z"
+                id="Path"
+              ></path>
+              <path
+                d="M12.058879,1.15710118 C11.8984836,1.13075099 11.7559379,1.04480946 11.6630763,0.918469835 C11.5702147,0.792130213 11.5347726,0.63591655 11.5646654,0.484715929 L11.5646654,0.484715929 C11.5919701,0.332289459 11.6823611,0.196397539 11.8158838,0.107039456 C11.9494065,0.0176813731 12.1150809,-0.0177946416 12.276333,0.00844304151 L12.276333,0.00844304151 C12.6137396,0.0667217002 12.8385835,0.370792499 12.7804309,0.690166979 L12.7804309,0.690166979 C12.7228146,0.966859269 12.4660771,1.16638949 12.167606,1.16643987 L12.167606,1.16643987 C12.1310947,1.16757618 12.0945749,1.16443945 12.058879,1.15710118 Z"
+                id="Path"
+              ></path>
+            </g>
+            <path
+              d="M12.8428959,0.65598577 C12.8154764,0.510521119 12.8475828,0.360137608 12.9320164,0.238553237 C13.01645,0.116968865 13.1461465,0.0343562227 13.2920261,0.00923817156 L13.2920261,0.00923817156 C13.4398419,-0.017887724 13.5923653,0.0152849141 13.7155621,0.101353911 C13.8387589,0.187422907 13.9223765,0.319225473 13.9477563,0.467351054 L13.9477563,0.467351054 C13.9977251,0.771963842 13.7935799,1.06016875 13.4896435,1.11409865 L13.4896435,1.11409865 C13.453713,1.11409865 13.4267652,1.12308126 13.3908348,1.12308126 L13.3908348,1.12308126 C13.1188402,1.12151513 12.8874957,0.924303416 12.8428959,0.65598577 Z"
+              id="Path"
+              stroke="#EE0000"
+              fill="#EE0000"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+export default EdgeIcon;
diff --git a/src/components/AllServicesDropdown/icon-insights.tsx b/src/components/AllServicesDropdown/icon-insights.tsx
new file mode 100644
index 000000000..8cd4435d4
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-insights.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+const InsightsIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>
+          {`.fd697ec5-dedd-4cbd-b54c-c319c7282cac{fill: #fff;}`}
+          {`.b71bb37e-4f3b-4552-bf19-fa5bca65c863{fill: #e00;}`}
+        </style>
+      </defs>
+      <path d="M28,1H10a9,9,0,0,0-9,9V28a9,9,0,0,0,9,9H28a9,9,0,0,0,9-9V10a9,9,0,0,0-9-9Z" />
+      <path
+        className="fd697ec5-dedd-4cbd-b54c-c319c7282cac"
+        d="M27.38,11.09a.62.62,0,0,0-.16-.31h0A11.54,11.54,0,0,0,19,7.38a.61.61,0,0,0-.62.62v8.46A2.62,2.62,0,1,0,21.62,19a2.56,2.56,0,0,0-.38-1.35l6-6A.61.61,0,0,0,27.38,11.09Zm-1.51.15-5.52,5.52a2.49,2.49,0,0,0-.73-.3V8.64A10.28,10.28,0,0,1,25.87,11.24ZM19,20.38A1.38,1.38,0,1,1,20.38,19,1.38,1.38,0,0,1,19,20.38Z"
+      />
+      <path
+        className="b71bb37e-4f3b-4552-bf19-fa5bca65c863"
+        d="M19,29.62A10.63,10.63,0,0,1,15.81,8.86a.64.64,0,0,1,.79.41.62.62,0,0,1-.41.78,9.39,9.39,0,1,0,10.93,4.26.62.62,0,0,1,.23-.85.61.61,0,0,1,.85.23A10.62,10.62,0,0,1,19,29.62Z"
+      />
+      <path
+        className="b71bb37e-4f3b-4552-bf19-fa5bca65c863"
+        d="M19,25.62a6.62,6.62,0,0,1-3.31-12.36.62.62,0,1,1,.62,1.08,5.39,5.39,0,1,0,7.76,2.87.62.62,0,0,1,.38-.8.63.63,0,0,1,.8.38A6.64,6.64,0,0,1,19,25.62Z"
+      />
+    </svg>
+  );
+};
+export default InsightsIcon;
diff --git a/src/components/AllServicesDropdown/icon-openshift.tsx b/src/components/AllServicesDropdown/icon-openshift.tsx
new file mode 100644
index 000000000..45ba09de7
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-openshift.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+const OpenShiftIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>
+          {`.a{fill:#fff;}`}
+          {`.b{fill:#e00;}`}
+        </style>
+      </defs>
+      <path d="M28,1H10a9,9,0,0,0-9,9V28a9,9,0,0,0,9,9H28a9,9,0,0,0,9-9V10a9,9,0,0,0-9-9Z" />
+      <path
+        className="a"
+        d="M10.09863,22.18994a.625.625,0,0,1-.25488-1.1958l2.74072-1.22021a.62492.62492,0,1,1,.50879,1.1416l-2.74072,1.22021A.619.619,0,0,1,10.09863,22.18994Z"
+      />
+      <path
+        className="a"
+        d="M8.832,25.49072a.625.625,0,0,1-.25488-1.1958l2.74023-1.22021a.62492.62492,0,1,1,.50879,1.1416L9.08594,25.43652A.61731.61731,0,0,1,8.832,25.49072Z"
+      />
+      <path
+        className="a"
+        d="M26.42773,14.91943a.62473.62473,0,0,1-.2539-1.1958L28.915,12.50342a.62472.62472,0,1,1,.50781,1.1416l-2.74121,1.22021A.61563.61563,0,0,1,26.42773,14.91943Z"
+      />
+      <path
+        className="a"
+        d="M25.16113,18.22021a.62473.62473,0,0,1-.2539-1.1958l2.74023-1.22021a.62472.62472,0,1,1,.50781,1.1416L25.415,18.166A.61581.61581,0,0,1,25.16113,18.22021Z"
+      />
+      <path
+        className="b"
+        d="M18.95166,28.63379A9.593,9.593,0,0,1,12.8291,26.4165a.625.625,0,0,1,.7959-.96386,8.37943,8.37943,0,0,0,13.71289-6.1045.61006.61006,0,0,1,.65039-.59814.6249.6249,0,0,1,.59766.65088,9.65521,9.65521,0,0,1-9.63428,9.23291Z"
+      />
+      <path
+        className="b"
+        d="M9.97461,19.22607l-.02881-.00048a.62539.62539,0,0,1-.59619-.65284A9.6291,9.6291,0,0,1,25.10547,11.5835a.62531.62531,0,0,1-.79688.96386,8.37815,8.37815,0,0,0-13.71,6.082A.62532.62532,0,0,1,9.97461,19.22607Z"
+      />
+    </svg>
+  );
+};
+export default OpenShiftIcon;
diff --git a/src/components/AllServicesDropdown/icon-placeholder.tsx b/src/components/AllServicesDropdown/icon-placeholder.tsx
new file mode 100644
index 000000000..fc2e4ae81
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-placeholder.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+const PlaceholderIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>{`.babc916c-e1fb-432c-82f5-f31008f864ae{fill:red;}.bd54039f-1ff7-4ad7-a5a2-655d1144d9f5{fill:#fff;}`}</style>
+      </defs>
+      <path d="M28,1H10a9,9,0,0,0-9,9V28a9,9,0,0,0,9,9H28a9,9,0,0,0,9-9V10a9,9,0,0,0-9-9Z" />
+      <path
+        className="babc916c-e1fb-432c-82f5-f31008f864ae"
+        d="M27.4316,14.5173a2.65775,2.65775,0,1,1,2.65807-2.65806A2.66118,2.66118,0,0,1,27.4316,14.5173Zm0-3.70835a1.05061,1.05061,0,1,0,1.05093,1.05029A1.05121,1.05121,0,0,0,27.4316,10.809Z"
+      />
+      <path
+        className="babc916c-e1fb-432c-82f5-f31008f864ae"
+        d="M23.91472,30.09466a4.88358,4.88358,0,1,1,4.88421-4.883A4.88913,4.88913,0,0,1,23.91472,30.09466Zm0-8.16a3.27644,3.27644,0,1,0,3.27707,3.27707A3.28,3.28,0,0,0,23.91472,21.93464Z"
+      />
+      <path
+        className="bd54039f-1ff7-4ad7-a5a2-655d1144d9f5"
+        d="M16.97388,26.37187A.80378.80378,0,0,1,16.923,24.766c.19274-.01256.38421-.03139.57318-.05776a.803.803,0,1,1,.22851,1.58957q-.3456.05085-.69873.07282C17.0084,26.37187,16.99083,26.37187,16.97388,26.37187Z"
+      />
+      <path
+        className="bd54039f-1ff7-4ad7-a5a2-655d1144d9f5"
+        d="M13.41493,25.75161a.81535.81535,0,0,1-.31766-.06529,8.63073,8.63073,0,0,1-1.18338-.62528A.804.804,0,0,1,12.774,23.7025a6.77718,6.77718,0,0,0,.95989.50726.80392.80392,0,0,1-.31892,1.54185ZM9.82209,22.61015a.804.804,0,0,1-.68869-.388,8.46313,8.46313,0,0,1-.59891-1.19782.80323.80323,0,1,1,1.48912-.60268,6.99016,6.99016,0,0,0,.48591.96931.80345.80345,0,0,1-.68743,1.21917Zm-1.08733-4.6444c-.02135,0-.04269-.00062-.06466-.00251a.8034.8034,0,0,1-.737-.86509A8.51376,8.51376,0,0,1,8.144,15.77728a.80351.80351,0,1,1,1.56194.37793,6.92215,6.92215,0,0,0-.17076,1.071A.80391.80391,0,0,1,8.73476,17.96575Zm14.895-2.50425a.803.803,0,0,1-.73577-.48089,6.88007,6.88007,0,0,0-.51354-.95612.80386.80386,0,0,1,1.35352-.86761,8.47972,8.47972,0,0,1,.63156,1.17836.80373.80373,0,0,1-.73577,1.12626ZM10.55912,13.55741a.80353.80353,0,0,1-.6121-1.324,8.61392,8.61392,0,0,1,.94231-.948.8035.8035,0,1,1,1.04841,1.21791,6.987,6.987,0,0,0-.76527.77093A.80322.80322,0,0,1,10.55912,13.55741Zm9.90213-1.66553a.80348.80348,0,0,1-.40932-.11237,6.89571,6.89571,0,0,0-.9737-.47838A.80369.80369,0,0,1,19.67086,9.807a8.59184,8.59184,0,0,1,1.20159.59013.804.804,0,0,1-.4112,1.49476Zm-5.84912-.85379A.80347.80347,0,0,1,14.4194,9.4548a8.62887,8.62887,0,0,1,1.31773-.21972.80351.80351,0,0,1,.14062,1.60086,7.07009,7.07009,0,0,0-1.07163.17829A.79241.79241,0,0,1,14.61213,11.03809Z"
+      />
+      <path
+        className="bd54039f-1ff7-4ad7-a5a2-655d1144d9f5"
+        d="M24.20853,19.70976a.79414.79414,0,0,1-.11551-.00817.803.803,0,0,1-.68053-.91029q.03956-.27968.0565-.56815a.81994.81994,0,0,1,.84878-.75523.80364.80364,0,0,1,.75585.8494q-.02071.356-.07156.70375A.80311.80311,0,0,1,24.20853,19.70976Z"
+      />
+    </svg>
+  );
+};
+export default PlaceholderIcon;
diff --git a/src/components/AllServicesDropdown/icon-quay-io.tsx b/src/components/AllServicesDropdown/icon-quay-io.tsx
new file mode 100644
index 000000000..62336b0ce
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-quay-io.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+const QuayIoIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <g id="Symbols" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="Technology_icon-Red_Hat-Quay-Standard-RGB" fillRule="nonzero">
+          <g id="uuid-16df5206-ca64-41dd-b57e-55c66370cb99" fill="#000000">
+            <rect id="Rectangle" x="0" y="0" width="36" height="36" rx="9"></rect>
+          </g>
+          <g id="uuid-7286850b-1f74-416c-a901-1d5903be7592" transform="translate(8.3749, 7.475)">
+            <path
+              d="M6.124635,21.0499257 C6.021605,21.0499257 5.917605,21.0245357 5.821415,20.9713157 C5.519655,20.8038357 5.411255,20.4229757 5.578735,20.1212157 L9.078735,13.8214157 C9.245725,13.5196557 9.624145,13.4107757 9.928835,13.5787357 C10.230595,13.7462157 10.338995,14.1270757 10.171025,14.4288357 L6.671515,20.7286357 C6.557255,20.9342057 6.344365,21.0499257 6.124635,21.0499257 L6.124635,21.0499257 Z"
+              id="Path"
+              fill="#EE0000"
+            ></path>
+            <path
+              d="M6.125615,21.0499257 C5.905885,21.0499257 5.692995,20.9342057 5.578735,20.7286357 L0.078735,10.8287357 C-0.026245,10.6397757 -0.026245,10.4102757 0.078735,10.2213157 L5.578735,0.321415684 C5.747195,0.0201456844 6.127565,-0.0877643156 6.428835,0.0787356844 C6.730595,0.246215684 6.838995,0.627075684 6.671515,0.928835684 L1.339975,10.5250257 L6.671515,20.1212157 C6.838995,20.4229757 6.730595,20.8038357 6.428835,20.9713157 C6.332645,21.0245357 6.228155,21.0499257 6.125615,21.0499257 L6.125615,21.0499257 Z"
+              id="Path"
+              fill="#FFFFFF"
+            ></path>
+            <path
+              d="M13.124145,21.0499257 C13.021605,21.0499257 12.918095,21.0245357 12.821415,20.9713157 C12.519655,20.8038357 12.411255,20.4229757 12.579225,20.1212157 L18.079225,10.2213157 C18.245245,9.91955568 18.625125,9.81067568 18.928835,9.97863568 C19.230595,10.1461157 19.338995,10.5269757 19.171025,10.8287357 L13.671025,20.7286357 C13.557745,20.9342057 13.343875,21.0499257 13.124145,21.0499257 L13.124145,21.0499257 Z"
+              id="Path"
+              fill="#EE0000"
+            ></path>
+            <path
+              d="M9.626105,7.54992568 C9.405895,7.54992568 9.192995,7.43420568 9.078745,7.22863568 L5.578745,0.928835684 C5.411265,0.627075684 5.519665,0.246215684 5.821425,0.0787356844 C6.123185,-0.0887443156 6.503555,0.0196556844 6.671525,0.321415684 L10.171035,6.62121568 C10.339005,6.92297568 10.230605,7.30383568 9.928845,7.47131568 C9.832165,7.52453568 9.728645,7.54992568 9.626115,7.54992568 L9.626105,7.54992568 Z"
+              id="Path"
+              fill="#EE0000"
+            ></path>
+            <path
+              d="M13.126105,21.0499257 C12.906375,21.0499257 12.693485,20.9342057 12.579225,20.7286357 L7.078735,10.8287357 C6.973755,10.6397757 6.973755,10.4102757 7.078735,10.2213157 L12.579225,0.321415684 C12.745245,0.0196556844 13.125125,-0.0887443156 13.428835,0.0787356844 C13.730595,0.246215684 13.838995,0.627075684 13.671025,0.928835684 L8.339975,10.5250257 L13.671025,20.1212157 C13.838995,20.4229757 13.730595,20.8038357 13.428835,20.9713157 C13.332155,21.0245357 13.228635,21.0499257 13.126105,21.0499257 L13.126105,21.0499257 Z"
+              id="Path"
+              fill="#FFFFFF"
+            ></path>
+            <path
+              d="M18.626105,11.1500257 C18.406375,11.1500257 18.193485,11.0343057 18.079225,10.8287357 L12.579225,0.928835684 C12.411255,0.627075684 12.519655,0.246215684 12.821415,0.0787356844 C13.125125,-0.0887443156 13.503055,0.0196556844 13.671025,0.321415684 L19.171025,10.2213157 C19.338995,10.5230757 19.230595,10.9039357 18.928835,11.0714157 C18.832155,11.1246357 18.728635,11.1500257 18.626105,11.1500257 L18.626105,11.1500257 Z"
+              id="Path"
+              fill="#EE0000"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+export default QuayIoIcon;
diff --git a/src/components/AllServicesDropdown/icon-rh.tsx b/src/components/AllServicesDropdown/icon-rh.tsx
new file mode 100644
index 000000000..56f97f81f
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-rh.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+const RHIcon = () => {
+  return (
+    <svg width="24" height="30" viewBox="0 0 24 30">
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="Group-7" fillRule="nonzero">
+          <path
+            d="M18,1.07142667 C20.7206996,1.07450542 22.9254946,3.27930039 22.9285733,6 L22.9285733,18 C22.9254982,20.7207011 20.7207011,22.9254982 18,22.9285733 L6,22.9285733 C3.27930039,22.9254946 1.07450542,20.7206996 1.07142667,18 L1.07142667,6 C1.07450542,3.27930039 3.27930039,1.07450542 6,1.07142667 L18,1.07142667"
+            id="Path"
+            fill="#FFFFFF"
+          ></path>
+          <path
+            d="M18,1.07142667 C20.7206996,1.07450542 22.9254946,3.27930039 22.9285733,6 L22.9285733,18 C22.9254982,20.7207011 20.7207011,22.9254982 18,22.9285733 L6,22.9285733 C3.27930039,22.9254946 1.07450542,20.7206996 1.07142667,18 L1.07142667,6 C1.07450542,3.27930039 3.27930039,1.07450542 6,1.07142667 L18,1.07142667 M18,0 L6,0 C2.6862915,0 0,2.6862915 0,6 L0,18 C0,21.3137085 2.6862915,24 6,24 L18,24 C21.3137085,24 24,21.3137085 24,18 L24,6 C24,2.6862915 21.3137085,0 18,0 L18,0 Z"
+            id="Shape"
+            fill="#000000"
+          ></path>
+          <path
+            d="M14.6211554,12.3800934 C15.6524701,12.3800934 17.1446202,12.1674001 17.1446202,10.9407044 C17.1477036,10.846031 17.1391203,10.7513381 17.1190641,10.6587622 L16.5048918,7.99102867 C16.3630963,7.40406134 16.2386131,7.13778263 15.2081227,6.62253743 C14.4084621,6.21363884 12.6665212,5.53846154 12.151276,5.53846154 C11.6714797,5.53846154 11.5321574,6.15675577 10.9600291,6.15675577 C10.409335,6.15675577 10.0004364,5.69509608 9.48519125,5.69509608 C8.99055586,5.69509608 8.66821846,6.03227253 8.41925199,6.72558647 C8.41925199,6.72558647 7.72593805,8.68104504 7.63690368,8.96463599 C7.62275244,9.0167127 7.61663641,9.070645 7.61876705,9.1245681 C7.61876705,9.88465782 10.6113111,12.3767958 14.6211554,12.3767958 M17.3029036,11.4386373 C17.4455234,12.1138146 17.4455234,12.1847124 17.4455234,12.2737467 C17.4455234,13.427896 16.1479299,14.0684488 14.4422622,14.0684488 C10.5874038,14.070922 7.21069285,11.812087 7.21069285,10.3191126 C7.21047001,10.1112971 7.25283587,9.90564029 7.33517609,9.714833 C5.94854822,9.78408195 4.15384615,10.0313996 4.15384615,11.6158817 C4.15384615,14.2110687 10.3029884,17.4097109 15.1718494,17.4097109 C18.9046978,17.4097109 19.8461538,15.7213554 19.8461538,14.388313 C19.8461538,13.339686 18.9393223,12.1492635 17.3045523,11.4386373"
+            id="Shape"
+            fill="#EE0000"
+          ></path>
+          <path
+            d="M17.1190641,10.6587622 C17.1391203,10.7513381 17.1477036,10.846031 17.1446202,10.9407044 C17.1446202,12.1674001 15.6524701,12.3800934 14.6211554,12.3800934 C10.6113111,12.3800934 7.61876705,9.88795539 7.61876705,9.1245681 C7.61663641,9.070645 7.62275244,9.0167127 7.63690368,8.96463599 L7.33517609,9.71153543 C7.25283587,9.90234272 7.21047001,10.1079995 7.21069198,10.315815 C7.21069198,11.8087895 10.5907013,14.0651512 14.443911,14.0651512 C16.1495787,14.0651512 17.4471722,13.4254228 17.4471722,12.2704492 C17.4471722,12.1814148 17.4471722,12.1105171 17.3045523,11.4353398 L17.1190641,10.6587622 Z"
+            id="Path"
+            fill="#000000"
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
+};
+export default RHIcon;
diff --git a/src/components/AllServicesDropdown/icon-services.tsx b/src/components/AllServicesDropdown/icon-services.tsx
new file mode 100644
index 000000000..7cd6d85c9
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-services.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const ServicesIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <style type="text/css">
+        {`.st0{fill:#EE0000;}`}
+        {`.st1{fill:#FFFFFF;}`}
+      </style>
+      <g>
+        <path d="M27.5,0.5h-18c-4.97,0-9,4.03-9,9v18c0,4.97,4.03,9,9,9h18c4.97,0,9-4.03,9-9v-18C36.5,4.53,32.47,0.5,27.5,0.5L27.5,0.5z" />
+        <path
+          className="st1"
+          d="M25.51,22.17H12.64c-2.98,0-5.41-2.42-5.41-5.41c0-3.15,2.67-5.7,5.92-5.38c1.18-2.27,3.52-3.7,6.1-3.7
+            c3.75,0,6.81,3.02,6.88,6.76c1.71,0.44,2.94,1.98,2.94,3.79c0,1.96-1.45,3.6-3.33,3.89C25.68,22.15,25.6,22.17,25.51,22.17z
+             M12.64,12.61c-2.29,0-4.16,1.86-4.16,4.15s1.86,4.16,4.16,4.16h12.5c1.48,0,2.68-1.2,2.68-2.68c0-1.37-1.03-2.51-2.4-2.65
+            c-0.33-0.04-0.58-0.32-0.56-0.66l0.01-0.12c0.01-0.08,0.01-0.17,0.01-0.25c0-3.1-2.52-5.63-5.63-5.63c-2.24,0-4.27,1.33-5.16,3.39
+            c-0.12,0.27-0.4,0.42-0.69,0.37C13.15,12.63,12.89,12.61,12.64,12.61z"
+        />
+        <path
+          className="st0"
+          d="M25.5,23.87c-1.23,0-2.26,0.85-2.54,2h-1.92c-0.23-0.94-0.97-1.68-1.92-1.92v-7.95l0.93,0.93
+            c0.12,0.12,0.28,0.18,0.44,0.18s0.32-0.06,0.44-0.18c0.24-0.24,0.24-0.64,0-0.88l-2-2c-0.24-0.24-0.64-0.24-0.88,0l-2,2
+            c-0.24,0.24-0.24,0.64,0,0.88c0.24,0.24,0.64,0.24,0.88,0l0.93-0.93v7.95c-0.94,0.23-1.68,0.97-1.92,1.92h-1.92
+            c-0.28-1.15-1.31-2-2.54-2c-1.45,0-2.62,1.18-2.62,2.62s1.18,2.62,2.62,2.62c1.23,0,2.26-0.85,2.54-2h1.92c0.28,1.15,1.31,2,2.54,2
+            s2.26-0.85,2.54-2h1.92c0.28,1.15,1.31,2,2.54,2c1.45,0,2.62-1.18,2.62-2.62S26.95,23.87,25.5,23.87z M11.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S12.26,27.87,11.5,27.87z M18.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S19.26,27.87,18.5,27.87z M25.5,27.87
+            c-0.76,0-1.38-0.62-1.38-1.38s0.62-1.38,1.38-1.38s1.38,0.62,1.38,1.38S26.26,27.87,25.5,27.87z"
+        />
+      </g>
+    </svg>
+  );
+};
+export default ServicesIcon;
diff --git a/src/components/AllServicesDropdown/icon-subscriptions.tsx b/src/components/AllServicesDropdown/icon-subscriptions.tsx
new file mode 100644
index 000000000..e646e97a5
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-subscriptions.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+
+const SubscriptionsIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 42 42">
+      <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="Group-31">
+          <path
+            d="M31.5,0 L10.5,0 C4.70101013,0 0,4.70101013 0,10.5 L0,31.5 C0,37.2989899 4.70101013,42 10.5,42 L31.5,42 C37.2989899,42 42,37.2989899 42,31.5 L42,10.5 C42,4.70101013 37.2989899,0 31.5,0 Z"
+            id="Path-Copy"
+            fill="#000000"
+            fillRule="nonzero"
+          ></path>
+          <g id="Group-32" transform="translate(8.000000, 8.000000)">
+            <g id="Group-30">
+              <circle id="Oval-Copy-3" stroke="#FFFFFF" cx="13" cy="13" r="13"></circle>
+              <path
+                d="M0,26 C7.17970175,26 13,20.1797017 13,13 C13,5.82029825 7.17970175,0 0,0"
+                id="Oval"
+                stroke="#EE0000"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                transform="translate(6.500000, 13.000000) rotate(-180.000000) translate(-6.500000, -13.000000) "
+              ></path>
+            </g>
+            <g id="Group-28" transform="translate(4.000000, 4.000000)">
+              <circle id="Oval-Copy-4" stroke="#FFFFFF" cx="9" cy="9" r="9"></circle>
+              <path
+                d="M9,18 C13.9705627,18 18,13.9705627 18,9 C18,4.02943725 13.9705627,0 9,0 C4.02943725,0 0,4.02943725 0,9"
+                id="Oval"
+                stroke="#EE0000"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) "
+              ></path>
+            </g>
+          </g>
+          <path d="M17,20.746988 L20.1640625,24 L26,18" id="Path-2" stroke="#FFFFFF" strokeWidth="1.15"></path>
+        </g>
+      </g>
+    </svg>
+  );
+};
+export default SubscriptionsIcon;
diff --git a/src/components/AllServicesDropdown/icon-trusted-content.tsx b/src/components/AllServicesDropdown/icon-trusted-content.tsx
new file mode 100644
index 000000000..0e36a540b
--- /dev/null
+++ b/src/components/AllServicesDropdown/icon-trusted-content.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+const TrustedContentIcon = () => {
+  return (
+    <svg width="28" height="28" viewBox="0 0 38 38">
+      <defs>
+        <style>
+          {`.uuid-d17ab8ef-2669-408a-93d8-60828bdd8082{fill:#e00;}.uuid-c4741b83-a3db-4b6d-858c-b3ae14c63c56{fill:#fff;}.uuid-83ce5ebd-b119-4710-9c52-7f345a2ee75e{fill:#4d4d4d;}`}
+        </style>
+      </defs>
+      <rect x="1" y="1" width="36" height="36" rx="9" ry="9" />
+      <path
+        className="uuid-83ce5ebd-b119-4710-9c52-7f345a2ee75e"
+        d="m28,2.25c4.27338,0,7.75,3.47662,7.75,7.75v18c0,4.27338-3.47662,7.75-7.75,7.75H10c-4.27338,0-7.75-3.47662-7.75-7.75V10c0-4.27338,3.47662-7.75,7.75-7.75h18m0-1.25H10C5.02942,1,1,5.02942,1,10v18c0,4.97058,4.02942,9,9,9h18c4.97058,0,9-4.02942,9-9V10c0-4.97058-4.02942-9-9-9h0Z"
+      />
+      <path
+        className="uuid-c4741b83-a3db-4b6d-858c-b3ae14c63c56"
+        d="m28.44238,27.55762l-4.81836-4.81836c.71344-.69464,1.27753-1.55255,1.62305-2.53125.11523-.3252-.05566-.68262-.38086-.79688-.32422-.11523-.68359.05469-.79688.38086-.75781,2.14258-2.79492,3.58301-5.06934,3.58301-2.96387,0-5.375-2.41113-5.375-5.375s2.41113-5.375,5.375-5.375c.34473,0,.625-.28027.625-.625s-.28027-.625-.625-.625c-3.65332,0-6.625,2.97168-6.625,6.625s2.97168,6.625,6.625,6.625c1.32489,0,2.57733-.40747,3.6358-1.10443l4.92181,4.92181c.12207.12207.28223.18262.44238.18262s.32031-.06055.44238-.18262c.24316-.24414.24316-.64062,0-.88477Z"
+      />
+      <path
+        className="uuid-d17ab8ef-2669-408a-93d8-60828bdd8082"
+        d="m20.44238,27.55762l-2-2c-.24414-.24414-.64062-.24414-.88477,0-.24316.24414-.24316.64062,0,.88477l.90601.9054c-4.91901-.28046-8.83862-4.35986-8.83862-9.34778,0-5.16895,4.20605-9.375,9.375-9.375.34473,0,.625-.28027.625-.625s-.28027-.625-.625-.625c-5.8584,0-10.625,4.7666-10.625,10.625,0,5.69482,4.50757,10.34442,10.14038,10.60046l-.95776.95715c-.24316.24414-.24316.64062,0,.88477.12207.12207.28223.18262.44238.18262s.32031-.06055.44238-.18262l2-2c.24316-.24414.24316-.64062,0-.88477Z"
+      />
+      <path
+        className="uuid-d17ab8ef-2669-408a-93d8-60828bdd8082"
+        d="m25.5,17.625c-2.27441,0-4.125-1.85059-4.125-4.125v-4.02832c0-.29492.20605-.5498.49512-.61133l3.5-.74414c.08594-.01758.17383-.01758.25977,0l3.5.74414c.28906.06152.49512.31641.49512.61133v4.02832c0,2.27441-1.85059,4.125-4.125,4.125Zm-2.875-7.64746v3.52246c0,1.58496,1.29004,2.875,2.875,2.875s2.875-1.29004,2.875-2.875v-3.52246l-2.875-.61133-2.875.61133Z"
+      />
+      <path
+        className="uuid-c4741b83-a3db-4b6d-858c-b3ae14c63c56"
+        d="m25,14.35254c-.16016,0-.32031-.06055-.44238-.18262l-1-1c-.24316-.24414-.24316-.64062,0-.88477.24414-.24414.64062-.24414.88477,0l.55762.55859,1.55762-1.55859c.24414-.24414.64062-.24414.88477,0,.24316.24414.24316.64062,0,.88477l-2,2c-.12207.12207-.28223.18262-.44238.18262Z"
+      />
+    </svg>
+  );
+};
+export default TrustedContentIcon;