fix dashboard spinner

dashboard/src/App.tsx

@@ -5,7 +5,6 @@ import styled, { ThemeProvider, createGlobalStyle } from "styled-components";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import MainWrapper from "./main/MainWrapper";
-import midnight from "shared/themes/midnight";
 import standard from "shared/themes/standard";
 
 const queryClient = new QueryClient();

dashboard/src/main/home/Home.tsx

@@ -366,10 +366,13 @@ const Home: React.FC<Props> = (props) => {
   const { cluster, baseRoute } = props.match.params as any;
   return (
     <ThemeProvider
-      theme={currentProject?.simplified_view_enabled ? midnight : standard}
+      theme={theme}
     >
       <StyledHome>
-        <ModalHandler setRefreshClusters={setForceRefreshClusters} />
+        <ModalHandler 
+          setRefreshClusters={setForceRefreshClusters}
+          setTheme={setTheme}
+        />
         {currentOverlay &&
           createPortal(
             <ConfirmOverlay

dashboard/src/main/home/ModalHandler.tsx

@@ -21,7 +21,8 @@ import ConnectToDatabaseInstructionsModal from "./modals/ConnectToDatabaseInstru
 
 const ModalHandler: React.FC<{
   setRefreshClusters: (x: boolean) => void;
-}> = ({ setRefreshClusters }) => {
+  setTheme: (x: any) => void;
+}> = ({ setRefreshClusters, setTheme }) => {
   const [isAuth] = useAuth();
   const {
     currentModal,
@@ -181,9 +182,9 @@ const ModalHandler: React.FC<{
           onRequestClose={() => setCurrentModal(null, null)}
           width="760px"
           height="480px"
-          title="Account Settings"
+          title="Account settings"
         >
-          <AccountSettingsModal />
+          <AccountSettingsModal setTheme={setTheme} />
         </Modal>
       )}
 

dashboard/src/main/home/add-on-dashboard/AddOnDashboard.tsx

@@ -220,7 +220,7 @@ const AppDashboard: React.FC<Props> = ({
                   <MidIcon src={healthy} height="16px" />
                 </Text>
                 <Spacer height="15px" />
-                <Text size={13} color="#ffffff44">
+                <Text size={13} color="helper2">
                   <SmallIcon opacity="0.4" src={time} />
                   {readableDate(app.info.last_deployed)}
                 </Text>
@@ -300,9 +300,9 @@ const Block = styled(Link)`
   position: relative;
   border-radius: 5px;
   background: ${props => props.theme.clickable.bg};
-  border: 1px solid #494b4f;
+  border: 1px solid ${({ theme }) => theme.border};
   :hover {
-    border: 1px solid #7a7b80;
+    border: 1px solid ${({ theme }) => theme.border2};
   }
 
   animation: fadeIn 0.3s 0s;

dashboard/src/main/home/dashboard/Dashboard.tsx

@@ -30,7 +30,7 @@ const Dashboard: React.FC<Props> = ({
   setRefreshClusters,
   ...props
 }) => {
-  const { currentProject, user, capabilities } = useContext(Context);
+  const { currentProject, user, capabilities, usage } = useContext(Context);
   const [infras, setInfras] = useState<InfraType[]>([]);
   const [pressingCtrl, setPressingCtrl] = useState(false);
   const [pressingK, setPressingK] = useState(false);
@@ -88,10 +88,10 @@ const Dashboard: React.FC<Props> = ({
     }
   }, [currentProject]);
 
-  const currentTab = () => new URLSearchParams(props.location.search).get("tab");
+  const currentTab = () => new URLSearchParams(props.location.search).get("tab") || "overview";
 
   useEffect(() => {
-    if (props.isAuthorized("cluster", "", ["get", "create"])) {
+    if (usage && usage?.current?.clusters < usage?.limit?.clusters) {
       tabOptions.push({ label: "Create a cluster", value: "create-cluster" });
     }
 

dashboard/src/main/home/modals/AccountSettingsModal.tsx

@@ -5,21 +5,33 @@ import github from "assets/github.png";
 
 import { Context } from "../../../shared/Context";
 import api from "../../../shared/api";
+import midnight from "shared/themes/midnight";
+import standard from "shared/themes/standard";
+import opal from "shared/themes/opal";
+
 import Loading from "../../../components/Loading";
 import Heading from "components/form-components/Heading";
 import Helper from "components/form-components/Helper";
-
 import TabSelector from "components/TabSelector";
+import Spacer from "components/porter/Spacer";
+import Text from "components/porter/Text";
+import Select from "components/porter/Select";
 
 interface GithubAppAccessData {
   username?: string;
   accounts?: string[];
 }
 
-const tabOptions = [{ label: "Integrations", value: "integrations" }];
+const tabOptions = [
+  { label: "Integrations", value: "integrations" },
+  { label: "Appearance", value: "appearance" },
+];
+
+type Props = {
+  setTheme: (x: any) => void;
+}
 
-const AccountSettingsModal = () => {
-  const { setCurrentModal } = useContext(Context);
+const AccountSettingsModal: React.FC<Props> = ({ setTheme }) => {
   const [accessLoading, setAccessLoading] = useState(true);
   const [accessError, setAccessError] = useState(false);
   const [accessData, setAccessData] = useState<GithubAppAccessData>({});
@@ -46,71 +58,100 @@ const AccountSettingsModal = () => {
         currentTab={currentTab}
         setCurrentTab={(value: string) => setCurrentTab(value)}
       />
-
-      <Heading>
-        <GitIcon src={github} /> GitHub
-      </Heading>
-      {accessLoading ? (
-        <LoadingWrapper>
-          {" "}
-          <Loading />
-        </LoadingWrapper>
-      ) : (
+      {currentTab === "integrations" && (
         <>
-          {accessError && (
-            <ListWrapper>
-              <Helper>
-                No connected repositories found.
-                <A href={"/api/integrations/github-app/oauth"}>
-                  Authorize Porter to view your repositories.
-                </A>
-              </Helper>
-            </ListWrapper>
-          )}
-
-          {/* Will be styled (and show what account is connected) later */}
-          {!accessError && accessData.username && (
-            <Placeholder>
-              <User>
-                You are currently authorized as <B>{accessData.username}</B> and
-                have access to:
-              </User>
-              {!accessData.accounts || accessData.accounts?.length == 0 ? (
+          <Heading>
+            <GitIcon src={github} /> GitHub
+          </Heading>
+          {accessLoading ? (
+            <LoadingWrapper>
+              {" "}
+              <Loading />
+            </LoadingWrapper>
+          ) : (
+            <>
+              {accessError && (
                 <ListWrapper>
                   <Helper>
                     No connected repositories found.
-                    <A href={"/api/integrations/github-app/install"}>
-                      Install Porter in your repositories
+                    <A href={"/api/integrations/github-app/oauth"}>
+                      Authorize Porter to view your repositories.
                     </A>
                   </Helper>
                 </ListWrapper>
-              ) : (
-                <>
-                  <List>
-                    {accessData.accounts.map((name, i) => {
-                      return (
-                        <React.Fragment key={i}>
-                          <Row
-                            isLastItem={i === accessData.accounts.length - 1}
-                          >
-                            <i className="material-icons">bookmark</i>
-                            {name}
-                          </Row>
-                        </React.Fragment>
-                      );
-                    })}
-                  </List>
-                  <br />
-                  Don't see the right repos?{" "}
-                  <A href={"/api/integrations/github-app/install"}>
-                    Install Porter in more repositories
-                  </A>
-                </>
               )}
-            </Placeholder>
+
+              {/* Will be styled (and show what account is connected) later */}
+              {!accessError && accessData.username && (
+                <Placeholder>
+                  <User>
+                    You are currently authorized as <B>{accessData.username}</B> and
+                    have access to:
+                  </User>
+                  {!accessData.accounts || accessData.accounts?.length == 0 ? (
+                    <ListWrapper>
+                      <Helper>
+                        No connected repositories found.
+                        <A href={"/api/integrations/github-app/install"}>
+                          Install Porter in your repositories
+                        </A>
+                      </Helper>
+                    </ListWrapper>
+                  ) : (
+                    <>
+                      <List>
+                        {accessData.accounts.map((name, i) => {
+                          return (
+                            <React.Fragment key={i}>
+                              <Row
+                                isLastItem={i === accessData.accounts.length - 1}
+                              >
+                                <i className="material-icons">bookmark</i>
+                                {name}
+                              </Row>
+                            </React.Fragment>
+                          );
+                        })}
+                      </List>
+                      <br />
+                      Don't see the right repos?{" "}
+                      <A href={"/api/integrations/github-app/install"}>
+                        Install Porter in more repositories
+                      </A>
+                    </>
+                  )}
+                </Placeholder>
+              )}
+            </>
           )}
         </>
       )}
+      {currentTab === "appearance" && (
+        <>
+          <Spacer y={1} />
+          <Text size={16}>Dashboard theme</Text>
+          <Spacer y={0.5} />
+          <Text color="helper">Configure the appearance of the Porter dashboard.</Text>
+          <Spacer y={0.5} />
+          <Select
+            setValue={(themeName: string) => {
+              if (themeName === "midnight") {
+                setTheme(midnight);
+              } else if (themeName === "slate") {
+                setTheme(standard);
+              } else if (themeName === "opal") {
+                setTheme(opal);
+              }
+            }}
+            options={[
+              { label: "Midnight", value: "midnight" },
+              { label: "Opal", value: "opal" },
+              { label: "Slate", value: "slate" },
+            ]}
+            width="300px"
+          />
+        </>
+      )}
     </>
   );
 };

dashboard/src/main/home/navbar/Navbar.tsx

@@ -5,7 +5,6 @@ import { Context } from "shared/Context";
 import Feedback from "./Feedback";
 import Help from "./Help";
 import { withAuth, WithAuthProps } from "shared/auth/AuthorizationHoc";
-import { Select } from "@material-ui/core";
 
 type PropsType = WithAuthProps & {
   logOut: () => void;

dashboard/src/shared/themes/opal.ts

@@ -0,0 +1,18 @@
+const theme = {
+  bg: "#f3f5f8",
+  fg: "#ffffff",
+  fg2: "#ffffff11",
+  border: "#bbbbcc",
+  border2: "#9999aa",
+  button: "#3A48CA",
+  clickable: {
+    bg: "linear-gradient(180deg, #ffffff, #f3f5f8)",
+  },
+  modalBg: "#171B2111",
+  text: {
+    primary: "#414142",
+    helper: "#aaaabb",
+  },
+}
+
+export default theme;