diff --git a/frontend/src/components/analytics/posthog.ts b/frontend/src/components/analytics/posthog.ts index 246d5c9cc..cc26e5512 100644 --- a/frontend/src/components/analytics/posthog.ts +++ b/frontend/src/components/analytics/posthog.ts @@ -6,7 +6,7 @@ import { ENV, POSTHOG_API_KEY, POSTHOG_HOST } from "../utilities/config"; export const initPostHog = () => { // @ts-ignore - console.log("Hi there 👋") + console.log("Hi there 👋"); try { if (typeof window !== "undefined") { // @ts-ignore @@ -19,7 +19,7 @@ export const initPostHog = () => { return posthog; } catch (e) { - console.log("posthog err", e) + console.log("posthog err", e); } return undefined; diff --git a/frontend/src/components/basic/Error.tsx b/frontend/src/components/basic/Error.tsx index bf892e03d..1ef937e4a 100644 --- a/frontend/src/components/basic/Error.tsx +++ b/frontend/src/components/basic/Error.tsx @@ -3,9 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; const Error = ({ text }: { text: string }): JSX.Element => { return ( -
- - {text &&

{text}

} +
+ + {text &&

{text}

}
); }; diff --git a/frontend/src/components/basic/InputField.tsx b/frontend/src/components/basic/InputField.tsx index 0bc01defc..346294e56 100644 --- a/frontend/src/components/basic/InputField.tsx +++ b/frontend/src/components/basic/InputField.tsx @@ -39,16 +39,16 @@ const InputField = ({ if (isStatic === true) { return ( -
-

{label}

- {text &&

{text}

} +
+

{label}

+ {text &&

{text}

} onChangeHandler(e.target.value)} type={type} placeholder={placeholder} value={value} required={isRequired} - className="bg-bunker-800 text-gray-400 border border-gray-600 rounded-md text-md p-2 w-full min-w-16 outline-none" + className="text-md min-w-16 w-full rounded-md border border-gray-600 bg-bunker-800 p-2 text-gray-400 outline-none" name={name} readOnly autoComplete={autoComplete} @@ -58,12 +58,12 @@ const InputField = ({ ); } return ( -
-
-

{label}

+
+
+

{label}

@@ -75,11 +75,11 @@ const InputField = ({ required={isRequired} className={`${ blurred - ? "text-bunker-800 group-hover:text-gray-400 focus:text-gray-400 active:text-gray-400" + ? "text-bunker-800 focus:text-gray-400 active:text-gray-400 group-hover:text-gray-400" : "" } ${ error ? "focus:ring-red/50" : "focus:ring-primary/50" - } relative peer bg-mineshaft-900 rounded-md text-gray-400 text-md p-2 w-full min-w-16 outline-none focus:ring-4 duration-200`} + } text-md min-w-16 peer relative w-full rounded-md bg-mineshaft-900 p-2 text-gray-400 outline-none duration-200 focus:ring-4`} name={name} spellCheck="false" autoComplete={autoComplete} @@ -91,7 +91,7 @@ const InputField = ({ onClick={() => { setPasswordVisible(!passwordVisible); }} - className="absolute self-end mr-3 text-gray-400 cursor-pointer" + className="absolute mr-3 cursor-pointer self-end text-gray-400" > {passwordVisible ? ( @@ -101,7 +101,7 @@ const InputField = ({ )} {blurred && ( -
+

{value .split("") @@ -109,7 +109,7 @@ const InputField = ({ .map(() => ( ))} @@ -121,7 +121,7 @@ const InputField = ({

)} */}
- {error &&

{errorText}

} + {error &&

{errorText}

}
); }; diff --git a/frontend/src/components/basic/Listbox.tsx b/frontend/src/components/basic/Listbox.tsx index 5cdeb26d9..cad9aaab4 100644 --- a/frontend/src/components/basic/Listbox.tsx +++ b/frontend/src/components/basic/Listbox.tsx @@ -34,19 +34,19 @@ const ListBox = ({
{text} - + {" "} {isSelected}
{data && ( -
+
)} @@ -58,16 +58,16 @@ const ListBox = ({ leaveFrom="opacity-100" leaveTo="opacity-0" > - + {data.map((person, personIdx) => ( - `my-0.5 relative cursor-default select-none py-2 pl-10 pr-4 rounded-md ${ - selected ? "bg-white/10 text-gray-400 font-bold" : "" + `relative my-0.5 cursor-default select-none rounded-md py-2 pl-10 pr-4 ${ + selected ? "bg-white/10 font-bold text-gray-400" : "" } ${ active && !selected - ? "bg-white/5 text-mineshaft-200 cursor-pointer" + ? "cursor-pointer bg-white/5 text-mineshaft-200" : "text-gray-400" } ` } @@ -83,7 +83,7 @@ const ListBox = ({ {person} {selected ? ( - + ) : null} @@ -92,9 +92,9 @@ const ListBox = ({ ))} {buttonAction && ( -
diff --git a/frontend/src/components/basic/dialog/AddUserDialog.tsx b/frontend/src/components/basic/dialog/AddUserDialog.tsx index b36c31d6c..dd2aede0a 100644 --- a/frontend/src/components/basic/dialog/AddUserDialog.tsx +++ b/frontend/src/components/basic/dialog/AddUserDialog.tsx @@ -13,76 +13,63 @@ type Props = { orgName: string; }; -const AddUserDialog = ({ - isOpen, - closeModal, - submitModal, - email, - setEmail, - orgName, -}: Props) => { +const AddUserDialog = ({ isOpen, closeModal, submitModal, email, setEmail, orgName }: Props) => { const submit = () => { submitModal(email); }; return ( -
+
- + -
+
-
-
+
+
- + Invite others to {orgName} -
-

- An invite is specific to an email address and expires - after 1 day. For security reasons, you will need to - separately add members to projects. +

+

+ An invite is specific to an email address and expires after 1 day. For + security reasons, you will need to separately add members to projects.

-
+
-
-
{/* diff --git a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx b/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx index 88dc7cb78..b1cc1fd07 100644 --- a/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx +++ b/frontend/src/components/basic/dialog/AddWorkspaceDialog.tsx @@ -5,7 +5,6 @@ import Button from "../buttons/Button"; import InputField from "../InputField"; import { Checkbox } from "../table/Checkbox"; - type Props = { isOpen: boolean; closeModal: () => void; @@ -26,8 +25,8 @@ const AddWorkspaceDialog = ({ workspaceName, setWorkspaceName, error, - loading, -}:Props) => { + loading +}: Props) => { const [addAllUsers, setAddAllUsers] = useState(true); const submit = () => { submitModal(workspaceName, addAllUsers); @@ -60,11 +59,8 @@ const AddWorkspaceDialog = ({ leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - - + + Create a new project
@@ -72,7 +68,7 @@ const AddWorkspaceDialog = ({ This project will contain your secrets and configs.

-
+
- +
-
{textLine1}
-
{textLine2}
-
+
{textLine1}
+
{textLine2}
+ diff --git a/frontend/src/components/context/Notifications/Notification.tsx b/frontend/src/components/context/Notifications/Notification.tsx index 806b68ad2..14b0ba556 100644 --- a/frontend/src/components/context/Notifications/Notification.tsx +++ b/frontend/src/components/context/Notifications/Notification.tsx @@ -36,25 +36,28 @@ const Notification = ({ notification, clearNotification }: NotificationProps) => return (
{notification.type === "error" && ( -
+
)} {notification.type === "success" && ( -
+
)} {notification.type === "info" && ( -
+
)} -

{notification.text}

+

{notification.text}

); diff --git a/frontend/src/components/context/Notifications/Notifications.tsx b/frontend/src/components/context/Notifications/Notifications.tsx index 81802fff6..29e2826d7 100644 --- a/frontend/src/components/context/Notifications/Notifications.tsx +++ b/frontend/src/components/context/Notifications/Notifications.tsx @@ -11,7 +11,7 @@ const Notifications = ({ notifications, clearNotification }: NoticationsProps) = } return ( -
+
{notifications.map((notif) => ( ))} diff --git a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx index 9c8582d6a..1926e7d37 100644 --- a/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx +++ b/frontend/src/components/dashboard/ConfirmEnvOverwriteModal.tsx @@ -30,9 +30,9 @@ const ConfirmEnvOverwriteModal = ({ onClose={onClose} >
-

Your file contains the following duplicate secrets:

+

Your file contains the following duplicate secrets:

{duplicateKeys.join(", ")}

-

Are you sure you want to overwrite these secrets?

+

Are you sure you want to overwrite these secrets?

diff --git a/frontend/src/components/dashboard/DashboardInputField.tsx b/frontend/src/components/dashboard/DashboardInputField.tsx index 3cf87924e..60b92a51e 100644 --- a/frontend/src/components/dashboard/DashboardInputField.tsx +++ b/frontend/src/components/dashboard/DashboardInputField.tsx @@ -1,5 +1,10 @@ import { memo, SyntheticEvent, useRef } from "react"; -import { faCircle, faCodeBranch, faExclamationCircle, faEye } from "@fortawesome/free-solid-svg-icons"; +import { + faCircle, + faCodeBranch, + faExclamationCircle, + faEye +} from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import guidGenerator from "../utilities/randomId"; @@ -31,8 +36,8 @@ interface DashboardInputFieldProps { * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard * @param {boolean} obj.isDuplicate - if the key name is duplicated * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden - * - * + * + * * @returns */ @@ -61,29 +66,31 @@ const DashboardInputField = ({ const error = startsWithNumber || isDuplicate; return ( -
+
onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id)} + onChange={(e) => + onChangeHandler(isCapitalized ? e.target.value.toUpperCase() : e.target.value, id) + } type={type} value={value} - className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${ + className={`ph-no-capture min-w-16 peer z-10 h-full w-full bg-transparent px-2 font-mono text-sm caret-bunker-200 outline-none ${ error ? "text-red-600 focus:text-red-500" : "text-bunker-300 focus:text-bunker-100" } duration-200`} spellCheck="false" />
{startsWithNumber && ( -
- + )} {isDuplicate && value !== "" && !startsWithNumber && ( -
- +
)} - {!error &&
- -
} + {!error && ( +
+ +
+ )}
); } @@ -127,20 +145,29 @@ const DashboardInputField = ({ return ( -
+
- {value?.split("\n")[0] ? - {value?.split("\n")[0]} - : - } - {value?.split("\n")[1] && - {value?.split("\n")[1]} - } + {value?.split("\n")[0] ? ( + + {value?.split("\n")[0]} + + ) : ( + - + )} + {value?.split("\n")[1] && ( + + {value?.split("\n")[1]} + + )}
@@ -148,10 +175,10 @@ const DashboardInputField = ({ } if (type === "value") { return ( -
-
+
+
{overrideEnabled === true && ( -
+
Override enabled
)} @@ -160,20 +187,20 @@ const DashboardInputField = ({ onChange={(e) => onChangeHandler(e.target.value, id)} onScroll={syncScroll} className={`${ - blurred - ? "text-transparent focus:text-transparent active:text-transparent" - : "" - } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`} + blurred ? "text-transparent focus:text-transparent active:text-transparent" : "" + } ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none duration-200 no-scrollbar`} spellCheck="false" />
{value?.split(REGEX).map((word) => { if (word.match(REGEX) !== null) { @@ -203,20 +230,24 @@ const DashboardInputField = ({ })}
{blurred && ( -
-
+
+
{value?.split("").map(() => ( ))} - {value?.split("").length === 0 && EMPTY} + {value?.split("").length === 0 && EMPTY} +
+
+
-
)}
diff --git a/frontend/src/components/dashboard/DeleteActionButton.tsx b/frontend/src/components/dashboard/DeleteActionButton.tsx index 530ee3749..da7357fe6 100644 --- a/frontend/src/components/dashboard/DeleteActionButton.tsx +++ b/frontend/src/components/dashboard/DeleteActionButton.tsx @@ -1,4 +1,4 @@ -import React from "react" +import React from "react"; import { useTranslation } from "react-i18next"; import { faXmark } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -8,32 +8,35 @@ import Button from "../basic/buttons/Button"; type Props = { onSubmit: () => void; isPlain?: boolean; -} +}; export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => { const { t } = useTranslation(); return ( -
- {isPlain - ?
null} - role="button" - tabIndex={0} - onClick={onSubmit} - className="invisible group-hover:visible" - > - -
- :
- ) -} + ); +}; diff --git a/frontend/src/components/dashboard/DownloadSecretsMenu.tsx b/frontend/src/components/dashboard/DownloadSecretsMenu.tsx index a921798ca..29942abf0 100644 --- a/frontend/src/components/dashboard/DownloadSecretsMenu.tsx +++ b/frontend/src/components/dashboard/DownloadSecretsMenu.tsx @@ -18,7 +18,7 @@ const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: strin + > + {" "} + {String(t("signup.verify"))}{" "} +
-
+
{t("signup.step2-resend-alert")} -
+
-

{t("signup.step2-spam-alert")}

+

{t("signup.step2-spam-alert")}

); diff --git a/frontend/src/components/signup/DonwloadBackupPDFStep.tsx b/frontend/src/components/signup/DonwloadBackupPDFStep.tsx index 73082af32..22d278cc3 100644 --- a/frontend/src/components/signup/DonwloadBackupPDFStep.tsx +++ b/frontend/src/components/signup/DonwloadBackupPDFStep.tsx @@ -57,19 +57,22 @@ export default function DonwloadBackupPDFStep({ }; return ( -
-

- +

+

+ {t("signup.step4-message")}

-
-
+
+
{t("signup.step4-description1")} {t("signup.step4-description3")}
-
-
+
+
+ > + {" "} + {String(t("signup.step1-submit"))}{" "} +
diff --git a/frontend/src/components/signup/TeamInviteStep.tsx b/frontend/src/components/signup/TeamInviteStep.tsx index d1cc6ef7d..a06fc3568 100644 --- a/frontend/src/components/signup/TeamInviteStep.tsx +++ b/frontend/src/components/signup/TeamInviteStep.tsx @@ -16,7 +16,7 @@ export default function TeamInviteStep(): JSX.Element { const router = useRouter(); const [emails, setEmails] = useState(""); const { data: serverDetails } = useFetchServerStatus(); - + const { mutateAsync } = useAddUserToOrg(); const { handlePopUpToggle, popUp, handlePopUpOpen } = usePopUp(["setUpEmail"] as const); @@ -40,55 +40,61 @@ export default function TeamInviteStep(): JSX.Element { }; return ( -
-

+

+

{t("signup.step5-invite-team")}

-

+

{t("signup.step5-subtitle")}

-
+
-
+
Emails