feat: add Context colours in ShortLink view and use last SDK types

graasp · Nov 10, 2023 · 2f12bc6 · 2f12bc6
1 parent d9b60b0
commit 2f12bc6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/src/components/item/sharing/ShortLink.tsx b/src/components/item/sharing/ShortLink.tsx
@@ -18,7 +18,7 @@ import {
 
 import { Context } from '@graasp/sdk';
 import { FAILURE_MESSAGES, SUCCESS_MESSAGES } from '@graasp/translations';
-import { BuildIcon, LibraryIcon, PlayIcon } from '@graasp/ui';
+import { AccentColors, BuildIcon, LibraryIcon, PlayIcon } from '@graasp/ui';
 
 import QRCode from '@/components/common/QRCode';
 import {
@@ -62,6 +62,11 @@ const StyledLink = styled(Link)(() => ({
   overflowWrap: 'anywhere',
 }));
 
+const StyledText = styled('p')(({ color = 'auto' }) => ({
+  color,
+  textTransform: 'capitalize',
+}));
+
 const DEFAULT_ICON_SIZE = 25;
 
 const ShortLink = ({
@@ -127,14 +132,14 @@ const ShortLink = ({
     setModalOpen(true);
   };
 
-  const getIcon = (size: number = DEFAULT_ICON_SIZE) => {
+  const getIcon = (accentColor: string, size: number = DEFAULT_ICON_SIZE) => {
     switch (linkType) {
       case Context.Builder:
-        return <BuildIcon size={size} />;
+        return <BuildIcon size={size} primaryColor={accentColor} />;
       case Context.Player:
-        return <PlayIcon size={size} />;
+        return <PlayIcon size={size} primaryColor={accentColor} />;
       case Context.Library:
-        return <LibraryIcon size={size} />;
+        return <LibraryIcon size={size} primaryColor={accentColor} />;
       default:
         return null;
     }
@@ -166,9 +171,9 @@ const ShortLink = ({
           justifyContent="space-between"
           spacing={2}
         >
-          <StyledBox minWidth="120px" direction="row" spacing={1}>
-            {getIcon()}
-            <p>{linkType.toUpperCase()}</p>
+          <StyledBox minWidth="120px" direction="row" spacing={1} color="white">
+            {getIcon(AccentColors[linkType])}
+            <StyledText color={AccentColors[linkType]}>{linkType}</StyledText>
           </StyledBox>
           <StyledLink textAlign={textAlign}>{url}</StyledLink>
         </Stack>

diff --git a/yarn.lock b/yarn.lock
@@ -1766,7 +1766,7 @@ __metadata:
 
 "@graasp/sdk@github:graasp/graasp-sdk#664-add-short-links-feature":
   version: 2.1.0
-  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=2b7a6e8b72a6b84eba149187e39c08388fa44038"
+  resolution: "@graasp/sdk@https://github.com/graasp/graasp-sdk.git#commit=9d9a79066d159ddb838d7f3600e25b69cee37e5a"
   dependencies:
     "@aws-sdk/client-s3": 3.441.0
     "@graasp/etherpad-api": 2.1.1
@@ -1775,7 +1775,7 @@ __metadata:
     js-cookie: 3.0.5
     uuid: 9.0.1
     validator: 13.11.0
-  checksum: 22273bd5b593c9cbe233d8c5f101371bb87c4b30164ef73ac5fd561399b3485f9c2ef5267f9264d1c311d5732a6924d1a2c6c4f97f3d6b815c38b5d018ce0a24
+  checksum: d4e607693c09c8342f565c7bccc219ab399b02f627194cf0982b0cbeaf93d85cbb5892143cbea1041ebea616c10b3f77b530830e68fedaf3a1c41822d74c7837
   languageName: node
   linkType: hard