fix: Reverting new icons for app layout (#21202)

## 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
This commit is contained in:
Ashok Kumar M 2023-03-06 22:32:57 +05:30 committed by GitHub
parent f79b5cdf67
commit 3a5ecc213d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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>
);