Web:Client:Components: Fixed empty container

packages/client/src/components/EmptyContainer/EmptyContainer.js

@@ -76,6 +76,8 @@ const EmptyFolderWrapper = styled.div`
     .empty-folder_container_plus-image {
       margin: 4px 8px 0 0;
       cursor: pointer;
+      width: 10px;
+      height: 10px;
     }
 
     .empty-folder_container_plus-image {

packages/client/src/components/EmptyContainer/EmptyFolderContainer.js

@@ -5,6 +5,7 @@ import EmptyContainer from "./EmptyContainer";
 import Link from "@docspace/components/link";
 import Box from "@docspace/components/box";
 import { Text } from "@docspace/components";
+import { ReactSVG } from "react-svg";
 
 const EmptyFolderContainer = ({
   t,
@@ -45,12 +46,11 @@ const EmptyFolderContainer = ({
   const buttons = canCreateFiles ? (
     <>
       <div className="empty-folder_container-links">
-        <img
+        <ReactSVG
           className="empty-folder_container_plus-image"
           src="images/plus.svg"
           data-format="docx"
           onClick={onCreate}
-          alt="plus_icon"
         />
         <Box className="flex-wrapper_container">
           <Link data-format="docx" onClick={onCreate} {...linkStyles}>
@@ -69,11 +69,10 @@ const EmptyFolderContainer = ({
       </div>
 
       <div className="empty-folder_container-links">
-        <img
+        <ReactSVG
           className="empty-folder_container_plus-image"
-          src="images/plus.svg"
           onClick={onCreate}
-          alt="plus_icon"
+          src="images/plus.svg"
         />
         <Link {...linkStyles} onClick={onCreate}>
           {t("Folder")}
@@ -90,13 +89,11 @@ const EmptyFolderContainer = ({
             </div>
 
             <div className="empty-folder_container-links">
-              <img
-                className="empty-folder_container_up-image"
-                src="images/plus.svg"
+              <ReactSVG
+                className="empty-folder_container_plus-image"
                 onClick={onInviteUsersClick}
-                alt="up_icon"
+                src="images/plus.svg"
               />
-
               <Link onClick={onInviteUsersClick} {...linkStyles}>
                 {t("InviteUsersInRoom")}
               </Link>
@@ -107,13 +104,11 @@ const EmptyFolderContainer = ({
         )
       ) : (
         <div className="empty-folder_container-links">
-          <img
+          <ReactSVG
             className="empty-folder_container_up-image"
-            src="images/up.svg"
             onClick={onBackToParentFolder}
-            alt="up_icon"
+            src="images/up.svg"
           />
-
           <Link onClick={onBackToParentFolder} {...linkStyles}>
             {t("BackToParentFolderButton")}
           </Link>
@@ -158,7 +153,7 @@ export default inject(
       parentId,
       access,
       id: folderId,
-      roomType
+      roomType,
     } = selectedFolderStore;
 
     let id;

packages/components/empty-screen-container/styled-empty-screen-container.js

@@ -124,6 +124,9 @@ const EmptyContentBody = styled.div`
     grid-area: headerText;
     font-size: 16px;
     padding-top: 16px;
+
+    color: ${(props) => props.theme.emptyContent.header.color};
+
     @media (max-width: 375px) {
       margin-top: 5px;
     }
@@ -143,6 +146,18 @@ const EmptyContentBody = styled.div`
 
   .ec-buttons {
     grid-area: button;
+    svg {
+      path {
+        fill: ${(props) => props.theme.emptyContent.button.colorLink};
+      }
+    }
+
+    a {
+      color: ${(props) => props.theme.emptyContent.button.colorLink};
+    }
+    span {
+      color: ${(props) => props.theme.emptyContent.button.colorText};
+    }
   }
 
   @media ${tablet} {

packages/components/themes/base.js

@@ -2501,9 +2501,17 @@ const Base = {
   },
 
   emptyContent: {
+    header: {
+      color: "#333333",
+    },
+
     description: {
       color: cyanBlueDarkShade,
     },
+    button: {
+      colorLink: "#657077",
+      colorText: "#555F65",
+    },
   },
 
   filesPanels: {

packages/components/themes/dark.js

@@ -2494,9 +2494,17 @@ const Dark = {
   },
 
   emptyContent: {
+    header: {
+      color: "#FFFFFF",
+    },
+
     description: {
       color: "#ADADAD",
     },
+    button: {
+      colorLink: "#ADADAD",
+      colorText: "#ADADAD",
+    },
   },
 
   filesEmptyContainer: {