Chrome Extension: Update logo and change default routes to those of T…

…wenty prod (#4046). (#4172)

* fix: replace twenty logo in the png format with one in the svg format for better resolution

* fix: toggle the custom url switch to true if the local storage contains a server base url different from that of the env variable

* fix: update the front base url and the server base url to those of the production environment in the .env.example file

* fix: update README to add a step for changing env variables to those of the development environment for contributors or local testers

packages/twenty-chrome-extension/.env.example

@@ -1,2 +1,2 @@
-VITE_SERVER_BASE_URL=http://localhost:3000
-VITE_FRONT_BASE_URL=http://localhost:3001
+VITE_SERVER_BASE_URL=https://api.twenty.com
+VITE_FRONT_BASE_URL=https://app.twenty.com

packages/twenty-chrome-extension/README.md

@@ -5,47 +5,56 @@ This extension allows you to save `company` and `people` information to your twe
 To install the extension in development mode with hmr (hot module reload), follow these steps.
 
 - STEP 1: Clone the repository and run `yarn install` in the root directory.
+
 - STEP 2: Once the dependencies installation succeeds, create a file with env variables by executing the following command in the root directory.
 
 ```
 cp ./packages/twenty-chrome-extension/.env.example ./packages/twenty-chrome-extension/.env
 ```
 
-- STEP 3: Now, execute the following command in the root directory to start up the development server on Port 3002. This will create a `dist` folder in `twenty-chrome-extension`.
+- STEP 3 (optional): Update values of the environment variables to match those of your instance for `twenty-front` and `twenty-server`. If you want to work on your local machine with the default setup from `Twenty Docs`, replace everything in the .env file with the following.
+
+```
+VITE_SERVER_BASE_URL=http://localhost:3000
+VITE_FRONT_BASE_URL=http://localhost:3001
+```
+
+- STEP 4: Now, execute the following command in the root directory to start up the development server on Port 3002. This will create a `dist` folder in `twenty-chrome-extension`.
 
 ```
 yarn nx start twenty-chrome-extension
 ```
 
-- STEP 4: Open Google Chrome and head to the extensions page by typing `chrome://extensions` in the address bar.
+- STEP 5: Open Google Chrome and head to the extensions page by typing `chrome://extensions` in the address bar.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/01-img-one.png" width="600" />
 </p>
 
-- STEP 5: Turn on the `Developer mode` from the top-right corner and click `Load unpacked`.
+- STEP 6: Turn on the `Developer mode` from the top-right corner and click `Load unpacked`.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/02-img-two.png" width="600" />
 </p>
 
-- STEP 6: Select the `dist` folder from `twenty-chrome-extension`.
+- STEP 7: Select the `dist` folder from `twenty-chrome-extension`.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/03-img-three.png" width="600" />
 </p>
 
-- STEP 7: This opens up the `options` page, where you must enter your API key.
+- STEP 8: This opens up the `options` page, where you must enter your API key.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/04-img-four.png" width="600" />
 </p>
 
-- STEP 8: Reload any LinkedIn page that you opened before installing the extension for seamless experience.
-- STEP 9: Visit any individual or company profile on LinkedIn and click the `Add to Twenty` button to test.
+- STEP 9: Reload any LinkedIn page that you opened before installing the extension for seamless experience.
+
+- STEP 10: Visit any individual or company profile on LinkedIn and click the `Add to Twenty` button to test.
 
 <p align="center">
    <img src="../twenty-chrome-extension/public/readme-images/05-img-five.png" width="600" />
 </p>
 
-To install the extension in production mode without hmr (hot module reload), replace the command in STEP THREE with `yarn nx build twenty-chrome-extension`.
+To install the extension in production mode without hmr (hot module reload), replace the command in STEP FOUR with `yarn nx build twenty-chrome-extension`. You may or may not want to execute STEP THREE based on your requirements.

packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx

@@ -65,6 +65,7 @@ export const ApiKeyForm = () => {
       }
 
       if (localStorage.serverBaseUrl) {
+        setShowSection(true);
         setRoute(localStorage.serverBaseUrl);
       }
     };
@@ -77,7 +78,11 @@ export const ApiKeyForm = () => {
   }, [apiKey]);
 
   useEffect(() => {
-    chrome.storage.local.set({ serverBaseUrl: route });
+    if (import.meta.env.VITE_SERVER_BASE_URL !== route) {
+      chrome.storage.local.set({ serverBaseUrl: route });
+    } else {
+      chrome.storage.local.set({ serverBaseUrl: '' });
+    }
   }, [route]);
 
   const handleGenerateClick = () => {
@@ -93,7 +98,7 @@ export const ApiKeyForm = () => {
   return (
     <StyledContainer isToggleOn={showSection}>
       <StyledHeader>
-        <StyledImg src="/logo/32-32.png" alt="Twenty Logo" />
+        <StyledImg src="/logo/32-32.svg" alt="Twenty Logo" />
       </StyledHeader>
 
       <StyledMain>