mirror
/
wildebeest
kopia lustrzana https://github.com/cloudflare/wildebeest
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

introduce wildebeest colors 

introduce wildebeest colors to match more closely the mastodon
color scheme

resolves #48
pull/52/head
Dario Piotrowicz 2023-01-09 22:49:18 +00:00
rodzic 74decfec6c
commit a39120f86d
18 zmienionych plików z 71 dodań i 45 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

12
frontend/src/components/Status/index.tsx
Wyświetl plik

@ -22,7 +22,7 @@ export default component$((props: Props) => {
const handleContentClick = $(() => nav(statusUrl))
return (
<div class="p-4 border-t border-slate-600 pointer">
<div class="p-4 border-t border-wildebeest-600 pointer">
<div onClick$={handleContentClick}>
<div class="flex justify-between mb-3">
<div class="flex">
@ -32,11 +32,11 @@ export default component$((props: Props) => {
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
<a class="no-underline">{status.account.display_name}</a>
</div>
<div class="text-slate-500">@{status.account.username}</div>
<div class="text-wildebeest-500">@{status.account.username}</div>
</div>
</div>
<Link class="no-underline" href={statusUrl}>
<div class="text-slate-500 flex items-center">
<div class="text-wildebeest-500 flex items-center">
<i class="fa fa-xs fa-globe" />
<span class="ml-2 text-sm hover:underline">{formatTimeAgo(new Date(status.created_at))}</span>
</div>
@ -49,11 +49,11 @@ export default component$((props: Props) => {
{status.card && status.media_attachments.length == 0 && (
<a class="no-underline" href={status.card.url}>
<div class="rounded flex border border-slate-600">
<div class="rounded flex border border-wildebeest-600">
<img class="preview-image" src={status.card.image} />
<div class="p-3 overflow-hidden">
<div class="overflow-ellipsis text-sm text-bold text-slate-400">{status.card.title}</div>
<div class="overflow-ellipsis mt-2 text-sm text-slate-500">{status.card.provider_name}</div>
<div class="overflow-ellipsis text-sm text-bold text-wildebeest-400">{status.card.title}</div>
<div class="overflow-ellipsis mt-2 text-sm text-wildebeest-500">{status.card.provider_name}</div>
</div>
</div>
</a>

2
frontend/src/components/StickyHeader/StickyHeader.tsx
Wyświetl plik

@ -2,7 +2,7 @@ import { component$, Slot } from '@builder.io/qwik'
export default component$(() => {
return (
<header class="bg-slate-900 sticky top-[3.9rem] xl:top-0 xl:pt-[10px] z-10">
<header class="bg-wildebeest-900 sticky top-[3.9rem] xl:top-0 xl:pt-[10px] z-10">
<Slot />
</header>
)

4
frontend/src/components/TagDetailsCard/index.tsx
Wyświetl plik

@ -17,8 +17,8 @@ export default component$((props: Props) => {
return (
<div class="flex justify-between items-center">
<div class="">
<div class="text-sm text-bold text-slate-400">#{props.tagDetails.name}</div>
<div class="text-xs text-slate-500">{formatHistory(history)}</div>
<div class="text-sm text-bold text-wildebeest-400">#{props.tagDetails.name}</div>
<div class="text-xs text-wildebeest-500">{formatHistory(history)}</div>
</div>
<Sparkline data={data} />
</div>

2
frontend/src/components/layout/LeftColumn/LeftColumn.tsx
Wyświetl plik

@ -8,7 +8,7 @@ export default component$(() => {
return (
<div class="hidden xl:block text-sm">
<p class="text-slate-400">
<p class="text-wildebeest-400">
<span class="text-semi">{domain}</span> is part of the decentralized social network powered by{' '}
<a href="https://github.com/cloudflare/wildebeest">Wildebeest</a>.
</p>

8
frontend/src/components/layout/RightColumn/RightColumn.tsx
Wyświetl plik

@ -18,7 +18,7 @@ export default component$(() => {
let classList = 'mx-4 my-5 block no-underline text-semi max-w-max ' + location.pathname
if (linkActiveRegex.test(location.pathname)) {
classList += ' text-indigo-400'
classList += ' text-wildebeest-vibrant-400'
} else {
classList += ' hover:text-white focus:text-white'
}
@ -40,17 +40,17 @@ export default component$(() => {
const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
return (
<div class="bg-slate-800 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-slate-400">
<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200">
<div>
<div class="xl:p-4">
<a class="no-underline hidden xl:flex items-center" href="https://mastodon.social">
<WildebeestLogo size="medium" />
</a>
</div>
<hr class="hidden xl:block border-t border-slate-700 my-3" />
<hr class="hidden xl:block border-t border-wildebeest-700 my-3" />
{links.map((link) => renderNavLink(link))}
<div class="xl:hidden">
<hr class="border-t border-slate-700 my-3" />
<hr class="border-t border-wildebeest-700 my-3" />
{renderNavLink(aboutLink)}
</div>
</div>

2
frontend/src/root.tsx
Wyświetl plik

@ -16,7 +16,7 @@ export default component$(() => {
<script src="https://kit.fontawesome.com/e3d907997f.js" crossorigin="anonymous"></script>
<RouterHead />
</head>
<body lang="en" class="bg-slate-900 text-white min-w-min">
<body lang="en" class="bg-wildebeest-900 text-white min-w-min">
<RouterOutlet />
<ServiceWorkerRegister />
</body>

12
frontend/src/routes/[accountId]/[statusId]/index.tsx
Wyświetl plik

@ -25,15 +25,15 @@ export default component$(() => {
return (
<>
<StickyHeader>
<div class="flex justify-between items-center xl:rounded-t header bg-slate-700">
<Link class="text-semi no-underline text-indigo-400 bg-transparent p-4" href="/explore">
<div class="flex justify-between items-center xl:rounded-t header bg-wildebeest-700">
<Link class="text-semi no-underline text-wildebeest-vibrant-400 bg-transparent p-4" href="/explore">
<i class="fa fa-chevron-left mr-2" />
<span class="hover:underline">Back</span>
</Link>
<i class="fa fa-eye mr-4 text-slate-400" />
<i class="fa fa-eye mr-4 text-wildebeest-400" />
</div>
</StickyHeader>
<div class="bg-slate-700 p-4">
<div class="bg-wildebeest-700 p-4">
{/* Account Card */}
<div class="flex">
<Avatar src={status.account.avatar} />
@ -42,7 +42,7 @@ export default component$(() => {
{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
<a class="no-underline">{status.account.display_name}</a>
</div>
<div class="p-1 text-slate-400">@{status.account.acct}</div>
<div class="p-1 text-wildebeest-400">@{status.account.acct}</div>
</div>
</div>
{/* Content */}
@ -54,7 +54,7 @@ export default component$(() => {
</div>
)}
{/* Info Tray */}
<div class="text-slate-500 mt-4 text-sm">
<div class="text-wildebeest-500 mt-4 text-sm">
<a href={status.url} class="no-underline">
<span>{formatDateTime(status.created_at)}</span>
</a>

2
frontend/src/routes/explore/layout.scss
Wyświetl plik

@ -32,6 +32,6 @@
&::after {
bottom: -1px;
border-color: transparent transparent #282c37;
border-color: transparent transparent var(--wildebeest-color-700);
}
}

6
frontend/src/routes/explore/layout.tsx
Wyświetl plik

@ -17,7 +17,7 @@ export default component$(() => {
return (
<div class={`py-4 ${isActive ? 'active' : ''}`}>
<Link href={linkTarget} class="no-underline text-bold text-slate-200 py-4">
<Link href={linkTarget} class="no-underline text-bold text-wildebeest-200 py-4">
{linkText}
</Link>
</div>
@ -42,12 +42,12 @@ export default component$(() => {
return (
<div class="explore-wrapper flex flex-col">
<StickyHeader>
<h2 class="text-reg text-md m-0 p-4 bg-slate-700 xl:rounded-t">
<h2 class="text-reg text-md m-0 p-4 bg-wildebeest-700 xl:rounded-t">
<i class="fa fa-hashtag fa-fw mr-3" />
<span>Explore</span>
</h2>
</StickyHeader>
<div class="bg-slate-900 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
<div class="bg-wildebeest-800 flex justify-around">{links.map((link) => renderNavLink(link))}</div>
<div class="flex-auto">
<Slot />
</div>

6
frontend/src/routes/explore/links/index.tsx
Wyświetl plik

@ -21,11 +21,11 @@ export default component$(() => {
<>
{links.map((link) => (
<a href={link.url} class="no-underline" target="_blank">
<div class="p-4 flex justify-between border-b border-slate-600 hover:bg-slate-700">
<div class="p-4 flex justify-between border-b border-wildebeest-600 hover:bg-wildebeest-700">
<div class="mr-6">
<div class="my-2 text-sm text-slate-400">{link.provider_name}</div>
<div class="my-2 text-sm text-wildebeest-400">{link.provider_name}</div>
<div class="mb-2 text-lg text-bold leading-normal">{link.title}</div>
<div class="text-sm text-slate-400">{formatHistory(link.history)}</div>
<div class="text-sm text-wildebeest-400">{formatHistory(link.history)}</div>
</div>
<div>
<img class="thumbnail" src={link.image} />

2
frontend/src/routes/explore/tags/index.tsx
Wyświetl plik

@ -17,7 +17,7 @@ export default component$(() => {
return (
<div class="mb-4">
{tags.map((tagDetails) => (
<div key={tagDetails.name} class="p-4 border-t border-slate-600">
<div key={tagDetails.name} class="p-4 border-t border-wildebeest-600">
<TagDetailsCard tagDetails={tagDetails} />
</div>
))}

6
frontend/src/routes/first-login/index.tsx
Wyświetl plik

@ -20,7 +20,7 @@ export default component$(() => {
id="login-username"
name="username"
pattern="[^@]+"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500 invalid:border-red-500 flex-1 w-full"
/>
<span>@{domain}</span>
</div>
@ -32,12 +32,12 @@ export default component$(() => {
<input
id="login-name"
name="name"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
/>
</div>
<button
type="submit"
class="mb-9 bg-indigo-600 hover:bg-indigo-500 p-3 text-white text-uppercase border-indigo-600 text-lg text-semi outline-none border rounded hover:border-indigo-500 focus:border-indigo-500"
class="mb-9 bg-wildebeest-vibrant-600 hover:bg-wildebeest-vibrant-500 p-3 text-white text-uppercase border-wildebeest-vibrant-600 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
>
Register
</button>

6
frontend/src/routes/layout.tsx
Wyświetl plik

@ -32,7 +32,7 @@ export default component$(() => {
return (
<>
{showHeaderAndColumns && (
<header class="h-[3.9rem] z-50 sticky top-0 bg-slate-800 p-3 w-full border-b border-slate-700 xl:hidden">
<header class="h-[3.9rem] z-50 sticky top-0 bg-wildebeest-600 p-3 w-full border-b border-wildebeest-700 xl:hidden">
<a class="no-underline flex items-center w-max" href="https://mastodon.social">
<WildebeestLogo size="small" />
</a>
@ -47,12 +47,12 @@ export default component$(() => {
</div>
)}
<div class={`w-full ${showHeaderAndColumns ? 'xl:max-w-xl' : ''}`}>
<div class={`bg-slate-800 ${showHeaderAndColumns ? 'rounded ' : 'min-h-screen'}`}>
<div class={`bg-wildebeest-600 ${showHeaderAndColumns ? 'rounded ' : 'min-h-screen'}`}>
<Slot />
</div>
</div>
{showHeaderAndColumns && (
<div class="w-fit md:w-72 border-l xl:border-l-0 border-slate-700 xl:mx-[10px]">
<div class="w-fit md:w-72 border-l xl:border-l-0 border-wildebeest-700 xl:mx-[10px]">
<div class="sticky top-[3.9rem] xl:top-[10px]">
<RightColumn />
</div>

4
frontend/src/routes/public/index.tsx
Wyświetl plik

@ -21,8 +21,8 @@ export default component$(() => {
return (
<>
<StickyHeader>
<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
<i class="fa fa-globe fa-fw mr-3 text-slate-100" />
<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center text-white">
<i class="fa fa-globe fa-fw mr-3" />
<span>Federated timeline</span>
</div>
</StickyHeader>

4
frontend/src/routes/public/local/index.tsx
Wyświetl plik

@ -20,8 +20,8 @@ export default component$(() => {
return (
<>
<StickyHeader>
<div class="xl:rounded-t bg-slate-700 p-4 flex items-center">
<i class="fa fa-users fa-fw mr-3 text-slate-100" />
<div class="xl:rounded-t bg-wildebeest-700 p-4 flex items-center">
<i class="fa fa-users fa-fw mr-3" />
<span>Local timeline</span>
</div>
</StickyHeader>

8
frontend/src/routes/start-instance/step-1.tsx
Wyświetl plik

@ -20,7 +20,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
<input
id="start-instance-title"
name="title"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
value={instanceConfig.title}
onInput$={(ev) => (instanceConfig.title = (ev.target as HTMLInputElement).value)}
/>
@ -36,7 +36,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
id="start-instance-email"
name="email"
type="email"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
value={instanceConfig.email}
onInput$={(ev) => (instanceConfig.email = (ev.target as HTMLInputElement).value)}
/>
@ -51,7 +51,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
<input
id="start-instance-description"
name="description"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-indigo-400 focus:border-indigo-400 invalid:border-red-400 flex-1 w-full"
class="bg-black text-white p-3 rounded outline-none border border-black hover:border-wildebeest-vibrant-400 focus:border-wildebeest-vibrant-400 invalid:border-red-400 flex-1 w-full"
value={instanceConfig.description}
onInput$={(ev) => (instanceConfig.description = (ev.target as HTMLInputElement).value)}
/>
@ -60,7 +60,7 @@ export default component$<Props>(({ instanceConfig, setLoading, setInstanceConfi
<button
type="submit"
class="mb-9 bg-indigo-600 hover:bg-indigo-500 p-3 text-white text-uppercase border-indigo-600 text-lg text-semi outline-none border rounded hover:border-indigo-500 focus:border-indigo-500"
class="mb-9 bg-wildebeest-vibrant-400 hover:bg-wildebeest-vibrant-500 p-3 text-white text-uppercase border-wildebeest-vibrant-400 text-lg text-semi outline-none border rounded hover:border-wildebeest-vibrant-500 focus:border-wildebeest-vibrant-500"
preventdefault:click
onClick$={async () => {
setLoading(true)

15
frontend/src/styles.scss
Wyświetl plik

@ -2,6 +2,19 @@
@tailwind components;
@tailwind utilities;
:root {
--wildebeest-color-200: #d9e1e8;
--wildebeest-color-400: #9baec8;
--wildebeest-color-500: #606984;
--wildebeest-color-700: #313543;
--wildebeest-color-600: #282c37;
--wildebeest-color-800: #1f232b;
--wildebeest-color-900: #191b22;
--wildebeest-vibrant-color-400: #8c8dff;
--wildebeest-vibrant-color-500: #6364ff;
--wildebeest-vibrant-color-600: #595aff;
}
body {
font-family: ui-sans-serif, sans-serif, ui-sans-serif;
line-height: 1.25rem;
@ -20,4 +33,4 @@ button {
.pointer {
cursor: pointer;
}
}

15
frontend/tailwind.config.cjs
Wyświetl plik

@ -2,7 +2,20 @@
module.exports = {
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
theme: {
extend: {},
extend: {
colors: {
'wildebeest-200': 'var(--wildebeest-color-200)',
'wildebeest-400': 'var(--wildebeest-color-400)',
'wildebeest-500': 'var(--wildebeest-color-500)',
'wildebeest-600': 'var(--wildebeest-color-600)',
'wildebeest-700': 'var(--wildebeest-color-700)',
'wildebeest-800': 'var(--wildebeest-color-800)',
'wildebeest-900': 'var(--wildebeest-color-900)',
'wildebeest-vibrant-400': 'var(--wildebeest-vibrant-color-400)',
'wildebeest-vibrant-500': 'var(--wildebeest-vibrant-color-500)',
'wildebeest-vibrant-600': 'var(--wildebeest-vibrant-color-600)',
}
},
},
plugins: [],
};