ui/style: Move all the style component to a dedicate file

Refs: #2932

ui/src/components/CommonLayoutStyle.js

@@ -125,7 +125,8 @@ export const GraphsContainer = styled.div`
   display: flex;
   flex-direction: column;
   padding: ${padding.small};
-
+  overflow: auto;
+  height: calc(100vh - 150px);
   .sc-vegachart svg {
     background-color: inherit !important;
   }

ui/src/components/style/BreadcrumbStyle.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Link } from 'react-router-dom';
+import { fontSize, padding } from '@scality/core-ui/dist/style/theme';
+
+export const BreadcrumbContainer = styled.div`
+  padding: 0 0 ${padding.smaller} ${padding.base};
+`;
+
+export const BreadcrumbLabel = styled.span`
+  font-size: ${fontSize.large};
+`;
+
+export const StyledLink = styled(Link)`
+  font-size: ${fontSize.large};
+`;

ui/src/components/style/CommonLayoutStyle.js

@@ -0,0 +1,149 @@
+import styled from 'styled-components';
+import {
+  padding,
+  fontSize,
+  fontWeight,
+} from '@scality/core-ui/dist/style/theme';
+
+export const PageContainer = styled.div`
+  display: flex;
+  box-sizing: border-box;
+  height: 100%;
+  flex-wrap: wrap;
+  padding: ${padding.small};
+`;
+
+export const LeftSideInstanceList = styled.div`
+  flex-direction: column;
+  min-height: 696px;
+  width: 49%;
+`;
+
+export const RightSidePanel = styled.div`
+  flex-direction: column;
+  width: 51%;
+  /* Make it scrollable for the small laptop screen */
+  overflow-y: auto;
+  margin: 0 ${padding.small} 0 8px;
+`;
+
+export const NoInstanceSelectedContainer = styled.div`
+  width: 51%;
+  min-height: 700px;
+  background-color: ${(props) => props.theme.brand.primaryDark1};
+  margin: ${padding.small};
+`;
+
+export const NoInstanceSelected = styled.div`
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  color: ${(props) => props.theme.brand.textPrimary};
+  text-align: center;
+`;
+
+export const PageContentContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  background-color: ${(props) => props.theme.brand.background};
+  overflow: hidden;
+`;
+
+// Common styles for the tabs in NodePageRSP
+export const NodeTab = styled.div`
+  background-color: ${(props) => props.theme.brand.primary};
+  color: ${(props) => props.theme.brand.textPrimary};
+  padding-bottom: ${padding.base};
+  height: calc(100vh - 172px);
+  overflow: scroll;
+`;
+
+export const TextBadge = styled.span`
+  background-color: ${(props) => props.theme.brand.info};
+  color: ${(props) => props.theme.brand.textPrimary};
+  padding: 2px ${padding.small};
+  border-radius: 4px;
+  font-size: ${fontSize.small};
+  font-weight: ${fontWeight.bold};
+  margin-left: ${padding.smaller};
+`;
+
+export const VolumeTab = styled.div`
+  overflow: scroll;
+  height: calc(100vh - 174px);
+  color: ${(props) => props.theme.brand.textPrimary};
+  padding-bottom: ${padding.base};
+`;
+
+export const SortCaretWrapper = styled.span`
+  padding-left: ${padding.smaller};
+  position: absolute;
+`;
+
+export const SortIncentive = styled.span`
+  position: absolute;
+  display: none;
+`;
+
+export const TableHeader = styled.span`
+  padding: ${padding.base};
+  &:hover {
+    ${SortIncentive} {
+      display: block;
+    }
+  }
+`;
+
+export const MetricsActionContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: ${padding.base} ${padding.base};
+  position: sticky;
+  top: 0px;
+  z-index: 100;
+  background-color: ${(props) => props.theme.brand.primary};
+
+  .sc-dropdown {
+    padding-left: 25px;
+  }
+
+  .sc-dropdown > div {
+    background-color: ${(props) => props.theme.brand.primary};
+    border: 1px solid ${(props) => props.theme.brand.borderLight}
+    border-radius: 3px;
+  }
+
+  .sc-button {
+    background-color: ${(props) => props.theme.brand.info};
+  }
+`;
+
+export const GraphsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${padding.small};
+
+  .sc-vegachart svg {
+    background-color: inherit !important;
+  }
+`;
+
+export const RowGraphContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+
+export const GraphTitle = styled.div`
+  font-size: ${fontSize.small};
+  font-weight: ${fontWeight.bold};
+  color: ${(props) => props.theme.brand.textSecondary};
+  padding: ${padding.small} 0 0 ${padding.larger};
+`;
+
+export const GraphWrapper = styled.div`
+  padding-left: 0px;
+`;

ui/src/components/style/ModalFormStyle.js

@@ -0,0 +1,25 @@
+import { padding } from '@scality/core-ui/dist/style/theme';
+import styled from 'styled-components';
+
+export const FormStyle = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: ${padding.base};
+  min-height: 220px;
+  .sc-input {
+    display: inline-flex;
+    margin: ${padding.smaller} 0;
+    justify-content: center;
+    .sc-input-label {
+      width: 200px;
+    }
+  }
+`;
+
+export const ActionContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 10px 0;
+  padding: 10px 0;
+`;

ui/src/components/style/TableBasedPageStyle.js

@@ -0,0 +1,12 @@
+import { padding } from '@scality/core-ui/dist/style/theme';
+import styled from 'styled-components';
+
+const TableBasedPageStyle = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: ${padding.small};
+`;
+
+export default TableBasedPageStyle;

ui/src/components/style/TableStyle.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { padding, fontWeight } from '@scality/core-ui/dist/style/theme';
+
+export const TooltipContent = styled.div`
+  color: ${(props) => props.theme.brand.textSecondary};
+  font-weight: ${fontWeight.bold};
+  min-width: 60px;
+`;
+
+export const UnknownIcon = styled.i`
+  color: ${(props) => props.theme.brand.textSecondary};
+  // Increase the height so that the users don't need to hover precisely on the hyphen.
+  height: 30px;
+  padding-top: ${padding.base};
+`;