Updated Create tenant screens to use mds components (#1884)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

web-app/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -207,32 +207,6 @@ export const searchField = {
   },
 };
 
-// ** According to W3 spec, default minimum values for flex width flex-grow is "auto" (https://drafts.csswg.org/css-flexbox/#min-size-auto). So in this case we need to enforce the use of an absolute width.
-// "The preferred width of a box element child containing text content is currently the text without line breaks, leading to very unintuitive width and flex calculations → declare a width on a box element child with more than a few words (ever wonder why flexbox demos are all “1,2,3”?)"
-
-export const settingsCommon: any = {
-  settingsFormContainer: {
-    padding: 38,
-    overflowY: "auto" as const,
-    scrollbarWidth: "none" as const,
-    "&::-webkit-scrollbar": {
-      display: "none",
-    },
-  },
-  settingsButtonContainer: {
-    padding: "15px 38px",
-    display: "flex",
-    justifyContent: "flex-end",
-  },
-  settingsOptionsContainer: {
-    height: "calc(100vh - 244px)",
-    backgroundColor: "#fff",
-    border: "#EAEDEE 1px solid",
-    borderRadius: 3,
-    marginTop: 15,
-  },
-};
-
 export const snackBarCommon = {
   snackBar: {
     backgroundColor: "#081F44",
@@ -498,45 +472,6 @@ export const fileInputStyles = {
   },
 };
 
-export const deleteDialogStyles: any = {
-  root: {
-    "& .MuiPaper-root": {
-      padding: "1rem 2rem 2rem 1rem",
-    },
-  },
-  title: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-  },
-  titleText: {
-    fontSize: 20,
-    fontWeight: 600,
-    display: "flex",
-    alignItems: "center",
-    "& svg": {
-      marginRight: 10,
-    },
-    wordBreak: "break-all",
-    whiteSpace: "normal",
-  },
-  closeContainer: {
-    "& .MuiIconButton-root": {
-      top: -20,
-      left: 30,
-      position: "relative",
-      padding: 1,
-      "&:focus, &:hover": {
-        background: "#EAEAEA",
-      },
-    },
-    "& .min-icon": {
-      height: 16,
-      width: 16,
-    },
-  },
-};
-
 export const createTenantCommon: any = {
   fieldGroup: {
     border: "1px solid #EAEAEA",

web-app/src/screens/Console/Common/H3Section.tsx

@@ -14,9 +14,12 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
-import styled from "@emotion/styled";
+import styled from "styled-components";
+import get from "lodash/get";
+
+const H3Section = styled.h3(({ theme }) => ({
+  color: get(theme, "fontColor", "#000"),
+  margin: 0,
+}));
 
-const H3Section = styled("h3")`
-  margin: 0px;
-`;
 export default H3Section;