Added resposnive design

src/assets/styles/components/_selectionProcessPage.scss

@@ -32,6 +32,17 @@
   padding-left: 0.3rem;
   color: #226CB0;
   letter-spacing: 0.02em;
+
+  @include media-below($bp-xl) {
+    font-size: 14px;
+  }
+}
+
+h1,
+h3 {
+  @include media-below($bp-xl) {
+    font-size: 18px;
+  }
 }
 
 .level-header-spliter {
@@ -43,6 +54,10 @@
   padding-left: 0.3rem;
   color: #272727;
   letter-spacing: 0.02em;
+
+  @include media-below($bp-xl) {
+    font-size: 18px;
+  }
 }
 
 .selection-levels-processes {
@@ -73,10 +88,9 @@
   border-radius: 18px;
   gap: 18px;
   margin-right: 36px;
-
   @include media-below($bp-xl) {
     margin-right: 20px !important;
-    padding: 36px !important;
+    padding: 18px !important;
   }
 }
 
@@ -133,6 +147,10 @@
   flex: none;
   order: 0;
   flex-grow: 0;
+
+  @include media-below($bp-xl) {
+    font-size: 18px;
+  }
 }
 
 .selection-item-name,
@@ -184,6 +202,11 @@
   border: 1px solid #E4E4E4;
   border-radius: 18px;
   transition: 0.3s;
+  @include media-below($bp-xl) {
+    justify-content: space-between;
+    padding: 18px;
+    width: 303px;
+  }
 }
 
 .sel-item .status {
@@ -196,18 +219,41 @@
   flex: none;
   order: 0;
   flex-grow: 0;
+  @include media-below($bp-xl) {
+    font-size: 14px;
+    order:1;
+  }
+}
+
+.sel-item .date-name{
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 18px;
+  cursor: pointer;
+  width: 100%;
+  order: 1;
+  @include media-below($bp-xl) {
+    flex-direction: column;
+    font-size: 14px;
+    order: 0;
+    flex-grow: 0;
+    gap:4px;
+  }
 }
 
-.sel-item .date {
+.sel-item .date-name .date {
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
-  line-height: 20px;
   color: #272727;
+  flex: none;
+  font-size: 14px !important;
+  order: 0;
 }
 
-.sel-item .full-name {
+.full-name {
   height: 20px;
   font-family: 'Source Sans Pro';
   font-style: normal;
@@ -217,6 +263,16 @@
   color: #226CB0;
   flex: 3 0 auto;
   order: 1;
+  @include media-below($bp-xl) {
+   text-align: left !important;
+   font-size: 14px !important;
+  }
+}
+
+.full-name p,.sel-item .date-name .date p{
+  @include media-below($bp-xl) {
+    font-size: 14px !important;
+   }
 }
 
 
@@ -237,6 +293,9 @@
   flex: none;
   order: 0;
   flex-grow: 0;
+  @include media-below($bp-xl) {
+    font-size: 14px !important;
+   }
 }
 
 .active-process {
@@ -256,7 +315,6 @@
   border-radius: 18px;
   gap: 18px;
   margin-right: 36px;
-
   @include media-below($bp-xl) {
     margin-right: 20px !important;
     padding: 36px !important;
@@ -273,7 +331,6 @@
   background: #ffffff;
   gap: 18px;
   margin-right: 36px;
-
   @include media-below($bp-xl) {
     margin-right: 20px !important;
     padding: 36px !important;
@@ -409,10 +466,6 @@
   flex-grow: 0;
 }
 
-// .active-process-card-number{
-//   flex: 3 0 auto;
-// }
-
 .active-process-card-logo {
   margin-left: auto;
   flex: none;

src/components/Selection/ApplicantSelection.js

@@ -28,9 +28,6 @@ const ApplicantSelection = ({
                 </div>}
             </div>
 
-
-
-
             <div className="active-process-card-body">
                 <div className="active-process-card-date">
                     <p>

src/components/Selection/Selection.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { selectDoneProcessError } from "../../store/selectors/processSelectors";
-import { selectAuthUser} from "../../store/selectors/userSelectors"
+import { selectAuthUser } from "../../store/selectors/userSelectors"
 import { setDoneProcessReq } from "../../store/actions/processes/processAction";
 import { useDispatch, useSelector } from "react-redux";
 import { formatDateSrb, formatTimeSrb } from "../../util/helpers/dateHelpers";
@@ -26,7 +26,7 @@ const Selection = (props) => {
         var data = e.dataTransfer.getData("text/plain");
         const selectionProcess = JSON.parse(data);
         if (selectionProcess.selectionLevelId !== selId) {
-            dispatch(setDoneProcessReq({ 
+            dispatch(setDoneProcessReq({
                 id: selectionProcess.id,
                 name: "radnom name",
                 applicantId: selectionProcess.applicant.applicantId,
@@ -48,11 +48,13 @@ const Selection = (props) => {
             <div className="status">
                 <button>{item.status}</button>
             </div>
-            <div className="date">
-                {item.date !== null && item.date !== "" && <p>{formatDateSrb(item.date)} <span className="grey">|</span> {formatTimeSrb(item.date)}</p>}
-            </div>
-            <div className="full-name">
-                <p>{item.applicant.firstName + " " + item.applicant.lastName}</p>
+            <div className="date-name">
+                <div className="date">
+                    {item.date !== null && item.date !== "" && <p>{formatDateSrb(item.date)} <span className="grey">|</span> {formatTimeSrb(item.date)}</p>}
+                </div>
+                <div className="full-name">
+                    <p>{item.applicant.firstName + " " + item.applicant.lastName}</p>
+                </div>
             </div>
         </div>
     }

src/i18n/resources/rs.js

@@ -135,6 +135,7 @@ export default {
   },
   selection: {
     title: "Tok Selekcije",
+    subtitle: "Svi kandidati",
     tipHeader: "Savet za uspešan Screening test",
     tipBody: "Zapamtite da odeljenje za ljudske resurse u sebi sadrži reč „ljudski“. HR treba da vas vidi kakvi ste i da bi stekli osećaj za vašu stvarnu ličnost i postarali se da se dobro uklopite u kompaniju. Zato je bolje da se ponašate prirodno i opušteno. Važno je i pokazati da posedujete snažne međuljudske veštine i da se ponašate profesionalno. Na dan intervjua budite tačni, predstavite se pristojno i obucite se na odgovarajući način. To znači da razmislite o slici kompanije, ali i da se odevate na način koji vam je ugodan tokom dana."
   },

src/pages/SelectionProcessPage/SelectionProcessPage.js

@@ -65,7 +65,7 @@ const SelectionProcessPage = ({history}) => {
               |
               </span>
               <span className="level-header-subheader">
-                Svi kandidati
+              {t("selection.subtitle")} 
                 </span>
                 </h1>
             <IconButton