New 1.4.0 page view looks and bugfixes

frontend/src/components/Billing.jsx

@@ -43,7 +43,7 @@ import BillingStats from "../components/BillingStats.jsx";
 import { handlePayasyougo } from "../views/HandlePaymentNew.jsx"
 
 const Billing = (props) => {
-  const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, } = props;
+  const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, clickedFromOrgTab } = props;
   //const alert = useAlert();
   let navigate = useNavigate();
 
@@ -970,21 +970,29 @@ const Billing = (props) => {
 
 	const isChildOrg = userdata.active_org.creator_org !== "" && userdata.active_org.creator_org !== undefined && userdata.active_org.creator_org !== null
 	return (
-		<div style={{ width: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
+		<div style={{ width: clickedFromOrgTab? 1030 : "auto", padding: 27, backgroundColor: '#212121', borderRadius: '16px', }}>
       		{addDealModal}
+			{clickedFromOrgTab?
+			  <h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Billing & Licensing</h2>:
 			<Typography variant="h4" style={{ marginTop: 20, marginBottom: 10 }}>
 				Billing	& Licensing
-			</Typography>
+			</Typography>}
+			{clickedFromOrgTab?
+			<span style={{ color: "#9E9E9E" }}>{isCloud ? 
+				"Get more out of Shuffle by adding your credit card, such as no App Run limitations, and priority support from our team. We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
+				:
+				"Shuffle is an Open Source automation platform, and no license is required. We do however offer a Scale license with HA guarantees, along with support hours. By buying a license on https://shuffler.io, you can get access to the license immediately, and if Cloud Syncronisation is enabled, the UI in your local instance will also update."
+			}</span>:
 			<Typography variant="body1" color="textSecondary" style={{ marginTop: 0, marginBottom: 10}}>
 				{isCloud ? 
 					"Get more out of Shuffle by adding your credit card, such as no App Run limitations, and priority support from our team. We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
 					:
 					"Shuffle is an Open Source automation platform, and no license is required. We do however offer a Scale license with HA guarantees, along with support hours. By buying a license on https://shuffler.io, you can get access to the license immediately, and if Cloud Syncronisation is enabled, the UI in your local instance will also update."
 				}
-			</Typography>
+			</Typography>}
 
 			{userdata.support === true ? 
-				<div style={{marginBottom: 10, }}>
+				<div style={{marginBottom: 10, marginTop:clickedFromOrgTab?16:null, color:clickedFromOrgTab?"#F1F1F1":null }}>
 					For sales: Create&nbsp;
 					<a href={"https://docs.google.com/document/d/1OeJSi42812EMg7fUAw1HAj1ymOG8rfp8Ma_DGJKvwgI/copy?usp=sharing&organization=" + selectedOrganization.id} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
 						New Cloud Contract

frontend/src/components/Branding.jsx

@@ -103,8 +103,8 @@ const Branding = (props) => {
 	}
 
 	return (
-		<div style={{ width: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
+		<div style={{ width: clickedFromOrgTab? 1030: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
-			<h2>
+			<h2 style={{marginTop: clickedFromOrgTab ?0:null,}}>
 				Branding
 			</h2>
 			<Typography variant="body1" color="textSecondary" style={{ marginTop: 20, marginBottom: 10 }}>

frontend/src/components/CacheView.jsx

@@ -115,43 +115,6 @@ const CacheView = (props) => {
 		});
     };
 
-    // const getCacheList = (orgId) => {
-    //     fetch(`${globalUrl}/api/v1/orgs/${orgId}/get_cache`, {
-    //       method: "GET",
-    //       headers: {
-    //         "Content-Type": "application/json",
-    //         Accept: "application/json",
-    //       },
-    //       credentials: "include",
-    //     })
-    //       .then((response) => {
-    //         if (response.status !== 200) {
-    //           console.log("Status not 200 for WORKFLOW EXECUTION :O!");
-    //         }
-
-
-    //         return response.json();
-    //       })
-    //       .then((responseJson) => {
-    //         if (responseJson.success !== false) {
-    //           console.log("Found cache: ", responseJson)
-    //           setListCache(responseJson)
-    //         } else {
-    //           console.log("Couldn't find the creator profile (rerun?): ", responseJson)
-    //           // If the current user is any of the Shuffle Creators 
-    //           // AND the workflow doesn't have an owner: allow editing.
-    //           // else: Allow suggestions?
-    //           //console.log("User: ", userdata)
-    //           //if (rerun !== true) {
-    //           //	getUserProfile(userdata.id, true)
-    //           //}
-    //         }
-    //       })
-    //       .catch((error) => {
-    //         console.log("Get userprofile error: ", error);
-    //       })
-    //   }
-
 
     const deleteCache = (orgId, key) => {
         toast("Attempting to delete Cache");
@@ -403,7 +366,7 @@ const CacheView = (props) => {
                 </span>
             </div>
             <Button
-                style={{backgroundColor: isSelectedDataStore?'rgba(255, 132, 68, 0.2)':null, color:isSelectedDataStore?"#FF8444":null, borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?162:null, height:isSelectedDataStore?40:null}}
+                style={{backgroundColor: isSelectedDataStore?'rgba(255, 132, 68, 0.2)':null, boxShadow: isSelectedDataStore ? "none":null,textTransform: isSelectedDataStore ? 'capitalize':null, color:isSelectedDataStore?"#FF8444":null, borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?162:null, height:isSelectedDataStore?40:null}}
                 variant="contained"
                 color="primary"
                 onClick={() =>{ 
@@ -416,7 +379,7 @@ const CacheView = (props) => {
                 Add Cache
             </Button>
             <Button
-                style={{ marginLeft: 5, marginRight: 15, backgroundColor: isSelectedDataStore?"#2F2F2F":null,borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?81:null, height:isSelectedDataStore?40:null,  }}
+                style={{ marginLeft: 5, marginRight: 15, backgroundColor: isSelectedDataStore?"#2F2F2F":null, boxShadow: isSelectedDataStore ? "none":null,textTransform: isSelectedDataStore ? 'capitalize':null,borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?81:null, height:isSelectedDataStore?40:null,  }}
                 variant="contained"
                 color="primary"
                 onClick={() => listOrgCache(orgId)}
@@ -433,26 +396,27 @@ const CacheView = (props) => {
                 <ListItem style={{width: isSelectedDataStore?"100%":null, borderBottom:isSelectedDataStore?"1px solid #494949":null}}>
                     <ListItemText
                         primary="Key"
-                    	style={{ minWidth: 250, maxWidth: 250, }}
+                    	style={{ minWidth: isSelectedDataStore?200:250, maxWidth: isSelectedDataStore?200:250, }}
                     />
                     <ListItemText
                         primary="Value"
-                    	style={{ minWidth: 400, maxWidth: 400, overflowX: "auto", overflowY: "hidden", }}
+                    	style={{ minWidth: isSelectedDataStore?300:400, maxWidth: isSelectedDataStore?300:400, overflowX: "auto", overflowY: "hidden", }}
                     />
                     <ListItemText
                         primary="Actions"
-                    	style={{ minWidth: 150, maxWidth: 150, marginLeft: 50, }}
+                    	style={{ minWidth: 150, maxWidth: 150, marginLeft: isSelectedDataStore?80:null,}}
                     />
                     <ListItemText
+                        style={{textAlign:isSelectedDataStore?"center":null}}
                         primary="Updated"
                     />
                 </ListItem>
                 {listCache === undefined || listCache === null
                     ? null
                     : listCache.map((data, index) => {
-                        var bgColor = "#27292d";
+                        var bgColor = isSelectedDataStore? "#212121":"#27292d";
                         if (index % 2 === 0) {
-                            bgColor = "#1f2023";
+                            bgColor = isSelectedDataStore? "#1A1A1A":"#1f2023";
                         }
 
               			const validate = validateJson(data.value);
@@ -460,16 +424,16 @@ const CacheView = (props) => {
                             <ListItem key={index} style={{ backgroundColor: bgColor, maxHeight: 300, overflow: "auto", }}>
                                 <ListItemText
                                     style={{
-                                        maxWidth: 250,
+                                        maxWidth: 200,
-                                        minWidth: 250,
+                                        minWidth: 200,
                                         overflow: "hidden",
                                     }}
                                     primary={data.key}
                                 />
                                 <ListItemText
                                     style={{
-										minWidth: 400,
+										minWidth: 300,
-										maxWidth: 400,
+										maxWidth: 300,
 									}}
                                     primary={validate.valid ? 
                       					<ReactJson

frontend/src/components/Files.jsx

@@ -659,7 +659,7 @@ const Files = (props) => {
 					onClick={() => {
 						upload.click();
 					}}
-					style={{backgroundColor: isSelectedFiles?'rgba(255, 132, 68, 0.2)':null, color:isSelectedFiles?"#FF8444":null, borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?162:null, height:isSelectedFiles?40:null}}
+					style={{backgroundColor: isSelectedFiles?'rgba(255, 132, 68, 0.2)':null, color:isSelectedFiles?"#FF8444":null, borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?162:null, height:isSelectedFiles?40:null, boxShadow: isSelectedFiles?'none':null,}}
 				>
 					<PublishIcon /> Upload files
 				</Button>
@@ -679,7 +679,7 @@ const Files = (props) => {
 					}}
 				/>
 				<Button
-					style={{ marginLeft: 5, marginRight: 15, backgroundColor:isSelectedFiles?"#2F2F2F":null,borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?81:null, height:isSelectedFiles?40:null,  }}
+					style={{ marginLeft: 5, marginRight: 15, backgroundColor:isSelectedFiles?"#2F2F2F":null,borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?81:null, height:isSelectedFiles?40:null, boxShadow: isSelectedFiles?'none':null, }}
 					variant="contained"
 					color="primary"
 					onClick={() => getFiles()}
@@ -814,7 +814,7 @@ const Files = (props) => {
 						/>
 						<ListItemText
 							primary="Md5"
-							style={{ minWidth: 250, maxWidth: 250, overflow: "hidden" }}
+							style={{ minWidth: isSelectedFiles?210:250, maxWidth: isSelectedFiles?210:250, overflow: "hidden" }}
 						/>
 						<ListItemText
 							primary="Status"
@@ -836,9 +836,9 @@ const Files = (props) => {
 								return null;
 							}
 
-							var bgColor = "#27292d";
+							var bgColor = isSelectedFiles ? "#212121":"#27292d";
 							if (index % 2 === 0) {
-								bgColor = "#1f2023";
+								bgColor = isSelectedFiles ? "#1A1A1A":"#1f2023";
 							}
 
 							const filenamesplit = file.filename.split(".")
@@ -855,8 +855,8 @@ const Files = (props) => {
 								>
 									<ListItemText
 										style={{
-											maxWidth: 225,
+											maxWidth: isSelectedFiles ? 170:225,
-											minWidth: 225,
+											minWidth: isSelectedFiles ? 170:225,
 											overflow: "hidden",
 										}}
 										primary={new Date(file.updated_at * 1000).toISOString()}
@@ -922,14 +922,16 @@ const Files = (props) => {
 											minWidth: 100,
 											maxWidth: 100,
 											overflow: "hidden",
+											textAlign: isSelectedFiles?"center":null
 										}}
 									/>
 									<ListItemText
 										primary={file.md5_sum}
 										style={{
-											minWidth: 300,
+											minWidth: isSelectedFiles?200:300,
-											maxWidth: 300,
+											maxWidth: isSelectedFiles?200:300,
-											overflow: "hidden",
+											marginLeft:isSelectedFiles? 15:null,
+											overflow: isSelectedFiles?"auto":"hidden",
 										}}
 									/>
 									<ListItemText
@@ -938,14 +940,16 @@ const Files = (props) => {
 											minWidth: 75,
 											maxWidth: 75,
 											overflow: "hidden",
+											textAlign:isSelectedFiles?"center":null,
 											marginLeft: 10,
 										}}
 									/>
 									<ListItemText
 										primary={file.filesize}
 										style={{
-											minWidth: 125,
+											minWidth: isSelectedFiles?80:125,
-											maxWidth: 125,
+											maxWidth: isSelectedFiles?80:125,
+											marginLeft: isSelectedFiles?15:null,
 											overflow: "hidden",
 										}}
 									/>
@@ -1064,7 +1068,7 @@ const Files = (props) => {
 											</Tooltip>
 											<Tooltip
 												title={"Delete file"}
-												style={{marginLeft: 15, }}
+												style={{marginLeft: isSelectedFiles?5:15, }}
 												aria-label={"Delete"}
 											>
 												<span>

frontend/src/components/Priorities.jsx

@@ -203,7 +203,7 @@ const Priorities = (props) => {
     	  <Paper
     	    style={{
     	      backgroundColor: theme.palette.platformColor,
-    	      width: notificationWidth,
+    	      width: clickedFromOrgTab ? null :notificationWidth,
     	      padding: 30,
     	      borderBottom: "1px solid rgba(255,255,255,0.4)",
 			  marginBottom: 20, 
@@ -312,7 +312,7 @@ const Priorities = (props) => {
     }
 
 	return (
-		<div style={{maxWidth: clickedFromOrgTab ? 1030:1000, padding: clickedFromOrgTab ? 27:null, height: clickedFromOrgTab ? "auto":null, backgroundColor: clickedFromOrgTab ? '#212121':null, borderRadius: clickedFromOrgTab ? '16px':null,  }}>
+		<div style={{width: clickedFromOrgTab ? 1030:1000, padding: clickedFromOrgTab ? 27:null, height: clickedFromOrgTab ? "auto":null, backgroundColor: clickedFromOrgTab ? '#212121':null, borderRadius: clickedFromOrgTab ? '16px':null,  }}>
 			<h2 style={{ display: clickedFromOrgTab ?null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ?0:null, color: clickedFromOrgTab ?"#ffffff":null }}>Suggestions</h2>
 			<span style={{ color: clickedFromOrgTab ?"#9E9E9E":null,marginLeft: clickedFromOrgTab ?null:25 }}>
 				Suggestions are tasks identified by Shuffle to help you discover ways to protect your and customers' company. <br/>These range from simple configurations in Shuffle to Usecases you may have missed.&nbsp;

frontend/src/components/Priority.jsx

@@ -147,7 +147,7 @@ const Priority = (props) => {
 				}
 			</div>
 			<div style={{flex: 1, display: "flex", marginLeft: 30, }}>
-				<Button style={{height: 50, borderRadius: 25,  marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" :clickedFromOrgTab ?"#FF8444": "black", backgroundColor: priority.active === false ? theme.palette.inputColor :clickedFromOrgTab?"rgba(255, 132, 68, 0.2)":"rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
+				<Button style={{height: 50, borderRadius: 25, fontSize:16, boxShadow: clickedFromOrgTab ? "none":null,textTransform: clickedFromOrgTab ? 'capitalize':null, marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" :clickedFromOrgTab ?"#FF8444": "black", backgroundColor: priority.active === false ? theme.palette.inputColor :clickedFromOrgTab?"rgba(255, 132, 68, 0.2)":"rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
 
 					if (isCloud) {
 						ReactGA.event({
@@ -173,7 +173,7 @@ const Priority = (props) => {
 					Explore		
 				</Button>
 				{priority.active === true ?
-					<Button style={{borderRadius: 25, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {
+					<Button style={{borderRadius: 25, fontSize:16, boxShadow: clickedFromOrgTab ? "none":null,textTransform: clickedFromOrgTab ? 'capitalize':null, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {
 						// dismiss -> get envs
 						changeRecommendation(priority, "dismiss")
 					}}>

frontend/src/views/Search.jsx

@@ -1,206 +1,316 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 
-import theme from '../theme.jsx';
+import theme from "../theme.jsx";
 import { isMobile } from "react-device-detect";
-import AppGrid from "../components/AppGrid.jsx"
+import AppGrid from "../components/AppGrid.jsx";
-import WorkflowGrid from "../components/WorkflowGrid.jsx"
+import WorkflowGrid from "../components/WorkflowGrid.jsx";
-import CreatorGrid from "../components/CreatorGrid.jsx"
+import CreatorGrid from "../components/CreatorGrid.jsx";
-import DocsGrid from "../components/DocsGrid.jsx"
+import DocsGrid from "../components/DocsGrid.jsx";
-import DiscordChat from "../components/DiscordChat.jsx";
 import { useNavigate } from "react-router-dom";
+import Typography from "@material-ui/core/Typography";
+import { Tabs, Tab, setRef } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { makeStyles } from '@mui/styles';
+import DiscordChat from "../components/DiscordChat.jsx";
 
 import {
-	Tabs,
+  Apps as AppsIcon,
-	Tab,
+  Code as CodeIcon,
-} from "@mui/material";
+  EmojiObjects as EmojiObjectsIcon,
-
+  Chat as ChatIcon,
-import {
+  BorderBottom,
-	Apps as AppsIcon,
-	Code as CodeIcon,
-	Chat as ChatIcon,
-	EmojiObjects as EmojiObjectsIcon,
-	Description as DescriptionIcon,
 } from "@mui/icons-material";
 
+import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined';
+import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
 
 // Should be different if logged in :|
 const Search = (props) => {
-	const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader } = props;
+  const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader } =
-	let navigate = useNavigate();
+    props;
+  let navigate = useNavigate();
 
-	const [curTab, setCurTab] = useState(0);
+  const [curTab, setCurTab] = useState(0);
-	const iconStyle = { marginRight: isHeader ? null : 10 };
+  const iconStyle = { marginRight: isHeader ? null : 10 };
 
-	useEffect(() => {
+  useEffect(() => {
-		if (serverside !== true && window.location.search !== undefined && window.location.search !== null) {
+    if (
-			const urlSearchParams = new URLSearchParams(window.location.search)
+      serverside !== true &&
-			const params = Object.fromEntries(urlSearchParams.entries())
+      window.location.search !== undefined &&
-			const foundTab = params["tab"]
+      window.location.search !== null
-			if (foundTab !== null && foundTab !== undefined) {
+    ) {
-				for (var key in Object.keys(views)) {
+      const urlSearchParams = new URLSearchParams(window.location.search);
-					const value = views[key]
+      const params = Object.fromEntries(urlSearchParams.entries());
-					console.log(key, value)
+      const foundTab = params["tab"];
-					if (value === foundTab) {
+      if (foundTab !== null && foundTab !== undefined) {
-						setConfig("", key)
+        for (var key in Object.keys(views)) {
-						break
+          const value = views[key];
-					}
+          console.log(key, value);
-				}
+          if (value === foundTab) {
-			}
+            setConfig("", key);
-		}
+            break;
-	}, [])
+          }
+        }
+      }
+    }
+  }, []);
 
-	if (serverside === true) {
+  //Stop unnecessariry re-rendering of the component to improve performace
-		return null
+  const MemoizedAppGrid = useMemo(() => <AppGrid
-	}
+  maxRows={4}
+  isHeader={true}
+  showSuggestion={true}
+  globalUrl={globalUrl}
+  isMobile={isMobile}
+    userdata={userdata}
+/>, [curTab]);
 
-	const bodyDivStyle = {
+const MemoizedWorkflowGrid = useMemo(() => <WorkflowGrid
-		margin: "auto",
+  maxRows={3}
-		maxWidth: 1024,
+  showSuggestion={true}
-		scrollX: "hidden",
+  globalUrl={globalUrl}
-		overflowX: "hidden",
+  isMobile={isMobile}
-		justifyContent: isHeader ? "center" : null,
+  userdata={userdata}
-	}
+/>, [curTab]);
 
-	const boxStyle = {
+const MemoizedDocsGrid = useMemo(() => <DocsGrid
-		color: "white",
+  maxRows={6}
-		flex: "1",
+  parsedXs={12}
-		marginLeft: isHeader ? null : 10,
+  showSuggestion={true}
-		marginRight: isHeader ? null : 10,
+  globalUrl={globalUrl}
-		paddingLeft: isHeader ? null : 30,
+  isMobile={isMobile}
-		paddingRight: isHeader ? null : 30,
+  userdata={userdata}
-		paddingBottom: isHeader ? null : 30,
+/>, [curTab]);
-		paddingTop: hidemargins === true ? 0 : isHeader ? null : 30,
-		display: "flex",
-		flexDirection: "column",
-		overflowX: "hidden",
-		minHeight: 400,
-	}
 
-	const views = {
+const MemoizedCreatorGrid = useMemo(() => <CreatorGrid
-		0: "apps",
+  parsedXs={4}
-		1: "workflows",
+  isHeader={true}
-		2: "docs",
+  showSuggestion={true}
-		3: "creators",
+  globalUrl={globalUrl}
-		4: "discord",
+  isMobile={isMobile}
-	}
+  userdata={userdata}
+/>, [curTab]);
 
-	const setConfig = (event, inputValue) => {
+  const MemoizedDiscordChat = useMemo(() => <DiscordChat isMobile={isMobile} />)
-		const newValue = parseInt(inputValue)
 
-		setCurTab(newValue)
+const useStyles = makeStyles({
-		if (newValue === 0) {
+  hideIndicator: {
-			document.title = "Shuffle - search - apps";
+    display: 'none',
-		} else if (newValue === 1) {
+  },
-			document.title = "Shuffle - search - workflows";
+  customTab: {
-		} else if (newValue === 2) {
+    justifyContent: 'center',
-			document.title = "Shuffle - search - documentation";
+    gap: '46px',
-		} else if (newValue === 3) {
+  }
-			document.title = "Shuffle - search - creators";
+});
-		}  else if (newValue === 4) {
+const classes = useStyles();
-            document.title = "Shuffle - search - Discord Chat";
+
-        }else {
+  if (serverside === true) {
-			document.title = "Shuffle - search";
+    return null;
-		}
+  }
+
+  const bodyDivStyle = {
+    margin: "auto",
+    maxWidth: "100%",
+    scrollX: "hidden",
+    overflowX: "hidden",
+    justifyContent: isHeader ? "center" : null,
+  };
+
+  const boxStyle = {
+    color: "white",
+    flex: "1",
+    marginLeft: isHeader ? null : 10,
+    marginRight: isHeader ? null : 10,
+    paddingLeft: isHeader ? null : 30,
+    paddingRight: isHeader ? null : 30,
+    paddingBottom: isHeader ? null : 30,
+    paddingTop: hidemargins === true ? 0 : isHeader ? null : 30,
+    display: "flex",
+    flexDirection: "column",
+    overflowX: "hidden",
+    width: "100%",
+    minHeight: 400,
+  };
+
+  const views = {
+    0: "apps",
+    1: "workflows",
+    2: "docs",
+    3: "creators",
+  };
+  const setConfig = (event, inputValue) => {
+    const newValue = parseInt(inputValue);
+
+    setCurTab(newValue);
+    if (newValue === 0) {
+      document.title = "Shuffle - search - apps";
+    } else if (newValue === 1) {
+      document.title = "Shuffle - search - workflows";
+    } else if (newValue === 2) {
+      document.title = "Shuffle - search - documentation";
+    } else if (newValue === 3) {
+      document.title = "Shuffle - search - creators";
+    } else {
+      document.title = "Shuffle - search";
+    }
+
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const foundQuery = params["q"];
+    var extraQ = "";
+    if (foundQuery !== null && foundQuery !== undefined) {
+      extraQ = "&q=" + foundQuery;
+    }
+
+    if (
+      (serverside === false || serverside === undefined) &&
+      window.location.pathname.includes("/search")
+    ) {
+      navigate(`/search?tab=${views[newValue]}` + extraQ);
+    }
+  };
+
+  if (isLoaded === false) {
+    return null;
+  }
+
+  const StyledTab = styled(Tab)(({ theme }) => ({
+    width: 151,
+    height: 51,
+    padding: "10px 20px", 
+    borderRadius: 8,
+    fontWeight: 600,
+    textTransform: "none",
+    border: 'none',
+    "&.Mui-selected": {
+      backgroundColor: theme.palette.primary.main,
+      color: theme.palette.common.white,
+      "& .MuiSvgIcon-root": {
+        color: theme.palette.common.white,
+      },
+    },
+  }));
+
+  const tabSpanStyling = {
+    display: 'flex', 
+    flexDirection: 'row', 
+    alignItems: 'center' 
+  }
+
+  const tabTextStyling = { 
+    marginLeft: '5px', 
+    color: 'white' 
+  }
   
 
-		const urlSearchParams = new URLSearchParams(window.location.search)
+  // Random names for type & autoComplete. Didn't research :^)
-		const params = Object.fromEntries(urlSearchParams.entries())
+  const landingpageDataBrowser = (
-		const foundQuery = params["q"]
+    <div
-		var extraQ = ""
+      style={{
-		if (foundQuery !== null && foundQuery !== undefined) {
+        paddingBottom: hidemargins === true ? 0 : 100,
-			extraQ = "&q=" + foundQuery
+        color: "white",
-		}
+        width: "100%",
+      }}
+    >
+      <div style={boxStyle}>
+        <Tabs
+          style={{
+            width: 741,
+            margin: isHeader ? null : "auto",
+            marginTop: hidemargins === true ? 0 : isHeader ? null : 25,
+            backgroundColor: "rgba(33, 33, 33, 1)",
+            borderRadius:8
+          }}
+          value={curTab}
+          indicatorColor="primary"
+          textColor="secondary"
+          onChange={setConfig}
+          aria-label="disabled tabs example"
+          variant="scrollable"
+          scrollButtons="auto"
+          classes={{indicator: classes.hideIndicator, root: classes.customTab}}
+        >
+          <StyledTab
+            style={{
+              backgroundColor: curTab === 0 ? theme.palette.primary.main : 'inherit',
+              color: curTab === 0? theme.palette.common.white : 'inherit',
+            }}
+            label={
+              <span style={tabSpanStyling}>
+                <AppsIcon style={iconStyle} />
+                <Typography variant="body1" style={tabTextStyling}>App</Typography>
+              </span>
+            }
+          />
+          <StyledTab
+            style={{
+              backgroundColor: curTab ===1 ? theme.palette.primary.main : 'inherit',
+              color: curTab === 1? theme.palette.common.white : 'inherit',
+            }}
+            label={
+              <span style={tabSpanStyling}>
+                <CodeIcon  style={iconStyle} />
+                <Typography variant="body1" style={tabTextStyling}>Workflow</Typography>
+              </span>
+            }
+          />
+          <StyledTab
+            style={{
+              backgroundColor: curTab === 2 ? theme.palette.primary.main : 'inherit',
+              color: curTab === 2? theme.palette.common.white : 'inherit',
+            }}
+            label={
+              <span style={tabSpanStyling}>
+                <DescriptionOutlinedIcon  style={iconStyle} />
+                <Typography variant="body1" style={tabTextStyling}>Docs</Typography>
+              </span>
+            }
+          />
+          <StyledTab
+            style={{
+              backgroundColor: curTab === 3 ? theme.palette.primary.main : 'inherit',
+              color: curTab === 3 ? theme.palette.common.white : 'inherit'
+            }}
+            label={
+              <span style={tabSpanStyling}>
+                <PeopleAltOutlinedIcon style={iconStyle} />
+                <Typography variant="body1" style={tabTextStyling}>Creators</Typography>
+              </span>
+            }
+          />
+          <StyledTab
+            style={{
+              backgroundColor: curTab === 4 ? theme.palette.primary.main : 'inherit',
+              color: curTab === 4 ? theme.palette.common.white : 'inherit'
+            }}
+            label={
+              <span style={tabSpanStyling}>
+                <ChatIcon  style={iconStyle} />
+                <Typography variant="body1" style={{tabTextStyling, whiteSpace: "nowrap", color: "white"}}>Discord Chat</Typography>
+              </span>
+            }
+          />
+        </Tabs>
+      {curTab === 0 && MemoizedAppGrid}
+      {curTab === 1 && MemoizedWorkflowGrid}
+      {curTab === 2 && MemoizedDocsGrid}
+      {curTab === 3 && MemoizedCreatorGrid}
+      {curTab === 4 && MemoizedDiscordChat}
+      </div>
+    </div>
+  );
+  //{/*alternativeView={true} />*/}
 
+  const loadedCheck = isLoaded ? (
+    <div>
+      <div style={bodyDivStyle}>{landingpageDataBrowser}</div>
+    </div>
+  ) : (
+    <div></div>
+  );
 
-		if ((serverside === false || serverside === undefined) && window.location.pathname.includes("/search")) {
+  // #1f2023?
-			navigate(`/search?tab=${views[newValue]}` + extraQ)
+  return <div style={{}}>{loadedCheck}</div>;
-		}
+};
-	}
-
-	if (isLoaded === false) {
-		return null
-	}
-
-
-	// Random names for type & autoComplete. Didn't research :^)
-	const landingpageDataBrowser =
-		<div style={{ paddingBottom: hidemargins === true ? 0 : 100, color: "white", }}>
-			<div style={boxStyle}>
-				<Tabs
-					style={{ width: isHeader ? 765 : 610, margin: isHeader ? null : "auto", marginTop: hidemargins === true ? 0 : isHeader ? null : 25, }}
-					value={curTab}
-					indicatorColor="primary"
-					textColor="secondary"
-					onChange={setConfig}
-					aria-label="disabled tabs example"
-					variant="scrollable"
-					scrollButtons="auto"
-				>
-					<Tab
-						label=<span>
-							<AppsIcon style={iconStyle} /> Apps
-						</span>
-					/>
-					<Tab
-						label=<span>
-							<CodeIcon style={iconStyle} /> Workflows
-						</span>
-					/>
-					<Tab
-						label=<span>
-							<DescriptionIcon style={iconStyle} /> Docs
-						</span>
-					/>
-					<Tab
-						label=<span>
-							<EmojiObjectsIcon style={iconStyle} /> Creators
-						</span>
-					/>
-					<Tab
-						label=<span>
-							<ChatIcon style={iconStyle} /> Discord Chat
-						</span>
-					/>
-
-				</Tabs>
-				{curTab === 0 ?
-					<AppGrid maxRows={3} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
-					:
-					curTab === 1 ?
-						window.location.pathname === "/search" ?
-							<WorkflowGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
-							:
-							<WorkflowGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
-						:
-						curTab === 2 ?
-							<DocsGrid maxRows={6} parsedXs={12} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
-							:
-							curTab === 3 ?
-								<CreatorGrid parsedXs={4} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
-								:
-								curTab === 4 ? 
-    <DiscordChat isMobile={isMobile} />
-:
-
-								null}
-			</div>
-		</div>
-	//{/*alternativeView={true} />*/}
-
-	const loadedCheck = isLoaded ?
-		<div>
-			<div style={bodyDivStyle}>{landingpageDataBrowser}</div>
-		</div>
-		:
-		<div>
-		</div>
-
-	// #1f2023?
-	return (
-		<div style={{}}>
-			{loadedCheck}
-		</div>
-	)
-}
 
 export default Search;