feat: improve UI

package.json

@@ -17,6 +17,7 @@
     "@types/react-dom": "^18.0.6",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.2",
+    "moment": "^2.29.4",
     "query-string": "^7.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/_styles.scss

 @use "~bootstrap/scss/bootstrap";
-@use "styles/components.scss";
-@use "styles/pages.scss";
-@use "styles/common.scss";
+@use "styles/components";
+@use "styles/pages";
+@use "styles/reset";
+@use "styles/global";

src/components/Header/Header.scss

@@ -27,7 +27,7 @@
 
       .navbar-readAll {
         &:hover {
-          color: $green-1;
+          color: $success-500;
         }
       }
     }

src/components/Header/index.tsx

@@ -87,7 +87,7 @@ export default function Header() {
               {categoryData.map((item) => (
                 <Box
                   component="li"
-                  key={item.id}
+                  key={item.link}
                   sx={{
                     color: "#000",
                     fontWeight: 700,

src/components/Newspaper/Newspaper.scss

 @use "styles/index" as *;
 
 .newspaper {
-  &-article {
-    flex-direction: row;
+  margin-bottom: 72px;
+  border: 1px solid $neutral-300;
+  border-radius: 12px;
+  overflow: hidden;
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: $shadow-s;
+  }
 
-    @include tablet {
-      flex-direction: column;
-    }
+  &-img {
+    width: 100%;
 
-    &__img {
+    img {
       width: 100%;
-      max-height: 400px;
       object-fit: cover;
-      transform: scale(0.9);
-      cursor: pointer;
-
-      @include tablet {
-        transform: scale(1);
-      }
+      border-radius: 12px 12px 0 0;
+      border-bottom: 1px solid $neutral-300;
     }
+  }
 
-    &__content {
-      margin-top: 40px;
-
-      @include tablet {
-        margin-top: 20px;
-      }
+  &-content {
+    padding: 20px;
+    min-height: 160px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    p {
+      font-size: 20px;
+      color: $neutral-700;
+      font-weight: 700;
+      line-height: 25px;
+    }
 
-      small {
-        color: $gray;
+    &__footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .newspaper-category {
+        font-size: 11px;
+        background-color: $success-150;
+        padding: 6px 8px;
+        border-radius: 12px;
+        font-weight: 500;
       }
 
-      h6 {
-        font-size: 2.5rem;
-        padding-right: 50px;
-
-        @include tablet {
-          padding-right: 0;
-        }
+      .newspaper-time {
+        font-size: 12px;
+        color: $neutral-500;
       }
     }
   }
-
-  &-divider {
-    margin: 50px 0;
-    width: 100%;
-    height: 1px;
-    background-color: $gray-1;
-    position: relative;
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translate(-50%, -40%);
-      width: 7px;
-      height: 7px;
-      border-radius: 50%;
-      background-color: $green-1;
-    }
-  }
-
-  &:last-child {
-    .newspaper-divider {
-      display: none;
-    }
-  }
 }

src/components/Newspaper/index.tsx

+import moment from "moment";
 import { INewspaper } from "pages/interface";
 import React from "react";
 
@@ -7,25 +8,27 @@ type Props = {
 
 const Newspaper = (props: Props) => {
   const { data } = props;
-  const { description, image, title, createdAt } = data;
+  const { image, title, createdAt, categorylinkNavigation } = data;
+  const { label } = categorylinkNavigation;
 
   return (
     <div className="newspaper">
-      <div className="row flex-nowrap newspaper-article">
-        <div className="col-12 col-lg-7">
-          <img src={image} alt="poster" className="newspaper-article__img" />
-        </div>
+      <div className="newspaper-img">
+        <img src={image} alt={title} />
+      </div>
 
-        <div className="col">
-          <div className="newspaper-article__content">
-            <small>{createdAt}</small>
-            <h6>{title}</h6>
-            <p>{description}</p>
+      <div className="newspaper-content">
+        <p>{title}</p>
+        <div className="newspaper-content__footer">
+          <div className="newspaper-category">{label}</div>
+
+          <div className="newspaper-time">
+            <span>
+              {moment(createdAt, "DD/MM/YYYY hh:mm").format("DD/MM/YYYY")}
+            </span>
           </div>
         </div>
       </div>
-
-      <div className="newspaper-divider"></div>
     </div>
   );
 };

src/components/Sidenav/index.tsx

@@ -44,7 +44,7 @@ const Sidenav = (props: Props) => {
           <Divider />
           <List>
             {navItems.map((item) => (
-              <ListItem key={item.id} disablePadding>
+              <ListItem key={item.link} disablePadding>
                 <ListItemButton sx={{ textAlign: "center" }}>
                   <ListItemText primary={item.label} />
                 </ListItemButton>

src/components/WrapperContainer/WrapperContainer.scss

+@use "styles/index" as *;
+
+.wrapper-container {
+  padding: 0 70px;
+
+  @include desktop {
+    padding: 0;
+  }
+
+  @include tablet {
+    padding: 0 12px;
+  }
+
+  @include for-mobile-down {
+    padding: 0 4px;
+  }
+}

src/components/WrapperContainer/index.tsx

+import React, { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+const WrapperContainer = (props: Props) => {
+  const { children, className } = props;
+
+  return (
+    <div className={`container ${className}`}>
+      <div className="wrapper-container">{children}</div>
+    </div>
+  );
+};
+
+export default WrapperContainer;

src/components/interface.ts

 export interface ICategory {
-  id: string;
+  link: string;
   label: string;
 }

src/configuration/environmentConfig.ts

 const enviromentConfig = {
   development: {
-    endPoint: "https://localhost:44386",
+    endPoint: "https://localhost:5001",
   },
   production: {
     endPoint: "",

src/pages/MainPage.tsx

@@ -2,6 +2,7 @@ import { handleLoading } from "app/globalSlice";
 import { useAppDispatch, useAppSelector } from "app/hooks";
 import { globalSelector, homeSelector } from "app/selectors";
 import Loading from "components/Loading";
+import WrapperContainer from "components/WrapperContainer";
 import React, { useEffect } from "react";
 import Newspaper from "../components/Newspaper";
 import { getNews } from "./homePageSlice";
@@ -28,11 +29,17 @@ const MainPage = () => {
   }, []);
 
   return (
-    <main className="container py-3">
+    <main className="py-3">
       <Loading isOpen={isLoading} />
-      {newsData.map((newspaper) => (
-        <Newspaper key={newspaper.id} data={newspaper} />
-      ))}
+      <WrapperContainer>
+        <div className="newspaper-list row">
+          {newsData.map((newspaper) => (
+            <div className="col-4" key={newspaper.id}>
+              <Newspaper data={newspaper} />
+            </div>
+          ))}
+        </div>
+      </WrapperContainer>
     </main>
   );
 };

src/pages/interface.ts

-// Generated by https://quicktype.io
+import { ICategory } from "components/interface";
 
 export interface INewspaper {
   id: string;
@@ -7,4 +7,7 @@ export interface INewspaper {
   description: string;
   image: string;
   createdAt: string;
+  content: string;
+  categorylink: string;
+  categorylinkNavigation: ICategory;
 }

src/styles/common.scss → src/styles/_global.scss

-@use "./variables.scss";
+@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&display=swap");
 
 html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
+
 *,
 *:before,
 *:after {
@@ -13,8 +14,19 @@ html {
   box-sizing: inherit;
 }
 
-.text-ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Archivo", "helvetica", sans-serif !important;
+}
+
+p,
+div,
+span,
+small,
+label {
+  font-family: "Roboto", "helvetica", sans-serif !important;
 }

src/styles/_mixin.scss

-$screen-xs-max: 576px;
-$screen-sm-max: 768px;
-$screen-md-max: 992px;
-$screen-lg-max: 1200px;
-$screen-xxl-up: 1400px;
+@use "./variables" as *;
 
 @mixin for-mobile-down {
   @media (max-width: #{$screen-xs-max}) {

src/styles/_reset.scss

+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

src/styles/_variables.scss

-$red: #d01515;
-$gray: #808080;
-$gray-1: #c4bcbc;
-$green: #008000;
-$green-1: #069a06;
+// screens
+$screen-xxs-max: 400px;
+$screen-xs-max: 576px;
+$screen-sm-max: 768px;
+$screen-md-max: 992px;
+$screen-lg-max: 1200px;
+$screen-xl-up: 1400px;
+
+// z-index
+$z-index-modalBackdrop: 999;
+$z-index-header: 1000;
+$z-index-sidebar: 1001;
+$z-index-modalPopup: 1002;
+
+// colors
+$white: #fff;
+$black: #000;
+
+$neutral-100: #fafafb;
+$neutral-150: #f8f9fa;
+$neutral-200: #f3f4f6;
+$neutral-300: #dee1e6;
+$neutral-400: #bcc1ca;
+$neutral-500: #9095a0;
+$neutral-550: #6e7787;
+$neutral-600: #565e6c;
+$neutral-650: #424955;
+$neutral-700: #323842;
+$neutral-800: #1d2128;
+$neutral-900: #171a1f;
+
+$primary-100: #ebfdff;
+$primary-150: #c8f9ff;
+$primary-200: #a6f5ff;
+$primary-250: #83f1ff;
+$primary-300: #61edff;
+$primary-350: #3ee9ff;
+$primary-400: #1ce5ff;
+$primary-450: #00dcf9;
+$primary-500: #00bdd6;
+$primary-550: #00a9c0;
+$primary-600: #0095a9;
+$primary-650: #008192;
+$primary-700: #006d7c;
+$primary-750: #005965;
+$primary-800: #00454f;
+$primary-850: #003138;
+$primary-900: #001d21;
+
+$secondary-100: #f5f2fd;
+$secondary-150: #e7def9;
+$secondary-200: #d9cbf6;
+$secondary-250: #cbb7f3;
+$secondary-300: #bda3ef;
+$secondary-350: #af90ec;
+$secondary-400: #a07ce9;
+$secondary-450: #9269e5;
+$secondary-500: #8353e2;
+$secondary-550: #723cde;
+$secondary-600: #6025d8;
+$secondary-650: #5520bf;
+$secondary-700: #4a1ca6;
+$secondary-750: #3f188d;
+$secondary-800: #341473;
+$secondary-850: #280f5a;
+$secondary-900: #1d0b41;
+
+$info-100: #f0f8fe;
+$info-150: #d4ebfd;
+$info-200: #b8defc;
+$info-250: #9cd2fa;
+$info-300: #80c5f9;
+$info-350: #64b8f8;
+$info-400: #48abf6;
+$info-450: #2c9ef5;
+$info-500: #1091f4;
+$info-550: #0b83df;
+$info-600: #0974c6;
+$info-650: #0865ad;
+$info-700: #075794;
+$info-750: #06487a;
+$info-800: #053961;
+$info-850: #032a48;
+$info-900: #021b2f;
+
+$warning-100: #fef8f1;
+$warning-150: #fcecd9;
+$warning-200: #fae0c2;
+$warning-250: #f8d4aa;
+$warning-300: #f6c892;
+$warning-350: #f4bc7b;
+$warning-400: #f2b063;
+$warning-450: #f0a44c;
+$warning-500: #ef9834;
+$warning-550: #ec8917;
+$warning-600: #d37911;
+$warning-650: #b7680f;
+$warning-700: #9a580c;
+$warning-750: #7d470a;
+$warning-800: #603708;
+$warning-850: #432605;
+$warning-900: #271603;
+
+$danger-100: #fef0f1;
+$danger-150: #fdd7d8;
+$danger-200: #fbbdbf;
+$danger-250: #faa3a6;
+$danger-300: #f8898d;
+$danger-350: #f76f73;
+$danger-400: #f5555a;
+$danger-450: #f43b41;
+$danger-500: #f22128;
+$danger-550: #eb0e15;
+$danger-600: #d20c13;
+$danger-650: #b90b11;
+$danger-700: #9f090e;
+$danger-750: #86080c;
+$danger-800: #6d060a;
+$danger-850: #540508;
+$danger-900: #3b0305;
+
+$success-100: #eefdf3;
+$success-150: #d3f9e0;
+$success-200: #b8f5cd;
+$success-250: #9df2b9;
+$success-300: #82eea6;
+$success-350: #67ea93;
+$success-400: #4ce77f;
+$success-450: #31e36c;
+$success-500: #1dd75b;
+$success-550: #1ac052;
+$success-600: #17a948;
+$success-650: #14923e;
+$success-700: #117b34;
+$success-750: #0e642a;
+$success-800: #0a4d20;
+$success-850: #073517;
+$success-900: #041e0d;
+
+$color3-100: #f1f4fd;
+$color3-150: #dbe3fa;
+$color3-200: #c5d1f7;
+$color3-250: #aec0f4;
+$color3-300: #98aef1;
+$color3-350: #819cee;
+$color3-400: #6b8beb;
+$color3-450: #5479e8;
+$color3-500: #4069e5;
+$color3-550: #2655e1;
+$color3-600: #1c49d0;
+$color3-650: #1941b8;
+$color3-700: #1638a0;
+$color3-750: #133088;
+$color3-800: #0f2770;
+$color3-850: #0c1f58;
+$color3-900: #091640;
+
+$color4-100: #fef6f1;
+$color4-150: #fce7d8;
+$color4-200: #f9d8c0;
+$color4-250: #f7c8a7;
+$color4-300: #f5b98e;
+$color4-350: #f3aa76;
+$color4-400: #f19b5d;
+$color4-450: #ef8b44;
+$color4-500: #ed7d2d;
+$color4-550: #e76c14;
+$color4-600: #cc5f12;
+$color4-650: #b1530f;
+$color4-700: #96460d;
+$color4-750: #7b390b;
+$color4-800: #602d08;
+$color4-850: #452006;
+$color4-900: #2a1304;
+
+$color5-100: #fdf2f2;
+$color5-150: #f9dfdf;
+$color5-200: #f5cbcb;
+$color5-250: #f2b8b8;
+$color5-300: #eea4a4;
+$color5-350: #eb9191;
+$color5-400: #e77e7e;
+$color5-450: #e46a6a;
+$color5-500: #e05858;
+$color5-550: #db3d3d;
+$color5-600: #d32727;
+$color5-650: #b82222;
+$color5-700: #9e1d1d;
+$color5-750: #841818;
+$color5-800: #6a1313;
+$color5-850: #500f0f;
+$color5-900: #350a0a;
+
+// shadow
+$shadow-xs: 0px 0px 1px rgba(23, 26, 31, 0.07),
+  0px 0px 2px rgba(23, 26, 31, 0.12);
+$shadow-s: 0px 2px 5px rgba(23, 26, 31, 0.09),
+  0px 0px 2px rgba(23, 26, 31, 0.12);
+$shadow-m: 0px 4px 9px rgba(23, 26, 31, 0.11),
+  0px 0px 2px rgba(23, 26, 31, 0.12);
+$shadow-l: 0px 8px 17px rgba(23, 26, 31, 0.15),
+  0px 0px 2px rgba(23, 26, 31, 0.12);
+$shadow-xl: 0px 17px 35px rgba(23, 26, 31, 0.24),
+  0px 0px 2px rgba(23, 26, 31, 0.12);
+
+// borderRadius
+$radius-xs: 0.125rem;
+$radius-s: 0.1875rem;
+$radius-m: 0.25rem;
+$radius-l: 0.375rem;
+$radius-xl: 0.5rem;
+$radius-100: 100%;

src/styles/components.scss

 @use "components/Header/Header.scss";
 @use "components/Newspaper/Newspaper.scss";
 @use "components/Loading/Loading.scss";
+@use "components/WrapperContainer/WrapperContainer.scss";