chore: Updating the graphics for Access control upgrade page (#19154)

## Description

> Updating the graphics for the Access control upgrade page. Also,
removing the feature flag.

Fixes [#19072](https://github.com/appsmithorg/appsmith/issues/19072)

## Type of change

- Uptaing images


## How Has This Been Tested?
> Locally checked that the new images are being used

- Manual

## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

app/client/src/ce/constants/messages.ts

@@ -1077,7 +1077,7 @@ export const ACCESS_CONTROL_UPGRADE_PAGE_SUB_HEADING = () =>
 export const SECURITY_APPS_LEAST_PRIVILEGE = () =>
   "Secure apps by the least privilege needed";
 export const SECURITY_APPS_LEAST_PRIVILEGE_DETAIL1 = () =>
-  "Create roles by the least privilege needed as defaults, e.g.: View only, assign them to users in groups, e.g.: Marketing, and modify for special access, e.g.: Content creators_Execute queries";
+  `Create roles by the least privilege needed as defaults, <span>e.g.: View only</span>, assign them to users in groups, <span>e.g.: Marketing</span>, and modify for special access, <span>e.g.: Content creators_Execute queries</span>`;
 export const PREVENT_ACCIDENTAL_DAMAGE = () =>
   "Prevent accidental damage to data";
 export const PREVENT_ACCIDENTAL_DAMAGE_DETAIL1 = () =>

app/client/src/ce/pages/AdminSettings/LeftPane.tsx

@@ -158,20 +158,18 @@ export default function LeftPane() {
       <HeaderContainer>
         <StyledHeader>Business</StyledHeader>
         <CategoryList data-testid="t--enterprise-settings-category-list">
-          {features.RBAC && (
-            <CategoryItem>
-              <StyledLink
-                $active={category === "access-control"}
-                data-testid="t--enterprise-settings-category-item-access-control"
-                to="/settings/access-control"
-              >
-                <div>
-                  <Icon name="lock-2-line" size={IconSize.XL} />
-                </div>
-                <div>Access Control</div>
-              </StyledLink>
-            </CategoryItem>
-          )}
+          <CategoryItem>
+            <StyledLink
+              $active={category === "access-control"}
+              data-testid="t--enterprise-settings-category-item-access-control"
+              to="/settings/access-control"
+            >
+              <div>
+                <Icon name="lock-2-line" size={IconSize.XL} />
+              </div>
+              <div>Access Control</div>
+            </StyledLink>
+          </CategoryItem>
           <CategoryItem>
             <StyledLink
               $active={category === "audit-logs"}

app/client/src/ce/pages/Upgrade/AccessControlUpgradePage.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Carousel, Header } from "./types";
 import UpgradePage from "./UpgradePage";
-import SecureAppsLeastPrivilegeImage from "assets/svg/upgrade/access-control/secure-apps-least-privilege.png";
-import RestrictPublicExposureImage from "assets/svg/upgrade/access-control/restrict-public-exposure.png";
-import PreventAccidentalDamageImage from "assets/svg/upgrade/access-control/prevent-accidental-damage.png";
+import SecureAppsLeastPrivilegeImage from "assets/images/upgrade/access-control/secure-apps-least-privilege.png";
+import RestrictPublicExposureImage from "assets/images/upgrade/access-control/restrict-public-exposure.png";
+import PreventAccidentalDamageImage from "assets/images/upgrade/access-control/prevent-accidental-damage.png";
 import { createMessage } from "design-system/build/constants/messages";
 import {
   ACCESS_CONTROL_UPGRADE_PAGE_FOOTER,
@@ -40,17 +40,17 @@ export function AccessControlUpgradePage() {
   const carousel: Carousel = {
     triggers: [
       {
-        icon: "lock-2-line",
+        icon: "user-shared-line",
         heading: createMessage(SECURITY_APPS_LEAST_PRIVILEGE),
         details: [createMessage(SECURITY_APPS_LEAST_PRIVILEGE_DETAIL1)],
       },
       {
-        icon: "search-eye-line",
+        icon: "delete-row",
         heading: createMessage(PREVENT_ACCIDENTAL_DAMAGE),
         details: [createMessage(PREVENT_ACCIDENTAL_DAMAGE_DETAIL1)],
       },
       {
-        icon: "alert-line",
+        icon: "eye-off",
         heading: createMessage(RESTRICT_PUBLIC_EXPOSURE),
         details: [createMessage(RESTRICT_PUBLIC_EXPOSURE_DETAIL1)],
       },

app/client/src/ce/pages/Upgrade/Carousel.tsx

@@ -26,17 +26,8 @@ const CarouselContainer = styled.div`
       height: 56px;
       cursor: pointer;
 
-      &.active {
-        height: max-content;
-        min-height: 156px;
-        box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.06),
-          0 4px 8px -2px rgba(0, 0, 0, 0.1);
-
-        background-color: var(--ads-color-black-0);
-
-        & .icon-container .cs-icon svg {
-          fill: var(--ads-color-orange-500);
-        }
+      .icon-container .cs-icon svg {
+        fill: var(--ads-color-black-700);
       }
 
       & .trigger {
@@ -55,6 +46,42 @@ const CarouselContainer = styled.div`
              * and thus meet the design expectations.
              */
             margin-top: -2px;
+
+            span {
+              color: var(--ads-color-black-700);
+            }
+          }
+
+          & .trigger-details-container {
+            .cs-text {
+              span {
+                color: var(--ads-color-orange-500);
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
+
+      &.active {
+        height: max-content;
+        min-height: 156px;
+        box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.06),
+          0 4px 8px -2px rgba(0, 0, 0, 0.1);
+
+        background-color: var(--ads-color-black-0);
+
+        & .icon-container .cs-icon svg {
+          fill: var(--ads-color-orange-500);
+        }
+
+        & .trigger {
+          & .trigger-content {
+            & .trigger-heading {
+              span {
+                color: var(--ads-text-heading-color);
+              }
+            }
           }
         }
       }
@@ -129,7 +156,10 @@ export function CarouselComponent(props: CarouselProps) {
                             className={"expanded"}
                             key={`trigger-detail-${di}`}
                           >
-                            <Text type={TextType.P1}>{detail}</Text>
+                            <Text
+                              dangerouslySetInnerHTML={{ __html: detail }}
+                              type={TextType.P1}
+                            />
                           </div>
                         );
                       })}