fix: React and sass warnings

Author: joonatank

apps/admin-ui/src/styles/global.scss

@@ -1,5 +1,5 @@
-@import "font";
-@import "variables";
+@use "font";
+@use "variables";
 
 a {
   text-underline-offset: 2px;

apps/ui/styles/global.scss

@@ -1,5 +1,5 @@
-@import "font";
-@import "variables";
+@use "font";
+@use "variables";
 
 /* TODO is this correct? if it's it should be in common/styles/global.scss */
 a {

packages/common/src/components/Card.tsx

@@ -376,19 +376,9 @@ function Texts({
   );
 }
 
-const addKey = (Component: JSX.Element, key: number): JSX.Element => {
-  return React.cloneElement(Component, {
-    key: Component.props.key ?? key,
-  });
-};
-
 function Tags({ tags }: Readonly<{ tags?: JSX.Element[] }>) {
   if (!tags) return null;
-  return (
-    <TagContainer data-test-id="card__tags">
-      {tags.map((tag, i) => addKey(tag, i))}
-    </TagContainer>
-  );
+  return <TagContainer data-test-id="card__tags">{tags}</TagContainer>;
 }
 
 const InfoItem = styled(Flex).attrs({
@@ -407,13 +397,13 @@ function Infos({
 }>) {
   if (!infos) return null;
   return (
-    <InfoContainer data-testId="data-testId">
+    <InfoContainer>
       {infos.map((info) => (
         <Info
           key={info.value}
           value={info.value}
           icon={info.icon}
-          data-test-id={info.testId}
+          data-testid={info.testId}
         />
       ))}
     </InfoContainer>
@@ -423,9 +413,10 @@ function Infos({
 function Info({
   value,
   icon,
+  ...rest
 }: Readonly<{ value: string; icon?: JSX.Element }>) {
   return (
-    <InfoItem>
+    <InfoItem {...rest}>
       {icon}
       <span>{value}</span>
     </InfoItem>
@@ -434,7 +425,5 @@ function Info({
 
 function Buttons({ buttons }: Readonly<{ buttons?: JSX.Element[] }>) {
   if (!buttons) return null;
-  return (
-    <ButtonContainer>{buttons.map((btn, i) => addKey(btn, i))}</ButtonContainer>
-  );
+  return <ButtonContainer>{buttons}</ButtonContainer>;
 }

packages/common/styles/global.scss

@@ -1,4 +1,4 @@
-@import "variables";
+@use "variables";
 
 /* hack to deal with iPhone user agent overriding inherited colours with apple-system-blue */
 input:is([type="button"], [type="submit"], [type="reset"]),