@bigbinary/neeto-github-frontend 3.0.1 → 3.0.3

package/dist/cjs/v2/NeetoGithubRepositoryConnectionCard.js

@@ -24,8 +24,8 @@ require('../../pane-DRsC3fwq.js');
 require('../../repository-tile-fB8WFACw.js');
 require('./NeetoGithubNanoContainer.js');
 require('@bigbinary/neeto-commons-frontend/v2/initializers');
-require('@bigbinary/neeto-commons-frontend/v2/react-utils');
 require('@bigbinary/neeto-icons/Building');
+require('@bigbinary/neeto-commons-frontend/v2/react-utils');
 require('@bigbinary/neeto-icons/Plus');
 require('@bigbinary/neeto-icons/Settings');
 require('@bigbinary/neeto-molecules/v2/Search');
@@ -121,7 +121,8 @@ var NeetoGithubRepositoryConnectionCard = function NeetoGithubRepositoryConnecti
           i18nKey: isRepositoryConnected ? "neetoGithub.repositoryConnected" : "neetoGithub.repositoryNotConnected"
         })
       }), helpDocUrl && /*#__PURE__*/jsxRuntime.jsx(neetoAtoms.Typography, {
-        className: "neeto-ui-text-gray-800 mt-4",
+        className: "mt-4",
+        color: "muted",
         variant: "body2",
         weight: "normal",
         children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {

package/dist/cjs/v2/NeetoGithubRepositoryConnectionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeetoGithubRepositoryConnectionCard.js","sources":["../../../app/javascript/src/v2/components/NeetoGithubRepositoryConnectionCard/index.jsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { Button, Typography, Alert, Tooltip } from \"@bigbinary/neeto-atoms\";\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { ExternalLink } from \"neetoicons\";\nimport { Github } from \"neetoicons/misc\";\nimport CardLayout from \"neetomolecules/v2/CardLayout\";\nimport { isNotNil } from \"ramda\";\nimport { Trans, useTranslation } from \"react-i18next\";\n\nimport NeetoGithubNanoPane from \"v2/components/NeetoGithubNanoPane\";\n\nconst NeetoGithubRepositoryConnectionCard = ({\n  className,\n  repositoryName,\n  installationUrl,\n  helpDocUrl = \"\",\n  onConnect = noop,\n  onDisconnect = noop,\n  isConnecting = false,\n  isConnected = false,\n  isDisconnecting = false,\n  isDisconnectingDisabled = false,\n  canManageGithubIntegration = false,\n  disconnectButtonDisabledTooltipContent,\n}) => {\n  const [isConnectRepositoryViewOpen, setIsConnectRepositoryViewOpen] =\n    useState(false);\n  const [isDisconnectAlertOpen, setIsDisconnectAlertOpen] = useState(false);\n\n  const { t } = useTranslation();\n\n  const isRepositoryConnected = isNotNil(repositoryName);\n  const isDisabled = isRepositoryConnected && isDisconnectingDisabled;\n  const variant = isRepositoryConnected ? \"outline\" : \"default\";\n\n  const title = isRepositoryConnected\n    ? t(\"neetoGithub.connectedRepository\")\n    : t(\"neetoGithub.connectRepository\");\n\n  const label = isRepositoryConnected\n    ? t(\"neetoGithub.disconnect\")\n    : t(\"neetoGithub.connect\");\n\n  const tooltipProps = {\n    content:\n      disconnectButtonDisabledTooltipContent ||\n      t(\"neetoGithub.disconnectingDisabled\"),\n    disabled: !isDisconnectingDisabled || !isRepositoryConnected,\n  };\n\n  const githubRepositoryUrl = repositoryName =>\n    `https://github.com/${repositoryName}`;\n\n  const renderActionBlockTooltip = () => (\n    <Tooltip {...tooltipProps}>\n      <span>\n        <Button\n          {...{ label, variant }}\n          disabled={isDisabled}\n          onClick={\n            isRepositoryConnected\n              ? () => setIsDisconnectAlertOpen(true)\n              : () => setIsConnectRepositoryViewOpen(true)\n          }\n        />\n      </span>\n    </Tooltip>\n  );\n\n  return (\n    <div className={classNames(\"w-full\", className)}>\n      <CardLayout\n        {...{ title }}\n        actionBlock={canManageGithubIntegration && renderActionBlockTooltip()}\n        icon={<Github />}\n      >\n        <Typography variant=\"body1\">\n          <Trans\n            values={{ repository: repositoryName }}\n            components={{\n              a: (\n                <Button\n                  href={githubRepositoryUrl(repositoryName)}\n                  icon={ExternalLink}\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  variant=\"link\"\n                />\n              ),\n              externalLink: <ExternalLink size={20} />,\n            }}\n            i18nKey={\n              isRepositoryConnected\n                ? \"neetoGithub.repositoryConnected\"\n                : \"neetoGithub.repositoryNotConnected\"\n            }\n          />\n        </Typography>\n        {helpDocUrl && (\n          <Typography\n            className=\"neeto-ui-text-gray-800 mt-4\"\n            variant=\"body2\"\n            weight=\"normal\"\n          >\n            <Trans\n              i18nKey=\"neetoGithub.helpDocUrl\"\n              components={{\n                helpLink: (\n                  <Button href={helpDocUrl} target=\"_blank\" variant=\"link\" />\n                ),\n              }}\n            />\n          </Typography>\n        )}\n      </CardLayout>\n      {canManageGithubIntegration && (\n        <>\n          <NeetoGithubNanoPane\n            {...{ installationUrl, isConnected, isConnecting }}\n            isOpen={isConnectRepositoryViewOpen}\n            projects={[{ repository: repositoryName }]}\n            title={t(\"neetoGithub.selectARepository\")}\n            onClose={() => {\n              setIsConnectRepositoryViewOpen(false);\n            }}\n            onConnect={({ repoType, repository, setIsLoading }) => {\n              onConnect(\n                { repoType, repository, setIsLoading },\n                setIsConnectRepositoryViewOpen\n              );\n            }}\n          />\n          <Alert\n            isOpen={isDisconnectAlertOpen}\n            isSubmitting={isDisconnecting}\n            message={t(\"neetoGithub.disconnectAlert.message\")}\n            title={t(\"neetoGithub.disconnectAlert.title\")}\n            onClose={() => setIsDisconnectAlertOpen(false)}\n            onSubmit={() => {\n              onDisconnect(setIsDisconnectAlertOpen);\n            }}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default NeetoGithubRepositoryConnectionCard;\n"],"names":["NeetoGithubRepositoryConnectionCard","_ref","className","repositoryName","installationUrl","_ref$helpDocUrl","helpDocUrl","_ref$onConnect","onConnect","noop","_ref$onDisconnect","onDisconnect","_ref$isConnecting","isConnecting","_ref$isConnected","isConnected","_ref$isDisconnecting","isDisconnecting","_ref$isDisconnectingD","isDisconnectingDisabled","_ref$canManageGithubI","canManageGithubIntegration","disconnectButtonDisabledTooltipContent","_useState","useState","_useState2","_slicedToArray","isConnectRepositoryViewOpen","setIsConnectRepositoryViewOpen","_useState3","_useState4","isDisconnectAlertOpen","setIsDisconnectAlertOpen","_useTranslation","useTranslation","t","isRepositoryConnected","isNotNil","isDisabled","variant","title","label","tooltipProps","content","disabled","githubRepositoryUrl","concat","renderActionBlockTooltip","_jsx","Tooltip","_objectSpread","children","Button","onClick","_jsxs","classNames","CardLayout","actionBlock","icon","Github","Typography","Trans","values","repository","components","a","href","ExternalLink","rel","target","externalLink","size","i18nKey","weight","helpLink","_Fragment","NeetoGithubNanoPane","isOpen","projects","onClose","_ref2","repoType","setIsLoading","Alert","isSubmitting","message","onSubmit"],"mappings":"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"}
+{"version":3,"file":"NeetoGithubRepositoryConnectionCard.js","sources":["../../../app/javascript/src/v2/components/NeetoGithubRepositoryConnectionCard/index.jsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport { Button, Typography, Alert, Tooltip } from \"@bigbinary/neeto-atoms\";\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { ExternalLink } from \"neetoicons\";\nimport { Github } from \"neetoicons/misc\";\nimport CardLayout from \"neetomolecules/v2/CardLayout\";\nimport { isNotNil } from \"ramda\";\nimport { Trans, useTranslation } from \"react-i18next\";\n\nimport NeetoGithubNanoPane from \"v2/components/NeetoGithubNanoPane\";\n\nconst NeetoGithubRepositoryConnectionCard = ({\n  className,\n  repositoryName,\n  installationUrl,\n  helpDocUrl = \"\",\n  onConnect = noop,\n  onDisconnect = noop,\n  isConnecting = false,\n  isConnected = false,\n  isDisconnecting = false,\n  isDisconnectingDisabled = false,\n  canManageGithubIntegration = false,\n  disconnectButtonDisabledTooltipContent,\n}) => {\n  const [isConnectRepositoryViewOpen, setIsConnectRepositoryViewOpen] =\n    useState(false);\n  const [isDisconnectAlertOpen, setIsDisconnectAlertOpen] = useState(false);\n\n  const { t } = useTranslation();\n\n  const isRepositoryConnected = isNotNil(repositoryName);\n  const isDisabled = isRepositoryConnected && isDisconnectingDisabled;\n  const variant = isRepositoryConnected ? \"outline\" : \"default\";\n\n  const title = isRepositoryConnected\n    ? t(\"neetoGithub.connectedRepository\")\n    : t(\"neetoGithub.connectRepository\");\n\n  const label = isRepositoryConnected\n    ? t(\"neetoGithub.disconnect\")\n    : t(\"neetoGithub.connect\");\n\n  const tooltipProps = {\n    content:\n      disconnectButtonDisabledTooltipContent ||\n      t(\"neetoGithub.disconnectingDisabled\"),\n    disabled: !isDisconnectingDisabled || !isRepositoryConnected,\n  };\n\n  const githubRepositoryUrl = repositoryName =>\n    `https://github.com/${repositoryName}`;\n\n  const renderActionBlockTooltip = () => (\n    <Tooltip {...tooltipProps}>\n      <span>\n        <Button\n          {...{ label, variant }}\n          disabled={isDisabled}\n          onClick={\n            isRepositoryConnected\n              ? () => setIsDisconnectAlertOpen(true)\n              : () => setIsConnectRepositoryViewOpen(true)\n          }\n        />\n      </span>\n    </Tooltip>\n  );\n\n  return (\n    <div className={classNames(\"w-full\", className)}>\n      <CardLayout\n        {...{ title }}\n        actionBlock={canManageGithubIntegration && renderActionBlockTooltip()}\n        icon={<Github />}\n      >\n        <Typography variant=\"body1\">\n          <Trans\n            values={{ repository: repositoryName }}\n            components={{\n              a: (\n                <Button\n                  href={githubRepositoryUrl(repositoryName)}\n                  icon={ExternalLink}\n                  rel=\"noreferrer\"\n                  target=\"_blank\"\n                  variant=\"link\"\n                />\n              ),\n              externalLink: <ExternalLink size={20} />,\n            }}\n            i18nKey={\n              isRepositoryConnected\n                ? \"neetoGithub.repositoryConnected\"\n                : \"neetoGithub.repositoryNotConnected\"\n            }\n          />\n        </Typography>\n        {helpDocUrl && (\n          <Typography\n            className=\"mt-4\"\n            color=\"muted\"\n            variant=\"body2\"\n            weight=\"normal\"\n          >\n            <Trans\n              i18nKey=\"neetoGithub.helpDocUrl\"\n              components={{\n                helpLink: (\n                  <Button href={helpDocUrl} target=\"_blank\" variant=\"link\" />\n                ),\n              }}\n            />\n          </Typography>\n        )}\n      </CardLayout>\n      {canManageGithubIntegration && (\n        <>\n          <NeetoGithubNanoPane\n            {...{ installationUrl, isConnected, isConnecting }}\n            isOpen={isConnectRepositoryViewOpen}\n            projects={[{ repository: repositoryName }]}\n            title={t(\"neetoGithub.selectARepository\")}\n            onClose={() => {\n              setIsConnectRepositoryViewOpen(false);\n            }}\n            onConnect={({ repoType, repository, setIsLoading }) => {\n              onConnect(\n                { repoType, repository, setIsLoading },\n                setIsConnectRepositoryViewOpen\n              );\n            }}\n          />\n          <Alert\n            isOpen={isDisconnectAlertOpen}\n            isSubmitting={isDisconnecting}\n            message={t(\"neetoGithub.disconnectAlert.message\")}\n            title={t(\"neetoGithub.disconnectAlert.title\")}\n            onClose={() => setIsDisconnectAlertOpen(false)}\n            onSubmit={() => {\n              onDisconnect(setIsDisconnectAlertOpen);\n            }}\n          />\n        </>\n      )}\n    </div>\n  );\n};\n\nexport default NeetoGithubRepositoryConnectionCard;\n"],"names":["NeetoGithubRepositoryConnectionCard","_ref","className","repositoryName","installationUrl","_ref$helpDocUrl","helpDocUrl","_ref$onConnect","onConnect","noop","_ref$onDisconnect","onDisconnect","_ref$isConnecting","isConnecting","_ref$isConnected","isConnected","_ref$isDisconnecting","isDisconnecting","_ref$isDisconnectingD","isDisconnectingDisabled","_ref$canManageGithubI","canManageGithubIntegration","disconnectButtonDisabledTooltipContent","_useState","useState","_useState2","_slicedToArray","isConnectRepositoryViewOpen","setIsConnectRepositoryViewOpen","_useState3","_useState4","isDisconnectAlertOpen","setIsDisconnectAlertOpen","_useTranslation","useTranslation","t","isRepositoryConnected","isNotNil","isDisabled","variant","title","label","tooltipProps","content","disabled","githubRepositoryUrl","concat","renderActionBlockTooltip","_jsx","Tooltip","_objectSpread","children","Button","onClick","_jsxs","classNames","CardLayout","actionBlock","icon","Github","Typography","Trans","values","repository","components","a","href","ExternalLink","rel","target","externalLink","size","i18nKey","color","weight","helpLink","_Fragment","NeetoGithubNanoPane","isOpen","projects","onClose","_ref2","repoType","setIsLoading","Alert","isSubmitting","message","onSubmit"],"mappings":"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"}

package/dist/cjs/v2/index.js

@@ -21,11 +21,11 @@ require('@bigbinary/neeto-molecules/v2/MoreDropdown');
 require('react/jsx-runtime');
 require('classnames');
 require('@bigbinary/neeto-commons-frontend/v2/initializers');
-require('@bigbinary/neeto-commons-frontend/v2/react-utils');
-require('@bigbinary/neeto-icons/misc/Github');
 require('@bigbinary/neeto-icons/Building');
+require('@bigbinary/neeto-commons-frontend/v2/react-utils');
 require('@bigbinary/neeto-icons/Plus');
 require('@bigbinary/neeto-icons/Settings');
+require('@bigbinary/neeto-icons/misc/Github');
 require('@bigbinary/neeto-molecules/v2/Search');
 require('@bigbinary/neeto-icons/Lock');
 require('@bigbinary/neeto-molecules/v2/DateFormat');

package/dist/v2/NeetoGithubNanoContainer.js

@@ -1,13 +1,13 @@
-import { Typography, Button, Avatar, Spinner } from '@bigbinary/neeto-atoms';
+import { Button, Typography, Avatar, Spinner } from '@bigbinary/neeto-atoms';
 import classnames from 'classnames';
 import { globalProps } from '@bigbinary/neeto-commons-frontend/v2/initializers';
 import { b as useFetchGithubRepositories } from '../useGithubAccountsApi-Csym3TIW.js';
-import { withT, isMetaKeyPressed } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
-import Github from '@bigbinary/neeto-icons/misc/Github';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Building from '@bigbinary/neeto-icons/Building';
+import { withT, isMetaKeyPressed } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Settings from '@bigbinary/neeto-icons/Settings';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import Github from '@bigbinary/neeto-icons/misc/Github';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, createElement } from 'react';
 import { isPresent } from '@bigbinary/neeto-cist';
@@ -25,89 +25,83 @@ import 'ramda';
 import 'axios';
 import '@bigbinary/neeto-commons-frontend/constants';
 
-var Header = withT(function (_ref) {
-  var t = _ref.t;
-  return /*#__PURE__*/jsxs("div", {
-    className: "neeto-ui-text-gray-800 mb-1 flex w-full flex-row items-center space-x-2 font-sans text-lg font-medium leading-6 antialiased",
-    children: [/*#__PURE__*/jsx(Github, {
-      size: 20
-    }), /*#__PURE__*/jsx(Typography, {
-      className: "text-lg font-medium",
-      variant: "h4",
-      children: t("neetoGithub.github")
-    })]
-  });
-});
-
 var Configure = withT(function (_ref) {
   var t = _ref.t,
     isConnected = _ref.isConnected,
     installationUrl = _ref.installationUrl;
   return /*#__PURE__*/jsx("div", {
-    className: "neeto-ui-text-gray-900 shrink-0 font-sans text-sm font-normal leading-6 antialiased",
+    className: "shrink-0",
     children: /*#__PURE__*/jsx(Button, {
       href: installationUrl,
       icon: isConnected ? Settings : Plus,
       iconPosition: "left",
       size: "sm",
       variant: "link",
-      children: isConnected ? t("neetoGithub.configureAccount") : t("neetoGithub.connectAccount")
+      children: isConnected ? t("neetoGithub.configure") : t("neetoGithub.connect")
     })
   });
 });
 
+var Header = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/jsxs("div", {
+    className: "mb-1 flex w-full flex-row items-center space-x-2",
+    children: [/*#__PURE__*/jsx(Github, {
+      size: 20
+    }), /*#__PURE__*/jsx(Typography, {
+      variant: "h5",
+      weight: "medium",
+      children: t("neetoGithub.github")
+    })]
+  });
+});
+
 var List$1 = withT(function (_ref) {
   var t = _ref.t,
     accounts = _ref.accounts,
     isConnected = _ref.isConnected,
-    installationUrl = _ref.installationUrl,
-    isPane = _ref.isPane;
+    installationUrl = _ref.installationUrl;
   return /*#__PURE__*/jsxs("div", {
-    className: classnames("neeto-ui-border-gray-300 flex justify-between gap-3 border-b pb-4 pt-2", {
-      "flex-col md:flex-row": isPane,
-      "flex-col": !isPane
-    }),
-    children: [accounts.map(function (_ref2) {
-      var id = _ref2.id,
-        name = _ref2.name,
-        avatarUrl = _ref2.avatarUrl,
-        type = _ref2.type,
-        profileUrl = _ref2.profileUrl,
-        count = _ref2.count;
-      return /*#__PURE__*/jsxs("div", {
-        className: "flex w-full items-center space-x-2",
-        children: [/*#__PURE__*/jsxs("div", {
-          className: "flex items-center gap-1",
-          children: [type === "Organization" ? /*#__PURE__*/jsx(Building, {
-            className: "neeto-ui-text-gray-600",
-            size: 24
-          }) : /*#__PURE__*/jsx(Avatar, {
-            size: "sm",
-            user: {
-              imageUrl: avatarUrl
-            }
+    className: "border-border flex flex-col justify-between gap-3 border-b pb-4 pt-2",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex flex-col gap-x-4 gap-y-2",
+      children: accounts.map(function (_ref2) {
+        var id = _ref2.id,
+          name = _ref2.name,
+          avatarUrl = _ref2.avatarUrl,
+          type = _ref2.type,
+          profileUrl = _ref2.profileUrl,
+          count = _ref2.count;
+        return /*#__PURE__*/jsxs("div", {
+          className: "flex items-center space-x-2",
+          children: [/*#__PURE__*/jsxs("div", {
+            className: "flex items-center gap-1",
+            children: [type === "Organization" ? /*#__PURE__*/jsx(Building, {
+              className: "text-muted-foreground",
+              size: 20
+            }) : /*#__PURE__*/jsx(Avatar, {
+              size: "sm",
+              user: {
+                imageUrl: avatarUrl
+              }
+            }), /*#__PURE__*/jsx(Button, {
+              href: profileUrl,
+              label: "@".concat(name),
+              rel: "noopener noreferrer",
+              target: "_blank",
+              variant: "link"
+            })]
+          }), /*#__PURE__*/jsx("span", {
+            className: "bg-muted-foreground h-1 w-1 rounded-full"
           }), /*#__PURE__*/jsx(Typography, {
-            className: "neeto-ui-text-gray-800",
+            color: "muted",
             variant: "body2",
-            children: /*#__PURE__*/jsx(Button, {
-              className: "neeto-ui-text-gray-800",
-              label: "@".concat(name),
-              variant: "link",
-              onClick: function onClick() {
-                return window.open(profileUrl, "_blank");
-              }
+            children: t("neetoGithub.countOf.repos", {
+              count: count
             })
           })]
-        }), /*#__PURE__*/jsx("span", {
-          className: "neeto-ui-bg-gray-800 neeto-ui-rounded-full h-1 w-1"
-        }), /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-black",
-          variant: "body2",
-          children: t("neetoGithub.countOf.repos", {
-            count: count
-          })
-        })]
-      }, id);
+        }, id);
+      })
     }), /*#__PURE__*/jsx(Configure, {
       installationUrl: installationUrl,
       isConnected: isConnected
@@ -115,17 +109,64 @@ var List$1 = withT(function (_ref) {
   });
 });
 
-var Accounts = function Accounts(_ref) {
-  var isPane = _ref.isPane,
-    accounts = _ref.accounts,
+var PaneAccounts = function PaneAccounts(_ref) {
+  var accounts = _ref.accounts,
     isConnected = _ref.isConnected,
-    onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl;
+  return /*#__PURE__*/jsxs("div", {
+    className: "border-border bg-muted/30 mb-3 flex items-center justify-between gap-3 rounded-md border p-3",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex flex-wrap items-center gap-x-4 gap-y-2",
+      children: accounts.map(function (_ref2) {
+        var id = _ref2.id,
+          name = _ref2.name,
+          avatarUrl = _ref2.avatarUrl,
+          type = _ref2.type,
+          profileUrl = _ref2.profileUrl;
+        return /*#__PURE__*/jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [type === "Organization" ? /*#__PURE__*/jsx(Building, {
+            className: "text-muted-foreground",
+            size: 28
+          }) : /*#__PURE__*/jsx(Avatar, {
+            size: "md",
+            user: {
+              imageUrl: avatarUrl
+            }
+          }), /*#__PURE__*/jsx(Button, {
+            href: profileUrl,
+            label: "@".concat(name),
+            rel: "noopener noreferrer",
+            target: "_blank",
+            variant: "link"
+          })]
+        }, id);
+      })
+    }), /*#__PURE__*/jsx(Configure, {
+      installationUrl: installationUrl,
+      isConnected: isConnected
+    })]
+  });
+};
+var Accounts = function Accounts(_ref3) {
+  var isPane = _ref3.isPane,
+    accounts = _ref3.accounts,
+    isConnected = _ref3.isConnected,
+    onConnect = _ref3.onConnect,
+    installationUrl = _ref3.installationUrl;
+  if (isPane) {
+    if (!isConnected) return null;
+    return /*#__PURE__*/jsx("div", {
+      className: "order-1 flex w-full flex-col",
+      children: /*#__PURE__*/jsx(PaneAccounts, {
+        accounts: accounts,
+        installationUrl: installationUrl,
+        isConnected: isConnected
+      })
+    });
+  }
   return /*#__PURE__*/jsx("div", {
-    className: classnames("flex w-full flex-col border border-solid border-transparent px-0 py-2", {
-      "order-1": isPane,
-      "md:order-2 md:max-w-72 lg:max-w-sm lg:px-6": !isPane
-    }),
+    className: classnames("border-transparent flex w-full flex-col border border-solid py-2", "md:order-2 md:max-w-72 lg:max-w-sm lg:px-6"),
     children: /*#__PURE__*/jsxs("div", {
       className: "mb-2",
       children: [/*#__PURE__*/jsx(Header, {}), /*#__PURE__*/jsx(List$1, {
@@ -152,20 +193,18 @@ var NoRepositories = withT(function (_ref) {
         children: t("neetoGithub.noReposDescription")
       }), /*#__PURE__*/jsx(Button, {
         href: installationUrl,
-        icon: Github,
-        iconPosition: "left",
         label: t("neetoGithub.connectRepository"),
         variant: "default"
-      }), /*#__PURE__*/jsx("div", {
-        className: "text-xs",
+      }), /*#__PURE__*/jsx(Typography, {
+        variant: "caption",
         children: /*#__PURE__*/jsx(Trans, {
           i18nKey: t("neetoGithub.troubleshoot"),
           components: {
-            troubleshootLink: /*#__PURE__*/jsx("a", {
-              className: "text-indigo-600 underline",
+            troubleshootLink: /*#__PURE__*/jsx(Button, {
               href: troubleshootUrl,
               rel: "noopener noreferrer",
-              target: "_blank"
+              target: "_blank",
+              variant: "link"
             })
           }
         })
@@ -176,6 +215,7 @@ var NoRepositories = withT(function (_ref) {
 
 var RepositoryTile = function RepositoryTile(_ref) {
   var isConnecting = _ref.isConnecting,
+    isPane = _ref.isPane,
     onConnect = _ref.onConnect,
     repository = _ref.repository;
   var _useTranslation = useTranslation(),
@@ -188,8 +228,9 @@ var RepositoryTile = function RepositoryTile(_ref) {
     fullName = repository.fullName,
     isPrivate = repository.isPrivate,
     updatedAt = repository.updatedAt;
+  var displayName = isPane && fullName !== null && fullName !== void 0 && fullName.includes("/") ? fullName.split("/").pop() : fullName;
   return /*#__PURE__*/jsxs("div", {
-    className: "connect-repo__row neeto-ui-border-gray-300 flex flex-col justify-between gap-3 border-b border-solid py-3 ps-3 pe-3 last:border-b-0 md:flex-row md:items-center md:ps-5",
+    className: "connect-repo__row border-border flex flex-col justify-between gap-3 border-b border-solid py-3 ps-3 pe-3 last:border-b-0 md:flex-row md:items-center md:ps-5",
     children: [/*#__PURE__*/jsxs("div", {
       className: "connect-repo__info flex min-w-0 items-center space-x-2",
       children: [/*#__PURE__*/jsx(Github, {
@@ -198,24 +239,29 @@ var RepositoryTile = function RepositoryTile(_ref) {
       }), /*#__PURE__*/jsx(Typography, {
         className: "truncate",
         variant: "body2",
-        children: fullName
+        children: displayName
       }), isPrivate && /*#__PURE__*/jsx(Lock, {
         className: "shrink-0",
         size: 16
       }), /*#__PURE__*/jsxs("div", {
         className: "hidden shrink-0 items-center gap-2 whitespace-nowrap lg:inline-flex",
         children: [/*#__PURE__*/jsx("span", {
-          className: "bg-foreground h-1 w-1 neeto-ui-rounded-full"
-        }), /*#__PURE__*/jsx(DateFormat.FromNow, {
-          date: updatedAt
+          className: "bg-muted-foreground h-1 w-1 rounded-full"
+        }), /*#__PURE__*/jsx(Typography, {
+          color: "muted",
+          variant: "caption",
+          children: /*#__PURE__*/jsx(DateFormat.FromNow, {
+            date: updatedAt
+          })
         })]
       })]
     }), /*#__PURE__*/jsx(Button, {
       className: "w-max",
       disabled: isConnecting,
       loading: isLoading,
+      size: "sm",
       type: "button",
-      variant: "default",
+      variant: "outline",
       onClick: function onClick() {
         return onConnect({
           repoType: "private",
@@ -235,17 +281,24 @@ var List = withT(function (_ref) {
     isConnecting = _ref.isConnecting,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
-    troubleshootUrl = _ref.troubleshootUrl;
+    troubleshootUrl = _ref.troubleshootUrl,
+    isPane = _ref.isPane;
   return /*#__PURE__*/jsx("div", {
-    className: "h-full overflow-y-auto px-4 pb-4 md:px-6 md:pb-6",
+    className: classnames({
+      "px-0 pb-0": isPane,
+      "h-full overflow-y-auto px-4 pb-4 md:px-6 md:pb-6": !isPane
+    }),
     children: isPresent(repositories) ? /*#__PURE__*/jsx("div", {
-      className: "neeto-ui-border-gray-300 neeto-ui-rounded-md flex w-full flex-col border",
-      children: isPresent(filteredRepositories) ? filteredRepositories.map(function (repository, index) {
+      className: classnames("flex w-full flex-col overflow-hidden", {
+        "border-border rounded-md border": !isPane
+      }),
+      children: isPresent(filteredRepositories) ? filteredRepositories.map(function (repository) {
         return /*#__PURE__*/createElement(RepositoryTile, {
           isConnecting: isConnecting,
+          isPane: isPane,
           onConnect: onConnect,
           repository: repository,
-          key: index
+          key: repository.id
         });
       }) : /*#__PURE__*/jsx(Typography, {
         className: "flex h-full w-full items-center justify-center py-6",
@@ -275,8 +328,6 @@ var NotConnected = function NotConnected(_ref) {
         appName: globalProps.appName
       })
     }), /*#__PURE__*/jsx(Button, {
-      icon: Github,
-      iconPosition: "left",
       label: t("neetoGithub.connectGithub"),
       loading: isLoading,
       variant: "default",
@@ -295,7 +346,8 @@ var Private = function Private(_ref) {
     repositories = _ref.repositories,
     onConnect = _ref.onConnect,
     installationUrl = _ref.installationUrl,
-    troubleshootUrl = _ref.troubleshootUrl;
+    troubleshootUrl = _ref.troubleshootUrl,
+    isPane = _ref.isPane;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(repositories),
@@ -313,42 +365,56 @@ var Private = function Private(_ref) {
     });
     setFilteredRepositories(filteredRepositories);
   };
+  var searchRow = isPresent(repositories) && /*#__PURE__*/jsxs("div", {
+    className: classnames("flex w-full items-center gap-3", {
+      "border-border border-b p-3": isPane
+    }),
+    children: [/*#__PURE__*/jsx(Search, {
+      onSearch: onSearch,
+      className: "flex-1",
+      unlimitedChars: false
+    }), /*#__PURE__*/jsx(Typography, {
+      className: "whitespace-nowrap",
+      color: "muted",
+      variant: "body2",
+      children: t("neetoGithub.countOf.repos", {
+        count: filteredRepositories.length
+      })
+    })]
+  });
+  var listElement = /*#__PURE__*/jsx(List, {
+    filteredRepositories: filteredRepositories,
+    installationUrl: installationUrl,
+    isConnecting: isConnecting,
+    isPane: isPane,
+    onConnect: onConnect,
+    repositories: repositories,
+    troubleshootUrl: troubleshootUrl
+  });
   return /*#__PURE__*/jsx("div", {
     className: "connect-repo flex h-full flex-col",
-    children: isConnected ? /*#__PURE__*/jsxs(Fragment, {
+    children: isConnected ? isPane ? /*#__PURE__*/jsxs("div", {
+      className: "border-border flex max-h-[60vh] flex-col overflow-hidden rounded-md border",
+      children: [searchRow, /*#__PURE__*/jsx("div", {
+        className: "min-h-0 flex-1 overflow-y-auto",
+        children: listElement
+      })]
+    }) : /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsxs("div", {
         className: "space-y-3 p-4 md:p-6",
         children: [/*#__PURE__*/jsx(Typography, {
-          className: "shrink-0 text-lg font-medium",
-          variant: "h2",
+          as: "h2",
+          className: "shrink-0",
+          variant: "h5",
+          weight: "medium",
           children: t("neetoGithub.connectARepo")
-        }), isPresent(repositories) && /*#__PURE__*/jsxs("div", {
-          className: "flex w-full items-center gap-3",
-          children: [/*#__PURE__*/jsx(Search, {
-            onSearch: onSearch,
-            className: "flex-1",
-            unlimitedChars: false
-          }), /*#__PURE__*/jsx(Typography, {
-            className: "whitespace-nowrap neeto-ui-text-gray-700",
-            variant: "body2",
-            children: t("neetoGithub.countOf.repos", {
-              count: filteredRepositories.length
-            })
-          })]
-        })]
+        }), searchRow]
       }), /*#__PURE__*/jsx("div", {
         className: "flex min-h-0 w-full grow flex-col space-y-6",
-        children: /*#__PURE__*/jsx(List, {
-          filteredRepositories: filteredRepositories,
-          installationUrl: installationUrl,
-          isConnecting: isConnecting,
-          onConnect: onConnect,
-          repositories: repositories,
-          troubleshootUrl: troubleshootUrl
-        })
+        children: listElement
       })]
     }) : /*#__PURE__*/jsx("div", {
-      className: "neeto-ui-text-gray-900 grow font-sans text-sm font-normal leading-6 antialiased",
+      className: "text-foreground grow",
       children: /*#__PURE__*/jsx("div", {
         className: "flex h-full flex-col items-center justify-center p-4",
         children: /*#__PURE__*/jsx(NotConnected, {
@@ -368,14 +434,15 @@ var Repositories = function Repositories(_ref) {
     troubleshootUrl = _ref.troubleshootUrl,
     isPane = _ref.isPane;
   return /*#__PURE__*/jsx("div", {
-    className: classnames("neeto-ui-rounded-md neeto-ui-border-gray-300 flex h-full w-full flex-col space-y-6 overflow-hidden border border-solid", {
+    className: classnames("flex h-full w-full flex-col space-y-6 overflow-hidden", {
       "order-2": isPane,
-      "order-1": !isPane
+      "border-border order-1 rounded-md border border-solid": !isPane
     }),
     children: /*#__PURE__*/jsx(Private, {
       installationUrl: installationUrl,
       isConnected: isConnected,
       isConnecting: isConnecting,
+      isPane: isPane,
       onConnect: onConnect,
       repositories: repositories,
       troubleshootUrl: troubleshootUrl