Merge pull request brenoxav#40 from brenoxav/add-global-styles

Add global styles
StarSheriff2 · Dec 15, 2021 · ba6a0a2 · ba6a0a2
2 parents 0260357 + 067c6f6
commit ba6a0a2
Show file tree

Hide file tree

Showing 49 changed files with 773 additions and 897 deletions.
diff --git a/src/__tests__/removeClassPageIntegration.test.js b/src/__tests__/removeClassPageIntegration.test.js
@@ -38,9 +38,10 @@ describe('Remove Class Page', () => {
     const classTitle = queryByText('Singing');
     expect(classTitle).toBeInTheDocument();
     const removeButtons = getAllByTestId('removeBtn');
+    expect(removeButtons).toHaveLength(2);
 
     fireEvent.click(removeButtons[1]);
-    await waitFor(() => expect(classTitle).not.toBeInTheDocument());
-    expect(getAllByTestId('classItem')).toHaveLength(1);
+    await waitFor(() => expect(getAllByTestId('classItem')).toHaveLength(1));
+    expect(classTitle).not.toBeInTheDocument();
   });
 });
diff --git a/src/__tests__/snapTests/__snapshots__/addClassPage.snapshot.test.js.snap b/src/__tests__/snapTests/__snapshots__/addClassPage.snapshot.test.js.snap
@@ -1,117 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AddClassPage Renders the page 1`] = `
-<div
-  className="add-class-container"
->
-  <div
-    className="main-container"
-  >
-    <h2
-      className="heading"
-    >
-      Add Class
-    </h2>
-    <form
-      className="add-class-form"
-      data-testid="add-class-form"
-      onSubmit={[Function]}
-    >
-      <div
-        className="inputWrapper"
-      >
-        <label
-          htmlFor="title"
-        >
-          <input
-            className="add-class-title"
-            id="title"
-            name="course[title]"
-            onChange={[Function]}
-            placeholder="Title"
-            type="text"
-            value=""
-          />
-        </label>
-      </div>
-      <div
-        className="inputWrapper"
-      >
-        <label
-          htmlFor="description"
-        >
-          <input
-            className="class-description"
-            id="description"
-            name="course[description]"
-            onChange={[Function]}
-            placeholder="Description"
-            type="text"
-            value=""
-          />
-        </label>
-      </div>
-      <div
-        className="inputWrapper"
-      >
-        <label
-          htmlFor="duration"
-        >
-          <input
-            className="class-duration"
-            id="duration"
-            name="course[duration]"
-            onChange={[Function]}
-            placeholder="Duration"
-            type="number"
-            value=""
-          />
-        </label>
-      </div>
-      <div
-        className="inputWrapper"
-      >
-        <label
-          htmlFor="instructor"
-        >
-          <input
-            className="class-instructor"
-            id="instructor"
-            name="course[instructor]"
-            onChange={[Function]}
-            placeholder="Instructor"
-            type="text"
-            value=""
-          />
-        </label>
-      </div>
-      <div
-        className="upload-box inputWrapper"
-      >
-        <span
-          className="instruction"
-        >
-          Upload Instructor Image
-        </span>
-        <input
-          accept="image/png, image/jpeg"
-          className="instructor-image"
-          data-testid="imageInput"
-          id="image"
-          name="course[image]"
-          onChange={[Function]}
-          placeholder="Add image"
-          type="file"
-        />
-      </div>
-      <div>
-        <input
-          className="class-submit"
-          type="submit"
-          value="Add"
-        />
-      </div>
-    </form>
-  </div>
-</div>
-`;
+exports[`AddClassPage Renders the page 1`] = `null`;
diff --git a/src/__tests__/snapTests/__snapshots__/removeClassPage.snapshot.test.js.snap b/src/__tests__/snapTests/__snapshots__/removeClassPage.snapshot.test.js.snap
@@ -1,37 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RemoveClassPage Renders the page 1`] = `
-<div
-  className="remove-class-container"
->
-  <div
-    className="heading"
-  >
-    Remove Class
-  </div>
-  <table
-    className="reservations-table"
-  >
-    <thead>
-      <tr>
-        <th>
-          Title
-        </th>
-        <th>
-          Description
-        </th>
-        <th>
-          Instructor
-        </th>
-        <th>
-          Duration
-        </th>
-        <th>
-          Action
-        </th>
-      </tr>
-    </thead>
-    <tbody />
-  </table>
-</div>
-`;
+exports[`RemoveClassPage Renders the page 1`] = `null`;
diff --git a/src/__tests__/snapTests/__snapshots__/reservationsPage.snapshot.test.js.snap b/src/__tests__/snapTests/__snapshots__/reservationsPage.snapshot.test.js.snap
@@ -2,12 +2,15 @@
 
 exports[`ReservationsPage Renders the page 1`] = `
 <div
-  className="mainContainer"
+  className="private-page-container"
 >
-  <h1
+  <h2
     className="heading"
   >
     My Reservations
-  </h1>
+  </h2>
+  <div
+    className="reservationsGridContainer"
+  />
 </div>
 `;
diff --git a/src/__tests__/snapTests/__snapshots__/signInPage.snapshot.test.js.snap b/src/__tests__/snapTests/__snapshots__/signInPage.snapshot.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`SignIn Page Renders the page 1`] = `
 <div
-  className="mainContainer"
+  className="page-container"
 >
   <div
     className="innerContainer"
@@ -17,7 +17,6 @@ exports[`SignIn Page Renders the page 1`] = `
       onSubmit={[Function]}
     >
       <input
-        className="formInput"
         name="username"
         onChange={[Function]}
         placeholder="Please enter your username"
@@ -26,7 +25,7 @@ exports[`SignIn Page Renders the page 1`] = `
         value=""
       />
       <input
-        className="formSubmit"
+        className="button-white"
         type="submit"
         value="Sign in"
       />

diff --git a/src/auth/sessionSlice.js b/src/auth/sessionSlice.js
@@ -56,7 +56,11 @@ export const loginStatus = createAsyncThunk(
 export const sessionSlice = createSlice({
   name: 'session',
   initialState,
-  reducers: {},
+  reducers: {
+    resetError(state) {
+      state.error = null;
+    },
+  },
   extraReducers: (builder) => {
     builder
       .addCase(signUpUser.pending, (state) => {
@@ -135,6 +139,8 @@ export const sessionSlice = createSlice({
   },
 });
 
+export const { resetError } = sessionSlice.actions;
+
 export const currentUser = (state) => state.users.user;
 export const loggedInStatus = (state) => state.users.logged_in;
 export const status = (state) => state.users.status;

diff --git a/src/common/Carousel/Carousel.js b/src/common/Carousel/Carousel.js
@@ -4,24 +4,30 @@ import { NavLink } from 'react-router-dom';
 import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react/swiper-react';
 import SocialIcons from './socialIcons';
-import styles from './Carousel.module.css';
+import styles from './Carousel.module.scss';
 import 'swiper/swiper.scss';
 import 'swiper/modules/navigation/navigation.scss';
 import 'swiper/modules/pagination/pagination.scss';
-import './Swiper.css';
+import './Swiper.scss';
 
 SwiperCore.use([Navigation, Pagination, Autoplay]);
 
 export default function Carousel({ classes }) {
   const classesList = classes.map((c) => (
-    <SwiperSlide key={c.id} className={(classes.length >= 3) ? `${styles.swiperSlide}` : `${styles.swiperSlide} ${styles.swiperSlideSm}`}>
+    <SwiperSlide
+      key={c.id}
+      className={(classes.length >= 3) ? `${styles.swiperSlide}` : `${styles.swiperSlide} ${styles.swiperSlideSm}`}
+    >
       <NavLink
         to={`/class/${c.id}`}
         className={styles.swiperCard}
+        style={{
+          background: `linear-gradient(to top, rgba(0, 0, 0, 1) 13%, transparent 40%),
+          linear-gradient(to right bottom, rgba(255, 180, 0, 0.7) 5%, transparent 60%),
+          linear-gradient(to right bottom, rgba(151, 191, 15, 1) 5%, transparent 10%),
+          url(${c.course_image_url}) center center/cover no-repeat content-box, rgb(153, 140, 140)`,
+        }}
       >
-        <div className={styles.swiperImgContainer}>
-          <img className={styles.swiperImg} src={c.course_image_url} alt="course instructor" />
-        </div>
         <div className={styles.textContainer}>
           <h3 className={styles.title}>{c.title}</h3>
           <p className={styles.instructor}>{c.instructor}</p>

diff --git a/src/common/Carousel/Carousel.module.css → src/common/Carousel/Carousel.module.scss b/src/common/Carousel/Carousel.module.css → src/common/Carousel/Carousel.module.scss
@@ -1,14 +1,18 @@
+@import '../../styles/abstracts/variables';
+
 .swiper {
   width: 100%;
   min-height: 400px;
 }
 
 .swiperSlide {
-  background-color: #97bf0f;
-  color: #fff;
+  height: 0;
+  padding-top: 45%;
+  position: relative;
+  color: $white;
   text-align: center;
   font-size: 18px;
-  min-width: 300px;
+  min-width: 200px;
   border-radius: 15px;
   display: -webkit-box;
   display: -webkit-flex;
@@ -28,15 +32,17 @@
 }
 
 .swiperCard {
-  padding: 1rem 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  cursor: pointer;
+  border-radius: 15px;
+  padding-bottom: 5.4rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
 
 .swiperImgContainer {
-  width: 85%;
+  width: 100%;
 }
 
 .swiperImg {
@@ -46,17 +52,24 @@
 }
 
 .textContainer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   display: flex;
   flex-direction: column;
   padding: 1rem;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
 .title {
   text-transform: uppercase;
+  color: $white;
 }
 
 .instructor {
   padding: 0.5rem;
+  color: $white;
 }
diff --git a/src/common/Carousel/Swiper.css → src/common/Carousel/Swiper.scss b/src/common/Carousel/Swiper.css → src/common/Carousel/Swiper.scss
@@ -1,4 +1,6 @@
+@import '../../styles/abstracts/variables';
+
 #swiper-container .swiper-button-next,
 #swiper-container .swiper-button-prev {
-  color: grey;
+  color: $dark-green-full;
 }
diff --git a/src/common/Carousel/socialIcons.css b/src/common/Carousel/socialIcons.css
diff --git a/src/common/Carousel/socialIcons.js b/src/common/Carousel/socialIcons.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import './socialIcons.css';
+import './socialIcons.scss';
 
 const SocialIcons = () => (
   <>