Redesign poll component

webkom · Jun 26, 2022 · 9470381 · 9470381
1 parent 8d8bbd1
commit 9470381
Show file tree

Hide file tree

Showing 8 changed files with 316 additions and 356 deletions.
diff --git a/app/components/Poll/Poll.css b/app/components/Poll/Poll.css
@@ -1,185 +1,158 @@
-@import '~app/styles/variables.css';
-
-.optionWrapper {
-  justify-content: center;
-  min-height: 120px;
-  cursor: pointer;
-  position: relative;
-}
-
-.pollTable {
+.poll {
+  margin: 0 auto;
+  background-color: var(--lego-card-color);
   width: 100%;
-  font-size: 14px;
-}
-
-.pollTable td {
-  border: 0;
-  padding: 5px;
+  min-width: 250px;
+  max-width: 500px;
+  overflow-y: hidden;
+  border-radius: 5px;
 }
 
-.pollTable .textColumn {
-  border-right: 1px solid #c5c5c5;
-  text-align: right;
-  padding-right: 13px;
-  line-height: 16px;
-}
-
-.pollTable .graphColumn {
-  width: auto;
-  min-width: 200px;
-  padding-left: 13px;
+.topBar {
+  background-color: var(--lego-red);
+  position: relative;
+  width: 100%;
+  height: 70px;
+  padding-bottom: 25px;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 20%);
 }
 
-.poll {
-  composes: withShadow from '~app/styles/utilities.css';
-  background: var(--lego-card-color);
-  padding: 15px 20px 8px;
+.stats {
+  color: var(--lego-card-color);
 }
 
-.pollLight {
-  background: var(--lego-card-color);
+.notAnswered {
+  color: var(--color-white);
+  font-size: 30px;
+  font-weight: 900;
+  line-height: 45px;
 }
 
-.noVotes {
-  font-style: italic;
+.headerBar {
+  color: var(--lego-font-color);
+  background-color: var(--lego-card-color);
+  font-weight: 900;
+  text-align: center;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 80%;
+  height: 50px;
+  border-radius: 10px;
+  box-shadow: 0 3px 3px rgba(0, 0, 0, 20%);
+  transform: translate(-50%, 50%);
 }
 
-.pollGraph {
-  animation: graph 1.2s cubic-bezier(41%, 80%, 40%, 94%);
-  background-color: var(--lego-red-color);
-  padding-left: 8px;
-  border-radius: 0 2px 2px 0;
-  font-style: italic;
-  font-weight: 300;
-  color: var(--color-white);
-  height: 30px;
+.contentWrapper {
+  overflow-y: hidden;
+  width: 100%;
+  transition: 0.5s height;
 }
 
-.fullGraph {
-  background-color: #e7e7e7;
-  width: 100%;
+.voteOptionsWrapper {
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  height: fit-content;
 }
 
-html[data-theme='dark'] .fullGraph {
+.voteButton,
+.voteButton + .voteButton {
   color: var(--color-white);
-  background-color: var(--color-mono-gray-5);
-}
-
-html[data-theme='dark'] .pollGraph {
-  color: var(--color-black);
-}
-
-.pollGraph span {
-  vertical-align: middle;
-}
-
-@keyframes graph {
-  from {
-    width: 1px;
-  }
-
-  to {
-    width: 100%;
-  }
-}
-
-.pollHeader {
-  border-radius: 8px;
-  margin-bottom: 20px;
-  margin-left: 20px;
-  font-size: 16px;
-  color: var(--lego-font-color);
+  background: var(--lego-red);
+  font-weight: 500;
+  width: 90%;
+  height: 37px;
+  padding: 5px;
+  margin: 2px;
 }
 
-.voteButton {
-  background: var(--lego-red-color);
-  color: var(--lego-color-gray-light);
-  border: 1px solid var(--border-gray);
+.voteOptions {
   width: 100%;
-  margin: 0 !important;
-  font-size: 15px;
-  max-width: 400px;
+  padding-top: 35px;
 }
 
-.voteButton:hover {
-  opacity: 0.8;
-}
-
-html[data-theme='dark'] .voteButton {
-  color: var(--color-dark-gray-3);
+.bottomInfoWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.moreOptionsLink {
-  justify-content: space-between;
+.totalVotesInfo {
+  display: flex;
 }
 
-.arrow {
-  margin-top: 9px;
-  cursor: pointer;
-
-  &:hover {
-    transform: scale(1.5);
-    color: var(--color-red-3);
-    transition: transform 0.2s;
-  }
+.resultsHiddenInfo {
+  font-style: italic;
 }
 
-.blurContainer {
-  display: none;
-  position: absolute;
-  justify-content: center;
+.pollTable {
   width: 100%;
-  height: 100%;
+  font-size: 14px;
 }
 
-.blurOverlay {
-  position: absolute;
-  z-index: 2;
-  color: var(--color-black);
-  margin-top: 25px;
+.pollTable tr {
+  width: 100%;
 }
 
-.optionWrapper:hover .blurContainer {
-  display: flex;
+.pollTable td {
+  border: 0;
+  padding: 5px;
 }
 
-.optionWrapper:hover .blurEffect {
-  filter: blur(3px);
-  pointer-events: none;
+.pollTable .textColumn {
+  text-align: right;
+  line-height: 16px;
+  word-wrap: break-word;
+  width: fit-content;
+  max-width: 200px;
+  padding-right: 13px;
+  border-right: 3px solid #c5c5c5;
 }
 
-.blurArrow {
-  margin-top: 40px;
+.pollTable .graphColumn {
+  width: auto;
+  min-width: 150px;
+  padding-left: 13px;
+  padding-right: 15px;
 }
 
-.alignItems {
+.fullGraph {
   display: flex;
-  justify-content: center;
+  background-color: var(--color-mono-gray-5);
+  color: #000;
+  word-wrap: break-word;
+  width: 100%;
 }
 
-.answered {
-  margin: 15px 0;
-  text-align: center;
-  font-weight: bold;
+.pollGraph {
+  background-color: var(--lego-red);
+  font-style: italic;
+  font-weight: 300;
+  color: var(--color-white);
+  height: 30px;
+  padding-left: 8px;
+  animation: graph 1.2s cubic-bezier(0.41, 0.8, 0.4, 0.94);
+  border-radius: 0 2px 2px 0;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 20%);
 }
 
-.bottomInfo {
-  display: flex;
-  justify-content: space-between;
+.bottomBar,
+.bottomBarExpanded {
+  width: 100%;
+  height: 70px;
+  background-color: var(--lego-red);
+  padding-top: 25px;
+  transition: 0.5s height, 0.5s padding;
 }
 
-.resultsHidden {
-  font-style: italic;
+.bottomBarExpanded {
+  padding-top: 0px;
+  height: 45px;
 }
 
-@media (--mobile-device) {
-  .blurContainer {
-    display: flex;
-  }
-
-  .blurEffect {
-    filter: blur(3px);
-    pointer-events: none;
-  }
+.arrow {
+  text-shadow: 0 2px 2px rgba(0, 0, 0, 20%);
+  color: var(--lego-card-color);
 }
diff --git a/app/components/Poll/__tests__/Poll.spec.js b/app/components/Poll/__tests__/Poll.spec.js
@@ -1,12 +1,5 @@
-import Poll from '../.';
+import { perfectRatios } from '../.';
 
-const props = {
-  poll: {
-    options: [{ votes: 1 }],
-  },
-};
-
-const poll = new Poll(props);
 const perfectRatiosTests = [
   {
     input: [{ ratio: 33.33 }, { ratio: 33.33 }, { ratio: 33.33 }],
@@ -52,7 +45,7 @@ const perfectRatiosTests = [
 describe('poll options', () => {
   it('should add up to 100%', () => {
     perfectRatiosTests.forEach(({ input, output }) => {
-      expect(poll.perfectRatios(input, input)).toEqual(output);
+      expect(perfectRatios(input, input)).toEqual(output);
     });
   });
 });