[REFACTOR] Make everything beautiful (maaaaagic...)

on3iro · Oct 19, 2019 · 15a5c8d · 15a5c8d
1 parent b5465e5
commit 15a5c8d
Show file tree

Hide file tree

Showing 48 changed files with 709 additions and 220 deletions.
diff --git a/src/Redux/Store/Settings/Expansions/UpgradedBasicNemesisCards.ts b/src/Redux/Store/Settings/Expansions/UpgradedBasicNemesisCards.ts
@@ -57,9 +57,6 @@ const getUpgradedBasicNemesisCards = (state: RootState) =>
 
 const getExpansionId = (_: any, id: string) => id
 
-const getIdList = (_: any, props: { upgradedBasicNemesisIds: string[] }) =>
-  props.upgradedBasicNemesisIds
-
 const getUpgradedBasicNemesisCardIds = (state: RootState) =>
   state.Settings.Expansions.UpgradedBasicNemesisCards
     .upgradedBasicNemesisCardIds

diff --git a/src/components/atoms/ModalBodyWrapper.tsx b/src/components/atoms/ModalBodyWrapper.tsx
@@ -0,0 +1,20 @@
+import styled from 'styled-components/macro'
+
+type Props = {
+  hasFooter?: boolean
+}
+
+const ModalBodyWrapper = styled('div')<Props>`
+  margin: auto;
+  height: ${props => (props.hasFooter ? 'calc(100% - 64px)' : '100%')};
+  width: 100%;
+  padding: 24px;
+  position: relative;
+  overflow-y: auto;
+
+  > *:first-child {
+    margin-top: 0;
+  }
+`
+
+export default ModalBodyWrapper
diff --git a/src/components/atoms/ModalFooterWrapper.tsx b/src/components/atoms/ModalFooterWrapper.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components/macro'
+
+const ModalFooterWrapper = styled('div')`
+  margin: auto;
+  height: 64px;
+  width: 100%;
+  padding: 0 24px;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin-top: -1px;
+
+  button {
+    width: 100%;
+  }
+
+  button + button {
+    margin-left: 16px;
+  }
+`
+
+export default ModalFooterWrapper
diff --git a/src/components/atoms/SectionHeadline.tsx b/src/components/atoms/SectionHeadline.tsx
@@ -12,6 +12,10 @@ const SectionHeadline = styled(({ themeColor, ...rest }) => <H2 {...rest} />)<
   color: ${props => props.themeColor};
   font-weight: 300;
   margin: 16px 0 8px;
+
+  + div {
+    margin-top: 0;
+  }
 `
 
 export default SectionHeadline
diff --git a/src/components/molecules/MageList/MageGridWrapper.tsx b/src/components/molecules/MageList/MageGridWrapper.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components/macro'
 
 const MageGridWrapper = styled('div')`
   margin-top: 24px;
+  width: 100%;
 `
 
 MageGridWrapper.displayName = 'MageGridWrapper'

diff --git a/src/components/molecules/MageList/MageTile/index.tsx b/src/components/molecules/MageList/MageTile/index.tsx
@@ -34,7 +34,7 @@ const MageTile = React.memo(({ mage, playerNumber, theme }: Props) => {
   }, [show])
 
   return (
-    <Wrapper item xs={6} md={3}>
+    <Wrapper item xs={12} sm={6} md={3}>
       <Tile
         body={<Body mage={mage} />}
         bgColor={bgColor}

diff --git a/src/components/molecules/MageModal/index.tsx b/src/components/molecules/MageModal/index.tsx
@@ -8,6 +8,8 @@ import * as types from '../../../types'
 
 import { RenderModalType } from '../../../hooks/useModal'
 
+import ModalBodyWrapper from '../../atoms/ModalBodyWrapper'
+
 import MageInformation from '../MageInformation'
 
 // FIXME refine type (withStyle is the issue here)
@@ -45,7 +47,7 @@ const MageModal = React.memo(
 
     return (
       <RenderModal titleColor={titleColor} titleLabel={titleLabel}>
-        {body}
+        <ModalBodyWrapper>{body}</ModalBodyWrapper>
       </RenderModal>
     )
   }

diff --git a/src/components/molecules/MarketTile/index.tsx b/src/components/molecules/MarketTile/index.tsx
@@ -103,7 +103,7 @@ const MarketTile = React.memo(
     const card = getCard(marketTile)
 
     return (
-      <Wrapper item xs={6} md={4} {...rest}>
+      <Wrapper item xs={12} sm={6} md={4} {...rest}>
         {marketTile && (
           <Tile
             clickHandler={handleSelection}

diff --git a/src/components/molecules/Modal/Body.tsx b/src/components/molecules/Modal/Body.tsx
@@ -1,12 +1,7 @@
 import styled from 'styled-components'
 
 const Body = styled('div')`
-  margin: auto;
   height: calc(100% - 64px);
-  width: 100%;
-  padding: 24px;
-  position: relative;
-  overflow-y: auto;
 `
 
 export default Body
diff --git a/src/components/molecules/Modal/Footer.tsx b/src/components/molecules/Modal/Footer.tsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components'
+
+const Footer = styled('div')`
+  margin: auto;
+  height: 64px;
+  width: 100%;
+  padding: 0 24px;
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin-top: -1px;
+`
+
+export default Footer
diff --git a/src/components/molecules/Modal/index.tsx b/src/components/molecules/Modal/index.tsx
@@ -14,12 +14,12 @@ import CloseIcon from '@material-ui/icons/Close'
 type Props = {
   titleLabel: string
   titleColor: string
-  body: React.ReactChild
+  children: React.ReactChild
   closeModal: () => void
 }
 
 const Modal = React.memo(
-  ({ titleColor, titleLabel, body, closeModal }: Props) => {
+  ({ titleColor, titleLabel, children, closeModal }: Props) => {
     const domEl = document.getElementById('modal-root')
 
     if (!domEl) return null
@@ -37,7 +37,7 @@ const Modal = React.memo(
                 <CloseIcon />
               </CloseButton>
             </Header>
-            <Body>{body}</Body>
+            <Body>{children}</Body>
           </Content>
         </Wrapper>
       </React.Fragment>,

diff --git a/src/components/molecules/NemesisModal/index.tsx b/src/components/molecules/NemesisModal/index.tsx
@@ -7,6 +7,8 @@ import { RootState, selectors } from '../../../Redux/Store'
 
 import { RenderModalType } from '../../../hooks/useModal'
 
+import ModalBodyWrapper from '../../atoms/ModalBodyWrapper'
+
 import NemesisInformation from '../NemesisInformation'
 
 type OwnProps = {
@@ -34,7 +36,9 @@ const NemesisModal = React.memo(({ theme, RenderModal, nemesis }: Props) => {
 
   return (
     <RenderModal titleColor={titleColor} titleLabel={titleLabel}>
-      <NemesisInformation nemesis={nemesis} />
+      <ModalBodyWrapper>
+        <NemesisInformation nemesis={nemesis} />
+      </ModalBodyWrapper>
     </RenderModal>
   )
 })

diff --git a/src/components/molecules/Prompt.tsx b/src/components/molecules/Prompt.tsx
@@ -1,5 +1,10 @@
 import React from 'react'
 
+import Button from '@material-ui/core/Button'
+
+import ModalBodyWrapper from '../atoms/ModalBodyWrapper'
+import ModalFooterWrapper from '../atoms/ModalFooterWrapper'
+
 const Prompt = React.memo(
   ({
     yesHandler,
@@ -11,11 +16,27 @@ const Prompt = React.memo(
     children?: React.ReactChild
   }) => {
     return (
-      <div>
-        {children}
-        <button onClick={yesHandler}>Yes</button>
-        <button onClick={noHandler}>No</button>
-      </div>
+      <React.Fragment>
+        <ModalBodyWrapper hasFooter={true}>{children}</ModalBodyWrapper>
+        <ModalFooterWrapper>
+          <Button
+            onClick={noHandler}
+            size="small"
+            variant="contained"
+            color="secondary"
+          >
+            No
+          </Button>
+          <Button
+            size="small"
+            variant="contained"
+            color="primary"
+            onClick={yesHandler}
+          >
+            Yes
+          </Button>
+        </ModalFooterWrapper>
+      </React.Fragment>
     )
   }
 )

diff --git a/src/components/molecules/SupplyList/ListWrapper.tsx b/src/components/molecules/SupplyList/ListWrapper.tsx
@@ -2,6 +2,7 @@ import styled from 'styled-components/macro'
 
 const ListWrapper = styled('div')`
   margin-top: 24px;
+  width: 100%;
 `
 
 ListWrapper.displayName = 'ListWrapper'

diff --git a/src/components/molecules/SupplyModal/index.tsx b/src/components/molecules/SupplyModal/index.tsx
@@ -8,6 +8,8 @@ import * as types from '../../../types'
 
 import { RenderModalType } from '../../../hooks/useModal'
 
+import ModalBodyWrapper from '../../atoms/ModalBodyWrapper'
+
 import Body from '../SupplyCardInformation'
 
 export type CardProperties = {
@@ -49,7 +51,7 @@ const SupplyModal = React.memo(
 
     return (
       <RenderModal titleColor={titleColor} titleLabel={titleLabel}>
-        {body}
+        <ModalBodyWrapper>{body}</ModalBodyWrapper>
       </RenderModal>
     )
   }

diff --git a/src/components/molecules/SupplySelection/Wrapper.tsx b/src/components/molecules/SupplySelection/Wrapper.tsx
@@ -3,8 +3,16 @@ import styled from 'styled-components/macro'
 import TileWrapper from '../Tile/Wrapper'
 
 const Wrapper = styled('div')`
-  ${TileWrapper}:hover {
-    background: #eee;
+  > p {
+    margin-top: 0;
+  }
+
+  ${TileWrapper} {
+    border: 2px solid transparent;
+
+    &:hover {
+      border-color: ${props => props.theme.colors.primary.main};
+    }
   }
 `
 

diff --git a/src/components/molecules/SupplySelection/index.tsx b/src/components/molecules/SupplySelection/index.tsx
@@ -2,6 +2,10 @@ import React from 'react'
 
 import SupplyList, { Props as ListProps } from '../SupplyList'
 
+import SectionHeadline from '../../atoms/SectionHeadline'
+
+import InfoItem from '../InfoItem'
+
 import Wrapper from './Wrapper'
 
 type ContextProps = {
@@ -30,7 +34,7 @@ const renderLists = (lists: List[], selectionHandler: (val: any) => void) =>
     return (
       <div key={list.id}>
         <SelectionHandlerContext.Provider value={selectionContextValue}>
-          {list.title && <h2>{list.title}</h2>}
+          {list.title && <SectionHeadline>{list.title}</SectionHeadline>}
           <SupplyList {...list} />
         </SelectionHandlerContext.Provider>
       </div>
@@ -53,10 +57,13 @@ const SupplySelection = React.memo(
   }: Props) => {
     return (
       <Wrapper>
-        <h2>Please select {amountOfCardsToSelect} cards to banish!</h2>
-        <p>
-          <b>Cards selected:</b> {selectedCardsCount}/{amountOfCardsToSelect}
-        </p>
+        <SectionHeadline>
+          Please select {amountOfCardsToSelect} cards to banish!
+        </SectionHeadline>
+        <InfoItem
+          label="Cards selected"
+          info={`${selectedCardsCount}/${amountOfCardsToSelect}`}
+        ></InfoItem>
         {renderLists(lists, handleSelection)}
       </Wrapper>
     )

diff --git a/src/components/molecules/Tile/Wrapper.tsx b/src/components/molecules/Tile/Wrapper.tsx
@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components/macro'
 import MuiCard from '@material-ui/core/Card'
 
 const selectedMixin = css`
-  border: 2px solid ${props => props.theme.colors.secondary.main};
+  border: 2px solid ${props => props.theme.colors.secondary.main} !important;
 `
 
 type Props = {

diff --git a/src/components/molecules/TreasureList/TreasureGridWrapper.tsx b/src/components/molecules/TreasureList/TreasureGridWrapper.tsx
@@ -0,0 +1,9 @@
+import styled from 'styled-components/macro'
+
+const TreasureGridWrapper = styled('div')`
+  margin-top: 24px;
+`
+
+TreasureGridWrapper.displayName = 'TreasureGridWrapper'
+
+export default TreasureGridWrapper
diff --git a/src/components/molecules/TreasureList/TreasureTile/Body.tsx b/src/components/molecules/TreasureList/TreasureTile/Body.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import List from '@material-ui/core/List'
+
+import { Treasure } from '../../../../types'
+
+import AbilityText from '../../../atoms/AbilityText'
+
+import InfoItem from '../../InfoItem'
+
+import Name from './Name'
+
+type Props = {
+  treasure: Treasure
+}
+
+const Body = React.memo(({ treasure }: Props) => (
+  <React.Fragment>
+    <Name component="p">{treasure.name}</Name>
+    <List>
+      <InfoItem label="Set" info={treasure.expansion} />
+      <InfoItem label="Treasure Level" info={treasure.level.toString()} />
+      {treasure.subtype && <InfoItem label="Subtype" info={treasure.subtype} />}
+    </List>
+    <AbilityText dangerouslySetInnerHTML={{ __html: treasure.effect }} />
+  </React.Fragment>
+))
+
+export default Body
diff --git a/src/components/molecules/TreasureList/TreasureTile/Name.tsx b/src/components/molecules/TreasureList/TreasureTile/Name.tsx
@@ -0,0 +1,10 @@
+import styled from 'styled-components/macro'
+import Typography from '@material-ui/core/Typography'
+
+const Name = styled(Typography)`
+  font-weight: bold;
+`
+
+Name.displayName = 'Name'
+
+export default Name
diff --git a/src/components/molecules/TreasureList/TreasureTile/Wrapper.tsx b/src/components/molecules/TreasureList/TreasureTile/Wrapper.tsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components/macro'
+import Grid from '@material-ui/core/Grid'
+
+import TileWrapper from '../../Tile/Wrapper'
+
+const Wrapper = styled(Grid)`
+  ${TileWrapper} {
+    min-height: 148px;
+    min-width: 30px;
+    height: 100%;
+  }
+`
+
+Wrapper.displayName = 'Wrapper'
+
+export default Wrapper