Update party layout

src/app/app.vue

@@ -179,7 +179,7 @@
     font-size: $font-size-xlarge;
     line-height: 110%;
     font-weight: 600;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+    text-shadow: $text-shadow;
     margin: 0;
 
     @media (max-width: 768px) {
@@ -215,6 +215,16 @@
     }
   }
 
+  svg {
+    stroke: $text-color-base;
+    filter: drop-shadow($text-shadow);
+
+    path,
+    polyline {
+      stroke: $button-color;
+    }
+  }
+
   ::selection {
     color: $text-color-base;
     background: $text-color-special;

src/app/euromat/components/results.vue

@@ -248,7 +248,7 @@
     h2 {
       color: $text-color-base;
       font-weight: 600;
-      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
+      text-shadow: $text-shadow;
 
       span {
         font-weight: 400;
@@ -257,7 +257,7 @@
 
     .results-see-more {
       stroke: $text-color-base;
-      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+      filter: drop-shadow($text-shadow);
       height: 32px;
       width: 32px;
       opacity: 0;

src/app/party/components/index.vue

@@ -16,9 +16,9 @@
 
     <ul class="party-theses-list">
       <li class="list-header">
-        <h2>Thesis</h2>
-        <h2>Partei</h2>
-        <h2>Deine Wahl</h2>
+        <h2>{{ $t('party.table.thesis') }}</h2>
+        <h2>{{ party.token }}</h2>
+        <h2 v-if="!!answers">{{ $t('party.table.user') }}</h2>
       </li>
       <li v-for="thesis in theses">
         <div class="list-thesis">
@@ -26,16 +26,19 @@
           <h3>{{ getThesis(thesis.thesis) }}</h3>
         </div>
 
-        <div class="list-statements">
-          <div class="statements-party">
-            <feather-icon :type="getPartyStatement(thesis.id)" />
-          </div>
-          <div v-if="!!answers" class="statements-user">
-            <feather-icon :type="getUserStatement(thesis.id)" />
-          </div>
+        <div class="statements-party">
+          <feather-icon :type="getPartyStatement(thesis.id)" />
+        </div>
+        <div v-if="!!answers" class="statements-user">
+          <feather-icon :type="getUserStatement(thesis.id)" />
         </div>
       </li>
     </ul>
+
+    <router-link v-if="!!answers" class="btn btn-dark btn-small" :to="{ path: resultsPath }">
+      {{ $t('party.back') }}
+      <feather-corner-up-left />
+    </router-link>
   </section>
 </template>
 
@@ -82,7 +85,7 @@
           case 'negative':
             return 'thumbs-down'
           case 'skipped':
-            return 'corner-up-right'
+            return 'x'
           case 'neutral':
           default:
             return 'circle'
@@ -106,6 +109,9 @@
   @import "~styles/colors";
   @import "~styles/layout";
 
+  $table-column-large: 70%;
+  $table-column-small: 15%;
+
   .party-header {
     display: flex;
     align-items: flex-start;
@@ -142,19 +148,31 @@
     list-style: none;
 
     .list-header {
+      display: flex;
+      justify-content: space-between;
       background: $transparent-white;
       border-radius: $border-radius;
+      padding: $small-gap;
 
       h2 {
+        flex: 1 0 $table-column-small;
         font-size: $font-size-base;
         color: $text-color-base;
         margin: 0;
+        text-align: center;
+      }
+
+      h2:first-of-type {
+        flex: 1 0 $table-column-large;
+        width: $table-column-large;
+        text-align: left;
       }
     }
 
     li {
       padding: $small-gap 0;
       display: flex;
+      align-items: center;
     }
 
     li:not(:last-child):not(.list-header) {
@@ -162,9 +180,18 @@
     }
 
     .list-thesis {
+      flex: 1 0 $table-column-large;
+
       span {
         color: $text-color-secondary;
       }
     }
+
+    .statements-party,
+    .statements-user {
+      flex: 1 0 $table-column-small;
+      display: flex;
+      justify-content: center;
+    }
   }
 </style>

src/app/party/i18n.js

@@ -2,13 +2,21 @@ export default {
   de: {
     party: {
       pageTitle: 'Partei',
-      back: 'Zurück zum Ergebnis'
+      back: 'Zurück zum Ergebnis',
+      table: {
+        thesis: 'Thesis',
+        user: 'Deine Wahl'
+      }
     }
   },
   en: {
     party: {
       pageTitle: 'Party',
-      back: 'Back to results'
+      back: 'Back to results',
+      table: {
+        thesis: 'Theses',
+        user: 'Your choice'
+      }
     }
   }
 }

src/styles/buttons.scss

@@ -18,7 +18,7 @@ button,
   border: none;
   cursor: pointer;
   position: relative;
-  text-shadow: $text-shadow;
+  text-shadow: $button-text-shadow;
   box-shadow: $button-shadow;
   transform: translateY(0);
   transition:
@@ -56,13 +56,8 @@ button,
     stroke: $button-color;
     width: 16px;
     height: 16px;
-    filter: drop-shadow($text-shadow);
+    filter: drop-shadow($button-text-shadow);
     margin-left: $small-gap / 2;
-
-    path,
-    polyline {
-      stroke: $button-color;
-    }
   }
 
   &[disabled] {

src/styles/colors.scss

@@ -12,8 +12,9 @@ $text-color-base: white;
 $text-color-secondary: $dark-blue;
 $text-color-invert: rgba(0, 0, 0, 0.8);
 $text-color-special: $yellow;
-$text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+$text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
 
+$button-text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
 $button-background-primary: linear-gradient(215deg, $yellow 0%, $orange 44%, $pink 100%);
 $button-background-secondary: $transparent-white;
 $button-color: white;