Merge pull request #205 from eficode/feat/misc-ui

Feat/misc UI
eficode · Feb 16, 2021 · 1424a51 · 1424a51
2 parents 2f7660a + d9d1f78
commit 1424a51
Show file tree

Hide file tree

Showing 12 changed files with 290 additions and 208 deletions.
diff --git a/packages/game-app/src/_shared/components/Dialog/Dialog.tsx b/packages/game-app/src/_shared/components/Dialog/Dialog.tsx
@@ -20,6 +20,7 @@ type Props = {
   DialogContainerComponent?: React.ElementType;
   // TODO improve types
   DialogContainerProps?: object;
+  AdditionalComponent?: React.ElementType;
 };
 
 /**
@@ -31,6 +32,7 @@ const Dialog: React.FC<Props> & { DialogContainer: typeof DialogContainer } = ({
   title,
   DialogContainerComponent = DialogContainer,
   DialogContainerProps = {},
+  AdditionalComponent,
   children,
 }) => {
   return (
@@ -41,6 +43,7 @@ const Dialog: React.FC<Props> & { DialogContainer: typeof DialogContainer } = ({
         </Typography>
         {children}
       </DialogContainerComponent>
+      {AdditionalComponent && <AdditionalComponent />}
     </GlassOverlay>
   );
 };

diff --git a/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.styled.tsx b/packages/game-app/src/_shared/components/EstimationEditor/EstimationEditor.styled.tsx
@@ -1,6 +1,7 @@
 import Box from '../Box';
 import styled from 'styled-components';
 import Input from '../Input';
+import LightCheckIcon from '@assets/icons/light-estimate-checkmark.svg';
 /*
 const estimationWrapperDefinition = keyframes`
   0% {
@@ -143,7 +144,12 @@ export const ConfirmButton = styled.button`
   }
 
   ${EstimationInputWrapper}:focus-within + & {
-    background: #096762;
+    background-color: #096762;
+    background-image: url(${LightCheckIcon});
+    background-repeat: no-repeat;
+    background-size: 70% 70%;
+    background-position-x: 5px;
+    background-position-y: 4px;
   }
 `;
 

diff --git a/packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.styled.tsx b/packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.styled.tsx
@@ -11,11 +11,11 @@ export const PanelHeader = styled.div`
 
 PanelHeader.displayName = 'PanelHeader';
 
-export const PanelWrapper = styled.div`
+export const PanelWrapper = styled.div<{ disabled?: boolean }>`
   width: 400px;
   background: rgba(255, 255, 255, 0.95);
   border-radius: 4px;
-  cursor: pointer;
+  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
 
   @supports (backdrop-filter: blur(20px)) {
     background: rgba(255, 255, 255, 0.5);

diff --git a/packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.tsx b/packages/game-app/src/_shared/components/ExpandableTopPanel/ExpandableTopPanel.tsx
@@ -9,6 +9,10 @@ type Props = {
    * Label to show in the header of the collapsible panel
    */
   label: string;
+  /**
+   * Boolean to disable interaction
+   */
+  disabled?: boolean;
   /**
    * Content placed into the space that appears when the panel in expanded
    */
@@ -19,15 +23,17 @@ type Props = {
  *  Animated expandable panel that shows the header always on top.
  *  and expands itself in the top direction
  */
-const ExpandableTopPanel: React.FC<Props> = ({ className, label, children }) => {
+const ExpandableTopPanel: React.FC<Props> = ({ className, label, disabled, children }) => {
   const [collapsed, setCollapsed] = useState(true);
 
   const toggle = useCallback(() => {
-    setCollapsed(c => !c);
-  }, []);
+    if (!disabled) {
+      setCollapsed(c => !c);
+    }
+  }, [disabled]);
 
   return (
-    <PanelWrapper className={className} onClick={toggle}>
+    <PanelWrapper className={className} onClick={toggle} disabled={disabled}>
       <PanelHeader>
         <Typography variant="content" fontWeight="600">
           {label}

diff --git a/packages/game-app/src/_shared/components/TwoColumnPage/TwoColumnPage.styled.tsx b/packages/game-app/src/_shared/components/TwoColumnPage/TwoColumnPage.styled.tsx
@@ -44,8 +44,8 @@ export const Logo = styled.div`
 Logo.displayName = 'Logo';
 
 export const RightIllustration = styled.div`
-  width: 100%;
-  height: 100%;
+  width: 45%;
+  height: 45%;
 
   svg {
     max-width: 100%;

diff --git a/packages/game-app/src/_shared/components/TwoColumnPage/TwoColumnPage.tsx b/packages/game-app/src/_shared/components/TwoColumnPage/TwoColumnPage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Column, LeftColumn, Logo, RightIllustration, TowColumnsContainer } from './TwoColumnPage.styled';
 import { ReactComponent as TextLogo } from '@assets/images/eficode-text-logo.svg';
 import { ReactComponent as Illustration } from '@assets/images/signin-illustration.svg';
+import { Typography, Box } from '@pipeline/components';
 
 type Props = {
   left: React.ReactElement;
@@ -14,15 +15,23 @@ const TwoColumnPage: React.FC<Props> = ({ left }) => {
         <TextLogo />
       </Logo>
       <LeftColumn>{left}</LeftColumn>
-      <Column flex={1} display="flex" flexDirection="row" alignItems="center" justifyContent="center">
+      <Column flex={1} display="flex" flexDirection="column" alignItems="center" justifyContent="center">
         <RightIllustration>
           <Illustration />
         </RightIllustration>
+        <Box mt={16}>
+          <Typography variant="bigTitle" fontWeight="800">
+            Pipeline
+          </Typography>
+        </Box>
+        <Typography variant="dialogHead" fontWeight="800">
+          The game that delivers!
+        </Typography>
       </Column>
     </TowColumnsContainer>
   );
 };
 
-TwoColumnPage.displayName = 'TowColumnPage';
+TwoColumnPage.displayName = 'TwoColumnPage';
 
 export default TwoColumnPage;
diff --git a/packages/game-app/src/assets/icons/estimate-checkmark.svg b/packages/game-app/src/assets/icons/estimate-checkmark.svg
diff --git a/packages/game-app/src/assets/icons/light-estimate-checkmark.svg b/packages/game-app/src/assets/icons/light-estimate-checkmark.svg