Frontend redesign

frontend/src/assets/css/color.css

@@ -3,7 +3,7 @@
   --primary-50: #e6edfd;
   --primary-100: #ccdcfb;
   --primary-200: #99b8f6;
-  --primary-300: #6695f2;
+  --primary-300: #0088FF;
   --primary-400: #3371ed;
   --primary-500: #004ee9;
   --primary-600: #003eba;
@@ -15,13 +15,23 @@
   --gray-100: #f4f4f5;
   --gray-200: #e4e4e7;
   --gray-300: #d4d4d8;
-  --gray-400: #a1a1aa;
+  --gray-400: #B7B7B7;
   --gray-500: #71717a;
   --gray-600: #52525b;
   --gray-700: #3f3f46;
   --gray-800: #27272a;
   --gray-900: #18181b;
 
+  --charcoal-100: #D7D9DB;
+  --charcoal-200: #8A9AA7;
+  --charcoal-300: #5A5D5E;
+  --charcoal-400: #303C4A;
+  --charcoal-500: #22262C;
+  --charcoal-600: #181A1B;
+  --charcoal-700: #141516;
+  --charcoal-800: #111111;
+  --charcoal-900: #101010;
+
   --secondary-50: #f8fafc;
   --secondary-100: #f1f5f9;
   --secondary-200: #e2e8f0;

frontend/src/assets/css/main.css

@@ -3,12 +3,17 @@
 @import "scrollbar.css";
 @import "loader.css";
 @import "transitions.css";
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
 
 html {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  font-weight: 400;
+  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-weight: 500;
 }
 
 .w-fit {
   width: fit-content;
 }
+
+.test {
+  background: linear-gradient(135deg, hsl(0, 0, 0, 0) 60%, #004EE9);
+}

frontend/src/components/Homepage.vue

@@ -225,74 +225,80 @@ useSeo(
     </Container>
     <Container lg="flex items-start gap-6">
       <!-- Projects -->
-      <div class="w-full min-w-0 mb-5 flex flex-col gap-2 lg:mb-0">
+      <div class="w-full min-w-0 mb-5 flex flex-col gap-4 lg:mb-0">
         <h2 class="font-bold text-2xl lg:(absolute -mt-11)">Projects</h2>
         <ProjectList :projects="projects" :loading="!projects" :reset-anchor="pageChangeScrollAnchor" @update:page="(newPage) => (page = newPage)" />
       </div>
       <!-- Sidebar -->
-      <Card accent class="min-w-300px flex flex-col gap-4">
-        <h2 class="font-bold text-xl -mb-2">Filters</h2>
-        <div v-if="!platform" class="platforms">
-          <h3 class="font-bold mb-1">
-            {{ i18n.t("hangar.projectSearch.platforms") }}
-            <span
-              v-if="filters.platform"
-              class="font-normal text-sm hover:(underline) text-gray-600 dark:text-gray-400"
-              cursor="pointer"
-              @click="filters.platform = undefined"
-            >
-              {{ i18n.t("hangar.projectSearch.clear") }}
-            </span>
-          </h3>
+      <div class="flex flex-col gap-4">
+        <!-- Platform Filter -->
+        <Card class="min-w-300px flex flex-col gap-4">
           <div class="flex flex-col gap-1">
+            <div v-if="!platform" class="platforms">
+              <h3 class="font-semibold text-xl mb-1">
+                {{ i18n.t("hangar.projectSearch.platforms") }}
+                <span
+                  v-if="filters.platform"
+                  class="font-normal text-sm hover:(underline) text-gray-600 dark:text-gray-400"
+                  cursor="pointer"
+                  @click="filters.platform = undefined"
+                >
+                  {{ i18n.t("hangar.projectSearch.clear") }}
+                </span>
+              </h3>
+            </div>
             <ul>
-              <li v-for="visiblePlatform in useVisiblePlatforms" :key="visiblePlatform.enumName" class="inline-flex w-full">
+              <li v-for="visiblePlatform in useVisiblePlatforms" :key="visiblePlatform.enumName" class="inline-flex w-full mt-1">
                 <InputRadio
                   :label="visiblePlatform.name"
                   :model-value="filters.platform"
                   :value="visiblePlatform.enumName"
                   @update:model-value="updatePlatform"
                 >
-                  <PlatformLogo :platform="visiblePlatform.enumName" :size="24" class="mr-1" />
+                  <PlatformLogo :platform="visiblePlatform.enumName" :size="20" class="ml-3 mr-1" />
                 </InputRadio>
               </li>
             </ul>
           </div>
-        </div>
-        <div v-if="filters.platform" class="versions">
-          <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.versions." + filters.platform) }}</h3>
-          <div class="max-h-40 overflow-auto">
-            <VersionSelector v-model="filters.versions" :versions="versions(filters.platform)" :open="false" col />
+        </Card>
+        <Card v-if="filters.platform" class="min-w-300px flex flex-col gap-4">
+          <div class="versions">
+            <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.versions." + filters.platform) }}</h3>
+            <div class="max-h-40 overflow-auto">
+              <VersionSelector v-model="filters.versions" :versions="versions(filters.platform)" :open="false" col />
+            </div>
           </div>
-        </div>
-        <div class="tags">
-          <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.tags") }}</h3>
-          <div class="flex flex-col gap-1">
-            <InputCheckbox v-for="tag in Object.values(Tag)" :key="tag" v-model="filters.tags" :value="tag">
-              <template #label>
-                <IconMdiPuzzleOutline v-if="tag === Tag.ADDON" />
-                <IconMdiBookshelf v-else-if="tag === Tag.LIBRARY" />
-                <IconMdiLeaf v-else-if="tag === Tag.SUPPORTS_FOLIA" />
-                <span class="ml-1">{{ i18n.t("project.settings.tags." + tag + ".title") }}</span>
-              </template>
-            </InputCheckbox>
+        </Card>
+        <Card accent class="min-w-300px flex flex-col gap-4">
+          <div class="tags">
+            <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.tags") }}</h3>
+            <div class="flex flex-col gap-1">
+              <InputCheckbox v-for="tag in Object.values(Tag)" :key="tag" v-model="filters.tags" :value="tag">
+                <template #label>
+                  <IconMdiPuzzleOutline v-if="tag === Tag.ADDON" />
+                  <IconMdiBookshelf v-else-if="tag === Tag.LIBRARY" />
+                  <IconMdiLeaf v-else-if="tag === Tag.SUPPORTS_FOLIA" />
+                  <span class="ml-1">{{ i18n.t("project.settings.tags." + tag + ".title") }}</span>
+                </template>
+              </InputCheckbox>
+            </div>
           </div>
-        </div>
-        <div class="categories">
-          <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.categories") }}</h3>
-          <div class="flex flex-col gap-1">
-            <InputCheckbox
-              v-for="category in useVisibleCategories"
-              :key="category.apiName"
-              v-model="filters.categories"
-              :value="category.apiName"
-              :label="i18n.t(category.title)"
-            >
-              <CategoryLogo :category="category.apiName as Category" :size="22" class="mr-1" />
-            </InputCheckbox>
+          <div class="categories">
+            <h3 class="font-bold mb-1">{{ i18n.t("hangar.projectSearch.categories") }}</h3>
+            <div class="flex flex-col gap-1">
+              <InputCheckbox
+                v-for="category in useVisibleCategories"
+                :key="category.apiName"
+                v-model="filters.categories"
+                :value="category.apiName"
+                :label="i18n.t(category.title)"
+              >
+                <CategoryLogo :category="category.apiName as Category" :size="22" class="mr-1" />
+              </InputCheckbox>
+            </div>
           </div>
-        </div>
-      </Card>
+        </Card>
+      </div>
     </Container>
     <h2 class="text-2xl text-center font-bold mt-8">Frequently asked Questions about Hangar (FAQ)</h2>
     <div class="md:(ml-15 mr-15)">

frontend/src/components/UserAvatar.vue

@@ -34,6 +34,8 @@ const sizeClass = computed(() => {
       return "w-75px h-75px";
     case "lg":
       return "w-100px h-100px";
+    case "xl":
+      return "w-125px h-125px";
     // No default
   }
 

frontend/src/components/design/Card.vue

@@ -17,10 +17,8 @@ const clazz = computed(() => {
     border: true,
     "dark:border-gray-800": true,
     "!border-top-primary": props.accent,
-    "shadow-md": true,
-    "rounded-md": true,
+    "rounded-2xl": true,
     "p-4": true,
-    "overflow-auto": true,
   };
 });
 </script>

frontend/src/components/design/Container.vue

@@ -5,7 +5,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="'max-w-screen-xl mx-auto p-4 ' + (props.class || '')">
+  <div :class="'max-w-screen-2xl mx-auto p-4 ' + (props.class || '')">
     <slot />
   </div>
 </template>

frontend/src/components/design/Link.vue

@@ -15,7 +15,7 @@ const props = withDefaults(
     custom: false,
   }
 );
-const classes = computed<string>(() => "font-bold " + (props.disabled ? "color-gray-400 cursor-not-allowed" : "color-primary hover:(underline)"));
+const classes = computed<string>(() => (props.disabled ? "color-gray-400 cursor-not-allowed" : "color-primary hover:(underline)"));
 
 defineSlots<{
   default(props: { classes?: string }): any;

frontend/src/components/projects/ProjectCard.vue

@@ -21,43 +21,60 @@ async function togglePin() {
     <Card
       :class="{
         '!border-red-500 border-1px': project.visibility === Visibility.SoftDelete,
-        '!border-gray-300 !dark:border-gray-700 border-1px': project.visibility === Visibility.Public,
+        '!border-gray-300 !dark:border-gray-800 border-1px': project.visibility === Visibility.Public,
         'hover:background-card group': true,
+        'transition-all  duration-200': true,
       }"
     >
       <div class="flex space-x-4">
         <div>
-          <UserAvatar :username="project.namespace.owner" :img-src="project.avatarUrl" size="md" disable-link />
+          <UserAvatar :username="project.namespace.owner" :img-src="project.avatarUrl" size="xl" disable-link />
         </div>
-        <div class="overflow-clip overflow-hidden min-w-0">
-          <div class="inline-flex items-center gap-x-1">
-            <h3>
-              <span class="text-xl font-bold">{{ project.name }}&nbsp;</span>
-              <span class="text-sm"> {{ i18n.t("general.by") }}&nbsp;</span>
-              <span class="text-sm">
+        <div class="flex flex-col justify-between min-w-0 w-full h-31.25">
+          <div class="flex justify-start w-full">
+            <div class="flex-1 w-75% overflow-x-hidden">
+              <div class="inline-flex items-center gap-x-1">
+                <h3>
+                  <span class="text-3xl font-bold">{{ project.name }}&nbsp;</span>
+                  <span class="text-lg text-gray"> {{ i18n.t("general.by") }}&nbsp;</span>
+                  <span class="text-lg">
                 <object type="html/sucks">
                   <Link v-slot="{ classes }" custom>
                     <RouterLink :to="'/' + project.namespace.owner" :class="classes"> {{ project.namespace.owner }} </RouterLink>
                   </Link>
                 </object>
               </span>
-            </h3>
-            <IconMdiCancel v-if="project.visibility === Visibility.SoftDelete" />
-            <IconMdiEyeOff v-if="project.visibility !== Visibility.Public" />
-            <button v-if="canEdit" :title="'Toggle pinned status for project ' + project.namespace.slug" @click.prevent="togglePin">
-              <IconMdiPinOff v-if="pinned" class="hidden group-hover:block" />
-              <IconMdiPin v-else class="hidden group-hover:block" />
-            </button>
+                </h3>
+                <IconMdiCancel v-if="project.visibility === Visibility.SoftDelete" />
+                <IconMdiEyeOff v-if="project.visibility !== Visibility.Public" />
+                <button v-if="canEdit" :title="'Toggle pinned status for project ' + project.namespace.slug" @click.prevent="togglePin">
+                  <IconMdiPinOff v-if="pinned" class="hidden group-hover:block" />
+                  <IconMdiPin v-else class="hidden group-hover:block" />
+                </button>
+              </div>
+              <div v-if="'description' in project && project.description" class="mb-1 text-gray">{{ project.description }}</div>
+              <div v-else />
+            </div>
+            <div class="flex-grow-0 flex-basis-auto lt-sm:hidden flex flex-col items-end gap-1 pl-8 pb-4 border-b border-charcoal-500">
+              <span class="inline-flex items-center text-md">
+                {{ project.stats.stars.toLocaleString("en-US") }} <IconMdiStar class="ml-1 text-primary-300" />
+              </span>
+                <span class="inline-flex items-center text-md">
+                {{ project.stats.downloads }} <IconMdiDownload class="ml-1 text-primary-300" />
+              </span>
+              <Tooltip>
+                <template #content> {{ i18n.t("project.info.lastUpdatedTooltip") }}<PrettyTime :time="project.lastUpdated" long /> </template>
+                <span class="inline-flex items-center text-md"><PrettyTime :time="project.lastUpdated" short-relative /><IconMdiCalendar class="ml-1 text-primary-300" /></span>
+              </Tooltip>
+            </div>
           </div>
-
-          <div v-if="'description' in project && project.description" class="mb-1">{{ project.description }}</div>
-          <div v-else />
-          <div class="inline-flex items-center text-gray-500 dark:text-gray-400 lt-sm:hidden">
-            <CategoryLogo :category="project.category" :size="16" class="mr-1" />
-            {{ i18n.t("project.category." + project.category) }}
-            <div v-if="'settings' in project && project.settings" class="inline-flex ml-2 space-x-1">
-              <span class="border-l-1 border-gray-500 dark:border-gray-400" />
-              <span v-for="tag in project.settings.tags" :key="tag" class="inline-flex items-center">
+          <div class="flex justify-between w-full">
+            <div class="flex items-center">
+              <CategoryLogo :category="project.category" :size="16" class="mr-1" />
+              {{ i18n.t("project.category." + project.category) }}
+              <div v-if="'settings' in project && project.settings" class="inline-flex ml-2 space-x-1">
+                <span class="border-l-1 border-gray-500 dark:border-gray-400" />
+                <span v-for="tag in project.settings.tags" :key="tag" class="inline-flex items-center">
                 <Tooltip>
                   <template #content>
                     {{ i18n.t("project.settings.tags." + tag + ".tooltip") }}
@@ -67,23 +84,11 @@ async function togglePin() {
                   <IconMdiLeaf v-else-if="tag === Tag.SUPPORTS_FOLIA" />
                 </Tooltip>
               </span>
+              </div>
             </div>
           </div>
         </div>
         <div class="flex-grow" />
-        <div class="lt-sm:hidden flex flex-col flex-shrink-0 min-w-40">
-          <span class="inline-flex items-center">
-            <IconMdiStar class="mx-1" /> {{ project.stats.stars.toLocaleString("en-US") }} {{ i18n.t("project.info.stars", project.stats.stars) }}
-          </span>
-          <span class="inline-flex items-center">
-            <IconMdiDownload class="mx-1" />
-            {{ project.stats.downloads.toLocaleString("en-US") }} {{ i18n.t("project.info.totalDownloads", project.stats.downloads) }}
-          </span>
-          <Tooltip>
-            <template #content> {{ i18n.t("project.info.lastUpdatedTooltip") }}<PrettyTime :time="project.lastUpdated" long /> </template>
-            <span class="inline-flex items-center"><IconMdiCalendar class="mx-1" /><PrettyTime :time="project.lastUpdated" short-relative /></span>
-          </Tooltip>
-        </div>
       </div>
       <div class="sm:hidden space-x-1 text-center mt-2">
         <span class="inline-flex items-center"><IconMdiCalendar class="mx-1" />{{ lastUpdated(project.lastUpdated) }}</span>

frontend/src/components/ui/InputRadio.vue

@@ -16,16 +16,15 @@ const { v } = useValidation(props.label, undefined, internalVal);
 </script>
 
 <template>
-  <label class="customRadioButton group relative cursor-pointer flex items-center select-none">
+  <label class="customRadioButton relative cursor-pointer flex items-center select-none w-full bg-[linear-gradient(270deg,_transparent_-10%,_#004EE9_350%)] rounded-lg py-1.5 border border-gray-800">
     <input
       v-model="internalVal"
       type="radio"
-      class="appearance-none h-4 w-4 bg-gray-300 mr-2 rounded-full group-hover:bg-gray-400 !checked:bg-primary-500"
-      dark="bg-gray-600 group-hover:bg-gray-500"
+      class="peer appearance-none"
       v-bind="$attrs"
       @blur="v.$touch()"
     />
-    <icon-mdi-circle class="absolute h-4 w-4 p-1 opacity-0 text-white" />
+
     <slot />
     <template v-if="props.label">{{ props.label }}</template>
   </label>

frontend/uno.config.ts

@@ -20,17 +20,17 @@ export default defineConfig({
   transformers: [transformerVariantGroup(), transformerDirectives()],
   safelist: "order-last button-primary button-secondary button-red button-transparent".split(" "),
   shortcuts: {
-    "background-body": "bg-gray-100 dark:bg-gray-900",
-    "background-default": "bg-gray-50 dark:bg-gray-800",
-    "background-card": "bg-slate-200 dark:bg-slate-700",
+    "background-body": "bg-gray-100 dark:bg-charcoal-800",
+    "background-default": "bg-gray-50 dark:bg-charcoal-600",
+    "background-card": "dark:bg-[linear-gradient(30deg,_transparent_40%,_#004EE9_250%)] scale-101",
     "shadow-default": "shadow-lg shadow-gray-300 dark:shadow-gray-900",
     "color-primary": "text-primary-500 dark:text-primary-300",
     "border-top-primary": "border-solid border-t-4 border-t-primary-500",
     "button-primary": "bg-primary-500 enabled:hover:bg-primary-400",
     "button-secondary": "bg-secondary-500 enabled:hover:(bg-secondary-400 dark:bg-secondary-600)",
     "button-transparent": "bg-transparent enabled:hover:(bg-primary-500/15 text-primary-500 dark:text-primary-200)",
     "button-red": "bg-red-500 dark:bg-red-600 enabled:hover:(bg-red-400 dark:bg-red-500)",
-    "text-gray": "text-gray-600 dark:text-gray-300",
+    "text-gray": "text-gray-600 dark:text-gray-400",
     "text-gray-secondary": "text-gray-500 dark:text-gray-400",
   },
   rules: [],
@@ -71,6 +71,18 @@ export default defineConfig({
         800: "var(--gray-800)",
         900: "var(--gray-900)",
       },
+      charcoal: {
+        50: "var(--charcoal-50)",
+        100: "var(--charcoal-100)",
+        200: "var(--charcoal-200)",
+        300: "var(--charcoal-300)",
+        400: "var(--charcoal-400)",
+        500: "var(--charcoal-500)",
+        600: "var(--charcoal-600)",
+        700: "var(--charcoal-700)",
+        800: "var(--charcoal-800)",
+        900: "var(--charcoal-900)",
+            },
       secondary: {
         50: "var(--secondary-50)",
         100: "var(--secondary-100)",