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.

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

update stock #160

Merged
merged 2 commits into from
Jul 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion src/routes/plans/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export const plans = {
'6 Logical Cores',
'Unmetered* NVMe Storage',
],
outOfStock: false,
outOfStock: true,
},
};

Expand Down
39 changes: 19 additions & 20 deletions src/routes/resources/animtab/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { AnimationOutput, convertToRGB, getAnimFrames, getBrightness, getRandomC

import { Add, BarChartOutline, ChevronDown, ChevronUp, ColorFillOutline, DiceOutline, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons';

import { Button, Header, NumberInput, Dropdown, TextArea, TextInput, Toggle, ColorPicker } from '@luminescent/ui';
import { Button, NumberInput, Dropdown, TextArea, TextInput, Toggle, ColorPicker } from '@luminescent/ui';
import { inlineTranslate, useSpeak } from 'qwik-speak';
import { getCookies, setCookies, sortColors } from '~/components/util/SharedUtils';
import { isBrowser } from '@builder.io/qwik/build';
Expand Down Expand Up @@ -124,23 +124,22 @@ export default component$(() => {
});

return (
<section class="flex mx-auto max-w-6xl px-6 justify-center min-h-svh pt-[72px] scale-for-mac">
<div class="my-10 w-full">
<h1 class="font-bold text-gray-50 text-2xl sm:text-4xl mb-2">
<section class="flex mx-auto max-w-6xl px-6 justify-center min-h-svh pt-[72px]">
<div class="my-5 min-h-[60px] w-full">
<h1 class="font-bold text-gray-50 text-2xl md:text-3xl xl:text-4xl">
{t('animtab.title@@Animated TAB')}
</h1>
<h2 class="text-gray-50 text-base sm:text-xl mb-6">
<h2 class="text-gray-50 text-base mt-1 mb-9">
{t('animtab.subtitle@@TAB plugin gradient animation creator')}
</h2>

<TextArea class={{ 'font-mono text-sm text-nowrap': true }} output id="output" value={AnimationOutput({ ...store, ...animtabstore })}>
<Header subheader={t('color.outputSubtitle@@Copy-paste this for RGB text!')}>
{t('color.output@@Output')}
</Header>
<span class="font-bold mr-2 text-gray-100">{t('color.output@@Output')}</span>
<span class="text-gray-500">- {t('color.outputSubtitle@@Copy-paste this for RGB text!')}</span>
</TextArea>

<h1 class={{
'text-4xl sm:text-6xl my-6 break-all max-w-7xl font-mc tracking-tight': true,
'text-3xl md:text-4xl xl:text-5xl my-4 break-all font-mc tracking-tight': true,
'font-mc-bold': store.bold,
'font-mc-italic': store.italic,
'font-mc-bold-italic': store.bold && store.italic,
Expand All @@ -164,7 +163,7 @@ export default component$(() => {
})()}
</h1>

<div class="w-full h-3 my-6 rounded-full items-center relative" id="colormap"
<div class="w-full h-3 my-5 rounded-full items-center relative" id="colormap"
style={`background: linear-gradient(to right, ${sortColors(store.colors).map(color => `${color.hex} ${color.pos}%`).join(', ')});`}
onMouseDown$={(e, el) => {
if (e.target != el) return;
Expand Down Expand Up @@ -284,7 +283,7 @@ export default component$(() => {
)}
</div>

<div id="mobile-navbuttons" class="my-4 sm:hidden">
<div id="mobile-navbuttons" class="my-3 sm:hidden">
<div class="flex gap-2">
<Button square aria-label="Colors" onClick$={() => {
document.getElementById('colors')!.classList.replace('hidden', 'flex');
Expand All @@ -311,9 +310,9 @@ export default component$(() => {
</div>

<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-4">
<div class="hidden sm:flex flex-col gap-3 relative" id="colors">
<h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
<ColorFillOutline width="32" />
<div class="hidden sm:flex flex-col gap-2 relative" id="colors">
<h1 class="hidden sm:flex text-lg md:text-xl xl:text-2xl font-semibold text-gray-50 gap-2 items-center justify-center">
<ColorFillOutline width="30" />
{t('color.colors@@Colors')}
</h1>
<Dropdown id="color-preset" class={{ 'w-full': true }} onChange$={
Expand Down Expand Up @@ -463,9 +462,9 @@ export default component$(() => {
</div>
</div>

<div class="flex flex-col gap-3 md:col-span-2" id="inputs">
<h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
<SettingsOutline width="32" />
<div class="flex flex-col gap-2 md:col-span-2" id="inputs">
<h1 class="hidden sm:flex text-lg md:text-xl xl:text-2xl font-semibold text-gray-50 gap-3 items-center justify-center">
<SettingsOutline width="30" />
{t('color.inputs@@Inputs')}
</h1>

Expand Down Expand Up @@ -671,9 +670,9 @@ export default component$(() => {
}
</div>

<div class="mb-4 hidden sm:flex flex-col gap-3" id="formatting">
<h1 class="hidden sm:flex text-2xl font-bold fill-current text-gray-50 gap-4 items-center justify-center">
<Text width="32" />
<div class="mb-4 flex flex-col gap-2" id="formatting">
<h1 class="hidden sm:flex text-lg md:text-xl xl:text-2xl font-semibold fill-current text-gray-50 gap-3 items-center justify-center">
<Text width="30" />
{t('color.colors@@Formatting')}
</h1>
<Toggle id="bold" checked={store.bold}
Expand Down
41 changes: 20 additions & 21 deletions src/routes/resources/rgb/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { convertToHex, convertToRGB, generateOutput, getBrightness, getRandomCol

import { Add, BarChartOutline, ChevronDown, ChevronUp, ColorFillOutline, DiceOutline, SettingsOutline, Text, TrashOutline } from 'qwik-ionicons';

import { Button, Header, Dropdown, TextArea, TextInput, Toggle, NumberInput, ColorPicker } from '@luminescent/ui';
import { Button, Dropdown, TextArea, TextInput, Toggle, NumberInput, ColorPicker } from '@luminescent/ui';
import { inlineTranslate, useSpeak } from 'qwik-speak';
import { getCookies, setCookies, sortColors } from '~/components/util/SharedUtils';
import { isBrowser } from '@builder.io/qwik/build';
Expand Down Expand Up @@ -85,26 +85,25 @@ export default component$(() => {
});

return (
<section class="flex mx-auto max-w-6xl px-6 justify-center min-h-svh pt-[72px] scale-for-mac">
<div class="my-10 min-h-[60px] w-full">
<h1 class="font-bold text-gray-50 text-2xl sm:text-4xl mb-2">
<section class="flex mx-auto max-w-6xl px-6 justify-center min-h-svh pt-[72px]">
<div class="my-5 min-h-[60px] w-full">
<h1 class="font-bold text-gray-50 text-2xl md:text-3xl xl:text-4xl">
{t('gradient.title@@RGBirdflop')}
</h1>
<h2 class="text-gray-50 text-base sm:text-xl">
<h2 class="text-gray-50 text-base my-1">
{t('gradient.subtitle@@Powered by Birdflop, a 501(c)(3) nonprofit Minecraft host.')}<br />
</h2>
<h3 class="text-gray-400 text-sm sm:text-lg mb-6">
<h3 class="text-gray-400 text-sm mb-3">
Wanna automate generating gradients or use this in your own project? We have <a class="text-blue-400 hover:underline" href="/api/v2/docs">an API!</a>
</h3>

<TextArea output id="output" class={{ 'font-mc': true }} value={generateOutput(store.text, store.colors, store.format, store.prefixsuffix, store.trimspaces, store.colorlength, store.bold, store.italic, store.underline, store.strikethrough)}>
<Header subheader={t('color.outputSubtitle@@Copy-paste this for RGB text!')}>
{t('color.output@@Output')}
</Header>
<span class="font-bold mr-2 text-gray-100">{t('color.output@@Output')}</span>
<span class="text-gray-500">- {t('color.outputSubtitle@@Copy-paste this for RGB text!')}</span>
</TextArea>

<h1 class={{
'text-4xl sm:text-6xl my-6 break-all max-w-7xl font-mc tracking-tight': true,
'text-3xl md:text-4xl xl:text-5xl my-4 break-all font-mc tracking-tight': true,
'font-mc-bold': store.bold,
'font-mc-italic': store.italic,
'font-mc-bold-italic': store.bold && store.italic,
Expand Down Expand Up @@ -134,7 +133,7 @@ export default component$(() => {
})()}
</h1>

<div class="w-full h-3 my-6 rounded-full items-center relative" id="colormap"
<div class="w-full h-3 my-5 rounded-full items-center relative" id="colormap"
style={`background: linear-gradient(to right, ${sortColors(store.colors).map(color => `${color.hex} ${color.pos}%`).join(', ')});`}
onMouseDown$={(e, el) => {
if (e.target != el) return;
Expand Down Expand Up @@ -254,7 +253,7 @@ export default component$(() => {
)}
</div>

<div id="mobile-navbuttons" class="my-4 sm:hidden">
<div id="mobile-navbuttons" class="my-3 sm:hidden">
<div class="flex gap-2">
<Button square aria-label="Colors" onClick$={() => {
document.getElementById('colors')!.classList.replace('hidden', 'flex');
Expand All @@ -281,9 +280,9 @@ export default component$(() => {
</div>

<div class="grid sm:grid-cols-3 md:grid-cols-4 gap-4">
<div class="hidden sm:flex flex-col gap-3 relative" id="colors">
<h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
<ColorFillOutline width="32" />
<div class="hidden sm:flex flex-col gap-2 relative" id="colors">
<h1 class="hidden sm:flex text-lg md:text-xl xl:text-2xl font-semibold text-gray-50 gap-2 items-center justify-center">
<ColorFillOutline width="30" />
{t('color.colors@@Colors')}
</h1>
<Dropdown id="color-preset" class={{ 'w-full': true }} onChange$={
Expand Down Expand Up @@ -424,9 +423,9 @@ export default component$(() => {
)}
</div>
</div>
<div class="flex flex-col gap-3 md:col-span-2" id="inputs">
<h1 class="hidden sm:flex text-2xl font-bold text-gray-50 gap-4 items-center justify-center">
<SettingsOutline width="32" />
<div class="flex flex-col gap-2 md:col-span-2" id="inputs">
<h1 class="hidden sm:flex text-lg md:text-xl xl:text-2xl font-semibold text-gray-50 gap-3 items-center justify-center">
<SettingsOutline width="30" />
{t('color.inputs@@Inputs')}
</h1>

Expand Down Expand Up @@ -606,9 +605,9 @@ export default component$(() => {
<p key={`preset-alert${i}`} class={alert.class} dangerouslySetInnerHTML={t(alert.text)} />
))}
</div>
<div class="mb-4 flex flex-col gap-3" id="formatting">
<h1 class="hidden sm:flex text-2xl font-bold fill-current text-gray-50 gap-4 items-center justify-center">
<Text width="32" />
<div class="mb-4 flex flex-col gap-2" id="formatting">
<h1 class="hidden sm:flex text-lg md:text-xl xl:text-2xl font-semibold fill-current text-gray-50 gap-3 items-center justify-center">
<Text width="30" />
{t('color.colors@@Formatting')}
</h1>
<Toggle id="bold" checked={store.bold}
Expand Down