Uniformize folder structure (#693)

* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests

front/src/modules/ui/editable-field/property-box/components/PropertyBox.tsx

@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+
+const StyledPropertyBoxContainer = styled.div`
+  align-self: stretch;
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  padding: ${({ theme }) => theme.spacing(3)};
+`;
+
+interface PropertyBoxProps {
+  children: React.ReactNode;
+  extraPadding?: boolean;
+}
+
+export function PropertyBox({ children }: PropertyBoxProps) {
+  return <StyledPropertyBoxContainer>{children}</StyledPropertyBoxContainer>;
+}

front/src/modules/ui/editable-field/property-box/components/PropertyBoxItem.tsx

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+const StyledPropertyBoxItem = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledIconContainer = styled.div`
+  align-items: center;
+  display: flex;
+
+  svg {
+    align-items: center;
+    display: flex;
+    height: 16px;
+    justify-content: center;
+    width: 16px;
+  }
+`;
+
+const StyledValueContainer = styled.div`
+  align-content: flex-start;
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.primary};
+  display: flex;
+  flex: 1 0 0;
+  flex-wrap: wrap;
+`;
+
+const StyledLabelAndIconContainer = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+export function PropertyBoxItem({
+  icon,
+  label,
+  value,
+}: {
+  icon: ReactNode;
+  label?: string;
+  value: ReactNode;
+}) {
+  return (
+    <StyledPropertyBoxItem>
+      <StyledLabelAndIconContainer>
+        <StyledIconContainer>{icon}</StyledIconContainer>
+        {label}
+      </StyledLabelAndIconContainer>
+      <StyledValueContainer>{value}</StyledValueContainer>
+    </StyledPropertyBoxItem>
+  );
+}