chore: lint fixes and PR comments

.changeset/persistent-note-icons.md

@@ -1,6 +1,5 @@
 ---
-"pastebar-app-ui": patch
+'pastebar-app-ui': patch
 ---
 
 Added persistent note icons for clips with descriptions
-

.github/workflows/build-test.yml

@@ -90,4 +90,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          args: "--target aarch64-apple-darwin --bundles app"
+          args: '--target aarch64-apple-darwin --bundles app'

.github/workflows/claude-code-review.yml

@@ -72,4 +72,3 @@ jobs:
           # if: |
           #   !contains(github.event.pull_request.title, '[skip-review]') &&
           #   !contains(github.event.pull_request.title, '[WIP]')
-

.github/workflows/claude.yml

@@ -56,4 +56,3 @@ jobs:
           # Optional: Custom environment variables for Claude
           # claude_env: |
           #   NODE_ENV: test
-

CLAUDE.md

@@ -7,6 +7,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 PasteBar is a cross-platform clipboard manager built with Tauri (Rust + TypeScript/React). It provides unlimited clipboard history, custom clip management, collections, and advanced features like programming language detection and web scraping.
 
 **Technology Stack:**
+
 - **Backend**: Rust with Tauri framework, Diesel ORM (SQLite), Reqwest, Serde, Tokio
 - **Frontend**: TypeScript, React, React Query, Vite, TailwindCSS, Jotai, Zustand
 - **Platforms**: macOS and Windows (including Apple Silicon M1, Intel, AMD, and ARM)
@@ -14,12 +15,15 @@ PasteBar is a cross-platform clipboard manager built with Tauri (Rust + TypeScri
 ## Development Commands
 
 ### Prerequisites
+
 First install the Diesel CLI:
+
 ```bash
 cargo install diesel_cli --no-default-features --features sqlite
 ```
 
 ### Main Development Commands
+
 ```bash
 # Development (starts both frontend and backend in dev mode)
 npm start
@@ -48,7 +52,9 @@ npm run version:sync
 ```
 
 ### Frontend Development (packages/pastebar-app-ui/)
+
 The frontend is a workspace package that builds separately:
+
 ```bash
 cd packages/pastebar-app-ui
 npm run dev    # Development server on port 4422
@@ -56,6 +62,7 @@ npm run build  # Build to dist-ui/
 ```
 
 ### Rust/Tauri Development (src-tauri/)
+
 ```bash
 cd src-tauri
 cargo run --no-default-features  # Development mode
@@ -67,6 +74,7 @@ cargo build --release           # Production build
 ### High-Level Structure
 
 **Tauri Architecture**: The app uses Tauri's hybrid architecture where:
+
 - Rust backend handles core functionality (clipboard monitoring, database operations, system integration)
 - TypeScript/React frontend provides the UI
 - Communication happens via Tauri commands and events
@@ -74,17 +82,20 @@ cargo build --release           # Production build
 **Core Components:**
 
 1. **Clipboard Monitoring** (`src-tauri/src/clipboard/mod.rs`)
+
    - Real-time clipboard monitoring using `clipboard-master`
    - Automatic image capture and text processing
    - Language detection for code snippets
    - Configurable exclusion lists and masking
 
 2. **Database Layer** (`src-tauri/src/db.rs` + Diesel)
+
    - SQLite database with migrations in `migrations/`
    - Custom data location support with path transformation
    - Connection pooling with r2d2
 
 3. **System Integration** (`src-tauri/src/main.rs`)
+
    - System tray menu with dynamic content
    - Global hotkeys and window management
    - Platform-specific features (macOS accessibility, Windows compatibility)
@@ -97,16 +108,19 @@ cargo build --release           # Production build
 ### Key Patterns
 
 **Path Transformation System**:
+
 - Images are stored with `{{base_folder}}` placeholders for relative paths
 - `to_relative_image_path()` and `to_absolute_image_path()` handle conversion
 - Enables custom database locations without breaking image references
 
 **Event-Driven Communication**:
+
 - Tauri events for real-time updates between backend and frontend
 - Settings synchronization across multiple windows
 - Menu rebuilding on state changes
 
 **Multi-Window Architecture**:
+
 - Main window (primary interface)
 - History window (clipboard history view)
 - QuickPaste window (contextual paste menu)
@@ -114,6 +128,7 @@ cargo build --release           # Production build
 ### Database Schema
 
 Main entities:
+
 - `items` - Custom clips and menu items
 - `clipboard_history` - Automatic clipboard captures
 - `collections` - Organization containers
@@ -150,35 +165,42 @@ src-tauri/src/
 ## Important Development Notes
 
 ### Settings Management
+
 - Settings are stored as generic key-value pairs in the database
 - Frontend uses `settingsStore.ts` with automatic synchronization
 - Use `updateSetting()` function and include `invoke('build_system_menu')` for settings that affect the system tray
 
 ### Custom Data Locations
+
 - The app supports custom database locations via user settings
 - All file operations must use `get_data_dir()`, `get_clip_images_dir()`, etc.
 - Path transformation ensures image references work across location changes
 
 ### Image Handling
+
 - Images are stored in both thumbnail and full resolution
 - Use path transformation helpers when storing/retrieving image paths
 - Images support relative paths with `{{base_folder}}` placeholders
 
 ### Internationalization
+
 - Backend translations in `src-tauri/src/services/translations/translations.yaml`
 - Frontend translations in `packages/pastebar-app-ui/src/locales/lang/`
 - Use `t()` function in React components and `Translations::get()` in Rust
 
 ### Debug Logging
+
 - Use `debug_output(|| { println!("message") })` in Rust for debug-only logging
 - Debug messages only appear in debug builds, keeping release builds clean
 
 ### System Tray Menu
+
 - Dynamic menu built from database items and settings
 - Rebuild required when items or relevant settings change
 - Use `invoke('build_system_menu')` after operations that affect menu content
 
 ### Database Migrations
+
 - Use Diesel migrations for schema changes
 - Place migration files in `migrations/` directory
 - Run migrations with `npm run diesel:migration:run`

README.md

@@ -1,10 +1,9 @@
 # PasteBar - Limitless, Free Clipboard Manager for Mac and Windows.
+
 <a href="https://www.pastebar.app"><img width="1144" alt="Screenshot 2024-07-25 at 14 11 09" src="https://github.com/user-attachments/assets/ce861bdb-d7df-4944-885e-12d37177e56d"></a>
 
 ![pastebar-screenshot-main-split](https://github.com/user-attachments/assets/c3024edb-67ae-4e92-a02f-a0957fb153a2)
 
-
-
 Effortless Management Of Everything You Copy and Paste. Free and open-source.
 
 Key features are:
@@ -30,8 +29,9 @@ Key features are:
 https://www.pastebar.app
 
 ### Stack
-* **Rust**: Tauri Apps, Diesel ORM, Reqwest, Anyhow, Serde, Tokio.
+
-* **Javascript**: Typescript, React, React Query, Vite, TailwindCSS, Signals, Jotai, Zustand.
+- **Rust**: Tauri Apps, Diesel ORM, Reqwest, Anyhow, Serde, Tokio.
+- **Javascript**: Typescript, React, React Query, Vite, TailwindCSS, Signals, Jotai, Zustand.
 
 # Build Local PasteBar App
 
@@ -43,6 +43,7 @@ $ npm run build
 # Development Start
 
 After cloning run:
+
 ```
 $ cargo install diesel_cli --no-default-features --features sqlite
 ```
@@ -51,5 +52,3 @@ $ cargo install diesel_cli --no-default-features --features sqlite
 $ npm install
 $ npm start
 ```
-
-

custom_db_location_plan.md

@@ -4,65 +4,66 @@ This document outlines the plan to implement the feature allowing users to speci
 
 ## 1. Goals
 
-*   Allow users to specify a custom parent directory for application data via the settings UI.
+- Allow users to specify a custom parent directory for application data via the settings UI.
-*   The application will create and manage a `pastebar-data` subdirectory within the user-specified location.
+- The application will create and manage a `pastebar-data` subdirectory within the user-specified location.
-*   This `pastebar-data` directory will contain the database file (`pastebar-db.data`), the `clip-images` folder, and the `clipboard-images` folder.
+- This `pastebar-data` directory will contain the database file (`pastebar-db.data`), the `clip-images` folder, and the `clipboard-images` folder.
-*   Provide options to either **move** the existing data, **copy** it, or **use the new location without moving/copying**.
+- Provide options to either **move** the existing data, **copy** it, or **use the new location without moving/copying**.
-*   Ensure the application uses the data from the new location after a restart.
+- Ensure the application uses the data from the new location after a restart.
-*   Handle potential errors gracefully and inform the user.
+- Handle potential errors gracefully and inform the user.
-*   Update the application state and backend configuration accordingly.
+- Update the application state and backend configuration accordingly.
 
 ## 2. Backend (Rust - `src-tauri`)
 
 ### 2.1. Configuration (`user_settings_service.rs`)
 
-*   The `UserConfig` struct's `custom_db_path: Option<String>` will now be repurposed to store the path to the **user-selected parent directory**. The application logic will handle appending the `/pastebar-data/` segment. This requires no change to the struct itself, only to how the path is interpreted.
+- The `UserConfig` struct's `custom_db_path: Option<String>` will now be repurposed to store the path to the **user-selected parent directory**. The application logic will handle appending the `/pastebar-data/` segment. This requires no change to the struct itself, only to how the path is interpreted.
 
 ### 2.2. Path Logic (`db.rs` and new helpers)
 
-*   We will introduce new helper functions to consistently resolve data paths, whether default or custom.
+- We will introduce new helper functions to consistently resolve data paths, whether default or custom.
-    *   `get_data_dir() -> PathBuf`: This will be the core helper. It checks for a `custom_db_path` in the settings.
+  - `get_data_dir() -> PathBuf`: This will be the core helper. It checks for a `custom_db_path` in the settings.
-        *   If present, it returns `PathBuf::from(custom_path)`.
+    - If present, it returns `PathBuf::from(custom_path)`.
-        *   If `None`, it returns the default application data directory.
+    - If `None`, it returns the default application data directory.
-    *   `get_db_path()`: This function will be refactored to use `get_data_dir().join("pastebar-db.data")`.
+  - `get_db_path()`: This function will be refactored to use `get_data_dir().join("pastebar-db.data")`.
-    *   `get_clip_images_dir()`: A new helper that returns `get_data_dir().join("clip-images")`.
+  - `get_clip_images_dir()`: A new helper that returns `get_data_dir().join("clip-images")`.
-    *   `get_clipboard_images_dir()`: A new helper that returns `get_data_dir().join("clipboard-images")`.
+  - `get_clipboard_images_dir()`: A new helper that returns `get_data_dir().join("clipboard-images")`.
 
 ### 2.3. New & Updated Tauri Commands (`user_settings_command.rs`)
 
-*   **`cmd_validate_custom_db_path(path: String) -> Result<bool, String>`**
+- **`cmd_validate_custom_db_path(path: String) -> Result<bool, String>`**
-    *   **No change in purpose.** This command will still check if the user-selected directory is valid and writable.
+  - **No change in purpose.** This command will still check if the user-selected directory is valid and writable.
-*   **`cmd_check_custom_data_path(path: String) -> Result<PathStatus, String>`**
+- **`cmd_check_custom_data_path(path: String) -> Result<PathStatus, String>`**
-    *   A new command to check the status of a selected directory. It returns one of the following statuses: `Empty`, `NotEmpty`, `IsPastebarDataAndNotEmpty`.
+  - A new command to check the status of a selected directory. It returns one of the following statuses: `Empty`, `NotEmpty`, `IsPastebarDataAndNotEmpty`.
-*   **`cmd_set_and_relocate_data(new_parent_dir_path: String, operation: String) -> Result<String, String>`** (renamed from `set_and_relocate_db`)
+- **`cmd_set_and_relocate_data(new_parent_dir_path: String, operation: String) -> Result<String, String>`** (renamed from `set_and_relocate_db`)
-    *   `new_parent_dir_path`: The new directory path selected by the user.
+
-    *   `operation`: Either "move", "copy", or "none".
+  - `new_parent_dir_path`: The new directory path selected by the user.
-    *   **Updated Steps:**
+  - `operation`: Either "move", "copy", or "none".
+  - **Updated Steps:**
     1.  Get the source paths:
-            *   Current DB file path.
+        - Current DB file path.
-            *   Current `clip-images` directory path.
+        - Current `clip-images` directory path.
-            *   Current `clipboard-images` directory path.
+        - Current `clipboard-images` directory path.
     2.  Define the new data directory: `let new_data_dir = Path::new(&new_parent_dir_path);`
     3.  Create the new data directory: `fs::create_dir_all(&new_data_dir)`.
     4.  Perform file/directory operations for each item (DB file, `clip-images` dir, `clipboard-images` dir):
-            *   If "move": `fs::rename(source, destination)`.
+        - If "move": `fs::rename(source, destination)`.
-            *   If "copy": `fs::copy` for the file, and a recursive copy function for the directories.
+        - If "copy": `fs::copy` for the file, and a recursive copy function for the directories.
-            *   If "none", do nothing.
+        - If "none", do nothing.
-            *   Handle cases where source items might not exist (e.g., `clip-images` folder hasn't been created yet) by skipping them gracefully.
+        - Handle cases where source items might not exist (e.g., `clip-images` folder hasn't been created yet) by skipping them gracefully.
     5.  If successful, call `user_settings_service::set_custom_db_path(&new_parent_dir_path)`.
     6.  Return a success or error message.
 
-*   **`cmd_revert_to_default_data_location() -> Result<String, String>`** (renamed and simplified)
+- **`cmd_revert_to_default_data_location() -> Result<String, String>`** (renamed and simplified)
-    *   **Updated Steps:**
+  - **Updated Steps:**
     1.  Call `user_settings_service::remove_custom_db_path()` to clear the custom data path setting.
     2.  Return a success message indicating the setting has been removed.
 
 ## 3. Frontend (React)
 
-*   The UI has been updated to refer to "Custom Application Data Location" instead of "Custom Database Location".
+- The UI has been updated to refer to "Custom Application Data Location" instead of "Custom Database Location".
-*   A third radio button option, "Use new location", has been added.
+- A third radio button option, "Use new location", has been added.
-*   The `handleBrowse` function now calls the `cmd_check_custom_data_path` command to analyze the selected directory and prompts the user accordingly.
+- The `handleBrowse` function now calls the `cmd_check_custom_data_path` command to analyze the selected directory and prompts the user accordingly.
-*   The `settingsStore.ts` has been updated to support the "none" operation.
+- The `settingsStore.ts` has been updated to support the "none" operation.
 
 ## 4. User Interaction Flow (Mermaid Diagram)
 
@@ -109,23 +110,23 @@ graph TD
 
 The following changes have been implemented:
 
-*   **`packages/pastebar-app-ui/src/pages/settings/UserPreferences.tsx`**:
+- **`packages/pastebar-app-ui/src/pages/settings/UserPreferences.tsx`**:
-    *   Renamed "Custom Database Location" to "Custom Application Data Location".
+  - Renamed "Custom Database Location" to "Custom Application Data Location".
-    *   Added a third radio button for the "Use new location" option.
+  - Added a third radio button for the "Use new location" option.
-    *   Updated the `handleBrowse` function to call the new `cmd_check_custom_data_path` command and handle the different path statuses with user prompts.
+  - Updated the `handleBrowse` function to call the new `cmd_check_custom_data_path` command and handle the different path statuses with user prompts.
-*   **`packages/pastebar-app-ui/src/store/settingsStore.ts`**:
+- **`packages/pastebar-app-ui/src/store/settingsStore.ts`**:
-    *   Updated the `applyCustomDbPath` function to accept the "none" operation.
+  - Updated the `applyCustomDbPath` function to accept the "none" operation.
-    *   Updated the `revertToDefaultDbPath` function to call the renamed backend command.
+  - Updated the `revertToDefaultDbPath` function to call the renamed backend command.
-*   **`src-tauri/src/commands/user_settings_command.rs`**:
+- **`src-tauri/src/commands/user_settings_command.rs`**:
-    *   Added the `cmd_check_custom_data_path` command.
+  - Added the `cmd_check_custom_data_path` command.
-    *   Renamed `cmd_set_and_relocate_db` to `cmd_set_and_relocate_data` and updated its logic to handle the "none" operation and the new data directory structure.
+  - Renamed `cmd_set_and_relocate_db` to `cmd_set_and_relocate_data` and updated its logic to handle the "none" operation and the new data directory structure.
-    *   Renamed `cmd_revert_to_default_db_location` to `cmd_revert_to_default_data_location` and updated its logic.
+  - Renamed `cmd_revert_to_default_db_location` to `cmd_revert_to_default_data_location` and updated its logic.
-*   **`src-tauri/src/db.rs`**:
+- **`src-tauri/src/db.rs`**:
-    *   Refactored the `get_data_dir` function to no longer automatically append `pastebar-data`.
+  - Refactored the `get_data_dir` function to no longer automatically append `pastebar-data`.
-    *   Added `get_clip_images_dir` and `get_clipboard_images_dir` helper functions.
+  - Added `get_clip_images_dir` and `get_clipboard_images_dir` helper functions.
-*   **`src-tauri/src/main.rs`**:
+- **`src-tauri/src/main.rs`**:
-    *   Registered the new and renamed commands in the `invoke_handler`.
+  - Registered the new and renamed commands in the `invoke_handler`.
-*   **`src-tauri/Cargo.toml`**:
+- **`src-tauri/Cargo.toml`**:
-    *   Added the `fs_extra` dependency for recursive directory copying.
+  - Added the `fs_extra` dependency for recursive directory copying.
-*   **`src-tauri/src/services/items_service.rs`** and **`src-tauri/src/services/history_service.rs`**:
+- **`src-tauri/src/services/items_service.rs`** and **`src-tauri/src/services/history_service.rs`**:
-    *   Updated to use the new `get_clip_images_dir` and `get_clipboard_images_dir` helper functions.
+  - Updated to use the new `get_clip_images_dir` and `get_clipboard_images_dir` helper functions.

packages/pastebar-app-ui/assets/markdown/markdown.d.ts

@@ -2,8 +2,8 @@
  * parse reads markdown source at s and converts it to HTML.
  * When output is a byte array, it will be a reference.
  */
-export function parse(s :Source, o? :ParseOptions & { bytes? :never|false }) :string
+export function parse(s: Source, o?: ParseOptions & { bytes?: never | false }): string
-export function parse(s :Source, o? :ParseOptions & { bytes :true }) :Uint8Array
+export function parse(s: Source, o?: ParseOptions & { bytes: true }): Uint8Array
 
 /** Markdown source code can be provided as a JavaScript string or UTF8 encoded data */
 type Source = string | ArrayLike<number>
@@ -11,10 +11,10 @@ type Source = string | ArrayLike<number>
 /** Options for the parse function */
 export interface ParseOptions {
   /** Customize parsing. Defaults to ParseFlags.DEFAULT */
-  parseFlags? :ParseFlags
+  parseFlags?: ParseFlags
 
   /** Select output format. Defaults to "html" */
-  format? : "html" | "xhtml"
+  format?: 'html' | 'xhtml'
 
   /**
    * bytes=true causes parse() to return the result as a Uint8Array instead of a string.
@@ -26,10 +26,10 @@ export interface ParseOptions {
    * This only provides a performance benefit when you never need to convert the output
    * to a string. In most cases you're better off leaving this unset or false.
    */
-  bytes? :boolean
+  bytes?: boolean
 
   /** Allow "javascript:" in links */
-  allowJSURIs? :boolean
+  allowJSURIs?: boolean
 
   /**
    * Optional callback which if provided is called for each code block.
@@ -44,16 +44,19 @@ export interface ParseOptions {
    * Note that use of this callback has an adverse impact on performance as it casues
    * calls and data to be bridged between WASM and JS on every invocation.
    */
-  onCodeBlock? :(langname :string, body :UTF8Bytes) => Uint8Array|string|null|undefined
+  onCodeBlock?: (
+    langname: string,
+    body: UTF8Bytes
+  ) => Uint8Array | string | null | undefined
 
   /** @depreceated use "bytes" instead (v1.1.1) */
-  asMemoryView? :boolean
+  asMemoryView?: boolean
 }
 
 /** UTF8Bytes is a Uint8Array representing UTF8 text  */
 export interface UTF8Bytes extends Uint8Array {
   /** toString returns a UTF8 decoded string (lazily decoded and cached) */
-  toString() :string
+  toString(): string
 }
 
 /** Flags that customize Markdown parsing */

packages/pastebar-app-ui/drop-image.html

@@ -1,11 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PasteBar Drop Zone</title>
     <style>
-    body, html {
+      body,
+      html {
         margin: 0;
         padding: 0;
         height: 100%;
@@ -63,23 +64,23 @@
         font-weight: bold;
       }
     </style>
-</head>
+  </head>
-<body>
+  <body>
     <div class="drop-zone" id="droptarget">
       <div class="drop-zone-text">Drag and drop image file here</div>
     </div>
 
     <script>
-    const target = document.getElementById("droptarget");
+      const target = document.getElementById('droptarget')
-    target.addEventListener("dragenter", (event) => {
+      target.addEventListener('dragenter', event => {
-      if (event.target.classList.contains("drop-zone")) {
+        if (event.target.classList.contains('drop-zone')) {
-        target.classList.add("hover");
+          target.classList.add('hover')
         }
-    });
+      })
 
-    target.addEventListener("dragleave", (event) => {
+      target.addEventListener('dragleave', event => {
-        target.classList.remove("hover");
+        target.classList.remove('hover')
-    });
+      })
     </script>
-</body>
+  </body>
 </html>

packages/pastebar-app-ui/drop-path.html

@@ -1,11 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PasteBar Drop Zone</title>
     <style>
-    body, html {
+      body,
+      html {
         margin: 0;
         padding: 0;
         height: 100%;
@@ -63,23 +64,23 @@
         font-weight: bold;
       }
     </style>
-</head>
+  </head>
-<body>
+  <body>
     <div class="drop-zone" id="droptarget">
       <div class="drop-zone-text">Drag and drop an app, file or folder</div>
     </div>
 
     <script>
-    const target = document.getElementById("droptarget");
+      const target = document.getElementById('droptarget')
-    target.addEventListener("dragenter", (event) => {
+      target.addEventListener('dragenter', event => {
-      if (event.target.classList.contains("drop-zone")) {
+        if (event.target.classList.contains('drop-zone')) {
-        target.classList.add("hover");
+          target.classList.add('hover')
         }
-    });
+      })
 
-    target.addEventListener("dragleave", (event) => {
+      target.addEventListener('dragleave', event => {
-        target.classList.remove("hover");
+        target.classList.remove('hover')
-    });
+      })
     </script>
-</body>
+  </body>
 </html>

packages/pastebar-app-ui/history-index.html

@@ -1,40 +1,76 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <!-- react-debugger, run on dev: npx react-devtools -->
     <!-- <script src="http://localhost:8097"></script> -->
-    <link rel="preload" href="src/assets/TwemojiCountryFlags.woff2" as="font" type="font/woff2" crossorigin />
+    <link
-    <link rel="preload" href="src/assets/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin />
+      rel="preload"
-    <link rel="preload" href="src/assets/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin />
+      href="src/assets/TwemojiCountryFlags.woff2"
-    <link rel="preload" href="src/assets/Inter-SemiBold.woff2" as="font" type="font/woff2" crossorigin />
+      as="font"
-    <link rel="preload" href="src/assets/SourceCodePro-Regular.otf.woff2" as="font" type="font/woff2" crossorigin />
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="src/assets/Inter-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="src/assets/Inter-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="src/assets/Inter-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="src/assets/SourceCodePro-Regular.otf.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script defer async data-domain="app.pastebar.app" src="https://stats.pastebar.app/js/script.tagged-events.local.js"></script>
+    <script
+      defer
+      async
+      data-domain="app.pastebar.app"
+      src="https://stats.pastebar.app/js/script.tagged-events.local.js"
+    ></script>
     <title>PasteBar App</title>
   </head>
   <body class="bg-transparent">
     <div id="root"></div>
     <script>
-      window.isHistoryWindow = true;
+      window.isHistoryWindow = true
-      window.isMainWindow = false;
+      window.isMainWindow = false
     </script>
     <script type="module" src="src/main.tsx"></script>
     <script>
       function handleDrop(e) {
-        e = e || event;
+        e = e || event
 
-        var isWindows = navigator.platform.indexOf('Win') > -1;
+        var isWindows = navigator.platform.indexOf('Win') > -1
-        var isDropZone = e.target.classList.contains('drop-zone');
+        var isDropZone = e.target.classList.contains('drop-zone')
-        var isNotInputOrTextarea = e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA";
+        var isNotInputOrTextarea =
+          e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA'
 
         if ((isWindows || isNotInputOrTextarea) && !isDropZone) {
-          e.preventDefault();
+          e.preventDefault()
         }
       }
 
-      window.addEventListener("dragover", handleDrop, false);
+      window.addEventListener('dragover', handleDrop, false)
-      window.addEventListener("drop", handleDrop, false);
+      window.addEventListener('drop', handleDrop, false)
     </script>
   </body>
 </html>

packages/pastebar-app-ui/index.html

@@ -1,41 +1,77 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <!-- react-debugger, run on dev: npx react-devtools -->
     <!-- <script src="http://localhost:8097"></script> -->
-    <link rel="preload" href="src/assets/TwemojiCountryFlags.woff2" as="font" type="font/woff2" crossorigin />
+    <link
-    <link rel="preload" href="src/assets/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin />
+      rel="preload"
-    <link rel="preload" href="src/assets/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin />
+      href="src/assets/TwemojiCountryFlags.woff2"
-    <link rel="preload" href="src/assets/Inter-SemiBold.woff2" as="font" type="font/woff2" crossorigin />
+      as="font"
-    <link rel="preload" href="src/assets/SourceCodePro-Regular.otf.woff2" as="font" type="font/woff2" crossorigin />
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="src/assets/Inter-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="src/assets/Inter-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="src/assets/Inter-SemiBold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="src/assets/SourceCodePro-Regular.otf.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script defer async data-domain="app.pastebar.app" src="https://stats.pastebar.app/js/script.tagged-events.local.js"></script>
+    <script
+      defer
+      async
+      data-domain="app.pastebar.app"
+      src="https://stats.pastebar.app/js/script.tagged-events.local.js"
+    ></script>
     <title>PasteBar App</title>
   </head>
   <body class="bg-transparent">
     <div id="root"></div>
     <script>
-      window.isMainWindow = true;
+      window.isMainWindow = true
-      window.isHistoryWindow = false;
+      window.isHistoryWindow = false
     </script>
     <script type="module" src="src/main.tsx"></script>
     <script src="assets/markdown/markdown.js" async></script>
     <script>
       function handleDrop(e) {
-        e = e || event;
+        e = e || event
 
-        var isWindows = navigator.platform.indexOf('Win') > -1;
+        var isWindows = navigator.platform.indexOf('Win') > -1
-        var isDropZone = e.target.classList.contains('drop-zone');
+        var isDropZone = e.target.classList.contains('drop-zone')
-        var isNotInputOrTextarea = e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA";
+        var isNotInputOrTextarea =
+          e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA'
 
         if ((isWindows || isNotInputOrTextarea) && !isDropZone) {
-          e.preventDefault();
+          e.preventDefault()
         }
       }
 
-      window.addEventListener("dragover", handleDrop, false);
+      window.addEventListener('dragover', handleDrop, false)
-      window.addEventListener("drop", handleDrop, false);
+      window.addEventListener('drop', handleDrop, false)
     </script>
   </body>
 </html>

packages/pastebar-app-ui/quickpaste-index.html

@@ -1,28 +1,34 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <!-- react-debugger, run on dev: npx react-devtools -->
     <!-- <script src="http://localhost:8097"></script> -->
-    <link rel="preload" href="src/assets/SourceCodePro-Regular.otf.woff2" as="font" type="font/woff2" crossorigin />
+    <link
+      rel="preload"
+      href="src/assets/SourceCodePro-Regular.otf.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PasteBar App</title>
   </head>
   <body class="bg-transparent">
     <div id="root"></div>
     <script>
-      window.isHistoryWindow = false;
+      window.isHistoryWindow = false
-      window.isQuickPasteWindow = true;
+      window.isQuickPasteWindow = true
-      window.isMainWindow = false;
+      window.isMainWindow = false
     </script>
     <script type="module" src="src/quickpaste-main.tsx"></script>
     <script>
       function handleDrop(e) {
-        e.preventDefault();
+        e.preventDefault()
       }
 
-      window.addEventListener("dragover", handleDrop, false);
+      window.addEventListener('dragover', handleDrop, false)
-      window.addEventListener("drop", handleDrop, false);
+      window.addEventListener('drop', handleDrop, false)
     </script>
   </body>
 </html>

packages/pastebar-app-ui/scripts/twSafelistGenerator/generator.js

@@ -10,26 +10,25 @@ function cartesian(array) {
 function deepKeys(object, separator = '.', prefix = '') {
   return Object.keys(object).reduce((result, key) => {
     if (Array.isArray(object[key])) {
-            return [...result, prefix + key];
+      return [...result, prefix + key]
     } else if (typeof object[key] === 'object' && object[key] !== null) {
-            return [...result, ...deepKeys(object[key], separator, prefix + key + separator)];
+      return [...result, ...deepKeys(object[key], separator, prefix + key + separator)]
     }
 
-        return [...result, prefix + key];
+    return [...result, prefix + key]
-  }, []);
+  }, [])
 }
 
-const extractTokens = pattern =>
+const extractTokens = pattern => pattern.split(/(?={[^}]+})|(?<={[^}]+})/)
-    pattern.split(/(?={[^}]+})|(?<={[^}]+})/)
 
 const expandTokens = theme => tokens => {
   return tokens.map(token => {
-        if(token.startsWith('{')) {
+    if (token.startsWith('{')) {
       const cleanToken = token.replace(/{|}/g, '')
-            if(cleanToken.includes('.')) {
+      if (cleanToken.includes('.')) {
         const color = cleanToken.split('.')[1]
         const colorToken = {
-                    [color]: theme(cleanToken, {})
+          [color]: theme(cleanToken, {}),
         }
         return deepKeys(colorToken, '-')
       }
@@ -40,10 +39,8 @@ const expandTokens = theme => tokens => {
   })
 }
 
-
 const mapToClasses = expanded =>
-    expanded.map(values =>
+  expanded.map(values => values.join('').replace('-DEFAULT', ''))
-        values.join('').replace('-DEFAULT', ''))
 
 module.exports = theme => patterns => {
   return patterns // ["text-{gray}", …]
@@ -52,4 +49,3 @@ module.exports = theme => patterns => {
     .map(cartesian) // [[["text", "gray-100"], ["text", "gray-200"], …], …]
     .flatMap(mapToClasses) // ["text-gray-100", "text-gray-200",…]
 }
-    

packages/pastebar-app-ui/src/App.tsx

@@ -190,7 +190,8 @@ function App() {
             settings.isShowDisabledCollectionsOnNavBarMenu?.valueBool,
           userSelectedLanguage: settings.userSelectedLanguage?.valueText,
           isNoteIconsEnabled: settings.isNoteIconsEnabled?.valueBool ?? true,
-          defaultNoteIconType: settings.defaultNoteIconType?.valueText ?? 'MessageSquareText',
+          defaultNoteIconType:
+            settings.defaultNoteIconType?.valueText ?? 'MessageSquareText',
           isAppReady: true,
         })
         settingsStore.initConstants({

packages/pastebar-app-ui/src/components/atoms/date-picker/custom-header.tsx

@@ -1,6 +1,7 @@
-import { ReactDatePickerCustomHeaderProps } from "react-datepicker"
+import { ReactDatePickerCustomHeaderProps } from 'react-datepicker'
-import NativeSelect from "../../molecules/native-select"
+
-import { getYearRange, monthNames } from "./utils"
+import NativeSelect from '../../molecules/native-select'
+import { getYearRange, monthNames } from './utils'
 
 const CustomHeader = ({
   date,
@@ -16,9 +17,9 @@ const CustomHeader = ({
       <div className="flex flex-1 items-center justify-end gap-3">
         <NativeSelect
           defaultValue={monthName}
-          onValueChange={(v) => changeMonth(monthNames.indexOf(v))}
+          onValueChange={v => changeMonth(monthNames.indexOf(v))}
         >
-          {monthNames.map((month) => (
+          {monthNames.map(month => (
             <NativeSelect.Item key={month} value={month}>
               {month}
             </NativeSelect.Item>
@@ -28,9 +29,9 @@ const CustomHeader = ({
       <div className="flex flex-1 items-center justify-start gap-3">
         <NativeSelect
           defaultValue={year.toString()}
-          onValueChange={(v) => changeYear(parseInt(v, 10))}
+          onValueChange={v => changeYear(parseInt(v, 10))}
         >
-          {getYearRange().map((year) => (
+          {getYearRange().map(year => (
             <NativeSelect.Item key={year} value={year.toString()}>
               {year.toString()}
             </NativeSelect.Item>

packages/pastebar-app-ui/src/components/atoms/date-picker/utils.ts

@@ -10,16 +10,16 @@ export const getYearRange = (step = 20) =>
   range(new Date().getFullYear() - step, new Date().getFullYear() + step)
 
 export const monthNames = [
-  "January",
+  'January',
-  "February",
+  'February',
-  "March",
+  'March',
-  "April",
+  'April',
-  "May",
+  'May',
-  "June",
+  'June',
-  "July",
+  'July',
-  "August",
+  'August',
-  "September",
+  'September',
-  "October",
+  'October',
-  "November",
+  'November',
-  "December",
+  'December',
 ]

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/adjustments-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const AdjustmentsIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/arrow-down-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const ArrowDownIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/arrow-left-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ArrowLeftIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (
@@ -15,12 +16,7 @@ const ArrowLeftIcon: React.FC<IconProps> = ({
       xmlns="http://www.w3.org/2000/svg"
       {...attributes}
     >
-      <path
+      <path d="M3.75 10H16.875" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
-        d="M3.75 10H16.875"
-        stroke={color}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
       <path
         d="M8.125 5L3.125 10L8.125 15"
         stroke={color}

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/arrow-right-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ArrowRightIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/arrow-top-right-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ArrowTopRightIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/arrow-up-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const ArrowUpIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/back-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const BackIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/backspace-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const BackspaceIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/bell-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const BellIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/bell-noti-icon/index.tsx

@@ -1,14 +1,15 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 type IBellNotiIconProps = IconProps & {
   accentColor?: string
 }
 
 const BellNotiIcon: React.FC<IBellNotiIconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
-  accentColor = "#F43F5E",
+  accentColor = '#F43F5E',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/bell-off-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const BellOffIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/building-tax-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const IconBuildingTax: React.FC<IconProps> = ({
-  size = "20px",
+  size = '20px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/buildings-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const BuildingsIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/calendar-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const CalendarIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/cancel-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CancelIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/cart-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CartIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/cash-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CashIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/channels-icon.tsx

@@ -1,10 +1,10 @@
-import React from "react"
+import React from 'react'
 
-import IconProps from "./types/icon-type"
+import IconProps from './types/icon-type'
 
 const ChannelsIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/check-circle-fill-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CheckCircleFillIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/check-circle-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CheckCircleIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/check-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const CheckIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/chevron-down.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const ChevronDownIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/chevron-left-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ChevronLeftIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/chevron-right-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ChevronRightIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/chevron-up.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const ChevronUpIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/circle-quarter-solid/index.tsx

@@ -1,9 +1,10 @@
-import IconProps from "../types/icon-type"
+import React from 'react'
-import React from "react"
+
+import IconProps from '../types/icon-type'
 
 const CircleQuarterSolid: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/clipboard-copy-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ClipboardCopyIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/clock-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ClockIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/coins-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CoinsIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/corner-down-right-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CornerDownRightIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/cross-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CrossIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/crosshair-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CrosshairIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/customer-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const CustomerIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/details-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const DetailsIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/discord-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const DiscordIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/dollar-sign-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const DollarSignIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/down-left/index.tsx

@@ -1,10 +1,8 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
 
-const DownLeftIcon: React.FC<IconProps> = ({
+import IconProps from '../types/icon-type'
-  size = "16",
+
-  color = "#9CA3AF",
+const DownLeftIcon: React.FC<IconProps> = ({ size = '16', color = '#9CA3AF' }) => {
-}) => {
   return (
     <svg
       width={size}

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/download-icon.tsx

@@ -1,9 +1,10 @@
-import { FC } from "react"
+import { FC } from 'react'
-import IconProps from "./types/icon-type"
 
-const DownloadIcon: FC<IconProps> = (props) => {
+import IconProps from './types/icon-type'
+
+const DownloadIcon: FC<IconProps> = props => {
   const { fill, size, ...attributes } = props
-  const line = fill || "#111827"
+  const line = fill || '#111827'
 
   return (
     <svg

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/duplicate-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const DuplicateIcon: React.FC<IconProps> = ({
-  size = "20px",
+  size = '20px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/edit-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const EditIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/edit-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const EditIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/ellipsis-vertical-icon/index.tsx

@@ -1,8 +1,8 @@
-import IconProps from "../types/icon-type"
+import IconProps from '../types/icon-type'
 
 const EllipsisVerticalIcon = ({
   size = 20,
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }: IconProps) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/export-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ExportIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/eye-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const EyeIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/eye-off-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const EyeOffIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/fast-delivery-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const FastDeliveryIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/file-icon.tsx

@@ -1,9 +1,10 @@
-import { FC } from "react"
+import { FC } from 'react'
-import IconProps from "./types/icon-type"
 
-const FileIcon: FC<IconProps> = (props) => {
+import IconProps from './types/icon-type'
+
+const FileIcon: FC<IconProps> = props => {
   const { fill, size, ...attributes } = props
-  const line = fill || "#2DD4BF"
+  const line = fill || '#2DD4BF'
   return (
     <svg
       width={size || 20}

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/folder-open-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const FolderOpenIcon: React.FC<IconProps> = ({
-  size = "20px",
+  size = '20px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/gear-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const GearIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/gift-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const GiftIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/grip-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const GripIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/happy-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const HappyIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/help-circle.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const HelpCircleIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/image-placeholder-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ImagePlaceholderIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/info-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const InfoIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/key-icon.tsx

@@ -1,10 +1,10 @@
-import React from "react"
+import React from 'react'
 
-import IconProps from "./types/icon-type"
+import IconProps from './types/icon-type'
 
 const KeyIcon: React.FC<IconProps> = ({
-  size = "32px",
+  size = '32px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/list-arrow-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ListArrowIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/list-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const ListIcon: React.FC<IconProps> = ({
-  size = "20px",
+  size = '20px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/lock-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const LockIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/log-out-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const SignOutIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/long-arrow-right-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const LongArrowRightIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   const width = +size * 2

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/mail-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const MailIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/map-pin-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const MapPinIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/package-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const PackageIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/percent-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const PercentIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/plus-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const PlusIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/pointer-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const PointerIcon: React.FC<IconProps> = ({
-  size = "16",
+  size = '16',
-  color = "#9CA3AF",
+  color = '#9CA3AF',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/publish-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const PublishIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/refresh-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const RefreshIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/refund.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const RefundIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/reorder-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const ReorderIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/sad-face-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const SadFaceIcon: React.FC<IconProps> = ({
-  size = "20",
+  size = '20',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/sale-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const SaleIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/search-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const SearchIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/send-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const SendIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/sided-mouth-face/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const SidedMouthFaceIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/sorting-icon/index.tsx

@@ -1,16 +1,17 @@
-import clsx from "clsx"
+import React from 'react'
-import React from "react"
+import clsx from 'clsx'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 type SortingIconProps = {
   ascendingColor?: string
   descendingColor?: string
-  isSorted?: "asc" | "desc" | false
+  isSorted?: 'asc' | 'desc' | false
 } & IconProps
 
 const SortingIcon: React.FC<SortingIconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ascendingColor,
   descendingColor,
   isSorted = false,
@@ -28,8 +29,8 @@ const SortingIcon: React.FC<SortingIconProps> = ({
       <path
         d="M4.66602 10L7.99935 13.3333L11.3327 10"
         className={clsx({
-          "stroke-grey-40": isSorted !== "desc",
+          'stroke-grey-40': isSorted !== 'desc',
-          "stroke-current": isSorted === "desc",
+          'stroke-current': isSorted === 'desc',
         })}
         stroke={descendingColor || color}
         strokeWidth="1.5"
@@ -40,8 +41,8 @@ const SortingIcon: React.FC<SortingIconProps> = ({
         d="M4.66602 6.00008L7.99935 2.66675L11.3327 6.00008"
         stroke={ascendingColor || color}
         className={clsx({
-          "stroke-grey-40": isSorted !== "asc",
+          'stroke-grey-40': isSorted !== 'asc',
-          "stroke-current": isSorted === "asc",
+          'stroke-current': isSorted === 'asc',
         })}
         strokeWidth="1.5"
         strokeLinecap="round"

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/sparkles-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const SparklesIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/stop-icon.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "./types/icon-type"
+
+import IconProps from './types/icon-type'
 
 const StopIcon: React.FC<IconProps> = ({
-  size = "20px",
+  size = '20px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/swatch-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const SwatchIcon: React.FC<IconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/tag-dot-icon/index.tsx

@@ -1,14 +1,15 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 type TagDotIconProps = IconProps & {
   outerColor: string
 }
 
 const TagDotIcon: React.FC<TagDotIconProps> = ({
-  size = "24px",
+  size = '24px',
-  color = "#E5484D",
+  color = '#E5484D',
-  outerColor = "transparent",
+  outerColor = 'transparent',
   ...attributes
 }) => {
   return (

packages/pastebar-app-ui/src/components/atoms/fundamentals/icons/tag-icon/index.tsx

@@ -1,9 +1,10 @@
-import React from "react"
+import React from 'react'
-import IconProps from "../types/icon-type"
+
+import IconProps from '../types/icon-type'
 
 const TagIcon: React.FC<IconProps> = ({
-  size = "24",
+  size = '24',
-  color = "currentColor",
+  color = 'currentColor',
   ...attributes
 }) => {
   return (