From f0f4f5047f6fee0778ea084d5d7d12ecfd906cdb Mon Sep 17 00:00:00 2001 From: Mayank Aggarwal Date: Sat, 24 Sep 2022 19:55:12 +0530 Subject: [PATCH 1/7] feat: setup new color codes --- src/themes.js | 114 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 src/themes.js diff --git a/src/themes.js b/src/themes.js new file mode 100644 index 0000000..dbffcd9 --- /dev/null +++ b/src/themes.js @@ -0,0 +1,114 @@ +export const slate = { + _50: '#f8fafc', +} + +export const grey = { + _50: '#f9fafb', +} + +export const neutral = { + _50: '#fafafa', +} + +export const blue = { + _50: '#eff6ff', + _100: '#dbeafe', + _200: '#bfdbfe', + _300: '#93c5fd', + _400: '#60a5fa', + _500: '#3b82f6', + _600: '#2563eb', + _700: '#1d4ed8', + _800: '#1e40af', + _900: '#1e3a8a', +} + +export const red = { + _300: '#fca5a5', + _400: '#f87171', + _500: '#ef4444', +} + +export const orange = { + _300: '#fdba74', + _400: '#fb923c', + _500: '#f97316', +} + +export const amber = { + _300: '#fcd34d', + _400: '#fbbf24', + _500: '#f59e0b', +} + +export const yellow = { + _300: '#fde047', + _400: '#facc15', + _500: '#eab308', +} + +export const lime = { + _300: '#bef264', + _400: '#a3e635', + _500: '#84cc16', +} + +export const green = { + _300: '#86efac', + _400: '#4ade80', + _500: '#22c55e', +} + +export const emerald = { + _300: '#6ee7b7', + _400: '#34d399', + _500: '#10b981', +} + +export const teal = { + _300: '#5eead4', + _400: '#2dd4bf', + _500: '#14b8a6', +} + +export const cyan = { + _300: '#67e8f9', + _400: '#22d3ee', + _500: '#06b6d4', +} + +export const indigo = { + _300: '#a5b4fc', + _400: '#818cf8', + _500: '#6366f1', +} + +export const violet = { + _300: '#c4b5fd', + _400: '#a78bfa', + _500: '#8b5cf6', +} + +export const purple = { + _300: '#d8b4fe', + _400: '#c084fc', + _500: '#a855f7', +} + +export const fuchsia = { + _300: '#f0abfc', + _400: '#e879f9', + _500: '#d946ef', +} + +export const pink = { + _300: '#f9a8d4', + _400: '#f472b6', + _500: '#ec4899', +} + +export const rose = { + _300: '#fda4af', + _400: '#fb7185', + _500: '#f43f5e', +} From 432e076e9ce4f673a03adbe6764b3dd70914fbf7 Mon Sep 17 00:00:00 2001 From: Mayank Aggarwal Date: Mon, 26 Sep 2022 01:23:43 +0530 Subject: [PATCH 2/7] feat: setup basic theme --- package.json | 4 + public/IconLogo.svg | 9 ++ public/index.html | 2 +- src/App.css | 25 ++--- src/App.js | 6 +- src/assets/IconLogo.svg | 9 ++ src/assets/TextLogo.svg | 9 ++ src/components/atoms/box.atom.jsx | 4 + src/components/atoms/circle.atom.jsx | 15 +++ src/components/atoms/icon.atom.jsx | 24 +++++ src/components/atoms/image.atom.jsx | 3 + src/components/molecules/CustomIcon/index.jsx | 11 +++ .../organisms/Header/Header.component.jsx | 17 ++-- .../organisms/Header/Header.styles.scss | 6 +- .../LayoutWrapper/LayoutWrapper.component.jsx | 18 ++-- .../SideBar/SideBar.component.jsx | 80 +++++++++++----- .../LayoutWrapper/SideBar/SideBarData.js | 12 ++- .../SideBar/SideBarItem.component.jsx | 95 +++++++++---------- .../organisms/LayoutWrapper/SideBar/styles.js | 14 +++ src/themes.js | 5 + 20 files changed, 256 insertions(+), 112 deletions(-) create mode 100644 public/IconLogo.svg create mode 100644 src/assets/IconLogo.svg create mode 100644 src/assets/TextLogo.svg create mode 100644 src/components/atoms/circle.atom.jsx create mode 100644 src/components/atoms/icon.atom.jsx create mode 100644 src/components/atoms/image.atom.jsx create mode 100644 src/components/molecules/CustomIcon/index.jsx create mode 100644 src/components/organisms/LayoutWrapper/SideBar/styles.js diff --git a/package.json b/package.json index 455ecf2..9e3cc9e 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,10 @@ "dependencies": { "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", + "@fortawesome/fontawesome-svg-core": "^6.2.0", + "@fortawesome/free-regular-svg-icons": "^6.2.0", + "@fortawesome/free-solid-svg-icons": "^6.2.0", + "@fortawesome/react-fontawesome": "^0.2.0", "@mui/icons-material": "^5.5.0", "@mui/material": "^5.5.0", "@stackoverflow/stacks-icons": "^2.25.1", diff --git a/public/IconLogo.svg b/public/IconLogo.svg new file mode 100644 index 0000000..f0efc5e --- /dev/null +++ b/public/IconLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/index.html b/public/index.html index 493325b..2efe1fd 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + { return ( -
+
@@ -116,7 +118,7 @@ const App = () => { -
+ ); }; diff --git a/src/assets/IconLogo.svg b/src/assets/IconLogo.svg new file mode 100644 index 0000000..f0efc5e --- /dev/null +++ b/src/assets/IconLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/TextLogo.svg b/src/assets/TextLogo.svg new file mode 100644 index 0000000..db36cd0 --- /dev/null +++ b/src/assets/TextLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/atoms/box.atom.jsx b/src/components/atoms/box.atom.jsx index 2226bf2..685ccd1 100644 --- a/src/components/atoms/box.atom.jsx +++ b/src/components/atoms/box.atom.jsx @@ -8,6 +8,7 @@ import { typography, border, background, + shadow, } from 'styled-system'; export const Box = styled.div` @@ -21,6 +22,9 @@ export const Box = styled.div` ${typography} ${border} ${background} + ${shadow} + transform: ${({ transform = 'none' }) => transform}; + visibility: ${({ visibility = 'visible' }) => visibility}; `; export const FlexBox = styled(Box)` diff --git a/src/components/atoms/circle.atom.jsx b/src/components/atoms/circle.atom.jsx new file mode 100644 index 0000000..7f0be0c --- /dev/null +++ b/src/components/atoms/circle.atom.jsx @@ -0,0 +1,15 @@ +import { Box } from './box.atom'; +import styled from '@emotion/styled'; + +const Circle = styled(Box)` + display: flex; + align-items: center; + justify-content: center; + height: ${({ radius = '5px' }) => `calc(${radius} * 2)`}; + width: ${({ radius = '5px' }) => `calc(${radius} * 2)`}; + border-radius: 50%; + border: ${({ border = '0' }) => border}; + cursor: ${({ cursor = 'pointer' }) => cursor}; +`; + +export default Circle; diff --git a/src/components/atoms/icon.atom.jsx b/src/components/atoms/icon.atom.jsx new file mode 100644 index 0000000..c9a1701 --- /dev/null +++ b/src/components/atoms/icon.atom.jsx @@ -0,0 +1,24 @@ +import styled from '@emotion/styled'; +import { + space, + color, + layout, + position, + typography, + textAlign, +} from 'styled-system'; + +const Icon = styled.span` + font-family: 'Wasabi'; + &:before { + content: ${({ unicode }) => `'\\${unicode}'`}; + } + ${space} + ${color} + ${layout} + ${position} + ${typography} + ${textAlign} +`; + +export default Icon; diff --git a/src/components/atoms/image.atom.jsx b/src/components/atoms/image.atom.jsx new file mode 100644 index 0000000..d8c3e41 --- /dev/null +++ b/src/components/atoms/image.atom.jsx @@ -0,0 +1,3 @@ +import styled from '@emotion/styled'; + +export const Image = styled.img`` \ No newline at end of file diff --git a/src/components/molecules/CustomIcon/index.jsx b/src/components/molecules/CustomIcon/index.jsx new file mode 100644 index 0000000..ca9bf1c --- /dev/null +++ b/src/components/molecules/CustomIcon/index.jsx @@ -0,0 +1,11 @@ +import React from 'react'; + +import { Image } from '../../atoms/image.atom'; + +const CustomIcon = ({ src }) => { + return ( + icon + ) +} + +export default CustomIcon; \ No newline at end of file diff --git a/src/components/organisms/Header/Header.component.jsx b/src/components/organisms/Header/Header.component.jsx index ee7bbcd..203b424 100644 --- a/src/components/organisms/Header/Header.component.jsx +++ b/src/components/organisms/Header/Header.component.jsx @@ -4,12 +4,13 @@ import {connect} from 'react-redux'; import PropTypes from 'prop-types'; import { logout } from '../../../redux/auth/auth.actions'; -import {ReactComponent as Search} from '../../../assets/Search.svg'; -import {ReactComponent as Logo} from '../../../assets/LogoMd.svg'; -import {ReactComponent as SmallLogo} from '../../../assets/LogoGlyphMd.svg'; +import { ReactComponent as Search } from '../../../assets/Search.svg'; +import IconLogo from '../../../assets/IconLogo.svg'; +import TextLogo from '../../../assets/TextLogo.svg'; import Spinner from '../../molecules/Spinner/Spinner.component'; import LinkButton from '../../molecules/LinkButton/LinkButton.component'; import MobileSideBar from '../../organisms/MobileSideBar/MobileSideBar.component'; +import CustomIcon from '../../molecules/CustomIcon'; import './Header.styles.scss'; @@ -89,18 +90,16 @@ const Header = ({auth: {isAuthenticated, loading, user}, logout}) => { } - return loading ? ( - '' - ) : ( + return !loading && ( -