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

Primary Color Customization #168

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Primary Color Customization #168

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2fb4f0c
add APP_PRIMARY_COLOR to env and implement brand, brand-secondary in …
tarunsinghofficial Jan 17, 2025
ecf4b84
fix: apply primary color to all changed files with green-500 to brand…
tarunsinghofficial Jan 17, 2025
100f22a
linting
tarunsinghofficial Jan 17, 2025
cf89ddc
ui: add the primary color customization to stoppane and routemodal
tarunsinghofficial Jan 18, 2025
ec57809
linting
tarunsinghofficial Jan 18, 2025
f62dbd4
fix: use dotenv to process the PUBLIC_APP_PRIMARY_COLOR in tailwind.c…
tarunsinghofficial Jan 24, 2025
b8156ba
updated README.md with Primary color env
tarunsinghofficial Jan 24, 2025
df9bd20
add APP_SECONDARY_COLOR to tailwind.config.js
tarunsinghofficial Jan 28, 2025
fb2366c
add PUBLIC_APP_SECONDARY_COLOR to README.md
tarunsinghofficial Jan 28, 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
4 changes: 2 additions & 2 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@
}

.tab-container__item--active {
@apply border-b-2 border-green-500 text-green-500;
@apply border-b-2 border-brand-secondary text-brand-secondary;
}

.button {
@apply rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50;
}

.button--primary {
@apply rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600;
@apply rounded-md bg-brand-secondary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-secondary;
}

.rtl {
Expand Down
2 changes: 1 addition & 1 deletion src/components/ArrivalDeparture.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
return {
status: `${$t('status.on_time')}`,
text: `${$t('status.arrives_on_time')}`,
color: 'text-green-500'
color: 'text-brand'
};
} else {
return {
Expand Down
2 changes: 1 addition & 1 deletion src/components/map/StopMarker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
}

.highlight {
@apply scale-125 border-green-600 drop-shadow-md;
@apply scale-125 border-brand-secondary drop-shadow-md;
}

.custom-marker:hover {
Expand Down
2 changes: 1 addition & 1 deletion src/components/map/VehiclePopupContent.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<div class="max-w-xs rounded-lg bg-white p-4 text-gray-800 shadow-md">
<div class="mb-2 flex items-center">
<div class="rounded bg-green-100 px-2 py-1 text-lg font-bold text-green-600">
<div class="rounded bg-green-100 px-2 py-1 text-lg font-bold text-brand-secondary">
{nextDestination}
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/navigation/AlertsModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
{$t('alert.close')}
</Button>
<Button
class="bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600"
class="bg-brand-secondary text-white hover:bg-brand-secondary dark:bg-brand dark:hover:bg-brand-secondary"
on:click={() => window.open(getUrlTranslation(), '_blank')}
>
{$t('alert.more_info')}
Expand Down
2 changes: 1 addition & 1 deletion src/components/oba/TripDetailsPane.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@
{#if index === busPosition}
<FontAwesomeIcon
icon={faBus}
class="absolute bg-white text-xl text-green-500 dark:bg-black"
class="absolute bg-white text-xl text-brand dark:bg-black"
/>
{/if}
{#if tripStop.stopId === stop.id}
Expand Down
2 changes: 1 addition & 1 deletion src/components/routes/RouteModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
{#if stops && selectedRoute}
<div class="space-y-4">
<div>
<div class="h-36 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
<div class="h-36 rounded-lg bg-brand-secondary bg-opacity-80 p-4">
<h1 class="mb-6 text-center text-2xl font-bold text-white">
Route: {selectedRoute.shortName}
</h1>
Expand Down
2 changes: 1 addition & 1 deletion src/components/search/SearchPane.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@
<div class="mt-0 sm:mt-0">
<button
type="button"
class="mt-3 text-sm font-medium text-green-600 underline hover:text-green-400 focus:outline-none"
class="mt-3 text-sm font-medium text-brand-secondary underline hover:text-brand focus:outline-none"
onclick={handleViewAllRoutes}
>
{$t('search.click_here')}
Expand Down
2 changes: 1 addition & 1 deletion src/components/stops/StopPageHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</script>

<div class="my-4 text-center">
<h1 class="flex items-center justify-center gap-2 text-3xl font-bold text-green-700">
<h1 class="flex items-center justify-center gap-2 text-3xl font-bold text-brand-secondary">
{stopName}
</h1>
<div class="text-normal mt-2 flex items-center justify-center gap-x-8 text-gray-700">
Expand Down
6 changes: 4 additions & 2 deletions src/components/stops/StopPane.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,9 @@
{#if arrivalsAndDepartures}
<div class="space-y-4">
<div>
<div class="relative flex flex-col gap-y-1 rounded-lg bg-[#1C1C1E] bg-opacity-80 p-4">
<div
class="relative flex flex-col gap-y-1 rounded-lg bg-brand-secondary bg-opacity-80 p-4"
>
<h1 class="h1 mb-0 text-white">{stop.name}</h1>
<h2 class="h2 mb-0 text-white">{$t('stop')} #{stop.id}</h2>
{#if routeShortNames()}
Expand All @@ -106,7 +108,7 @@
<div class="mt-auto flex justify-end">
<a
href={`/stops/${stop.id}/schedule`}
class="inline-block rounded-lg border border-green-500 bg-green-500 px-3 py-1 text-sm font-medium text-white shadow-md transition duration-200 ease-in-out hover:bg-green-600"
class="inline-block rounded-lg border border-brand bg-brand px-3 py-1 text-sm font-medium text-white shadow-md transition duration-200 ease-in-out hover:bg-brand-secondary"
target="_blank"
>
{$t('schedule_for_stop.view_schedule')}
Expand Down
6 changes: 3 additions & 3 deletions src/components/trip-planner/LegDetails.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
break;
case 'BUS':
icon = faBus;
iconColor = 'text-green-600';
iconColor = 'text-brand-secondary';
break;
case 'TRAIN':
icon = faTrain;
Expand All @@ -54,7 +54,7 @@

<div class="relative flex items-start pb-8">
<div
class="absolute left-5 top-5 border-l-4 border-green-400 {isWalking
class="absolute left-5 top-5 border-l-4 border-brand {isWalking
? 'border-dotted'
: 'border-gray-300'} h-full"
></div>
Expand Down Expand Up @@ -92,7 +92,7 @@

<div class="mt-4 space-y-4 text-sm text-gray-600 dark:text-gray-100">
<div class="mb-2 flex items-center">
<FontAwesomeIcon icon={faArrowRight} class="mr-2 text-green-500" />
<FontAwesomeIcon icon={faArrowRight} class="mr-2 text-brand" />
<span class="font-medium">{leg.to.name}</span>
</div>
<div class="mb-2 flex items-center">
Expand Down
10 changes: 1 addition & 9 deletions src/components/trip-planner/TripPlan.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,15 +192,7 @@

<button
onclick={planTrip}
class="mt-4 flex w-full items-center justify-center rounded-md bg-green-500 py-2 text-white shadow-md
transition-colors
hover:bg-green-600
disabled:cursor-not-allowed
disabled:bg-gray-300
dark:bg-green-800
dark:hover:bg-green-900
disabled:dark:bg-gray-700/50
disabled:dark:text-gray-400"
class="mt-4 flex w-full items-center justify-center rounded-md bg-brand py-2 text-white shadow-md transition-colors hover:bg-brand-secondary disabled:cursor-not-allowed disabled:bg-gray-300 dark:bg-green-800 dark:hover:bg-green-900 disabled:dark:bg-gray-700/50 disabled:dark:text-gray-400"
disabled={!selectedFrom || !selectedTo}
>
{#if loading}
Expand Down
2 changes: 2 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ export default {
theme: {
extend: {
colors: {
brand: process.env.APP_PRIMARY_COLOR || '#78aa36',
'brand-secondary': '#486621',
// flowbite-svelte
primary: {
50: '#FFF5F2',
Expand Down
Loading