From 40278c61f724945fad8d8a9ff701eec9caad71ab Mon Sep 17 00:00:00 2001
From: Brian Ingles <github@emeraldwalk.com>
Date: Sun, 21 Jan 2024 17:10:06 -0600
Subject: [PATCH] Logo

---
 src/components/CheckList.module.scss | 16 ++++++++++++++++
 src/components/CheckList.tsx         | 26 +++++++++++++++-----------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/CheckList.module.scss b/src/components/CheckList.module.scss
index a44dbb4..2b0674e 100644
--- a/src/components/CheckList.module.scss
+++ b/src/components/CheckList.module.scss
@@ -1,11 +1,27 @@
 .CheckList {
   --check-list-item-pad: 10px;
   --check-list-item-gap: 8px;
+  --check-list-color-shadow: #888;
 
   display: grid;
   grid-template-rows: auto 1fr;
   height: 100vh;
 
+  > span:first-of-type {
+    display: grid;
+    align-items: center;
+    grid-template-columns: auto auto 1fr;
+    gap: 2px;
+    box-shadow: 0 0px 20px -5px var(--check-list-color-shadow);
+    padding: var(--check-list-item-pad);
+    > span {
+      font-size: 1.2em;
+    }
+    :last-child {
+      justify-self: end;
+    }
+  }
+
   ul {
     display: flex;
     list-style: none;
diff --git a/src/components/CheckList.tsx b/src/components/CheckList.tsx
index 69aea2c..7a1bc87 100644
--- a/src/components/CheckList.tsx
+++ b/src/components/CheckList.tsx
@@ -4,6 +4,7 @@ import planText from '../data/five-day.txt?raw'
 import { CheckListItem, isRangeComplete, versionLink } from '../model'
 import { loadCheckListState, saveCheckListState } from '../data'
 import { CheckBox } from './CheckBox'
+import logo from '../assets/favicon-32x32.png'
 
 export function CheckList() {
   const checkList: CheckListItem[] = planText
@@ -26,17 +27,20 @@ export function CheckList() {
 
   return (
     <div class={styles.CheckList}>
-      <CheckBox
-        class={styles.CheckBox}
-        isChecked={showCompleted()}
-        onChange={() =>
-          setCheckListState((s) => ({
-            ...s,
-            showCompleted: !s.showCompleted,
-          }))
-        }>
-        Show Completed
-      </CheckBox>
+      <span>
+        <img src={logo} />
+        <span>ible Plan</span>
+        <CheckBox
+          isChecked={showCompleted()}
+          onChange={() =>
+            setCheckListState((s) => ({
+              ...s,
+              showCompleted: !s.showCompleted,
+            }))
+          }>
+          Show Completed
+        </CheckBox>
+      </span>
 
       <ul>
         <For each={checkList}>