Styling and Theming

We are basically done at this point — the application is functional… it’s just not particularly good looking.

Making the application pretty was not really one of our goals for this module. Some of the later modules get into the styling side of things a bit more (including creating themes with Angular Material), but for now we are just going to set up some basic CSS styles to make this application look decent.

Global Styles

First, we are going to add some global styles to our styles.scss file. Styles we add here will apply to our entire application.

:root {
  --color-primary: #32db64;
  --color-secondary: #2dd36f;
  --color-dark: #1c1d3b;
  --color-light: #ffffff;
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  background: var(--color-dark);
  font-family: "Roboto", sans-serif;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  background: var(--color-light);
}

section {
  height: 100%;
  padding: 2rem;
  background: var(--color-primary);
}

button {
  height: 30px;
}

.dialog-container {
  position: absolute !important;
  background: var(--color-dark);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

Most of this is reasonably basic CSS, but there are a couple of things worth pointing out here. First is our use of CSS variables:

:root {
  --color-primary: #32db64;
  --color-secondary: #2dd36f;
  --color-dark: #1c1d3b;
  --color-light: #ffffff;
}

To help keep our colour scheme consistent, we create some variables we can use instead of hard coding the colours for the application.

We also set up this style:

.dialog-container {
  position: absolute !important;
  background: var(--color-dark);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

Which handles styling our Dialog which we use for our modal form — this will make it pop up like an actual modal rather than just appearing at the bottom of the content.

Home Component

Now we are going to add some styles specifically to the ChecklistListComponent that our HomeComponent uses. These styles will be supplied directly to the @Component metadata of the component and will apply only to this specific component.

  styles: [
    `
      ul {
        padding: 0;
        margin: 0;
      }
      li {
        font-size: 1.5em;
        display: flex;
        justify-content: space-between;
        background: var(--color-light);
        list-style-type: none;
        margin-bottom: 1rem;
        padding: 1rem;

        button {
          margin-left: 1rem;
        }
      }
    `,
  ],

Checklist Component

Finally, we are going to add some styles to both of the dumb components for our ChecklistComponent.

  styles: [
    `
      button {
        margin-left: 1rem;
      }
    `,
  ],

  styles: [
    `
      ul {
        padding: 0;
        margin: 0;
      }
      li {
        font-size: 1.5em;
        display: flex;
        justify-content: space-between;
        background: var(--color-light);
        list-style-type: none;
        margin-bottom: 1rem;
        padding: 1rem;

        button {
          margin-left: 1rem;
        }
      }
    `,
  ],

Again, nothing special here, but we at least now have something that looks halfway decent!