Minor style fixes

2026-09-22 13:39:35 +00:00 · 2023-02-08 23:38:00 -08:00
parent cd0b2e3a26
commit 224fa25fdf
11 changed files with 32 additions and 24 deletions
--- a/backend/src/controllers/v2/secretsController.ts
+++ b/backend/src/controllers/v2/secretsController.ts
@@ -452,7 +452,7 @@ export const updateSecrets = async (req: Request, res: Response) => {
                    secretValueTag,
                    tags,
                    ...((
-                        secretCommentCiphertext &&
+                        secretCommentCiphertext !== undefined &&
                        secretCommentIV &&
                        secretCommentTag
                    ) ? {
--- a/backend/src/templates/organizationInvitation.handlebars
+++ b/backend/src/templates/organizationInvitation.handlebars
@@ -12,7 +12,6 @@
    <p>{{inviterFirstName}}({{inviterEmail}}) has invited you to their Infisical organization — {{organizationName}}</p>
    <a href="{{callback_url}}?token={{token}}&to={{email}}">Join now</a>
    <h3>What is Infisical?</h3>
-    <p>Infisical is a simple end-to-end encrypted solution that enables teams to sync and manage their environment
-        variables.</p>
+    <p>Infisical is an easy-to-use end-to-end encrypted tool that enables developers to sync and manage their secrets and configs.</p>
 </body>
 </html>
--- a/backend/src/templates/workspaceInvitation.handlebars
+++ b/backend/src/templates/workspaceInvitation.handlebars
@@ -8,9 +8,9 @@
 <body>
    <h2>Infisical</h2>
    <h2>Join your team on Infisical</h2>
-    <p>{{inviterFirstName}}({{inviterEmail}}) has invited you to their Infisical workspace — {{workspaceName}}</p>
+    <p>{{inviterFirstName}}({{inviterEmail}}) has invited you to their Infisical project — {{workspaceName}}</p>
    <a href="{{callback_url}}">Join now</a>
    <h3>What is Infisical?</h3>
-    <p>Infisical is a simple end-to-end encrypted solution that enables teams to sync and manage their environment variables.</p>
+    <p>Infisical is an easy-to-use end-to-end encrypted tool that enables developers to sync and manage their secrets and configs.</p>
 </body>
 </html>
--- a/frontend/src/components/basic/Layout.tsx
+++ b/frontend/src/components/basic/Layout.tsx
@@ -246,9 +246,9 @@ const Layout = ({ children }: LayoutProps) => {

  return (
    <>
-      <div className="flex h-screen w-full flex-col overflow-x-hidden">
+      <div className="h-screen w-full flex-col overflow-x-hidden hidden md:flex">
        <NavBarDashboard />
-        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
+        <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row dark">
          <aside className="w-full border-r border-mineshaft-500 bg-bunker-600 md:w-60">
            <nav className="items-between flex h-full flex-col justify-between">
              {/* <div className="py-6"></div> */}
@@ -368,10 +368,10 @@ const Layout = ({ children }: LayoutProps) => {
            error={error}
            loading={loading}
          />
-          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800">{children}</main>
+          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">{children}</main>
        </div>
      </div>
-      <div className="flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
+      <div className="flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 z-[200] md:hidden">
        <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
        <p className="max-w-sm px-6 text-center text-lg text-gray-200">
          {` ${t('common:no-mobile')} `}
--- a/frontend/src/components/basic/popups/BottomRightPopup.tsx
+++ b/frontend/src/components/basic/popups/BottomRightPopup.tsx
@@ -34,7 +34,7 @@ const BottonRightPopup = ({
 }: PopupProps): JSX.Element => {
  return (
    <div
-      className="z-50 drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-md absolute bottom-0 right-0 mr-6 mb-6"
+      className="z-[100] drop-shadow-xl border-gray-600/50 border flex flex-col items-start bg-bunker max-w-xl text-gray-200 pt-3 pb-4 rounded-md absolute bottom-0 right-0 mr-6 mb-6"
      role="alert"
    >
      <div className="flex flex-row items-center justify-between w-full border-b border-gray-600/70 pb-3 px-6">
--- a/frontend/src/components/dashboard/CommentField.tsx
+++ b/frontend/src/components/dashboard/CommentField.tsx
@@ -18,7 +18,7 @@ const CommentField = ({
    <div className="relative mt-4 px-4 pt-6">
      <p className="text-sm text-bunker-300 pl-0.5">{t('dashboard:sidebar.comments')}</p>
      <textarea
-        className="placeholder:text-bunker-400 h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+        className="placeholder:text-bunker-400 dark:[color-scheme:dark] h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
        value={comment}
        onChange={(e) => modifyComment(e.target.value, position)}
        placeholder="Leave any comments here..."
--- a/frontend/src/components/dashboard/DashboardInputField.tsx
+++ b/frontend/src/components/dashboard/DashboardInputField.tsx
@@ -125,7 +125,7 @@ const DashboardInputField = ({
    const error = startsWithNumber || isDuplicate;

    return (
-      <div className={`relative flex-col w-full h-10 ${
+      <div title={value} className={`relative flex-col w-full h-10 ${
        isSideBarOpen && 'bg-mineshaft-700 duration-200'
      }`}>
        <div
@@ -137,7 +137,7 @@ const DashboardInputField = ({
            onChange={(e) => onChangeHandler(e.target.value, position)}
            type={type}
            value={value}
-            className='z-10 peer font-mono ph-no-capture bg-transparent py-2.5 caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
+            className='z-10 peer ph-no-capture bg-transparent py-2.5 caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'
            spellCheck="false"
            placeholder='–'
          />
@@ -209,7 +209,7 @@ const DashboardInputField = ({
                {value?.split('').map(() => (
                  <FontAwesomeIcon
                    key={guidGenerator()}
-                    className="text-xxs mx-0.5"
+                    className="text-xxs mr-0.5"
                    icon={faCircle}
                  />
                ))}
--- a/frontend/src/components/dashboard/KeyPair.tsx
+++ b/frontend/src/components/dashboard/KeyPair.tsx
@@ -34,7 +34,10 @@ const colors = [
  'bg-[#cb1c8d]/40',
  'bg-[#badc58]/40',
  'bg-[#ff5400]/40',
-  'bg-[#00bbf9]/40'
+  'bg-[#3AB0FF]/40',
+  'bg-[#6F1AB6]/40',
+  'bg-[#C40B13]/40',
+  'bg-[#332FD0]/40'
 ]


@@ -43,7 +46,10 @@ const colorsText = [
  'text-[#f2c6e3]/70',
  'text-[#eef6d5]/70',
  'text-[#ffddcc]/70',
-  'text-[#f0fffd]/70'
+  'text-[#f0fffd]/70',
+  'text-[#FFE5F1]/70',
+  'text-[#FFDEDE]/70',
+  'text-[#DFF6FF]/70'
 ]

 /**
@@ -95,9 +101,9 @@ const KeyPair = ({
    }`}
  >
    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+      <div className="w-1/5 border-r border-mineshaft-600 flex flex-row items-center">
        <div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
-        <div className="flex items-center max-h-16">
+        <div className="flex items-center max-h-16 w-full">
          <DashboardInputField
            isCapitalized = {isCapitalized}
            onChangeHandler={modifyKey}
--- a/frontend/src/components/navigation/NavBarDashboard.tsx
+++ b/frontend/src/components/navigation/NavBarDashboard.tsx
@@ -93,7 +93,7 @@ export default function Navbar() {
  };

  return (
-    <div className="flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-50">
+    <div className="flex flex-row justify-between w-full bg-bunker text-white border-b border-mineshaft-500 z-[61]">
      <div className="m-auto flex justify-start items-center mx-4">
        <div className="flex flex-row items-center">
          <div className="flex justify-center py-4">
@@ -166,8 +166,8 @@ export default function Navbar() {
            leaveFrom="transform opacity-100 scale-100"
            leaveTo="transform opacity-0 scale-95"
          >
-            <Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-20 ring-opacity-5 focus:outline-none">
-              <div className="px-1 py-1 ">
+            <Menu.Items className="absolute right-0 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md bg-bunker border border-mineshaft-700 shadow-lg ring-1 ring-black z-[65] ring-opacity-5 focus:outline-none">
+              <div className="px-1 py-1 z-[100]">
                <div className="text-gray-400 self-start ml-2 mt-2 text-xs font-semibold tracking-wide">
                  {t('nav:user.signed-in-as')}
                </div>
--- a/frontend/src/pages/dashboard/[id].tsx
+++ b/frontend/src/pages/dashboard/[id].tsx
@@ -824,7 +824,7 @@ export default function Dashboard() {
                    className='group flex flex-col items-center bg-mineshaft-800 border-b-2 border-mineshaft-500 duration-100 sticky top-0 z-[60]'
                  >
                    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
-                      <div className="w-2/12 border-r border-mineshaft-600 flex flex-row items-center">
+                      <div className="w-1/5 border-r border-mineshaft-600 flex flex-row items-center">
                        <div className='text-transparent text-xs flex items-center justify-center w-14 h-10 cursor-default'>0</div>
                        <span className='px-2 text-bunker-300 font-semibold'>Key</span>
                        {!snapshotData && <IconButton 
@@ -871,7 +871,10 @@ export default function Dashboard() {
                  <div className="bg-mineshaft-800 rounded-b-md border-bunker-600">
                    {!snapshotData &&
                      data
-                        ?.filter((row) => row.key?.toUpperCase().includes(searchKeys.toUpperCase()) || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase()))
+                        ?.filter((row) => 
+                          row.key?.toUpperCase().includes(searchKeys.toUpperCase()) 
+                          || row.tags?.map(tag => tag.name).join(" ")?.toUpperCase().includes(searchKeys.toUpperCase())
+                          || row.comment?.toUpperCase().includes(searchKeys.toUpperCase()))
                        .filter((row) => !sharedToHide.includes(row.id))
                        .map((keyPair) => (
                          <KeyPair
--- a/frontend/src/pages/home/[id].tsx
+++ b/frontend/src/pages/home/[id].tsx
@@ -141,7 +141,7 @@ export default function Home() {
  }, []);

  return (
-    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-20 h-screen">
+    <div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-4">
      <div className="flex flex-col items-center text-gray-300 text-lg mx-auto max-w-2xl lg:max-w-3xl xl:max-w-4xl py-6">
        <div className="text-3xl font-bold text-left w-full">Your quick start guide</div>
        <div className="text-md text-left w-full pt-2 pb-4 text-bunker-300">