Skip to content

Commit

Permalink
Merge pull request #58 from dxw/feature/dark-mode
Browse files Browse the repository at this point in the history 
Implement dark mode for dashboard
  • Loading branch information
@danlivings-dxw
danlivings-dxw authored Sep 24, 2024
2 parents 92e1e2a + 029aba2 commit 97e12fb
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions index.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,16 @@
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-stone-100 text-stone-800">
<header class="bg-white">
<nav class="w-full flex p-6 border-b-4 border-stone-200">
<body class="bg-stone-100 text-stone-800 dark:bg-stone-800 dark:text-stone-200">
<header class="bg-white dark:bg-stone-600">
<nav class="w-full flex p-6 border-b-4 border-stone-200 dark:border-stone-900">
<h1 class="text-3xl">Towtruck</h1>
</nav>
</header>

<div class="container mx-auto flex flex-col mt-6 space-y-6">
<div class="bg-stone-50 rounded-lg border-b-4 border-stone-200 space-y-4">
<h2 class="bg-white rounded-t-lg border-b-2 border-stone-100 text-xl font-bold p-4">{{ org }}</h2>
<div class="bg-stone-50 dark:bg-stone-700 rounded-lg border-b-4 border-stone-200 dark:border-stone-900 space-y-4">
<h2 class="bg-white dark:bg-stone-600 rounded-t-lg border-b-2 border-stone-100 dark:border-stone-800 text-xl font-bold p-4">{{ org }}</h2>
<p class="mx-4">
{% if totalRepos === 1 %}
There is <span class="font-bold">1</span> repository
Expand All @@ -30,8 +30,8 @@
that Towtruck is tracking for <span class="font-bold">{{ org }}</span>.
</p>
<div class="mx-4">
<table class="table-fixed w-full mb-4 border-y border-stone-200">
<thead class="sticky top-0 z-20 bg-white border-b border-stone-200 text-left">
<table class="table-fixed w-full mb-4 border-y border-stone-200 dark:border-stone-900">
<thead class="sticky top-0 z-20 bg-white dark:bg-stone-600 border-b border-stone-200 dark:border-stone-900 text-left">
<tr class="space-x-2">
<th class="py-2 pl-2 w-5/12" scope="col">Repository</th>
{{macros.sortableTableHeader("Open issues count", "openIssues", sortDirection, sortBy)}}
Expand All @@ -46,12 +46,12 @@
</thead>
<tbody>
{% for repo in repos %}
<tr class="even:bg-white">
<tr class="even:bg-white dark:even:bg-stone-600">
<td class="py-2 pl-2 align-text-top" scope="row">
<div class="text-[0px]">
<a target="_blank" class="inline-block text-base text-sky-600 dark:text-sky-500 hover:underline" href="{{repo.htmlUrl}}">{{ repo.name }}</a>
{% if repo.language %}
<span class="inline-block text-xs text-{{ repo.languageColor }}-600 border-{{ repo.languageColor }}-600 border rounded-lg ml-2 py-1 px-2">{{ repo.language }}</span>
<span class="inline-block text-xs text-{{ repo.languageColor }}-600 dark:text-{{ repo.languageColor }}-400 border-{{ repo.languageColor }}-600 dark:border-{{ repo.languageColor }}-400 border rounded-lg ml-2 py-1 px-2">{{ repo.language }}</span>
{% endif %}
{% if repo.totalOpenAlerts !== undefined %}
<div class="inline-block whitespace-nowrap text-[0px] ml-2 align-[-1px]">
Expand All @@ -77,12 +77,12 @@
{% if repo.topics.length %}
<div class="mt-4">
{% for topic in repo.topics %}
<span class="text-xs text-stone-600 bg-stone-200 rounded-full py-1 px-2">{{ topic }}</span>
<span class="text-xs text-stone-600 dark:text-stone-400 bg-stone-200 dark:bg-stone-800 rounded-full py-1 px-2">{{ topic }}</span>
{% endfor %}
</div>
{% endif %}

<hr class="mt-4 w-96 border-stone-200" />
<hr class="mt-4 w-96 border-stone-200 dark:border-stone-400" />

<div class="mt-4 mb-2">
{% if repo.dependencies.length %}
Expand All @@ -104,30 +104,30 @@
<li>
<div class="inline-block whitespace-nowrap text-[0px]">
<span>
<span class="font-mono text-sm bg-{{ dependency.color }}-200 rounded-l-full last:rounded-r-full py-1 px-2">{{ dependency.name }}</span>
<span class="font-mono text-sm bg-{{ dependency.color }}-200 dark:bg-{{ dependency.color }}-800 rounded-l-full last:rounded-r-full py-1 px-2">{{ dependency.name }}</span>
{% if dependency.version %}
<span class="font-mono text-sm bg-{{ dependency.color }}-300 last:rounded-r-full py-1 px-2">v{{ dependency.version }}</span>
<span class="font-mono text-sm bg-{{ dependency.color }}-300 dark:bg-{{ dependency.color }}-900 last:rounded-r-full py-1 px-2">v{{ dependency.version }}</span>
{% endif %}
{% if dependency.tag %}
<span class="font-mono text-sm bg-{{ dependency.color }}-400 text-white last:rounded-r-full py-1 px-2">{{ dependency.tag }}</span>
<span class="font-mono text-sm bg-{{ dependency.color }}-400 dark:bg-{{ dependency.color }}-950 text-white last:rounded-r-full py-1 px-2">{{ dependency.tag }}</span>
{% endif %}
</span>
<span class="inline-block w-1"></span>
<span>
{% if dependency.isOutdated %}
<span class="font-mono text-sm bg-{{ dependency.color }}-500 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<span class="font-mono text-sm bg-{{ dependency.color }}-500 dark:bg-{{ dependency.color }}-600 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx {{dependency.icon}}"></i>
{{ dependency.changelog }}
v{{ dependency.latestVersion }}
</span>
{% endif %}
{% if dependency.isEndOfLifeSoon %}
<span class="font-mono text-sm bg-{{ dependency.color }}-600 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<span class="font-mono text-sm bg-{{ dependency.color }}-600 dark:bg-{{ dependency.color }}-700 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx bxs-hourglass"></i>
<span class="font-sans">Support ends {{ dependency.endOfLifeRelative }}</span>
</span>
{% elif dependency.isOutOfSupport %}
<span class="font-mono text-sm bg-{{ dependency.color }}-600 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<span class="font-mono text-sm bg-{{ dependency.color }}-600 dark:bg-{{ dependency.color }}-700 text-white first:rounded-l-full last:rounded-r-full py-1 px-2">
<i class="align-[-1px] bx bxs-hourglass-bottom"></i>
<span class="font-sans">Support ended {{ dependency.endOfLifeRelative }}</span>
</span>
Expand Down

0 comments on commit 97e12fb

Please sign in to comment.