From 5f8d6429d883850dac8a51dfb3863e986b4f0c7c Mon Sep 17 00:00:00 2001
From: Luxumbra <me@luxumbra.dev>
Date: Mon, 7 Jun 2021 16:04:22 +0100
Subject: [PATCH] Feature/550 personality type styles (#628)

* Gradients, colours & Icons added as per Figma

* forgot to remove `SVG` from the ds import

* formatting improvements

* Added in the correct colour value for courage
removed the quotes and added correct font (mono) for the type title

* Tweak to the white type to be moar white.

* responses to feedback from @dysbulic
---
 packages/web/assets/colors/Ambition.svg     | 21 ++++-----
 packages/web/assets/colors/Balance.svg      | 16 ++-----
 packages/web/assets/colors/Wisdom.svg       | 32 +++++--------
 packages/web/components/Player/ColorBar.tsx | 51 +++++++++++++--------
 packages/web/graphql/getPersonalityInfo.ts  | 17 ++++---
 5 files changed, 68 insertions(+), 69 deletions(-)

diff --git a/packages/web/assets/colors/Ambition.svg b/packages/web/assets/colors/Ambition.svg
index 9d2e4820..bba3cc6c 100644
--- a/packages/web/assets/colors/Ambition.svg
+++ b/packages/web/assets/colors/Ambition.svg
@@ -1,15 +1,14 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg version="1.1" viewBox="0 0 141.91 137.27" xmlns="http://www.w3.org/2000/svg">
+<svg width="132" height="133" viewBox="0 0 132 133" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M93.3509 6.637C79.0269 23.014 76.3639 38.142 85.3699 50.951C96.3789 66.61 109.92 69.709 131.058 61.409C134.84 80.8 123.568 110.245 97.2949 124.373C71.2669 138.369 36.8129 134.208 15.0639 108.075C-3.64608 85.593 -5.36607 51.237 13.9789 25.856C32.0089 2.19901 65.7779 -6.227 93.3509 6.637Z"
+    fill="url(#paint0_linear)" />
   <defs>
-    <linearGradient id="linearGradient1365" x2="1" gradientTransform="matrix(0 49.54 49.54 0 119.75 520.38)" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#020121" offset="0"/>
-      <stop stop-color="#2f3e57" offset=".69367"/>
-      <stop stop-color="#2f3e57" offset="1"/>
+    <linearGradient id="paint0_linear" x1="66.0005" y1="132.258" x2="66.0005" y2="0.628509"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#020121" />
+      <stop offset="0.4155" stop-color="#1A223E" />
+      <stop offset="0.7668" stop-color="#293750" />
+      <stop offset="1" stop-color="#2F3E57" />
     </linearGradient>
   </defs>
-  <g transform="translate(-20.653 -9.4842)">
-    <g transform="matrix(2.7709 0 0 -2.7709 -240.2 1588.7)">
-      <path d="m118.35 569.3-20.208-22.702c-1.084-1.212-0.224-3.223 1.402-3.223h12.945l-17.785-19.634c-1.256-1.405-0.259-3.365 1.625-3.365h46.848c1.883 0 2.881 1.96 1.625 3.365l-17.786 19.634h12.946c1.625 0 2.486 2.024 1.402 3.236l-20.208 22.664c-0.38 0.425-0.904 0.64-1.426 0.64-0.507 0-1.011-0.203-1.38-0.615" fill="url(#linearGradient1365)"/>
-    </g>
-  </g>
 </svg>
diff --git a/packages/web/assets/colors/Balance.svg b/packages/web/assets/colors/Balance.svg
index 4e59e78f..147655f3 100644
--- a/packages/web/assets/colors/Balance.svg
+++ b/packages/web/assets/colors/Balance.svg
@@ -1,15 +1,9 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 131.71 131.7" xmlns="http://www.w3.org/2000/svg">
+<svg width="109" height="133" viewBox="0 0 109 133" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M22.6929 27.664C29.8079 19.197 38.1149 11.719 47.1569 5.32697C49.1439 3.92197 51.1689 2.56998 53.2299 1.27398C54.1229 0.71198 54.7819 0.654976 55.7069 1.25398C74.8969 13.684 91.0169 28.989 100.954 49.969C107.251 63.264 109.544 77.248 106.997 91.831C105.755 98.943 102.656 105.145 96.6289 109.485C91.7589 112.992 86.1429 114.379 80.2449 114.692C72.9289 115.08 65.8049 113.891 58.7979 111.882C58.7169 111.859 58.6349 111.835 58.5539 111.812C58.5539 114.628 58.5539 125.055 58.5539 132.057C57.4959 132.057 51.3899 132.057 50.1859 132.057C50.1859 125.196 50.1859 113.873 50.1859 111.902C49.2349 112.164 48.2509 112.418 47.3019 112.647C39.6069 114.504 31.8249 115.662 23.9569 114.087C11.2719 111.549 4.2569 104.481 1.9609 91.769C-0.8171 76.389 1.95093 61.743 9.05593 48.006C12.8289 40.714 17.4359 33.919 22.6929 27.664Z" fill="url(#paint0_linear)"/>
   <defs>
-    <linearGradient id="linearGradient1387" x2="1" gradientTransform="matrix(0 -51.25 -51.25 0 620.06 570.38)" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#9cce62" offset="0"/>
-      <stop stop-color="#009b5b" offset=".98876"/>
-      <stop stop-color="#009b5b" offset="1"/>
+    <linearGradient id="paint0_linear" x1="54.458" y1="132.058" x2="54.458" y2="0.828078" gradientUnits="userSpaceOnUse">
+      <stop offset="0.0112" stop-color="#0E9651"/>
+      <stop offset="1" stop-color="#9FD638"/>
     </linearGradient>
   </defs>
-  <g transform="translate(-19.625 -6.5215)">
-    <g transform="matrix(2.5699 0 0 -2.5699 -1508 1472.3)">
-      <path d="m594.44 544.76c0-14.129 11.496-25.625 25.625-25.625 14.13 0 25.626 11.496 25.626 25.625 0 14.13-11.496 25.624-25.626 25.624-14.129 0-25.625-11.494-25.625-25.624m3.622 0c0 12.133 9.87 22.004 22.003 22.004s22.004-9.871 22.004-22.004-9.871-22.004-22.004-22.004-22.003 9.871-22.003 22.004m8.701 0c0-7.347 5.955-13.303 13.303-13.303 7.347 0 13.302 5.956 13.302 13.303 0 7.346-5.955 13.303-13.302 13.303-7.348 0-13.303-5.957-13.303-13.303" fill="url(#linearGradient1387)"/>
-    </g>
-  </g>
 </svg>
diff --git a/packages/web/assets/colors/Wisdom.svg b/packages/web/assets/colors/Wisdom.svg
index 2492feba..92777432 100644
--- a/packages/web/assets/colors/Wisdom.svg
+++ b/packages/web/assets/colors/Wisdom.svg
@@ -1,25 +1,15 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg version="1.1" viewBox="0 0 136.2 130.09" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<svg width="105" height="132" viewBox="0 0 105 132" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M51.6833 131.928C31.7253 131.928 9.99338 116.103 3.23738 96.651C-1.91862 81.802 -0.0036974 66.4 8.6313 53.282C13.8603 45.34 50.2344 0.901023 52.1334 0.957023L52.3963 0.962028L52.7574 0.957023C54.6594 0.924023 88.3474 40.748 96.3474 52.521V52.522C109.347 73.152 106.077 102.006 87.2744 118.211C77.7234 126.445 67.8423 131.928 51.6833 131.928Z"
+    fill="url(#paint0_linear)" />
   <defs>
-    <linearGradient id="linearGradient1439" x2="1" gradientTransform="matrix(0 -49.577 -49.577 0 1118.7 569.96)" gradientUnits="userSpaceOnUse">
-      <stop stop-color="#09b9f2" offset="0"/>
-      <stop stop-color="#09b9f2" offset=".080645"/>
-      <stop stop-color="#09b9f2" offset=".2827"/>
-      <stop stop-color="#04468b" offset="1"/>
+    <linearGradient id="paint0_linear" x1="52.2926" y1="0.957923" x2="52.2926" y2="131.928"
+      gradientUnits="userSpaceOnUse">
+      <stop offset="0.0806" stop-color="#09B9F2" />
+      <stop offset="0.228" stop-color="#09AEE8" />
+      <stop offset="0.4874" stop-color="#0791CE" />
+      <stop offset="0.8258" stop-color="#0561A3" />
+      <stop offset="1" stop-color="#04468B" />
     </linearGradient>
   </defs>
-  <metadata>
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-        <dc:title/>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g transform="translate(-19.169 -4.0977)">
-    <g transform="matrix(2.624 0 0 -2.624 -2848.2 1499.6)">
-      <path d="m1116.8 568.76-6.352-12.871c-0.314-0.636-0.92-1.076-1.621-1.177l-14.205-2.065c-1.765-0.256-2.47-2.426-1.192-3.672l10.278-10.019c0.507-0.494 0.739-1.207 0.619-1.905l-2.426-14.146c-0.302-1.759 1.544-3.101 3.124-2.27l12.704 6.679c0.626 0.33 1.376 0.33 2.003 0l12.705-6.679c1.579-0.831 3.425 0.511 3.124 2.27l-2.427 14.146c-0.119 0.698 0.112 1.411 0.619 1.905l10.279 10.019c1.277 1.246 0.572 3.416-1.194 3.672l-14.204 2.065c-0.701 0.101-1.307 0.541-1.621 1.177l-6.352 12.871c-0.395 0.8-1.163 1.2-1.931 1.2-0.767 0-1.535-0.4-1.93-1.2" fill="url(#linearGradient1439)"/>
-    </g>
-  </g>
 </svg>
diff --git a/packages/web/components/Player/ColorBar.tsx b/packages/web/components/Player/ColorBar.tsx
index 79e4bc80..dfcef28a 100644
--- a/packages/web/components/Player/ColorBar.tsx
+++ b/packages/web/components/Player/ColorBar.tsx
@@ -1,4 +1,4 @@
-import { Box, ChakraProps, Flex, SVG } from '@metafam/ds';
+import { Box, ChakraProps, Flex } from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
 import { colors, getPersonalityInfo, images } from 'graphql/getPersonalityInfo';
 import { PersonalityOption } from 'graphql/types';
@@ -39,15 +39,23 @@ export const ColorBar = ({
   }, []);
 
   return (
-    <Flex direction="column" maxW="100%" className="color-bar" {...props}>
-      <Flex maxW="100%" minH="1.5rem" mb="1rem">
+    <Flex
+      direction="column-reverse"
+      w="100%"
+      maxW="100%"
+      className="color-bar"
+      {...props}
+    >
+      <Flex maxW="100%" minH="1.5rem" mt={3}>
         {parts.map((part) => {
           const set = (mask & part.mask) !== 0;
 
           return !set ? null : ( // if the bit isn't set // return null for map to work
-            <Flex key={part.mask} grow={1} justify="center" opacity={0.75}>
+            <Flex key={part.mask} grow={1} justify="center" opacity={1}>
               <Box
-                bgColor="white"
+                bg={`linear-gradient(to top, ${colors[part.mask].start}, ${
+                  colors[part.mask].end
+                })`}
                 h={6}
                 w={6}
                 title={part.name}
@@ -57,26 +65,29 @@ export const ColorBar = ({
           );
         })}
       </Flex>
-      <Flex minH="calc(1.5rem + 4px)" maxW="100%" border="2px" borderRadius={3}>
+      <Flex
+        minH="1.5rem"
+        flex="0 0 100%"
+        minW="100%"
+        border="0"
+        borderRadius="15px"
+        overflow="hidden"
+      >
         {parts.map((part) =>
           (mask & part.mask) === 0 ? null : (
-            <Flex key={part.mask} grow={1} h="1.5rem">
-              <SVG viewBox="0 0 100 100" preserveAspectRatio="none" w="100%">
-                <defs>
-                  <linearGradient id="shading" gradientTransform="rotate(90)">
-                    <stop offset="5%" stopColor="black" stopOpacity={0.5} />
-                    <stop offset="95%" stopColor="white" stopOpacity={0.25} />
-                  </linearGradient>
-                </defs>
-                <rect width="100%" height="100%" fill={colors[part.mask]} />
-                <rect width="100%" height="100%" fill="url(#shading)" />
-              </SVG>
-            </Flex>
+            <Flex
+              key={part.mask}
+              grow={1}
+              h="1.5rem"
+              bg={`linear-gradient(to right, ${colors[part.mask].start}, ${
+                colors[part.mask].end
+              })`}
+            />
           ),
         )}
       </Flex>
-      <FlexContainer mt={1}>
-        <q>{types?.[mask]?.name}</q>
+      <FlexContainer mb={2} fontFamily="mono">
+        <Box as="span">{types?.[mask]?.name}</Box>
       </FlexContainer>
     </Flex>
   );
diff --git a/packages/web/graphql/getPersonalityInfo.ts b/packages/web/graphql/getPersonalityInfo.ts
index c439074b..a9f1a6e5 100644
--- a/packages/web/graphql/getPersonalityInfo.ts
+++ b/packages/web/graphql/getPersonalityInfo.ts
@@ -20,6 +20,11 @@ const AspectsQuery = gql`
   }
 `;
 
+export type ColorStops = {
+  start: string;
+  end: string;
+};
+
 export const images: {
   [x: number]: string;
 } = {
@@ -31,13 +36,13 @@ export const images: {
 };
 
 export const colors: {
-  [x: number]: string;
+  [x: number]: ColorStops;
 } = {
-  0b10000: '#c4aab4',
-  0b01000: '#0273b2',
-  0b00100: '#141a36',
-  0b00010: '#b72d5b',
-  0b00001: '#36ae60',
+  0b10000: { start: '#DCA8A9', end: '#ffffff' },
+  0b01000: { start: '#04468B', end: '#09B9F2' },
+  0b00100: { start: '#020121', end: '#2F3E57' },
+  0b00010: { start: '#94136E', end: '#F15236' },
+  0b00001: { start: '#0E9651', end: '#9FD638' },
 };
 
 export const getPersonalityInfo = async (): Promise<{