Redesign winner modal

arielger · Jul 23, 2019 · 0668939 · 0668939
1 parent c7bf5e4
commit 0668939
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 15 deletions.
diff --git a/client/src/App.js b/client/src/App.js
@@ -109,14 +109,14 @@ const App = () => {
                           <>
                             <Header client={client} user={user} />
                             <Switch>
-                              <Route path="/matches" component={Matches} />
+                              <Route path="/partidas" component={Matches} />
                               <Route
                                 path="/match/:matchId"
                                 render={({ ...props }) => (
                                   <Match user={user} {...props} />
                                 )}
                               />
-                              <Redirect to="/matches" />
+                              <Redirect to="/partidas" />
                             </Switch>
                           </>
                         );

diff --git a/client/src/screens/Match/Match.js b/client/src/screens/Match/Match.js
@@ -3,14 +3,14 @@ import * as R from "ramda";
 import { Query, Mutation, withApollo } from "react-apollo";
 import { Prompt } from "react-router-dom";
 import gql from "graphql-tag";
-import Modal from "react-modal";
 
 import styles from "./Match.module.scss";
 
 import PlayerCards from "./PlayerCards";
 import PlayedCards from "./PlayedCards";
 import Scores from "./Scores";
 import Actions from "./Actions";
+import WinnerModal from "./WinnerModal";
 
 const JOIN_MATCH = gql`
   mutation joinMatch($matchId: ID!) {
@@ -209,18 +209,12 @@ const MatchInner = ({
               />
             )}
           </Mutation>
-          <Modal
-            isOpen={!!data.match.matchWinnerTeam}
-            onRequestClose={() => {
-              history.replace("/matches");
-            }}
-          >
-            <h2>
-              {data.match.matchWinnerTeam === "we"
-                ? "Has ganado"
-                : "Has perdido"}
-            </h2>
-          </Modal>
+          {data.match.matchWinnerTeam && (
+            <WinnerModal
+              history={history}
+              winnerTeam={data.match.matchWinnerTeam}
+            />
+          )}
         </Fragment>
       )}
     </div>

diff --git a/client/src/screens/Match/WinnerModal/WinnerModal.js b/client/src/screens/Match/WinnerModal/WinnerModal.js
@@ -0,0 +1,32 @@
+import React from "react";
+import Modal from "react-modal";
+import { Link } from "react-router-dom";
+
+import { ReactComponent as WinnerIcon } from "./medal-solid.svg";
+import { ReactComponent as MedalIcon } from "./frown-regular.svg";
+import styles from "./WinnerModal.module.scss";
+
+export default function WinnerModal({ history, winnerTeam }) {
+  return (
+    <Modal
+      isOpen={true}
+      onRequestClose={() => {
+        history.replace("/partidas");
+      }}
+      overlayClassName={styles.overlay}
+      className={styles.modal}
+    >
+      {winnerTeam === "we" ? (
+        <WinnerIcon className={styles.winnerIcon} />
+      ) : (
+        <MedalIcon className={styles.looserIcon} />
+      )}
+      <h2 className={styles.title}>
+        {winnerTeam === "we" ? "¡Has ganado!" : "¡Has perdido!"}
+      </h2>
+      <Link className={styles.returnLink} to="/partidas">
+        Volver al inicio
+      </Link>
+    </Modal>
+  );
+}
diff --git a/client/src/screens/Match/WinnerModal/WinnerModal.module.scss b/client/src/screens/Match/WinnerModal/WinnerModal.module.scss
@@ -0,0 +1,51 @@
+.overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 240px;
+  background-color: #191a23;
+  border-radius: 4px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0px 0px 8px 0px #000;
+}
+
+.looserIcon,
+.winnerIcon {
+  width: 60px;
+  margin-bottom: 16px;
+}
+
+.winnerIcon {
+  color: #ffc21a;
+}
+
+.looserIcon {
+  color: #dc494d;
+}
+
+.title {
+  margin: 0 0 32px 0;
+}
+
+.returnLink {
+  text-decoration: none;
+  width: 160px;
+  padding: 8px;
+  border: 1px solid #fff;
+  color: #fff;
+  text-align: center;
+  border-radius: 40px;
+}
diff --git a/client/src/screens/Match/WinnerModal/WinnerModal.stories.js b/client/src/screens/Match/WinnerModal/WinnerModal.stories.js
@@ -0,0 +1,29 @@
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import faker from "faker";
+
+import WinnerModal from "./WinnerModal";
+
+const Wrapper = ({ children }) => (
+  <div
+    style={{
+      width: "100%",
+      height: "100vh",
+      position: "relative"
+    }}
+  >
+    {children}
+  </div>
+);
+
+storiesOf("WinnerModal", module)
+  .add("winner", () => (
+    <Wrapper>
+      <WinnerModal winnerTeam="we" />
+    </Wrapper>
+  ))
+  .add("looser", () => (
+    <Wrapper>
+      <WinnerModal winnerTeam="them" />
+    </Wrapper>
+  ));
diff --git a/client/src/screens/Match/WinnerModal/frown-regular.svg b/client/src/screens/Match/WinnerModal/frown-regular.svg
diff --git a/client/src/screens/Match/WinnerModal/index.js b/client/src/screens/Match/WinnerModal/index.js
@@ -0,0 +1,3 @@
+import WinnerModal from "./WinnerModal";
+
+export default WinnerModal;
diff --git a/client/src/screens/Match/WinnerModal/medal-solid.svg b/client/src/screens/Match/WinnerModal/medal-solid.svg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import WinnerModal from "./WinnerModal";

		export default WinnerModal;