Modify button styled in form avaliation #15

ES2-UFPI · Mar 20, 2023 · de2a7c5 · de2a7c5
1 parent 47f379d
commit de2a7c5
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 38 deletions.
diff --git a/vite-client/src/Pages/Home/index.tsx b/vite-client/src/Pages/Home/index.tsx
@@ -1,25 +1,49 @@
-import { Link } from "react-router-dom";
-import { HomePage } from "./styles"
+import { Link } from 'react-router-dom'
+import { HomePage } from './styles'
 
-export function Home(){
+export function Home() {
   return (
     <HomePage>
       <h1>Página Inicial do Professor</h1>
-      <Link 
-        to="/form-avaliation" 
-        style={{color: '#fff', marginTop: '20px', border:'1px solid white', padding:'6px', borderRadius:'10px', textDecoration:'none'}}>
-          Cadastrar prova ou tarefa
+      <Link
+        to="/form-avaliation"
+        style={{
+          color: '#fff',
+          marginTop: '20px',
+          border: '1px solid white',
+          padding: '6px',
+          borderRadius: '10px',
+          textDecoration: 'none'
+        }}
+      >
+        Cadastrar prova ou tarefa
       </Link>
-      <Link 
-        to="/solve-avaliation" 
-        style={{color: '#fff', marginTop: '20px', border:'1px solid white', padding:'6px', borderRadius:'10px', textDecoration:'none'}}>
-          Responder prova ou tarefa
+      <Link
+        to="/solve-avaliation"
+        style={{
+          color: '#fff',
+          marginTop: '20px',
+          border: '1px solid white',
+          padding: '6px',
+          borderRadius: '10px',
+          textDecoration: 'none'
+        }}
+      >
+        Responder prova ou tarefa
       </Link>
-      <Link 
-        to="/view-avaliations" 
-        style={{color: '#fff', marginTop: '20px', border:'1px solid white', padding:'6px', borderRadius:'10px', textDecoration:'none'}}>
-          Ver provas e tarefas cadastradas
+      <Link
+        to="/view-avaliations"
+        style={{
+          color: '#fff',
+          marginTop: '20px',
+          border: '1px solid white',
+          padding: '6px',
+          borderRadius: '10px',
+          textDecoration: 'none'
+        }}
+      >
+        Ver provas e tarefas cadastradas
       </Link>
     </HomePage>
   )
-}
+}
diff --git a/vite-client/src/components/AddIcon/index.tsx b/vite-client/src/components/AddIcon/index.tsx
@@ -0,0 +1,25 @@
+export const AddIcon = () => (
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 5V19"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 12H19"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
diff --git a/vite-client/src/components/CreateQuestions/styles.ts b/vite-client/src/components/CreateQuestions/styles.ts
@@ -15,8 +15,12 @@ export const ButtonAddQuestion = styled.button `
   border: none; 
   cursor: pointer;
 
+  transition: .2s;
+  
   :hover {
-    background-color: rgb(39, 38, 67, 0.09);
+    background-color: #76DC28;
+    color: white;
+    text-shadow: 1px 1px 1px black;
   }
 `
 
diff --git a/vite-client/src/components/FormAvaliation/index.tsx b/vite-client/src/components/FormAvaliation/index.tsx
@@ -1,6 +1,6 @@
 import { useState, useContext } from 'react'
 
-import { Form } from './styles'
+import { ButtonSave, Form } from './styles'
 import { Link } from 'react-router-dom'
 import { CreateQuestions } from '../CreateQuestions'
 import { PropsQuestions } from '../GenerateQuestions'
@@ -154,20 +154,14 @@ export function FormAvaliation({ typeAvaliation, ...props }: PropsForm) {
           </Form>
         )
       }
-      <Link 
-        to="/" 
-        onClick={handleSubmit}
-        style={{
-          color: '#272643',
-          backgroundColor: "#C9D5FF",
-          paddingBlock: ".5rem",
-          paddingInline: "5rem",
-          borderRadius: "2rem",
-          textDecoration: "none"          
-        }}
-      >
-        Salvar
-      </Link>
+        <Link 
+          to="/" 
+          onClick={handleSubmit}
+        >
+          <ButtonSave>
+            Salvar
+          </ButtonSave>
+        </Link>
     </>
   )
 }
diff --git a/vite-client/src/components/FormAvaliation/styles.ts b/vite-client/src/components/FormAvaliation/styles.ts
@@ -73,6 +73,26 @@ export const SubForm = styled.div`
       border: none;
     }
   }
+`
 
+export const ButtonSave = styled.button `
+  color: '#272643';
+  background-color: #C9D5FF;
+  padding: 1rem 4rem;
+  
+  border: none;
+  border-radius: 2rem;
+  cursor: pointer;
+  
+  font-size: 1.6rem;
+  font-weight: bold;
+  
+  transition: .2s;
+
+  :hover {
+    background-color: #76DC28;
+    color: white;
+    text-shadow: 1px 1px 1px black;
+  }
 `
 
diff --git a/vite-client/src/components/GenerateQuestions/index.tsx b/vite-client/src/components/GenerateQuestions/index.tsx
@@ -4,6 +4,7 @@ import { Alternative, ButtonAddAlternative, ButtonDeleteQuestion, GenerateQuesti
 
 import { ContextQuestions } from "../../context/contextQuestions"
 import { PropsAlternative } from "../AlternativeQuestion"
+import { AddIcon } from "../AddIcon"
 // import { AlternativeQuestion } from "../AlternativeQuestion"
 
 export interface PropsQuestions {
@@ -152,10 +153,8 @@ export function GenerateQuestions({ typeQuestion, description, points, ...props
             <legend>
               <h4>Questão verdadeira ou falsa</h4>
             </legend>
-            <ButtonAddAlternative 
-              type="button"
-              onClick={ e => handleAddAlternative(e) }>
-              +
+            <ButtonAddAlternative >
+              <AddIcon />
             </ButtonAddAlternative>
             { 
               // Renderizar alternativas para cada questão
@@ -208,7 +207,7 @@ export function GenerateQuestions({ typeQuestion, description, points, ...props
             <ButtonAddAlternative
               type="button"
               onClick={ e => handleAddAlternative(e) }>
-              +
+              <AddIcon />
             </ButtonAddAlternative>
             { 
               // Renderizar alternativas para cada questão

diff --git a/vite-client/src/components/GenerateQuestions/styles.ts b/vite-client/src/components/GenerateQuestions/styles.ts
@@ -58,8 +58,16 @@ export const ButtonAddAlternative = styled.button `
   cursor: pointer;
   margin: 1rem 0rem;
 
+  display: inline-block;
+
+  transition: .2s;
+  
+  font-size: 1.6rem;
+
   :hover {
-    background: #76DC28;
+    background-color: #76DC28;
+    color: white;
+    text-shadow: 1px 1px 1px black;
   }
 `