Chrome Extension: Update logo and change default routes to those of Twenty 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/public/logo/32-32.svg

@@ -0,0 +1,12 @@
+<svg width="32" height="32" viewBox="0 0 136 136" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2343_96406)">
+<path d="M136 2.28882e-05H0L0.000144482 136H136V2.28882e-05ZM27.27 50.6401C27.27 43.2101 33.3 37.1801 40.73 37.1801H66.64C67.02 37.1801 67.37 37.4101 67.53 37.7601C67.69 38.1101 67.62 38.5201 67.36 38.8101L61.68 44.9801C60.69 46.0501 59.3 46.6701 57.84 46.6701H40.8C38.57 46.6701 36.76 48.4801 36.76 50.7101V60.8901C36.76 62.2001 35.7 63.2601 34.39 63.2601H29.65C28.34 63.2601 27.28 62.2001 27.28 60.8901V50.6401H27.27ZM107.88 85.3601C107.88 92.7901 101.85 98.82 94.42 98.82H83.41C75.98 98.82 69.95 92.7901 69.95 85.3601V66.0901C69.95 64.7801 70.44 63.5201 71.33 62.5501L77.75 55.5801C78.02 55.2901 78.44 55.1901 78.82 55.3301C79.19 55.4801 79.44 55.83 79.44 56.23V85.3001C79.44 87.5301 81.25 89.3401 83.48 89.3401H94.36C96.59 89.3401 98.4 87.5301 98.4 85.3001V50.7101C98.4 48.4801 96.59 46.6701 94.36 46.6701H81.71C80.26 46.6701 78.88 47.2801 77.89 48.3401L40.16 89.3401H62.83C64.14 89.3401 65.2 90.4001 65.2 91.7101V96.4501C65.2 97.7601 64.14 98.82 62.83 98.82H32.28C29.51 98.82 27.26 96.5701 27.26 93.8001V91.29C27.26 90.03 27.73 88.8201 28.59 87.8901L70.89 41.9401C73.69 38.9001 77.62 37.1801 81.75 37.1801H94.41C101.84 37.1801 107.87 43.2101 107.87 50.6401V85.3601H107.88Z" fill="black"/>
+<path d="M27.27 50.6401C27.27 43.2101 33.3 37.1801 40.73 37.1801H66.64C67.02 37.1801 67.37 37.4101 67.53 37.7601C67.69 38.1101 67.62 38.5201 67.36 38.8101L61.68 44.9801C60.69 46.0501 59.3 46.6701 57.84 46.6701H40.8C38.57 46.6701 36.76 48.4801 36.76 50.7101V60.8901C36.76 62.2001 35.7 63.2601 34.39 63.2601H29.65C28.34 63.2601 27.28 62.2001 27.28 60.8901V50.6401H27.27Z" fill="white"/>
+<path d="M107.88 85.3601C107.88 92.7901 101.85 98.82 94.42 98.82H83.41C75.98 98.82 69.95 92.7901 69.95 85.3601V66.0901C69.95 64.7801 70.44 63.5201 71.33 62.5501L77.75 55.5801C78.02 55.2901 78.44 55.1901 78.82 55.3301C79.19 55.4801 79.44 55.83 79.44 56.23V85.3001C79.44 87.5301 81.25 89.3401 83.48 89.3401H94.36C96.59 89.3401 98.4 87.5301 98.4 85.3001V50.7101C98.4 48.4801 96.59 46.6701 94.36 46.6701H81.71C80.26 46.6701 78.88 47.2801 77.89 48.3401L40.16 89.3401H62.83C64.14 89.3401 65.2 90.4001 65.2 91.7101V96.4501C65.2 97.7601 64.14 98.82 62.83 98.82H32.28C29.51 98.82 27.26 96.5701 27.26 93.8001V91.29C27.26 90.03 27.73 88.8201 28.59 87.8901L70.89 41.9401C73.69 38.9001 77.62 37.1801 81.75 37.1801H94.41C101.84 37.1801 107.87 43.2101 107.87 50.6401V85.3601H107.88Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_2343_96406">
+<rect width="136" height="136" rx="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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>

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts

@@ -1,9 +0,0 @@
-export const ANIMATION = {
-  duration: {
-    instant: 0.075,
-    fast: 0.15,
-    normal: 0.3,
-  },
-};
-
-export type AnimationDuration = 'instant' | 'fast' | 'normal';

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts

@@ -1,4 +0,0 @@
-export const BLUR = {
-  light: 'blur(6px)',
-  strong: 'blur(20px)',
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts

@@ -1,7 +0,0 @@
-import { MAIN_COLORS } from '@/ui/theme/constants/MainColors';
-import { SECONDARY_COLORS } from '@/ui/theme/constants/SecondaryColors';
-
-export const COLOR = {
-  ...MAIN_COLORS,
-  ...SECONDARY_COLORS,
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts

@@ -1,13 +0,0 @@
-export const ICON = {
-  size: {
-    sm: 14,
-    md: 16,
-    lg: 20,
-    xl: 40,
-  },
-  stroke: {
-    sm: 1.6,
-    md: 2,
-    lg: 2.5,
-  },
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts

@@ -1,7 +0,0 @@
-export const MODAL = {
-  size: {
-    sm: '300px',
-    md: '400px',
-    lg: '53%',
-  },
-};

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts

@@ -1,13 +0,0 @@
-export const TEXT = {
-  lineHeight: {
-    lg: 1.5,
-    md: 1.2,
-  },
-
-  iconSizeMedium: 16,
-  iconSizeSmall: 14,
-
-  iconStrikeLight: 1.6,
-  iconStrikeMedium: 2,
-  iconStrikeBold: 2.5,
-};