From e9e43070c67e339f014c0e8d99bb8c312817ba28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Kolstad=20Sk=C3=A5re?= Date: Sat, 20 Nov 2021 20:06:25 +0100 Subject: [PATCH 1/9] =?UTF-8?q?#52=20Lagt=20til=20alt-tekst=20p=C3=A5=20bi?= =?UTF-8?q?lder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/components/MovieCard/MovieCard.tsx | 2 +- Frontend/src/components/MovieDetail/MovieDetail.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Frontend/src/components/MovieCard/MovieCard.tsx b/Frontend/src/components/MovieCard/MovieCard.tsx index 6ccc79f..58b19f7 100644 --- a/Frontend/src/components/MovieCard/MovieCard.tsx +++ b/Frontend/src/components/MovieCard/MovieCard.tsx @@ -12,7 +12,7 @@ const MovieCard = (dataProps: DBMovie) => {
- setImgSrc(poster)}/> + setImgSrc(poster)} alt={`Filmplakat av ${dataProps.title}. Illustrasjon.`}/>
diff --git a/Frontend/src/components/MovieDetail/MovieDetail.tsx b/Frontend/src/components/MovieDetail/MovieDetail.tsx index 7572b86..374ceee 100644 --- a/Frontend/src/components/MovieDetail/MovieDetail.tsx +++ b/Frontend/src/components/MovieDetail/MovieDetail.tsx @@ -83,7 +83,7 @@ const MovieDetail = () => {
- setImgSrc(poster)} alt={data1.title}/> + setImgSrc(poster)} alt={`Filmplakat av ${data1.title}. Illustrasjon.`}/> -- GitLab From 03ae65c5cb8f89d95ab627e0045ece3b40e32d63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Kolstad=20Sk=C3=A5re?= Date: Sat, 20 Nov 2021 20:25:34 +0100 Subject: [PATCH 2/9] =?UTF-8?q?#52=20=C3=98kt=20kontrast=20p=C3=A5=20tekst?= =?UTF-8?q?=20mot=20m=C3=B8rk=20bakgrunn?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/common/colors.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Frontend/src/common/colors.scss b/Frontend/src/common/colors.scss index 506ea89..1a09178 100644 --- a/Frontend/src/common/colors.scss +++ b/Frontend/src/common/colors.scss @@ -1,4 +1,4 @@ $primary-color: #0f171e; $secondary-color: #1a242f; $font-primary: #ffffff; -$font-secondary: #79b8f3; +$font-secondary: #8ec8ff; -- GitLab From c6037c0c3c9d11413274e52a5a59d8481a0d29d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Kolstad=20Sk=C3=A5re?= Date: Sat, 20 Nov 2021 20:53:51 +0100 Subject: [PATCH 3/9] #57 Flyttet inline CSS til egen fil --- .../CommentSection/CommentSection.scss | 12 ++++ .../CommentSection/CommentSection.tsx | 56 +++++++------------ 2 files changed, 33 insertions(+), 35 deletions(-) diff --git a/Frontend/src/components/CommentSection/CommentSection.scss b/Frontend/src/components/CommentSection/CommentSection.scss index e69de29..fe5c5bd 100644 --- a/Frontend/src/components/CommentSection/CommentSection.scss +++ b/Frontend/src/components/CommentSection/CommentSection.scss @@ -0,0 +1,12 @@ +.comment-list{ + .comment-list { + width: 100%; + } + .MuiListItem-root{ + background-color: #1a242f; + + p { + color: #ffffff; + } + } +} \ No newline at end of file diff --git a/Frontend/src/components/CommentSection/CommentSection.tsx b/Frontend/src/components/CommentSection/CommentSection.tsx index 9b450b5..974c97b 100644 --- a/Frontend/src/components/CommentSection/CommentSection.tsx +++ b/Frontend/src/components/CommentSection/CommentSection.tsx @@ -8,6 +8,7 @@ import { useDispatch, useSelector } from 'react-redux'; import { getAllComments, setCommentsList } from '../../features/movies/movieSlice'; import { useMutation } from '@apollo/client'; import { ADD_REVIEW } from '../../GraphQL/Mutations'; +import './CommentSection.scss'; export type CommentProps = { @@ -126,37 +127,26 @@ const CommentSection = (imdbId:ParamType) => { return ( <>

Comments

- - - {CommentList.map((comment, index) => { - - return( - - <> - - - - - - {comment.comment} - - - } /> - - - - + + {CommentList.map((comment, index) => { + return( + <> + + + + + + {comment.comment} + + } + /> + + ) - - } )} + })} { > Send - - - - - + ); }; -- GitLab From 478272bb178c6bea3d92232ffc12dd268f490a25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Kolstad=20Sk=C3=A5re?= Date: Sat, 20 Nov 2021 21:08:34 +0100 Subject: [PATCH 4/9] =?UTF-8?q?#52=20=C3=98ke=20kontrast=20p=C3=A5=20input?= =?UTF-8?q?-felt.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CommentSection/CommentSection.scss | 13 +++++++ .../CommentSection/CommentSection.tsx | 37 +++---------------- 2 files changed, 18 insertions(+), 32 deletions(-) diff --git a/Frontend/src/components/CommentSection/CommentSection.scss b/Frontend/src/components/CommentSection/CommentSection.scss index fe5c5bd..339665b 100644 --- a/Frontend/src/components/CommentSection/CommentSection.scss +++ b/Frontend/src/components/CommentSection/CommentSection.scss @@ -1,3 +1,5 @@ +@import "../../common/colors.scss"; + .comment-list{ .comment-list { width: 100%; @@ -9,4 +11,15 @@ color: #ffffff; } } +} + +.comment-input { + fieldset { + border-color: $font-secondary; + } + .MuiOutlinedInput-root:hover { + fieldset { + border-color: #ffffff; + } + } } \ No newline at end of file diff --git a/Frontend/src/components/CommentSection/CommentSection.tsx b/Frontend/src/components/CommentSection/CommentSection.tsx index 974c97b..5c37e84 100644 --- a/Frontend/src/components/CommentSection/CommentSection.tsx +++ b/Frontend/src/components/CommentSection/CommentSection.tsx @@ -1,4 +1,4 @@ -import {Avatar, Button , Divider, List, ListItem, ListItemAvatar, ListItemText, styled, TextField, Typography } from '@mui/material'; +import {Avatar, Button , Divider, List, ListItem, ListItemAvatar, ListItemText, TextField } from '@mui/material'; import React, { useEffect, useState } from 'react' import SendIcon from '@material-ui/icons/Send'; import Box from '@mui/material/Box'; @@ -14,30 +14,7 @@ import './CommentSection.scss'; export type CommentProps = { id:string; comment: string; -} - -const CssTextField = styled(TextField)({ - '& label.Mui-focused': { - color: 'green', - }, - '& .MuiInput-underline:after': { - borderBottomColor: 'green', - }, - '& .MuiOutlinedInput-root': { - '& fieldset': { - borderColor: 'blue', - }, - '&:hover fieldset': { - borderColor: 'yellow', - }, - '&.Mui-focused fieldset': { - borderColor: 'green', - }, - }, - - }); - - +} const CommentSection = (imdbId:ParamType) => { @@ -156,20 +133,16 @@ const CommentSection = (imdbId:ParamType) => { noValidate autoComplete="off" > - - + />
-
+ setImgSrc(poster)} alt={`Filmplakat av ${data1.title}. Illustrasjon.`}/> -- GitLab From 150f18476271a428bd3f8b56b12471418fbbc9c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Kolstad=20Sk=C3=A5re?= Date: Sun, 21 Nov 2021 10:41:42 +0100 Subject: [PATCH 6/9] =?UTF-8?q?#52=20Fjernet=20ubrukt=20knapp,=20=C3=B8kt?= =?UTF-8?q?=20"Klikkeflate"=20p=C3=A5=20s=C3=B8k?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Frontend/src/components/Header/Header.scss | 5 +++++ Frontend/src/components/Header/Header.tsx | 18 +++++++++++++----- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/Frontend/src/components/Header/Header.scss b/Frontend/src/components/Header/Header.scss index 0d99b1e..731733c 100644 --- a/Frontend/src/components/Header/Header.scss +++ b/Frontend/src/components/Header/Header.scss @@ -53,4 +53,9 @@ justify-content: center; max-width: 500px; } +} + +.search-bar { + color: black !important; + background-color: #ffffff !important; } \ No newline at end of file diff --git a/Frontend/src/components/Header/Header.tsx b/Frontend/src/components/Header/Header.tsx index 855e78c..a435a57 100644 --- a/Frontend/src/components/Header/Header.tsx +++ b/Frontend/src/components/Header/Header.tsx @@ -9,6 +9,8 @@ import { setTitle, setGenre, setMovies, getOffset, setOffset } from '../../features/movies/movieSlice'; import movieService from "../../common/api/movieService"; +import { FormControl, InputAdornment, OutlinedInput } from '@mui/material'; +import SearchIcon from '@mui/icons-material/Search'; const Header = () => { @@ -42,11 +44,17 @@ const Header = () => {
Movie App
-
- {setSearch(e.target.value);handleSearch(e.target.value)}}/> - -
+ {setSearch(e.target.value);handleSearch(e.target.value)}} + startAdornment={ + + } + placeholder="Search movies or shows" + /> ); }; -- GitLab From b96c5e1cddf174d52c19c832f9dcd8d98c13f497 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Kolstad=20Sk=C3=A5re?= Date: Sun, 21 Nov 2021 14:36:53 +0100 Subject: [PATCH 7/9] #52 Lagt til sidetitler --- Frontend/src/components/Home/Home.tsx | 1 + Frontend/src/components/MovieDetail/MovieDetail.tsx | 3 +-- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Frontend/src/components/Home/Home.tsx b/Frontend/src/components/Home/Home.tsx index e4f8abd..795ebff 100644 --- a/Frontend/src/components/Home/Home.tsx +++ b/Frontend/src/components/Home/Home.tsx @@ -36,6 +36,7 @@ const Home = () => { //Fetch server data and pass it to redux store useEffect(() => { fetchMovies(offset); + document.title = "Movie app - Home"; },[]) return ( diff --git a/Frontend/src/components/MovieDetail/MovieDetail.tsx b/Frontend/src/components/MovieDetail/MovieDetail.tsx index d0468eb..3fc22f1 100644 --- a/Frontend/src/components/MovieDetail/MovieDetail.tsx +++ b/Frontend/src/components/MovieDetail/MovieDetail.tsx @@ -17,8 +17,6 @@ export interface ParamType { const MovieDetail = () => { - - const dispatch = useDispatch(); //This will perform call to perform the query @@ -38,6 +36,7 @@ const MovieDetail = () => { //Get details from redux store - with useSelector const data1:any = useSelector(getSelectedMovie) useEffect(() => { + document.title = `Movie app - Movie details`; fetchMovieDetail(); return () => { dispatch(setSelectedMovie([])) -- GitLab From 131b837181686e8607d827b9ce747422e1fe3849 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Kolstad=20Sk=C3=A5re?= Date: Sun, 21 Nov 2021 14:50:00 +0100 Subject: [PATCH 8/9] #52 Lagt til "tab" navigasjon --- .../src/components/MovieCard/MovieCard.tsx | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/Frontend/src/components/MovieCard/MovieCard.tsx b/Frontend/src/components/MovieCard/MovieCard.tsx index 58b19f7..39bc4cc 100644 --- a/Frontend/src/components/MovieCard/MovieCard.tsx +++ b/Frontend/src/components/MovieCard/MovieCard.tsx @@ -8,22 +8,22 @@ const MovieCard = (dataProps: DBMovie) => { const [imgSrc, setImgSrc] = useState(dataProps.posterurl) return ( -
- -
-
- setImgSrc(poster)} alt={`Filmplakat av ${dataProps.title}. Illustrasjon.`}/> -
-
-
-

{dataProps.title}

-

{dataProps.title}

-

{dataProps.year}

-
+ +
+
+
+ setImgSrc(poster)} alt={`Filmplakat av ${dataProps.title}. Illustrasjon.`}/> +
+
+
+

{dataProps.title}

+

{dataProps.title}

+

{dataProps.year}

+
+
- -
+ ); }; -- GitLab From 5f22d2d89768342d9423f6bf0aeb4af702689ebb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sigurd=20Kolstad=20Sk=C3=A5re?= Date: Sun, 21 Nov 2021 15:12:01 +0100 Subject: [PATCH 9/9] #52 Oppdatere tester --- Frontend/src/__snapshots__/App.test.tsx.snap | 43 ++++++++++++++++--- .../CommentSection/CommentSection.tsx | 6 +-- .../src/components/Header/Header.test.tsx | 11 ----- Frontend/src/components/Home/Home.test.tsx | 10 +---- 4 files changed, 40 insertions(+), 30 deletions(-) diff --git a/Frontend/src/__snapshots__/App.test.tsx.snap b/Frontend/src/__snapshots__/App.test.tsx.snap index c83309d..d409ae2 100644 --- a/Frontend/src/__snapshots__/App.test.tsx.snap +++ b/Frontend/src/__snapshots__/App.test.tsx.snap @@ -20,21 +20,50 @@ exports[`App component renders page correctly like snapshot 1`] = `
+
+ + ​ + + +
- + + + ​ + + +
{ {CommentList.map((comment, index) => { return( - <> @@ -120,8 +119,7 @@ const CommentSection = (imdbId:ParamType) => { } /> - - + ) })} @@ -134,8 +132,10 @@ const CommentSection = (imdbId:ParamType) => { autoComplete="off" > { expect(inputElement).toBeInTheDocument(); }); - - - test("Should have empty input after button press", async () => { - render(); - const inputElement = screen.getByPlaceholderText(/Search movies or shows/i); - const buttonElement = screen.getByRole("button"); - fireEvent.change(inputElement, {target: { value: "Pokemon" } } ); - fireEvent.click(buttonElement); - expect(inputElement.textContent).toBe(""); -}); - }) diff --git a/Frontend/src/components/Home/Home.test.tsx b/Frontend/src/components/Home/Home.test.tsx index 9ef7803..294df73 100644 --- a/Frontend/src/components/Home/Home.test.tsx +++ b/Frontend/src/components/Home/Home.test.tsx @@ -18,17 +18,9 @@ const MockHome = () => { describe("Home Component tests", () => { - test('renders component to screen', () => { render(); - const comp = screen.getByText("Filmer"); + const comp = screen.getByText("Fant ingen Filmer"); expect(comp).toBeInTheDocument(); }); - - - - - - - }); -- GitLab