Web: Files: SelectFile: Added style for row selection.

packages/asc-web-components/themes/base.js

@@ -519,6 +519,7 @@ const Base = {
     minHeight: "47px",
     width: "100%",
     borderBottom: globalColors.grayLightMid,
+    backgroundColor: globalColors.lightHover,
     minWidth: "160px",
     overflow: "hidden",
     textOverflow: "ellipsis",

packages/asc-web-components/themes/dark.js

@@ -517,6 +517,7 @@ const Dark = {
     minHeight: "47px",
     width: "100%",
     borderBottom: "#474747",
+    backgroundColor: globalColors.lightHover,
     minWidth: "160px",
     overflow: "hidden",
     textOverflow: "ellipsis",

packages/asc-web-components/utils/globalColors.js

@@ -14,6 +14,7 @@ const globalColors = {
   veryLightGrey: "#CACACA",
   darkSilver: "#bbb",
   silver: "#CCCCCC",
+  lightHover: "#F3F4F4",
 
   blueMain: "#2DA7DB",
   blueHover: "#3DB8EC",

products/ASC.Files/Client/src/components/panels/SelectFileDialog/index.js

@@ -403,6 +403,7 @@ SelectFileDialog.defaultProps = {
 
 export default inject(
   ({
+    auth,
     filesStore,
     selectedFilesStore,
     treeFoldersStore,
@@ -418,6 +419,8 @@ export default inject(
     const { filter } = filesStore;
     const { setSelectedFolder, id } = selectedFolderStore;
 
+    const { settingsStore } = auth;
+    const { theme } = settingsStore;
     return {
       fileInfo,
       setFile,
@@ -428,6 +431,7 @@ export default inject(
       setExpandedPanelKeys,
       treeFolders,
       storeFolderId: id,
+      theme: theme,
     };
   }
 )(

products/ASC.Files/Client/src/components/panels/SelectFolderDialog/index.js

@@ -392,8 +392,11 @@ export default inject(
     const { canCreate, filter } = filesStore;
     const { setSelectedFolder, id } = selectedFolderStore;
     const { setFolderId } = selectedFilesStore;
+
+    const { settingsStore } = auth;
+    const { theme } = settingsStore;
     return {
-      theme: auth.settingsStore.theme,
+      theme: theme,
       setSelectedFolder,
       setSelectedNode,
       canCreate,

products/ASC.Files/Client/src/components/panels/SelectionPanel/StyledSelectionPanel.js

@@ -7,6 +7,7 @@ const StyledBody = styled.div`
     grid-template-columns: 256px 1fr;
     grid-template-areas: "tree files" "footer footer";
     grid-template-rows: auto max-content;
+    margin-right: -4px;
 
     .selection-panel_files-body {
       grid-area: files;
@@ -35,7 +36,7 @@ const StyledBody = styled.div`
 
     .selection-panel_footer {
       grid-area: footer;
-      border-top: 1px solid #eceef1;
+      border-top: 1px solid ${(props) => props.theme.row.borderBottom};
       margin-left: -13px;
       margin-right: -13px;
       padding-left: 16px;
@@ -61,7 +62,11 @@ const StyledRow = styled.div`
   position: relative;
   height: 48px;
   width: calc(100% - 16px);
-  ${(props) => props.displayType === "modal" && "padding-left: 16px;"}
+
+  padding-left: 16px;
+
+  ${(props) =>
+    props.isChecked && `background: ${props.theme.row.backgroundColor}`};
 
   .selection-panel_clicked-area {
     position: absolute;
@@ -104,6 +109,8 @@ const StyledAsideBody = styled.div`
   }
   .selection-panel_files-list-body {
     height: 100%;
+    margin-left: -16px;
+    margin-right: -6px;
   }
   .selection-panel_files {
     height: 100%;
@@ -121,7 +128,7 @@ const StyledAsideBody = styled.div`
     margin-top: 12px;
   }
   .selection-panel_aside-footer {
-    border-top: 1px solid #eceef1;
+    border-top: 1px solid ${(props) => props.theme.row.borderBottom};
     margin-left: -13px;
     margin-right: -13px;
     padding-left: 16px;