style(guides): restructure Frame layout and add CSS for Frame and Step

src/features/guides/components/Frame.css

@@ -0,0 +1,27 @@
+.frame {
+    padding: 1rem;
+    background: #ddd;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.frame .buttons {
+    display: flex;
+    gap: 1rem;
+}
+
+.frame .buttons button {
+    padding: 0.5rem 1rem;
+}
+
+.frame .buttons .remove {
+    margin-left: auto;
+}
+
+.frame .steps {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}

src/features/guides/components/Frame.tsx

@@ -22,17 +22,32 @@ export default function Frame({
   reOrder: (startIndex: number, endIndex: number) => void;
 }) {
   return (
-    <div>
+    <div className="frame">
-      <button type="button" onClick={() => reOrder(frameIndex, frameIndex - 1)}>
+      <div className="buttons">
-        Up
+        <button
-      </button>
+          type="button"
-      <button type="button" onClick={() => reOrder(frameIndex, frameIndex + 1)}>
+          className="up"
-        Down
+          onClick={() => reOrder(frameIndex, frameIndex - 1)}
-      </button>
+        >
+          Up
+        </button>
+        <button
+          type="button"
+          className="down"
+          onClick={() => reOrder(frameIndex, frameIndex + 1)}
+        >
+          Down
+        </button>
+
+        <button
+          type="button"
+          className="remove"
+          onClick={() => onRemove(frame.id)}
+        >
+          Remove Frame
+        </button>
+      </div>
 
-      <button type="button" onClick={() => onRemove(frame.id)}>
-        Remove Frame
-      </button>
       <label>
         Title
         <input
@@ -41,18 +56,25 @@ export default function Frame({
         />
       </label>
       <img src={URL.createObjectURL(frame.file)} alt={frame.title} />
-      <button type="button" onClick={() => addStep(frame.id)}>
+      <button
+        type="button"
+        className="add-step"
+        onClick={() => addStep(frame.id)}
+      >
         Add Step
       </button>
-      {frame.steps.map((step: StepType, index: number) => (
+
-        <Step
+      <div className="steps">
-          key={step.id}
+        {frame.steps.map((step: StepType, index: number) => (
-          step={step}
+          <Step
-          index={index}
+            key={step.id}
-          removeStep={removeStep}
+            step={step}
-          updateStep={updateStep}
+            index={index}
-        />
+            removeStep={removeStep}
-      ))}
+            updateStep={updateStep}
+          />
+        ))}
+      </div>
     </div>
   );
 }

src/features/guides/components/Step.css

@@ -0,0 +1,15 @@
+.step {
+    display: flex;
+    gap: 1rem;
+}
+
+.step label {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+}
+
+.step input {
+    flex: 1;
+}