src/App.tsx

@@ -2,15 +2,32 @@ import "./styles/reset.css";
 import "./styles/App.css";
 import { Outlet } from "react-router";
 import { Link } from "react-router";
-import Navbar from "./components/navbar/Navbar";
+import { useGuides } from "./lib/contexts/guide.context";
 
 function App() {
+  const { guides } = useGuides();
 
   return (
     <>
       <header>
-        <h1><Link to="/">SnapSteps</Link></h1>
+        <h1 className="main-title">
-        <Navbar />
+          <Link to="/">SnapSteps</Link>
+        </h1>
+        <nav>
+          <Link className="create-new-guide-btn" to="/new-guide">
+            Create New Guide
+          </Link>
+
+          <h2>Guides</h2>
+          <ul className="guide-list">
+            {guides.map((guide) => (
+              <li key={guide.id}>
+                <Link to={`/guide/${guide.id}`}>{guide.title}</Link>
+              </li>
+            ))}
+          </ul>
+          <Link to="/settings">Settings</Link>
+        </nav>
       </header>
 
       <main>

src/components/frame/Frame.tsx

@@ -1,18 +0,0 @@
-import type { FrameType } from "../../lib/schemas";
-
-export default function Frame({ frame } : { frame: FrameType }) {
-  return (
-    <div className="frame">
-      <h2>{frame.title}</h2>
-      <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
-
-      <ol className="steps">
-        {frame.steps.map((step, stepIndex) => (
-          <li key={stepIndex} className="step">
-            {step.text}
-          </li>
-        ))}
-      </ol>
-    </div>
-  );
-}

src/components/navbar/Navbar.css

@@ -1,50 +0,0 @@
-nav {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    padding-bottom: var(--size-lg);
-    width: 100%;
-
-    a {
-        padding: 0.6rem var(--size-md) 0.5rem;
-        border-radius: var(--radius);
-        line-height: 1;
-        display: block;
-    }
-
-    .settings-button {
-        margin-top: auto;
-        align-self: center;
-        font-weight: bold;
-    }
-
-    .settings-button.active {
-        margin-top: auto;
-        align-self: center;
-        color: var(--color-accent);
-    }
-
-    h2 {
-        margin-top: var(--size-lg);
-        font-size: 1rem;
-        opacity: 0.5;
-    }
-    li {
-        width: 100%;
-    }
-    .guide-list a {
-        transition:
-            background-color 0.125s,
-            border-left 0.125s;
-        background-color: #fff;
-        border-left: 4px solid var(--color-border);
-    }
-    .guide-list a.active {
-        background-color: #fff;
-        border-left: 4px solid var(--color-accent);
-    }
-    .guide-list a:hover:not(.active) {
-        border-left: 4px solid var(--color-accent-hover);
-        opacity: 0.8;
-    }
-}

src/components/navbar/Navbar.tsx

@@ -1,19 +0,0 @@
-import { Link, NavLink } from "react-router";
-import "./Navbar.css"
-import GuideList from "./guide-list/GuideList";
-
-export default function Navbar() {
-  return (
-    <nav>
-      <Link className="button primary-button" to="/new-guide">
-        Create New Guide
-      </Link>
-
-      <h2>Guides</h2>
-      <GuideList />
-      <NavLink className="button secondary-button settings-button" to="/settings">
-        Settings
-      </NavLink>
-    </nav>
-    );
-}

src/components/navbar/guide-list/GuideList.css

@@ -1,8 +0,0 @@
-    .guide-list {
-        list-style: none;
-        padding: 0;
-        margin-top: var(--size-sm);
-        display: flex;
-        flex-direction: column;
-        gap: var(--size-sm);
-    }

src/components/navbar/guide-list/GuideList.tsx

@@ -1,19 +0,0 @@
-import { NavLink } from "react-router";
-import "./GuideList.css";
-import { useGuides } from "../../../lib/contexts/guide.context";
-import type { GuideType } from "../../../lib/schemas";
-
-export default function GuideList() {
-  const { guides } = useGuides();
-
-
-  return (
-    <ul className="guide-list">
-      {guides.map((guide: GuideType) => (
-        <li key={guide.id}>
-          <NavLink to={`/guide/${guide.id}`}>{guide.title}</NavLink>
-        </li>
-      ))}
-    </ul>
-  );
-}

src/features/guides/components/FileUpload.css

@@ -3,14 +3,14 @@
     place-items: center;
     cursor: pointer;
     border-style: dashed;
-    padding: var(--size-lg);
+    padding: 2rem;
     font-weight: bold;
 
     &:hover,
     &:focus-visible {
-        border-color: var(--color-accent-border);
+        border-color: #ff770080;
-        color: var(--color-accent);
+        color: #ff7700;
-        background-color: var(--color-accent-bg-subtle);
+        background-color: #ff770010;
     }
 }
 

src/features/guides/components/Frame.css

@@ -1,32 +1,27 @@
 .frame {
-    padding: var(--size-md);
+    padding: 1rem;
-    background: var(--color-bg-panel);
+    background: #ddd;
-    border-left: 3px solid var(--color-accent-border);
+
     display: flex;
     flex-direction: column;
-    gap: var(--size-md);
+    gap: 1rem;
-    border-radius: var(--radius);
-}
-
-.frame img {
-    max-height: 350px;
-    object-fit: contain;
-    object-position: left center;
 }
 
 .frame .buttons {
     display: flex;
-    gap: var(--size-md);
+    gap: 1rem;
 }
 
 .frame .buttons button {
-    padding: var(--size-sm) var(--size-md);
+    padding: 0.5rem 1rem;
 }
 
 .frame .buttons .remove {
     margin-left: auto;
 }
 
-.frame ol {
+.frame .steps {
-    margin-left: var(--size-md);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }

src/features/guides/components/Frame.tsx

@@ -72,7 +72,7 @@ export default function Frame({
       >
         Add Step
       </button>
-      <ol className="steps">
+      <div className="steps">
         {frame.steps.map((step: StepType, index: number) => (
           <Step
             key={step.id}
@@ -82,7 +82,7 @@ export default function Frame({
             updateStep={updateStep}
           />
         ))}
-      </ol>
+      </div>
     </div>
   );
 }

src/features/guides/components/Step.css

@@ -1,12 +1,12 @@
 .step {
     display: flex;
-    gap: var(--size-md);
+    gap: 1rem;
 }
 
 .step label {
     flex-direction: row;
     align-items: center;
-    gap: var(--size-sm);
+    gap: 0.5rem;
     flex: 1;
 }
 

src/features/guides/components/Step.tsx

@@ -13,7 +13,7 @@ export default function Step({
   index: number;
 }) {
   return (
-    <li className={"step " + index}>
+    <div className={"step " + index}>
       <label>
         <span>{index + 1}. </span>
         <input
@@ -25,6 +25,6 @@ export default function Step({
       <button type="button" onClick={() => removeStep(step.id)}>
         Remove Step
       </button>
-    </li>
+    </div>
   );
 }

src/features/guides/routes/Guide.css

@@ -1,56 +1,32 @@
 main:has(.guide) {
-    padding: var(--size-md) 7rem;
+    padding: 1rem 7rem;
     display: flex;
     justify-content: center;
 }
 
-.guide__frames {
-    display: flex;
-    flex-direction: column;
-    gap: var(--size-xl);
-}
-
 .guide {
     max-width: 600px;
+
     .delete-button {
         position: absolute;
-        bottom: var(--size-md);
+        bottom: 1rem;
-        right: var(--size-md);
+        right: 1rem;
     }
 
     .edit-button {
         position: absolute;
-        top: var(--size-md);
+        top: 1rem;
         right: 8rem;
     }
 
     .export-button {
         position: absolute;
-        top: var(--size-md);
+        top: 1rem;
-        right: var(--size-md);
+        right: 1rem;
+    }
 }
 
-}
 @media print {
-    main:has(.guide) {
+    .guide {
-        padding: 0rem;
-        justify-content: flex-start;
-    }
-
-    .guide__frames {
-        display: block;
-    }
-
-    .guide__frame {
-        position: relative;
-        break-inside: avoid;
-        page-break-inside: avoid;
-        background-color: var(--color-bg-panel);
-        margin: var(--size-lg) 0;
-    }
-
-    .guide__frame img {
-        max-width: 100%;
-        max-height: 100px;
     }
 }

src/features/guides/routes/Guide.tsx

@@ -2,7 +2,6 @@ import "./Guide.css";
 import { useParams, Link } from "react-router";
 import { useGuides } from "../../../lib/contexts/guide.context";
 import useGuide from "../hooks/useGuide";
-import Frame from "../../../components/frame/Frame";
 
 export default function Guide() {
   const { id } = useParams();
@@ -21,7 +20,18 @@ export default function Guide() {
 
       <div className="guide__frames">
         {guide.frames.map((frame, index) => (
-          <Frame key={index} frame={frame} />
+          <div key={index} className="guide__frame">
+            <h2>{frame.title}</h2>
+            <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
+
+            <ol className="steps">
+              {frame.steps.map((step, stepIndex) => (
+                <li key={stepIndex} className="guide__step">
+                  {step.text}
+                </li>
+              ))}
+            </ol>
+          </div>
         ))}
       </div>
 

src/features/guides/routes/GuideForm.css

@@ -3,13 +3,16 @@
     flex-direction: column;
     align-items: center;
 }
+
 .new-guide__form {
     display: flex;
     flex-direction: column;
-    gap: var(--size-lg);
+    gap: 2rem;
+
     width: 100%;
     max-width: 540px;
 }
+
 .new-guide__form label {
     display: flex;
     flex-direction: column;

src/styles/App.css

@@ -1,27 +1,8 @@
 :root {
-    /* color */
+    --color-border: #ccc;
-    --color-border: oklch(87.1% 0.006 286.286);
+    --color-bg-sidebar: #eee;
-    --color-bg-sidebar: oklch(92% 0.004 286.32);
-    --color-bg-panel: oklch(96.7% 0.001 286.375);
-
-    --color-accent: oklch(70.5% 0.213 47.604);
-    --color-accent-hover: oklch(75% 0.183 55.934);
-    --color-accent-border: oklch(83.7% 0.128 66.29);
-    --color-accent-bg-subtle: oklch(98% 0.016 73.684);
-
-    /* layout */
     --sidebar-width: 250px;
-    --radius: 4px;
+    --gap-nav: 1rem;
-
-    /* spacing scale */
-    --size-xs2: 0.125rem;
-    --size-xs: 0.25rem;
-    --size-sm: 0.5rem;
-    --size-md: 1rem;
-    --size-lg: 2rem;
-    --size-xl: 3rem;
-    --size-2xl: 4rem;
-    --size-3xl: 5rem;
 }
 
 html,
@@ -34,28 +15,50 @@ body {
     min-height: 100vh;
 }
 
+.app-body {
+    display: flex;
+    flex: 1;
+}
+
 header {
     position: fixed;
     height: 100%;
     width: var(--sidebar-width);
-    padding: var(--size-md);
+    padding: 1rem;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--size-sm);
+    gap: var(--gap-nav);
     border-right: 3px solid var(--color-border);
     background-color: var(--color-bg-sidebar);
 
-    h1 a {
+    .main-title a {
         text-decoration: none;
         color: inherit;
     }
+
+    .create-new-guide-btn {
+        padding: 0.5rem 1rem;
+        border: 3px solid var(--color-border);
+        border-radius: 4px;
+        background-color: transparent;
+        text-decoration: none;
+        color: inherit;
+    }
+
+    .guide-list {
+        list-style: none;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
 }
 
 main {
     margin-left: var(--sidebar-width);
     flex: 1;
-    padding: var(--size-md);
+    padding: 1rem;
 }
 
 footer {
@@ -63,18 +66,33 @@ footer {
     bottom: 0;
     left: 0;
     margin: 0 auto;
-    padding: var(--size-sm);
+    padding: 0.5rem;
     text-align: center;
     width: var(--sidebar-width);
 }
 
+nav {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    height: 100%;
+    padding-bottom: 2rem;
 
+    a:last-of-type {
+        margin-top: auto;
+    }
+
+    h2 {
+        margin-top: 1rem;
+    }
+}
 
 ul {
     padding: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--size-xs);
+    gap: 0.125rem;
     list-style: none;
 }
 
@@ -88,51 +106,32 @@ textarea {
     color: inherit;
 }
 
-a {
-    text-decoration: none;
-}
-
-.primary-button {
-    padding: var(--size-sm) var(--size-md);
-    border-radius: var(--radius);
-    background-color: var(--color-accent);
-    color: #fff;
-    text-decoration: none;
-    font-weight: bold;
-    text-align: center;
-}
-
-.secondary-button {
-    padding: var(--size-sm) var(--size-md);
-    border-radius: var(--radius);
-    background-color: var(--color-bg-sidebar);
-    color: #000;
-    text-decoration: none;
-    font-weight: bold;
-    text-align: center;
-}
-
 input,
 textarea,
 .file-upload {
-    border: 2px solid var(--color-bg-sidebar);
+    border: 3px solid var(--color-border);
-    border-radius: var(--radius);
+    border-radius: 4px;
-    padding: var(--size-sm);
+    padding: 0.25rem;
 }
+
 textarea {
     resize: none;
     height: 5rem;
 }
+
 hr {
-    margin: var(--size-md) 0;
+    margin: 1rem 0;
     border: none;
     height: 3px;
-    background-color: var(--color-bg-sidebar);
+    background-color: var(--color-border);
-    border-radius: var(--radius);
+    border-radius: 4px;
 }
+
 :focus-visible {
-    border: 2px solid var(--color-accent);
+    outline: 2px solid #ff7700;
+    outline-offset: 2px;
 }
+
 @media print {
     header,
     footer,