From 2a05de52898bcdb9ab7683310d49b506e2b329f3 Mon Sep 17 00:00:00 2001
From: Abdullah <125115953+mabdullahabaid@users.noreply.github.com>
Date: Mon, 26 Feb 2024 13:05:59 +0500
Subject: [PATCH] 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 | 4 +--
packages/twenty-chrome-extension/README.md | 25 +++++++++++++------
.../public/logo/32-32.svg | 12 +++++++++
.../modules/api-key/components/ApiKeyForm.tsx | 9 +++++--
.../modules/ui/theme/constants/animation.ts | 9 -------
.../modules/ui/theme/constants/blur.ts | 4 ---
.../modules/ui/theme/constants/colors.ts | 7 ------
.../modules/ui/theme/constants/icon.ts | 13 ----------
.../modules/ui/theme/constants/modal.ts | 7 ------
.../modules/ui/theme/constants/text.ts | 13 ----------
10 files changed, 38 insertions(+), 65 deletions(-)
create mode 100644 packages/twenty-chrome-extension/public/logo/32-32.svg
delete mode 100644 packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts
delete mode 100644 packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts
delete mode 100644 packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts
delete mode 100644 packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts
delete mode 100644 packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts
delete mode 100644 packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts
diff --git a/packages/twenty-chrome-extension/.env.example b/packages/twenty-chrome-extension/.env.example
index 4ab48f1d9..278bc5952 100644
--- a/packages/twenty-chrome-extension/.env.example
+++ b/packages/twenty-chrome-extension/.env.example
@@ -1,2 +1,2 @@
-VITE_SERVER_BASE_URL=http://localhost:3000
-VITE_FRONT_BASE_URL=http://localhost:3001
\ No newline at end of file
+VITE_SERVER_BASE_URL=https://api.twenty.com
+VITE_FRONT_BASE_URL=https://app.twenty.com
\ No newline at end of file
diff --git a/packages/twenty-chrome-extension/README.md b/packages/twenty-chrome-extension/README.md
index fbe86fdfa..749c477ef 100644
--- a/packages/twenty-chrome-extension/README.md
+++ b/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.
-- 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`.
-- STEP 6: Select the `dist` folder from `twenty-chrome-extension`.
+- STEP 7: Select the `dist` folder from `twenty-chrome-extension`.
-- 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.
-- 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.
-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.
\ No newline at end of file
diff --git a/packages/twenty-chrome-extension/public/logo/32-32.svg b/packages/twenty-chrome-extension/public/logo/32-32.svg
new file mode 100644
index 000000000..b5f1e311f
--- /dev/null
+++ b/packages/twenty-chrome-extension/public/logo/32-32.svg
@@ -0,0 +1,12 @@
+
diff --git a/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx b/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx
index c208d57c6..88e051972 100644
--- a/packages/twenty-chrome-extension/src/options/modules/api-key/components/ApiKeyForm.tsx
+++ b/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 (
-
+
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts
deleted file mode 100644
index 865d43b2b..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/animation.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const ANIMATION = {
- duration: {
- instant: 0.075,
- fast: 0.15,
- normal: 0.3,
- },
-};
-
-export type AnimationDuration = 'instant' | 'fast' | 'normal';
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts
deleted file mode 100644
index 01f265147..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/blur.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export const BLUR = {
- light: 'blur(6px)',
- strong: 'blur(20px)',
-};
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts
deleted file mode 100644
index 022a67b70..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/colors.ts
+++ /dev/null
@@ -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,
-};
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts
deleted file mode 100644
index e103c0b8e..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/icon.ts
+++ /dev/null
@@ -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,
- },
-};
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts
deleted file mode 100644
index 2a53265cc..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/modal.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const MODAL = {
- size: {
- sm: '300px',
- md: '400px',
- lg: '53%',
- },
-};
diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts
deleted file mode 100644
index db9a0786b..000000000
--- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/text.ts
+++ /dev/null
@@ -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,
-};
