From 18aa0121f99eadda9d204d37b180e0660ff6b4d4 Mon Sep 17 00:00:00 2001
From: Dmitry Kulak <dmitry.kulak11@gmail.com>
Date: Tue, 21 Dec 2021 18:00:12 +0300
Subject: [PATCH] Web: Files: Tiles: Renaming redesign, fixes

---
 .../src/components/EditingWrapperComponent.js      | 14 +++++++++-----
 .../Section/Body/TilesView/sub-components/Tile.js  |  5 -----
 .../Body/TilesView/sub-components/TileContainer.js |  2 +-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/products/ASC.Files/Client/src/components/EditingWrapperComponent.js b/products/ASC.Files/Client/src/components/EditingWrapperComponent.js
index a731fbbcad..6255d6be3d 100644
--- a/products/ASC.Files/Client/src/components/EditingWrapperComponent.js
+++ b/products/ASC.Files/Client/src/components/EditingWrapperComponent.js
@@ -6,6 +6,7 @@ import commonIconsStyles from "@appserver/components/utils/common-icons-style";
 
 import CheckIcon from "../../public/images/check.react.svg";
 import CrossIcon from "../../../../../public/images/cross.react.svg";
+import { tablet } from "@appserver/components/utils/device";
 
 const StyledCheckIcon = styled(CheckIcon)`
   ${commonIconsStyles}
@@ -54,9 +55,10 @@ const EditingWrapper = styled.div`
     props.viewAs === "tile" &&
     `margin-right: 12px !important; margin-left: -4px;`}
 
-  @media (max-width: 1024px) {
+  @media ${tablet} {
     height: 56px;
   }
+
   .edit-text {
     height: 32px;
     font-size: ${(props) =>
@@ -68,15 +70,19 @@ const EditingWrapper = styled.div`
     outline: 0 !important;
     font-weight: 600;
     margin: 0;
+    margin-left: 2px;
     font-family: "Open Sans", sans-serif, Arial;
     text-align: left;
     color: #333333;
-    margin-left: 6px;
+    border: none;
+    background: none;
   }
+
   .edit-button {
-    margin-left: 8px;
     height: 32px;
     padding: 8px 7px 7px 7px;
+    border: none;
+    background: none;
 
     ${(props) =>
       props.viewAs === "table" &&
@@ -139,11 +145,9 @@ const EditingWrapperComponent = (props) => {
       if (!isLoading) setIsLoading(true);
       return onClickUpdateItem(e);
     }
-    //if (code === 27) return cancelUpdateItem(e);
   };
   const onEscapeKeyPress = (e) => {
     if (e.keyCode === 27) return cancelUpdateItem(e);
-    return;
   };
 
   const setIsHoveredOkHandler = () => {
diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
index 0a6469314a..996b64d77a 100644
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
@@ -59,7 +59,6 @@ const StyledTile = styled.div`
 
   ${(props) => props.isFolder && FlexBoxStyles}
   ${(props) => (props.isFolder ? FolderStyles : FileStyles)}
-  ${(props) => (props.checked || props.isActive) && checkedStyle}
 
   &:before, 
   &:after {
@@ -151,10 +150,6 @@ const StyledFileTileTop = styled.div`
   background-color: #f8f9f9;
   height: 154px;
   position: relative;
-  border-bottom: ${(props) =>
-    props.checked || props.isActive
-      ? "1px solid #D0D5DA"
-      : "1px solid transparent"};
 
   .thumbnail-image,
   .temporary-icon > .injected-svg {
diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js
index 922bb40035..4737a9c89d 100644
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js
@@ -22,7 +22,7 @@ const paddingCss = css`
 
 const StyledGridWrapper = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
   width: 100%;
   margin-bottom: ${(props) => (props.isFolders ? "29px" : 0)};
   box-sizing: border-box;