From 3a5ecc213d9d6d70d0519f00fb2c54572097c283 Mon Sep 17 00:00:00 2001
From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Date: Mon, 6 Mar 2023 22:32:57 +0530
Subject: [PATCH] fix: Reverting new icons for app layout (#21202)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Reverting changes of icons of app layout designed as part of polishing
efforts done whilst working on mobile responsiveness.

Fixes #21201
> if no issue exists, please create an issue and ask the maintainers
about this first


Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video


## Type of change

> Please delete options that are not relevant.

- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update


## How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Provide
instructions, so we can reproduce.
> Please also list any relevant details for your test configuration.
> Delete anything that is not important

- Manual
- Jest
- Cypress

### Test Plan
> Add Testsmith test cases links that relate to this PR

### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)


## Checklist:
### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] 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
---
 .../Editor/MainContainerLayoutControl.tsx     | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/app/client/src/pages/Editor/MainContainerLayoutControl.tsx b/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
index 11121ea23f..8ffcdc0317 100644
--- a/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
+++ b/app/client/src/pages/Editor/MainContainerLayoutControl.tsx
@@ -1,14 +1,10 @@
-import { ReactComponent as DesktopIcon } from "assets/icons/ads/app-icons/monitor-alt.svg";
-import { ReactComponent as MultiDeviceIcon } from "assets/icons/ads/app-icons/monitor-smartphone-alt.svg";
-import { ReactComponent as MobileIcon } from "assets/icons/ads/app-icons/smartphone-alt.svg";
-import { ReactComponent as TabletIcon } from "assets/icons/ads/app-icons/tablet-alt.svg";
-import { ReactComponent as TabletLandscapeIcon } from "assets/icons/ads/app-icons/tabletr-alt.svg";
 import classNames from "classnames";
 import React, { useCallback, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 
 import { updateApplicationLayout } from "actions/applicationActions";
-import { IconName, TooltipComponent } from "design-system-old";
+import { Colors } from "constants/Colors";
+import { Icon, IconName, IconSize, TooltipComponent } from "design-system-old";
 import {
   AppLayoutConfig,
   SupportedLayouts,
@@ -18,13 +14,6 @@ import {
   getCurrentApplicationLayout,
 } from "selectors/editorSelectors";
 
-const IconObj: any = {
-  FLUID: <MultiDeviceIcon />,
-  DESKTOP: <DesktopIcon />,
-  TABLET: <TabletIcon />,
-  TABLET_LARGE: <TabletLandscapeIcon />,
-  MOBILE: <MobileIcon />,
-};
 interface AppsmithLayoutConfigOption {
   name: string;
   type: SupportedLayouts;
@@ -151,9 +140,11 @@ export function MainContainerLayoutControl() {
                 ref={(input) => buttonRefs.push(input)}
                 tabIndex={index === focusedIndex ? 0 : -1}
               >
-                <div style={{ width: "16px", height: "16px" }}>
-                  {IconObj[layoutOption.type]}
-                </div>
+                <Icon
+                  fillColor={Colors.BLACK}
+                  name={layoutOption.icon}
+                  size={layoutOption.iconSize || IconSize.MEDIUM}
+                />
               </button>
             </TooltipComponent>
           );