web: link box buttons and button template

web/src/app.css

@@ -5,6 +5,7 @@ body,
     height: calc(100% + env(safe-area-inset-top)/2);
     user-select: none;
     -webkit-user-select: none;
+    background: var(--background);
 }
 svg, img {
     pointer-events: none;
@@ -13,5 +14,10 @@ svg, img {
 
 :root {
     --accent: #000000;
+    --background: #ffffff;
     --gray: #6e6e6e;
+
+    --button: rgb(232, 232, 232);
+    --button-hover: rgb(215, 215, 215);
+    --button-hover-transparent: rgba(215, 215, 215, 0.5);
 }

web/src/cobalt.svelte

@@ -17,9 +17,13 @@
         height: 100%;
     }
     :global(*) {
-        font-family: 'Noto Sans Mono', monospace;
+        font-family: "Noto Sans Mono", "Consolas", "SF Mono", monospace;
         font-weight: 500;
     }
+    :global(::placeholder) {
+        color: var(--gray);
+        opacity: 1;
+    }
 </style>
 <main>
     <HomeBanner />

web/src/components/Buttons/Button.svelte

@@ -0,0 +1,27 @@
+<script>
+    export let id;
+    export let text = "Button";
+    export let click = () => { alert('clicked') };
+</script>
+
+<style>
+    :global(button) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 7px 13px;
+        border: none;
+        border-radius: 10px;
+        font-size: 14px;
+        cursor: pointer;
+        background-color: var(--button);
+        color: var(--accent);
+    }
+    :global(button:hover) {
+        background-color: var(--button-hover);
+    }
+</style>
+
+<button id={id} on:click={click}>
+    {text}
+</button>

web/src/components/Buttons/ClearButton.svelte

@@ -0,0 +1,14 @@
+<script>
+    export let click;
+    import IconX from '@tabler/icons-svelte/IconX.svelte';
+</script>
+<style>
+    #clear-button {
+        padding: 3px;
+        border-radius: 100%;
+    }
+</style>
+
+<button id="clear-button" on:click={click}>
+    <IconX color="var(--accent)" size="16px"/>
+</button>

web/src/components/Buttons/DownloadButton.svelte

@@ -0,0 +1,32 @@
+<style>
+    #download-button {
+        font-size: 24px;
+        letter-spacing: -0.2em;
+        text-align: center;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        border-radius: 0;
+        text-indent: -3px;
+        padding: 0 13px 0 12px;
+        background: none;
+        border-left: 1px var(--gray) solid;
+        border-top-right-radius: 11px;
+        border-bottom-right-radius: 11px;
+    }
+    #download-button:hover {
+        background: var(--button-hover-transparent)
+    }
+    #download-button:disabled {
+        cursor: unset;
+    }
+    #download-button:disabled:hover {
+        background: none;
+    }
+    :global(#input-container.focused) #download-button {
+        border-left: 2px var(--accent) solid;
+    }
+</style>
+<button id="download-button">&gt;&gt;</button>

web/src/components/HomeBanner/HomeBanner.svelte

@@ -17,6 +17,7 @@
         letter-spacing: -0.07em;
         font-family: 'Redaction 10', serif;
         margin: 0;
+        color: var(--accent);
     }
 </style>
 

web/src/components/Pager/Pager.svelte

@@ -1,11 +1,14 @@
 <script>
     import IconLink from '@tabler/icons-svelte/IconLink.svelte';
+    import Button from '../Buttons/Button.svelte';
+    import ClearButton from '../Buttons/ClearButton.svelte';
+    import DownloadButton from '../Buttons/DownloadButton.svelte';
 
     let inputContainer;
     let link = "";
     let isFocused = false;
 
-    const testLink = (/** @type {string} */ link) => {
+    const validLink = (link) => {
         try {
             return /^https?:/i.test(new URL(link).protocol);
         } catch {
@@ -36,15 +39,18 @@
         border-radius: 12px;
         padding: 0 10px;
         align-items: center;
-        gap: 12px;
+        gap: 10px;
         font-size: 14px;
         flex: 1
     }
-    :global(#input-container.focused) {
+    #input-container.downloadable {
+        padding-right: 0;
+    }
+    #input-container.focused {
         outline: var(--accent) 1px solid;
         border: var(--accent) 1px solid;
     }
-    :global(#input-container.focused) :global(#input-link-icon) {
+    #input-container.focused :global(#input-link-icon) {
         stroke: var(--accent);
     }
     #link-area {
@@ -52,6 +58,7 @@
         width: 100%;
         margin: 0;
         padding: 10px 0;
+        height: 20px;
 
         align-items: center;
 
@@ -62,19 +69,22 @@
 
         -webkit-tap-highlight-color: transparent;
         flex: 1;
-    }
-    #link-area::placeholder {
-        color: var(--gray);
+
+        /* workaround for safari */
+        font-size: inherit;
     }
     #button-container {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
     }
+    #mode-switcher {
+        display: flex;
+    }
 </style>
 
 <div id="pager">
-    <div id="input-container" class:focused={isFocused} bind:this={inputContainer}>
+    <div id="input-container" class:focused={isFocused} class:downloadable={validLink(link)} bind:this={inputContainer}>
         <IconLink id="input-link-icon" color="var(--gray)" size="20px"/>
     
         <!-- svelte-ignore a11y-autofocus -->
@@ -97,21 +107,25 @@
             autofocus>
 
         {#if link.length > 0}
-            <button id="clear-button" on:click={() => link = ""}>✕</button>
+            <ClearButton click={() => link = ""} />
         {/if}
-        {#if testLink(link)}
-            <input
-                id="download-button"
-                aria-label="download button"
-                type="submit"
-                value=">>">
+        {#if validLink(link)}
+            <DownloadButton />
         {/if}
     </div>
     <div id="button-container">
         <div id="mode-switcher">
-            <button id="auto-mode-button">auto</button>
-            <button id="audio-mode-button">audio</button>
+            <button id="auto-mode-button">
+                auto
+            </button>
+            <button id="audio-mode-button">
+                audio
+            </button>
         </div>
-        <button id="paste-button" on:click={pasteClipboard}>paste</button>
+        <Button
+            id="paste-button"
+            click={pasteClipboard}
+            text="paste"
+        />
     </div>
 </div>