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/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,
-};