Web:Components:Changed styles for RootFolder to EmptyContentBody.

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

@@ -1,7 +1,46 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { mobile, tablet } from "../utils/device";
 import NoUserSelect from "../utils/commonStyles";
 
+const isRootFolderStyles = css`
+  .ec-image {
+    height: 72px;
+    margin-top: 21px;
+  }
+
+  .ec-header {
+    padding-top: 16px;
+    font-size: 16px;
+    background: ${(props) => !!props.descriptionText && "red"};
+  }
+
+  .ec-desc {
+    margin-top: -2px;
+    line-height: 16px;
+  }
+
+  .empty-folder_container-links {
+    align-items: center;
+    margin: 17px 0 !important;
+  }
+
+  @media (min-width: 600px) {
+    .ec-image {
+      height: 100px;
+    }
+
+    .ec-header {
+      padding-top: 21px;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .ec-desc {
+      max-width: 618px;
+    }
+  }
+`;
+
 const EmptyContentBody = styled.div`
   margin: 0 auto;
   padding: 64px 0;
@@ -52,6 +91,39 @@ const EmptyContentBody = styled.div`
     margin-top: -1px;
   }
 
+  @media (max-width: 600px) {
+    ${(props) =>
+      props.isRootStyles &&
+      css`
+        grid-template-areas:
+          "img img img"
+          "headerText headerText headerText"
+          ${(props) =>
+            props.subheadingText &&
+            `"subheadingText subheadingText subheadingText"`}
+          ${(props) =>
+            props.descriptionText &&
+            `"descriptionText descriptionText descriptionText"`}
+          "button button button";
+
+        .ec-header {
+          padding-top: 0px;
+        }
+        .ec-header,
+        .ec-subheading,
+        .ec-desc,
+        .ec-image,
+        .ec-buttons {
+          padding-left: 16px;
+        }
+
+        .ec-image {
+          height: 75px;
+          margin-left: 0;
+        }
+      `}
+  }
+
   @media (orientation: portrait) {
     @media (max-width: 768px) {
       padding-top: 0px;
@@ -91,6 +163,8 @@ const EmptyContentBody = styled.div`
       }
     }
   }
+
+  ${(props) => props.isRootStyles && `${isRootFolderStyles}`}
 `;
 
 const EmptyContentImage = styled.img.attrs((props) => ({