From 4186546e512dd050a794a00b30ed8cdf2e265ac5 Mon Sep 17 00:00:00 2001
From: Nassim Jahnke <jahnke.nassim@gmail.com>
Date: Sat, 2 Apr 2022 21:32:56 +0200
Subject: [PATCH] Update close and disabled buttons

---
 frontend-new/src/components/design/Button.vue              | 6 +++---
 frontend-new/src/components/modals/ChannelModal.vue        | 2 +-
 frontend-new/src/components/modals/DeletePageModal.vue     | 2 +-
 frontend-new/src/components/modals/DiffModal.vue           | 2 +-
 frontend-new/src/components/modals/MarkdownModal.vue       | 2 +-
 frontend-new/src/components/modals/NewPageModal.vue        | 2 +-
 frontend-new/src/components/modals/TaglineModal.vue        | 7 +++----
 frontend-new/src/components/modals/TextAreaModal.vue       | 2 +-
 .../src/components/modals/VisibilityChangerModal.vue       | 2 +-
 frontend-new/windi.config.ts                               | 4 +++-
 10 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend-new/src/components/design/Button.vue b/frontend-new/src/components/design/Button.vue
index 0c2d4632..c1de8947 100644
--- a/frontend-new/src/components/design/Button.vue
+++ b/frontend-new/src/components/design/Button.vue
@@ -8,10 +8,12 @@ const props = withDefaults(
   defineProps<{
     disabled?: boolean;
     size?: "small" | "medium" | "large";
+    type?: "primary" | "gray";
   }>(),
   {
     disabled: false,
     size: "small",
+    type: "primary",
   }
 );
 const paddingClass = computed(() => {
@@ -32,9 +34,7 @@ const paddingClass = computed(() => {
 
 <template>
   <button
-    :class="
-      'rounded-md text-white font-semibold h-min inline-flex items-center ' + paddingClass + (disabled ? ' bg-gray-500 cursor-not-allowed' : ' bg-primary-100')
-    "
+    :class="'rounded-md text-white font-semibold h-min inline-flex items-center ' + paddingClass + ' button-' + type"
     :hover="disabled ? '' : 'bg-primary-50 text-primary-100'"
     :disabled="disabled"
     v-bind="$attrs"
diff --git a/frontend-new/src/components/modals/ChannelModal.vue b/frontend-new/src/components/modals/ChannelModal.vue
index 2e578457..4c984b9e 100644
--- a/frontend-new/src/components/modals/ChannelModal.vue
+++ b/frontend-new/src/components/modals/ChannelModal.vue
@@ -21,7 +21,7 @@ const i18n = useI18n();
     <template #default="{ on }">
       <!-- todo implement channel modal -->
 
-      <Button class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
diff --git a/frontend-new/src/components/modals/DeletePageModal.vue b/frontend-new/src/components/modals/DeletePageModal.vue
index 7c596ce7..4270fae4 100644
--- a/frontend-new/src/components/modals/DeletePageModal.vue
+++ b/frontend-new/src/components/modals/DeletePageModal.vue
@@ -14,8 +14,8 @@ const i18n = useI18n();
   <Modal :title="i18n.t('page.delete.title')">
     <template #default="{ on }">
       <p>{{ i18n.t("page.delete.text") }}</p>
-      <Button class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
       <Button class="mt-2 ml-2" @click="emit('delete')">{{ i18n.t("general.delete") }}</Button>
+      <Button type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
diff --git a/frontend-new/src/components/modals/DiffModal.vue b/frontend-new/src/components/modals/DiffModal.vue
index b69e324f..ad1d38c0 100644
--- a/frontend-new/src/components/modals/DiffModal.vue
+++ b/frontend-new/src/components/modals/DiffModal.vue
@@ -54,7 +54,7 @@ const prettyDiff = computed(() => {
       <!-- eslint-disable-next-line vue/no-v-html -->
       <div v-html="prettyDiff"></div>
 
-      <Button class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
diff --git a/frontend-new/src/components/modals/MarkdownModal.vue b/frontend-new/src/components/modals/MarkdownModal.vue
index 179f51a9..7667324f 100644
--- a/frontend-new/src/components/modals/MarkdownModal.vue
+++ b/frontend-new/src/components/modals/MarkdownModal.vue
@@ -17,7 +17,7 @@ const i18n = useI18n();
     <template #default="{ on }">
       <Markdown :raw="markdown"></Markdown>
 
-      <Button class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
diff --git a/frontend-new/src/components/modals/NewPageModal.vue b/frontend-new/src/components/modals/NewPageModal.vue
index 811fa2a5..cbe4f912 100644
--- a/frontend-new/src/components/modals/NewPageModal.vue
+++ b/frontend-new/src/components/modals/NewPageModal.vue
@@ -92,8 +92,8 @@ async function createPage() {
         <InputSelect v-model="parent" :values="pageRoots" :label="i18n.t('page.new.parent')" />
       </div>
       <div>
-        <Button class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
         <Button class="mt-2 ml-2" :disabled="validateLoading || loading" @click="createPage">{{ i18n.t("general.create") }}</Button>
+        <Button type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
       </div>
     </template>
     <template #activator="{ on }">
diff --git a/frontend-new/src/components/modals/TaglineModal.vue b/frontend-new/src/components/modals/TaglineModal.vue
index 106ba736..1c496c2b 100644
--- a/frontend-new/src/components/modals/TaglineModal.vue
+++ b/frontend-new/src/components/modals/TaglineModal.vue
@@ -40,10 +40,9 @@ async function save() {
   <Modal :title="i18n.t('author.editTagline')">
     <template #default="{ on }">
       <InputText v-model.trim="newTagline" :label="i18n.t('author.taglineLabel')" counter :maxlength="backendData.validations.userTagline.max" />
-
-      <Button size="medium" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
-      <Button size="medium" class="mt-2 ml-2" @click="newTagline = tagline">{{ i18n.t("general.reset") }}</Button>
-      <Button size="medium" class="mt-2 ml-2" @click="save">{{ i18n.t("general.change") }}</Button>
+      <br />
+      <Button size="medium" class="mt-2" @click="save">{{ i18n.t("general.change") }}</Button>
+      <Button type="gray" size="medium" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <Button size="small" class="ml-2 inline-flex" v-on="on">
diff --git a/frontend-new/src/components/modals/TextAreaModal.vue b/frontend-new/src/components/modals/TextAreaModal.vue
index dc79a13b..ca20c43d 100644
--- a/frontend-new/src/components/modals/TextAreaModal.vue
+++ b/frontend-new/src/components/modals/TextAreaModal.vue
@@ -29,8 +29,8 @@ async function _submit(close: () => void) {
     <template #default="{ on }">
       <InputTextarea v-model.trim="message" :label="label" :rows="2" @keydown.enter.prevent="" />
 
-      <Button class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
       <Button class="mt-2 ml-2" :disabled="loading" @click="_submit(on.click)">{{ i18n.t("general.submit") }}</Button>
+      <Button type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>
diff --git a/frontend-new/src/components/modals/VisibilityChangerModal.vue b/frontend-new/src/components/modals/VisibilityChangerModal.vue
index 6ee108d7..349a4a10 100644
--- a/frontend-new/src/components/modals/VisibilityChangerModal.vue
+++ b/frontend-new/src/components/modals/VisibilityChangerModal.vue
@@ -49,8 +49,8 @@ async function submit(closeModal: () => void): Promise<void> {
 
       <InputTextarea v-if="showTextarea" v-model.trim="reason" rows="2" :label="i18n.t('visibility.modal.reason')" />
 
-      <Button class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
       <Button class="mt-2 ml-2" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
+      <Button type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <Button v-bind="$attrs" class="mr-1" v-on="on">
diff --git a/frontend-new/windi.config.ts b/frontend-new/windi.config.ts
index 49c367d7..c539543d 100644
--- a/frontend-new/windi.config.ts
+++ b/frontend-new/windi.config.ts
@@ -4,7 +4,7 @@ import typography from "windicss/plugin/typography";
 
 export default defineConfig({
   darkMode: "class",
-  safelist: "order-last",
+  safelist: "order-last button-primary button-gray",
   attributify: true,
   plugins: [typography()],
   theme: {
@@ -73,5 +73,7 @@ export default defineConfig({
     "background-body": "bg-background-light-10 dark:bg-background-dark-80",
     "color-primary": "text-primary-100 dark:text-primary-70",
     "border-top-primary": "border-solid border-t-4 border-t-primary-100",
+    "button-gray": "bg-zinc-500 dark:bg-slate-700 disabled:(bg-gray-300 text-neutral-500 cursor-not-allowed)",
+    "button-primary": "bg-primary-100 disabled:(bg-gray-300 text-neutral-500 cursor-not-allowed)",
   },
 });