From db1738c2f21bbc39d656f22f8b2efcf365f342c4 Mon Sep 17 00:00:00 2001
From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com>
Date: Wed, 7 Aug 2024 18:05:15 +0300
Subject: [PATCH] Client:QuickButtons:Fix styles.

---
 .../Section/Body/TableView/StyledTable.js     | 15 ++--
 .../Section/Body/TableView/TableContainer.js  | 18 -----
 .../TableView/sub-components/RecentRowData.js | 25 +------
 .../TableView/sub-components/RoomsRowData.js  | 69 +++++++++++--------
 .../Body/TableView/sub-components/RowData.js  | 68 +++++++++++-------
 .../TableView/sub-components/TrashRowData.js  |  5 +-
 6 files changed, 92 insertions(+), 108 deletions(-)

diff --git a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
index e1d8d0fbbd..46eb4fbad3 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
@@ -136,9 +136,7 @@ const StyledTableRow = styled(TableRow)`
       `}
   }
 
-  .table-container_element-wrapper,
-  .table-container_quick-buttons-wrapper {
-    padding-inline-end: 0;
+  .table-container_element-wrapper {
   }
 
   .table-container_element-wrapper,
@@ -306,7 +304,10 @@ const StyledBadgesContainer = styled.div`
 `;
 
 const StyledQuickButtonsContainer = styled.div`
-  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-grow: 1;
 
   .badges {
     display: flex;
@@ -315,11 +316,7 @@ const StyledQuickButtonsContainer = styled.div`
   }
 
   .badge {
-    padding: 12px 7px;
-  }
-
-  .badge:last-child {
-    margin-inline-end: 3px;
+    padding: 12px 8px;
   }
 
   .lock-file {
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
index 2a3f53d980..6dbf73b5e7 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@@ -50,24 +50,6 @@ const contextCss = css`
 `;
 
 const StyledTableContainer = styled(TableContainer)`
-  .badges__quickButtons {
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-end;
-
-    .badge {
-      padding-left: 16px;
-    }
-
-    .badge:first-child {
-      padding-left: 8px;
-    }
-
-    .badge:last-child {
-      padding-right: 8px;
-    }
-  }
-
   .table-row-selected {
     .table-container_file-name-cell {
       ${fileNameCss}
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js
index 945c285056..8a3bc75bcc 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js
@@ -33,10 +33,7 @@ import AuthorCell from "./AuthorCell";
 import DateCell from "./DateCell";
 import SizeCell from "./SizeCell";
 import { classNames, getLastColumn } from "@docspace/shared/utils";
-import {
-  StyledBadgesContainer,
-  StyledQuickButtonsContainer,
-} from "../StyledTable";
+import { StyledBadgesContainer } from "../StyledTable";
 
 const RecentRowDataComponent = (props) => {
   const {
@@ -213,26 +210,6 @@ const RecentRowDataComponent = (props) => {
       ) : (
         <div />
       )}
-      {/* {quickButtonsColumnIsEnabled ? (
-        <TableCell
-          style={
-            !quickButtonsColumnIsEnabled
-              ? { background: "none" }
-              : dragStyles.style
-          }
-          {...selectionProp}
-          className={classNames(
-            selectionProp?.className,
-            "table-container_quick-buttons-wrapper",
-          )}
-        >
-          <StyledQuickButtonsContainer>
-            {quickButtonsComponent}
-          </StyledQuickButtonsContainer>
-        </TableCell>
-      ) : (
-        <div />
-      )} */}
     </>
   );
 };
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js
index 0c91284b7b..6bd34d2727 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js
@@ -85,7 +85,13 @@ const RoomsRowDataComponent = (props) => {
         <StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
           {badgesComponent}
         </StyledBadgesContainer>
-        {lastColumn === "Name" ? quickButtonsComponent : <></>}
+        {lastColumn === "Name" ? (
+          <StyledQuickButtonsContainer>
+            {quickButtonsComponent}
+          </StyledQuickButtonsContainer>
+        ) : (
+          <></>
+        )}
       </TableCell>
 
       {roomColumnTypeIsEnabled ? (
@@ -105,7 +111,13 @@ const RoomsRowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Type" ? quickButtonsComponent : <></>}
+          {lastColumn === "Type" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -124,7 +136,13 @@ const RoomsRowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Tags" ? quickButtonsComponent : <></>}
+          {lastColumn === "Tags" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -147,7 +165,13 @@ const RoomsRowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Owner" ? quickButtonsComponent : <></>}
+          {lastColumn === "Owner" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -170,7 +194,13 @@ const RoomsRowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Activity" ? quickButtonsComponent : <></>}
+          {lastColumn === "Activity" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -183,32 +213,17 @@ const RoomsRowDataComponent = (props) => {
               type="room"
               isReadOnly={!item?.security?.EditRoom}
             />
-            {lastColumn === "Storage" ? quickButtonsComponent : <></>}
+            {lastColumn === "Storage" ? (
+              <StyledQuickButtonsContainer>
+                {quickButtonsComponent}
+              </StyledQuickButtonsContainer>
+            ) : (
+              <></>
+            )}
           </TableCell>
         ) : (
           <div />
         ))}
-
-      {/* {roomColumnQuickButtonsIsEnabled ? (
-        <TableCell
-          style={
-            !roomColumnQuickButtonsIsEnabled
-              ? { background: "none" }
-              : dragStyles.style
-          }
-          {...selectionProp}
-          className={classNames(
-            selectionProp?.className,
-            "table-container_quick-buttons-wrapper",
-          )}
-        >
-          <StyledQuickButtonsContainer>
-            {quickButtonsComponent}
-          </StyledQuickButtonsContainer>
-        </TableCell>
-      ) : (
-        <div />
-      )} */}
     </>
   );
 };
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js
index ee41b09a12..5b497f5c30 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js
@@ -84,7 +84,13 @@ const RowDataComponent = (props) => {
         <StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
           {badgesComponent}
         </StyledBadgesContainer>
-        {lastColumn === "Name" ? quickButtonsComponent : <></>}
+        {lastColumn === "Name" ? (
+          <StyledQuickButtonsContainer>
+            {quickButtonsComponent}
+          </StyledQuickButtonsContainer>
+        ) : (
+          <></>
+        )}
       </TableCell>
 
       {authorColumnIsEnabled ? (
@@ -102,7 +108,13 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Author" ? quickButtonsComponent : <></>}
+          {lastColumn === "Author" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -126,7 +138,13 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Created" ? quickButtonsComponent : <></>}
+          {lastColumn === "Created" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -147,7 +165,13 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Modified" ? quickButtonsComponent : <></>}
+          {lastColumn === "Modified" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -168,7 +192,13 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Size" ? quickButtonsComponent : <></>}
+          {lastColumn === "Size" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -191,31 +221,17 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Type" ? quickButtonsComponent : <></>}
+          {lastColumn === "Type" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
       )}
-      {/* {quickButtonsColumnIsEnabled ? (
-        <TableCell
-          style={
-            !quickButtonsColumnIsEnabled
-              ? { background: "none" }
-              : dragStyles.style
-          }
-          {...selectionProp}
-          className={classNames(
-            selectionProp?.className,
-            "table-container_quick-buttons-wrapper",
-          )}
-        >
-          <StyledQuickButtonsContainer>
-            {quickButtonsComponent}
-          </StyledQuickButtonsContainer>
-        </TableCell>
-      ) : (
-        <div />
-      )} */}
     </>
   );
 };
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js
index 0fca4c3090..7cefdaf1f3 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js
@@ -33,10 +33,7 @@ import AuthorCell from "./AuthorCell";
 import DateCell from "./DateCell";
 import SizeCell from "./SizeCell";
 import { classNames, getLastColumn } from "@docspace/shared/utils";
-import {
-  StyledBadgesContainer,
-  StyledQuickButtonsContainer,
-} from "../StyledTable";
+import { StyledBadgesContainer } from "../StyledTable";
 import ErasureCell from "./ErasureCell";
 import RoomCell from "./RoomCell";