@turnipxenon/pineapple 2.4.55 → 2.4.57

package/dist/template/seaweed/SeaweedTemplateData.d.ts

@@ -3,9 +3,13 @@ export declare enum GroupGridClass {
     Games = "games-section",
     Projects = "projects-section"
 }
+export interface ComponentMeta {
+    name: string;
+    component: ComponentType;
+}
 export interface EntryGroup {
     name: string;
-    items: ComponentType[];
+    items: ComponentMeta[];
     gridClass: string;
 }
 export declare const GameEntries: Readonly<EntryGroup>;
@@ -14,8 +18,8 @@ export declare const EmptyRelevantProjects: Readonly<EntryGroup>;
 export declare const AllGroupedEntriesGameFirst: ReadonlyArray<EntryGroup>;
 export declare const AllGroupedEntriesProjectFirst: ReadonlyArray<EntryGroup>;
 export declare const lazyInitializeAllFlatEntries: () => void;
-export declare const GetAllEntryFromGlobal: () => Map<string, ComponentType>;
-export declare const GetEntryFromGlobal: (name: string) => ComponentType | undefined;
+export declare const GetAllEntryFromGlobal: () => Map<string, ComponentMeta>;
+export declare const GetEntryFromGlobal: (name: string) => ComponentMeta | undefined;
 export declare const TurnGroupEntriesMutable: (allEntries: ReadonlyArray<EntryGroup>) => EntryGroup[];
 export interface SeaweedTemplateData {
     groupedEntries: EntryGroup[];

package/dist/template/seaweed/SeaweedTemplateData.js

@@ -19,12 +19,26 @@ export var GroupGridClass;
 })(GroupGridClass || (GroupGridClass = {}));
 export const GameEntries = {
     name: DefaultHeader.Games.toString(),
-    items: [Pengi, Hepcat, ChefWings, Soulwork, ItchPromo],
+    items: [
+        { name: "Pengi", component: Pengi },
+        { name: "Hepcat", component: Hepcat },
+        { name: "Chef Wings", component: ChefWings },
+        { name: "Soulwork", component: Soulwork },
+        { name: "Itch Promo", component: ItchPromo }
+    ],
     gridClass: GroupGridClass.Games.toString()
 };
 export const ProjectEntries = {
     name: DefaultHeader.Projects.toString(),
-    items: [MigranteAlberta, DecentralizedSocialMedia, CustomizedYarnspinner, FullStackC, Workset, ThisWebpage, MockUberApp],
+    items: [
+        { name: "Migrante Alberta", component: MigranteAlberta },
+        { name: "Decentralized Social Media", component: DecentralizedSocialMedia },
+        { name: "Customized YarnSpinner", component: CustomizedYarnspinner },
+        { name: "Full Stack C", component: FullStackC },
+        { name: "Workset", component: Workset },
+        { name: "This Webpage", component: ThisWebpage },
+        { name: "Mock Uber App", component: MockUberApp }
+    ],
     gridClass: GroupGridClass.Projects.toString()
 };
 export const EmptyRelevantProjects = {

package/dist/template/seaweed/entries/ThisWebpage.svelte

@@ -30,6 +30,8 @@ export let props;
 				<Chip>Typescript</Chip>
 				<Chip>Vercel</Chip>
 				<Chip>YarnSpinner</Chip>
+				<Chip>Postgres (SQL database)</Chip>
+				<Chip>Prisma ORM</Chip>
 			</p>
 
 			<section class="game-link-section">

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte

@@ -5,6 +5,9 @@
 } from "../SeaweedTemplateData";
 import { removeProxyWrapperOnString } from "./EntryOrderConfig";
 import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
+import CloseIcon from "../../../assets/icons/close.svg";
+import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
+import "./entry-order-config.postcss";
 export let seaweedEntries;
 export let orderUrl;
 export let updateUrl;
@@ -20,7 +23,6 @@ const updateOrderQuery = () => {
 const addEntry = (group) => {
   return (selected) => {
     const c = GetEntryFromGlobal(selected);
-    console.log(selected, c);
     if (c) {
       group.items.push(c);
       seaweedEntries = seaweedEntries;
@@ -38,7 +40,6 @@ const swapEntry = (index, group, shouldDecrement) => {
     } else {
       return;
     }
-    console.log(index, newIndex);
     const tempVar = group.items[newIndex];
     group.items[newIndex] = group.items[index];
     group.items[index] = tempVar;
@@ -76,10 +77,8 @@ const removeGroup = (group) => {
 };
 const removeEntry = (entry, group) => {
   return () => {
-    console.log("Clicked!");
     for (let i = group.items.length - 1; i >= 0; i--) {
       if (group.items[i].name === entry.name) {
-        console.log("Reduce");
         group.items.splice(i, 1);
         seaweedEntries = seaweedEntries;
         updateOrderQuery();
@@ -89,10 +88,10 @@ const removeEntry = (entry, group) => {
   };
 };
 const allDefaultEntries = Array.from(GetAllEntryFromGlobal().keys());
-console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
 </script>
 
-<h3>Site ordering</h3>
+<br>
+<h2>Site ordering</h2>
 <blockquote>Sorry! This part of the website is still WIP, but here it is anyway. As long as it functions</blockquote>
 
 <!-- formatting: group1:entry1|entry2,group2:entry3
@@ -101,30 +100,75 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
  , <= separates each group
  -->
 <div class="advanced-setting-list">
-	<!-- todo: we might have to extract this into it's own component -->
-	<!-- todo: NOW!!! -->
 	{#each seaweedEntries as group, groupIndex}
-		<div>
-			<div>
-				<button class="editable-button" on:click={removeGroup(group)}>X</button>
-				<!-- todo: move group up or down -->
-				<button class="editable-button" on:click={swapGroups(groupIndex, true)}>^</button>
-				<button class="editable-button" on:click={swapGroups(groupIndex, false)}>v</button>
-				{group.name}
+		<div class="entry-group card">
+
+			<div class="btn-group-header">
+				<button title={`Remove ${group.name}`}
+				        on:click={removeGroup(group)}>
+					<img class="img-icon" src={CloseIcon} alt={`Remove ${group.name}`}>
+				</button>
+
+				<button title={`Move group ${group.name} upwards`}
+				        on:click={swapGroups(groupIndex, true)}
+				        disabled="{groupIndex === 0}">
+					<img class="img-icon" src={UpwardIcon} alt={`Move group ${group.name} upwards`}>
+				</button>
+
+				<button title={`Move group ${group.name} downwards`}
+				        disabled={groupIndex === seaweedEntries.length - 1}
+				        on:click={swapGroups(groupIndex, false)}>
+					<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move group ${group.name} downwards`}>
+				</button>
+
+				<h2>{group.name}</h2>
 			</div>
-			<div class="advanced-setting-list card">
+
+			<table class="advanced-setting-list table">
+				<thead>
+				<tr>
+					<th>Entries</th>
+				</tr>
+				</thead>
+				<tbody>
 				{#each group.items as entry, entryIndex}
-					<div class="editable-entry">
-						<button on:click={removeEntry(entry, group)}>-</button>
-						<button on:click={swapEntry(entryIndex, group, true)}>^</button>
-						<button on:click={swapEntry(entryIndex, group, false)}>v</button>
-						{entry.name}
-					</div>
+					<tr class="entry-row">
+						<td class="btn-group-entry">
+
+							<button title={`Remove ${entry.name}`}
+							        on:click={removeEntry(entry, group)}>
+								<img class="img-icon" src={CloseIcon} alt={`Remove ${entry.name}`}>
+							</button>
+
+							<button title={`Move ${entry.name} upwards`}
+							        on:click={swapEntry(entryIndex, group, true)}
+							        disabled="{entryIndex === 0}">
+								<img class="img-icon" src={UpwardIcon} alt={`Move ${entry.name} upwards`}>
+							</button>
+
+							<button title={`Move ${entry.name} downwards`}
+							        disabled={entryIndex === group.items.length - 1}
+							        on:click={swapEntry(entryIndex, group, false)}>
+								<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move ${entry.name} downwards`}>
+							</button>
+							<div class="entry-name">
+								{entry.name}
+							</div>
+						</td>
+					</tr>
 				{/each}
-			</div>
+				</tbody>
+
+				<tfoot>
+				<tr>
+					<td>
+						<ComboBoxWithButton stringItems={allDefaultEntries}
+						                    onClick={addEntry(group)}></ComboBoxWithButton>
+					</td>
+				</tr>
+				</tfoot>
+			</table>
 
-			<ComboBoxWithButton stringItems={allDefaultEntries}
-			                    onClick={addEntry(group)}></ComboBoxWithButton>
 
 		</div>
 	{/each}
@@ -136,29 +180,43 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
         flex-direction: column;
     }
 
-    :is(.dark .editable-entry > button),:is(.dark  .editable-button) {
+    :is(.dark .btn-group-header) {
         --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
 }
 
-    .editable-entry > button:disabled, .editable-button:disabled {
+    .btn-group-header > *:disabled {
         cursor: not-allowed;
         opacity: 0.5;
 }
 
-    .editable-entry > button:disabled:hover, .editable-button:disabled:hover {
+    .btn-group-header > *:disabled:hover {
         --tw-brightness: brightness(1);
         filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-    .editable-entry > button:disabled:active, .editable-button:disabled:active {
+    .btn-group-header > *:disabled:active {
         --tw-scale-x: 1;
         --tw-scale-y: 1;
         transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-    .editable-entry > button, .editable-button {
+    .btn-group-header {
+        display: inline-flex;
+        flex-direction: row;
+        overflow: hidden;
+        border-radius: var(--theme-rounded-base);
+        isolation: isolate;
+}
+
+    .btn-group-header > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0px * var(--tw-space-x-reverse));
+        margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .btn-group-header button,.btn-group-header a {
         font-size: 1rem;
         line-height: 1.5rem;
         padding-left: 1.25rem;
@@ -173,37 +231,156 @@ console.log("Test", Array.from(GetAllEntryFromGlobal().keys()));
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         transition-duration: 150ms;
-        border-radius: var(--theme-rounded-base);
+        color: inherit;
+        text-decoration-line: none;
 }
 
-    .editable-entry > button > :not([hidden]) ~ :not([hidden]), .editable-button > :not([hidden]) ~ :not([hidden]) {
+    .btn-group-header button > :not([hidden]) ~ :not([hidden]),.btn-group-header a > :not([hidden]) ~ :not([hidden]) {
         --tw-space-x-reverse: 0;
         margin-right: calc(0.5rem * var(--tw-space-x-reverse));
         margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-    .editable-entry > button:hover, .editable-button:hover {
+    .btn-group-header button:hover,.btn-group-header a:hover {
         --tw-brightness: brightness(1.15);
         filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+        background-color: rgb(var(--color-surface-50) / 3%);
 }
 
-    .editable-entry > button:active, .editable-button:active {
-        --tw-scale-x: 95%;
-        --tw-scale-y: 95%;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-        --tw-brightness: brightness(.9);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    .btn-group-header button:active,.btn-group-header a:active {
+        background-color: rgb(var(--color-surface-900) / 3%);
+}
+
+    .btn-group-header > * + * {
+        border-top-width: 0px;
+        border-left-width: 1px;
+        border-color: rgb(var(--color-surface-500) / 0.2);
 }
 
-    .editable-entry > button, .editable-button {
+    .btn-group-header {
         --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
 }
 
-    :is(.dark .editable-entry > button),:is(.dark  .editable-button) {
+    :is(.dark .btn-group-header) {
         --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-primary));
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
+        color: rgb(var(--on-tertiary));
+}
+
+    .btn-group-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 0.5lh;
+    }
+
+    .btn-group-entry > *:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+}
+
+    .btn-group-entry > *:disabled:hover {
+        --tw-brightness: brightness(1);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
+    .btn-group-entry > *:disabled:active {
+        --tw-scale-x: 1;
+        --tw-scale-y: 1;
+        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+    .btn-group-entry {
+        display: inline-flex;
+        flex-direction: row;
+        overflow: hidden;
+        border-radius: var(--theme-rounded-base);
+        isolation: isolate;
+}
+
+    .btn-group-entry > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0px * var(--tw-space-x-reverse));
+        margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .btn-group-entry button,.btn-group-entry a {
+        font-size: 1rem;
+        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        white-space: nowrap;
+        text-align: center;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+        color: inherit;
+        text-decoration-line: none;
+}
+
+    .btn-group-entry button > :not([hidden]) ~ :not([hidden]),.btn-group-entry a > :not([hidden]) ~ :not([hidden]) {
+        --tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+    .btn-group-entry button:hover,.btn-group-entry a:hover {
+        --tw-brightness: brightness(1.15);
+        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+        background-color: rgb(var(--color-surface-50) / 3%);
+}
+
+    .btn-group-entry button:active,.btn-group-entry a:active {
+        background-color: rgb(var(--color-surface-900) / 3%);
+}
+
+    .btn-group-entry > * + * {
+        border-top-width: 0px;
+        border-left-width: 1px;
+        border-color: rgb(var(--color-surface-500) / 0.2);
 }
+
+    .btn-group-entry {
+        display: flex;
+        padding: 0;
+    }
+
+    .btn-group-entry > div {
+        padding: 1em;
+    }
+
+    .flipped-vertically {
+        transform: rotate(180deg);
+    }
+
+    .entry-group {
+        background-color: rgb(var(--color-surface-600));
+        margin-top: 1.5lh;
+        margin-bottom: 0.5lh;
+        padding: 0.5lh 0.5em;
+    }
+
+    .entry-row {
+        display: flex;
+        align-items: center;
+    }
+
+    .entry-name {
+        flex-grow: 1;
+    }
+
+    tr, td, th {
+        width: 100%;
+    }
+
+    tfoot > tr {
+        display: flex;
+    }
+
 </style>

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import { type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
+import "./entry-order-config.postcss";
 declare const __propDef: {
     props: {
         seaweedEntries: EntryGroup[];

package/dist/template/seaweed/entry_order_config/entry-order-config.postcss

@@ -0,0 +1,35 @@
+.btn-group > button {
+    padding: 0.3em 0.75em;
+}
+
+.btn-group-header > h2 {
+    font-weight: bolder;
+    padding-top: 1lh;
+    padding-bottom: 1lh;
+    margin-bottom: 0;
+    padding-inline-start: 1em;
+}
+
+.dark .btn-group-header > h2 {
+    color: rgb(var(--theme-font-color-dark));
+}
+
+.dark .entry-group {
+    background-color: rgb(var(--color-surface-800));
+}
+
+tbody tr:nth-child(odd) {
+    background-color: rgb(var(--color-surface-500));
+}
+
+.dark tbody tr:nth-child(odd) {
+    background-color: rgb(var(--color-surface-900));
+}
+
+tbody tr:nth-child(even) {
+    background-color: rgb(var(--color-surface-200));
+}
+
+.dark tbody tr:nth-child(even) {
+    background-color: rgb(var(--color-surface-800));
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.55",
+  "version": "2.4.57",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -16,7 +16,7 @@
     "custom-check": "npx vite-node src/lib/scripts/util/ManualCheckRun.ts",
     "preview": "vite preview",
     "prepublishOnly": "yarn package",
-    "to-dev": "git checkout main && git pull origin main && git checkout -b turnip/dev"
+    "to-dev": "git checkout main && git pull origin main && git branch -d turnip/dev && git checkout -b turnip/dev"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.1.1",

package/src/lib/app.postcss

@@ -185,7 +185,6 @@ a:active {
 }
 
 #toast-progress::-moz-progress-bar {
-    /*background-color: red;*/
     background: rgba(var(--color-secondary-500));
 }
 
@@ -207,3 +206,7 @@ a:active {
 .dark .ares-logo {
     filter: invert(100%);
 }
+
+.input {
+    @apply border-surface-800;
+}

package/src/lib/assets/icons/arrow-upward.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M440-160v-487L216-423l-56-57 320-320 320 320-56 57-224-224v487h-80Z"/></svg>

package/src/lib/components/Card.svelte

@@ -4,6 +4,7 @@
 	export let overrideStyle = "";
 	export let includeDataNoSnippet = true;
 	export let additionalClass: string[] = [];
+	export let turnOnLightModeBorder = true;
 
 	// warning: don't forget the semi-colon when adding new style!
 	const style = `
@@ -16,7 +17,15 @@
 		console.error("Missing content slot in card. No content will be displayed.");
 	}
 
-	const classes = ["card", "turnip-card"].concat(additionalClass).join(" ");
+	const originalClasses = ["card", "turnip-card"].concat(additionalClass).join(" ");
+	let classes = originalClasses.slice();
+	const toggleLightModeBorder = (turnOnLightModeBorder: boolean) => {
+		classes = originalClasses;
+		if (turnOnLightModeBorder) {
+			classes += " light-mode-border";
+		}
+	};
+	$: toggleLightModeBorder(turnOnLightModeBorder);
 </script>
 
 {#if (includeDataNoSnippet)}
@@ -24,12 +33,18 @@
 		<slot name="content" class="card" />
 	</div>
 {:else }
-	<div class="card turnip-card" style={style}>
+	<div class={classes} style={style}>
 		<slot name="content" class="card" />
 	</div>
 {/if}
 
 <style lang="postcss">
+    /*noinspection CssUnusedSymbol*/
+    .light-mode-border {
+        @apply border-surface-600 border-2 dark:border-0;
+    }
+
+    /*noinspection CssUnusedSymbol*/
     .turnip-card {
         @apply bg-surface-100 dark:bg-surface-900;
         margin: var(--turnip-card-margin);

package/src/lib/components/PineappleSlideToggle.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let checked = false;
+	export let name: string;
+
+	import { SlideToggle } from "@skeletonlabs/skeleton";
+</script>
+
+<SlideToggle name={name}
+             background="bg-surface-700 dark:bg-surface-700"
+             bind:checked={checked}>
+	<slot />
+</SlideToggle>

package/src/lib/components/combo_box/ComboBoxWithButton.svelte

@@ -16,3 +16,10 @@
 	<ComboBox bind:selectedValue={selectedValue}
 	          bind:stringItems={stringItems}></ComboBox>
 </div>
+
+<style>
+    .combo-box-wrapper {
+        display: flex;
+        gap: 1em;
+    }
+</style>

package/src/lib/components/pineapple/toast/Toast.svelte

@@ -80,7 +80,9 @@
 {#if (localComponent !== undefined)}
 	<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
 		<!-- todo: adjust shadow to be more dynamic or transparent -->
-		<Card marginBottom="1lh" overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
+		<Card marginBottom="1lh"
+		      turnOnLightModeBorder={false}
+		      overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
 			<div slot="content">
 				{#if (localProps !== undefined)}
 					<svelte:component this={localComponent}
@@ -101,7 +103,7 @@
         position: fixed;
         /* 12em = this component's margin (4em) + fab margin + width (8em) */
         max-width: calc(100vw - 12em);
-		    z-index: 100;
+        z-index: 100;
     }
 
     .toast-positioner:dir(ltr) {

package/src/lib/template/seaweed/CreateUrlForm.svelte

@@ -41,7 +41,7 @@
 	};
 </script>
 
-<div>
+<div class="local-list">
 	<label for="short-url">Short URL for url shortener</label>
 	<input bind:value={request.shortUrl}
 	       name="short-url"
@@ -53,6 +53,18 @@
 	       name="password"
 	       class="input"
 	       type="password"
-	       placeholder="Input" />
-	<button class="btn variant-filled" on:click={post}>Send link</button>
+	       placeholder="ILoveTurnips" />
+	<button class="send-link btn variant-filled" on:click={post}>Send link</button>
 </div>
+
+<style>
+    .local-list {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25lh;
+    }
+
+    .send-link {
+        margin-top: 0.75lh;
+    }
+</style>