@griddo/ax 11.4.24 → 11.5.0

package/src/helpers/files.tsx

@@ -1,3 +1,5 @@
+import { IFolderTree } from "@ax/types";
+
 const getFileIcon = (type: string) => {
   switch (type) {
     case "pdf":
@@ -30,4 +32,38 @@ const getFileIcon = (type: string) => {
   }
 };
 
-export { getFileIcon };
+const getPath = (tree: IFolderTree[], targetID: number): IFolderTree[] | undefined => {
+  for (const element of tree) {
+    if (element.id === targetID) {
+      return [element];
+    }
+    if (element.children.length) {
+      const result = getPath(element.children, targetID);
+      if (result) {
+        result.unshift(element);
+        return result;
+      }
+    }
+  }
+};
+
+const getNewBreadcrumb = (tree: IFolderTree[], target: number | null) => {
+  if (!target) return [];
+
+  return getPath(tree, target) || [];
+};
+
+const updatePropertyById = (id: number, data: IFolderTree[], property: string, value: any) => {
+  for (let i = 0; i < data.length; i++) {
+    if (data[i].id === id) {
+      data[i] = { ...data[i], [property]: value };
+    }
+    if (data[i].children !== undefined && data[i].children.length > 0) {
+      data[i].children = updatePropertyById(id, data[i].children, property, value);
+    }
+  }
+
+  return data;
+};
+
+export { getFileIcon, getNewBreadcrumb, updatePropertyById };

package/src/helpers/index.tsx

@@ -120,7 +120,7 @@ import {
 
 import { parseTheme } from "./parseTheme";
 
-import { getFileIcon } from "./files";
+import { getFileIcon, getNewBreadcrumb, updatePropertyById } from "./files";
 
 import { getMaxColumns, updateColumns } from "./customColumns";
 
@@ -225,6 +225,8 @@ export {
   stripHtml,
   encodeData,
   getFileIcon,
+  getNewBreadcrumb,
+  updatePropertyById,
   arrayInsert,
   getMaxColumns,
   updateColumns,

package/src/modules/App/Routing/NavMenu/NavItem/NavSubItem/style.tsx

@@ -1,8 +1,13 @@
 import styled from "styled-components";
 
 export const SubItem = styled.li<{ active: boolean; type: string }>`
-  ${(p) => p.active ? p.theme.textStyle.uiMSemibold : p.theme.textStyle.uiM};
-  background-color: ${(p) => (p.active ? p.theme.color.overlayHoverDark : `transparent`)};
+  ${(p) => (p.active ? p.theme.textStyle.uiMSemibold : p.theme.textStyle.uiM)};
+  background-color: ${(p) =>
+    p.active && p.type === "multisite"
+      ? "#23255C"
+      : p.active && p.type !== "multisite"
+        ? p.theme.color.overlayHoverDark
+        : `transparent`};
   display: block;
   color: ${(p) => (p.active ? p.theme.color.textHighEmphasisInverse : p.theme.color.textMediumEmphasisInverse)};
   clear: both;

package/src/modules/App/Routing/NavMenu/index.tsx

@@ -43,7 +43,8 @@ const NavMenu = (props: IProps) => {
     currentSiteInfo && currentSiteInfo.smallAvatar ? currentSiteInfo.smallAvatar : logoMiniPlaceholder;
 
   const sitesPath = "/sites/";
-  const isSite = location.pathname.includes(sitesPath) && location.pathname.length > sitesPath.length;
+  const isSite =
+    location.pathname.includes(sitesPath) && location.pathname.length > sitesPath.length && !!currentSiteInfo;
   const siteSelector = location.pathname === "/sites";
 
   const goToPublishedSite = () => {

package/src/modules/FileDrive/FileFilters/SortBy/style.tsx

@@ -5,6 +5,9 @@ import { Header } from "@ax/components/TableList/style";
 const SortBy = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 100%;
   cursor: pointer;
+  flex-shrink: 0;
+  white-space: nowrap;
+  flex-wrap: nowrap;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};
   }

package/src/modules/FileDrive/FileModal/DetailPanel/UsageContent/index.tsx

@@ -46,7 +46,7 @@ const UsageContent = (props: IProps) => {
           setCurrentPageID(page.id);
           setHistoryPush("/sites/pages/editor", true);
         };
-        return <ItemGroup title={item.siteName} items={item.pages} onClick={handleClick} />;
+        return <ItemGroup key={item.siteId} title={item.siteName} items={item.pages} onClick={handleClick} />;
       });
     }
   };

package/src/modules/FileDrive/FolderTree/MenuItem/index.tsx

@@ -12,7 +12,9 @@ const MenuItem = (props: IMenuItem) => {
 
   const [isExpanded, setIsExpanded] = useState(true);
 
-  const hasChildren = item.children && item.children.length > 0;
+  const hasChildren =
+    item.children &&
+    item.children.filter((listItem) => !hidden || (hidden && !hidden.includes(listItem.id))).length > 0;
 
   const handleToggle = (e: React.MouseEvent<HTMLDivElement>) => {
     e.stopPropagation();
@@ -49,7 +51,7 @@ const MenuItem = (props: IMenuItem) => {
     <li>
       <S.ItemWrapper>
         <S.Item onClick={handleClick} selected={folderID === item.id}>
-          <S.ArrowWrapper onClick={handleToggle}>{getIcon(item)}</S.ArrowWrapper>
+          {hasChildren && <S.ArrowWrapper onClick={handleToggle}>{getIcon(item)}</S.ArrowWrapper>}
           <S.IconWrapper>
             <Icon name="project" size="16" />
           </S.IconWrapper>
@@ -58,14 +60,16 @@ const MenuItem = (props: IMenuItem) => {
         </S.Item>
       </S.ItemWrapper>
       {hasChildren && isExpanded && (
-        <MenuList
-          list={item.children}
-          hidden={hidden}
-          trimNames={trimNames}
-          createAction={createAction}
-          folderID={folderID}
-          onClick={onClick}
-        />
+        <S.ListWrapper>
+          <MenuList
+            list={item.children}
+            hidden={hidden}
+            trimNames={trimNames}
+            createAction={createAction}
+            folderID={folderID}
+            onClick={onClick}
+          />
+        </S.ListWrapper>
       )}
     </li>
   );

package/src/modules/FileDrive/FolderTree/MenuItem/style.tsx

@@ -32,7 +32,10 @@ const Name = styled.div`
   ${(p) => p.theme.textStyle.uiS};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-left: ${(p) => p.theme.spacing.xs};
+  flex: 1;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 
 const RootName = styled.div`
@@ -66,4 +69,8 @@ const Title = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
-export { ItemWrapper, Item, Name, RootName, IconWrapper, ArrowWrapper, Title, NewIconWrapper };
+const ListWrapper = styled.div`
+  padding-left: ${(p) => `calc(${p.theme.spacing.s} * 2)`};
+`;
+
+export { ItemWrapper, Item, Name, RootName, IconWrapper, ArrowWrapper, Title, NewIconWrapper, ListWrapper };

package/src/modules/FileDrive/FolderTree/MenuList/index.tsx

@@ -3,12 +3,19 @@ import { IFolderTree } from "@ax/types";
 import MenuItem from "../MenuItem";
 
 const MenuList = (props: IMenuListProps) => {
-  const { list, folderID, createAction, onClick } = props;
+  const { list, folderID, hidden, createAction, onClick } = props;
 
   return (
     <ul>
       {list.map((listItem, index) => (
-        <MenuItem key={index} item={listItem} onClick={onClick} folderID={folderID} createAction={createAction} />
+        <MenuItem
+          key={index}
+          item={listItem}
+          onClick={onClick}
+          folderID={folderID}
+          createAction={createAction}
+          hidden={hidden}
+        />
       ))}
     </ul>
   );

package/src/modules/FileDrive/index.tsx

@@ -81,12 +81,14 @@ const FileDrive = (props: IProps) => {
   const [isPanelOpen, setPanelOpen] = useState(false);
   const [fileSelected, setFileSelected] = useState<IFile | null>(null);
   const [selectedFolder, setSelectedFolder] = useState<number>(currentFolderID || 0);
-  const filesIds: number[] = items.map((file: any) => file.id) || [];
+  const filesIds: number[] = items.map((file) => file.id) || [];
   const [galleryItems, setGalleryItems] = useState<number[]>(filesIds);
   const [galleryDelete, setGalleryDelete] = useState(true);
   const [numDocs, setNumDocs] = useState(1);
   const [progressItems, setProgressItems] = useState<number[]>([]);
+  const [wrapperWidth, setWrapperWidth] = useState<number>();
   const tableRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
   const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
   const { isOpen: isUploadOpen, toggleModal: toggleUploadModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
@@ -144,29 +146,29 @@ const FileDrive = (props: IProps) => {
   const allowedToAddSiteFile = usePermission("mediaGallery.addFiles");
   const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalFiles");
   const allowedToAddGlobalFileFromSite = usePermission("mediaGallery.addGlobalFilesFromSite");
-  const allowedToAddFile = isTabGlobal
-    ? allowedToAddGlobalFileFromSite
-    : isSiteView
-      ? allowedToAddSiteFile
-      : allowedToAddGlobalFile;
+  const allowedToAddFile = !isSiteView
+    ? allowedToAddGlobalFile
+    : isTabGlobal
+      ? allowedToAddGlobalFileFromSite
+      : allowedToAddSiteFile;
 
   const allowedToEditSiteFile = usePermission("mediaGallery.editFiles");
   const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalFiles");
   const allowedToEditGlobalFileFromSite = usePermission("mediaGallery.editGlobalFilesInSite");
-  const allowedToEditFile = isTabGlobal
-    ? allowedToEditGlobalFileFromSite
-    : isSiteView
-      ? allowedToEditSiteFile
-      : allowedToEditGlobalFile;
+  const allowedToEditFile = !isSiteView
+    ? allowedToEditGlobalFile
+    : isTabGlobal
+      ? allowedToEditGlobalFileFromSite
+      : allowedToEditSiteFile;
 
   const allowedToDeleteSiteFile = usePermission("mediaGallery.deleteFiles");
   const allowedToDeleteGlobalFile = usePermission("global.mediaGallery.deleteGlobalFiles");
   const allowedToDeleteGlobalFileFromSite = usePermission("mediaGallery.deleteGlobalFilesInSite");
-  const allowedToDeleteFile = isTabGlobal
-    ? allowedToDeleteGlobalFileFromSite
-    : isSiteView
-      ? allowedToDeleteSiteFile
-      : allowedToDeleteGlobalFile;
+  const allowedToDeleteFile = !isSiteView
+    ? allowedToDeleteGlobalFile
+    : isTabGlobal
+      ? allowedToDeleteGlobalFileFromSite
+      : allowedToDeleteSiteFile;
 
   const getParams = useCallback(() => {
     const params = {
@@ -178,13 +180,14 @@ const FileDrive = (props: IProps) => {
     };
 
     return params;
-  }, [currentFolderID, selectedTab, searchQuery, filterQuery]);
+  }, [currentFolderID, searchQuery, filterQuery, siteID]);
 
   useLayoutEffect(() => {
     return () => {
       updateCurrentFolder(null);
       updateTab("site");
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
@@ -192,22 +195,31 @@ const FileDrive = (props: IProps) => {
       const params = getParams();
       await getFolderContent(params);
     };
-    handleGetContent();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [getParams]);
-
-  useEffect(() => {
     const handleGetTree = async () => await getFoldersTree(siteID);
     handleGetTree();
+    handleGetContent();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedTab]);
+  }, [getParams, selectedTab]);
 
   useEffect(() => {
-    const filesIds: number[] = items.map((file: any) => file.id) || [];
+    const filesIds = items.map((file) => file.id) || [];
     setGalleryItems(filesIds);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [items]);
 
+  useEffect(() => {
+    const handleResize = () => {
+      if (wrapperRef.current) {
+        setWrapperWidth(wrapperRef.current.offsetWidth);
+      }
+    };
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wrapperRef.current]);
+
   const {
     resetBulkSelection,
     selectedItems,
@@ -275,7 +287,7 @@ const FileDrive = (props: IProps) => {
     await getFolderContent(params);
   };
 
-  const uploadMultipleFiles = async (files: File[], progressArray: number[]) => {
+  const uploadMultipleFiles = async (files: File[]) => {
     try {
       let index = 0;
       while (files.length) {
@@ -298,7 +310,7 @@ const FileDrive = (props: IProps) => {
     const initialProgress = files.map(() => 0);
     setProgressItems(initialProgress);
 
-    await uploadMultipleFiles(files, initialProgress);
+    await uploadMultipleFiles(files);
 
     setProgressItems([]);
     const params = getParams();
@@ -610,8 +622,13 @@ const FileDrive = (props: IProps) => {
 
   return (
     <MainWrapper backLink={false} title="File Drive Manager" rightButton={rightButtonProps}>
-      <S.Wrapper>
-        <S.FolderPanel isOpen={isPanelOpen} ref={ref} style={{ width: isPanelOpen ? "240px" : "0" }}>
+      <S.Wrapper ref={wrapperRef}>
+        <S.FolderPanel
+          isOpen={isPanelOpen}
+          ref={ref}
+          style={{ width: isPanelOpen ? "240px" : "0" }}
+          maxWidth={wrapperWidth}
+        >
           <S.FolderPanelContent>
             <FolderTree
               folderID={currentFolderID || 0}

package/src/modules/FileDrive/style.tsx

@@ -7,13 +7,13 @@ const Wrapper = styled.div`
   height: 100%;
 `;
 
-const FolderPanel = styled.div<{ isOpen: boolean }>`
+const FolderPanel = styled.div<{ isOpen: boolean; maxWidth?: number }>`
   position: relative;
   background-color: ${(p) => p.theme.color.uiBackground02};
   border-right: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   width: ${(p) => (p.isOpen ? "240px" : "0")};
   min-width: ${(p) => (p.isOpen ? "240px" : "0")};
-  max-width: ${(p) => (p.isOpen ? "50%" : "0")};
+  max-width: ${(p) => (p.isOpen && p.maxWidth ? `${p.maxWidth - 860}px` : "0")};
   overflow: hidden;
   flex-shrink: 0;
 `;
@@ -32,6 +32,7 @@ const ContentWrapper = styled.div`
   overflow: auto;
   display: flex;
   flex-direction: column;
+  min-width: 860px;
 `;
 
 const FolderContent = styled.div`
@@ -174,11 +175,11 @@ const ResizeHandle = styled.div`
 `;
 
 const SearchTags = styled.div`
-  & > div:nth-child(1){
-    margin-top: ${p => p.theme.spacing.m};
+  & > div:nth-child(1) {
+    margin-top: ${(p) => p.theme.spacing.m};
   }
-  & > div:nth-child(2){
-    margin-top: ${p => p.theme.spacing.xs};
+  & > div:nth-child(2) {
+    margin-top: ${(p) => p.theme.spacing.xs};
   }
 `;
 

package/src/modules/GlobalEditor/index.tsx

@@ -731,7 +731,7 @@ interface IPageEditorDispatchProps {
   sendPagePing(pageID: number): Promise<boolean>;
   setStructuredDataFilter(filter: string | null): void;
   discardDraft(): Promise<void>;
-  getUserCurrentPermissions(): void;
+  getUserCurrentPermissions(): Promise<void>;
   schedulePublication(date: string | null, isDraft: boolean): Promise<boolean>;
 }
 

package/src/modules/MediaGallery/Breadcrumb/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { IFolderTree } from "@ax/types";
+
+import * as S from "./style";
+
+const Breadcrumb = (props: IBreadcrumbProps): JSX.Element => {
+  const { breadcrumb, onClick } = props;
+
+  const handleRootClick = () => onClick(null);
+
+  return (
+    <S.BreadcrumbGroup data-testid="file-breadcrumb">
+      <React.Fragment key="root">
+        <S.BreadcrumbItem onClick={handleRootClick} isLastItem={false}>
+          All Documents
+        </S.BreadcrumbItem>
+        {"/"}
+      </React.Fragment>
+      {breadcrumb.slice(0).map((item: IFolderTree, index: number, arr: any) => {
+        const { id, name } = item;
+        const isLastItem = breadcrumb.length === index + 1;
+        const handleClick = () => onClick(id);
+
+        return (
+          <React.Fragment key={`${id}${index}`}>
+            <S.BreadcrumbItem onClick={handleClick} isLastItem={isLastItem}>
+              {name}
+            </S.BreadcrumbItem>
+            {index <= arr.length - 2 && "/"}
+          </React.Fragment>
+        );
+      })}
+    </S.BreadcrumbGroup>
+  );
+};
+
+export interface IBreadcrumbProps {
+  breadcrumb: IFolderTree[];
+  onClick(folderID: number | null): void;
+}
+
+export default Breadcrumb;

package/src/modules/MediaGallery/Breadcrumb/style.tsx

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const BreadcrumbGroup = styled.div`
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  padding-top: ${p => p.theme.spacing.s};
+`;
+
+const BreadcrumbItem = styled.div<{isLastItem: boolean}>`
+  ${p => p.theme.textStyle.uiM};
+  color: ${p => p.isLastItem ? p.theme.color.textMediumEmphasis : p.theme.color.interactive01};
+  padding: 0 ${p => p.theme.spacing.xxs};
+  cursor: ${p => p.isLastItem ? "default" : "pointer"};
+  font-weight: 600;
+`;
+
+export { BreadcrumbGroup, BreadcrumbItem }

package/src/modules/MediaGallery/BulkGridHeader/GridHeader/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { CheckField, TableCounter } from "@ax/components";
+
+import * as S from "./style";
+
+const GridHeader = (props: IProps): JSX.Element => {
+  const { selectAllItems, checkState, totalItems } = props;
+
+  return (
+    <S.Header>
+      <S.CheckWrapper>
+        <CheckField
+          key="selectAll"
+          name="selectAll"
+          value="selectAll"
+          onChange={selectAllItems}
+          checked={checkState.isAllSelected}
+          disabled={false}
+          error={false}
+          title="Select all images"
+        />
+      </S.CheckWrapper>
+      <S.CounterWrapper>
+        <TableCounter totalItems={totalItems} />
+      </S.CounterWrapper>
+    </S.Header>
+  );
+};
+
+interface IProps {
+  totalItems: number;
+  selectAllItems: () => void;
+  checkState: Record<string, boolean>;
+}
+
+export default GridHeader;

package/src/modules/MediaGallery/BulkGridHeader/GridHeader/style.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const Header = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: ${(p) => p.theme.spacing.m};
+`;
+
+const CheckWrapper = styled.div`
+  label {
+    margin-bottom: 0;
+  }
+`;
+
+const CounterWrapper = styled.div``;
+
+export { Header, CheckWrapper, CounterWrapper };

package/src/modules/MediaGallery/BulkGridHeader/index.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { IBulkAction } from "@ax/types";
+
+import GridHeader from "./GridHeader";
+
+import * as S from "./style";
+
+const BulkGridHeader = (props: IBulkHeaderProps): JSX.Element => {
+  const { showBulk, checkState, selectItems, selectAllItems, totalItems, bulkActions } = props;
+
+  return showBulk ? (
+    <S.BulkWrapper>
+      <S.StyledBulkSelectionOptions
+        isScrolling={false}
+        checkState={checkState}
+        actions={bulkActions}
+        selectItems={selectItems}
+        totalItems={totalItems}
+      />
+    </S.BulkWrapper>
+  ) : (
+    <GridHeader selectAllItems={selectAllItems} checkState={checkState} totalItems={totalItems} />
+  );
+};
+
+export interface IBulkHeaderProps {
+  showBulk: boolean;
+  checkState: any;
+  selectItems: () => void;
+  selectAllItems: () => void;
+  totalItems: number;
+  bulkActions: IBulkAction[];
+}
+
+export default BulkGridHeader;

package/src/modules/MediaGallery/BulkGridHeader/style.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styled from "styled-components";
+import { BulkSelectionOptions } from "@ax/components";
+
+const BulkWrapper = styled.div`
+  width: 100%;
+  span {
+    margin-left: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
+const StyledBulkSelectionOptions = styled(BulkSelectionOptions)`
+  padding: ${(p) => `0 0 0 ${p.theme.spacing.xs}`};
+  height: ${(p) => p.theme.spacing.s};
+`;
+
+export { BulkWrapper, StyledBulkSelectionOptions }

package/src/modules/MediaGallery/BulkListHeader/TableHeader/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import { CheckField, TableCounter, Tooltip } from "@ax/components";
+
+import * as S from "./style";
+
+const TableHeader = (props: IProps): JSX.Element => {
+  const { isScrolling, selectAllItems, checkState, totalItems, setHoverCheck } = props;
+
+  return (
+    <S.TableHeader isScrolling={isScrolling}>
+      <S.CheckHeader>
+        <Tooltip content="Select All Files">
+          <CheckField
+            key="selectAll"
+            name="selectAll"
+            value="selectAll"
+            onChange={selectAllItems}
+            checked={checkState.isAllSelected || checkState.hoverCheck}
+            disabled={false}
+            error={false}
+            setHoverCheck={setHoverCheck}
+          />
+        </Tooltip>
+      </S.CheckHeader>
+      <S.NameHeader>Name</S.NameHeader>
+      <S.TypeHeader>Type</S.TypeHeader>
+      <S.SizeHeader>Size</S.SizeHeader>
+      <S.UpdatedHeader>Resolution</S.UpdatedHeader>
+      <S.TagsHeader>Tags</S.TagsHeader>
+      <S.CounterHeader>
+        <TableCounter totalItems={totalItems} />
+      </S.CounterHeader>
+    </S.TableHeader>
+  );
+};
+
+interface IProps {
+  isScrolling: boolean;
+  totalItems: number;
+  selectAllItems: () => void;
+  checkState: Record<string, boolean>;
+  setHoverCheck: (state: boolean) => void;
+}
+
+export default TableHeader;

package/src/modules/MediaGallery/BulkListHeader/TableHeader/style.tsx

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+import { Header } from "@ax/components/TableList/style";
+
+const TableHeader = styled.div<{ isScrolling?: boolean }>`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  padding-bottom: ${(p) => p.theme.spacing.m};
+  border-bottom: ${(p) => (p.isScrolling ? `1px solid ${p.theme.color.uiLine};` : "")};
+`;
+
+const CheckHeader = styled(Header)`
+  padding-right: 0;
+  width: 40px;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+  > div {
+    width: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const NameHeader = styled(Header)`
+  flex-grow: 1;
+`;
+
+const TypeHeader = styled(Header)`
+  flex: 0 0 80px;
+  justify-content: center;
+`;
+
+const SizeHeader = styled(Header)`
+  flex: 0 0 85px;
+  justify-content: center;
+`;
+
+const UpdatedHeader = styled(Header)`
+  flex: 0 0 120px;
+  justify-content: center;
+`;
+
+const TagsHeader = styled(Header)`
+  flex: 0 0 300px;
+`;
+
+const CounterHeader = styled(Header)`
+  flex: 0 0 70px;
+  justify-content: flex-end;
+  padding 0;
+`;
+
+export { TableHeader, CheckHeader, NameHeader, TypeHeader, SizeHeader, UpdatedHeader, TagsHeader, CounterHeader };