Grid style changes

nukeop · Sep 27, 2022 · d02fb6d · d02fb6d
1 parent f986fa2
commit d02fb6d
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
     "@trivago/prettier-plugin-sort-imports": "^3.3.0",
+    "@types/lodash": "^4.14.185",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
@@ -78,6 +79,7 @@
     "freedesktop-icons": "^1.0.0",
     "fuse.js": "^6.6.2",
     "glasstron": "^0.1.1",
+    "lodash": "^4.17.21",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.7",
     "winston": "^3.8.1",

diff --git a/src/bangs/wikipedia.ts b/src/bangs/wikipedia.ts
@@ -1,4 +1,5 @@
 import { EmptyBangResponse, IBang, InfoboxBangResponse } from "./bangs";
+import upperFirst from "lodash/upperFirst";
 
 type WikipediaResponse = {
   query: {
@@ -29,7 +30,12 @@ export class WikipediaBang
   async onActivate(
     input: string
   ): Promise<InfoboxBangResponse | EmptyBangResponse> {
-    const query = input.replace("!w", "").trim();
+    const query = input
+      .replace("!w", "")
+      .trim()
+      .split(" ")
+      .map(upperFirst)
+      .join(" ");
     const url = `https://en.wikipedia.org/w/api.php?action=query&prop=extracts|pageimages|pageprops&format=json&exintro=&explaintext=&titles=${query}&pithumbsize=300`;
     const result = (await (await fetch(url)).json()) as WikipediaResponse;
 

diff --git a/src/components/BangsArea/BangsArea.module.scss b/src/components/BangsArea/BangsArea.module.scss
@@ -1,6 +1,6 @@
 .bangs-area {
-    @apply flex justify-center items-center w-full rounded-xl bg-black/20 transition-all duration-500;
-    @apply mt-4 p-8;
+    @apply flex justify-center items-center rounded-xl bg-black/20 transition-all duration-500;
+    @apply m-4 p-8;
 
     &.empty {
         @apply h-0 p-0 m-0;

diff --git a/src/components/Input/Input.module.scss b/src/components/Input/Input.module.scss
@@ -1,9 +1,6 @@
 .inputWrapper {
-    @apply flex flex-row items-center;
-    @apply border border-solid border-slate-600/50;
-    @apply focus-within:ring-blue-500 focus-within:border-blue-500;
-    @apply rounded-lg;
-    @apply transition-colors duration-200 ease-in-out;
+    @apply flex flex-row items-center px-4 py-2;
+    @apply border-b border-slate-700;
 }
 
 .prefixLabel {

diff --git a/src/components/Palette/Palette.module.scss b/src/components/Palette/Palette.module.scss
@@ -1,6 +1,3 @@
 .palette {
-    @apply flex flex-col;
-    @apply p-8;
-    @apply outline-none;
-    @apply h-full;
+    @apply flex flex-col outline-none h-full;
 }
diff --git a/src/components/PaletteGrid/PaletteGrid.module.scss b/src/components/PaletteGrid/PaletteGrid.module.scss
@@ -19,8 +19,6 @@
   }
 
   .palette-grid-list {
-    @apply pr-2;
-
     & > div {
       @apply relative;
     }

diff --git a/src/components/PaletteGrid/PaletteGrid.tsx b/src/components/PaletteGrid/PaletteGrid.tsx
@@ -17,8 +17,8 @@ type PaletteGridProps = {
   itemSizeWithDescription?: number;
 };
 
-const ITEM_SIZE = 28;
-const ITEM_SIZE_WITH_DESCRIPTION = 40;
+const ITEM_SIZE = 32;
+const ITEM_SIZE_WITH_DESCRIPTION = 44;
 
 export const PaletteGrid: React.FC<PaletteGridProps> = ({
   items,

diff --git a/src/components/PaletteItem/PaletteItem.module.scss b/src/components/PaletteItem/PaletteItem.module.scss
@@ -1,7 +1,7 @@
 .palette-item {
     @apply flex flex-row items-center;
     @apply w-full;
-    @apply px-3 py-2;
+    @apply px-6 py-4;
     @apply hover:bg-slate-600/50 focus:bg-slate-600/50 active:bg-slate-500/50;
     @apply cursor-pointer;
     @apply outline-none;
@@ -10,7 +10,6 @@
     @apply whitespace-nowrap;
     @apply text-ellipsis;
     @apply overflow-ellipsis;
-    @apply rounded-lg;
 
     & > *:not(:last-child) {
         @apply mr-1;