Merge pull request #42 from Ninos-labs/feature/improve-ux

Feature/improve ux
Ninos-labs · Jun 15, 2021 · 2722354 · 2722354
2 parents 415549b + aa47c1f
commit 2722354
Show file tree

Hide file tree

Showing 167 changed files with 651 additions and 443 deletions.
diff --git a/public/index.html b/public/index.html
@@ -51,6 +51,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/components/boxTitle/boxTitle.styled.tsx b/src/components/boxTitle/boxTitle.styled.tsx
@@ -1,20 +1,10 @@
 import styled from 'styled-components';
 
 const BoxTitleStyled = styled.h2`
-  background-color: ${({ theme }) => theme.colors?.white};
+  background-color: inherit;
   font-size: ${({ theme }) => theme.fonts?.sizes?.subTitle};
-  top: 10rem;
   padding: 0 0 2rem;
-  position: sticky;
   z-index: 1;
-
-  @media screen and (min-width: ${({ theme }) => theme.size?.large}) {
-    top: 0;
-  }
-
-  @media screen and (max-width: ${({ theme }) => theme.size?.small}) {
-    top: 10rem;
-  }
 `;
 
 export default BoxTitleStyled;
diff --git a/src/components/button/button.styled.tsx b/src/components/button/button.styled.tsx
@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+  background-color: ${({ theme }) => theme.colors?.pastelGreen};
+  border: 1px solid ${({ theme }) => theme.colors?.black};
+  border-radius: ${({ theme }) => theme.radius?.small};
+  cursor: pointer;
+  margin-top: 1rem;
+  padding: 0.7rem 1rem;
+  transform: translateX(0);
+  transition: transform 0.3s;
+
+  &:hover {
+    transform: translateX(0.5rem);
+  }
+
+  &:active {
+    color: ${({ theme }) => theme.colors?.blueZodiac};
+    transform: scale(1.1);
+  }
+`;
+
+export default StyledButton;
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
@@ -0,0 +1,3 @@
+import StyledButton from './button.styled';
+
+export default StyledButton;
diff --git a/src/components/content/content.styled.tsx b/src/components/content/content.styled.tsx
@@ -6,67 +6,93 @@ const ContentStyled = styled.div`
   top: 0;
 
   @media screen and (max-width: ${({ theme }) => theme.size?.large}) {
-    flex-direction: column-reverse;
+    flex-wrap: wrap;
   }
 
-  aside,
-  main {
+  aside {
     padding: 0 2rem;
-  }
 
-  aside {
     @media screen and (max-width: ${({ theme }) => theme.size?.large}) {
-      margin: 0 2rem;
+      align-content: stretch;
+      display: inline-flex;
+      flex-basis: 100%;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-top: 2rem;
+      position: relative;
     }
 
     @media screen and (min-width: ${({ theme }) => theme.size?.large}) {
       height: calc(100vh - 15rem);
-      flex-basis: 38rem;
-      top: 10rem;
+      flex-basis: 23rem;
+      top: 2rem;
       position: sticky;
-      overflow: hidden;
-    }
-
-    @media screen and (max-width: ${({ theme }) => theme.size?.small}) {
-      margin: 0;
     }
 
-    h2 {
-      padding-top: 2rem;
-      background-color: ${({ theme }) => theme.colors?.alabaster};
-
-      @media screen and (max-width: ${({ theme }) => theme.size?.medium}) {
-        border-top: 1px solid ${({ theme }) => theme.colors?.gallery};
-      }
+    header {
+      flex-basis: 100%;
     }
   }
 
   main {
-    @media screen and (min-width: ${({ theme }) => theme.size?.large}) {
-      flex-basis: calc(100% - 38rem);
-    }
+    align-items: flex-start;
+    display: flex;
+    flex-basis: 100%;
+    flex-wrap: wrap;
+    gap: 2rem;
+    justify-content: center;
 
-    @media screen and (min-width: ${({ theme }) => theme.size?.medium}) {
-      display: flex;
-      flex-basis: 100%;
-      flex-wrap: wrap;
-      justify-content: center;
+    @media screen and (min-width: ${({ theme }) => theme.size?.large}) {
+      flex-basis: calc(100% - 23rem);
     }
 
     @media screen and (max-width: ${({ theme }) => theme.size?.small}) {
       padding: 0;
     }
 
+    & > * {
+      @media screen and (max-width: ${({ theme }) => theme.size?.small}) {
+        flex-basis: 100%;
+      }
+    }
+
+    & > div:first-of-type {
+      width: calc(60% - 2rem);
+
+      @media screen and (min-width: ${({ theme }) => theme.size?.xl}) {
+        width: calc(70% - 2rem);
+      }
+
+      section > div {
+        background-color: ${({ theme }) => theme.colors?.white};
+        border-radius: ${({ theme }) => theme.radius?.big};
+        border: 1px solid ${({ theme }) => theme.colors?.black};
+        padding: 2rem;
+      }
+    }
+
+    & > div:last-of-type {
+      top: 2rem;
+      position: sticky;
+      width: calc(40% - 2rem);
+
+      @media screen and (min-width: ${({ theme }) => theme.size?.xl}) {
+        width: calc(30% - 2rem);
+      }
+
+      section {
+        margin-bottom: 2rem;
+
+        @media screen and (min-width: ${({ theme }) => theme.size?.large}) {
+          margin-top: 0;
+        }
+      }
+    }
+
     section {
-      background-color: ${({ theme }) => theme.colors?.white};
       box-sizing: border-box;
-      border-radius: ${({ theme }) => theme.radius?.big};
-      margin: 2rem;
-      padding: 3rem;
-      width: calc(100% - 4rem);
-      @media screen and (min-width: ${({ theme }) => theme.size?.medium}) {
-        width: calc(50% - 4rem);
-      }
+      margin: 2rem 0;
+      padding: 0 2rem;
     }
   }
 `;

diff --git a/src/components/header/header.styled.tsx b/src/components/header/header.styled.tsx
diff --git a/src/components/header/header.test.tsx b/src/components/header/header.test.tsx
diff --git a/src/components/header/index.ts b/src/components/header/index.ts
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,9 +1,10 @@
 import Match from './match';
 import Title from './title';
+import Popup from './popup';
 import * as Charts from './charts';
-import HeaderStyled from './header';
+import StyledButton from './button';
 import MatchCounter from './matchCounter';
 import ContentStyled from './content';
 import BoxTitleStyled from './boxTitle';
 
-export { Match, Title, Charts, HeaderStyled, MatchCounter, ContentStyled, BoxTitleStyled };
+export { Match, Title, Popup, Charts, StyledButton, MatchCounter, ContentStyled, BoxTitleStyled };
diff --git a/src/components/match/components/finalResults/finalResults.styled.tsx b/src/components/match/components/finalResults/finalResults.styled.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 const FinalResultsStyled = styled.div`
   background-color: ${({ theme }) => theme.colors?.white};
+  border: 0.1rem solid ${({ theme }) => theme.colors?.black};
   border-radius: ${({ theme }) => theme.radius?.big};
   flex-basis: 6rem;
   font-size: 1.8rem;

diff --git a/src/components/match/components/info/info.styled.tsx b/src/components/match/components/info/info.styled.tsx
@@ -6,12 +6,12 @@ const InfoStyled = styled.div`
   }
 
   h4 {
-    font-size: 1.4rem;
+    font-size: 1.6rem;
+    font-weight: 500;
     margin: 0 0 0.4rem;
-    text-transform: uppercase;
 
     @media screen and (min-width: ${({ theme }) => theme.size?.medium}) {
-      font-size: 1.2rem;
+      font-size: 1.5rem;
     }
 
     small {

diff --git a/src/components/match/match.styled.tsx b/src/components/match/match.styled.tsx
@@ -5,10 +5,6 @@ const MatchStyled = styled.div`
   border-bottom: 1px solid ${({ theme }) => theme.colors?.gallery};
   display: flex;
   padding: 1rem 1.5rem;
-
-  &:last-of-type {
-    border-bottom: 0;
-  }
 `;
 
 export default MatchStyled;
diff --git a/src/components/matchCounter/matchCounter.styled.tsx b/src/components/matchCounter/matchCounter.styled.tsx
@@ -5,11 +5,21 @@ import { MatchCounterStyledTypeS } from './matchCounter.types';
 const MatchCounterStyled = styled.div`
   background-color: ${({ theme, isTotal }: MatchCounterStyledTypeS) =>
     isTotal ? theme.colors?.pastelGreen : theme.colors?.white};
-  color: ${({ theme, isTotal }: MatchCounterStyledTypeS) =>
-    isTotal ? theme.colors?.white : theme.colors?.blueZodiac};
+  border: 0.1rem solid ${({ theme }) => theme.radius?.black};
+  border-radius: ${({ theme }) => theme.radius?.big};
   line-height: 1;
+  margin: ${({ theme }) => `${theme.gutter?.small} 0`};
   padding: ${({ theme }) => theme.gutter?.small};
 
+  @media screen and (max-width: ${({ theme }) => theme.size?.large}) {
+    width: 100%;
+    max-width: 140px;
+  }
+
+  @media screen and (max-width: ${({ theme }) => theme.size?.small}) {
+    max-width: 80px;
+  }
+
   h4 {
     font-size: 1rem;
     margin: 0;
@@ -35,8 +45,9 @@ const MatchCounterStyled = styled.div`
 
   progress[value] {
     appearance: none;
-    border: none;
-    height: 4px;
+    border: 0.1rem solid ${({ theme }) => theme.colors?.black};
+    border-radius: ${({ theme }) => theme.radius?.small};
+    height: 0.4rem;
     width: 100%;
 
     &::-webkit-progress-value {

diff --git a/src/components/matchCounter/matchCounter.tsx b/src/components/matchCounter/matchCounter.tsx
@@ -11,7 +11,7 @@ const MatchCounter = ({ title, amount, isTotal }: MatchCounterTypes) => {
       <h4>{title}</h4>
       <h5>{isTotal ? amount : `${amountFormatted}%`}</h5>
       {isTotal ? (
-        <small>[en total]</small>
+        <small>(en total)</small>
       ) : (
         <progress value={amountFormatted} max="100">
           progress: {amountFormatted}

diff --git a/src/components/popup/index.ts b/src/components/popup/index.ts
@@ -0,0 +1,3 @@
+import Popup from './popup';
+
+export default Popup;
diff --git a/src/components/popup/popup.styled.tsx b/src/components/popup/popup.styled.tsx
@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+
+const StyledPopup = styled.div`
+  background-color: ${({ theme }) => theme.colors?.white};
+  border: 0.1rem solid ${({ theme }) => theme.colors?.blueZodiac};
+  border-radius: ${({ theme }) => theme.radius?.big};
+  bottom: -0.1rem;
+  height: 420px;
+  left: -0.1rem;
+  right: -0.1rem;
+  top: -0.1rem;
+  margin: auto;
+  max-width: 44rem;
+  padding: 2rem;
+  position: fixed;
+  width: 80%;
+  z-index: 2;
+
+  header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    position: sticky;
+    top: 0;
+
+    h2 {
+      padding: 0;
+    }
+
+    button {
+      margin-top: 0;
+    }
+  }
+
+  & > div {
+    box-sizing: border-box;
+    height: 380px;
+    overflow-y: hidden;
+  }
+`;
+
+export default StyledPopup;
diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx
@@ -0,0 +1,19 @@
+import Helmet from 'react-helmet';
+import React, { Fragment } from 'react';
+import { createPortal } from 'react-dom';
+
+import StyledPopup from './popup.styled';
+
+const Popup = ({ children }: any) => (
+  <Fragment>
+    <Helmet>
+      <body className="fixed" />
+    </Helmet>
+    {createPortal(
+      <StyledPopup>{children}</StyledPopup>,
+      document.getElementById('modal-root') as any
+    )}
+  </Fragment>
+);
+
+export default Popup;