Update namings and documentation to bring consistency to -palette (#123)

* remove DS_Store files and include in gitignore

* add some naming consistency

Author: muhammadjalabi

.DS_Store

@@ -129,5 +129,5 @@ dist
 .yarn/install-state.gz
 .pnp.*
 
-**/*/.DS_Store
- 
+.DS_Store
+**/.DS_Store

.gitignore

@@ -2,7 +2,7 @@
 
 This plugin allows you to see all your project icons in a new tab in remix development tools, copy the code and change their classes.
 
-<video controls="controls" src="./Icon library.mp4" ></video>
+<video controls="controls" src="./icon-library.mp4" ></video>
 
 ## How to use
 

plugins/icon-library/README.md

@@ -1,15 +1,15 @@
-# Icon library plugin
+# Tailwind palette plugin
 
 This plugin allows you to see all tailwind colors in a new tab in remix development tools, copy them and paste into code.
 
-<video controls="controls" src="./color-pallette.mp4" ></video>
+<video controls="controls" src="./color-palette.mp4" ></video>
 
 ## How to use
 
 
 ### Vite
 1. Create a plugin directory in your project. (eg on the root you can create a `your-path-here` folder)
-2. Copy the code from the plugin located in this folder. and paste it into there (eg `your-path-here/tailwind-pallette.tsx`)
+2. Copy the code from the plugin located in this folder. and paste it into there (eg `your-path-here/tailwind-palette.tsx`)
 3. Specify the plugin directory in your vite config via the `pluginsDir` option:
 
 ```js
@@ -24,14 +24,14 @@ This plugin allows you to see all tailwind colors in a new tab in remix developm
 
 1. Copy the code from the plugin located in this folder.
 2. Go over the TODO's in the code and modify the code to your project specifications.
-3. Import the plugin exported from the `tailwind-pallette.tsx` into your `root.tsx` file.
+3. Import the plugin exported from the `tailwind-palette.tsx` into your `root.tsx` file.
 4. Add the plugin to the `plugins` array in the `withDevTools` wrapper.
 
 ```tsx
-  import { tailwindPallettePlugin } from "~/tailwind-pallette.tsx";
+  import { tailwindPalettePlugin } from "~/tailwind-palette.tsx";
 
   AppExport = withDevTools(App, {
-    plugins: [tailwindPallettePlugin()]
+    plugins: [tailwindPalettePlugin()]
   });
 ```
 
@@ -41,7 +41,7 @@ This plugin allows you to see all tailwind colors in a new tab in remix developm
 
 The plugin will use all the tailwind colors and list them for you so you can easily copy paste them and apply them to your elements
 
-You can click on the color to copy the name of the icon to your clipboard.
+You can click on the color to copy the name of the color to your clipboard.
 
 
 ## Can I add my own features?

plugins/icon-library/Icon library.mp4 plugins/icon-library/icon-library.mp4plugins/icon-library/Icon library.mp4 renamed to plugins/icon-library/icon-library.mp4

@@ -210,7 +210,7 @@ const colorVariants = {
 // Color groups
 const colors = Object.keys(colorVariants) as (keyof typeof colorVariants)[];
 
-const TailwindColorPallette = () => {
+const TailwindColorPalette = () => {
   return (
     <div className="font-display flex flex-col p-4 md:p-8">
       <div className="flex justify-between overflow-auto">
@@ -235,8 +235,8 @@ const TailwindColorPallette = () => {
   );
 };
 
-export const tailwindPallettePlugin = () => ({
-  // Adds pallette icon, you can change
+export const tailwindPalettePlugin = () => ({
+  // Adds palette icon, you can change
   icon: (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -257,10 +257,10 @@ export const tailwindPallettePlugin = () => ({
     </svg>
   ),
   // Name of the tab
-  name: "Color Pallette",
+  name: "Color Palette",
   // id of the tab, must be unique
-  id: "pallette",
+  id: "palette",
   requiresForge: false,
   hideTimeline: false,
-  component: <TailwindColorPallette />,
+  component: <TailwindColorPalette />,
 });

plugins/tailwind-pallette/README.md plugins/tailwind-palette/README.mdplugins/tailwind-pallette/README.md renamed to plugins/tailwind-palette/README.md

@@ -210,7 +210,7 @@ const colorVariants = {
 // Color groups
 const colors = Object.keys(colorVariants) as (keyof typeof colorVariants)[];
 
-const TailwindColorPallette = () => {
+const TailwindColorPalette = () => {
   return (
     <div className="font-display flex flex-col p-4 md:p-8">
       <div className="flex justify-between overflow-auto">
@@ -235,8 +235,8 @@ const TailwindColorPallette = () => {
   );
 };
 
-export const tailwindPallettePlugin = () => ({
-  // Adds pallette icon, you can change
+export const tailwindPalettePlugin = () => ({
+  // Adds palette icon, you can change
   icon: (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -257,10 +257,10 @@ export const tailwindPallettePlugin = () => ({
     </svg>
   ),
   // Name of the tab
-  name: "Color Pallette",
+  name: "Color Palette",
   // id of the tab, must be unique
-  id: "pallette",
+  id: "palette",
   requiresForge: false,
   hideTimeline: false,
-  component: <TailwindColorPallette />,
+  component: <TailwindColorPalette />,
 });