Support dark mode in plugin manager

Summary: Make sure plugin manager supports dark mode Changelog: Added dark mode support to plugin manager Fixes https://github.com/facebook/flipper/issues/2379#issuecomment-871658004 / https://fb.workplace.com/groups/flippersupport/permalink/1173361956477794/ Reviewed By: timur-valiev Differential Revision: D29800712 fbshipit-source-id: 76d383bbfd7013f63b9545e4e80ff9c771200746
2021-07-21 01:41:26 -07:00
parent 6ed107721b
commit 9cb90cd749
4 changed files with 271 additions and 284 deletions
--- a/desktop/app/src/chrome/plugin-manager/PluginDebugger.tsx
+++ b/desktop/app/src/chrome/plugin-manager/PluginDebugger.tsx
@@ -12,7 +12,7 @@ import Client from '../../Client';
 import {TableBodyRow} from '../../ui/components/table/types';
 import React, {Component, Fragment} from 'react';
 import {connect} from 'react-redux';
-import {Text, ManagedTable, styled, colors, Link} from '../../ui';
+import {Text, ManagedTable, styled, colors} from '../../ui';
 import StatusIndicator from '../../ui/components/StatusIndicator';
 import {State as Store} from '../../reducers';
 import {PluginDefinition} from '../../plugin';
@@ -30,7 +30,7 @@ const Ellipsis = styled(Text)({

 const TableContainer = styled.div({
  marginTop: 10,
-  height: 400,
+  height: 480,
 });

 const Lamp = (props: {on: boolean}) => (
--- a/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx
+++ b/desktop/app/src/chrome/plugin-manager/PluginInstaller.tsx
@@ -7,23 +7,8 @@
 * @format
 */

-import {
-  FlexColumn,
-  styled,
-  SearchInput,
-  SearchBox,
-  Button,
-  colors,
-  Spacer,
-  FlexRow,
-  Glyph,
-  Link,
-  Text,
-  LoadingIndicator,
-  Tooltip,
-  TableRows,
-  ManagedTable,
-} from '../../ui';
+import {Layout, theme} from 'flipper-plugin';
+import {LoadingIndicator, TableRows, ManagedTable, Glyph} from '../../ui';
 import React, {useCallback, useState, useEffect} from 'react';
 import {reportPlatformFailures, reportUsage} from '../../utils/metrics';
 import reloadFlipper from '../../utils/reloadFlipper';
@@ -42,15 +27,12 @@ import {connect} from 'react-redux';
 import {Dispatch, Action} from 'redux';
 import PluginPackageInstaller from './PluginPackageInstaller';
 import {Toolbar} from 'flipper-plugin';
+import {Alert, Button, Input, Tooltip, Typography} from 'antd';
+
+const {Text, Link} = Typography;

 const TAG = 'PluginInstaller';

-const EllipsisText = styled(Text)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-});
-
 const columnSizes = {
  name: '25%',
  version: '10%',
@@ -73,23 +55,6 @@ const columns = {
  },
 };

-const Container = styled(FlexColumn)({
-  height: 300,
-  backgroundColor: colors.white,
-  borderRadius: 4,
-  overflow: 'hidden',
-  border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
-});
-
-const RestartBar = styled(FlexColumn)({
-  backgroundColor: colors.red,
-  color: colors.white,
-  fontWeight: 500,
-  padding: 10,
-  cursor: 'pointer',
-  textAlign: 'center',
-});
-
 type PropsFromState = {
  installedPlugins: Map<string, InstalledPluginDetails>;
 };
@@ -127,51 +92,38 @@ const PluginInstaller = function ({
  }, []);

  return (
-    <>
-      <Container>
-        {restartRequired && (
-          <RestartBar onClick={restartApp}>
-            To apply the changes, Flipper needs to reload. Click here to reload!
-          </RestartBar>
-        )}
-        <Toolbar>
-          <SearchBox>
-            <SearchInput
-              onChange={(e) => setQuery(e.target.value)}
-              value={query}
-              placeholder="Search Flipper plugins..."
-            />
-          </SearchBox>
-        </Toolbar>
-        <ManagedTable
-          rowLineHeight={28}
-          floating={false}
-          multiline
-          columnSizes={columnSizes}
-          columns={columns}
-          highlightableRows={false}
-          highlightedRows={new Set()}
-          autoHeight={autoHeight}
-          rows={rows}
+    <Layout.Container gap height={500}>
+      {restartRequired && (
+        <Alert
+          onClick={restartApp}
+          type="error"
+          message="To apply the changes, Flipper needs to reload. Click here to reload!"
+          style={{cursor: 'pointer'}}
        />
-      </Container>
+      )}
+      <Toolbar>
+        <Input.Search
+          onChange={(e) => setQuery(e.target.value)}
+          value={query}
+          placeholder="Search Flipper plugins..."
+        />
+      </Toolbar>
+      <ManagedTable
+        rowLineHeight={28}
+        floating={false}
+        multiline
+        columnSizes={columnSizes}
+        columns={columns}
+        highlightableRows={false}
+        highlightedRows={new Set()}
+        autoHeight={autoHeight}
+        rows={rows}
+      />
      <PluginPackageInstaller onInstall={onInstall} />
-    </>
+    </Layout.Container>
  );
 };

-const TableButton = styled(Button)({
-  marginTop: 2,
-});
-
-const Spinner = styled(LoadingIndicator)({
-  marginTop: 6,
-});
-
-const AlignedGlyph = styled(Glyph)({
-  marginTop: 6,
-});
-
 function InstallButton(props: {
  name: string;
  version: string;
@@ -240,13 +192,13 @@ function InstallButton(props: {
  );

  if (action.kind === 'Waiting') {
-    return <Spinner size={16} />;
+    return <LoadingIndicator size={16} />;
  }
  if ((action.kind === 'Install' || action.kind === 'Remove') && action.error) {
  }
  const button = (
-    <TableButton
-      compact
+    <Button
+      size="small"
      type={action.kind !== 'Remove' ? 'primary' : undefined}
      onClick={() => {
        switch (action.kind) {
@@ -262,22 +214,22 @@ function InstallButton(props: {
        }
      }}>
      {action.kind}
-    </TableButton>
+    </Button>
  );

  if (action.error) {
    const glyph = (
-      <AlignedGlyph color={colors.orange} size={16} name="caution-triangle" />
+      <Glyph color={theme.warningColor} size={16} name="caution-triangle" />
    );
    return (
-      <FlexRow>
+      <Layout.Horizontal gap>
        <Tooltip
-          options={{position: 'toLeft'}}
+          placement="leftBottom"
          title={`Something went wrong: ${action.error}`}
          children={glyph}
        />
        {button}
-      </FlexRow>
+      </Layout.Horizontal>
    );
  } else {
    return button;
@@ -302,25 +254,24 @@ function useNPMSearch(
      key: h.name,
      columns: {
        name: {
-          value: (
-            <EllipsisText>
-              {h.name.replace(/^flipper-plugin-/, '')}
-            </EllipsisText>
-          ),
+          value: <Text ellipsis>{h.name.replace(/^flipper-plugin-/, '')}</Text>,
        },
        version: {
-          value: <EllipsisText>{h.version}</EllipsisText>,
+          value: <Text ellipsis>{h.version}</Text>,
          align: 'flex-end' as 'flex-end',
        },
        description: {
          value: (
-            <FlexRow grow>
-              <EllipsisText>{h.description}</EllipsisText>
-              <Spacer />
+            <Layout.Horizontal center gap>
+              <Text ellipsis>{h.description}</Text>
              <Link href={`https://yarnpkg.com/en/package/${h.name}`}>
-                <Glyph color={colors.light20} name="info-circle" size={16} />
+                <Glyph
+                  color={theme.textColorActive}
+                  name="info-circle"
+                  size={16}
+                />
              </Link>
-            </FlexRow>
+            </Layout.Horizontal>
          ),
        },
        install: {
--- a/desktop/app/src/chrome/plugin-manager/PluginManager.tsx
+++ b/desktop/app/src/chrome/plugin-manager/PluginManager.tsx
@@ -7,41 +7,23 @@
 * @format
 */

-import React, {useState} from 'react';
-import {FlexColumn, Button, styled, Tab, Tabs, TabsContainer} from '../../ui';
+import React from 'react';
+import {Tab, Tabs} from 'flipper-plugin';
 import PluginDebugger from './PluginDebugger';
 import PluginInstaller from './PluginInstaller';
-
-const Container = styled(FlexColumn)({
-  padding: 15,
-  width: 760,
-});
-
-const Row = styled(FlexColumn)({
-  alignItems: 'flex-end',
-});
-
-type TabsState = 'Plugin Status' | 'Install Plugins';
+import {Modal} from 'antd';

 export default function (props: {onHide: () => any}) {
-  const [tab, setTab] = useState<TabsState>('Plugin Status');
  return (
-    <Container>
-      <TabsContainer>
-        <Tabs
-          active={tab}
-          onActive={setTab as (s: string | null | undefined) => void}>
-          <Tab label="Plugin Status" />
-          <Tab label="Install Plugins" />
-        </Tabs>
-        {tab === 'Plugin Status' && <PluginDebugger />}
-        {tab === 'Install Plugins' && <PluginInstaller />}
-      </TabsContainer>
-      <Row>
-        <Button compact padded onClick={props.onHide}>
-          Close
-        </Button>
-      </Row>
-    </Container>
+    <Modal width={800} visible onCancel={props.onHide} footer={null}>
+      <Tabs>
+        <Tab tab="Plugin Status">
+          <PluginDebugger />
+        </Tab>
+        <Tab tab="Install Plugins">
+          <PluginInstaller />
+        </Tab>
+      </Tabs>
+    </Modal>
  );
 }
--- a/desktop/app/src/chrome/plugin-manager/tests/snapshots/PluginInstaller.node.tsx.snap
+++ b/desktop/app/src/chrome/plugin-manager/tests/snapshots/PluginInstaller.node.tsx.snap
@@ -3,21 +3,54 @@
 exports[`load PluginInstaller list 1`] = `
 <div>
  <div
-    class="css-9dawc5-View-FlexBox-FlexColumn"
+    class="css-1v0y38i-Container e1hsqii15"
+    height="500"
  >
    <div
      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
    >
-      <div
-        class="css-r8ah0d-View-FlexBox-SearchBox e271nro4"
+      <span
+        class="ant-input-group-wrapper ant-input-search"
      >
-        <input
-          class="css-84x0xt-Input-SearchInput e271nro3"
-          placeholder="Search Flipper plugins..."
-          type="text"
-          value=""
-        />
-      </div>
+        <span
+          class="ant-input-wrapper ant-input-group"
+        >
+          <input
+            class="ant-input"
+            placeholder="Search Flipper plugins..."
+            type="text"
+            value=""
+          />
+          <span
+            class="ant-input-group-addon"
+          >
+            <button
+              class="ant-btn ant-btn-icon-only ant-input-search-button"
+              type="button"
+            >
+              <span
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </span>
+        </span>
+      </span>
    </div>
    <div
      class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
@@ -111,7 +144,7 @@ exports[`load PluginInstaller list 1`] = `
              width="25%"
            >
              <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
              >
                hello
              </span>
@@ -122,7 +155,7 @@ exports[`load PluginInstaller list 1`] = `
              width="10%"
            >
              <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
              >
                0.1.0
              </span>
@@ -133,23 +166,20 @@ exports[`load PluginInstaller list 1`] = `
              width="flex"
            >
              <div
-                class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
+                class="css-s1wsbn-Container-Horizontal e1hsqii14"
              >
                <span
-                  class="css-fyize4-Text"
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
                >
                  World?
                </span>
-                <div
-                  class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
-                />
                <a
                  class="ant-typography"
                  href="https://yarnpkg.com/en/package/flipper-plugin-hello"
                >
                  <div
-                    class="css-5r6dd6-ColoredIconCustom e528dze0"
-                    color="#bec2c9"
+                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
+                    color="var(--light-color-button-active)"
                    size="16"
                    src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
                  />
@@ -162,7 +192,7 @@ exports[`load PluginInstaller list 1`] = `
              width="15%"
            >
              <button
-                class="ant-btn ant-btn-primary"
+                class="ant-btn ant-btn-primary ant-btn-sm"
                type="button"
              >
                <span>
@@ -181,7 +211,7 @@ exports[`load PluginInstaller list 1`] = `
              width="25%"
            >
              <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
              >
                world
              </span>
@@ -192,7 +222,7 @@ exports[`load PluginInstaller list 1`] = `
              width="10%"
            >
              <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
              >
                0.2.0
              </span>
@@ -203,23 +233,20 @@ exports[`load PluginInstaller list 1`] = `
              width="flex"
            >
              <div
-                class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
+                class="css-s1wsbn-Container-Horizontal e1hsqii14"
              >
                <span
-                  class="css-fyize4-Text"
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
                >
                  Hello?
                </span>
-                <div
-                  class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
-                />
                <a
                  class="ant-typography"
                  href="https://yarnpkg.com/en/package/flipper-plugin-world"
                >
                  <div
-                    class="css-5r6dd6-ColoredIconCustom e528dze0"
-                    color="#bec2c9"
+                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
+                    color="var(--light-color-button-active)"
                    size="16"
                    src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
                  />
@@ -232,7 +259,7 @@ exports[`load PluginInstaller list 1`] = `
              width="15%"
            >
              <button
-                class="ant-btn ant-btn-primary"
+                class="ant-btn ant-btn-primary ant-btn-sm"
                type="button"
              >
                <span>
@@ -244,63 +271,63 @@ exports[`load PluginInstaller list 1`] = `
        </div>
      </div>
    </div>
-  </div>
-  <div
-    class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
-  >
    <div
-      class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
+      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
    >
-      <input
-        class="css-sli06x-Input-FileInputBox ersmi540"
-        placeholder="Specify path to a Flipper package or just drag and drop it here..."
-        type="text"
-        value=""
-      />
      <div
-        class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
+        class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
      >
-        <img
-          alt="dots-3-circle"
-          class="ersmi543 css-6iptsk-ColoredIconBlack-CenteredGlyph e528dze1"
-          size="16"
-          src="https://facebook.com/assets/?name=dots-3-circle&variant=outline&size=16&set=facebook_icons&density=1x"
-          title="Open file selection dialog"
+        <input
+          class="css-sli06x-Input-FileInputBox ersmi540"
+          placeholder="Specify path to a Flipper package or just drag and drop it here..."
+          type="text"
+          value=""
        />
-      </div>
-      <div
-        class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
-      >
        <div
-          class="css-auhar3-TooltipContainer e1abcqbd0"
+          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
        >
-          <div
-            class="ersmi543 css-1qsl9s4-ColoredIconCustom-CenteredGlyph e528dze0"
-            color="#D79651"
+          <img
+            alt="dots-3-circle"
+            class="ersmi543 css-6iptsk-ColoredIconBlack-CenteredGlyph e528dze1"
            size="16"
-            src="https://facebook.com/assets/?name=caution-triangle&variant=filled&size=16&set=facebook_icons&density=1x"
+            src="https://facebook.com/assets/?name=dots-3-circle&variant=outline&size=16&set=facebook_icons&density=1x"
+            title="Open file selection dialog"
          />
        </div>
-      </div>
-    </div>
-    <div
-      class="css-5ukfaz-View-FlexBox-FlexRow-ButtonContainer evd5j491"
-    >
-      <div
-        class="css-wospjg-View-FlexBox-FlexRow epz0qe20"
-      >
-        <button
-          class="ant-btn ant-btn-primary"
-          disabled=""
-          type="button"
-        >
-          <span>
-            Install
-          </span>
-        </button>
        <div
-          class="css-170i4ha-View-FlexBox-FlexRow-ErrorGlyphContainer evd5j490"
-        />
+          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
+        >
+          <div
+            class="css-auhar3-TooltipContainer e1abcqbd0"
+          >
+            <div
+              class="ersmi543 css-1qsl9s4-ColoredIconCustom-CenteredGlyph e528dze0"
+              color="#D79651"
+              size="16"
+              src="https://facebook.com/assets/?name=caution-triangle&variant=filled&size=16&set=facebook_icons&density=1x"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="css-5ukfaz-View-FlexBox-FlexRow-ButtonContainer evd5j491"
+      >
+        <div
+          class="css-wospjg-View-FlexBox-FlexRow epz0qe20"
+        >
+          <button
+            class="ant-btn ant-btn-primary"
+            disabled=""
+            type="button"
+          >
+            <span>
+              Install
+            </span>
+          </button>
+          <div
+            class="css-170i4ha-View-FlexBox-FlexRow-ErrorGlyphContainer evd5j490"
+          />
+        </div>
      </div>
    </div>
  </div>
@@ -310,21 +337,54 @@ exports[`load PluginInstaller list 1`] = `
 exports[`load PluginInstaller list with one plugin installed 1`] = `
 <div>
  <div
-    class="css-9dawc5-View-FlexBox-FlexColumn"
+    class="css-1v0y38i-Container e1hsqii15"
+    height="500"
  >
    <div
      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
    >
-      <div
-        class="css-r8ah0d-View-FlexBox-SearchBox e271nro4"
+      <span
+        class="ant-input-group-wrapper ant-input-search"
      >
-        <input
-          class="css-84x0xt-Input-SearchInput e271nro3"
-          placeholder="Search Flipper plugins..."
-          type="text"
-          value=""
-        />
-      </div>
+        <span
+          class="ant-input-wrapper ant-input-group"
+        >
+          <input
+            class="ant-input"
+            placeholder="Search Flipper plugins..."
+            type="text"
+            value=""
+          />
+          <span
+            class="ant-input-group-addon"
+          >
+            <button
+              class="ant-btn ant-btn-icon-only ant-input-search-button"
+              type="button"
+            >
+              <span
+                aria-label="search"
+                class="anticon anticon-search"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="search"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </span>
+        </span>
+      </span>
    </div>
    <div
      class="css-p5h61d-View-FlexBox-FlexColumn-Container esta8x30"
@@ -418,7 +478,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
              width="25%"
            >
              <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
              >
                hello
              </span>
@@ -429,7 +489,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
              width="10%"
            >
              <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
              >
                0.1.0
              </span>
@@ -440,23 +500,20 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
              width="flex"
            >
              <div
-                class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
+                class="css-s1wsbn-Container-Horizontal e1hsqii14"
              >
                <span
-                  class="css-fyize4-Text"
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
                >
                  World?
                </span>
-                <div
-                  class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
-                />
                <a
                  class="ant-typography"
                  href="https://yarnpkg.com/en/package/flipper-plugin-hello"
                >
                  <div
-                    class="css-5r6dd6-ColoredIconCustom e528dze0"
-                    color="#bec2c9"
+                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
+                    color="var(--light-color-button-active)"
                    size="16"
                    src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
                  />
@@ -469,7 +526,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
              width="15%"
            >
              <button
-                class="ant-btn ant-btn-default"
+                class="ant-btn ant-btn-sm"
                type="button"
              >
                <span>
@@ -488,7 +545,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
              width="25%"
            >
              <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
              >
                world
              </span>
@@ -499,7 +556,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
              width="10%"
            >
              <span
-                class="css-fyize4-Text"
+                class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
              >
                0.2.0
              </span>
@@ -510,23 +567,20 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
              width="flex"
            >
              <div
-                class="css-4yiclo-View-FlexBox-FlexRow epz0qe20"
+                class="css-s1wsbn-Container-Horizontal e1hsqii14"
              >
                <span
-                  class="css-fyize4-Text"
+                  class="ant-typography ant-typography-ellipsis ant-typography-single-line ant-typography-ellipsis-single-line"
                >
                  Hello?
                </span>
-                <div
-                  class="css-t4wmtk-View-FlexBox-Spacer e13mj6h80"
-                />
                <a
                  class="ant-typography"
                  href="https://yarnpkg.com/en/package/flipper-plugin-world"
                >
                  <div
-                    class="css-5r6dd6-ColoredIconCustom e528dze0"
-                    color="#bec2c9"
+                    class="css-1kmzf9v-ColoredIconCustom e528dze0"
+                    color="var(--light-color-button-active)"
                    size="16"
                    src="https://facebook.com/assets/?name=info-circle&variant=filled&size=16&set=facebook_icons&density=1x"
                  />
@@ -539,7 +593,7 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
              width="15%"
            >
              <button
-                class="ant-btn ant-btn-primary"
+                class="ant-btn ant-btn-primary ant-btn-sm"
                type="button"
              >
                <span>
@@ -551,63 +605,63 @@ exports[`load PluginInstaller list with one plugin installed 1`] = `
        </div>
      </div>
    </div>
-  </div>
-  <div
-    class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
-  >
    <div
-      class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
+      class="css-1lxv8hi-Container-Horizontal-SandyToolbarContainer e1ecpah20"
    >
-      <input
-        class="css-sli06x-Input-FileInputBox ersmi540"
-        placeholder="Specify path to a Flipper package or just drag and drop it here..."
-        type="text"
-        value=""
-      />
      <div
-        class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
+        class="css-1spj5hr-View-FlexBox-FlexRow-Container ersmi542"
      >
-        <img
-          alt="dots-3-circle"
-          class="ersmi543 css-6iptsk-ColoredIconBlack-CenteredGlyph e528dze1"
-          size="16"
-          src="https://facebook.com/assets/?name=dots-3-circle&variant=outline&size=16&set=facebook_icons&density=1x"
-          title="Open file selection dialog"
+        <input
+          class="css-sli06x-Input-FileInputBox ersmi540"
+          placeholder="Specify path to a Flipper package or just drag and drop it here..."
+          type="text"
+          value=""
        />
-      </div>
-      <div
-        class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
-      >
        <div
-          class="css-auhar3-TooltipContainer e1abcqbd0"
+          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
        >
-          <div
-            class="ersmi543 css-1qsl9s4-ColoredIconCustom-CenteredGlyph e528dze0"
-            color="#D79651"
+          <img
+            alt="dots-3-circle"
+            class="ersmi543 css-6iptsk-ColoredIconBlack-CenteredGlyph e528dze1"
            size="16"
-            src="https://facebook.com/assets/?name=caution-triangle&variant=filled&size=16&set=facebook_icons&density=1x"
+            src="https://facebook.com/assets/?name=dots-3-circle&variant=outline&size=16&set=facebook_icons&density=1x"
+            title="Open file selection dialog"
          />
        </div>
-      </div>
-    </div>
-    <div
-      class="css-5ukfaz-View-FlexBox-FlexRow-ButtonContainer evd5j491"
-    >
-      <div
-        class="css-wospjg-View-FlexBox-FlexRow epz0qe20"
-      >
-        <button
-          class="ant-btn ant-btn-primary"
-          disabled=""
-          type="button"
-        >
-          <span>
-            Install
-          </span>
-        </button>
        <div
-          class="css-170i4ha-View-FlexBox-FlexRow-ErrorGlyphContainer evd5j490"
-        />
+          class="css-ccdckn-View-FlexBox-FlexRow-GlyphContainer ersmi541"
+        >
+          <div
+            class="css-auhar3-TooltipContainer e1abcqbd0"
+          >
+            <div
+              class="ersmi543 css-1qsl9s4-ColoredIconCustom-CenteredGlyph e528dze0"
+              color="#D79651"
+              size="16"
+              src="https://facebook.com/assets/?name=caution-triangle&variant=filled&size=16&set=facebook_icons&density=1x"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="css-5ukfaz-View-FlexBox-FlexRow-ButtonContainer evd5j491"
+      >
+        <div
+          class="css-wospjg-View-FlexBox-FlexRow epz0qe20"
+        >
+          <button
+            class="ant-btn ant-btn-primary"
+            disabled=""
+            type="button"
+          >
+            <span>
+              Install
+            </span>
+          </button>
+          <div
+            class="css-170i4ha-View-FlexBox-FlexRow-ErrorGlyphContainer evd5j490"
+          />
+        </div>
      </div>
    </div>
  </div>