Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: generalize colors #52

Merged
merged 8 commits into from
Jan 15, 2025
Merged

style: generalize colors #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3279aee
style: remove dark mode
galierie Jan 15, 2025
2424951
chore: move `FilterControls` interface
galierie Jan 15, 2025
8815ed5
style: generalize colors according to figma
galierie Jan 15, 2025
0f678a5
style(nav): recolor header and navbar
galierie Jan 15, 2025
43b594b
style: recolor every banner-like component
galierie Jan 15, 2025
88dc8d9
style(Filter): recolor the filter bar
galierie Jan 15, 2025
ad1f361
style(NavBar): respace navbar
galierie Jan 15, 2025
2108cb6
chore: run linter
galierie Jan 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 12 additions & 38 deletions website-frontend/src/app.postcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--foreground: 220 23% 23%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--muted: 222 38% 95%;
--muted-foreground: 221 15% 52%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
Expand All @@ -19,52 +19,23 @@
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--primary: 220 23% 23%;
--primary-foreground: 0 0% 100%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 219 20% 69%;
--secondary-foreground: 0 0% 100%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 72.2% 50.6%;
--destructive-foreground: 210 40% 98%;
--destructive-foreground: 0 0% 100%;

--ring: 222.2 84% 4.9%;

--radius: 0.5rem;
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;

--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;

--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--ring: 212.7 26.8% 83.9%;
--header: 222 38% 95%;
}
}

Expand All @@ -75,6 +46,9 @@
body {
@apply bg-background text-foreground;
}
header {
@apply bg-header;
}
}

@layer base {
Expand Down
12 changes: 7 additions & 5 deletions website-frontend/src/lib/components/filter/FilterBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import type { FilterControls } from './filter_controls';
import type { FilterControls } from '$lib/types/filter_controls';
import { ListFilter } from 'lucide-svelte';
import FilterButton from './FilterButton.svelte';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
Expand All @@ -15,7 +15,7 @@
p-6 shadow-lg md:flex md:max-w-[82vw]"
>
<div class="flex items-center">
<div class="mr-4 text-xs font-semibold uppercase text-gray-500">
<div class="mr-4 text-xs font-semibold uppercase text-muted-foreground">
<p>FILTER BY</p>
</div>
{#if controls}
Expand All @@ -28,9 +28,11 @@
</div>
{#if timed}
<Tabs.Root value="upcoming">
<Tabs.List class="rounded-3xl [&>*]:w-36 [&>*]:rounded-3xl">
<Tabs.Trigger value="upcoming">Upcoming</Tabs.Trigger>
<Tabs.Trigger value="past">Past</Tabs.Trigger>
<Tabs.List class="rounded-3xl bg-muted *:w-36 *:rounded-3xl">
<Tabs.Trigger value="upcoming"
><span class="text-muted-foreground">Upcoming</span></Tabs.Trigger
>
<Tabs.Trigger value="past"><span class="text-muted-foreground">Past</span></Tabs.Trigger>
</Tabs.List>
</Tabs.Root>
{/if}
Expand Down
2 changes: 1 addition & 1 deletion website-frontend/src/lib/components/filter/FilterButton.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import type { FilterControl } from './filter_controls';
import type { FilterControl } from '$lib/types/filter_controls';
import { ChevronUp, ChevronDown } from 'lucide-svelte';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';

Expand Down
24 changes: 12 additions & 12 deletions website-frontend/src/lib/components/flexible_content/FlexibleContent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
<script lang="ts">
import { onMount } from 'svelte';
import { enhanceWysiwygContent } from '.';
export let content: string = '';
import { onMount } from 'svelte';
import { enhanceWysiwygContent } from '.';
export let content: string = '';

let enhancedContent = content;

onMount(() => {
enhancedContent = content ? enhanceWysiwygContent(content) : '';
});
let enhancedContent = content;

$: if (typeof window !== 'undefined') {
enhancedContent = content ? enhanceWysiwygContent(content) : '';
}
onMount(() => {
enhancedContent = content ? enhanceWysiwygContent(content) : '';
});

$: if (typeof window !== 'undefined') {
enhancedContent = content ? enhanceWysiwygContent(content) : '';
}
</script>

{#if content}
{@html enhancedContent}
{@html enhancedContent}

Check warning on line 18 in website-frontend/src/lib/components/flexible_content/FlexibleContent.svelte

View workflow job for this annotation

GitHub Actions / test 

`{@html}` can lead to XSS attack
{/if}
6 changes: 3 additions & 3 deletions website-frontend/src/lib/components/landing/Hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@
<img
src="source/to/image"
alt="Carousel Item"
class="relative h-[90vh] w-full bg-slate-400"
class="relative h-[90vh] w-full bg-secondary"
/>
<div class="hidden">{_}</div>
<div class="absolute bottom-28 text-white md:px-20">
<div class="absolute bottom-28 text-secondary-foreground md:px-20">
<h1 class="mb-5 text-4xl font-bold">Some Big Bold Description Text</h1>
<p class="text-md mb-5 font-semibold">Some extra description</p>
<Button href="/">Button</Button>
Expand All @@ -46,7 +46,7 @@
{/each}
</Carousel.Content>
</Carousel.Root>
<div class="absolute -mt-20 text-sm font-semibold text-white md:px-20">
<div class="absolute -mt-20 text-sm font-semibold text-secondary-foreground md:px-20">
Item {current} of {count}
</div>
</div>
12 changes: 6 additions & 6 deletions website-frontend/src/lib/components/nav/Header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@
export let favicon;
</script>

<div class="h-14 items-center bg-slate-50 py-2 md:h-16">
<div class="h-14 items-center py-2 md:h-16">
<div class="flex justify-between px-2 md:px-9">
<div class="my-auto flex items-center">
<img
src={favicon}
alt="UP"
class="mr-1 hidden h-12 w-12 max-w-xs rounded-full bg-gray-400 md:block"
class="mr-1 hidden h-12 w-12 max-w-xs rounded-full bg-secondary md:block"
/>
<img
src={favicon}
alt="DCS"
class="mr-2 h-10 w-10 max-w-xs rounded-full bg-gray-400 md:mr-3 md:h-12 md:w-12"
class="mr-2 h-10 w-10 max-w-xs rounded-full bg-secondary md:mr-3 md:h-12 md:w-12"
/>
<div class="font-semibold text-[#004420]">
<div class="font-semibold text-primary">
<h1 class="text-xs md:text-sm">University of the Philippines Diliman</h1>
<h1 class="text-md -mt-1 md:-mt-2 md:text-lg">Department of Computer Science</h1>
</div>
Expand All @@ -27,15 +27,15 @@
href="https://web.facebook.com/upddcs?_rdc=1&_rdr"
target="_blank"
rel="noopener noreferrer"
class="mr-3 hidden h-7 pb-[2px] text-gray-400 transition-colors duration-300 hover:text-[#004420] md:block"
class="mr-3 hidden h-7 pb-[2px] text-secondary transition-colors duration-300 hover:text-primary md:block"
>
<FacebookIcon />
</a>
<a
href="https://x.com/upcs"
target="_blank"
rel="noopener noreferrer"
class="hidden h-5 text-gray-400 transition-colors duration-300 hover:text-[#004420] md:block"
class="hidden h-5 text-secondary transition-colors duration-300 hover:text-primary md:block"
>
<XIcon />
</a>
Expand Down
11 changes: 7 additions & 4 deletions website-frontend/src/lib/components/nav/NavBar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@

<div
class="
hidden w-full md:my-2 md:flex md:h-full
hidden w-full md:absolute md:mt-2 md:flex md:h-fit
md:justify-center
"
>
<nav
class="
fixed flex h-screen w-full justify-end bg-background md:sticky md:z-50 md:h-fit
md:w-fit md:justify-between md:rounded-3xl md:border md:p-1 md:px-5
fixed flex h-screen w-full justify-end bg-background/10 md:sticky md:z-50 md:h-fit
md:w-fit md:justify-between md:rounded-3xl md:border md:border-header md:px-5 md:py-1
"
>
<ul
Expand Down Expand Up @@ -67,7 +67,10 @@
<NavItem href="/students" to="Students" dropdown={true}>
<NavItem href="/students" to="Overview" />
<NavItem href="/students/batch-representatives" to="Batch Representatives" />
<NavItem href="/students/student-ethics-health-and-wellbeing" to="Student Ethics, Health, and Wellbeing" />
<NavItem
href="/students/student-ethics-health-and-wellbeing"
to="Student Ethics, Health, and Wellbeing"
/>
<NavItem href="/students/student-opportunities" to="Student Opportunities" />
<NavItem href="/students/organizations" to="Organizations" />
</NavItem>
Expand Down
4 changes: 2 additions & 2 deletions website-frontend/src/lib/components/people/Banner.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@
<div class="relative z-0">
<div
class="h-[45vh] bg-cover bg-center md:h-[60vh]"
style="background-image: linear-gradient(to top, #004420, transparent), url('{PUBLIC_APIURL}/assets/{background_image}')"
style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent), url('{PUBLIC_APIURL}/assets/{background_image}')"
></div>

<div
class="absolute bottom-24 left-1/2
-translate-x-1/2 transform text-center text-white
-translate-x-1/2 transform text-center text-primary-foreground
md:left-0 md:max-w-[60vw] md:translate-x-0 md:px-32 md:text-start"
>
<h1 class="text-3xl font-bold md:mb-4 md:text-4xl">{deslugify_title}</h1>
<h4 class="hidden text-gray-300 md:block">{@html flexible_content}</h4>

Check warning on line 24 in website-frontend/src/lib/components/people/Banner.svelte

View workflow job for this annotation

GitHub Actions / test 

`{@html}` can lead to XSS attack
</div>
</div>
0 .../lib/components/filter/filter_controls.ts → ...frontend/src/lib/types/filter_controls.ts
View file
Open in desktop
File renamed without changes.
8 changes: 6 additions & 2 deletions website-frontend/src/routes/about/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,14 @@
<div class="relative">
<div
class="h-[40vh] bg-cover bg-center md:h-[50vh]"
style="background-image: linear-gradient(to top, #004420, transparent)"
style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent)"
></div>
<div class="absolute bottom-9">
<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">About</h1>
<h1
class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
>
About
</h1>
</div>
</div>

Expand Down
6 changes: 4 additions & 2 deletions website-frontend/src/routes/about/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@
<div class="relative">
<div
class="h-[40vh] bg-cover bg-center md:h-[50vh]"
style="background-image: linear-gradient(to top, #004420, transparent)"
style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent)"
></div>
<div class="absolute bottom-9">
<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">
<h1
class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
>
{page.title}
</h1>
</div>
Expand Down
8 changes: 5 additions & 3 deletions website-frontend/src/routes/academics/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,19 @@
<div class="relative">
<div
class="h-[40vh] bg-cover bg-center md:h-[50vh]"
style="background-image: linear-gradient(to top, #004420, transparent), url('{data.program
.image}')"
style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent), url('{data
.program.image}')"
></div>

<div class="absolute bottom-9">
<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">
<h1
class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
>
{data.program.title}
</h1>
</div>
</div>

Check warning on line 23 in website-frontend/src/routes/academics/[slug]/+page.svelte

View workflow job for this annotation

GitHub Actions / test 

`{@html}` can lead to XSS attack
<div class="px-4 py-10 text-base text-[#01152B] md:px-32">
{@html data.program.description}

Expand All @@ -26,7 +28,7 @@
<div class="px-4 py-8 md:px-6">
<div class="mb-8 text-xl font-bold">Curriculum</div>

<p class="text-sm text-gray-500">Core Courses</p>

Check warning on line 31 in website-frontend/src/routes/academics/[slug]/+page.svelte

View workflow job for this annotation

GitHub Actions / test 

`{@html}` can lead to XSS attack
<p class="text-base">
{@html data.program.curriculum}
</p>
Expand Down
2 changes: 1 addition & 1 deletion website-frontend/src/routes/events/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
import type { FilterControls } from '$lib/components/filter/filter_controls';
import type { FilterControls } from '$lib/types/filter_controls';
import FeaturedEventCard from '$lib/components/events/FeaturedEventCard.svelte';
import FilterBar from '$lib/components/filter/FilterBar.svelte';
import LoadMore from '$lib/components/load_more/LoadMore.svelte';
Expand Down Expand Up @@ -37,7 +37,7 @@
<h3>{event.event_headline}</h3>
<h3 class="block md:hidden">{new Date(event.date_created).toLocaleDateString()}</h3>
<div class="max-h-6 overflow-hidden *:truncate">
{@html event.event_content}

Check warning on line 40 in website-frontend/src/routes/events/+page.svelte

View workflow job for this annotation

GitHub Actions / test 

`{@html}` can lead to XSS attack
</div>
<p>View details &#8594;</p>
<div class="flex items-center">
Expand Down
2 changes: 1 addition & 1 deletion website-frontend/src/routes/people/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
import type { FilterControls } from '$lib/components/filter/filter_controls';
import type { FilterControls } from '$lib/types/filter_controls';
import Banner from '$lib/components/people/Banner.svelte';
import FilterBar from '$lib/components/filter/FilterBar.svelte';
import LoadMore from '$lib/components/load_more/LoadMore.svelte';
Expand Down
2 changes: 1 addition & 1 deletion website-frontend/src/routes/people/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
/** @type {import('./$types').PageData} */
import type { FilterControls } from '$lib/components/filter/filter_controls';
import type { FilterControls } from '$lib/types/filter_controls';
import Banner from '$lib/components/people/Banner.svelte';
import FilterBar from '$lib/components/filter/FilterBar.svelte';
import LoadMore from '$lib/components/load_more/LoadMore.svelte';
Expand Down
6 changes: 4 additions & 2 deletions website-frontend/src/routes/students/[slug]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@
<div class="relative">
<div
class="h-[40vh] bg-cover bg-center md:h-[50vh]"
style="background-image: linear-gradient(to top, #004420, transparent)"
style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent)"
></div>
<div class="absolute bottom-9">
<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">
<h1
class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
>
{page.title}
</h1>
</div>
Expand Down
2 changes: 1 addition & 1 deletion website-frontend/src/routes/students/organizations/+page.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import getDirectusInstance from '$lib/directus';
export async function load({ fetch }) {
const directus = await getDirectusInstance(fetch);
const page = await directus.request(readItem('students_pages', 4));

return {
page
};
Expand Down
6 changes: 4 additions & 2 deletions website-frontend/src/routes/students/organizations/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,12 @@
<div class="relative">
<div
class="h-[40vh] bg-cover bg-center md:h-[50vh]"
style="background-image: linear-gradient(to top, #004420, transparent)"
style="background-image: linear-gradient(to top, hsl(var(--primary)), transparent)"
></div>
<div class="absolute bottom-9">
<h1 class="px-4 text-3xl font-bold md:max-w-[60vw] md:px-32 md:text-5xl">
<h1
class="px-4 text-3xl font-bold text-primary-foreground md:max-w-[60vw] md:px-32 md:text-5xl"
>
{page.title}
</h1>
</div>
Expand Down
3 changes: 2 additions & 1 deletion website-frontend/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ const config: Config = {
card: {
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
}
},
header: 'hsl(var(--header) / <alpha-value>)'
},
borderRadius: {
lg: 'var(--radius)',
Expand Down
Loading