Home desktop styles and input search styles

AChapeton · Mar 22, 2023 · 682e81a · 682e81a
1 parent 8597caf
commit 682e81a
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 2 deletions.
diff --git a/src/assets/fi_trash-2.svg b/src/assets/fi_trash-2.svg
diff --git a/src/modules/ApplicationsTable/columns.jsx b/src/modules/ApplicationsTable/columns.jsx
@@ -1,5 +1,6 @@
 import { format } from "date-fns";
 import { NavLink } from "react-router-dom";
+import trashIcon from "../../assets/fi_trash-2.svg";
 
 const columnsHR = [
   {
@@ -42,7 +43,7 @@ const columnsHR = [
     //Moves to confirmation delete page who receives row's data
     selector: (row) => (
       <NavLink to="/confirm_delete_app" state={row}>
-        Delete
+        <img src={trashIcon} alt="Trash icon" />
       </NavLink>
     ),
   },
@@ -84,7 +85,9 @@ const columnsEmployee = [
     name: "Actions",
     //Moves to confirmation delete page who receives row's data
     selector: (row) => (
-      <button onClick={() => handleDelete(row)}>Delete</button>
+      <NavLink to="/confirm_delete_app" state={row}>
+        <img src={trashIcon} alt="Trash icon" />
+      </NavLink>
     ),
   },
 ];

diff --git a/src/modules/ApplicationsTable/index.jsx b/src/modules/ApplicationsTable/index.jsx
@@ -4,6 +4,7 @@ import { useFetchUserApps } from "../../hooks/useObtainUserApps";
 import { useSearch } from "../../hooks/useSearch";
 import { columnsHR, columnsEmployee } from "./columns";
 import DataTable from "react-data-table-component";
+import styles from "./styles.module.scss";
 
 const ApplicationsTable = () => {
   //Calls logged user data
@@ -35,6 +36,8 @@ const ApplicationsTable = () => {
         name="searchValue"
         id="searchValue"
         onChange={handleSearch}
+        className={styles.application__input_search}
+        placeholder="Search"
       />
       <DataTable
         columns={

diff --git a/src/modules/ApplicationsTable/styles.module.scss b/src/modules/ApplicationsTable/styles.module.scss
@@ -0,0 +1,18 @@
+@import "../../styles/variables.scss";
+@import "../../styles/mixins.scss";
+
+.application {
+  &__input {
+    &_search {
+      background-color: var(--white);
+      border: 1px solid var(--gray);
+      padding: 15px;
+      margin-bottom: 33px;
+      border-radius: 10px;
+      color: var(--grayText);
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 17px;
+    }
+  }
+}
diff --git a/src/pages/HomePage/styles.module.scss b/src/pages/HomePage/styles.module.scss
@@ -5,6 +5,10 @@
   display: flex;
   flex-direction: column;
   padding: 60px 16px;
+  @include breakpoint(extra-large) {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 
   &__header {
     display: flex;

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -6,6 +6,7 @@
 
   //Colors
   --blueButton: #0779be;
+  --grayText: #8692A6
   --blue: #007aff;
   --gray: #cfcfcf;
   --black: #000000;