CurateBot Devlog 11: New UI Theme and logo, and releasing the app!
Tags: devjournal, vue, javascript, showdev
Published: 2021-01-09 12:55:40

In the last post, we got everything working! So the last step is a bit of a UI update. The commit matching this post is [here](https://github.com/meseta/curatebot/tree/8a4150309cf07c4391597dd8096e99128306fbc0)

# Vuetify styling
The default vuetify setup is currently all defaults, it looks like this in the file `src/plugins/vuetify.ts`:

```ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({});
```
It looks like this:
![Site using the default theme](https://dev-to-uploads.s3.amazonaws.com/i/ebxjl3qqygg1nr0afp8d.png)

Now, if we were to put things into Dark mode, it's a simple one-line change (in fact there's other places to do it too, but this is in the default theme settings):

```ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {dark: true}
});
```

Now our site looks like this:

![Site in Dark Mode](https://dev-to-uploads.s3.amazonaws.com/i/uf35rgnns9xfwib3s9m8.png)

In the end, I decided to go for a yellow/black colour scheme on white cards, but a black background.

Since most of the components are configured to directly use the `primary` colour as defined here, and since I've consistently built the site using Vuetify components, changing the main colour across the entire site is as simple as setting the `primary` colour. I've also used `warning`, `error` and `success` colours for some of the buttons, and I want those to fit with the palette, so I set those here too:

```ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from 'vuetify/lib/util/colors'

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.amber.darken2,
        warning: colors.deepOrange.base,
        error: colors.red.darken2,
        success: colors.lightGreen.base,
      }
    }
  }
});

```

There's one small piece of CSS in `App.vue` to add the black background. The result is now:
![New yellow theme](https://dev-to-uploads.s3.amazonaws.com/i/fzm5tfsbeluqgm7do6iu.png)

I actually decided against white text in the menu and header bars, I adjust those later by taking out the `dark` property that was set up in AppBar and Section previously.

# New logo
Since the name of the site is CurateBot, I went with a hand holding a square that might pass for a robot. I sketch this up in Inkscape, and give it a stylized polygonal shape:

![Curatebot Logo](https://dev-to-uploads.s3.amazonaws.com/i/4keg5epdu4apxc3p5xcb.png)

I create a few different versions of this, for the logo on the site, the favicon, and the social preview.

# Favicon
The Favicon is simply a square version of the logo rendered to 260x260px:

![curatebot_icon](https://dev-to-uploads.s3.amazonaws.com/i/qgf1jsdm1478li9wzjf5.png)

This is put into the excellent online tool https://realfavicongenerator.net/ which produces a bundle of favicons at different resolutions.

![Favicon Generator](https://dev-to-uploads.s3.amazonaws.com/i/thmi9s8gtsnstxpdl9ed.png)

These all go into the `web/public` folder, and the `index.html` file edited to include them in the <head>:

```html
<link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
    <link rel="manifest" href="<%= BASE_URL %>site.webmanifest">
    <link rel="mask-icon" href="<%= BASE_URL %>safari-pinned-tab.svg" color="#FFA000">
    <meta name="msapplication-TileColor" content="#FFA000">
```
# Social Preview/Opengraph

The next logo is a social preview, these previews show up on Discord, and Twitter when you paste links, the images are used alongside the link card. I create a larger version of the logo, and give a lot of extra padding either side of the logo since different platforms crop the image differently. Unfortunately there's no one-size-fits-all, but this is probably the best compromise:

![Curatebot social preview](https://dev-to-uploads.s3.amazonaws.com/i/pljx1e5ja8kue3tqpslk.png)

The opengraph section of the <head> in `index.html` now looks like this:

```html
<meta name="description" content="Curate and schedule AI-generated tweets">
    <meta name="keywords" content="Twitter,curate,ai,gpt2,bot">
    <meta name="author" content="Yuan Gao">
    <meta name="copyright" content="Copyright 2021, Yuan Gao">
    <meta name="theme-color" content="#FFA000">

    <!-- Twitter -->
    <meta name="twitter:title" content="CurateBot">
    <meta name="twitter:description" content="Curate and schedule AI-generated tweets">
    <meta name="twitter:image" content="https://curatebot.meseta.dev/curatebot_preview.png">
    <meta name="twitter:url" content="https://curatebot.meseta.dev/">

    <!-- Open Graph -->
    <meta property="og:title" content="CurateBot">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://curatebot.meseta.dev/">
    <meta property="og:image" content="https://curatebot.meseta.dev/curatebot_preview.png">
    <meta property="og:description" content="Curate and schedule AI-generated tweets">
```
This gives sites like Twitter and Discord all the metadata they need to render this link. You can check what it looks like using Twitter's [Card Validator tool](https://cards-dev.twitter.com/validator), this tool also helps you clear Twitter's cache for you site!

![Twitter card validator tool](https://dev-to-uploads.s3.amazonaws.com/i/wu1fjwhdxhzzyesg2e8u.png)
 
Unfortunately, Discord's preview is a bit small to make out, but it does use the correct theme colors:

![Discord social preview](https://dev-to-uploads.s3.amazonaws.com/i/1kaywzu0yjwno4cu19ug.png)
 
Finally, the GitHub repo also has its own social preview in the settings. So I upload the same image to it. This is the preview that will show up if you send the GitHub repo to someone over Twitter, or other sites and chat platforms

![GitHub Social Preview](https://dev-to-uploads.s3.amazonaws.com/i/h4vc7i6o8960loxf0cbw.png)

# Menu icons
When visiting the site on Mobile, the menu becomes too wide, so I decided to replace the menu text with Icons when the page is narrow, in other words, a responsive menu. Vuetify makes this very simple to do. I can use the built-in breakpoint `$vuetify.breakpoint.smAndDown` which is a boolean that is True when the page width is smaller than whatever is defined as a `small screen` (it's a pixel size that can be adjusted, but I'm using the default value)

Inside my AppBar.vue component, I set up a computed value for it, which since I'm using `vue-property-decorator`, I can do so using a getter:

```ts
  get collapse() {
    return this.$vuetify.breakpoint.smAndDown;
  }
```

And then in the template I can use it with `v-if` directives to switch in and out the text. This is the home button for example:

```vue
      <v-btn text to="/">
        <v-icon :left="!collapse">mdi-home</v-icon>
        <span v-if="!collapse">Home</span>
      </v-btn>
```

This will switch between <v-icon left> and then "Home" when the screen is wide enough, to just <v-icon> when the screen is narrow. The result looks like this:

![Responsive menu](https://dev-to-uploads.s3.amazonaws.com/i/05u59zo0ku1h3gh6vqh6.gif)

# Front page logo
Finally, the front-page logo. I make a transparent version of the logo from before, and render this out to a high-ish resolution:

![CurateBot](https://dev-to-uploads.s3.amazonaws.com/i/gj7tl9q2v4q6mb3n4fcs.png)

Then I slap this on the frontpage of the site to complete the look!

![CurateBot](https://dev-to-uploads.s3.amazonaws.com/i/otz8eqlj572pjfmni141.png)
 
That's it! The site is live at https://curatebot.meseta.dev, and it's currently hosting my [Dev Influencer AI bot](https://twitter.com/Devfluencer_ai). When it posts, "CurateBot-App" shows up in the source.

![Devfluencer on Twitter](https://dev-to-uploads.s3.amazonaws.com/i/zhmq4qvc7oxvdt21hpez.png)