From f94cf69485292bc09cfee627ec4b13e79c1b13e8 Mon Sep 17 00:00:00 2001 From: Shuvo Date: Fri, 16 Oct 2020 00:09:43 +0600 Subject: [PATCH] css updates --- src/components/accordion/index.js | 8 +++++- src/components/accordion/styles/accordion.js | 27 ++++++++++++++---- src/components/card/styles/card.js | 9 +++--- src/components/footer/styles/footer.js | 2 +- src/components/form/styles/form.js | 1 - src/components/header/styles/header.js | 30 ++++++++++++++------ src/components/opt-form/styles/opt-form.js | 1 - src/components/player/styles/player.js | 2 +- src/global-styles.js | 16 +++++++---- 9 files changed, 67 insertions(+), 29 deletions(-) diff --git a/src/components/accordion/index.js b/src/components/accordion/index.js index d8c30bc..bf13b1f 100644 --- a/src/components/accordion/index.js +++ b/src/components/accordion/index.js @@ -47,5 +47,11 @@ Accordion.Header = function AccordionHeader({ children, ...restProps }) { Accordion.Body = function AccordionBody({ children, ...restProps }) { const { toggleShow } = useContext(ToggleContext); - return toggleShow ? {children} : null; + /* return toggleShow ? {children} : null; */ + + return ( + + {children} + + ); }; diff --git a/src/components/accordion/styles/accordion.js b/src/components/accordion/styles/accordion.js index d3ba03c..8b2be11 100644 --- a/src/components/accordion/styles/accordion.js +++ b/src/components/accordion/styles/accordion.js @@ -32,14 +32,17 @@ export const Title = styled.h1` export const Item = styled.div` color: white; - margin-bottom: 10px; margin: auto; - max-width: 670px; + margin-bottom: 10px; + max-width: 728px; width: 100%; &:first-of-type { margin-top: 3em; } + &:last-of-type { + margin-bottom: 0; + } `; export const Header = styled.div` @@ -57,6 +60,7 @@ export const Header = styled.div` img { filter: brightness(0) invert(1); width: 24px; + user-select: none; @media (max-width: 600px) { width: 16px; @@ -69,15 +73,28 @@ export const Header = styled.div` `; export const Body = styled.div` - max-height: 1200px; - transition: max-height 0.25s cubic-bezier(0.5, 0, 0.1, 1); font-size: 26px; font-weight: normal; line-height: normal; background: #303030; - padding: 0.8em 2.2em 0.8em 1.2em; white-space: pre-wrap; user-select: none; + overflow: hidden; + + &.closed { + max-height: 0; + overflow: hidden; + transition: max-height 0.25s cubic-bezier(0.5, 0, 0.1, 1); + } + &.open { + max-height: 1200px; + transition: max-height 0.25s cubic-bezier(0.5, 0, 0.1, 1); + } + + span { + display: block; + padding: 0.8em 2.2em 0.8em 1.2em; + } @media (max-width: 600px) { font-size: 16px; diff --git a/src/components/card/styles/card.js b/src/components/card/styles/card.js index ac351ea..42bcec3 100644 --- a/src/components/card/styles/card.js +++ b/src/components/card/styles/card.js @@ -13,7 +13,6 @@ export const Container = styled.div` display: flex; flex-direction: column; margin-bottom: 50px; - box-sizing: border-box; > ${Title} { @media (max-width: 1000px) { @@ -34,7 +33,7 @@ export const Group = styled.div` > ${Container}:first-of-type { @media (min-width: 1100px) { - margin-top: -150px; + margin-top: -100px; } } `; @@ -187,10 +186,10 @@ export const Content = styled.div` `; export const Maturity = styled.div` - background-color: ${({ rating }) => (rating >= 15 ? 'red' : 'green')}; + background-color: ${({ rating }) => (rating >= 15 ? '#f44336' : '#2f9600')}; border-radius: 15px; - width: 20px; - padding: 5px; + width: 28px; + line-height: 28px; text-align: center; color: white; font-weight: bold; diff --git a/src/components/footer/styles/footer.js b/src/components/footer/styles/footer.js index 8e10103..715c614 100644 --- a/src/components/footer/styles/footer.js +++ b/src/components/footer/styles/footer.js @@ -2,7 +2,7 @@ import styled from 'styled-components/macro'; export const Container = styled.div` display: flex; - padding: 70px 56px; + padding: 70px 0; margin: auto; max-width: 1000px; flex-direction: column; diff --git a/src/components/form/styles/form.js b/src/components/form/styles/form.js index f1e370f..151ea32 100644 --- a/src/components/form/styles/form.js +++ b/src/components/form/styles/form.js @@ -7,7 +7,6 @@ export const Container = styled.div` min-height: 660px; background-color: rgba(0, 0, 0, 0.75); border-radius: 5px; - box-sizing: border-box; width: 100%; margin: auto; max-width: 450px; diff --git a/src/components/header/styles/header.js b/src/components/header/styles/header.js index 9aa2607..661ae1f 100644 --- a/src/components/header/styles/header.js +++ b/src/components/header/styles/header.js @@ -4,7 +4,7 @@ import { Link as ReachRouterLink } from 'react-router-dom'; export const Background = styled.div` display: flex; flex-direction: column; - background: url(${({ src }) => (src ? `../images/misc/${src}.jpg` : '../images/misc/home-bg.jpg')}) top left / cover + background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)), url(${({ src }) => (src ? `../images/misc/${src}.jpg` : '../images/misc/home-bg.jpg')}) top left / cover no-repeat; @media (max-width: 1100px) { @@ -15,8 +15,7 @@ export const Background = styled.div` export const Container = styled.div` display: flex; margin: 0 56px; - height: 64px; - padding: 18px 0; + height: 100px; justify-content: space-between; align-items: center; @@ -51,16 +50,21 @@ export const Group = styled.div` `; export const SearchInput = styled.input` - background-color: #44444459; + background-color: rgba(64, 64, 64, 0.5); color: white; border: 1px solid white; transition: width 0.5s; height: 30px; font-size: 14px; + border-radius: 4px; margin-left: ${({ active }) => (active === true ? '10px' : '0')}; padding: ${({ active }) => (active === true ? '0 10px' : '0')}; opacity: ${({ active }) => (active === true ? '1' : '0')}; width: ${({ active }) => (active === true ? '200px' : '0px')}; + + &:focus { + background-color: rgba(0, 0, 0, 0.8); + } `; export const Search = styled.div` @@ -81,6 +85,13 @@ export const SearchIcon = styled.button` cursor: pointer; background-color: transparent; border: 0; + outline: 0; + height: 32px; + width: 32px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; img { filter: brightness(0) invert(1); @@ -100,7 +111,6 @@ export const ButtonLink = styled(ReachRouterLink)` padding: 8px 17px; cursor: pointer; text-decoration: none; - box-sizing: border-box; &:hover { background: #f40612; @@ -136,7 +146,11 @@ export const Dropdown = styled.div` margin-bottom: 0; } - ${Link}, ${Picture} { + ${Link} { + cursor: pointer; + } + + ${Picture} { cursor: default; } } @@ -196,8 +210,8 @@ export const Text = styled.p` `; export const Logo = styled.img` - height: 32px; - width: 108px; + height: 36px; + width: 134px; margin-right: 40px; @media (min-width: 1449px) { diff --git a/src/components/opt-form/styles/opt-form.js b/src/components/opt-form/styles/opt-form.js index 5917203..0a9339e 100644 --- a/src/components/opt-form/styles/opt-form.js +++ b/src/components/opt-form/styles/opt-form.js @@ -30,7 +30,6 @@ export const Break = styled.div` export const Button = styled.button` display: flex; align-items: center; - height: 100%; height: 70px; background: #e50914; color: white; diff --git a/src/components/player/styles/player.js b/src/components/player/styles/player.js index 3360dc7..c756cc0 100644 --- a/src/components/player/styles/player.js +++ b/src/components/player/styles/player.js @@ -11,7 +11,7 @@ export const Overlay = styled.div` left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.75); margin: 0 20px; `; diff --git a/src/global-styles.js b/src/global-styles.js index 6c57f80..012e576 100644 --- a/src/global-styles.js +++ b/src/global-styles.js @@ -1,11 +1,15 @@ import { createGlobalStyle } from 'styled-components'; export const GlobalStyles = createGlobalStyle` + *, *:before, *:after { + box-sizing: border-box; + } html, body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - background-color: #000000; - color: #333333; - font-size: 16px; + height: 100%; + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background-color: #000000; + color: #333333; + font-size: 16px; }`;