From 9ba714fa43429c5e9340a8df4b6440262819af70 Mon Sep 17 00:00:00 2001
From: anastasiia <anastasiya1155@gmail.com>
Date: Thu, 11 Jan 2024 09:26:13 -0500
Subject: [PATCH] init api on self-serve

---
 client/src/CloudApp.tsx                          | 5 ++++-
 client/src/Onboarding/SelfServe/index.tsx        | 5 +++--
 client/src/Project/EmptyProject.tsx              | 2 +-
 client/src/components/Header/HeaderRightPart.tsx | 2 +-
 4 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/CloudApp.tsx b/client/src/CloudApp.tsx
index d280d52b53..a3a475dc34 100644
--- a/client/src/CloudApp.tsx
+++ b/client/src/CloudApp.tsx
@@ -4,6 +4,7 @@ import packageJson from '../package.json';
 import App from './App';
 import { LocaleContext } from './context/localeContext';
 import i18n from './i18n';
+import './index.css';
 import {
   getPlainFromStorage,
   LANGUAGE_KEY,
@@ -12,9 +13,11 @@ import {
 import { LocaleType } from './types/general';
 import { DeviceContextProvider } from './context/providers/DeviceContextProvider';
 import { EnvContext } from './context/envContext';
-import { getConfig } from './services/api';
+import { getConfig, initApi } from './services/api';
+import { useComponentWillMount } from './hooks/useComponentWillMount';
 
 const CloudApp = () => {
+  useComponentWillMount(() => initApi('/api', true));
   const [envConfig, setEnvConfig] = useState({});
   const [locale, setLocale] = useState<LocaleType>(
     (getPlainFromStorage(LANGUAGE_KEY) as LocaleType | null) || 'en',
diff --git a/client/src/Onboarding/SelfServe/index.tsx b/client/src/Onboarding/SelfServe/index.tsx
index 1673212501..e27aea57cf 100644
--- a/client/src/Onboarding/SelfServe/index.tsx
+++ b/client/src/Onboarding/SelfServe/index.tsx
@@ -23,7 +23,7 @@ const SelfServe = () => {
   }, []);
 
   return (
-    <div className="text-label-title">
+    <div className="fixed top-0 bottom-0 left-0 right-0 z-100 bg-bg-sub select-none">
       <div
         className={`flex justify-center items-start mt-8 w-screen overflow-auto relative h-[calc(100vh-4rem)]`}
       >
@@ -39,7 +39,8 @@ const SelfServe = () => {
                 </div>
                 <a href={loginUrl} className="w-full flex flex-col">
                   <Button variant="primary" disabled={!loginUrl}>
-                    <GitHubLogo /> <Trans>Sign in with GitHub</Trans>
+                    <GitHubLogo sizeClassName="w-5 h-5" />{' '}
+                    <Trans>Sign in with GitHub</Trans>
                   </Button>
                 </a>
               </div>
diff --git a/client/src/Project/EmptyProject.tsx b/client/src/Project/EmptyProject.tsx
index 2e8eeeb6e6..1218ad5bf5 100644
--- a/client/src/Project/EmptyProject.tsx
+++ b/client/src/Project/EmptyProject.tsx
@@ -37,7 +37,7 @@ const EmptyProject = ({}: Props) => {
               <p className="body-s text-label-base !leading-5">
                 <Trans values={{ cmdKey: shortcut?.[0] }}>
                   Press{' '}
-                  <span className="w-5 h-5 inline-flex items-center justify-center rounded border border-bg-border bg-bg-base shadow-low">
+                  <span className="min-w-[20px] h-5 px-0.5 inline-flex items-center justify-center rounded border border-bg-border bg-bg-base shadow-low">
                     cmdKey
                   </span>{' '}
                   <span className="w-5 h-5 inline-flex items-center justify-center rounded border border-bg-border bg-bg-base shadow-low">
diff --git a/client/src/components/Header/HeaderRightPart.tsx b/client/src/components/Header/HeaderRightPart.tsx
index 8b4d396afc..a52d3c3872 100644
--- a/client/src/components/Header/HeaderRightPart.tsx
+++ b/client/src/components/Header/HeaderRightPart.tsx
@@ -26,7 +26,7 @@ const HeaderRightPart = ({}: Props) => {
       <Button variant="tertiary" size="mini" onClick={openCommandBar}>
         <KLetterIcon sizeClassName="w-3.5 h-3.5" className="-translate-y-px" />
         <Trans>Actions</Trans>
-        <span className="text-label-faint">{shortcut?.join('')}</span>
+        <span className="text-label-faint">{shortcut?.join(' ')}</span>
       </Button>
       <Dropdown DropdownComponent={UserDropdown} dropdownPlacement="bottom-end">
         {envConfig.github_user?.avatar_url ? (