styling fixes for editing feature + button

neu-cs4530 · Nov 27, 2024 · 44a7ecd · 44a7ecd
1 parent 7c06ce8
commit 44a7ecd
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 13 deletions.
diff --git a/client/src/components/main/answerPage/questionBody/index.css b/client/src/components/main/answerPage/questionBody/index.css
@@ -1,22 +1,68 @@
 .questionBody {
   display: flex;
   flex-direction: row;
-  /* justify-content: space-between;  */
   margin-top: 5%;
   border-bottom: #000000 1px dashed;
 }
 
 .edit-icon-button {
-  background: none;
-  border: none;
+  border: 2px solid #d4a5a5;
+  border-radius: 8px;
+  background-color: white;
   cursor: pointer;
-  color: #555;
+  width: 30px;
+  height: 32px;
   display: flex;
   align-items: center;
+  justify-content: center;
+  margin-top: 8px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.edit-icon-button i, 
+.edit-icon-button svg, 
+.edit-icon-button img {
+  font-size: 17px;
+  width: 17px;
+  height: 17px;
 }
 
 .edit-icon-button:hover {
-  color: #000;
+  color: #a56767;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.save-button {
+  background-color: #BABDE2;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 10px;
+  transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.save-button:hover {
+  background-color: #9498B5;
+  transform: scale(1.05);
+}
+
+textarea {
+  width: 680px;
+  height: 70px;
+  padding: 8px; 
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  resize: vertical;
+  font-size: 16px;
+  transition: border 0.3s ease, box-shadow 0.3s ease;
+}
+
+textarea:focus {
+  border-color: #d4a5a5;
 }
 
 .answer_question_view {

diff --git a/client/src/components/main/answerPage/questionBody/index.tsx b/client/src/components/main/answerPage/questionBody/index.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React, { useState } from 'react';
 import './index.css';
-import { FiEdit } from 'react-icons/fi';
+import { FaPencilAlt } from 'react-icons/fa';
 import { handleHyperlink } from '../../../../tool';
 import { editQuestion } from '../../../../services/questionService';
 import useUserContext from '../../../../hooks/useUserContext';
@@ -62,7 +62,9 @@ const QuestionBody = ({ views, text, askby, meta, questionId, inCommunity }: Que
       {isEditing ? (
         <div>
           <textarea value={editedText} onChange={handleTextChange} />
-          <button onClick={handleSave}>Save</button>
+          <button className='save-button' onClick={handleSave}>
+            Save
+          </button>
         </div>
       ) : (
         <div className='answer_question_text'>{handleHyperlink(text)}</div>
@@ -74,7 +76,7 @@ const QuestionBody = ({ views, text, askby, meta, questionId, inCommunity }: Que
           <>
             {!isEditing && (
               <button onClick={handleEditClick} className='edit-icon-button'>
-                <FiEdit size={20} />
+                <FaPencilAlt size={20} />
               </button>
             )}
           </>

diff --git a/client/src/components/main/commentSection/index.css b/client/src/components/main/commentSection/index.css
@@ -89,11 +89,13 @@
 }
 
 .comment-textarea:focus {
-  border-color: #007bff;
+  border-color: #d4a5a5;
   outline: none;
 }
 
 .add-comment-button {
+  width: 20px;
+  height: 40px;
   flex: 1;
   background-color: #BABDE2;
   color: white;
@@ -102,6 +104,7 @@
   border-radius: 4px;
   cursor: pointer;
   font-size: 0.85rem;
+  margin-top: 38.5px;
 }
 
 .add-comment-button:hover {

diff --git a/client/src/components/main/questionPage/question/index.css b/client/src/components/main/questionPage/question/index.css
@@ -110,11 +110,28 @@
 
 .trashcan {
   border: 2px solid #d4a5a5;
-  padding: 5px;
-  float: right;
   border-radius: 8px;
   background-color: white;
   cursor: pointer;
-  transition: transform 0.2s;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  width: 28px;
+  height: 30px;
+  justify-content: center;
+  align-items: center;  
+  margin-left: 20px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+.trashcan i, 
+.trashcan svg, 
+.trashcan img {
+  font-size: 14x;
+  width: 14x;
+  height: 14px;
+}
+
+.trashcan:hover {
+  color: #a56767;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }