more refactoring, fixes and buttons

frontend-new/src/components/design/Button.vue

@@ -10,7 +10,7 @@ const props = withDefaults(
   defineProps<{
     disabled?: boolean;
     size?: "small" | "medium" | "large";
-    buttonType?: "primary" | "gray" | "red" | "transparent";
+    buttonType?: "primary" | "secondary" | "red" | "transparent";
     loading?: boolean;
     to?: string | RouteLocationRaw | object;
   }>(),
@@ -42,7 +42,11 @@ const paddingClass = computed(() => {
   <component
     :is="to ? 'router-link' : 'button'"
     :class="
-      'rounded-md font-semibold h-min inline-flex items-center justify-center ' + paddingClass + ' button-' + buttonType + (loading ? ' !cursor-wait' : '')
+      'rounded-md font-semibold h-min inline-flex items-center justify-center text-white disabled:(bg-gray-300 cursor-not-allowed) disabled:dark:(text-gray-500 bg-gray-700) ' +
+      paddingClass +
+      ' button-' +
+      buttonType +
+      (loading ? ' !cursor-wait' : '')
     "
     :disabled="disabled || loading"
     :to="to"

frontend-new/src/components/modals/ChannelModal.vue

@@ -94,7 +94,7 @@ reset();
       <Button button-type="primary" class="mt-2" :disabled="v.$invalid" @click="create(on.click)">{{
         edit ? i18n.t("general.save") : i18n.t("general.create")
       }}</Button>
-      <Button button-type="gray" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>

frontend-new/src/components/modals/DeletePageModal.vue

@@ -15,7 +15,7 @@ const i18n = useI18n();
     <template #default="{ on }">
       <p>{{ i18n.t("page.delete.text") }}</p>
       <Button class="mt-2" @click="emit('delete')">{{ i18n.t("general.delete") }}</Button>
-      <Button button-type="gray" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>

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 button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>

frontend-new/src/components/modals/MarkdownModal.vue

@@ -17,7 +17,7 @@ const i18n = useI18n();
     <template #default="{ on }">
       <Markdown :raw="markdown"></Markdown>
 
-      <Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>

frontend-new/src/components/modals/Modal.vue

@@ -24,7 +24,7 @@ function close() {
       <div class="flex items-center justify-center min-h-screen">
         <DialogOverlay class="fixed inset-0 bg-black opacity-30" />
 
-        <div class="relative max-w-sm mx-auto bg-white rounded p-4" dark="bg-background-dark-80">
+        <div class="relative max-w-sm mx-auto background-default rounded p-4">
           <h2 class="font-bold text-xl mb-2">{{ props.title }}</h2>
           <slot :on="{ click: close }"></slot>
         </div>

frontend-new/src/components/modals/NewPageModal.vue

@@ -93,7 +93,7 @@ async function createPage() {
       </div>
       <div>
         <Button class="mt-2" :disabled="validateLoading || loading" @click="createPage">{{ i18n.t("general.create") }}</Button>
-        <Button button-type="gray" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+        <Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
       </div>
     </template>
     <template #activator="{ on }">

frontend-new/src/components/modals/OrgVisibilityModal.vue

@@ -47,7 +47,7 @@ async function changeOrgVisibility(org: string) {
         </li>
       </ul>
 
-      <Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <Button v-on="on"><IconMdiPencil /></Button>

frontend-new/src/components/modals/PlatformVersionEditModal.vue

@@ -58,7 +58,7 @@ async function save() {
         </li>
       </ul>
 
-      <Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
       <Button button-type="primary" class="mt-2 ml-2" :disabled="loading" @click="save">{{ i18n.t("general.save") }}</Button>
     </template>
     <template #activator="{ on }">

frontend-new/src/components/modals/TaglineModal.vue

@@ -42,7 +42,7 @@ async function save() {
       <InputText v-model.trim="newTagline" :label="i18n.t('author.taglineLabel')" counter :maxlength="backendData.validations.userTagline.max" />
       <br />
       <Button size="medium" class="mt-2" @click="save">{{ i18n.t("general.change") }}</Button>
-      <Button button-type="gray" size="medium" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" 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">

frontend-new/src/components/modals/TextAreaModal.vue

@@ -30,7 +30,7 @@ async function _submit(close: () => void) {
       <InputTextarea v-model.trim="message" :label="label" :rows="2" @keydown.enter.prevent="" />
 
       <Button class="mt-2 ml-2" :disabled="loading" @click="_submit(on.click)">{{ i18n.t("general.submit") }}</Button>
-      <Button button-type="gray" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" class="mt-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <slot name="activator" :on="on"></slot>

frontend-new/src/components/modals/VisibilityChangerModal.vue

@@ -51,7 +51,7 @@ 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" @click="submit(on.click)">{{ i18n.t("general.submit") }}</Button>
-      <Button button-type="gray" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
+      <Button button-type="secondary" class="mt-2 ml-2" v-on="on">{{ i18n.t("general.close") }}</Button>
     </template>
     <template #activator="{ on }">
       <Button v-bind="$attrs" class="mr-1" v-on="on">

frontend-new/src/components/projects/MemberList.vue

@@ -125,7 +125,7 @@ interface EditableMember {
     <div
       v-for="member in modelValue"
       :key="member.user.name"
-      class="p-2 w-full border border-neutral-100 dark:border-neutral-800 rounded inline-flex flex-row space-x-4"
+      class="p-2 w-full border border-gray-100 dark:border-gray-800 rounded inline-flex flex-row space-x-4"
     >
       <UserAvatar :username="member.user.name" :avatar-url="avatarUrl(member.user.name)" size="sm" />
       <div class="flex-grow">

frontend-new/src/components/projects/ProjectHeader.vue

@@ -80,7 +80,7 @@ function toggleWatch() {
               <span v-else-if="starred">{{ i18n.t("project.actions.unstar") }}</span>
               <span v-else>{{ i18n.t("project.actions.star") }}</span>
             </template>
-            <Button button-type="gray" size="small" :disabled="canStarOrWatch" @click="toggleStar">
+            <Button button-type="secondary" size="small" :disabled="canStarOrWatch" @click="toggleStar">
               <IconMdiStar v-if="starred" />
               <IconMdiStarOutline v-else />
               <span class="ml-2">{{ project.stats.stars }}</span>
@@ -94,7 +94,7 @@ function toggleWatch() {
               <span v-else-if="starred">{{ i18n.t("project.actions.unwatch") }}</span>
               <span v-else>{{ i18n.t("project.actions.watch") }}</span>
             </template>
-            <Button button-type="gray" size="small" :disabled="canStarOrWatch" @click="toggleWatch">
+            <Button button-type="secondary" size="small" :disabled="canStarOrWatch" @click="toggleWatch">
               <IconMdiBell v-if="watching" />
               <IconMdiBellOutline v-else />
               <span class="ml-2">{{ project.stats.watchers }}</span>

frontend-new/src/components/projects/ProjectNav.vue

@@ -23,7 +23,7 @@ function childRoute(route = ""): string {
 </script>
 
 <template>
-  <nav class="mt-3 mb-4 flex flex-wrap border-b-2 border-neutral-200 dark:border-neutral-800">
+  <nav class="mt-3 mb-4 flex flex-wrap border-b-2 border-gray-200 dark:border-gray-800">
     <ProjectNavItem :to="childRoute()">
       {{ i18n.t("project.tabs.docs") }}
     </ProjectNavItem>

frontend-new/src/components/ui/InputWrapper.vue

@@ -17,10 +17,10 @@ const props = defineProps<{
   <ErrorTooltip :error-messages="errors" class="w-full" :class="{ filled: value, error: hasError }">
     <label
       :class="[
-        'relative flex w-full outline-none p-2 border-bottom-1px rounded',
-        'bg-primary-light-200 border-gray-400 dark:(bg-primary-300/8 border-gray-500)',
-        'focus:(bg-primary-200/5 dark:bg-primary-200/10 border-primary-400)',
-        'error:(border-red-400) disabled:(bg-black-15 text-black-50)',
+        'relative flex w-full outline-none p-2 border-1px rounded',
+        'border-gray-500',
+        'focus:border-primary-400',
+        'error:border-red-400',
         'transition duration-200 ease',
       ]"
     >

frontend-new/src/pages/[user]/[project]/versions/[version]/[platform]/reviews.vue

@@ -370,7 +370,7 @@ useHead(
             </Button>
           </div>
           <div v-else-if="currentUserReview === review" class="text-right">
-            <Button v-if="currentReviewLastAction === 'STOP'" size="small" button-type="gray" :loading="loadingValues.reopen" @click="reopenReview">
+            <Button v-if="currentReviewLastAction === 'STOP'" size="small" button-type="secondary" :loading="loadingValues.reopen" @click="reopenReview">
               <IconMdiRefresh />
               {{ t("reviews.reopenReview") }}
             </Button>

frontend-new/src/pages/index.vue

@@ -117,7 +117,7 @@ useHead(meta);
       />
       <!-- Sorting Button -->
       <Menu>
-        <MenuButton class="bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-r-md text-left font-semibold flex items-center gap-2 text-gray-50 p-2">
+        <MenuButton class="bg-gradient-to-r from-[#004ee9] to-[#367aff] rounded-r-md text-left font-semibold flex items-center gap-2 text-white p-2">
           <span class="whitespace-nowrap">{{ i18n.t("hangar.projectSearch.sortBy") }}</span>
           <icon-mdi-sort-variant class="text-xl pointer-events-none" />
         </MenuButton>
@@ -131,7 +131,7 @@ useHead(meta);
         >
           <MenuItems class="absolute right-0 top-16 flex flex-col z-10 background-header drop-shadow-md rounded-md border-top-primary">
             <MenuItem v-for="sorter in sorters" :key="sorter.id" v-slot="{ active }">
-              <button :class="{ 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-gray-50': active }" class="p-2 text-left">
+              <button :class="{ 'bg-gradient-to-r from-[#004ee9] to-[#367aff] text-white': active }" class="p-2 text-left">
                 {{ sorter.label }}
               </button>
             </MenuItem>

frontend-new/src/pages/linkout.vue

@@ -23,7 +23,7 @@ useHead(useSeo(i18n.t("linkout.title"), null, route, null));
       <Link :href="remoteUrl" target="_self" rel="noopener noreferrer">
         <Button size="medium">{{ i18n.t("linkout.continue") }}</Button>
       </Link>
-      <Button button-type="gray" size="medium" class="ml-2" @click="$router.back()">{{ i18n.t("linkout.abort") }}</Button>
+      <Button button-type="secondary" size="medium" class="ml-2" @click="$router.back()">{{ i18n.t("linkout.abort") }}</Button>
     </template>
   </Card>
 </template>

frontend-new/windi.config.ts

@@ -5,7 +5,7 @@ import plugin from "windicss/plugin";
 
 export default defineConfig({
   darkMode: "class",
-  safelist: "order-last button-primary button-gray button-red button-transparent",
+  safelist: "order-last button-primary button-secondary button-red button-transparent",
   attributify: true,
   plugins: [
     typography(),
@@ -46,6 +46,7 @@ export default defineConfig({
       },
       red: colors.red,
       gray: colors.zinc,
+      secondary: colors.slate,
       white: colors.zinc[50],
       black: colors.zinc[900],
     },
@@ -101,16 +102,13 @@ export default defineConfig({
     },
   },
   shortcuts: {
-    "background-body": "bg-gray-100 dark:bg-gray-800",
-    "background-default": "bg-gray-50 dark:bg-gray-900",
-    "color-primary": "text-primary-400 dark:text-primary-200",
+    "background-body": "bg-gray-100 dark:bg-gray-900",
+    "background-default": "bg-gray-50 dark:bg-gray-800",
+    "color-primary": "text-primary-400",
     "border-top-primary": "border-solid border-t-4 border-t-primary-400",
-    "button-primary": "text-white bg-primary-400 disabled:(bg-primary-100 dark:(bg-primary-800 text-gray-500) cursor-not-allowed) enabled:hover:bg-primary-300",
-    "button-transparent":
-      "bg-transparent disabled:(text-gray-900 dark:text-white cursor-not-allowed) enabled:hover:(bg-primary-400/15 text-primary-400 dark:text-primary-100)",
-    "button-red":
-      "text-white bg-red-500 dark:bg-red-600 disabled:(bg-red-300 dark:(bg-red-900 text-gray-400) cursor-not-allowed) enabled:hover:(bg-red-400 dark:bg-red-500)",
-    "button-gray":
-      "text-white bg-gray-500 dark:bg-slate-700 disabled:(bg-gray-300 text-gray-500 dark:bg-gray-800 cursor-not-allowed) enabled:hover:(bg-gray-400 dark:bg-slate-600)",
+    "button-primary": "bg-primary-400 enabled:hover:bg-primary-300",
+    "button-secondary": "bg-secondary-500 enabled:hover:(bg-secondary-400 dark:bg-secondary-600)",
+    "button-transparent": "bg-transparent enabled:hover:(bg-primary-400/15 text-primary-400 dark:text-primary-100)",
+    "button-red": "bg-red-500 dark:bg-red-600 enabled:hover:(bg-red-400 dark:bg-red-500)",
   },
 });