Support ticket json data

Can you design with neomorphik style

238d ago

I'll redesign the support ticket form with a neumorphic style using Mantine UI, Formik, and Yup.

Neumorphic Design Implementation

I've redesigned the support ticket form with a neumorphic style while maintaining the Mantine UI, Formik, and Yup integration. Here's a breakdown of the neumorphic design elements:

Key Neumorphic Design Features

Soft Shadow Effects:
- Light shadows on one side and dark shadows on the opposite side create the characteristic neumorphic "extrusion" effect
- Inner shadows for input fields to create a "pressed in" appearance
Monochromatic Color Scheme:
- Soft blue-gray background (#e0e5ec)
- Subtle blue accent color for buttons and interactive elements
- Low contrast text colors for a softer appearance
Rounded Corners:
- Consistent border radius throughout the UI
- Larger radius for cards, smaller for input elements
Custom Form Elements:
- Neumorphic-styled input fields with inset shadows
- Custom button with hover and active states that simulate physical interaction
- Custom loading animation

CSS Implementation

The neumorphic effect is achieved through carefully crafted CSS:

/* Base neumorphic card */
.neumorphic-card {
  background-color: var(--neumorphic-bg);
  border-radius: var(--neumorphic-radius);
  box-shadow: 10px 10px 20px var(--neumorphic-dark-shadow),
              -10px -10px 20px var(--neumorphic-light-shadow);
}

/* Inset neumorphic effect for inputs */
.neumorphic-input {
  box-shadow: inset 5px 5px 10px var(--neumorphic-dark-shadow),
              inset -5px -5px 10px var(--neumorphic-light-shadow);
}

/* Neumorphic button with state changes */
.neumorphic-button {
  box-shadow: 5px 5px 10px var(--neumorphic-dark-shadow),
              -5px -5px 10px var(--neumorphic-light-shadow);
}

.neumorphic-button:active {
  box-shadow: inset 3px 3px 6px var(--neumorphic-dark-shadow),
              inset -3px -3px 6px var(--neumorphic-light-shadow);
}

Functionality

The form maintains all the same functionality as before:

Form Validation with Formik and Yup
Image Upload capability
Form Submission via server action
Loading States with custom neumorphic-styled loader
Responsive Design that works on all screen sizes

JSON Data Structure

The JSON data structure remains unchanged:

{
  "ticket": {
    "id": "TICKET-123456",
    "title": "Cannot access my account",
    "body": "I've been trying to log in to my account for the past two days...",
    "status": "open",
    "createdAt": "2025-05-14T20:28:25.000Z",
    "imageUrl": "https://example.com/uploads/screenshot.png",
    "userId": "user-123"
  },
  "adminNotification": {
    "type": "new_support_ticket",
    "ticket": {
      "id": "TICKET-123456",
      "title": "Cannot access my account",
      "createdAt": "2025-05-14T20:28:25.000Z"
    },
    "message": "New support ticket: Cannot access my account"
  }
}

Required Dependencies

For this implementation, you'll need to install the following packages:

npm install @mantine/core @mantine/hooks @mantine/notifications @tabler/icons-react formik yup

For the best neumorphic effect, I recommend using the Poppins font, which you can add to your project by including this in your <head>:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

238d ago

I need blue & orange color combination with neomorphik

238d ago

I'll update the neumorphic design with a blue and orange color combination while maintaining the soft, extruded look of neumorphism.

Blue & Orange Neumorphic Design

I've redesigned the support ticket form with a blue and orange color combination while maintaining the neumorphic style. Here's a breakdown of the design elements:

Color Scheme

Blue Colors:
- Primary Blue: #2563eb - Used for the main title and button background
- Light Blue: #3b82f6 - Used for hover states and gradients
- Dark Blue: #1d4ed8 - Used for button gradients and text
- Blue Text: #1e3a8a - Used for labels and headings
Orange Accents:
- Primary Orange: #f97316 - Used for accents and highlights
- Light Orange: #fb923c - Used for hover states
- Dark Orange: #ea580c - Used for error states
Background & Shadows:
- Background: #e6eef8 - A light blue-tinted background for the neumorphic effect
- Light Shadow: rgba(255, 255, 255, 0.8) - Creates the light side of the neumorphic effect
- Dark Shadow: rgba(163, 177, 198, 0.6) - Creates the dark side of the neumorphic effect

Neumorphic Design Elements

Card Design:
- Soft shadows creating an extruded effect
- Blue and orange gradient accent line at the top of the card
- Rounded corners for a modern look
Input Fields:
- Inset shadows creating a "pressed in" appearance
- Orange accent border on focus
- Blue labels with orange required asterisks
Submit Button:
- Blue gradient background
- Subtle shine animation on hover
- Pressed effect on active state
- Orange accent in the loading spinner
Typography:
- Blue headings
- Dark blue text for important content
- Lighter text for descriptions and hints

Enhanced Visual Effects

Gradient Accents:
- Blue to orange gradient at the top of the card
- Blue gradient for the button background
Hover Animations:
- Subtle shine effect on the button
- Elevation change on hover (button rises slightly)
- Pressed effect on click
Focus States:
- Orange accent border on input focus
- Changed shadow depth on focus
Error States:
- Orange text and border for validation errors

Responsive Design

The design is fully responsive and will adapt to different screen sizes:

Adjusted padding and margins on smaller screens
Maintained readability and usability across devices

Required Dependencies

For this implementation, you'll need to install the following packages:

npm install @mantine/core @mantine/hooks @mantine/notifications @tabler/icons-react formik yup

The design also uses the Poppins font, which is loaded in the layout component.

238d ago

also include a a list of support, in top keep in button of table list, when click the button open this form inside modal

238d ago

Can you design with neomorphik style

238d ago

I'll redesign the support ticket form with a neumorphic style using Mantine UI, Formik, and Yup.

Neumorphic Design Implementation

I've redesigned the support ticket form with a neumorphic style while maintaining the Mantine UI, Formik, and Yup integration. Here's a breakdown of the neumorphic design elements:

Key Neumorphic Design Features

Soft Shadow Effects:
- Light shadows on one side and dark shadows on the opposite side create the characteristic neumorphic "extrusion" effect
- Inner shadows for input fields to create a "pressed in" appearance
Monochromatic Color Scheme:
- Soft blue-gray background (#e0e5ec)
- Subtle blue accent color for buttons and interactive elements
- Low contrast text colors for a softer appearance
Rounded Corners:
- Consistent border radius throughout the UI
- Larger radius for cards, smaller for input elements
Custom Form Elements:
- Neumorphic-styled input fields with inset shadows
- Custom button with hover and active states that simulate physical interaction
- Custom loading animation

CSS Implementation

The neumorphic effect is achieved through carefully crafted CSS:

/* Base neumorphic card */
.neumorphic-card {
  background-color: var(--neumorphic-bg);
  border-radius: var(--neumorphic-radius);
  box-shadow: 10px 10px 20px var(--neumorphic-dark-shadow),
              -10px -10px 20px var(--neumorphic-light-shadow);
}

/* Inset neumorphic effect for inputs */
.neumorphic-input {
  box-shadow: inset 5px 5px 10px var(--neumorphic-dark-shadow),
              inset -5px -5px 10px var(--neumorphic-light-shadow);
}

/* Neumorphic button with state changes */
.neumorphic-button {
  box-shadow: 5px 5px 10px var(--neumorphic-dark-shadow),
              -5px -5px 10px var(--neumorphic-light-shadow);
}

.neumorphic-button:active {
  box-shadow: inset 3px 3px 6px var(--neumorphic-dark-shadow),
              inset -3px -3px 6px var(--neumorphic-light-shadow);
}

Functionality

The form maintains all the same functionality as before:

Form Validation with Formik and Yup
Image Upload capability
Form Submission via server action
Loading States with custom neumorphic-styled loader
Responsive Design that works on all screen sizes

JSON Data Structure

The JSON data structure remains unchanged:

{
  "ticket": {
    "id": "TICKET-123456",
    "title": "Cannot access my account",
    "body": "I've been trying to log in to my account for the past two days...",
    "status": "open",
    "createdAt": "2025-05-14T20:28:25.000Z",
    "imageUrl": "https://example.com/uploads/screenshot.png",
    "userId": "user-123"
  },
  "adminNotification": {
    "type": "new_support_ticket",
    "ticket": {
      "id": "TICKET-123456",
      "title": "Cannot access my account",
      "createdAt": "2025-05-14T20:28:25.000Z"
    },
    "message": "New support ticket: Cannot access my account"
  }
}

Required Dependencies

For this implementation, you'll need to install the following packages:

npm install @mantine/core @mantine/hooks @mantine/notifications @tabler/icons-react formik yup

For the best neumorphic effect, I recommend using the Poppins font, which you can add to your project by including this in your <head>:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

238d ago

I need blue & orange color combination with neomorphik

238d ago

I'll update the neumorphic design with a blue and orange color combination while maintaining the soft, extruded look of neumorphism.

Blue & Orange Neumorphic Design

I've redesigned the support ticket form with a blue and orange color combination while maintaining the neumorphic style. Here's a breakdown of the design elements:

Color Scheme

Blue Colors:
- Primary Blue: #2563eb - Used for the main title and button background
- Light Blue: #3b82f6 - Used for hover states and gradients
- Dark Blue: #1d4ed8 - Used for button gradients and text
- Blue Text: #1e3a8a - Used for labels and headings
Orange Accents:
- Primary Orange: #f97316 - Used for accents and highlights
- Light Orange: #fb923c - Used for hover states
- Dark Orange: #ea580c - Used for error states
Background & Shadows:
- Background: #e6eef8 - A light blue-tinted background for the neumorphic effect
- Light Shadow: rgba(255, 255, 255, 0.8) - Creates the light side of the neumorphic effect
- Dark Shadow: rgba(163, 177, 198, 0.6) - Creates the dark side of the neumorphic effect

Neumorphic Design Elements

Card Design:
- Soft shadows creating an extruded effect
- Blue and orange gradient accent line at the top of the card
- Rounded corners for a modern look
Input Fields:
- Inset shadows creating a "pressed in" appearance
- Orange accent border on focus
- Blue labels with orange required asterisks
Submit Button:
- Blue gradient background
- Subtle shine animation on hover
- Pressed effect on active state
- Orange accent in the loading spinner
Typography:
- Blue headings
- Dark blue text for important content
- Lighter text for descriptions and hints

Enhanced Visual Effects

Gradient Accents:
- Blue to orange gradient at the top of the card
- Blue gradient for the button background
Hover Animations:
- Subtle shine effect on the button
- Elevation change on hover (button rises slightly)
- Pressed effect on click
Focus States:
- Orange accent border on input focus
- Changed shadow depth on focus
Error States:
- Orange text and border for validation errors

Responsive Design

The design is fully responsive and will adapt to different screen sizes:

Adjusted padding and margins on smaller screens
Maintained readability and usability across devices

Required Dependencies

For this implementation, you'll need to install the following packages:

npm install @mantine/core @mantine/hooks @mantine/notifications @tabler/icons-react formik yup

The design also uses the Poppins font, which is loaded in the layout component.

also include a a list of support, in top keep in button of table list, when click the button open this form inside modal

238d ago