From c071d0895d6269c91f267e5ff8ce3e69c8525a1d Mon Sep 17 00:00:00 2001 From: xMrAfonso Date: Sun, 13 Apr 2025 10:50:40 +0200 Subject: [PATCH 01/65] Removed bold from Link --- frontend/src/components/design/Link.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/design/Link.vue b/frontend/src/components/design/Link.vue index b75910baf..abb79b2de 100644 --- a/frontend/src/components/design/Link.vue +++ b/frontend/src/components/design/Link.vue @@ -15,7 +15,7 @@ const props = withDefaults( custom: false, } ); -const classes = computed(() => "font-bold " + (props.disabled ? "color-gray-400 cursor-not-allowed" : "color-primary hover:(underline)")); +const classes = computed(() => (props.disabled ? "color-gray-400 cursor-not-allowed" : "color-primary hover:(underline)")); defineSlots<{ default(props: { classes?: string }): any; From 1bf780ff47c23c8e7412629999e24f08eb3af845 Mon Sep 17 00:00:00 2001 From: xMrAfonso Date: Sun, 13 Apr 2025 11:16:44 +0200 Subject: [PATCH 02/65] feat: update styles and enhance layout across components --- frontend/src/assets/css/color.css | 14 ++- frontend/src/assets/css/main.css | 9 +- frontend/src/components/Homepage.vue | 104 +++++++++--------- frontend/src/components/UserAvatar.vue | 2 + frontend/src/components/design/Card.vue | 4 +- frontend/src/components/design/Container.vue | 2 +- .../src/components/projects/ProjectCard.vue | 79 ++++++------- frontend/src/components/ui/InputRadio.vue | 7 +- frontend/uno.config.ts | 20 +++- 9 files changed, 139 insertions(+), 102 deletions(-) diff --git a/frontend/src/assets/css/color.css b/frontend/src/assets/css/color.css index c3a3c4025..4c15ea048 100644 --- a/frontend/src/assets/css/color.css +++ b/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; diff --git a/frontend/src/assets/css/main.css b/frontend/src/assets/css/main.css index 343f0962a..7b1f429de 100644 --- a/frontend/src/assets/css/main.css +++ b/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); +} diff --git a/frontend/src/components/Homepage.vue b/frontend/src/components/Homepage.vue index a5dbb6774..48b0cc3a3 100644 --- a/frontend/src/components/Homepage.vue +++ b/frontend/src/components/Homepage.vue @@ -225,74 +225,80 @@ useSeo( -
+

Projects

- -

Filters

-
-

- {{ i18n.t("hangar.projectSearch.platforms") }} - - {{ i18n.t("hangar.projectSearch.clear") }} - -

+
+ +
+
+

+ {{ i18n.t("hangar.projectSearch.platforms") }} + + {{ i18n.t("hangar.projectSearch.clear") }} + +

+
    -
  • +
  • - +
-
-
-

{{ i18n.t("hangar.projectSearch.versions." + filters.platform) }}

-
- + + +
+

{{ i18n.t("hangar.projectSearch.versions." + filters.platform) }}

+
+ +
-
-
-

{{ i18n.t("hangar.projectSearch.tags") }}

-
- - - + + +
+

{{ i18n.t("hangar.projectSearch.tags") }}

+
+ + + +
-
-
-

{{ i18n.t("hangar.projectSearch.categories") }}

-
- - - +
+

{{ i18n.t("hangar.projectSearch.categories") }}

+
+ + + +
-
- + +

Frequently asked Questions about Hangar (FAQ)

diff --git a/frontend/src/components/UserAvatar.vue b/frontend/src/components/UserAvatar.vue index 5244d0ad2..f10885e19 100644 --- a/frontend/src/components/UserAvatar.vue +++ b/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 } diff --git a/frontend/src/components/design/Card.vue b/frontend/src/components/design/Card.vue index 2b5781b21..f9ed2a1fc 100644 --- a/frontend/src/components/design/Card.vue +++ b/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, }; }); diff --git a/frontend/src/components/design/Container.vue b/frontend/src/components/design/Container.vue index 4bcc85895..c5bcc03c6 100644 --- a/frontend/src/components/design/Container.vue +++ b/frontend/src/components/design/Container.vue @@ -5,7 +5,7 @@ const props = defineProps<{ diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue index 8eb3487c0..96d8e2fb4 100644 --- a/frontend/src/components/projects/ProjectCard.vue +++ b/frontend/src/components/projects/ProjectCard.vue @@ -21,43 +21,60 @@ async function togglePin() {
- +
-
-
-

- {{ project.name }}  - {{ i18n.t("general.by") }}  - +
+
+
+
+

+ {{ project.name }}  + {{ i18n.t("general.by") }}  + {{ project.namespace.owner }} -

- - - +

+ + + +
+
{{ project.description }}
+
+
+
+ + {{ project.stats.stars.toLocaleString("en-US") }} + + + {{ project.stats.downloads }} + + + + + +
- -
{{ project.description }}
-
-
- - {{ i18n.t("project.category." + project.category) }} -
- - +
+
+ + {{ i18n.t("project.category." + project.category) }} +
+ +