Merge pull request #168 from Front-znad-zatoki/frontend/#165-user-das…

…hboard-styling Frontend/#165 user dashboard styling
Front-znad-zatoki · Apr 13, 2021 · 16b9805 · 16b9805
2 parents 94ba9b0 + 8ba9395
commit 16b9805
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 12 deletions.
diff --git a/client/src/components/Footer/index.js b/client/src/components/Footer/index.js
@@ -4,7 +4,6 @@ import { CinemaContext } from '../../context/Cinema';
 
 export default function Footer() {
   const { currentCinema } = useContext(CinemaContext);
-  console.log(currentCinema);
   return (
     <footer className="footer">
       <ul className="footer__list">

diff --git a/client/src/components/Loader/index.js b/client/src/components/Loader/index.js
@@ -1,14 +1,23 @@
 import Loader from 'react-loader-spinner';
+import { useContext } from 'react';
+import AppTheme from '../../context/Theme/themeColors';
+import { ThemeContext } from '../../context/Theme';
 
 function CustomLoader() {
+  const theme = useContext(ThemeContext)[0];
+  const currentTheme = AppTheme[theme];
   return (
     <Loader
       type="ThreeDots"
       color="#6e093a"
       height={100}
       width={100}
       //   timeout={2000}
-      style={{ textAlign: 'center' }}
+      style={{
+        backgroundColor: `${currentTheme.backgroundColor}`,
+        color: `${currentTheme.textColor}`,
+        textAlign: 'center',
+      }}
     />
   );
 }

diff --git a/client/src/domain/MovieInfoBar/style.scss b/client/src/domain/MovieInfoBar/style.scss
@@ -19,6 +19,7 @@
     max-width: 900px;
     font-size: 1.5rem;
     padding-left: 32px;
+    line-height: 1.5;
     &-title {
       font-size: 1.5rem;
     }

diff --git a/client/src/domain/MovieView/index.js b/client/src/domain/MovieView/index.js
@@ -30,12 +30,15 @@ function MovieView({ match }) {
       return;
     }
     setCurrentMovie(movie);
+    setLoading(false);
   }, []);
   useEffect(() => {
     setLoading(true);
     if (currentMovie) {
       getMovieScreeningsByMovieId(currentMovie._id, setScreenings, setLoading);
       getMovieBySlug(match.params.movieSlug, setCurrentMovie, setLoading);
+    } else {
+      setLoading(false);
     }
   }, [currentMovie, movies]);
   if (loading)

diff --git a/client/src/domain/Orders/OrderDetails/index.js b/client/src/domain/Orders/OrderDetails/index.js
@@ -21,7 +21,7 @@ function OrderDetails({ details }) {
         data={tickets[0].screening.cinemaHallId.name}
       />
       <h3 className="dashboard__header">TICKETS:</h3>
-      <ul>
+      <ul className="profile__ticket__list">
         {tickets.map((ticket) => {
           const seatNr = convertRowsAndColumnsToAlphanumeric(
             ticket.seat.row,

diff --git a/client/src/domain/Orders/OrderItem/index.js b/client/src/domain/Orders/OrderItem/index.js
@@ -35,7 +35,7 @@ function OrderItem({ id, callback }) {
   return (
     <li className="profile__list-item">
       <p>
-        ORDER: <span className="order__list-item--bold">{id}: </span>
+        ORDER: <span className="profile__list-item--bold">{id}: </span>
       </p>
       <button className="button--submit" onClick={handleDelete}>
         Delete order

diff --git a/client/src/domain/User/style.scss b/client/src/domain/User/style.scss
@@ -6,13 +6,15 @@
     align-items: center;
     padding: 16px;
     list-style-type: none;
+    width: 75%;
     &-details {
-      display: block;
+      display: flex;
+      flex-direction: column;
       margin: 8px;
+      width: 100%;
       & .ticket {
-        width: 100%;
+        width: unset;
         margin: 0;
-        margin-bottom: 16px;
       }
       &__item {
         padding: 8px 0;
@@ -22,33 +24,39 @@
     &-item {
       background-color: #fff;
       display: flex;
-      flex-direction: column;
+      flex-wrap: wrap;
+      justify-content: space-between;
       color: #000;
       padding: 8px;
       margin: 8px;
       border-radius: 4px;
-      width: 50vw;
+      width: 75%;
+      box-shadow: 1px 1px 3px 0px;
+      &--bold {
+        font-size: 20px;
+      }
       & p {
         line-height: 1.5;
         text-align: left;
         font-weight: 700;
         padding: 0 8px;
         text-transform: uppercase;
-        font-size: 20px;
       }
       & .button--submit {
         margin: 8px;
-        width: calc(100% - 16px);
+        width: 200px;
+        display: block;
       }
       & label {
         font-weight: 700;
-        flex-basis: 100%;
+
         display: block;
         margin: 8px;
       }
       & input {
         width: 100%;
         background-color: #f1f1f1;
+        padding-left: 8px;
       }
 
       &-header {
@@ -59,6 +67,15 @@
   &__form {
     display: flex;
     align-items: center;
+    flex-basis: 100%;
+    justify-content: space-between;
+  }
+  &__ticket {
+    &__list {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      grid-gap: 1rem;
+    }
   }
   font-family: $font-primary;
   font-size: $font-size-secondary;