chore: use tailwind/primeui

fbraem · Nov 30, 2024 · 127c336 · 127c336
1 parent ee5449b
commit 127c336
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 18 deletions.
diff --git a/frontend/apps/coach/package.json b/frontend/apps/coach/package.json
@@ -13,6 +13,7 @@
     "@tanstack/vue-query": "^5.32.0",
     "@vuepic/vue-datepicker": "9.0.3",
     "@vueuse/core": "11.0.3",
+    "tailwindcss-primeui": "^0.3.4",
     "vee-validate": "^4.12.6",
     "vue": "^3.4.25",
     "vue-i18n": "^9.13.1",

diff --git a/frontend/apps/coach/src/index.ts b/frontend/apps/coach/src/index.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import App from '@root/App.vue';
 import '@root/index.css';
+import '@root/style.css';
 
 import { createRouter, createWebHistory } from 'vue-router';
 import routes from '@root/routes';

diff --git a/frontend/apps/coach/src/pages/training_definitions/GenerateTrainingsPage.vue b/frontend/apps/coach/src/pages/training_definitions/GenerateTrainingsPage.vue
@@ -6,7 +6,7 @@ import {
   ContainerSectionBanner,
   ContainerSectionContent,
   ContainerSectionTitle,
-  DateRangePicker,
+  KwaiDateRangePicker,
   DeleteIcon,
   InfoAlert,
   KwaiButton,
@@ -94,7 +94,7 @@ const saveTrainings = () => {
         </template>
         <template #right>
           <div class="flex sm:flex-col gap-4">
-            <DateRangePicker
+            <KwaiDateRangePicker
               name="period"
               :time="false"
             />

diff --git a/frontend/apps/coach/src/pages/training_definitions/components/TrainingDefinitionForm.vue b/frontend/apps/coach/src/pages/training_definitions/components/TrainingDefinitionForm.vue
@@ -13,7 +13,7 @@ import {
   InputField,
   SelectOption,
   TextareaField,
-  TimePicker,
+  KwaiTimePicker,
   isStringRequired,
 } from '@kwai/ui';
 import type { Option, TimeModel } from '@kwai/ui';
@@ -225,7 +225,7 @@ watch(definition, nv => {
             </span>
           </template>
         </SelectOption>
-        <TimePicker
+        <KwaiTimePicker
           name="start_time"
           :required="true"
           :placeholder="t('training_definition.form.sections.period.fields.start_time.placeholder')"
@@ -235,8 +235,8 @@ watch(definition, nv => {
               {{ t('training_definition.form.sections.period.fields.start_time.label') }}&nbsp;:
             </span>
           </template>
-        </TimePicker>
-        <TimePicker
+        </KwaiTimePicker>
+        <KwaiTimePicker
           name="end_time"
           :required="true"
           :placeholder="t('training_definition.form.sections.period.fields.end_time.placeholder')"
@@ -246,7 +246,7 @@ watch(definition, nv => {
               {{ t('training_definition.form.sections.period.fields.end_time.label') }}&nbsp;:
             </span>
           </template>
-        </TimePicker>
+        </KwaiTimePicker>
       </FormSectionFields>
     </FormSection>
     <FormSection :title="t('training.form.sections.remark.title')">

diff --git a/frontend/apps/coach/src/pages/trainings/components/TrainingForm.vue b/frontend/apps/coach/src/pages/trainings/components/TrainingForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import {
   CheckBox,
-  DatePicker,
+  KwaiDatePicker,
   ErrorAlert,
   FormSection,
   FormSectionFields,
@@ -260,7 +260,7 @@ const applyDefinition = () => {
         {{ t('training.form.sections.date.description') }}
       </template>
       <FormSectionFields class="bg-white">
-        <DatePicker
+        <KwaiDatePicker
           name="start_date"
           :time="true"
           :placeholder="t('training.form.sections.date.fields.start_date.placeholder')"
@@ -272,8 +272,8 @@ const applyDefinition = () => {
               {{ t('training.form.sections.date.fields.start_date.label') }}&nbsp;:
             </span>
           </template>
-        </DatePicker>
-        <DatePicker
+        </KwaiDatePicker>
+        <KwaiDatePicker
           name="end_date"
           :time="true"
           :placeholder="t('training.form.sections.date.fields.end_date.placeholder')"
@@ -285,7 +285,7 @@ const applyDefinition = () => {
               {{ t('training.form.sections.date.fields.end_date.label') }}&nbsp;:
             </span>
           </template>
-        </DatePicker>
+        </KwaiDatePicker>
         <CheckBox
           name="cancelled"
           :label="t('training.form.sections.date.fields.cancelled.label')"

diff --git a/frontend/apps/coach/src/style.css b/frontend/apps/coach/src/style.css
@@ -0,0 +1,73 @@
+/* Primary and Surface Palettes */
+:root {
+    --p-primary-50: #fff7ed;
+    --p-primary-100: #ffedd5;
+    --p-primary-200: #fed7aa;
+    --p-primary-300: #fdba74;
+    --p-primary-400: #fb923c;
+    --p-primary-500: #f97316;
+    --p-primary-600: #ea580c;
+    --p-primary-700: #c2410c;
+    --p-primary-800: #9a3412;
+    --p-primary-900: #7c2d12;
+    --p-surface-0: #ffffff;
+    --p-surface-50: #fafafa;
+    --p-surface-100: #f4f4f5;
+    --p-surface-200: #e4e4e7;
+    --p-surface-300: #d4d4d8;
+    --p-surface-400: #a1a1aa;
+    --p-surface-500: #71717a;
+    --p-surface-600: #52525b;
+    --p-surface-700: #3f3f46;
+    --p-surface-800: #27272a;
+    --p-surface-900: #18181b;
+    --p-surface-950: #09090b;
+    --p-content-border-radius: 6px;
+}
+
+/* Light */
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+/*
+ * Dark Mode
+ * Defaults to system, change the selector to match the darkMode in tailwind.config.
+ * For example;
+ * darkMode: ['selector', '[class*="app-dark"]']
+ * should be;
+ * :root[class="app-dark"] {
+*/
+@media (prefers-color-scheme: dark) {
+    :root {
+        --p-primary-color: var(--p-primary-400);
+        --p-primary-contrast-color: var(--p-surface-900);
+        --p-primary-hover-color: var(--p-primary-300);
+        --p-primary-active-color: var(--p-primary-200);
+        --p-content-border-color: var(--p-surface-700);
+        --p-content-hover-background: var(--p-surface-800);
+        --p-content-hover-color: var(--p-surface-0);
+        --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+        --p-highlight-color: rgba(255, 255, 255, 0.87);
+        --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+        --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
+        --p-text-color: var(--p-surface-0);
+        --p-text-hover-color: var(--p-surface-0);
+        --p-text-muted-color: var(--p-surface-400);
+        --p-text-hover-muted-color: var(--p-surface-300);
+    }
+}
diff --git a/frontend/apps/coach/tailwind.config.js b/frontend/apps/coach/tailwind.config.js
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
-import colors from 'tailwindcss/colors';
+import primeui from 'tailwindcss-primeui';
+
 module.exports = {
   content: [
     './index.html',
@@ -8,11 +9,7 @@ module.exports = {
   ],
   theme: {
     extend: {
-      colors: {
-        primary: colors.orange,
-        'primary-text': colors.white,
-      },
     },
   },
-  plugins: [],
+  plugins: [primeui],
 };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json