Improve VCard design

tough-dev-school · Nov 28, 2023 · fd8aed3 · fd8aed3
1 parent 01534a8
commit fd8aed3
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/components/VCard/VCard.vue b/src/components/VCard/VCard.vue
@@ -11,10 +11,16 @@
 <template>
   <component
     :is="tag"
-    class="overflow-hidden rounded bg-white dark:bg-darkmode-layer2 p-16 shadow phone:px-24 tablet:px-32">
+    :class="{
+      'overflow-hidden rounded bg-white  p-24 pt-16 border border-gray ': true,
+      'dark:border-darkmode-border dark:bg-darkmode-layer2': true,
+    }">
     <slot />
     <footer
-      class="grow-children mt-32 flex flex-wrap justify-end gap-8 border-t border-gray border-opacity-20 pt-16 empty:hidden phone:gap-16 phone:pt-24 phone:pb-16">
+      :class="{
+        'grow-children mt-32 flex flex-wrap justify-end gap-8 empty:hidden phone:gap-16 ': true,
+        'dark:border-darkmode-white dark:border-opacity-100': true,
+      }">
       <slot name="footer" />
     </footer>
   </component>

diff --git a/src/views/VHomeworkAnswerView/VHomeworkAnswerView.vue b/src/views/VHomeworkAnswerView/VHomeworkAnswerView.vue
@@ -51,7 +51,7 @@
   <div v-if="question !== undefined && answer !== undefined">
     <section class="mb-64 flex flex-col gap-24">
       <VHeading tag="h1">{{ question.name }}</VHeading>
-      <VCard tag="details">
+      <VCard tag="details" class="pt-24">
         <summary>Показать задание</summary>
         <VHtmlContent :content="question.text" class="mt-16" />
       </VCard>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -35,7 +35,7 @@ const config: Config = {
       'darkmode-red': { DEFAULT: '#fb4934' },
       black: { DEFAULT: '#000000' },
       blue: { DEFAULT: '#3f5dff', hover: '#0024de' },
-      gray: { DEFAULT: '#9a9a9a' },
+      gray: { DEFAULT: 'rgb(218, 216, 206)' },
       green: { DEFAULT: 'rgb(35, 207, 104)' },
       lightblue: { DEFAULT: '#ADD8E6', hover: '#0024de' },
       lightgray: { DEFAULT: '#e3e3e3' },