Use hass-chevron icons. Update README and screenshots

README.md

@@ -66,9 +66,9 @@ hide:
 
 | Name                            | Default                     | Description                                 |
 | ------------------------------- | --------------------------- | ------------------------------------------- |
-| --tpc-elements-background-color | `var(--dark-primary-color)` | Background colro for header and ui elements |
+| --tpc-elements-background-color | `var(--dark-primary-color)` | Background color for header and ui elements |
 | --tpc-icon-color                | `var(--primary-text-color)` | Arrow color                                 |
-| --tpc-text-color                | `var(--primary-text-color)` | Text color                                  |
+| --tpc-text-color                | `white`                     | Text color                                  |
 | --tpc-accent-color              | `var(--accent-color)`       | AM / PM active color                        |
 
 ## Meta

src/components/time-period.component.ts

@@ -16,8 +16,16 @@ export class TimePeriodComponent extends LitElement {
 
   @property() private period!: Period;
 
+  private get amClass(): ClassInfo {
+    return { 'time-period': true, active: this.period === Period.AM };
+  }
+
+  private get pmClass(): ClassInfo {
+    return { 'time-period': true, active: this.period === Period.PM };
+  }
+
   render(): TemplateResult {
-    return html` <div class="time-period-selector">
+    return html`<div class="time-period-selector">
       <div class=${classMap(this.amClass)} @click=${this.onTimePeriodChange}>
         AM<mwc-ripple></mwc-ripple>
       </div>
@@ -32,14 +40,6 @@ export class TimePeriodComponent extends LitElement {
     this.dispatchEvent(event);
   }
 
-  private get amClass(): ClassInfo {
-    return { 'time-period': true, active: this.period === Period.AM };
-  }
-
-  private get pmClass(): ClassInfo {
-    return { 'time-period': true, active: this.period === Period.PM };
-  }
-
   static get styles(): CSSResult {
     return css`
       .time-period-selector {

src/components/time-unit.component.ts

@@ -52,7 +52,7 @@ export class TimeUnitComponent extends LitElement {
   private renderStepChanger(direction: Direction): TemplateResult {
     return html`
       <div class="time-picker-icon" @click=${() => this.onStepChangerClick(direction)}>
-        <ha-icon .icon="mdi:arrow-${direction}"></ha-icon>
+        <ha-icon .icon="hass:chevron-${direction}"></ha-icon>
         <mwc-ripple id="ripple"></mwc-ripple>
       </div>
     `;

src/time-picker-card.ts

@@ -134,13 +134,13 @@ export class TimePickerCard extends LitElement {
         );
 
         --tpc-icon-color: var(--time-picker-icon-color, var(--primary-text-color));
-        --tpc-text-color: var(--time-picker-text-color, var(--primary-text-color));
+        --tpc-text-color: var(--time-picker-text-color, #fff);
         --tpc-accent-color: var(--time-picker-accent-color, var(--accent-color));
       }
 
       .time-picker-header {
         padding: 16px;
-        color: var(--tpc-text-color, #fff);
+        color: var(--tpc-text-color);
         background-color: var(--tpc-elements-background-color);
         font-size: 1em;
         text-align: center;