Add logo to app

ROADMAP.md

@@ -4,9 +4,6 @@
 - docs
 - Aggregation
   - custom aggregation
-- Projection
-  - Column selection
-  - Column reordering
 
 ## Backlog
 
@@ -17,6 +14,9 @@
   - tsv
 - table
   - custom date / number formatters
+  - Projection
+    - Column selection
+    - Column reordering
 - Analysis
   - Filters
     - remove filter

src/app/Logo.tsx

@@ -0,0 +1,16 @@
+export function Logo() {
+  return (
+    <h1 class="Title">
+      <svg viewBox="0 -18 125 22">
+        <defs>
+          <linearGradient id="rainbow" x1="0" x2="100%" y1="0" y2="100%" gradientUnits="userSpaceOnUse" >
+            <stop stop-color="#01386a" offset="0%"/> 
+            <stop stop-color="#66FFB3" offset="100%"/>
+          </linearGradient>
+        </defs>
+          <text fill="url(#rainbow)" x="-1%">HippoTable</text>
+      </svg>
+      A better way to analyze data
+    </h1>
+  );
+}

src/app/Uploader.module.css

@@ -4,6 +4,12 @@
   }
 }
 
+.ButtonGroup {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
 .Button {
   box-sizing: border-box;
   border: none;

src/app/Uploader.tsx

@@ -6,7 +6,7 @@ import { GitHubLogo } from './GitHubLogo';
 
 export function Uploader() {
   return (
-    <>
+    <div class={styles.ButtonGroup}>
       <label class={`${styles.Button} ${styles.primary}`}>
         <FaSolidUpload />&nbsp;Open CSV
         <input type="file" accept=".csv,.tsv,text/csv" onInput={e => persistSource(e.currentTarget.files[0])} />
@@ -17,6 +17,6 @@ export function Uploader() {
       <a href={GH_REPO} target="_blank" class={styles.Button}>
         <GitHubLogo />&nbsp;Star on GitHub
       </a>
-    </>
+    </div>
   );
 }

src/app/Welcome.module.css

@@ -2,10 +2,12 @@
   min-height: 100vh;
   display: flex;
   align-items: center;
+  flex-direction: column;
   justify-content: center;
   gap: 1rem;
   background: linear-gradient(to right, #FFA566, #FF1E66);
   position: relative;
+  padding: 1rem;
 }
 
 .Spinner {

src/app/Welcome.tsx

@@ -2,6 +2,7 @@ import styles from './Welcome.module.css';
 import { Spinner } from './ui/Spinner';
 import { Show } from 'solid-js';
 import { Uploader } from './Uploader';
+import { Logo } from './Logo';
 
 type WelcomeProps = {
   loading: boolean;
@@ -11,6 +12,7 @@ export function Welcome(props: WelcomeProps) {
   return (
     <section class={styles.Welcome} classList={{ [styles.loading]: props.loading }}>
       <Show when={!props.loading} fallback={<div class={styles.Spinner}><Spinner /></div>}>
+        <Logo />
         <Uploader />
       </Show>
     </section>

src/pages/index.astro

@@ -1,22 +1,12 @@
 ---
+import { Logo } from '../app/Logo.tsx';
 import { Uploader } from '../app/Uploader';
 import Layout from '../layout.astro';
 ---
 
 <Layout>
   <section class="Landing">
-    <h1 class="Title">
-      <svg viewBox="0 -18 125 22">
-        <defs>
-          <linearGradient id="rainbow" x1="0" x2="100%" y1="0" y2="100%" gradientUnits="userSpaceOnUse" >
-            <stop stop-color="#01386a" offset="0%"/> 
-            <stop stop-color="#66FFB3" offset="100%"/>
-          </linearGradient>
-        </defs>
-          <text fill="url(#rainbow)">HippoTable</text>
-      </svg>
-      A better way to analyze data
-    </h1>
+    <div class="Title"><Logo /></div>
     <div class="actions"><Uploader client:load /></div>
     <div class="CardContainer">
       <div class="Card">
@@ -70,10 +60,6 @@ import Layout from '../layout.astro';
   color: #01386a;
 }
 
-.Title svg {
-  margin-left: -1%;
-}
-
 .CardContainer {
   display: flex;
   flex-wrap: wrap;