flesh out settings

routes/_components/NotLoggedInHome.html

@@ -7,7 +7,7 @@
   </div>
   <p>Pinafore is a web client for <a href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
 
-  <p>To get started, <a href="/settings/add-instance">log in to an instance</a>.</p>
+  <p>To get started, <a href="/settings/instances">log in to an instance</a>.</p>
 
   <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
 </FreeTextLayout>
@@ -15,6 +15,7 @@
   .banner {
     display: flex;
     align-items: center;
+    margin: 0 0 30px;
   }
   svg {
     width: 70px;

routes/_utils/mastodon.js

@@ -1,5 +1,5 @@
 const WEBSITE = 'https://pinafore.social'
-const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/add-instance'
+const REDIRECT_URI = (typeof location !== 'undefined' ? location.origin : 'https://pinafore.social') + '/settings/instances'
 const SCOPES = 'read write follow'
 const CLIENT_NAME = 'Pinafore'
 

routes/settings/_components/SettingsLayout.html

@@ -5,6 +5,14 @@
     <slot></slot>
   </FreeTextLayout>
 </div>
+<style>
+  .settings {
+    margin-top: 20px;
+  }
+  :global(.settings .free-text h1) {
+    margin-bottom: 30px;
+  }
+</style>
 <script>
   import SettingsNav from './SettingsNav.html';
   import FreeTextLayout from '../../_components/FreeTextLayout'

routes/settings/_components/SettingsNav.html

@@ -1,20 +1,10 @@
 <nav>
   <ul>
+    {{#each navItems as navItem}}
     <li>
-      <a class='{{page === "home"  ? "selected" : ""}}' href='/settings'>
+      <SettingsNavItem :page name="{{navItem.name}}" href="{{navItem.href}}" label="{{navItem.label}}"/>
-        Settings
-      </a>
-    </li>
-    <li>
-      <a class='{{page === "about"  ? "selected" : ""}}' href='/settings/about'>
-        About
-      </a>
-    </li>
-    <li>
-      <a class='{{page === "add-instance" ? "selected" : ""}}' href='/settings/add-instance'>
-        Add an instance
-      </a>
     </li>
+    {{/each}}
   </ul>
 </nav>
 
@@ -28,15 +18,57 @@
   }
 
   li {
-    margin: 10px 15px 20px;
+    margin: 10px 0;
+    font-size: 1em;
   }
 
-  a {
+  li::after {
-    font-size: 1.2em;
+    content: '>';
+    margin: 0 15px;
+    color: var(--anchor-text);
   }
 
-  a.selected {
+  li:last-child::after {
-    font-weight: bold;
+    content: '';
+    margin-left: 0;
+    font-size: 1em;
   }
 
 </style>
+<script>
+  import SettingsNavItem from './SettingsNavItem.html'
+
+  const NAV_ITEMS = {
+    home: {
+      name: 'home',
+      href: '/settings',
+      label: 'Settings'
+    },
+    about: {
+      name: 'about',
+      href: '/settings/about',
+      label: 'About Pinafore'
+    },
+    instances: {
+      name: 'instances',
+      href: '/settings/instances',
+      label: 'Instances'
+    }
+  }
+
+  export default {
+    components: {
+      SettingsNavItem
+    },
+    computed: {
+      navItems: page => {
+        let res = [NAV_ITEMS.home]
+        if (page === 'home') {
+          return res
+        }
+        res.push(NAV_ITEMS[page])
+        return res
+      }
+    }
+  }
+</script>

routes/settings/_components/SettingsNavItem.html

@@ -0,0 +1,24 @@
+<a class='{{getCurrentClass(page, name)}}' aria-label='{{getAriaLabel(page, name, label)}}' href='{{href}}'>
+  {{label}}
+</a>
+<style>
+  a {
+    font-size: 1.2em;
+  }
+
+  a.selected {
+    font-weight: 600;
+  }
+</style>
+<script>
+  export default {
+    helpers: {
+      getCurrentClass(page, name) {
+        return page === name  ? "selected" : ""
+      },
+      getAriaLabel(page, name, label) {
+        return page === name ? "Current page" : label
+      }
+    }
+  }
+</script>

routes/settings/about.html

@@ -1,10 +1,10 @@
 <:Head>
-  <title>About</title>
+  <title>About Pinafore</title>
 </:Head>
 
 <Layout page='settings'>
   <SettingsLayout page='about'>
-    <h1>About</h1>
+    <h1>About Pinafore</h1>
 
     <p>Pinafore is open-source software created by Nolan Lawson.</p>
 

routes/settings/index.html

@@ -6,9 +6,13 @@
   <SettingsLayout page='home'>
     <h1>Settings</h1>
 
+    <ul>
+      <li><a href="/settings/instances">Instances</a></li>
+      <li><a href="/settings/about">About Pinafore</a></li>
+    </ul>
+
   </SettingsLayout>
 </Layout>
-
 <script>
   import Layout from '../_components/Layout.html';
   import SettingsLayout from './_components/SettingsLayout.html'
@@ -20,3 +24,30 @@
     }
   };
 </script>
+<style>
+  ul {
+    list-style: none;
+    width: 80%;
+    border: 1px solid var(--settings-list-item-border);
+    margin: 20px auto;
+  }
+  li {
+    border: 1px solid var(--settings-list-item-border);
+    font-size: 1.3em;
+    display: flex;
+    flex-direction: column;
+  }
+  a, a:visited {
+    color: var(--settings-list-item-text);
+    background: var(--settings-list-item-bg);
+    padding: 20px;
+  }
+  a:hover {
+    text-decoration: none;
+    background: var(--settings-list-item-bg-hover);
+    color: var(--settings-list-item-text-hover);
+  }
+  a:active {
+    background: var(--settings-list-item-bg-active);
+  }
+</style>

routes/settings/instances.html

@@ -1,12 +1,12 @@
 <:Head>
-  <title>Instance Wizard</title>
+  <title>Instances</title>
 </:Head>
 
 <Layout page='settings'>
-  <SettingsLayout page='add-instance'>
+  <SettingsLayout page='instances'>
-    <h1>Add an instance</h1>
+    <h1>Instances</h1>
 
-    <p>Log in to your instance to use Pinafore.</p>
+    <p>Connect to an instance to start using Pinafore.</p>
 
     <form on:submit='onSubmit(event)'>
       <label for="instanceInput">Instance name:</label>

scss/theme-default.scss

@@ -1,5 +1,6 @@
 :root {
   $main-theme-color: royalblue; // also: crimson, forestgreen, hotpink
+  $anchor-color: $main-theme-color;
   $main-text-color: #333;
   $border-color: #dadada;
   $main-bg-color: white;
@@ -18,7 +19,7 @@
   --button-bg-hover: darken($main-bg-color, 5%);
 
   --input-border: $border-color;
-  --anchor-text: $main-theme-color;
+  --anchor-text: $anchor-color;
   --main-bg: $main-bg-color;
   --body-bg: lighten($main-theme-color, 38%);
   --body-text-color: $main-text-color;
@@ -45,4 +46,11 @@
   --action-button-fill-color: lighten($main-theme-color, 15%);
   --action-button-fill-color-hover: lighten($main-theme-color, 20%);
   --action-button-fill-color-active: lighten($main-theme-color, 5%);
+
+  --settings-list-item-bg: $main-bg-color;
+  --settings-list-item-text: $main-theme-color;
+  --settings-list-item-text-hover: $main-theme-color;
+  --settings-list-item-border: $border-color;
+  --settings-list-item-bg-active: darken($main-bg-color, 10%);
+  --settings-list-item-bg-hover: darken($main-bg-color, 2%);
 }