show difficulty level images for each bot type

public/images/slack-integration/slackbot-difficulty-level-easy.svg

@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1 {
+        stroke: #81d5b8;
+        stroke-width: 3px;
+      }
+
+      .cls-2 {
+        font-family: NotoSansCJKjp-Bold, Noto Sans CJK JP;
+        font-size: 16px;
+        font-weight: 700;
+        fill: #81d5b8;
+      }
+
+      .cls-3 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="Group_4361" data-name="Group 4361" transform="translate(-71.69 -49.04)">
+    <g id="Group_4358" data-name="Group 4358">
+      <g id="Group_4357" data-name="Group 4357">
+        <g id="Ellipse_97" data-name="Ellipse 97" class="cls-1" transform="translate(71.69 49.04)">
+          <circle class="cls-3" cx="30" cy="30" r="30"/>
+          <circle class="cls-4" cx="30" cy="30" r="28.5"/>
+        </g>
+        <text id="EASY" class="cls-2" transform="translate(83.884 89.632) rotate(-11)"><tspan x="0" y="0">EASY</tspan></text>
+      </g>
+    </g>
+  </g>
+</svg>

public/images/slack-integration/slackbot-difficulty-level-hard.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1 {
+        stroke: #ff8080;
+        stroke-width: 3px;
+      }
+
+      .cls-2 {
+        fill: #ff8080;
+        font-size: 16px;
+        font-family: NotoSansCJKjp-Bold, Noto Sans CJK JP;
+        font-weight: 700;
+      }
+
+      .cls-3 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="Group_4360" data-name="Group 4360" transform="translate(-303.305 -23.039)">
+    <g id="Ellipse_99" data-name="Ellipse 99" class="cls-1" transform="translate(303.305 23.039)">
+      <circle class="cls-3" cx="30" cy="30" r="30"/>
+      <circle class="cls-4" cx="30" cy="30" r="28.5"/>
+    </g>
+    <text id="HARD" class="cls-2" transform="translate(312.93 64.277) rotate(-11)"><tspan x="0" y="0">HARD</tspan></text>
+  </g>
+</svg>

public/images/slack-integration/slackbot-difficulty-level-normal.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 60 60">
+  <defs>
+    <style>
+      .cls-1, .cls-4 {
+        fill: none;
+      }
+
+      .cls-1 {
+        stroke: #ffce60;
+        stroke-width: 3px;
+      }
+
+      .cls-2 {
+        fill: #ffce60;
+        font-size: 11px;
+        font-family: NotoSansCJKjp-Bold, Noto Sans CJK JP;
+        font-weight: 700;
+      }
+
+      .cls-3 {
+        stroke: none;
+      }
+    </style>
+  </defs>
+  <g id="Group_4359" data-name="Group 4359" transform="translate(-163.69 -44.039)">
+    <g id="Ellipse_98" data-name="Ellipse 98" class="cls-1" transform="translate(163.69 44.039)">
+      <circle class="cls-3" cx="30" cy="30" r="30"/>
+      <circle class="cls-4" cx="30" cy="30" r="28.5"/>
+    </g>
+    <text id="NORMAL" class="cls-2" transform="translate(171.836 83.813) rotate(-11)"><tspan x="0" y="0">NORMAL</tspan></text>
+  </g>
+</svg>

src/client/js/components/Admin/SlackIntegration/BotTypeCard.jsx

@@ -7,6 +7,7 @@ const botDetails = {
   officialBot: {
     botType: 'officialBot',
     botTypeCategory: 'official_bot',
+    difficultyLevelImage: '/images/slack-integration/slackbot-difficulty-level-easy.svg',
     setUp: 'easy',
     multiWSIntegration: 'possible',
     securityControl: 'impossible',
@@ -15,6 +16,7 @@ const botDetails = {
     botType: 'customBotWithoutProxy',
     botTypeCategory: 'custom_bot',
     supplementaryBotName: 'without_proxy',
+    difficultyLevelImage: '/images/slack-integration/slackbot-difficulty-level-normal.svg',
     setUp: 'normal',
     multiWSIntegration: 'impossible',
     securityControl: 'possible',
@@ -23,6 +25,7 @@ const botDetails = {
     botType: 'customBotWithProxy',
     botTypeCategory: 'custom_bot',
     supplementaryBotName: 'with_proxy',
+    difficultyLevelImage: '/images/slack-integration/slackbot-difficulty-level-hard.svg',
     setUp: 'hard',
     multiWSIntegration: 'possible',
     securityControl: 'possible',
@@ -68,11 +71,7 @@ const BotTypeCard = (props) => {
         <div className="card-text">
           <div className="my-2">
             <div className="d-flex justify-content-between mb-3">
-              {/* TODO add image of difficulties by GW-5638
-               <span>{t('admin:slack_integration.selecting_bot_types.set_up')}</span>
-               <span className={`bot-type-disc-${value.setUp}`}>{t(`admin:slack_integration.selecting_bot_types.${value.setUp}`)}</span>  */}
-
-
+              <img src={botDetails[props.botType].difficultyLevelImage}></img>
             </div>
             <div className="d-flex justify-content-between mb-3">
               <span>{t('admin:slack_integration.selecting_bot_types.multiple_workspaces_integration')}</span>