mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
chore: replace css variables
This commit is contained in:
Aaryan Khandelwal
parent
fd52712983
commit
f74138f931
@ -1,7 +1,7 @@
|
||||
.ProseMirror p.is-editor-empty:first-child::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: rgb(var(--color-text-400));
|
||||
color: var(--color-neutral-100);
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
@ -20,7 +20,7 @@
|
||||
.ProseMirror .is-empty::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: rgb(var(--color-text-400));
|
||||
color: var(--color-neutral-100);
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
.ProseMirror-gapcursor:after {
|
||||
border-top: 1px solid rgb(var(--color-text-100)) !important;
|
||||
border-top: 1px solid var(--color-neutral-120) !important;
|
||||
}
|
||||
|
||||
/* Custom TODO list checkboxes – shoutout to this awesome tutorial: https://moderncss.dev/pure-css-custom-checkbox-style/ */
|
||||
@ -62,24 +62,24 @@ ul[data-type="taskList"] li > label {
|
||||
ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
background-color: rgb(var(--color-background-100));
|
||||
background-color: var(--color-neutral-30);
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
position: relative;
|
||||
border: 1.5px solid rgb(var(--color-text-100));
|
||||
border: 1.5px solid var(--color-neutral-120);
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.15rem;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: rgb(var(--color-background-80));
|
||||
background-color: var(--color-neutral-50);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: rgb(var(--color-background-90));
|
||||
background-color: var(--color-neutral-40);
|
||||
}
|
||||
|
||||
&::before {
|
||||
@ -99,7 +99,7 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] li[data-checked="true"] > div > p {
|
||||
color: rgb(var(--color-text-200));
|
||||
color: var(--color-neutral-110);
|
||||
text-decoration: line-through;
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
@ -158,7 +158,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgba(var(--color-text-200));
|
||||
border: 3px solid var(--color-neutral-110);
|
||||
border-top-color: rgba(var(--color-text-800));
|
||||
animation: spinning 0.6s linear infinite;
|
||||
}
|
||||
@ -176,13 +176,13 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
|
||||
table-layout: fixed;
|
||||
margin: 0.5em 0 0.5em 0;
|
||||
|
||||
border: 1px solid rgb(var(--color-border-200));
|
||||
border: 1px solid var(--color-neutral-70);
|
||||
width: 100%;
|
||||
|
||||
td,
|
||||
th {
|
||||
min-width: 1em;
|
||||
border: 1px solid rgb(var(--color-border-200));
|
||||
border: 1px solid var(--color-neutral-70);
|
||||
padding: 10px 15px;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
@ -247,9 +247,9 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
|
||||
}
|
||||
|
||||
.ProseMirror pre {
|
||||
background: rgba(var(--color-background-80));
|
||||
background: var(--color-neutral-50);
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(var(--color-text-100));
|
||||
color: var(--color-neutral-120);
|
||||
font-family: "JetBrainsMono", monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
@ -268,7 +268,7 @@ div[data-type="horizontalRule"] {
|
||||
margin-bottom: 0;
|
||||
|
||||
& > div {
|
||||
border-bottom: 1px solid rgb(var(--color-text-100));
|
||||
border-bottom: 1px solid var(--color-neutral-120);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,14 +10,14 @@
|
||||
table-layout: fixed;
|
||||
margin: 0;
|
||||
margin-bottom: 3rem;
|
||||
border: 1px solid rgba(var(--color-border-200));
|
||||
border: 1px solid var(--color-neutral-70);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tableWrapper table td,
|
||||
.tableWrapper table th {
|
||||
min-width: 1em;
|
||||
border: 1px solid rgba(var(--color-border-200));
|
||||
border: 1px solid var(--color-neutral-70);
|
||||
padding: 10px 15px;
|
||||
vertical-align: top;
|
||||
box-sizing: border-box;
|
||||
@ -113,7 +113,7 @@
|
||||
|
||||
.tableWrapper .tableControls .rowsControlDiv {
|
||||
background-color: rgba(var(--color-primary-100));
|
||||
border: 1px solid rgba(var(--color-border-200));
|
||||
border: 1px solid var(--color-neutral-70);
|
||||
border-radius: 2px;
|
||||
background-size: 1.25rem;
|
||||
background-repeat: no-repeat;
|
||||
@ -128,7 +128,7 @@
|
||||
|
||||
.tableWrapper .tableControls .columnsControlDiv {
|
||||
background-color: rgba(var(--color-primary-100));
|
||||
border: 1px solid rgba(var(--color-border-200));
|
||||
border: 1px solid var(--color-neutral-70);
|
||||
border-radius: 2px;
|
||||
background-size: 1.25rem;
|
||||
background-repeat: no-repeat;
|
||||
@ -142,8 +142,8 @@
|
||||
}
|
||||
.tableWrapper .tableControls .tableToolbox,
|
||||
.tableWrapper .tableControls .tableColorPickerToolbox {
|
||||
border: 1px solid rgba(var(--color-border-300));
|
||||
background-color: rgba(var(--color-background-100));
|
||||
border: 1px solid var(--color-neutral-70);
|
||||
background-color: var(--color-neutral-30);
|
||||
padding: 0.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -153,7 +153,7 @@
|
||||
|
||||
.tableWrapper .tableControls .tableToolbox .toolboxItem,
|
||||
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem {
|
||||
background-color: rgba(var(--color-background-100));
|
||||
background-color: var(--color-neutral-30);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
@ -173,7 +173,7 @@
|
||||
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .iconContainer,
|
||||
.tableWrapper .tableControls .tableToolbox .toolboxItem .colorContainer,
|
||||
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .colorContainer {
|
||||
border: 1px solid rgba(var(--color-border-300));
|
||||
border: 1px solid var(--color-neutral-70);
|
||||
border-radius: 3px;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
@ -192,13 +192,13 @@
|
||||
}
|
||||
|
||||
.tableToolbox {
|
||||
background-color: rgba(var(--color-background-100));
|
||||
background-color: var(--color-neutral-30);
|
||||
}
|
||||
|
||||
.tableWrapper .tableControls .tableToolbox .toolboxItem .label,
|
||||
.tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem .label {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(var(--color-text-300));
|
||||
color: var(--color-neutral-110);
|
||||
}
|
||||
|
||||
.resize-cursor .tableWrapper .tableControls .rowsControl,
|
||||
|
||||
@ -59,7 +59,7 @@ export const CoreEditorExtensions = (
|
||||
},
|
||||
blockquote: false,
|
||||
dropcursor: {
|
||||
color: "rgba(var(--color-text-100))",
|
||||
color: "var(--color-neutral-120)",
|
||||
width: 2,
|
||||
},
|
||||
}),
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
export const icons = {
|
||||
colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
|
||||
colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="var(--color-neutral-110)" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
|
||||
deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
|
||||
deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
|
||||
insertLeftTableIcon: `<svg
|
||||
@ -9,7 +9,7 @@ export const icons = {
|
||||
>
|
||||
<path
|
||||
d="M224.617-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm147.691-607.69q0-4.616-3.846-8.463-3.846-3.846-8.462-3.846H600q-4.616 0-8.462 3.846-3.847 3.847-3.847 8.463v535.382q0 4.616 3.847 8.463Q595.384-200 600-200h135.383q4.616 0 8.462-3.846 3.846-3.847 3.846-8.463v-535.382ZM587.691-200h160-160Z"
|
||||
fill="rgb(var(--color-text-300))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
</svg>
|
||||
`,
|
||||
@ -20,7 +20,7 @@ export const icons = {
|
||||
>
|
||||
<path
|
||||
d="M600-140.001q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21h135.383q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H600Zm-375.383 0q-30.307 0-51.307-21-21-21-21-51.308v-535.382q0-30.308 21-51.308t51.307-21H360q30.307 0 51.307 21 21 21 21 51.308v535.382q0 30.308-21 51.308t-51.307 21H224.617Zm-12.308-607.69v535.382q0 4.616 3.846 8.463 3.846 3.846 8.462 3.846H360q4.616 0 8.462-3.846 3.847-3.847 3.847-8.463v-535.382q0-4.616-3.847-8.463Q364.616-760 360-760H224.617q-4.616 0-8.462 3.846-3.846 3.847-3.846 8.463Zm160 547.691h-160 160Z"
|
||||
fill="rgb(var(--color-text-300))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
</svg>
|
||||
`,
|
||||
@ -31,7 +31,7 @@ export const icons = {
|
||||
>
|
||||
<path
|
||||
d="M212.309-527.693q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0 375.383q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-59.999h535.382q4.616 0 8.463-3.846 3.846-3.846 3.846-8.462V-360q0-4.616-3.846-8.462-3.847-3.847-8.463-3.847H212.309q-4.616 0-8.463 3.847Q200-364.616 200-360v135.383q0 4.616 3.846 8.462 3.847 3.846 8.463 3.846Zm-12.309-160v160-160Z"
|
||||
fill="rgb(var(--color-text-300))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
</svg>
|
||||
`,
|
||||
@ -42,7 +42,7 @@ export const icons = {
|
||||
>
|
||||
<path
|
||||
d="M212.309-152.31q-30.308 0-51.308-21t-21-51.307V-360q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307v135.383q0 30.307-21 51.307-21 21-51.308 21H212.309Zm0-375.383q-30.308 0-51.308-21t-21-51.307v-135.383q0-30.307 21-51.307 21-21 51.308-21h535.382q30.308 0 51.308 21t21 51.307V-600q0 30.307-21 51.307-21 21-51.308 21H212.309Zm535.382-219.998H212.309q-4.616 0-8.463 3.846-3.846 3.846-3.846 8.462V-600q0 4.616 3.846 8.462 3.847 3.847 8.463 3.847h535.382q4.616 0 8.463-3.847Q760-595.384 760-600v-135.383q0-4.616-3.846-8.462-3.847-3.846-8.463-3.846ZM200-587.691v-160 160Z"
|
||||
fill="rgb(var(--color-text-300))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
</svg>
|
||||
`,
|
||||
|
||||
@ -54,7 +54,7 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
|
||||
HTMLAttributes: { class: "mt-4 mb-4" },
|
||||
},
|
||||
dropcursor: {
|
||||
color: "rgba(var(--color-text-100))",
|
||||
color: "var(--color-neutral-120)",
|
||||
width: 2,
|
||||
},
|
||||
gapcursor: false,
|
||||
|
||||
@ -9,11 +9,11 @@
|
||||
z-index: 10;
|
||||
cursor: grab;
|
||||
border-radius: 2px;
|
||||
background-color: rgb(var(--color-background-90));
|
||||
background-color: var(--color-neutral-40);
|
||||
}
|
||||
|
||||
.drag-handle:hover {
|
||||
background-color: rgb(var(--color-background-80));
|
||||
background-color: var(--color-neutral-50);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
@ -48,6 +48,6 @@
|
||||
.drag-handle-dot {
|
||||
height: 2.75px;
|
||||
width: 3px;
|
||||
background-color: rgba(var(--color-text-200));
|
||||
background-color: var(--color-neutral-110);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -66,7 +66,7 @@ export const LinkSelector: FC<LinkSelectorProps> = ({ editor, isOpen, setIsOpen
|
||||
{editor.getAttributes("link").href ? (
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center rounded-sm p-1 text-red-600 transition-all hover:bg-red-100 dark:hover:bg-red-800"
|
||||
className="flex items-center rounded-sm p-1 text-danger-text-medium transition-all hover:bg-red-100 dark:hover:bg-red-800"
|
||||
onClick={() => {
|
||||
unsetLinkEditor(editor);
|
||||
setIsOpen(false);
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import colors from "tailwindcss/colors";
|
||||
|
||||
const convertToRGB = (variableName) => `rgba(var(${variableName}))`;
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export const darkMode = "class";
|
||||
export const content = {
|
||||
@ -328,22 +326,22 @@ export const theme = {
|
||||
typography: () => ({
|
||||
brand: {
|
||||
css: {
|
||||
"--tw-prose-body": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-p": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-headings": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-lead": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-links": convertToRGB("--color-primary-100"),
|
||||
"--tw-prose-bold": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-counters": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-bullets": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-hr": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-quotes": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-quote-borders": convertToRGB("--color-border-200"),
|
||||
"--tw-prose-code": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-pre-code": convertToRGB("--color-text-100"),
|
||||
"--tw-prose-pre-bg": convertToRGB("--color-background-100"),
|
||||
"--tw-prose-th-borders": convertToRGB("--color-border-200"),
|
||||
"--tw-prose-td-borders": convertToRGB("--color-border-200"),
|
||||
"--tw-prose-body": "--color-neutral-120",
|
||||
"--tw-prose-p": "--color-neutral-120",
|
||||
"--tw-prose-headings": "--color-neutral-120",
|
||||
"--tw-prose-lead": "--color-neutral-120",
|
||||
"--tw-prose-links": "--color-primary-90",
|
||||
"--tw-prose-bold": "--color-neutral-120",
|
||||
"--tw-prose-counters": "--color-neutral-120",
|
||||
"--tw-prose-bullets": "--color-neutral-120",
|
||||
"--tw-prose-hr": "--color-neutral-120",
|
||||
"--tw-prose-quotes": "--color-neutral-120",
|
||||
"--tw-prose-quote-borders": "--color-neutral-70",
|
||||
"--tw-prose-code": "--color-neutral-120",
|
||||
"--tw-prose-pre-code": "--color-neutral-120",
|
||||
"--tw-prose-pre-bg": "--color-neutral-30",
|
||||
"--tw-prose-th-borders": "--color-neutral-70",
|
||||
"--tw-prose-td-borders": "--color-neutral-70",
|
||||
},
|
||||
},
|
||||
}),
|
||||
|
||||
@ -73,7 +73,7 @@ export const badgeStyling: IBadgeStyling = {
|
||||
},
|
||||
|
||||
success: {
|
||||
default: `text-white bg-green-500`,
|
||||
default: `text-white bg-success-solid`,
|
||||
hover: `hover:bg-green-600`,
|
||||
disabled: `cursor-not-allowed !bg-green-300`,
|
||||
},
|
||||
@ -110,13 +110,13 @@ export const badgeStyling: IBadgeStyling = {
|
||||
disabled: `cursor-not-allowed !bg-red-300`,
|
||||
},
|
||||
"accent-destructive": {
|
||||
default: `text-red-500 bg-red-50`,
|
||||
hover: `hover:bg-red-100 hover:text-red-600`,
|
||||
default: `text-danger-text-medium bg-red-50`,
|
||||
hover: `hover:bg-red-100 hover:text-danger-text-medium`,
|
||||
disabled: `cursor-not-allowed !text-red-300`,
|
||||
},
|
||||
"outline-destructive": {
|
||||
default: `text-red-500 bg-neutral-component-surface-light border border-red-500`,
|
||||
hover: `hover:text-red-600 hover:bg-red-50`,
|
||||
default: `text-danger-text-medium bg-neutral-component-surface-light border border-red-500`,
|
||||
hover: `hover:text-danger-text-medium hover:bg-red-50`,
|
||||
disabled: `cursor-not-allowed !text-red-300 border-red-300`,
|
||||
},
|
||||
};
|
||||
|
||||
@ -74,25 +74,25 @@ export const buttonStyling: IButtonStyling = {
|
||||
disabled: `cursor-not-allowed !bg-red-300`,
|
||||
},
|
||||
"accent-danger": {
|
||||
default: `text-red-500 bg-red-50`,
|
||||
hover: `hover:text-red-600 hover:bg-red-100`,
|
||||
pressed: `focus:text-red-500 focus:bg-red-100`,
|
||||
default: `text-danger-text-medium bg-red-50`,
|
||||
hover: `hover:text-danger-text-medium hover:bg-red-100`,
|
||||
pressed: `focus:text-danger-text-medium focus:bg-red-100`,
|
||||
disabled: `cursor-not-allowed !text-red-300`,
|
||||
},
|
||||
"outline-danger": {
|
||||
default: `text-red-500 bg-transparent border border-red-500`,
|
||||
default: `text-danger-text-medium bg-transparent border border-red-500`,
|
||||
hover: `hover:text-red-400 hover:border-red-400`,
|
||||
pressed: `focus:text-red-400 focus:border-red-400`,
|
||||
disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
|
||||
},
|
||||
"link-danger": {
|
||||
default: `text-red-500 bg-neutral-component-surface-light`,
|
||||
default: `text-danger-text-medium bg-neutral-component-surface-light`,
|
||||
hover: `hover:text-red-400`,
|
||||
pressed: `focus:text-red-400`,
|
||||
disabled: `cursor-not-allowed !text-red-300`,
|
||||
},
|
||||
"tertiary-danger": {
|
||||
default: `text-red-500 bg-neutral-component-surface-light border border-red-200`,
|
||||
default: `text-danger-text-medium bg-neutral-component-surface-light border border-red-200`,
|
||||
hover: `hover:bg-red-50 hover:border-red-300`,
|
||||
pressed: `focus:text-red-400`,
|
||||
disabled: `cursor-not-allowed !text-red-300`,
|
||||
|
||||
@ -7,7 +7,7 @@ export const CalendarAfterIcon: React.FC<ISvgIcons> = ({ className = "fill-curre
|
||||
<g clipPath="url(#clip0_3309_70901)">
|
||||
<path
|
||||
d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
|
||||
fill="rgb(var(--color-text-200))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
||||
@ -7,13 +7,13 @@ export const CalendarBeforeIcon: React.FC<ISvgIcons> = ({ className = "fill-curr
|
||||
<g clipPath="url(#clip0_3309_70907)">
|
||||
<path
|
||||
d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
|
||||
fill="rgb(var(--color-text-200))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
<g clipPath="url(#clip1_3309_70907)">
|
||||
<path
|
||||
d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
|
||||
fill="rgb(var(--color-text-200))"
|
||||
stroke="rgb(var(--color-text-200))"
|
||||
fill="var(--color-neutral-110)"
|
||||
stroke="var(--color-neutral-110)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
</g>
|
||||
|
||||
@ -13,7 +13,7 @@ export const DiscordIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24",
|
||||
>
|
||||
<g clipPath="url(#clip0_282_229)">
|
||||
<path
|
||||
fill={color ? color : "rgb(var(--color-text-200))"}
|
||||
fill={color ? color : "var(--color-neutral-110)"}
|
||||
d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
|
||||
/>
|
||||
</g>
|
||||
|
||||
@ -16,7 +16,7 @@ export const GithubIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24", c
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
|
||||
fill={color ? color : "rgb(var(--color-text-200))"}
|
||||
fill={color ? color : "var(--color-neutral-110)"}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
||||
@ -16,7 +16,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
|
||||
const { priority, className = "", containerClassName = "", size = 14, withContainer = false } = props;
|
||||
|
||||
const priorityClasses = {
|
||||
urgent: "bg-danger-90 text-red-500 border-danger-90",
|
||||
urgent: "bg-danger-solid text-danger-text-medium border-danger-90",
|
||||
high: "bg-orange-30 text-orange-80 border-orange-80",
|
||||
medium: "bg-warning-20 text-warning-80 border-warning-80",
|
||||
low: "bg-primary-30 text-primary-90 border-primary-90",
|
||||
@ -64,7 +64,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
|
||||
size={size}
|
||||
className={cn(
|
||||
{
|
||||
"text-red-500": priority === "urgent",
|
||||
"text-danger-text-medium": priority === "urgent",
|
||||
"text-orange-500": priority === "high",
|
||||
"text-yellow-500": priority === "medium",
|
||||
"text-primary-text-subtle": priority === "low",
|
||||
|
||||
@ -99,7 +99,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
||||
required: "First name is required",
|
||||
})}
|
||||
/>
|
||||
{errors.first_name && <div className="text-sm text-red-500">{errors.first_name.message}</div>}
|
||||
{errors.first_name && <div className="text-sm text-danger-text-medium">{errors.first_name.message}</div>}
|
||||
</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<label htmlFor="lastName">Last Name</label>
|
||||
@ -112,7 +112,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
||||
required: "Last name is required",
|
||||
})}
|
||||
/>
|
||||
{errors.last_name && <div className="text-sm text-red-500">{errors.last_name.message}</div>}
|
||||
{errors.last_name && <div className="text-sm text-danger-text-medium">{errors.last_name.message}</div>}
|
||||
</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
<span>What{"'"}s your role?</span>
|
||||
@ -170,7 +170,7 @@ export const OnBoardingForm: React.FC<Props> = observer(({ user }) => {
|
||||
</Listbox>
|
||||
)}
|
||||
/>
|
||||
{errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
|
||||
{errors.role && <span className="text-sm text-danger-text-medium">{errors.role.message}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -26,10 +26,10 @@ export const dueDateIconDetails = (
|
||||
|
||||
if (timeDifference < 0) {
|
||||
iconName = "event_busy";
|
||||
className = "text-red-500";
|
||||
className = "text-danger-text-medium";
|
||||
} else if (timeDifference === 0) {
|
||||
iconName = "today";
|
||||
className = "text-red-500";
|
||||
className = "text-danger-text-medium";
|
||||
} else if (timeDifference === 24 * 60 * 60 * 1000) {
|
||||
iconName = "event";
|
||||
className = "text-yellow-500";
|
||||
|
||||
@ -126,16 +126,19 @@ export const CommentCard: React.FC<Props> = observer((props) => {
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="group rounded border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
|
||||
className="group rounded border border-green-500 bg-success-component-surface-dark p-2 shadow-md duration-300 hover:bg-success-solid"
|
||||
>
|
||||
<Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" strokeWidth={2} />
|
||||
<Check
|
||||
className="h-3 w-3 text-success-text-medium duration-300 group-hover:text-white"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="group rounded border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
|
||||
className="group rounded border border-red-500 bg-danger-component-surface-dark p-2 shadow-md duration-300 hover:bg-danger-solid"
|
||||
onClick={() => setIsEditing(false)}
|
||||
>
|
||||
<X className="h-3 w-3 text-red-500 duration-300 group-hover:text-white" strokeWidth={2} />
|
||||
<X className="h-3 w-3 text-danger-text-medium duration-300 group-hover:text-white" strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -82,13 +82,13 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({ issueDetails, mod
|
||||
<div
|
||||
className={`inline-flex items-center gap-1.5 rounded px-2.5 py-0.5 text-left text-sm capitalize ${
|
||||
priority?.key === "urgent"
|
||||
? "border-red-500/20 bg-red-500/20 text-red-500"
|
||||
? "border-red-500/20 bg-danger-component-surface-dark text-danger-text-medium"
|
||||
: priority?.key === "high"
|
||||
? "border-orange-500/20 bg-orange-500/20 text-orange-500"
|
||||
: priority?.key === "medium"
|
||||
? "border-yellow-500/20 bg-yellow-500/20 text-yellow-500"
|
||||
: priority?.key === "low"
|
||||
? "border-green-500/20 bg-green-500/20 text-green-500"
|
||||
? "border-green-500/20 bg-success-component-surface-dark text-success-text-medium"
|
||||
: "border-neutral-border-medium bg-neutral-component-surface-dark"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -118,7 +118,7 @@ export const IssueVotes: React.FC = observer(() => {
|
||||
});
|
||||
}}
|
||||
className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
|
||||
isDownVotedByUser ? "border-red-600 text-red-600" : "border-neutral-border-medium"
|
||||
isDownVotedByUser ? "border-red-600 text-danger-text-medium" : "border-neutral-border-medium"
|
||||
}`}
|
||||
>
|
||||
<span className="material-symbols-rounded !m-0 !p-0 text-base">arrow_downward_alt</span>
|
||||
|
||||
@ -27,7 +27,7 @@ export const issuePriorityFilters: IIssuePriorityFilters[] = [
|
||||
{
|
||||
key: "urgent",
|
||||
title: "Urgent",
|
||||
className: "bg-red-500 border-red-500 text-white",
|
||||
className: "bg-danger-solid border-red-500 text-white",
|
||||
icon: "error",
|
||||
},
|
||||
{
|
||||
@ -45,7 +45,7 @@ export const issuePriorityFilters: IIssuePriorityFilters[] = [
|
||||
{
|
||||
key: "low",
|
||||
title: "Low",
|
||||
className: "text-green-500 border-neutral-border-medium",
|
||||
className: "text-success-text-medium border-neutral-border-medium",
|
||||
icon: "signal_cellular_alt_1_bar",
|
||||
},
|
||||
{
|
||||
|
||||
@ -257,12 +257,12 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: rgba(var(--color-background-100));
|
||||
background-color: var(--color-neutral-30);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background-color: rgba(var(--color-background-80));
|
||||
background-color: var(--color-neutral-50);
|
||||
}
|
||||
|
||||
.hide-vertical-scrollbar::-webkit-scrollbar {
|
||||
|
||||
@ -89,9 +89,9 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
|
||||
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="">
|
||||
<div className="flex items-start gap-x-4">
|
||||
<div className="grid place-items-center rounded-full bg-red-500/20 p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
|
||||
<div className="grid place-items-center rounded-full bg-danger-component-surface-dark p-2 sm:p-2 md:p-4 lg:p-4 mt-3 sm:mt-3 md:mt-0 lg:mt-0 ">
|
||||
<Trash2
|
||||
className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-red-600"
|
||||
className="h-4 w-4 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6 text-danger-text-medium"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -115,7 +115,7 @@ export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, param
|
||||
y={datum.y}
|
||||
textAnchor={`${barGraphData.data.length > 7 ? "end" : "middle"}`}
|
||||
fontSize={10}
|
||||
fill="rgb(var(--color-text-200))"
|
||||
fill="var(--color-neutral-110)"
|
||||
className={`${barGraphData.data.length > 7 ? "-rotate-45" : ""}`}
|
||||
>
|
||||
{generateDisplayName(datum.value, analytics, params, "x_axis")}
|
||||
|
||||
@ -11,7 +11,7 @@ type Props = {
|
||||
|
||||
export const AnalyticsDemand: React.FC<Props> = ({ defaultAnalytics }) => (
|
||||
<div className="space-y-3 rounded-[10px] border border-neutral-border-medium p-3">
|
||||
<h5 className="text-xs text-red-500">DEMAND</h5>
|
||||
<h5 className="text-xs text-danger-text-medium">DEMAND</h5>
|
||||
<div>
|
||||
<h4 className="text-base font-medium text-neutral-text-strong">Total open tasks</h4>
|
||||
<h3 className="mt-1 text-xl font-semibold">{defaultAnalytics.open_issues}</h3>
|
||||
|
||||
@ -11,7 +11,7 @@ type Props = {
|
||||
|
||||
export const AnalyticsScope: React.FC<Props> = ({ defaultAnalytics }) => (
|
||||
<div className="rounded-[10px] border border-neutral-border-medium">
|
||||
<h5 className="p-3 text-xs text-green-500">SCOPE</h5>
|
||||
<h5 className="p-3 text-xs text-success-text-medium">SCOPE</h5>
|
||||
<div className="divide-y divide-neutral-border-medium">
|
||||
<div>
|
||||
<h6 className="px-3 text-base font-medium">Pending issues</h6>
|
||||
|
||||
@ -42,7 +42,7 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
|
||||
</div>
|
||||
)}
|
||||
theme={{
|
||||
background: "rgb(var(--color-background-100))",
|
||||
background: "var(--color-neutral-30)",
|
||||
}}
|
||||
enableArea
|
||||
/>
|
||||
|
||||
@ -140,7 +140,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.label && <span className="text-xs text-red-500">{errors.label.message}</span>}
|
||||
{errors.label && <span className="text-xs text-danger-text-medium">{errors.label.message}</span>}
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
|
||||
@ -27,7 +27,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
|
||||
onClick={() => setDeleteModalOpen(true)}
|
||||
className="absolute right-4 hidden place-items-center group-hover:grid"
|
||||
>
|
||||
<XCircle className="h-4 w-4 text-red-500" />
|
||||
<XCircle className="h-4 w-4 text-danger-text-medium" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
<div className="flex w-4/5 items-center">
|
||||
@ -35,7 +35,7 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
|
||||
<span
|
||||
className={`${
|
||||
token.is_active
|
||||
? "bg-green-500/10 text-green-500"
|
||||
? "bg-success-component-surface-dark text-success-text-medium"
|
||||
: "bg-neutral-component-surface-dark text-neutral-text-subtle"
|
||||
} ml-2 flex h-4 max-h-fit items-center rounded-sm px-2 text-xs font-medium`}
|
||||
>
|
||||
|
||||
@ -69,7 +69,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex items-center justify-center rounded bg-neutral-component-surface-medium p-3">
|
||||
<ArchiveX className="h-4 w-4 flex-shrink-0 text-red-500" />
|
||||
<ArchiveX className="h-4 w-4 flex-shrink-0 text-danger-text-medium" />
|
||||
</div>
|
||||
<div className="">
|
||||
<h4 className="text-sm font-medium">Auto-close issues</h4>
|
||||
|
||||
@ -107,7 +107,9 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
|
||||
/>
|
||||
|
||||
{errors.close_in && (
|
||||
<span className="px-1 text-sm text-red-500">Select a month between 1 and 12.</span>
|
||||
<span className="px-1 text-sm text-danger-text-medium">
|
||||
Select a month between 1 and 12.
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
@ -140,7 +142,9 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
|
||||
)}
|
||||
/>
|
||||
{errors.archive_in && (
|
||||
<span className="px-1 text-sm text-red-500">Select a month between 1 and 12.</span>
|
||||
<span className="px-1 text-sm text-danger-text-medium">
|
||||
Select a month between 1 and 12.
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -50,7 +50,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-neutral-text-medium">
|
||||
<DiscordIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
|
||||
<DiscordIcon className="h-4 w-4" color="var(--color-neutral-110)" />
|
||||
Join our Discord
|
||||
</div>
|
||||
</Command.Item>
|
||||
@ -62,7 +62,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-neutral-text-medium">
|
||||
<GithubIcon className="h-4 w-4" color="rgb(var(--color-text-200))" />
|
||||
<GithubIcon className="h-4 w-4" color="var(--color-neutral-110)" />
|
||||
Report a bug
|
||||
</div>
|
||||
</Command.Item>
|
||||
|
||||
@ -326,7 +326,7 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
{fileRejections.length > 0 && (
|
||||
<p className="text-sm text-red-500">
|
||||
<p className="text-sm text-danger-text-medium">
|
||||
{fileRejections[0].errors[0].code === "file-too-large"
|
||||
? "The image size cannot exceed 5 MB."
|
||||
: "Please upload a file in a valid format."}
|
||||
|
||||
@ -226,7 +226,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
|
||||
</div>
|
||||
)}
|
||||
{invalidResponse && (
|
||||
<div className="text-sm text-red-500">
|
||||
<div className="text-sm text-danger-text-medium">
|
||||
No response could be generated. This may be due to insufficient content or task information. Please try
|
||||
again.
|
||||
</div>
|
||||
|
||||
@ -153,7 +153,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
{fileRejections.length > 0 && (
|
||||
<p className="text-sm text-red-500">
|
||||
<p className="text-sm text-danger-text-medium">
|
||||
{fileRejections[0].errors[0].code === "file-too-large"
|
||||
? "The image size cannot exceed 5 MB."
|
||||
: "Please upload a file in a valid format."}
|
||||
|
||||
@ -160,7 +160,7 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
</div>
|
||||
{fileRejections.length > 0 && (
|
||||
<p className="text-sm text-red-500">
|
||||
<p className="text-sm text-danger-text-medium">
|
||||
{fileRejections[0].errors[0].code === "file-too-large"
|
||||
? "The image size cannot exceed 5 MB."
|
||||
: "Please upload a file in a valid format."}
|
||||
|
||||
@ -101,7 +101,9 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.background && <p className="mt-1 text-xs text-red-500">{errors.background.message}</p>}
|
||||
{errors.background && (
|
||||
<p className="mt-1 text-xs text-danger-text-medium">{errors.background.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -127,7 +129,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.text && <p className="mt-1 text-xs text-red-500">{errors.text.message}</p>}
|
||||
{errors.text && <p className="mt-1 text-xs text-danger-text-medium">{errors.text.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -153,7 +155,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.primary && <p className="mt-1 text-xs text-red-500">{errors.primary.message}</p>}
|
||||
{errors.primary && <p className="mt-1 text-xs text-danger-text-medium">{errors.primary.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -180,7 +182,7 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
||||
)}
|
||||
/>
|
||||
{errors.sidebarBackground && (
|
||||
<p className="mt-1 text-xs text-red-500">{errors.sidebarBackground.message}</p>
|
||||
<p className="mt-1 text-xs text-danger-text-medium">{errors.sidebarBackground.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -207,7 +209,9 @@ export const CustomThemeSelector: React.FC = observer(() => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.sidebarText && <p className="mt-1 text-xs text-red-500">{errors.sidebarText.message}</p>}
|
||||
{errors.sidebarText && (
|
||||
<p className="mt-1 text-xs text-danger-text-medium">{errors.sidebarText.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -185,7 +185,7 @@ export const ActiveCycleDetails: React.FC<IActiveCycleDetails> = observer((props
|
||||
handleAddToFavorites(e);
|
||||
}}
|
||||
>
|
||||
<Star className="h-4 w-4 " color="rgb(var(--color-text-200))" />
|
||||
<Star className="h-4 w-4 " color="var(--color-neutral-110)" />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
|
||||
@ -101,8 +101,8 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-4">
|
||||
<div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-500/20">
|
||||
<AlertTriangle width={16} strokeWidth={2} className="text-red-600" />
|
||||
<div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-danger-component-surface-dark">
|
||||
<AlertTriangle width={16} strokeWidth={2} className="text-danger-text-medium" />
|
||||
</div>
|
||||
<div className="text-xl font-medium 2xl:text-2xl">Delete Cycle</div>
|
||||
</div>
|
||||
|
||||
@ -23,7 +23,7 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
|
||||
: cycleStatus === "completed"
|
||||
? "#3f76ff"
|
||||
: cycleStatus === "draft"
|
||||
? "rgb(var(--color-text-200))"
|
||||
? "var(--color-neutral-110)"
|
||||
: "",
|
||||
}}
|
||||
onClick={() => router.push(`/${workspaceSlug}/projects/${data?.project}/cycles/${data?.id}`)}
|
||||
@ -67,7 +67,7 @@ export const CycleGanttSidebarBlock = ({ data }: { data: ICycle }) => {
|
||||
: cycleStatus === "completed"
|
||||
? "#3f76ff"
|
||||
: cycleStatus === "draft"
|
||||
? "rgb(var(--color-text-200))"
|
||||
? "var(--color-neutral-110)"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
|
||||
@ -108,7 +108,7 @@ const ButtonContent: React.FC<ButtonContentProps> = (props) => {
|
||||
onChange(newModuleIds);
|
||||
}}
|
||||
>
|
||||
<X className="h-2.5 w-2.5 text-neutral-text-medium hover:text-red-500" />
|
||||
<X className="h-2.5 w-2.5 text-neutral-text-medium hover:text-danger-text-medium" />
|
||||
</button>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
@ -54,7 +54,7 @@ const BorderButton = (props: ButtonProps) => {
|
||||
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
|
||||
|
||||
const priorityClasses = {
|
||||
urgent: "bg-red-500/20 text-red-950 border-red-500",
|
||||
urgent: "bg-danger-component-surface-dark text-red-950 border-red-500",
|
||||
high: "bg-orange-500/20 text-orange-950 border-orange-500",
|
||||
medium: "bg-yellow-500/20 text-yellow-950 border-yellow-500",
|
||||
low: "bg-custom-primary-100/20 text-custom-primary-950 border-custom-primary-100",
|
||||
@ -71,7 +71,7 @@ const BorderButton = (props: ButtonProps) => {
|
||||
// compact the icons if text is hidden
|
||||
"px-0.5": hideText,
|
||||
// highlight the whole button if text is hidden and priority is urgent
|
||||
"bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent,
|
||||
"bg-danger-solid border-red-500": priority === "urgent" && hideText && highlightUrgent,
|
||||
},
|
||||
className
|
||||
)}
|
||||
@ -80,7 +80,7 @@ const BorderButton = (props: ButtonProps) => {
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
"bg-danger-solid p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
>
|
||||
<PriorityIcon
|
||||
@ -123,7 +123,7 @@ const BackgroundButton = (props: ButtonProps) => {
|
||||
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
|
||||
|
||||
const priorityClasses = {
|
||||
urgent: "bg-red-500/20 text-red-950",
|
||||
urgent: "bg-danger-component-surface-dark text-red-950",
|
||||
high: "bg-orange-500/20 text-orange-950",
|
||||
medium: "bg-yellow-500/20 text-yellow-950",
|
||||
low: "bg-blue-500/20 text-blue-950",
|
||||
@ -140,7 +140,7 @@ const BackgroundButton = (props: ButtonProps) => {
|
||||
// compact the icons if text is hidden
|
||||
"px-0.5": hideText,
|
||||
// highlight the whole button if text is hidden and priority is urgent
|
||||
"bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent,
|
||||
"bg-danger-solid border-red-500": priority === "urgent" && hideText && highlightUrgent,
|
||||
},
|
||||
className
|
||||
)}
|
||||
@ -149,7 +149,7 @@ const BackgroundButton = (props: ButtonProps) => {
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
"bg-danger-solid p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
>
|
||||
<PriorityIcon
|
||||
@ -210,7 +210,7 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
// compact the icons if text is hidden
|
||||
"px-0.5": hideText,
|
||||
// highlight the whole button if text is hidden and priority is urgent
|
||||
"bg-red-500 border-red-500": priority === "urgent" && hideText && highlightUrgent,
|
||||
"bg-danger-solid border-red-500": priority === "urgent" && hideText && highlightUrgent,
|
||||
"bg-neutral-component-surface-dark": isActive,
|
||||
},
|
||||
className
|
||||
@ -220,7 +220,7 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
"bg-danger-solid p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
>
|
||||
<PriorityIcon
|
||||
|
||||
@ -31,7 +31,7 @@ const EmojiIconPicker: React.FC<Props> = (props) => {
|
||||
// states
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [openColorPicker, setOpenColorPicker] = useState(false);
|
||||
const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
|
||||
const [activeColor, setActiveColor] = useState<string>("var(--color-neutral-110)");
|
||||
const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
|
||||
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
@ -89,8 +89,8 @@ export const DeleteEstimateModal: React.FC<Props> = observer((props) => {
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
<span className="place-items-center rounded-full bg-danger-component-surface-dark p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-danger-text-medium" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Estimate</h3>
|
||||
|
||||
@ -54,7 +54,9 @@ export const EstimateListItem: React.FC<Props> = observer((props) => {
|
||||
<h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
|
||||
{estimate.name}
|
||||
{currentProjectDetails?.estimate && currentProjectDetails?.estimate === estimate.id && (
|
||||
<span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">In use</span>
|
||||
<span className="rounded bg-success-component-surface-dark px-2 py-0.5 text-xs text-success-text-medium">
|
||||
In use
|
||||
</span>
|
||||
)}
|
||||
</h6>
|
||||
<p className="font-sm w-[40vw] truncate text-[14px] font-normal text-neutral-text-medium">
|
||||
|
||||
@ -36,11 +36,11 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
|
||||
<span
|
||||
className={`rounded px-2 py-0.5 text-xs capitalize ${
|
||||
service.status === "completed"
|
||||
? "bg-green-500/20 text-green-500"
|
||||
? "bg-success-component-surface-dark text-success-text-medium"
|
||||
: service.status === "processing"
|
||||
? "bg-yellow-500/20 text-yellow-500"
|
||||
: service.status === "failed"
|
||||
? "bg-red-500/20 text-red-500"
|
||||
? "bg-danger-component-surface-dark text-danger-text-medium"
|
||||
: service.status === "expired"
|
||||
? "bg-orange-500/20 text-orange-500"
|
||||
: ""
|
||||
@ -67,7 +67,7 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="text-xs text-red-500">Expired</div>
|
||||
<div className="text-xs text-danger-text-medium">Expired</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -30,7 +30,7 @@ export const BiWeekChartView: FC<any> = () => {
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
|
||||
_item?.today ? `border-red-500 text-danger-text-medium` : `border-neutral-border-medium`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
|
||||
@ -30,7 +30,7 @@ export const DayChartView: FC<any> = () => {
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
|
||||
_item?.today ? `border-red-500 text-danger-text-medium` : `border-neutral-border-medium`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
|
||||
@ -30,7 +30,7 @@ export const HourChartView: FC<any> = () => {
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
|
||||
_item?.today ? `border-red-500 text-danger-text-medium` : `border-neutral-border-medium`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
|
||||
@ -60,7 +60,7 @@ export const MonthChartView: FC<any> = () => {
|
||||
}`}
|
||||
>
|
||||
{/* {monthDay?.today && (
|
||||
<div className="absolute top-0 bottom-0 w-[1px] bg-red-500" />
|
||||
<div className="absolute top-0 bottom-0 w-[1px] bg-danger-solid" />
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -30,7 +30,7 @@ export const QuarterChartView: FC<any> = () => {
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
|
||||
_item?.today ? `border-red-500 text-danger-text-medium` : `border-neutral-border-medium`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
|
||||
@ -30,7 +30,7 @@ export const WeekChartView: FC<any> = () => {
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
|
||||
_item?.today ? `border-red-500 text-danger-text-medium` : `border-neutral-border-medium`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
|
||||
@ -30,7 +30,7 @@ export const YearChartView: FC<any> = () => {
|
||||
>
|
||||
<div
|
||||
className={`flex-shrink-0 border-b py-1 text-center text-sm font-medium capitalize ${
|
||||
_item?.today ? `border-red-500 text-red-500` : `border-neutral-border-medium`
|
||||
_item?.today ? `border-red-500 text-danger-text-medium` : `border-neutral-border-medium`
|
||||
}`}
|
||||
>
|
||||
<div>{_item.title}</div>
|
||||
|
||||
@ -39,7 +39,7 @@ export const WorkspaceDashboardHeader = () => {
|
||||
rel="noopener noreferrer"
|
||||
className="flex flex-shrink-0 items-center gap-1.5 rounded bg-neutral-component-surface-dark px-3 py-1.5"
|
||||
>
|
||||
<Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
|
||||
<Zap size={14} strokeWidth={2} fill="var(--color-neutral-120)" />
|
||||
<span className="text-xs hidden sm:hidden md:block font-medium">{"What's new?"}</span>
|
||||
</a>
|
||||
<a
|
||||
|
||||
@ -4,7 +4,7 @@ export const AlarmClockIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const ArrowRightIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const AssignmentClipboardIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const BellNotificationIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -14,7 +14,7 @@ export const CalendarAfterIcon: React.FC<Props> = ({ width = "24", height = "24"
|
||||
<g clipPath="url(#clip0_3309_70901)">
|
||||
<path
|
||||
d="M10.6125 17V15.875H14.625V7.8125H3.375V11.9375H2.25V4.25C2.25 3.95 2.3625 3.6875 2.5875 3.4625C2.8125 3.2375 3.075 3.125 3.375 3.125H4.59375V2H5.8125V3.125H12.1875V2H13.4063V3.125H14.625C14.925 3.125 15.1875 3.2375 15.4125 3.4625C15.6375 3.6875 15.75 3.95 15.75 4.25V15.875C15.75 16.175 15.6375 16.4375 15.4125 16.6625C15.1875 16.8875 14.925 17 14.625 17H10.6125ZM6 18.2375L5.2125 17.45L7.33125 15.3125H0.9375V14.1875H7.33125L5.2125 12.05L6 11.2625L9.4875 14.75L6 18.2375ZM3.375 6.6875H14.625V4.25H3.375V6.6875Z"
|
||||
fill="rgb(var(--color-text-200))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
||||
@ -14,13 +14,13 @@ export const CalendarBeforeIcon: React.FC<Props> = ({ width = "24", height = "24
|
||||
<g clipPath="url(#clip0_3309_70907)">
|
||||
<path
|
||||
d="M10.6125 16.5V15.375H14.625V7.3125H3.375V11.4375H2.25V3.75C2.25 3.45 2.3625 3.1875 2.5875 2.9625C2.8125 2.7375 3.075 2.625 3.375 2.625H4.59375V1.5H5.8125V2.625H12.1875V1.5H13.4062V2.625H14.625C14.925 2.625 15.1875 2.7375 15.4125 2.9625C15.6375 3.1875 15.75 3.45 15.75 3.75V15.375C15.75 15.675 15.6375 15.9375 15.4125 16.1625C15.1875 16.3875 14.925 16.5 14.625 16.5H10.6125ZM3.375 6.1875H14.625V3.75H3.375V6.1875Z"
|
||||
fill="rgb(var(--color-text-200))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
<g clipPath="url(#clip1_3309_70907)">
|
||||
<path
|
||||
d="M3.99967 17.1667L1.33301 14.5L3.99967 11.8334L4.34967 12.1834L2.28301 14.25H8V14.75H2.28301L4.34967 16.8167L3.99967 17.1667Z"
|
||||
fill="rgb(var(--color-text-200))"
|
||||
stroke="rgb(var(--color-text-200))"
|
||||
fill="var(--color-neutral-110)"
|
||||
stroke="var(--color-neutral-110)"
|
||||
strokeWidth="0.5"
|
||||
/>
|
||||
</g>
|
||||
|
||||
@ -13,7 +13,7 @@ export const CalendarMonthIcon: React.FC<Props> = ({ width = "24", height = "24"
|
||||
>
|
||||
<path
|
||||
d="M12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18ZM4.5 22C4.1 22 3.75 21.85 3.45 21.55C3.15 21.25 3 20.9 3 20.5V5C3 4.6 3.15 4.25 3.45 3.95C3.75 3.65 4.1 3.5 4.5 3.5H6.125V2.8C6.125 2.56667 6.2 2.375 6.35 2.225C6.5 2.075 6.69167 2 6.925 2C7.15833 2 7.35417 2.075 7.5125 2.225C7.67083 2.375 7.75 2.56667 7.75 2.8V3.5H16.25V2.8C16.25 2.56667 16.325 2.375 16.475 2.225C16.625 2.075 16.8167 2 17.05 2C17.2833 2 17.4792 2.075 17.6375 2.225C17.7958 2.375 17.875 2.56667 17.875 2.8V3.5H19.5C19.9 3.5 20.25 3.65 20.55 3.95C20.85 4.25 21 4.6 21 5V20.5C21 20.9 20.85 21.25 20.55 21.55C20.25 21.85 19.9 22 19.5 22H4.5ZM4.5 20.5H19.5V9.75H4.5V20.5ZM4.5 8.25H19.5V5H4.5V8.25ZM4.5 8.25V5V8.25Z"
|
||||
fill="rgb(var(--color-text-200))"
|
||||
fill="var(--color-neutral-110)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const CheckIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const CloudUploadIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const CogIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -6,7 +6,7 @@ export const ColorPalletteIcon: React.FC<Props> = ({
|
||||
width = "20",
|
||||
height = "20",
|
||||
className,
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
|
||||
@ -6,7 +6,7 @@ export const CommandIcon: FC<Props> = ({
|
||||
width = "81",
|
||||
height = "80",
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const ContrastIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -6,7 +6,7 @@ export const CyclesIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
className,
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
|
||||
@ -13,7 +13,7 @@ export const DiscordIcon: React.FC<Props> = ({ width = "24", height = "24", clas
|
||||
>
|
||||
<g clipPath="url(#clip0_282_229)">
|
||||
<path
|
||||
fill={color ? color : "rgb(var(--color-text-200))"}
|
||||
fill={color ? color : "var(--color-neutral-110)"}
|
||||
d="M16.9312 3.64157C15.6346 3.04643 14.2662 2.62206 12.8604 2.37907C12.8476 2.37657 12.8343 2.37821 12.8225 2.38375C12.8106 2.38929 12.8009 2.39845 12.7946 2.4099C12.6196 2.7224 12.4246 3.1299 12.2879 3.45157C10.7724 3.22139 9.23088 3.22139 7.7154 3.45157C7.5633 3.09515 7.39165 2.7474 7.20123 2.4099C7.19467 2.39871 7.18486 2.38977 7.1731 2.38426C7.16135 2.37876 7.1482 2.37695 7.1354 2.37907C5.72944 2.62155 4.36101 3.04595 3.06457 3.64157C3.05359 3.64617 3.04429 3.65402 3.0379 3.66407C0.444567 7.53823 -0.266266 11.3166 0.0829005 15.0474C0.0837487 15.0567 0.0864772 15.0656 0.0909192 15.0738C0.0953611 15.082 0.101423 15.0892 0.108734 15.0949C1.6184 16.2134 3.30716 17.0672 5.1029 17.6199C5.11556 17.6236 5.12903 17.6233 5.14153 17.6191C5.15403 17.615 5.16497 17.6071 5.1729 17.5966C5.55895 17.072 5.90069 16.5162 6.19457 15.9349C6.19866 15.9269 6.20103 15.9182 6.2015 15.9093C6.20198 15.9003 6.20056 15.8914 6.19733 15.8831C6.1941 15.8747 6.18914 15.8671 6.18278 15.8609C6.17641 15.8546 6.16878 15.8497 6.1604 15.8466C5.62159 15.6404 5.09995 15.3918 4.6004 15.1032C4.59124 15.0979 4.58354 15.0905 4.57797 15.0815C4.5724 15.0725 4.56914 15.0622 4.56848 15.0517C4.56782 15.0411 4.56978 15.0306 4.57418 15.021C4.57859 15.0113 4.58531 15.003 4.59373 14.9966C4.69893 14.9179 4.80229 14.8367 4.90373 14.7532C4.91261 14.746 4.92331 14.7414 4.93464 14.74C4.94597 14.7385 4.95748 14.7402 4.9679 14.7449C8.24123 16.2391 11.7846 16.2391 15.0196 14.7449C15.0301 14.74 15.0418 14.7382 15.0533 14.7397C15.0648 14.7412 15.0756 14.7459 15.0846 14.7532C15.1846 14.8349 15.2896 14.9182 15.3954 14.9966C15.4037 15.0029 15.4104 15.0111 15.4148 15.0205C15.4193 15.03 15.4213 15.0404 15.4208 15.0508C15.4203 15.0612 15.4173 15.0714 15.412 15.0804C15.4067 15.0894 15.3993 15.0969 15.3904 15.1024C14.892 15.3937 14.3699 15.6424 13.8296 15.8457C13.8212 15.849 13.8135 15.8539 13.8071 15.8603C13.8008 15.8666 13.7958 15.8743 13.7926 15.8827C13.7894 15.8911 13.788 15.9001 13.7884 15.9091C13.7889 15.9181 13.7913 15.9269 13.7954 15.9349C14.0954 16.5166 14.4387 17.0699 14.8162 17.5957C14.824 17.6064 14.8349 17.6145 14.8475 17.6186C14.86 17.6228 14.8736 17.623 14.8862 17.6191C16.685 17.0681 18.3765 16.2142 19.8879 15.0941C19.8953 15.0889 19.9014 15.0822 19.906 15.0744C19.9106 15.0667 19.9135 15.058 19.9146 15.0491C20.3312 10.7349 19.2162 6.9874 16.9571 3.66573C16.9518 3.65453 16.9426 3.64564 16.9312 3.64073V3.64157ZM6.68373 12.7749C5.6979 12.7749 4.88623 11.8707 4.88623 10.7591C4.88623 9.64823 5.6829 8.74323 6.68373 8.74323C7.69207 8.74323 8.49707 9.65657 8.48123 10.7599C8.48123 11.8707 7.68457 12.7749 6.68373 12.7749ZM13.3296 12.7749C12.3437 12.7749 11.5321 11.8707 11.5321 10.7591C11.5321 9.64823 12.3279 8.74323 13.3296 8.74323C14.3379 8.74323 15.1429 9.65657 15.1271 10.7599C15.1271 11.8707 14.3387 12.7749 13.3296 12.7749Z"
|
||||
/>
|
||||
</g>
|
||||
|
||||
@ -16,7 +16,7 @@ export const GithubIcon: React.FC<Props> = ({ width = "24", height = "24", class
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 0C4.475 0 0 4.475 0 10C0 14.425 2.8625 18.1625 6.8375 19.4875C7.3375 19.575 7.525 19.275 7.525 19.0125C7.525 18.775 7.5125 17.9875 7.5125 17.15C5 17.6125 4.35 16.5375 4.15 15.975C4.0375 15.6875 3.55 14.8 3.125 14.5625C2.775 14.375 2.275 13.9125 3.1125 13.9C3.9 13.8875 4.4625 14.625 4.65 14.925C5.55 16.4375 6.9875 16.0125 7.5625 15.75C7.65 15.1 7.9125 14.6625 8.2 14.4125C5.975 14.1625 3.65 13.3 3.65 9.475C3.65 8.3875 4.0375 7.4875 4.675 6.7875C4.575 6.5375 4.225 5.5125 4.775 4.1375C4.775 4.1375 5.6125 3.875 7.525 5.1625C8.325 4.9375 9.175 4.825 10.025 4.825C10.875 4.825 11.725 4.9375 12.525 5.1625C14.4375 3.8625 15.275 4.1375 15.275 4.1375C15.825 5.5125 15.475 6.5375 15.375 6.7875C16.0125 7.4875 16.4 8.375 16.4 9.475C16.4 13.3125 14.0625 14.1625 11.8375 14.4125C12.2 14.725 12.5125 15.325 12.5125 16.2625C12.5125 17.6 12.5 18.675 12.5 19.0125C12.5 19.275 12.6875 19.5875 13.1875 19.4875C15.1726 18.8173 16.8976 17.5414 18.1197 15.8395C19.3418 14.1375 19.9994 12.0952 20 10C20 4.475 15.525 0 10 0Z"
|
||||
fill={color ? color : "rgb(var(--color-text-200))"}
|
||||
fill={color ? color : "var(--color-neutral-110)"}
|
||||
/>
|
||||
</g>
|
||||
<defs>
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const GridViewIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const HeartbeatIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const ImportLayersIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const InboxIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -6,7 +6,7 @@ export const LayerDiagonalIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
className,
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const PeopleGroupIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "16",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const RelatedIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const SettingIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -6,7 +6,7 @@ export const StackedLayersHorizontalIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
className,
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
|
||||
@ -6,7 +6,7 @@ export const StackedLayersIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
className,
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
|
||||
@ -6,7 +6,7 @@ export const TargetIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
className,
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const TickMarkIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -13,7 +13,7 @@ export const UserGroupIcon: React.FC<Props> = ({ width = "24", height = "24", cl
|
||||
>
|
||||
<path
|
||||
d="M14.754 10C15.72 10 16.504 10.784 16.504 11.75V16.499C16.504 17.6927 16.0298 18.8376 15.1857 19.6817C14.3416 20.5258 13.1967 21 12.003 21C10.8093 21 9.66441 20.5258 8.82031 19.6817C7.97621 18.8376 7.502 17.6927 7.502 16.499V11.75C7.502 10.784 8.285 10 9.252 10H14.754ZM14.754 11.5H9.252C9.1857 11.5 9.12211 11.5263 9.07522 11.5732C9.02834 11.6201 9.002 11.6837 9.002 11.75V16.499C9.002 17.2949 9.31818 18.0582 9.88097 18.621C10.4438 19.1838 11.2071 19.5 12.003 19.5C12.7989 19.5 13.5622 19.1838 14.125 18.621C14.6878 18.0582 15.004 17.2949 15.004 16.499V11.75C15.004 11.6837 14.9777 11.6201 14.9308 11.5732C14.8839 11.5263 14.8203 11.5 14.754 11.5ZM3.75 10H7.131C6.7782 10.4261 6.56274 10.949 6.513 11.5H3.75C3.6837 11.5 3.62011 11.5263 3.57322 11.5732C3.52634 11.6201 3.5 11.6837 3.5 11.75V14.999C3.49994 15.3769 3.5855 15.7499 3.75027 16.0899C3.91504 16.43 4.15473 16.7283 4.45133 16.9625C4.74793 17.1966 5.09374 17.3605 5.46277 17.4418C5.83179 17.5231 6.21445 17.5198 6.582 17.432C6.667 17.936 6.822 18.417 7.035 18.864C6.44228 19.0226 5.82103 19.0427 5.21929 18.9228C4.61756 18.8029 4.05145 18.5463 3.56475 18.1727C3.07805 17.7991 2.68379 17.3185 2.41246 16.7682C2.14114 16.2179 2.00001 15.6126 2 14.999V11.75C2 10.784 2.784 10 3.75 10ZM16.875 10H20.25C21.216 10 22 10.784 22 11.75V15C22.0001 15.6132 21.8593 16.2182 21.5884 16.7682C21.3175 17.3183 20.9237 17.7987 20.4376 18.1724C19.9514 18.546 19.3858 18.8029 18.7846 18.9232C18.1833 19.0435 17.5625 19.0239 16.97 18.866C17.184 18.418 17.339 17.937 17.425 17.433C17.7921 17.5198 18.174 17.5223 18.5423 17.4405C18.9105 17.3587 19.2554 17.1946 19.5512 16.9606C19.847 16.7265 20.086 16.4286 20.2503 16.089C20.4147 15.7495 20.5 15.3772 20.5 15V11.75C20.5 11.6837 20.4737 11.6201 20.4268 11.5732C20.3799 11.5263 20.3163 11.5 20.25 11.5H17.493C17.4433 10.949 17.2278 10.4261 16.875 10ZM12 3C12.7956 3 13.5587 3.31607 14.1213 3.87868C14.6839 4.44129 15 5.20435 15 6C15 6.79565 14.6839 7.55871 14.1213 8.12132C13.5587 8.68393 12.7956 9 12 9C11.2044 9 10.4413 8.68393 9.87868 8.12132C9.31607 7.55871 9 6.79565 9 6C9 5.20435 9.31607 4.44129 9.87868 3.87868C10.4413 3.31607 11.2044 3 12 3ZM18.5 4C19.163 4 19.7989 4.26339 20.2678 4.73223C20.7366 5.20107 21 5.83696 21 6.5C21 7.16304 20.7366 7.79893 20.2678 8.26777C19.7989 8.73661 19.163 9 18.5 9C17.837 9 17.2011 8.73661 16.7322 8.26777C16.2634 7.79893 16 7.16304 16 6.5C16 5.83696 16.2634 5.20107 16.7322 4.73223C17.2011 4.26339 17.837 4 18.5 4ZM5.5 4C6.16304 4 6.79893 4.26339 7.26777 4.73223C7.73661 5.20107 8 5.83696 8 6.5C8 7.16304 7.73661 7.79893 7.26777 8.26777C6.79893 8.73661 6.16304 9 5.5 9C4.83696 9 4.20107 8.73661 3.73223 8.26777C3.26339 7.79893 3 7.16304 3 6.5C3 5.83696 3.26339 5.20107 3.73223 4.73223C4.20107 4.26339 4.83696 4 5.5 4ZM12 4.5C11.6022 4.5 11.2206 4.65804 10.9393 4.93934C10.658 5.22064 10.5 5.60218 10.5 6C10.5 6.39782 10.658 6.77936 10.9393 7.06066C11.2206 7.34196 11.6022 7.5 12 7.5C12.3978 7.5 12.7794 7.34196 13.0607 7.06066C13.342 6.77936 13.5 6.39782 13.5 6C13.5 5.60218 13.342 5.22064 13.0607 4.93934C12.7794 4.65804 12.3978 4.5 12 4.5ZM18.5 5.5C18.2348 5.5 17.9804 5.60536 17.7929 5.79289C17.6054 5.98043 17.5 6.23478 17.5 6.5C17.5 6.76522 17.6054 7.01957 17.7929 7.20711C17.9804 7.39464 18.2348 7.5 18.5 7.5C18.7652 7.5 19.0196 7.39464 19.2071 7.20711C19.3946 7.01957 19.5 6.76522 19.5 6.5C19.5 6.23478 19.3946 5.98043 19.2071 5.79289C19.0196 5.60536 18.7652 5.5 18.5 5.5ZM5.5 5.5C5.23478 5.5 4.98043 5.60536 4.79289 5.79289C4.60536 5.98043 4.5 6.23478 4.5 6.5C4.5 6.76522 4.60536 7.01957 4.79289 7.20711C4.98043 7.39464 5.23478 7.5 5.5 7.5C5.76522 7.5 6.01957 7.39464 6.20711 7.20711C6.39464 7.01957 6.5 6.76522 6.5 6.5C6.5 6.23478 6.39464 5.98043 6.20711 5.79289C6.01957 5.60536 5.76522 5.5 5.5 5.5Z"
|
||||
fill={color ? color : "rgb(var(--color-text-200))"}
|
||||
fill={color ? color : "var(--color-neutral-110)"}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -5,7 +5,7 @@ import type { Props } from "./types";
|
||||
export const UsersIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
className,
|
||||
}) => (
|
||||
<svg
|
||||
|
||||
@ -6,7 +6,7 @@ export const ViewListIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
className,
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
|
||||
@ -6,7 +6,7 @@ export const WaterDropIcon: React.FC<Props> = ({
|
||||
width = "24",
|
||||
height = "24",
|
||||
className,
|
||||
color = "rgb(var(--color-text-200))",
|
||||
color = "var(--color-neutral-110)",
|
||||
}) => (
|
||||
<svg
|
||||
width={width}
|
||||
|
||||
@ -322,7 +322,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<CheckCircle2 className="text-green-500" size={14} strokeWidth={2} />}
|
||||
prependIcon={<CheckCircle2 className="text-success-text-medium" size={14} strokeWidth={2} />}
|
||||
onClick={() => setAcceptIssueModal(true)}
|
||||
>
|
||||
Accept
|
||||
@ -335,7 +335,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<XCircle className="text-red-500" size={14} strokeWidth={2} />}
|
||||
prependIcon={<XCircle className="text-danger-text-medium" size={14} strokeWidth={2} />}
|
||||
onClick={() => setDeclineIssueModal(true)}
|
||||
>
|
||||
Decline
|
||||
@ -348,7 +348,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
|
||||
<Button
|
||||
variant="neutral-primary"
|
||||
size="sm"
|
||||
prependIcon={<Trash2 className="text-red-500" size={14} strokeWidth={2} />}
|
||||
prependIcon={<Trash2 className="text-danger-text-medium" size={14} strokeWidth={2} />}
|
||||
onClick={() => setDeleteIssueModal(true)}
|
||||
>
|
||||
Delete
|
||||
|
||||
@ -59,7 +59,7 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSub
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-green-500/20 p-4">
|
||||
<span className="place-items-center rounded-full bg-success-component-surface-dark p-4">
|
||||
<CheckCircle className="h-6 w-6 text-green-600" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
|
||||
@ -59,8 +59,8 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, onClose, data, onSu
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
<span className="place-items-center rounded-full bg-danger-component-surface-dark p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-danger-text-medium" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Decline Issue</h3>
|
||||
|
||||
@ -62,8 +62,8 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
<span className="place-items-center rounded-full bg-danger-component-surface-dark p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-danger-text-medium" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
|
||||
|
||||
@ -78,13 +78,13 @@ export const InboxIssueAppliedFilter: FC<TInboxIssueAppliedFilter> = observer((p
|
||||
key={priority}
|
||||
className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 capitalize ${
|
||||
priority === "urgent"
|
||||
? "bg-red-500/20 text-red-500"
|
||||
? "bg-danger-component-surface-dark text-danger-text-medium"
|
||||
: priority === "high"
|
||||
? "bg-orange-500/20 text-orange-500"
|
||||
: priority === "medium"
|
||||
? "bg-yellow-500/20 text-yellow-500"
|
||||
: priority === "low"
|
||||
? "bg-green-500/20 text-green-500"
|
||||
? "bg-success-component-surface-dark text-success-text-medium"
|
||||
: "bg-neutral-component-surface-medium text-neutral-text-medium"
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -95,8 +95,8 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-red-500" aria-hidden="true" />
|
||||
<span className="place-items-center rounded-full bg-danger-component-surface-dark p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-danger-text-medium" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
|
||||
|
||||
@ -57,7 +57,9 @@ export const JiraGetImportDetail: React.FC = observer(() => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.metadata?.api_token && <p className="text-red-500 text-xs">{errors.metadata.api_token.message}</p>}
|
||||
{errors.metadata?.api_token && (
|
||||
<p className="text-danger-text-medium text-xs">{errors.metadata.api_token.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -87,7 +89,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
|
||||
)}
|
||||
/>
|
||||
{errors.metadata?.project_key && (
|
||||
<p className="text-red-500 text-xs">{errors.metadata.project_key.message}</p>
|
||||
<p className="text-danger-text-medium text-xs">{errors.metadata.project_key.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -118,7 +120,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.metadata?.email && <p className="text-red-500 text-xs">{errors.metadata.email.message}</p>}
|
||||
{errors.metadata?.email && <p className="text-danger-text-medium text-xs">{errors.metadata.email.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -148,7 +150,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
|
||||
)}
|
||||
/>
|
||||
{errors.metadata?.cloud_hostname && (
|
||||
<p className="text-red-500 text-xs">{errors.metadata.cloud_hostname.message}</p>
|
||||
<p className="text-danger-text-medium text-xs">{errors.metadata.cloud_hostname.message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -27,11 +27,11 @@ export const SingleImport: React.FC<Props> = ({ service, refreshing, handleDelet
|
||||
<span
|
||||
className={`rounded px-2 py-0.5 text-xs capitalize ${
|
||||
service.status === "completed"
|
||||
? "bg-green-500/20 text-green-500"
|
||||
? "bg-success-component-surface-dark text-success-text-medium"
|
||||
: service.status === "processing"
|
||||
? "bg-yellow-500/20 text-yellow-500"
|
||||
: service.status === "failed"
|
||||
? "bg-red-500/20 text-red-500"
|
||||
? "bg-danger-component-surface-dark text-danger-text-medium"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
|
||||
@ -116,7 +116,7 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
|
||||
<h3 className="flex items-center gap-2 text-sm font-medium">
|
||||
{integration.title}
|
||||
{workspaceIntegrations
|
||||
? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-green-500" />
|
||||
? isInstalled && <CheckCircle className="h-3.5 w-3.5 fill-transparent text-success-text-medium" />
|
||||
: null}
|
||||
</h3>
|
||||
<p className="text-sm tracking-tight text-neutral-text-medium">
|
||||
|
||||
@ -70,7 +70,7 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
|
||||
{isDragActive ? (
|
||||
<p>Drop here...</p>
|
||||
) : fileError ? (
|
||||
<p className="text-center text-red-500">{fileError}</p>
|
||||
<p className="text-center text-danger-text-medium">{fileError}</p>
|
||||
) : isLoading ? (
|
||||
<p className="text-center">Uploading...</p>
|
||||
) : (
|
||||
|
||||
@ -65,7 +65,7 @@ export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
|
||||
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
|
||||
<div className="sm:flex sm:items-start">
|
||||
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
<AlertTriangle className="h-6 w-6 text-danger-text-medium" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
|
||||
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-neutral-text-strong">
|
||||
|
||||
@ -97,8 +97,8 @@ export const DeleteArchivedIssueModal: React.FC<Props> = observer((props) => {
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
<span className="place-items-center rounded-full bg-danger-component-surface-dark p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-danger-text-medium" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Archived Issue</h3>
|
||||
|
||||
@ -102,8 +102,8 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<span className="place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
<span className="place-items-center rounded-full bg-danger-component-surface-dark p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-danger-text-medium" aria-hidden="true" />
|
||||
</span>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Draft Issue</h3>
|
||||
|
||||
@ -88,8 +88,8 @@ export const DeleteIssueModal: React.FC<Props> = (props) => {
|
||||
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-neutral-component-surface-light text-left shadow-custom-shadow-md transition-all sm:my-8 sm:w-full sm:max-w-2xl">
|
||||
<div className="flex flex-col gap-6 p-6">
|
||||
<div className="flex w-full items-center justify-start gap-6">
|
||||
<div className="grid place-items-center rounded-full bg-red-500/20 p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-red-600" aria-hidden="true" />
|
||||
<div className="grid place-items-center rounded-full bg-danger-component-surface-dark p-4">
|
||||
<AlertTriangle className="h-6 w-6 text-danger-text-medium" aria-hidden="true" />
|
||||
</div>
|
||||
<span className="flex items-center justify-start">
|
||||
<h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user