From 8378151646a663020a54bd3f457cee2499a6739b Mon Sep 17 00:00:00 2001
From: saboooooor <saboor547@gmail.com>
Date: Sun, 5 May 2024 19:50:03 -0600
Subject: [PATCH] New layout (perhaps)

---
 src/routes/resources/rgb/index.tsx | 99 +++++++++++++++++-------------
 1 file changed, 56 insertions(+), 43 deletions(-)

diff --git a/src/routes/resources/rgb/index.tsx b/src/routes/resources/rgb/index.tsx
index 12aefd27..fd355d7f 100644
--- a/src/routes/resources/rgb/index.tsx
+++ b/src/routes/resources/rgb/index.tsx
@@ -149,6 +149,10 @@ export default component$(() => {
 
         <div class="grid sm:grid-cols-2 md:grid-cols-3 lg: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" />
+              {t('color.colors@@Colors')}
+            </h1>
             <Dropdown id="color-preset" class={{ 'w-full': true }} onChange$={
               (event: any) => {
                 if (event.target!.value == 'custom') return;
@@ -180,7 +184,7 @@ export default component$(() => {
             >
               {t('color.colorAmount@@Color Amount')}
             </NumberInput>
-            <div class="flex flex-col gap-2 overflow-auto sm:h-[500px]">
+            <div class="flex flex-col gap-2 sm:overflow-auto sm:h-[500px]">
               {store.colors.map((color: string, i: number) => {
                 return <div key={`color${i + 1}`} class="flex items-end">
                   <ColorInput
@@ -207,8 +211,12 @@ export default component$(() => {
               })}
             </div>
           </div>
-          <div class="md:col-span-2 lg:col-span-3">
-            <div class="flex flex-col gap-3" id="inputs">
+          <div class="md:col-span-2 lg:col-span-3 sm:grid grid-cols-3 gap-4">
+            <div class="flex flex-col gap-3 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" />
+                {t('color.inputs@@Inputs')}
+              </h1>
               <TextInput id="input" value={store.text} placeholder="birdflop" onInput$={(event: any) => { store.text = event.target!.value; }}>
                 {t('color.inputText@@Input Text')}
               </TextInput>
@@ -243,8 +251,8 @@ export default component$(() => {
                 ]}>
                   {t('color.colorFormat@@Color Format')}
                 </Dropdown>
-                <TextInput id="formatchar" value={store.formatchar} placeholder="&" onInput$={(event: any) => { store.formatchar = event.target!.value; }}>
-                  {t('color.formatCharacter@@Format Character')}
+                <TextInput id="prefix" value={store.prefix} placeholder={t('gradient.prefixPlaceholder@@example: \'/nick \'')} onInput$={(event: any) => { store.prefix = event.target!.value; }}>
+                  {t('gradient.prefix@@Prefix (Usually used for commands)')}
                 </TextInput>
               </div>
 
@@ -267,11 +275,7 @@ export default component$(() => {
                 </>
               }
 
-              <TextInput id="prefix" value={store.prefix} placeholder={t('gradient.prefixPlaceholder@@example: \'/nick \'')} onInput$={(event: any) => { store.prefix = event.target!.value; }}>
-                {t('gradient.prefix@@Prefix (Usually used for commands)')}
-              </TextInput>
-
-              <div class="flex flex-col sm:flex-row sm:items-end gap-2">
+              <div class="flex flex-col gap-2">
                 <TextInput id="import" name="import" placeholder={t('color.import@@Import (Paste here)')} onInput$={async (event: any) => {
                   let json: any;
                   try {
@@ -301,44 +305,53 @@ export default component$(() => {
                 }}>
                   {t('color.presets@@Presets')}
                 </TextInput>
-                <Button id="export" size="sm" onClick$={() => {
-                  navigator.clipboard.writeText(JSON.stringify({ version: presetVersion, ...store, alerts: undefined }));
-                  const alert = {
-                    class: 'text-green-500',
-                    text: 'color.exportedPreset@@Successfully exported preset to clipboard!',
-                  };
-                  store.alerts.push(alert);
-                  setTimeout(() => {
-                    store.alerts.splice(store.alerts.indexOf(alert), 1);
-                  }, 2000);
-                }}>
-                  {t('color.export@@Export')}
-                </Button>
-                <Button id="createurl" size="sm" onClick$={() => {
-                  const base_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
-                  const url = new URL(base_url);
-                  const params = { ...store, alerts: undefined };
-                  Object.entries(params).forEach(([key, value]) => {
-                    url.searchParams.set(key, String(value));
-                  });
-                  window.history.pushState({}, '', url.href);
-                  const alert = {
-                    class: 'text-green-500',
-                    text: 'color.exportedPresetUrl@@Successfully exported preset to url!',
-                  };
-                  store.alerts.push(alert);
-                  setTimeout(() => {
-                    store.alerts.splice(store.alerts.indexOf(alert), 1);
-                  }, 2000);
-                }}>
-                  {t('color.url@@Export As URL')}
-                </Button>
+                <div class="flex gap-2">
+                  <Button id="export" size="sm" onClick$={() => {
+                    navigator.clipboard.writeText(JSON.stringify({ version: presetVersion, ...store, alerts: undefined }));
+                    const alert = {
+                      class: 'text-green-500',
+                      text: 'color.exportedPreset@@Successfully exported preset to clipboard!',
+                    };
+                    store.alerts.push(alert);
+                    setTimeout(() => {
+                      store.alerts.splice(store.alerts.indexOf(alert), 1);
+                    }, 2000);
+                  }}>
+                    {t('color.export@@Export')}
+                  </Button>
+                  <Button id="createurl" size="sm" onClick$={() => {
+                    const base_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;
+                    const url = new URL(base_url);
+                    const params = { ...store, alerts: undefined };
+                    Object.entries(params).forEach(([key, value]) => {
+                      url.searchParams.set(key, String(value));
+                    });
+                    window.history.pushState({}, '', url.href);
+                    const alert = {
+                      class: 'text-green-500',
+                      text: 'color.exportedPresetUrl@@Successfully exported preset to url!',
+                    };
+                    store.alerts.push(alert);
+                    setTimeout(() => {
+                      store.alerts.splice(store.alerts.indexOf(alert), 1);
+                    }, 2000);
+                  }}>
+                    {t('color.url@@Export As URL')}
+                  </Button>
+                </div>
               </div>
               {store.alerts.map((alert: any, i: number) => (
                 <p key={`preset-alert${i}`} class={alert.class} dangerouslySetInnerHTML={t(alert.text)} />
               ))}
             </div>
-            <div class="sm:mt-6 mb-4 hidden sm:flex flex-col gap-4" id="formatting">
+            <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" />
+                {t('color.colors@@Formatting')}
+              </h1>
+              <TextInput id="formatchar" value={store.formatchar} placeholder="&" onInput$={(event: any) => { store.formatchar = event.target!.value; }}>
+                {t('color.formatCharacter@@Format Character')}
+              </TextInput>
               <Toggle id="bold" checked={store.bold}
                 onChange$={(event: any) => { store.bold = event.target!.checked; }}
                 label={`${t('color.bold@@Bold')} - ${store.formatchar}l`} />