css updates

NPremchand-dev · Oct 15, 2020 · f94cf69 · f94cf69
1 parent 679878a
commit f94cf69
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 29 deletions.
diff --git 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 ? <Body {...restProps}>{children}</Body> : null;
+  /* return toggleShow ? <Body {...restProps}>{children}</Body> : null; */
+
+  return (
+    <Body className={toggleShow ? 'open' : 'closed'} {...restProps}>
+      <span>{children}</span>
+    </Body>
+  );
 };
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
 }`;