Merge pull request #55 from 001elijah/dashboard

Dashboard

src/components/BoardModalWindow/BoardModalWindow.module.scss

@@ -117,6 +117,7 @@
 
   color: #161616;
 
+  margin-top: 40px;
   padding: 10px;
 
   &.colorful {

src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.jsx

@@ -8,16 +8,16 @@ import {
 import { getListOfThumbnails } from '../../redux/Background/backgroundOperations';
 import { selectorTheme } from '../../redux/Auth/authSelectors';
 import { Loader } from 'components/Loader/Loader';
-
 import s from './BoxRadioBackgroundGroup.module.scss';
+import { currentBoard } from 'redux/Boards/boardsSelectors';
 
 export const BoxRadioBackgroundGroup = ({ valueChange }) => {
   const thumbnails = useSelector(selectBackgroundThumbnails);
   const loading = useSelector(selectBackgroundLoading);
   const theme = useSelector(selectorTheme);
-
   const dispatch = useDispatch();
-  const [background, setBackground] = useState(null);
+  const board = useSelector(currentBoard);
+  const [background, setBackground] = useState(board.background);
 
   const handleChange = e => {
     const selectedBackground = e.target.value;
@@ -32,7 +32,6 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
   useEffect(() => {
     setBackground('default');
   }, []);
-
   return (
     <div className={s.backgroundGroupWrapper}>
       <h1 className={`${s.label} ${s[theme]}`}>Background</h1>
@@ -46,8 +45,9 @@ export const BoxRadioBackgroundGroup = ({ valueChange }) => {
           <input
             className={`${s.radioInput} ${s[theme]}`}
             type="radio"
+            onClick={handleChange}
             onChange={handleChange}
-            value="null"
+            value="dark"
             name="background"
             id="radio-default"
             checked={background === 'default'}

src/components/BoxRadioBackgroundGroup/BoxRadioBackgroundGroup.module.scss

@@ -3,7 +3,7 @@
 
 .backgroundGroupWrapper {
   display: block;
-  margin-bottom: 40px;
+  margin-bottom: 14px;
 }
 
 .label {
@@ -24,28 +24,24 @@
   }
 }
 
-.backgroundGroupWrapper {
-  display: block;
-  margin-bottom: 40px;
-}
-
 .radioWrapper {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  margin-top: 4px;
+  // margin-top: 4px;
+  gap: 4px;
   &:not(:last-child) {
     margin-right: 4px;
   }
   @include mobile {
-    width: 280px;
+    width: 252px;
   }
 }
 
 .radioContainer {
   position: relative;
-  margin-right: 4px;
-  margin-bottom: 4px;
+  // margin-right: 4px;
+  // margin-bottom: 4px;
   background: inherit;
   width: 28px;
   height: 28px;

src/components/HeaderDashBoard/HeaderDashBoard.jsx

@@ -1,6 +1,6 @@
 import s from './HeaderDashBoard.module.scss';
 import svg from '../../assets/icons/sprite.svg';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { ModalFilter } from '../ModalFilter/ModalFilter';
 import { selectorTheme } from 'redux/Auth/authSelectors';
 import { useDispatch, useSelector } from 'react-redux';
@@ -10,29 +10,35 @@ import { BackdropModal } from '../BackdropMain/BackdropMain';
 import { addFilters } from '../../redux/Filter/filterOperation';
 import { updateBoard, getBoardById } from '../../redux/Boards/boardsOperations';
 import { currentBoard } from '../../redux/Boards/boardsSelectors';
+import { Notify } from 'notiflix';
 
 export const HeaderDashBoard = ({ title }) => {
   const dispatch = useDispatch();
   const theme = useSelector(selectorTheme);
   const board = useSelector(currentBoard);
   const [showModalWindow, setShowModalWindow] = useState(false);
   const handleModalWindowOpen = () => {
-    if (!board) return;
+    if (!board) {
+      Notify.failure('You need to create or select a board');
+      return;
+    };
     setShowModalWindow(true);
   };
   const handleModalWindowClose = () => {
     setShowModalWindow(false);
-    change();
+    dispatch(getBoardById(board._id));
   };
 
   const [color, setColor] = useState('');
   const [icon, setIcon] = useState('');
 
-  const change = async () => {
-    await dispatch(addFilters(color));
-    await dispatch(updateBoard({ back: icon, board }));
-    await dispatch(getBoardById(board._id));
-  };
+  useEffect(() => {
+    showModalWindow && dispatch(addFilters(color));
+  }, [color]);
+  useEffect(() => {
+    showModalWindow && icon && dispatch(updateBoard({ back: icon, board }));
+  }, [icon]);
+
   return (
     <>
       <div className={clsx(s.HeaderDash, s[theme])}>

src/components/MainBoard/MainBoard.jsx

@@ -1,4 +1,4 @@
-import { Wrapper, ColumnsList, ContentBoard } from './MainBoard.styled';
+import { Wrapper, ColumnsList, ContentBoard,  } from './MainBoard.styled';
 import PropTypes from 'prop-types';
 import { HeaderDashBoard } from '../HeaderDashBoard/HeaderDashBoard';
 import { AddButton } from '../ButtonAddColumn/ButtonAddColumn';
@@ -30,7 +30,7 @@ export const MainBoard = () => {
       curTheme = '#1F1F1F';
       break;
     case 'light':
-      curTheme = '##F6F6F7';
+      curTheme = '#F6F6F7';
       break;
     case 'colorful':
       curTheme = '#ECEDFD';
@@ -43,7 +43,9 @@ export const MainBoard = () => {
   if (!board) return null;
   return (
     <>
-      <Wrapper imgurl={board.background} colorbg={curTheme}>
+      {/* <Wrapper isExpanded={typeof(board.background)==='object'? true:false} imgurl={board.background} colorbg={curTheme}> */}
+      <Wrapper isExpanded={(!board.background)? false:true} imgurl={board.background} colorbg={curTheme}>
+
         <HeaderDashBoard title={board.title} />
         <ContentBoard>
           <ColumnsList>

src/components/MainBoard/MainBoard.styled.jsx

@@ -1,13 +1,76 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div`
+
+export const Wrapper = styled.div
+  (props => {
+    const expandedStyles =
+      `
+      padding-left: 20px;
+      padding-right: 20px;
+      height: calc(100vh - 61px);
+      height: calc(100vh - 61px);
+      background-color: ${props.colorbg};
+      `;
+    const notExpandedStyles =
+      `
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      height: calc(100vh - 61px);
+
+      @media screen and (min-width: 375px) {
+        padding-left: 0px;
+        background-image: url(${props.imgurl?.mobileUrl_1x});
+      }
+    
+      @media screen and (min-width: 375px) and (-webkit-min-device-pixel-ratio: 2),
+        (min-resolution: 192dpi) {
+        background-image: url(${props.imgurl?.mobileUrl_2x});
+      }
+    
+      @media screen and (min-width: 768px) {
+        padding-left: 32px;
+        padding-right: 32px;
+        height: calc(100vh - 68px);
+        background-image: url(${props.imgurl?.tabletUrl_1x});
+      }
+    
+      @media screen and (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
+        (min-resolution: 192dpi) {
+        background-image: url(${props.imgurl?.tabletUrl_2x});
+      }
+    
+      @media screen and (min-width: 1280px) {
+        width: calc(100vw - 260px);
+        height: calc(100% - 76px);
+        padding-left: 24px;
+        padding-right: 24px;
+        background-image: url(${props.imgurl?.desktopUrl_1x});
+      }
+    
+      @media screen and (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 2),
+        (min-resolution: 192dpi) {
+        background-image: url(${props.imgurl?.desktopUrl_2x});
+      }
+    `;
+
+    if (props.isExpanded) {
+      return notExpandedStyles;
+    } else {
+      return expandedStyles;
+    }
+  });
+
+export const Wrappers = styled.div`
   padding-left: 20px;
   padding-right: 20px;
+  height: calc(100vh - 61px);
+
+  background-color: ${props => props.colorbg};
+
   background-repeat: no-repeat;
   background-size: cover;
-  background-position: center center;
-  background-color: ${props => props.colorbg};
-  height: calc(100vh - 61px);
+  background-position: center;
 
   @media screen and (min-width: 375px) {
     background-image: url(${props => props.imgurl.mobileUrl_1x});

src/components/Modal/Modal.module.scss

@@ -10,7 +10,7 @@
   line-height: 1.5em;
   letter-spacing: -0.02em;
   margin-bottom: 24px;
-  margin-top: 24px;
+  // margin-top: 24px;
 
   &.dark {
     color: $white-text-color;

src/components/ModalFilter/Modal.module.scss

@@ -22,7 +22,8 @@
   }
 }
 .TitleBlock {
-  height: 41px;
+  padding-bottom: 14px;
+  margin-bottom: 14px;
 
   &.dark {
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
@@ -95,8 +96,15 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  margin-top: 24px;
+  padding-top: 24px;
   margin-bottom: 14px;
+  &.dark {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+  &.light,
+  &.colorful {
+    border-top: 1px solid rgba(22, 22, 22, 0.1);
+  }
 }
 .Button {
   position: absolute;
@@ -117,7 +125,7 @@
   }
 }
 .InputBlock {
-  margin-bottom: 8px;
+  margin-bottom: 6px;
 }
 .LabelField {
   font-weight: 400;