Files
chatwoot/tailwind.config.js
Pranav 8b1d98af52 feat: Update the design for integration page (#9825)
Combine integrations and applications page into one page. 

<img width="1182" alt="Screenshot 2024-07-23 at 3 30 51 PM"
src="https://github.com/user-attachments/assets/50920a6f-606f-44b3-b1e4-641046a14444">

Major changes:

- The app enabled?, active? checks are all moved to backend.
- The dashboard_apps integration is also now part of the apps.yml file.
- Updated the header design for the new settings pages.
- Merged the folders integrationapps and integrations. 
- Updated the copy to match the size of the card and provide clear
instruction.
- Only the list page is updated in this PR, rest of the pages are yet to
be migrated.


| Integration | Verified | 
| -- | -- |
| Dashboard Apps |  | 
| Dyte |  | 
| Slack |  | 
| Webhooks |  | 
| Dialogflow |  | 
| Google Translate |  | 
| OpenAI |  | 
| Linear |  |

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
2024-07-24 16:35:40 -07:00

74 lines
2.1 KiB
JavaScript

const { slateDark } = require('@radix-ui/colors');
import { colors } from './theme/colors';
const defaultTheme = require('tailwindcss/defaultTheme');
module.exports = {
darkMode: 'class',
content: [
'./enterprise/app/views/**/*.html.erb',
'./app/javascript/widget/**/*.vue',
'./app/javascript/v3/**/*.vue',
'./app/javascript/dashboard/**/*.vue',
'./app/javascript/portal/**/*.vue',
'./app/javascript/shared/**/*.vue',
'./app/javascript/survey/**/*.vue',
'./app/views/**/*.html.erb',
],
theme: {
extend: {
fontFamily: {
inter: ['Inter', ...defaultTheme.fontFamily.sans],
interDisplay: ['Inter Display', ...defaultTheme.fontFamily.sans],
},
},
fontSize: {
...defaultTheme.fontSize,
xxs: '0.625rem',
},
colors: {
transparent: 'transparent',
white: '#fff',
'modal-backdrop-light': 'rgba(0, 0, 0, 0.4)',
'modal-backdrop-dark': 'rgba(0, 0, 0, 0.6)',
current: 'currentColor',
...colors,
body: slateDark.slate7,
},
keyframes: {
...defaultTheme.keyframes,
wiggle: {
'0%': { transform: 'translateX(0)' },
'15%': { transform: 'translateX(0.375rem)' },
'30%': { transform: 'translateX(-0.375rem)' },
'45%': { transform: 'translateX(0.375rem)' },
'60%': { transform: 'translateX(-0.375rem)' },
'75%': { transform: 'translateX(0.375rem)' },
'90%': { transform: 'translateX(-0.375rem)' },
'100%': { transform: 'translateX(0)' },
},
'loader-pulse': {
'0%': { opacity: 0.4 },
'50%': { opacity: 1 },
'100%': { opacity: 0.4 },
},
'card-select': {
'0%, 100%': {
transform: 'translateX(0)',
},
'50%': {
transform: 'translateX(1px)',
},
},
},
animation: {
...defaultTheme.animation,
wiggle: 'wiggle 0.5s ease-in-out',
'loader-pulse': 'loader-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'card-select': 'card-select 0.25s ease-in-out',
},
},
plugins: [
// eslint-disable-next-line
require('@tailwindcss/typography'),
],
};