feat: Tailwind - add queue colors

winetree94 · Sep 5, 2023 · 6d466e8 · 6d466e8
1 parent ec72eb8
commit 6d466e8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/src/app/welcome-panel/Welcome.tsx b/src/app/welcome-panel/Welcome.tsx
@@ -59,24 +59,24 @@ export const Welcome = memo(() => {
         'tw-justify-center',
         'tw-items-center',
       )}>
-      <div className="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-justify-between tw-w-[350px] tw-h-[500px] tw-px-9 tw-pt-[64px] tw-pb-4 tw-border tw-border-queue-500 tw-rounded-[36px]">
+      <div className="tw-relative tw-overflow-hidden tw-flex tw-flex-col tw-justify-between tw-w-[350px] tw-h-[500px] tw-px-9 tw-pt-[64px] tw-pb-4 tw-border tw-border-queue-700 tw-rounded-[36px]">
         <div>
-          <h1 className="tw-font-ibm tw-text-[36px] tw-leading-none tw-text-queue-500 tw-text-center">
+          <h1 className="tw-font-ibm tw-text-[36px] tw-leading-none tw-text-queue-700 tw-text-center">
             .Qdocs
           </h1>
-          <p className="tw-mt-2 tw-font-ibm tw-font-normal tw-leading-none tw-text-queue-500 tw-text-center">
+          <p className="tw-mt-2 tw-font-ibm tw-font-normal tw-leading-none tw-text-queue-700 tw-text-center">
             Play documents
           </p>
         </div>
         <div className="tw-flex tw-flex-col tw-gap-2">
           {/* TODO button component 사용할 지 살펴보기 */}
           <button
-            className="tw-flex tw-justify-center tw-items-center tw-p-4 tw-rounded-full tw-bg-queue-500 tw-text-white-100 tw-leading-none tw-text-sm tw-font-medium"
+            className="tw-flex tw-justify-center tw-items-center tw-p-4 tw-rounded-full tw-bg-queue-700 tw-text-white-100 tw-leading-none tw-text-sm tw-font-medium"
             onClick={onNewDocumentClick}>
             {t('welcome.new-document')}
           </button>
           <button
-            className="tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-queue-500 tw-text-sm tw-font-medium"
+            className="tw-flex tw-justify-center tw-items-center tw-p-4 tw-text-queue-700 tw-text-sm tw-font-medium"
             onClick={startFileChooser}>
             {t('welcome.open-document')}
           </button>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -30,9 +30,17 @@ module.exports = {
           '500': '#A2A3C3',
         },
         queue: {
-          '300': '#7D7EFF',
-          '400': '#533BB1',
-          '500': '#533BB1',
+          '50': '#eff1fe',
+          '100': '#e2e5fd',
+          '200': '#cbcefa',
+          '300': '#abaef6',
+          '400': '#8c89f0',
+          '500': '#7b6de7',
+          '600': '#6b51da',
+          '700': '#533BB1',
+          '800': '#4b389b',
+          '900': '#3f347b',
+          '950': '#261e48',
         },
         black: {
           '900': '#000000',