From 682e81af8cb90d72c0fbf96c8bf1adb704b03ff7 Mon Sep 17 00:00:00 2001
From: Andres Chapeton <andres.chapeton0206@gmail.com>
Date: Wed, 22 Mar 2023 15:37:19 -0600
Subject: [PATCH] Home desktop styles and input search styles

---
 src/assets/fi_trash-2.svg                      |  6 ++++++
 src/modules/ApplicationsTable/columns.jsx      |  7 +++++--
 src/modules/ApplicationsTable/index.jsx        |  3 +++
 .../ApplicationsTable/styles.module.scss       | 18 ++++++++++++++++++
 src/pages/HomePage/styles.module.scss          |  4 ++++
 src/styles/variables.scss                      |  1 +
 6 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/fi_trash-2.svg
 create mode 100644 src/modules/ApplicationsTable/styles.module.scss

diff --git a/src/assets/fi_trash-2.svg b/src/assets/fi_trash-2.svg
new file mode 100644
index 0000000..64c590d
--- /dev/null
+++ b/src/assets/fi_trash-2.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.17554 6.04581H5.17554H21.1755" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.17554 6.04581V4.04581C8.17554 3.51537 8.38625 3.00667 8.76132 2.63159C9.1364 2.25652 9.6451 2.04581 10.1755 2.04581H14.1755C14.706 2.04581 15.2147 2.25652 15.5898 2.63159C15.9648 3.00667 16.1755 3.51537 16.1755 4.04581V6.04581M19.1755 6.04581V20.0458C19.1755 20.5762 18.9648 21.0849 18.5898 21.46C18.2147 21.8351 17.706 22.0458 17.1755 22.0458H7.17554C6.6451 22.0458 6.1364 21.8351 5.76132 21.46C5.38625 21.0849 5.17554 20.5762 5.17554 20.0458V6.04581H19.1755Z" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1755 11.0458V17.0458" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.1755 11.0458V17.0458" stroke="#FF0000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/modules/ApplicationsTable/columns.jsx b/src/modules/ApplicationsTable/columns.jsx
index 8256ab6..83ee82a 100644
--- 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
index 7911df6..1a8b102 100644
--- 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
new file mode 100644
index 0000000..e16ae58
--- /dev/null
+++ 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
index b246efb..5888784 100644
--- 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
index 65ddf4c..045f017 100644
--- 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;