@magicgol/polyjuice 0.40.3 → 0.40.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.40.3",
+  "version": "0.40.5",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/components/components/label/Label.stories.js

@@ -13,7 +13,7 @@ export default {
     },
     theme: {
       control: { type: 'select' },
-      options: ['light', 'dark', 'tag', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'],
+      options: ['light', 'dark', 'tag', 'target', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'],
       defaultValue: 'light'
     },
     default: {

package/src/components/components/label/Label.vue

@@ -26,7 +26,19 @@ export default {
       type: String,
       default: 'light',
       validator: function (value) {
-        return ['light', 'dark', 'tag', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'].indexOf(value) !== -1;
+        return [
+          'light',
+          'dark',
+          'tag',
+          'target',
+          'club',
+          'trial',
+          'goalkeeper',
+          'defender',
+          'midfielder',
+          'forward',
+          'success'
+        ].indexOf(value) !== -1;
       },
     },
   },
@@ -40,6 +52,7 @@ export default {
         'mg-label--theme-light': this.theme === 'light',
         'mg-label--theme-dark': this.theme === 'dark',
         'mg-label--theme-tag': this.theme === 'tag',
+        'mg-label--theme-target': this.theme === 'target',
         'mg-label--theme-club': this.theme === 'club',
         'mg-label--theme-trial': this.theme === 'trial',
         'mg-label--theme-goalkeeper': this.theme === 'goalkeeper',
@@ -59,10 +72,11 @@ export default {
   .mg-label {
     border-radius: 32px;
     padding: 0.125rem;
+    white-space: nowrap;
 
     > div {
-      padding-top: 0.0625rem;
-      padding-bottom: 0.0625rem;
+      display: inline-flex;
+      align-items: center;
       border-radius: 32px;
       font-family: 'Raleway', sans-serif;
       font-weight: 700;
@@ -73,12 +87,16 @@ export default {
         font-size: 0.625rem;
 
         > div {
-          line-height: 1.1;
+          height: 0.875rem;
         }
       }
 
       &-normal {
         font-size: 0.875rem;
+
+        > div {
+          height: 1.5rem;
+        }
       }
     }
 
@@ -107,6 +125,18 @@ export default {
         color: map-get($palette, 'brand');
       }
 
+      &-target {
+        background-color: map-get($palette, 'brand');
+        > div {
+          background: #fff;
+          svg {
+            height: 12px;
+            width: 12px;
+          }
+        }
+        color: map-get($palette, 'brand');
+      }
+
       &-club {
         background: map-get($palette, 'club');
         > div {

package/src/components/context/user/profile-image/ProfileImage.vue

@@ -172,12 +172,11 @@ export default {
     }
 
     &-ribbon {
-      height: 24px;
       right: 0;
-      margin-right: -6px;
-      margin-top: -6px;
+      margin-right: -10%;
+      margin-top: -10%;
       top: 0;
-      width: 24px;
+      width: 40%;
 
       svg {
         fill: #075169;