DEV Community

loading...
Cover image for CurateBot Devlog 11: New UI Theme and logo, and releasing the app!

CurateBot Devlog 11: New UI Theme and logo, and releasing the app!

meseta profile image Yuan Gao ・5 min read

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

Vuetify styling

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

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

Vue.use(Vuetify);

export default new Vuetify({});
Enter fullscreen mode Exit fullscreen mode

It looks like this:
Site using the default theme

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):

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

Vue.use(Vuetify);

export default new Vuetify({
  theme: {dark: true}
});
Enter fullscreen mode Exit fullscreen mode

Now our site looks like this:

Site in Dark Mode

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:

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,
      }
    }
  }
});

Enter fullscreen mode Exit fullscreen mode

There's one small piece of CSS in App.vue to add the black background. The result is now:
New yellow theme

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

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

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

Favicon Generator

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

:
<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">
Enter fullscreen mode Exit fullscreen mode

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

The opengraph section of the

in index.html now looks like this:
<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">
Enter fullscreen mode Exit fullscreen mode

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, this tool also helps you clear Twitter's cache for you site!

Twitter card validator tool

Unfortunately, Discord's preview is a bit small to make out, but it does use the correct theme colors:

Discord social preview

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

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:

  get collapse() {
    return this.$vuetify.breakpoint.smAndDown;
  }
Enter fullscreen mode Exit fullscreen mode

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:

      <v-btn text to="/">
        <v-icon :left="!collapse">mdi-home</v-icon>
        <span v-if="!collapse">Home</span>
      </v-btn>
Enter fullscreen mode Exit fullscreen mode

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

Responsive menu

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

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

CurateBot

That's it! The site is live at https://curatebot.meseta.dev, and it's currently hosting my Dev Influencer AI bot. When it posts, "CurateBot-App" shows up in the source.

Devfluencer on Twitter

Discussion (0)

pic
Editor guide