1909 object edit add icon section (#1995)

* wip

* wip

* wip

* wip

* wip

* remove hardcoded values and use theme values

* add styles to StyledContainer

* fix iconPicker bug

* wip

* refactor IconPicker to include IconButton

* close IconPicker on click outside

* close IconPicker on escape and enter

* refactor to use DropDownMenu

* refactor to use DropDownMenu

* modify default icon

* Refactor to use useIconPicker hook

* fix WithSearch story

* reinitialized searchString state on close

* create and update stories for the iconPicker

* remove comments

* use theme for gap

* remove align-self

* fix typo in icon

* fix type any

* fix merge conflicts

* remove experimental css properties

front/src/modules/settings/components/IconWithLabel.tsx

@@ -0,0 +1,42 @@
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+
+type IconWithLabelProps = {
+  Icon: IconComponent;
+  label: string;
+};
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(3)};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledSubContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+const StyledItemLabel = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-style: normal;
+  font-weight: ${({ theme }) => theme.font.size.md};
+  line-height: ${({ theme }) => theme.text.lineHeight.md};
+`;
+
+export const IconWithLabel = ({ Icon, label }: IconWithLabelProps) => {
+  const theme = useTheme();
+
+  return (
+    <StyledContainer>
+      <StyledSubContainer>
+        <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />
+        <StyledItemLabel>{label}</StyledItemLabel>
+      </StyledSubContainer>
+    </StyledContainer>
+  );
+};

front/src/modules/settings/components/SettingsIconSection.tsx

@@ -0,0 +1,55 @@
+import styled from '@emotion/styled';
+
+import { IconComponent } from '@/ui/icon/types/IconComponent';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { H2Title } from '@/ui/typography/components/H2Title';
+
+import ArrowRight from '../assets/ArrowRight.svg';
+
+import { IconWithLabel } from './IconWithLabel';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledArrowContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 32px;
+  justify-content: center;
+`;
+
+type SettingsIconSectionProps = {
+  Icon: IconComponent;
+  iconKey: string;
+  setIconPicker: (icon: { Icon: IconComponent; iconKey: string }) => void;
+};
+
+export const SettingsIconSection = ({
+  Icon,
+  iconKey,
+  setIconPicker,
+}: SettingsIconSectionProps) => {
+  return (
+    <section>
+      <H2Title
+        title="Icon"
+        description="The icon that will be displayed in the sidebar."
+      />
+      <StyledContainer>
+        <IconPicker
+          selectedIconKey={iconKey}
+          onChange={(icon) => {
+            setIconPicker({ Icon: icon.Icon, iconKey: icon.iconKey });
+          }}
+        />
+        <StyledArrowContainer>
+          <img src={ArrowRight} alt="Arrow right" width={32} height={16} />
+        </StyledArrowContainer>
+        <IconWithLabel Icon={Icon} label="Workspaces" />
+      </StyledContainer>
+    </section>
+  );
+};