Merge pull request #1 from freitasgouvea/develop

Fix: fix sidebar styles and update footer
freitasgouvea · Jul 21, 2023 · 2349dde · 2349dde
2 parents c0ca9b7 + f8e156a
commit 2349dde
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 38 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -242,3 +242,18 @@ main {
   color: var(--font-color);
   transform: rotateY(180deg);
 }
+
+.sidebar-item,
+.sidebar-item-active {
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+  line-height: 2;
+  cursor: pointer;
+}
+
+.sidebar-item-active {
+  @media (min-width: 900px) {
+    border-right: 4px solid var(--border-color-gold);
+    font-weight: 600;
+  }
+}
diff --git a/components/BookListHeader.tsx b/components/BookListHeader.tsx
@@ -38,16 +38,16 @@ export const BookListHeader = () => {
     return date ? date : "Latest List";
   };
 
-  const calendarButton = <button className={styles.CalendarButton}>{renderSelectedDate()} ⌄</button>;
+  const calendarButton = <button className={styles.calendarButton}>{renderSelectedDate()} ⌄</button>;
 
   return (
     <>
-      <div className={styles.BookListHeader}>
+      <div className={styles.bookListHeader}>
         <div>
-          <h4 className={styles.BookListHeaderTitleDesktop}>Featured Books</h4>
-          <h2 className={styles.BookListHeaderTitleDesktop}>{title}</h2>
+          <h4 className={styles.bookListHeaderTitleDesktop}>Featured Books</h4>
+          <h2 className={styles.bookListHeaderTitleDesktop}>{title}</h2>
         </div>
-        <div className={styles.CalendarButtonContainer}>
+        <div className={styles.calendarButtonContainer}>
           <DatePicker
             todayButton="Today"
             minDate={new Date("2010-01-01")}

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -3,7 +3,10 @@ import styles from "../styles/Footer.module.css";
 export const Footer = () => {
   return (
     <footer className={styles.pageFooter}>
-      <p>Created by Flavio Gouvea</p>
+      <a href="https://developer.nytimes.com" target="blank" data-testid="nyt-link">
+        <img src="https://developer.nytimes.com/files/poweredby_nytimes_200c.png?v=1583354208354" />
+      </a>
+      <br />
     </footer>
   );
 };
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -2,7 +2,6 @@
 
 import { useContext } from 'react';
 import classnames from 'classnames';
-import styles from '../styles/Sidebar.module.css';
 import { NavigationContext } from '../app/providers';
 import { NavigationContextType } from '../types/context';
 import { bestSellersLists } from '../config/lists';
@@ -24,8 +23,8 @@ export const Sidebar = () => {
           <li
             key={key}
             className={classnames({
-              [styles.SidebarItem]: navigation !== key,
-              [styles.SidebarItemActive]: navigation === key,
+              ["sidebar-item"]: navigation !== key,
+              ["sidebar-item-active"]: navigation === key,
             })}
             onClick={() => handleListClick(key)}
           >
@@ -40,8 +39,8 @@ export const Sidebar = () => {
           <li
             key={key}
             className={classnames({
-              [styles.SidebarItem]: navigation !== key,
-              [styles.SidebarItemActive]: navigation === key,
+              ["sidebar-item"]: navigation !== key,
+              ["sidebar-item-active"]: navigation === key,
             })}
             onClick={() => handleListClick(key)}
           >

diff --git a/styles/BookCard.module.css b/styles/BookCard.module.css
@@ -62,7 +62,6 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  -webkit-backface-visibility: hidden; /* Safari */
   backface-visibility: hidden;
   justify-content: center;
 }

diff --git a/styles/BookListHeader.module.css b/styles/BookListHeader.module.css
@@ -1,4 +1,4 @@
-.BookListHeader {
+.bookListHeader {
   display: grid;
   grid-template-columns: 4fr 1fr;
   margin-left: 0.5rem;
@@ -9,20 +9,20 @@
   }
 }
 
-.BookListHeaderTitleDesktop {
+.bookListHeaderTitleDesktop {
   margin-top: 0.1rem;
   font-weight: 500;
   @media (max-width: 900px) {
     display: none;
   }
 }
 
-.CalendarButtonContainer {
+.calendarButtonContainer {
   display: flex;
   justify-content: center;
 }
 
-.CalendarButton {
+.calendarButton {
   margin-top: 0.8rem;
   width: 200px;
   margin-left: auto;

diff --git a/styles/Sidebar.module.css b/styles/Sidebar.module.css
diff --git a/tests/components/Footer.test.tsx b/tests/components/Footer.test.tsx
@@ -5,8 +5,8 @@ describe("Footer", () => {
   test("renders a footer", () => {
     render(<Footer />);
 
-    const authorElement = screen.getByText(/Created by Flavio/i);
+    const link = screen.getByTestId("nyt-link")
 
-    expect(authorElement).toBeInTheDocument();
+    expect(link).toBeInTheDocument();
   });
 });
diff --git a/tests/components/Sidebar.test.tsx b/tests/components/Sidebar.test.tsx
@@ -36,7 +36,7 @@ describe("Sidebar", () => {
     render(<Sidebar />);
     const activeListItem = screen.getByText(bestSellersLists.CombinedPrintAndEBookFiction.name);
 
-    expect(activeListItem).toHaveClass("SidebarItemActive");
+    expect(activeListItem).toHaveClass("sidebar-item-active");
   });
 
   test("applies the inactive style to other weekly navigation items", () => {
@@ -47,7 +47,7 @@ describe("Sidebar", () => {
     render(<Sidebar />);
     const inactiveListItem = screen.getByText(bestSellersLists.CombinedPrintAndEBookFiction.name);
 
-    expect(inactiveListItem).toHaveClass("SidebarItem");
+    expect(inactiveListItem).toHaveClass("sidebar-item");
   });
 
   test("applies the inactive style to other monthly navigation items", () => {
@@ -58,7 +58,7 @@ describe("Sidebar", () => {
     render(<Sidebar />);
     const inactiveListItem = screen.getByText(bestSellersLists.MassMarket.name);
 
-    expect(inactiveListItem).toHaveClass("SidebarItem");
+    expect(inactiveListItem).toHaveClass("sidebar-item");
   });
 
   test("update navigation context and scrolls to the top when a weekly list item is clicked", () => {