Merge pull request #6 from luanmenezes0/wip-5-mark-button

adds eye icon
luanmenezes0 · Mar 27, 2022 · 6eba9a2 · 6eba9a2 · vercel · Mar 27, 2022
2 parents 563d376 + c657de4
commit 6eba9a2
Show file tree

Hide file tree

Showing 10 changed files with 252 additions and 152 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -1,4 +1,5 @@
 {
+  "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,13 +8,14 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "^1.0.0-next.290",
+    "@sveltejs/kit": "^1.0.0-next.295",
     "svelte": "^3.46.4",
     "svelte-preprocess": "^4.10.1",
     "typescript": "^4.6.2"
   },
   "type": "module",
   "dependencies": {
-    "open-props": "^1.3.9"
+    "open-props": "^1.3.9",
+    "svelte-icons": "^2.1.0"
   }
 }
diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="description" content="Svelte demo app" />
-		<link rel="icon" href="%svelte.assets%/favicon.png" />
+		<link rel="icon" href="%svelte.assets%/oscar.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%svelte.head%
 	</head>

diff --git a/src/lib/header/Header.svelte b/src/lib/header/Header.svelte
@@ -1,13 +1,44 @@
 <header>
-  <img src="/oscar.png" alt="" />
-  <a href="/"><h1>Oscar List</h1></a>
+  <div class="content">
+    <img src="/oscar.png" alt="" />
+    <a href="/"><h1>Oscars 2022</h1></a>
+  </div>
+
+  <div class="text">
+    <p>
+      This is a list of the movies nominated for best picture in the 2022
+      Oscars.
+    </p>
+    <p>
+      You can mark a movie as watched and click in the card to see more details.
+    </p>
+  </div>
 </header>
 
 <style>
   header {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
     padding: 2rem;
+    gap: 1rem;
+  }
+
+  .content {
+    display: flex;
+    justify-content: center;
+  }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    padding: 1rem;
+    text-align: center;
+  }
+
+  p {
+    font-size: var(--font-size-1);
   }
 
   a {

diff --git a/src/lib/header/svelte-logo.svg b/src/lib/header/svelte-logo.svg
diff --git a/src/lib/movie/Movie.svelte b/src/lib/movie/Movie.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
+  import EyeIcon from "svelte-icons/fa/FaEye.svelte";
 
   interface Movie {
     title: string;
@@ -18,68 +19,64 @@
 </script>
 
 <article class="card">
-  <img
-    src={`https://image.tmdb.org/t/p/w300/${movie.poster}`}
-    alt={movie.title}
-  />
-  <h2 class="title"><a href={`movies/${movie.id}`}>{movie.title}</a></h2>
-  <button class:watched on:click={markFilmAsWatched}>watched</button>
+  <a href={`movies/${movie.id}`}>
+    <img
+      src={`https://image.tmdb.org/t/p/w300/${movie.poster}`}
+      alt={movie.title}
+    /></a
+  >
+  <button class="button" class:watched on:click={markFilmAsWatched}>
+    <div class="icon">
+      <EyeIcon />
+    </div>
+  </button>
 </article>
 
 <style>
   .card {
     display: grid;
     gap: var(--size-2);
-    grid-template-rows: min-content auto auto;
+    grid-template-rows: min-content auto;
     background: var(--surface-3);
-    border: 1px solid var(--surface-1);
+    /* border: 1px solid var(--surface-1); */
     padding: var(--size-4);
     border-radius: var(--radius-3);
     box-shadow: var(--shadow-2);
   }
 
-  .title {
-    color: var(--text-1);
-    font-size: var(--size-6);
-    justify-self: start;
+  .icon {
+    width: 25px;
+    height: 25px;
   }
 
-  button {
-    place-self: end;
-    display: inline-flex;
-    white-space: nowrap;
 
+  .button {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     font-size: var(--font-size-fluid-1);
     font-weight: var(--font-weight-7);
-
-    padding-inline: var(--size-5);
-    padding-block: var(--size-2);
-
-    color: var(--blue-9);
-    border: var(--border-size-2) solid var(--blue-5);
     background-color: transparent;
+    background-color: var(--gray-8);
     border-radius: var(--radius-2);
-
-    border-color: var(--blue-3);
-    color: var(--blue-1);
+    padding-block: 0.5rem;
   }
 
-  button:hover {
+  .button:hover {
     cursor: pointer;
     color: var(--blue-0);
-    background-color: var(--blue-5);
-
-    background-color: var(--blue-3);
+    background-color: var(--green-5);
     color: black;
   }
 
-  button:active {
+  .button:active {
     position: relative;
     inset-block-start: 2px;
   }
 
   .watched {
-    background: var(--blue-8);
-    border-color: var(--blue-8);
+    background-color: var(--green-8);
+    border-color: var(--green-8);
+    color: black;
   }
 </style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -53,7 +53,7 @@
 </script>
 
 <svelte:head>
-  <title>Oscar List</title>
+  <title>Oscars 2022 List</title>
 </svelte:head>
 
 <section>

diff --git a/static/check.svg b/static/check.svg
diff --git a/static/eye.svg b/static/eye.svg