Merge pull request #12 from 001elijah/dashboard

Dashboard

package.json

@@ -22,6 +22,7 @@
     "redux-persist": "^6.0.0",
     "sass": "^1.63.4",
     "shortid": "^2.2.16",
+    "styled-components": "^6.0.0-rc.3",
     "web-vitals": "^2.1.3",
     "yup": "^1.2.0"
   },

src/assets/styles/_mixins.scss

@@ -60,3 +60,11 @@
     @content;
   }
 }
+
+@mixin retina {
+  @media (min-device-pixel-ratio: 2),
+    (min-resolution: 192dpi),
+    (min-resolution: 2dppx) {
+    @content;
+  }
+}

src/assets/styles/_vars.scss

@@ -15,9 +15,11 @@ $red-error-color: #ff0000;
 $white-background-modal: #fcfcfc;
 $icon-main-color: rgba(22, 22, 22, 0.5);
 $icon-secondary-color: rgba(255, 255, 255, 0.5);
-
 $start-background-color: linear-gradient(
   180deg,
   rgba(255, 255, 255, 1) 0%,
   rgba(190, 219, 176, 1) 100%
 );
+$background-color: #e6e6e6;
+$middle-color: #ffffffcc;
+$middle-color2: #161616cc;

src/components/ButtonAddColumn/ButtonAddColumn.jsx

@@ -0,0 +1,28 @@
+import s from './ButtonAddColumn.module.scss';
+import svg from '../../assets/icons/sprite.svg';
+import { selectorTheme } from 'redux/Auth/authSelectors';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+
+export const AddButton = ({ title, typeOfButton }) => {
+  const theme = useSelector(selectorTheme);
+
+  return (
+    <>
+      <div className={clsx(s.Button, s[typeOfButton], s[theme])}>
+        <div className={clsx(s.BoxPlus, s[typeOfButton], s[theme])}>
+          <svg width="16" height="16" className={s.Svg}>
+            <use href={`${svg}#icon-${'plus'}`} />
+          </svg>
+        </div>
+        <p className={clsx(s.TitleCard, s[typeOfButton], s[theme])}>{title}</p>
+      </div>
+    </>
+  );
+};
+
+AddButton.propTypes = {
+  title: PropTypes.string,
+  typeOfButton: PropTypes.string,
+};

src/components/ButtonAddColumn/ButtonAddColumn.module.scss

@@ -0,0 +1,101 @@
+@import '../../assets/styles/vars';
+
+.Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 335px;
+  height: 56px;
+  border-radius: 8px;
+  &.Column {
+    &.dark {
+      background: $black-color;
+    }
+    &.light {
+      background: $white-color;
+    }
+    &.colorful {
+      background: $white-color;
+    }
+  }
+  &.Card {
+    &.dark {
+      background-color: $accent-color;
+    }
+    &.light {
+      background-color: $accent-color;
+    }
+    &.colorful {
+      background: $accent-bright-color;
+    }
+  }
+}
+.TitleCard {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+  &.Column {
+    &.dark {
+      color: $white-color;
+    }
+    &.light {
+      color: $black-color;
+    }
+    &.colorful {
+      color: $black-color;
+    }
+  }
+  &.Card {
+    &.dark {
+      color: $black-color;
+    }
+    &.light {
+      color: $black-color;
+    }
+    &.colorful {
+      color: $white-color;
+    }
+  }
+}
+.BoxPlus {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px;
+  height: 28px;
+
+  margin-right: 8px;
+  border-radius: 6px;
+  &.Column {
+    &.dark {
+      background-color: $white-color;
+      stroke: $black-color;
+    }
+    &.light {
+      background-color: $black-color;
+      stroke: $white-color;
+    }
+    &.colorful {
+      background-color: $accent-bright-color;
+      stroke: $white-color;
+    }
+  }
+  &.Card {
+    &.dark {
+      background-color: $black-color;
+      stroke: $white-color;
+    }
+    &.light {
+      background-color: $black-color;
+      stroke: $white-color;
+    }
+    &.colorful {
+      background-color: $white-color;
+      stroke: $black-color;
+    }
+  }
+}
+.Svg {
+  stroke: inherit;
+}

src/components/HeaderDashBoard/HeaderDashBoard.jsx

@@ -0,0 +1,45 @@
+import s from './HeaderDashBoard.module.scss';
+import svg from '../../assets/icons/sprite.svg';
+import { useState } from 'react';
+import { ModalFilter } from '../ModalFilter/ModalFilter';
+import { selectorTheme } from 'redux/Auth/authSelectors';
+import { useSelector } from 'react-redux';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { BackdropModal } from '../BackdropMain/BackdropMain';
+
+export const HeaderDashBoard = ({ title }) => {
+  const theme = useSelector(selectorTheme);
+  const [showModalWindow, setShowModalWindow] = useState(false);
+  const handleModalWindowOpen = () => setShowModalWindow(true);
+  const handleModalWindowClose = () => setShowModalWindow(false);
+  const [color, setColor] = useState('');
+  return (
+    <>
+      <div className={clsx(s.HeaderDash, s[theme])}>
+        {title && (
+          <span className={clsx(s.HeaderTitle, s[theme])}>{title}</span>
+        )}
+        <button
+          className={clsx(s.HeaderFilter, s[theme])}
+          onClick={handleModalWindowOpen}
+          type="button"
+        >
+          <svg className={s.Svg} width="16" height="16">
+            <use href={`${svg}#icon-${'filter'}`} />
+          </svg>
+          Filter
+        </button>
+        {showModalWindow && (
+          <BackdropModal closeModal={handleModalWindowClose}>
+            <ModalFilter closeModal={handleModalWindowClose} color={setColor} />
+          </BackdropModal>
+        )}
+      </div>
+    </>
+  );
+};
+
+HeaderDashBoard.propTypes = {
+  title: PropTypes.string,
+};

src/components/HeaderDashBoard/HeaderDashBoard.module.scss

@@ -0,0 +1,63 @@
+@import '../../assets/styles/vars';
+
+.HeaderDash {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  background-color: $black-color;
+  padding: 10px 24px;
+
+  &.dark {
+    background-color: $black-color;
+  }
+  &.light,
+  &.colorful {
+    background-color: $background-color;
+  }
+}
+.HeaderTitle {
+  font-weight: 500;
+  font-size: 18px;
+  line-height: 27px;
+  letter-spacing: -0.02em;
+
+  &.dark {
+    color: $white-color;
+  }
+  &.light,
+  &.colorful {
+    color: $black-color;
+  }
+}
+.HeaderFilter {
+  background: transparent;
+  border: none;
+
+  outline: none;
+
+  &.dark {
+    color: $middle-color;
+    stroke: $middle-color;
+  }
+  &.light,
+  &.colorful {
+    color: $middle-color2;
+    stroke: $middle-color2;
+  }
+
+  &:hover,
+  &:focus {
+    color: $priority-high-color;
+    cursor: pointer;
+    stroke: $priority-high-color;
+  }
+}
+.HeaderFilterTitle {
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 21px;
+  letter-spacing: -0.02em;
+  margin-left: 8px;
+
+  color: inherit;
+}

src/components/ModalFilter/BackgroundBlock.jsx

@@ -0,0 +1,30 @@
+import s from './Modal.module.scss';
+import { ImgWrap } from './ImgWrap';
+
+export const BackgroundBlock = () => {
+  return (
+    <>
+      <div className={s.BackgroundBlock}>
+        <p className={s.Title}>Background</p>
+        <div className={s.ImgBlock}>
+          <ImgWrap type="x1" image="10.png" />
+          <ImgWrap type="x1" image="11.png" />
+          <ImgWrap type="x1" image="12.png" />
+          <ImgWrap type="x1" image="13.png" />
+          <ImgWrap type="x1" image="14.png" />
+          <ImgWrap type="x1" image="15.png" />
+          <ImgWrap type="x1" image="16.png" />
+          <ImgWrap type="x1" image="17.png" />
+          <ImgWrap type="x1" image="18.png" />
+          <ImgWrap type="x1" image="19.png" />
+          <ImgWrap type="x1" image="20.png" />
+          <ImgWrap type="x1" image="21.png" />
+          <ImgWrap type="x1" image="22.png" />
+          <ImgWrap type="x1" image="23.png" />
+          <ImgWrap type="x1" image="24.png" />
+          <ImgWrap type="x1" image="25.png" />
+        </div>
+      </div>
+    </>
+  );
+};

src/components/ModalFilter/ImgWrap.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import s from './Modal.module.scss';
+
+export const ImgWrap = ({ type, image }) => {
+  const handleOnClick = e => {
+    console.log(e.currentTarget.id);
+  };
+  return (
+    <div>
+      <button className={s.ImgButton} id={image} onClick={handleOnClick}>
+        <img
+          // src={require('../../assets/images/modalbg/'+type+'/'+ image)}
+          alt=""
+          width={28}
+          height={28}
+        />
+      </button>
+    </div>
+  );
+};
+ImgWrap.propTypes = {
+  image: PropTypes.string,
+  type: PropTypes.string,
+};