styles, optimistic fix

Author: dtauer

lessons/07-optimistic-values/A-what-are-optimistic-values.md

@@ -3,13 +3,13 @@ description: >-
   Discover the concept of optimistic UI updates in messaging apps, where the
   user interface reflects message sending before the actual network send,
   enhancing user experience. This approach, explained by Brian Holt in the
-  Intermediate React v6 course, utilizes hooks like useOptimisticValue and
+  Intermediate React v6 course, utilizes hooks like useOptimistic and
   useTransition to efficiently manage state changes in React applications.
 keywords:
   - optimistic UI
   - React
   - Brian Holt
-  - useOptimisticValue
+  - useOptimistic
   - useTransition
 ---
 
@@ -23,4 +23,4 @@ Let's say you are texting your friend. You open iMessage, WhatsApp, Signal, ICQ,
 
 That #3 is interesting - you get visual feedback in your log of messages as if the message was already sent. In your mind, the message is sent, and the UI reflects that. In reality the message hasn't even left the device when it's first rendered that way, so in some ways it's a bit misleading, but this **optimistic** display of UI is more closely reflects the user's mental model.
 
-That's what we're talking about, optimistic UI updates - we're doing some backend work behind the scenes, but we're going to optimistically show the user that their update was done. This is possible to do without the ready-made hook `useOptimisticValue` but it was such a pain before. Now it's fairly easy to use in conjunction with useTransition (necessary to identify a low priority re-render) to show an intermediary state.
+That's what we're talking about, optimistic UI updates - we're doing some backend work behind the scenes, but we're going to optimistically show the user that their update was done. This is possible to do without the ready-made hook `useOptimistic` but it was such a pain before. Now it's fairly easy to use in conjunction with useTransition (necessary to identify a low priority re-render) to show an intermediary state.

lessons/07-optimistic-values/B-the-project.md

@@ -98,7 +98,7 @@ export default function App() {
 - Nothing surprising here. We get thoughts on load, and we reload them on POST
 - The big issue here is that the user is shown no feedback while the POST happening.
 - We could just append to thoughts and hope for the best - and this is what we used to do.
-- However we can use `useOptimisticState` and get a lot of the error cases and other problems wrapped up and taken care of for us.
+- However we can use `useOptimistic` and get a lot of the error cases and other problems wrapped up and taken care of for us.
 
 [starter]: https://github.com/btholt/irv6-project/tree/main/starter/optimistic
 [completed]: https://github.com/btholt/irv6-project/tree/main/completed/optimistic

…optimistic-values/C-optimistic-values.md …ptimistic-values/C-useOptimistic-Hook.mdlessons/07-optimistic-values/C-optimistic-values.md renamed to lessons/07-optimistic-values/C-useOptimistic-Hook.md lessons/07-optimistic-values/C-optimistic-values.md renamed to lessons/07-optimistic-values/C-useOptimistic-Hook.md

@@ -1,20 +1,22 @@
 ---
+title: "useOptimistic Hook"
 description: >-
   Discover how optimistic UI updates in messaging apps like iMessage or WhatsApp
   give users immediate visual feedback before a message is truly sent. Learn
   with Brian Holt in the Intermediate React v6 course for Frontend Masters,
-  focusing on using React Server Components and hooks like useOptimisticValue
+  focusing on using React Server Components and hooks like useOptimistic
   and useTransition for seamless web development.
 keywords:
   - optimistic UI
   - React
-  - useOptimisticValue
+  - useOptimistic
   - useTransition
   - Brian Holt
   - Frontend Masters
   - web development
 ---
-Let's refactor to use transitions and `useOptimisticValue`.
+
+Let's refactor to use transitions and `useOptimistic`.
 
 ```javascript
 // at the top

styles/courses.css

@@ -36,7 +36,17 @@ body {
 
 a {
   color: var(--text-links);
-  text-decoration: none;
+  text-underline-offset: 2px;
+}
+
+
+/*
+  Thanks Chris Coyier
+  https://frontendmasters.com/blog/chilled-out-text-underlines/
+*/
+a:not(:is(:hover, :focus)) {
+  text-decoration-color: 
+    color-mix(in srgb, currentColor, transparent 75%);
 }
 
 .navbar {
@@ -262,6 +272,13 @@ header .cta-btn {
   padding: 15px 0;
 }
 
+.lesson-details a,
+.navbar-brand a,
+.navbar-info a,
+.lesson-links a {
+  text-decoration: none;
+}
+
 .lesson li li {
   margin-left: 25px;
 }

styles/variables.css

@@ -5,7 +5,7 @@
 
   --text-header: var(--primary);
   --text-main-headers: var(--highlight);
-  --text-links: #00ca22;
+  --text-links: #006711;
   --text-footer: var(--highlight);
 
   --bg-main: black;