buttons styling, layout improvements

zayprom · Nov 23, 2024 · a9ddd70 · a9ddd70
1 parent 9140180
commit a9ddd70
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 10 deletions.
diff --git a/app/app.css b/app/app.css
@@ -21,20 +21,21 @@ body {
 
 body {
   display: flex;
-  gap: 1.2rem;
+  gap: 0.6rem;
 }
 
 main {
   width: 80%;
   min-width: 0;
   flex: 1;
   height: 100%;
-  padding: 1.2rem 1.2rem 1.2rem 0.6rem;
+  padding: 0 1.2rem 1.2rem 0.6rem;
   overflow: auto;
   scrollbar-color: var(--light) var(--dark);
 }
 
-#addForm {
+#addForm,
+#editSingleNote {
   position: sticky;
   top: 0;
   left: 0;
@@ -47,6 +48,10 @@ main {
   background-color: var(--dark);
 }
 
+#editSingleNote {
+  justify-content: flex-start;
+}
+
 #editForm {
   width: 100%;
   height: 100%;
@@ -57,7 +62,7 @@ main {
   display: flex;
   align-items: center;
   justify-content: center;
-  border: none;
+  border: 1px solid var(--light);
   border-radius: 7px;
   color: var(--white);
   background-color: var(--dark);

diff --git a/app/components/Details/Edit/index.tsx b/app/components/Details/Edit/index.tsx
@@ -10,6 +10,11 @@ export const EditNoteForm = (props: EditNoteFormProps) => {
   const navigate = useNavigate();
   return (
     <div className={styles.detailSection}>
+      <div className={styles.topSection}>
+        <button type="button" onClick={() => navigate(-1)}>
+          Back
+        </button>
+      </div>
       <div className={styles.titleSection}>
         <label>Title</label>
         <input
@@ -21,7 +26,6 @@ export const EditNoteForm = (props: EditNoteFormProps) => {
       <div className={styles.contentSection}>
         <label>Content</label>
         <textarea
-          // rows={10}
           name="content"
           defaultValue={props.defaultValues.content}
           spellCheck="true"

diff --git a/app/components/Details/Edit/styles.module.css b/app/components/Details/Edit/styles.module.css
@@ -6,6 +6,19 @@
   gap: 1.2rem;
 }
 
+.topSection {
+  position: sticky;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  justify-content: flex-start;
+  align-items: center;
+  max-height: 3rem;
+  padding: 0.6rem 0;
+  background-color: var(--dark);
+}
+
 .titleSection {
   display: flex;
   flex-direction: column;
@@ -55,3 +68,21 @@ textarea {
   align-items: center;
   gap: 0.6rem;
 }
+
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--light);
+  border-radius: 7px;
+  color: var(--white);
+  background-color: var(--dark);
+  font-family: inherit;
+  cursor: pointer;
+  height: 1.4rem;
+  padding: 0.8rem;
+}
+
+button:hover {
+  background-color: var(--light);
+}
diff --git a/app/components/Note/index.tsx b/app/components/Note/index.tsx
@@ -15,7 +15,9 @@ export const SingleNote = (props: SingleNoteProps) => {
             ? `${props.note.title.slice(0, 25)}...`
             : "New note"}
         </NavLink>
-        <NavLink to={`notes/${props.note.id}/edit`}>Edit</NavLink>
+        <NavLink className={styles.editBtn} to={`notes/${props.note.id}/edit`}>
+          Edit
+        </NavLink>
       </div>
       <div className={styles.info}>
         <span>

diff --git a/app/routes/notes.$id.tsx b/app/routes/notes.$id.tsx
@@ -22,14 +22,14 @@ export default function Note() {
   return (
     note.id && (
       <div>
-        <h1>{note.title ? note.title : "New note"}</h1>
-        <p>{note.content ? note.content : "No content added"}</p>
-
-        <Form action="edit">
+        <Form id="editSingleNote" action="edit">
           <button className="noteEditBtn" type="submit">
             Edit
           </button>
         </Form>
+
+        <h1>{note.title ? note.title : "New note"}</h1>
+        <p>{note.content ? note.content : "No content added"}</p>
       </div>
     )
   );