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

Jump to bottom

Type clean-up on Dashboard #6555

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Type clean-up on Dashboard #6555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
71de7ac
chore: setting defined type styles
ekidneyrh Mar 28, 2024
759cd1f
chore: adjusted font sizes on dahsboard screen to improve visual hier…
ekidneyrh Mar 28, 2024
1882450
Update tailwind.config.cjs
ekidneyrh Mar 28, 2024
d9f7a2e
Revert "chore: setting defined type styles"
ekidneyrh Apr 2, 2024
7523f06
test: fixing button tests to follow new formatting for type
ekidneyrh Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/carousel/CarouselTest.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Carousel from './Carousel.svelte';
</script>

<div>
<p class="text-lg first-letter:uppercase font-bold pb-5">Learning center:</p>
<p class="text-lg first-letter:uppercase pb-5">Learning center:</p>
<div class="bg-charcoal-800 p-4 rounded-lg">
<Carousel cards="{['card 1', 'card 2', 'card 3']}" cardWidth="{340}" let:card>
<p>{card}</p>
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/dashboard/NotificationsBox.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ onDestroy(() => {
{#if notifications.length > 0}
<div class="bg-charcoal-800 m-5 px-5 py-4 rounded-lg">
<div class="flex flex-col items-center justify-content space-y-3" role="region" aria-label="Notifications Box">
<span class="text-md text-white mb-1">Notifications</span>
<span class="text-base text-white mb-1">Notifications</span>
{#each notifications as notification}
<NotificationCardItem notification="{notification}" />
{/each}
Expand Down
4 changes: 2 additions & 2 deletions packages/renderer/src/lib/dashboard/ProviderCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@ export let provider: ProviderInfo;
<div class="flex flex-row">
<div class="flex flex-row">
<IconImage image="{provider?.images?.icon}" class="mx-auto max-h-12" alt="{provider.name}"></IconImage>
<div class="flex flex-col text-gray-400 ml-3 whitespace-nowrap" aria-label="context-name">
<div class="flex flex-col text-gray-400 text-lg ml-3 whitespace-nowrap" aria-label="context-name">
<div class="flex flex-row items-center">
{provider.name}
{#if provider.version}
<div class="text-gray-800 text-sm pl-1" aria-label="Provider Version">
<div class="text-gray-800 text-base pl-1" aria-label="Provider Version">
v{provider.version}
</div>
{/if}
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/dashboard/ProviderConfigured.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ onMount(() => {

<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<p class="text-base text-gray-700">
<p class="text-sm text-gray-700">
To start working with containers, {provider.name}
{#if provider.version}
v{provider.version}
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/dashboard/ProviderInstalled.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ function onInstallationClick() {

<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<p class="text-base text-gray-700" aria-label="Suggested Actions">
<p class="text-sm text-gray-700" aria-label="Suggested Actions">
To start working with containers, {provider.name} needs to be initialized.
</p>

Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ let preflightChecks: CheckStatus[] = [];

<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
<p class="text-base text-gray-700" aria-label="Suggested Actions">
<p class="text-sm text-gray-700" aria-label="Suggested Actions">
Could not find an installation. To start working with containers, {provider.name} needs to be detected/installed.
</p>
<div class="mt-5 mb-1 w-full flex justify-around">
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/dashboard/ProviderReady.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ let preflightChecks: CheckStatus[] = [];
<ProviderCard provider="{provider}">
<svelte:fragment slot="content">
{#if provider.containerConnections.length > 0}
<div class="flex flex-row text-xs text-gray-900 mt-4">
<div class="flex flex-row text-sm text-gray-900 mt-4">
<p>
{provider.containerConnections.map(c => c.name).join(', ')}
</p>
Expand Down
8 changes: 4 additions & 4 deletions packages/renderer/src/lib/featured/FeaturedExtensions.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import FeaturedExtensionDownload from './FeaturedExtensionDownload.svelte';
</script>

<!--Title-->
<p class="text-lg first-letter:uppercase font-bold">featured extensions:</p>
<p class="text-lg first-letter:uppercase">featured extensions:</p>
<div class="grid min-[920px]:grid-cols-2 min-[1180px]:grid-cols-3 gap-3" role="region" aria-label="FeaturedExtensions">
{#each $featuredExtensionInfos as featuredExtension}
<div
Expand All @@ -24,21 +24,21 @@ import FeaturedExtensionDownload from './FeaturedExtensionDownload.svelte';
alt="{featuredExtension.displayName} logo"
src="{featuredExtension.icon}" />
</div>
<div class="flex flex-1 mx-2 cursor-default font-bold justify-start">
<div class="flex flex-1 mx-2 cursor-default text-base justify-start">
{featuredExtension.displayName}
</div>
<div class="h-full w-18 flex flex-col items-end place-content-center">
{#if featuredExtension.installed}
<div class="text-dustypurple-700 p-1 text-center flex flex-row place-items-center">
<Fa class="ml-1.5 mr-2" size="1.1x" icon="{faCheckCircle}" />
<div class="uppercase font-bold text-xs cursor-default">installed</div>
<div class="uppercase text-bt cursor-default">installed</div>
</div>
{:else if featuredExtension.fetchable}
<FeaturedExtensionDownload featuredExtension="{featuredExtension}" />
{:else}
<div class="text-charcoal-300 p-1 text-center flex flex-row place-items-center">
<Fa class="ml-1.5 mr-1" size="1.1x" icon="{faCircleXmark}" />
<div class="uppercase text-xs cursor-default font-extralight">N/A</div>
<div class="uppercase text-bt cursor-default font-extralight">N/A</div>
</div>
{/if}
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/learning-center/GuideCard.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ async function openGuide(guide: Guide): Promise<void> {
<div class="px-4">
<img src="{`data:image/png;base64,${guide.icon}`}" class="h-[48px]" alt="{guide.id}" />
</div>
<div class="px-4 pt-4 text-nowrap text-sm text-gray-400">
<div class="px-4 pt-4 text-nowrap text-base text-gray-400">
{guide.title}
</div>
<p class="line-clamp-4 px-4 pt-4 text-sm text-gray-700">{guide.description}</p>
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/learning-center/LearningCenter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ onMount(async () => {
{:else}
<i class="fas fa-chevron-right"></i>
{/if}
<span>Learning Center</span>
<p class="text-lg text-gray-100">Learning Center</p>
</div>
</button>
</div>
Expand Down
16 changes: 8 additions & 8 deletions packages/renderer/src/lib/ui/Button.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ test('Check primary button styling', async () => {
expect(button).toHaveClass('bg-purple-600');
expect(button).toHaveClass('border-none');
expect(button).toHaveClass('py-[5px]');
expect(button).toHaveClass('text-[13px]');
expect(button).toHaveClass('text-bt');
expect(button).toHaveClass('text-white');
});

Expand All @@ -48,7 +48,7 @@ test('Check disabled/in-progress primary button styling', async () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass('bg-charcoal-50');
expect(button).toHaveClass('py-[5px]');
expect(button).toHaveClass('text-[13px]');
expect(button).toHaveClass('text-bt');
});

test('Check primary button is the default', async () => {
Expand All @@ -70,7 +70,7 @@ test('Check secondary button styling', async () => {
expect(button).toHaveClass('border-gray-200');
expect(button).toHaveClass('border-[1px]');
expect(button).toHaveClass('py-[4px]');
expect(button).toHaveClass('text-[13px]');
expect(button).toHaveClass('text-bt');
expect(button).toHaveClass('text-white');
});

Expand All @@ -85,7 +85,7 @@ test('Check danger button styling', async () => {
expect(button).toHaveClass('px-4');
expect(button).toHaveClass('py-[3px]');
expect(button).toHaveClass('bg-charcoal-700');
expect(button).toHaveClass('text-[13px]');
expect(button).toHaveClass('text-bt');
expect(button).toHaveClass('text-white');
});

Expand All @@ -100,7 +100,7 @@ test('Check disabled/in-progress secondary button styling', async () => {
expect(button).toHaveClass('px-4');
expect(button).toHaveClass('py-[4px]');
expect(button).toHaveClass('bg-charcoal-50');
expect(button).toHaveClass('text-[13px]');
expect(button).toHaveClass('text-bt');
});

test('Check link button styling', async () => {
Expand All @@ -114,7 +114,7 @@ test('Check link button styling', async () => {
expect(button).toHaveClass('py-[5px]');
expect(button).toHaveClass('hover:bg-white');
expect(button).toHaveClass('hover:bg-opacity-10');
expect(button).toHaveClass('text-[13px]');
expect(button).toHaveClass('text-bt');
expect(button).toHaveClass('text-purple-400');
});

Expand All @@ -127,7 +127,7 @@ test('Check disabled/in-progress link button styling', async () => {
expect(button).toHaveClass('px-4');
expect(button).toHaveClass('py-[5px]');
expect(button).toHaveClass('text-charcoal-50');
expect(button).toHaveClass('text-[13px]');
expect(button).toHaveClass('text-bt');
});

test('Check tab button styling', async () => {
Expand All @@ -141,7 +141,7 @@ test('Check tab button styling', async () => {
expect(button).toHaveClass('pb-1');
expect(button).toHaveClass('text-gray-600');
expect(button).toHaveClass('hover:cursor-pointer');
expect(button).not.toHaveClass('text-[13px]');
expect(button).not.toHaveClass('text-bt');
});

test('Check selected tab button styling', async () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/ui/Button.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ $: {
}

if (type !== 'tab') {
classes += ' rounded-[4px] text-[13px]';
classes += ' rounded-[4px] text-bt';
}
}
</script>
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/ui/ConnectionStatus.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface connectionStatusStyle {
}

const roundIconStyle = 'my-auto w-3 h-3 rounded-full';
const labelStyle = 'my-auto ml-1 font-bold text-[9px]';
const labelStyle = 'my-auto ml-1 text-sm';
const statusesStyle = new Map<string, connectionStatusStyle>([
[
'started',
Expand Down
2 changes: 1 addition & 1 deletion packages/renderer/src/lib/ui/ProviderStatus.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface connectionStatusStyle {
| 'configured'
| 'unknown';*/
const roundIconStyle = 'my-auto w-3 h-3 rounded-full';
const labelStyle = 'my-auto ml-1 font-bold text-[9px]';
const labelStyle = 'my-auto ml-1 text-sm';
const statusesStyle = new Map<string, connectionStatusStyle>([
[
'ready',
Expand Down