Apply nicer styles

nukeop · Sep 12, 2022 · 1b04bd8 · 1b04bd8
1 parent f822919
commit 1b04bd8
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 67 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -26,6 +26,8 @@ jobs:
         run: npm ci
       - name: Build
         run: npm run build
+        env:
+            GH_TOKEN: ${{ secrets.GH_TOKEN }}
       - name: Create a release
         uses: softprops/action-gh-release@v1
         with:

diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss
@@ -22,11 +22,11 @@
     @apply text-gray-900;
     @apply placeholder-gray-400;
 
-    @apply text-base text-white;
+    @apply text-xl text-white;
 
     @apply block;
     @apply w-full;
-    @apply py-4 pl-4;
+    @apply py-2 pl-4;
 
     .prefixLabel + & {
         @apply pl-0;

diff --git a/src/components/Palette/Palette.tsx b/src/components/Palette/Palette.tsx
@@ -5,7 +5,7 @@ import { PaletteItemProps } from "../PaletteItem/PaletteItem";
 import styles from "./Palette.module.scss";
 import cx from "classnames";
 import React, { RefObject } from "react";
-import { FixedSizeList } from "react-window";
+import { VariableSizeList } from "react-window";
 
 type PaletteProps = {
   options: PaletteItemProps[];
@@ -17,7 +17,7 @@ type PaletteProps = {
   selectedItemIndex: number;
   onSetSelectedItemIndex: (index: number) => void;
 
-  listRef: RefObject<FixedSizeList>;
+  listRef: RefObject<VariableSizeList>;
 };
 
 export const Palette: React.FC<PaletteProps> = ({

diff --git a/src/components/Palette/__snapshots__/Palette.test.tsx.snap b/src/components/Palette/__snapshots__/Palette.test.tsx.snap
@@ -11,11 +11,11 @@ exports[`Palette > renders a palette from piped arguments 1`] = `
       tabindex="-1"
     >
       <div
-        class="_inputWrapper_10twy_1 filter-input"
+        class="_inputWrapper_1itu2_1 filter-input"
       >
         <input
           autocomplete="off"
-          class="_input_10twy_1"
+          class="_input_1itu2_1"
           data-testid="filter-input"
           placeholder="Type to filter..."
           value=""
@@ -28,56 +28,56 @@ exports[`Palette > renders a palette from piped arguments 1`] = `
           style="position: relative; height: 600px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div
-            style="height: 150px; width: 100%;"
+            style="height: 84px; width: 100%;"
           >
             <button
-              class="_palette-item_1jvla_1 _selected_1jvla_16 palette-item--selected palette-item"
+              class="_palette-item_bgybm_1 _selected_bgybm_18 palette-item--selected palette-item"
               data-selected="true"
               data-testid="palette-item-first"
-              style="position: absolute; left: 0px; top: 0px; height: 50px; width: 100%;"
+              style="position: absolute; left: 0px; top: 0px; height: 28px; width: 100%;"
             >
               <div
-                class="_palette-item-right_1jvla_24"
+                class="_palette-item-right_bgybm_26"
               >
                 <p>
                   first
                 </p>
                 <p
-                  class="_palette-item-description_1jvla_30"
+                  class="_palette-item-description_bgybm_32"
                 />
               </div>
             </button>
             <button
-              class="_palette-item_1jvla_1 palette-item"
+              class="_palette-item_bgybm_1 palette-item"
               data-selected="false"
               data-testid="palette-item-second"
-              style="position: absolute; left: 0px; top: 50px; height: 50px; width: 100%;"
+              style="position: absolute; left: 0px; top: 28px; height: 28px; width: 100%;"
             >
               <div
-                class="_palette-item-right_1jvla_24"
+                class="_palette-item-right_bgybm_26"
               >
                 <p>
                   second
                 </p>
                 <p
-                  class="_palette-item-description_1jvla_30"
+                  class="_palette-item-description_bgybm_32"
                 />
               </div>
             </button>
             <button
-              class="_palette-item_1jvla_1 palette-item"
+              class="_palette-item_bgybm_1 palette-item"
               data-selected="false"
               data-testid="palette-item-third"
-              style="position: absolute; left: 0px; top: 100px; height: 50px; width: 100%;"
+              style="position: absolute; left: 0px; top: 56px; height: 28px; width: 100%;"
             >
               <div
-                class="_palette-item-right_1jvla_24"
+                class="_palette-item-right_bgybm_26"
               >
                 <p>
                   third
                 </p>
                 <p
-                  class="_palette-item-description_1jvla_30"
+                  class="_palette-item-description_bgybm_32"
                 />
               </div>
             </button>

diff --git a/src/components/PaletteGrid/PaletteGrid.tsx b/src/components/PaletteGrid/PaletteGrid.tsx
@@ -4,55 +4,67 @@ import styles from "./PaletteGrid.module.scss";
 import cx from "classnames";
 import { RefObject } from "react";
 import AutoSizer from "react-virtualized-auto-sizer";
-import { FixedSizeList } from "react-window";
+import { VariableSizeList } from "react-window";
 
 type PaletteGridProps = {
   items: PaletteItemProps[];
   selectedItemId?: string;
   columns?: number;
-  listRef?: RefObject<FixedSizeList>;
+  listRef?: RefObject<VariableSizeList>;
 };
 
+const ITEM_SIZE = 28;
+const ITEM_SIZE_WITH_DESCRIPTION = 40;
+
 export const PaletteGrid: React.FC<PaletteGridProps> = ({
   items,
   selectedItemId,
   columns = 1,
   listRef,
-}) => (
-  <div
-    className={cx(
-      styles["palette-grid"],
-      {
-        [styles["columns-1"]]: columns === 1,
-        [styles["columns-2"]]: columns === 2,
-        [styles["columns-3"]]: columns === 3,
-        [styles["columns-4"]]: columns === 4,
-      },
-      ThemingClassNames["palette-grid"]
-    )}
-  >
-    <AutoSizer>
-      {({ height, width }) => (
-        <FixedSizeList
-          ref={listRef}
-          height={height}
-          width={width}
-          itemSize={50}
-          itemCount={items.length}
-        >
-          {({ index, style }) => {
-            const item = items[index];
-            return (
-              <PaletteItem
-                {...item}
-                key={item.id}
-                style={style}
-                isSelected={item.id === selectedItemId}
-              />
-            );
-          }}
-        </FixedSizeList>
+}) => {
+  const getItemSize = (index: number) => {
+    if (items[index].description) {
+      return ITEM_SIZE_WITH_DESCRIPTION;
+    } else {
+      return ITEM_SIZE;
+    }
+  };
+  return (
+    <div
+      className={cx(
+        styles["palette-grid"],
+        {
+          [styles["columns-1"]]: columns === 1,
+          [styles["columns-2"]]: columns === 2,
+          [styles["columns-3"]]: columns === 3,
+          [styles["columns-4"]]: columns === 4,
+        },
+        ThemingClassNames["palette-grid"]
       )}
-    </AutoSizer>
-  </div>
-);
+    >
+      <AutoSizer>
+        {({ height, width }) => (
+          <VariableSizeList
+            ref={listRef}
+            height={height}
+            width={width}
+            itemSize={getItemSize}
+            itemCount={items.length}
+          >
+            {({ index, style }) => {
+              const item = items[index];
+              return (
+                <PaletteItem
+                  {...item}
+                  key={item.id}
+                  style={style}
+                  isSelected={item.id === selectedItemId}
+                />
+              );
+            }}
+          </VariableSizeList>
+        )}
+      </AutoSizer>
+    </div>
+  );
+};
diff --git a/src/components/PaletteItem/PaletteItem.module.scss b/src/components/PaletteItem/PaletteItem.module.scss
@@ -1,22 +1,24 @@
 .palette-item {
     @apply flex flex-row items-center;
     @apply w-full;
-    @apply px-4 py-2;
-    @apply hover:bg-white/10 active:bg-white/20;
+    @apply px-3 py-1;
+    @apply hover:bg-slate-600 focus:bg-slate-600 active:bg-slate-500;
     @apply cursor-pointer;
     @apply outline-none;
     @apply text-white;
+    @apply text-sm;
     @apply whitespace-nowrap;
     @apply text-ellipsis;
     @apply overflow-ellipsis;
+    @apply rounded-lg;
 
-    &>*:not(:last-child) {
+    & > *:not(:last-child) {
         @apply mr-1;
     }
 
     &.selected {
-        @apply bg-blue-500/20;
-        @apply hover:bg-blue-500/30 focus:bg-blue-500/40 active:bg-blue-500/50;
+        @apply bg-blue-700;
+        @apply hover:bg-blue-600 focus:bg-blue-600 active:bg-blue-500;
     }
 
     .palette-item-left {
@@ -27,12 +29,12 @@
     .palette-item-right {
         @apply flex flex-col flex-1 items-start w-full;
 
-        &>* {
+        & > * {
             @apply w-full text-left truncate;
         }
     }
 
     .palette-item-description {
         @apply opacity-50;
     }
-}
+}
diff --git a/src/containers/PaletteContainer.tsx b/src/containers/PaletteContainer.tsx
@@ -5,10 +5,10 @@ import { useFlags } from "../hooks/useFlags";
 import { ipcRenderer } from "electron";
 import Fuse from "fuse.js";
 import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import { FixedSizeList } from "react-window";
+import { VariableSizeList } from "react-window";
 
 export const PaletteContainer: React.FC = () => {
-  const listRef = useRef<FixedSizeList>(null);
+  const listRef = useRef<VariableSizeList>(null);
   const { stdinArgs } = useContext(ArgsContext);
   const { flags } = useFlags();
   const options =

diff --git a/src/stories/PaletteGrid.stories.tsx b/src/stories/PaletteGrid.stories.tsx
@@ -26,6 +26,11 @@ WithItems.args = {
       id: "2",
       name: "Item",
     },
+    {
+      id: "3",
+      name: "Item",
+      description: "Description",
+    },
   ],
 };