Uniformize folder structure (#693)

* Uniformize folder structure

* Fix icons

* Fix icons

* Fix tests

* Fix tests

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -0,0 +1,13 @@
+import styled from '@emotion/styled';
+
+export const ShowPageLeftContainer = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  border-bottom-left-radius: 8px;
+  border-right: 1px solid ${({ theme }) => theme.border.color.light};
+  border-top-left-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  padding: 0px ${({ theme }) => theme.spacing(3)};
+  width: 320px;
+`;

front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -0,0 +1,9 @@
+import styled from '@emotion/styled';
+
+export const ShowPageRightContainer = styled.div`
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+`;

front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx

@@ -0,0 +1,91 @@
+import { Tooltip } from 'react-tooltip';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { v4 as uuidV4 } from 'uuid';
+
+import { Avatar } from '@/users/components/Avatar';
+import {
+  beautifyExactDate,
+  beautifyPastDateRelativeToNow,
+} from '~/utils/date-utils';
+
+type OwnProps = {
+  id?: string;
+  logoOrAvatar?: string;
+  title: string;
+  date: string;
+};
+
+const StyledShowPageSummaryCard = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(6)};
+  justify-content: center;
+  padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
+    ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledInfoContainer = styled.div`
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledDate = styled.div`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  cursor: pointer;
+`;
+
+const StyledTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.xl};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+const StyledTooltip = styled(Tooltip)`
+  background-color: ${({ theme }) => theme.background.primary};
+  box-shadow: ${({ theme }) => theme.boxShadow.light};
+
+  color: ${({ theme }) => theme.font.color.primary};
+
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+export function ShowPageSummaryCard({
+  id,
+  logoOrAvatar,
+  title,
+  date,
+}: OwnProps) {
+  const beautifiedCreatedAt =
+    date !== '' ? beautifyPastDateRelativeToNow(date) : '';
+  const exactCreatedAt = date !== '' ? beautifyExactDate(date) : '';
+  const theme = useTheme();
+  const dateElementId = `date-id-${uuidV4()}`;
+
+  return (
+    <StyledShowPageSummaryCard>
+      <Avatar
+        avatarUrl={logoOrAvatar}
+        size={theme.icon.size.xl}
+        colorId={id}
+        placeholder={title}
+      />
+      <StyledInfoContainer>
+        <StyledTitle>{title}</StyledTitle>
+        <StyledDate id={dateElementId}>
+          Added {beautifiedCreatedAt} ago
+        </StyledDate>
+        <StyledTooltip
+          anchorSelect={`#${dateElementId}`}
+          content={exactCreatedAt}
+          clickable
+          noArrow
+          place="right"
+        />
+      </StyledInfoContainer>
+    </StyledShowPageSummaryCard>
+  );
+}