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">
+        <button
+          type="button"
+          className="up"
+          onClick={() => reOrder(frameIndex, frameIndex - 1)}
+        >
           Up
         </button>
-      <button type="button" onClick={() => reOrder(frameIndex, frameIndex + 1)}>
+        <button
+          type="button"
+          className="down"
+          onClick={() => reOrder(frameIndex, frameIndex + 1)}
+        >
           Down
         </button>
 
-      <button type="button" onClick={() => onRemove(frame.id)}>
+        <button
+          type="button"
+          className="remove"
+          onClick={() => onRemove(frame.id)}
+        >
           Remove Frame
         </button>
+      </div>
+
       <label>
         Title
         <input
@@ -41,9 +56,15 @@ 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>
+
+      <div className="steps">
         {frame.steps.map((step: StepType, index: number) => (
           <Step
             key={step.id}
@@ -54,5 +75,6 @@ export default function Frame({
           />
         ))}
       </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;
+}