refactor: remove className from icons and add styled-system

package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "build": "vite build",
-    "build:firefox":"BROWSER=firefox vite build",
+    "build:firefox": "BROWSER=firefox vite build",
     "dev": "nodemon"
   },
   "type": "module",
@@ -21,6 +21,7 @@
     "react-intl": "^6.6.2",
     "react-tooltip": "^5.26.2",
     "styled-components": "^6.1.8",
+    "styled-system": "^5.1.5",
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
@@ -30,6 +31,7 @@
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@types/styled-system": "^5.1.22",
     "@types/webextension-polyfill": "^0.10.0",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",

src/components/credentialCard.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from "react-intl";
-import { Text, Subtext, Card } from "@components/ui";
+import { Text, Subtext, Card, Flex, Box } from "@components/ui";
 import CredentialIcon from "@components/shared/icons/credential";
 import ValidIcon from "@components/shared/icons/valid";
 import RevokedIcon from "@components/shared/icons/revoked";
@@ -26,7 +26,7 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
   return (
     <Card>
       <>
-        <div className="flex flex-row justify-between text-xs">
+        <Flex flexDirection="row" justifyContent="space-between" fontSize={0}>
           <div>
             <Text className="font-bold" $color="heading">
               {credential.schema.title}
@@ -35,9 +35,9 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
               {credential.schema.credentialType}
             </Text>
           </div>
-          <CredentialIcon className="w-6 h-6" />
-        </div>
-        <div className="text-xs">
+          <CredentialIcon size={6} />
+        </Flex>
+        <Box fontSize={0}>
           <Text className="font-normal text-md" $color="text">
             {credential.schema.description}
           </Text>
@@ -49,9 +49,9 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
               </Subtext>
             </>
           </Text>
-        </div>
-        <div className="flex flex-row justify-between text-xs">
-          <div className="">
+        </Box>
+        <Flex flexDirection="row" justifyContent="space-between" fontSize={0}>
+          <div>
             <Text className="font-bold" $color="heading">
               {formatMessage({ id: "credential.lastUsed.label" })}{" "}
             </Text>
@@ -61,16 +61,16 @@ export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
           </div>
           {credential.status?.et === "iss" ? (
             <div className="flex flex-col items-center text-green">
-              <ValidIcon className="w-6 h-6" />
+              <ValidIcon size={6} />
               <p>{formatMessage({ id: "credential.valid" })}</p>
             </div>
           ) : (
             <div className="flex flex-col items-center text-red">
-              <RevokedIcon className="w-6 h-6" />
+              <RevokedIcon size={6} />
               <p>{formatMessage({ id: "credential.revoked" })}</p>
             </div>
           )}
-        </div>
+        </Flex>
       </>
     </Card>
   );

src/components/identifierCard.tsx

@@ -25,7 +25,7 @@ export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element {
               </Subtext>
             </Text>
           </div>
-          <IdentifierIcon className="w-6 h-6" />
+          <IdentifierIcon size={6} />
         </div>
         <div>
           <Text className="font-bold text-xs" $color="heading">
@@ -48,7 +48,7 @@ export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element {
                 navigator.clipboard.writeText(aid.prefix);
               }}
             >
-              <CopyIcon className="w-3 h-3" />
+              <CopyIcon size={3} />
             </button>
           </div>
         </ReactTooltip>

src/components/shared/icons/auto-signin.tsx

@@ -1,6 +1,18 @@
-export default function AutoSignin({ className }: { className?: string }) {
+export default function AutoSignin({
+  size,
+  scale = 4,
+}: {
+  size: number;
+  scale?: number;
+}) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      width={size * scale}
+      height={size * scale}
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M20 12C20 7.58172 16.4183 4 12 4M12 20C14.5264 20 16.7792 18.8289 18.2454 17"
         stroke="currentColor"

src/components/shared/icons/copy.tsx

@@ -1,7 +1,14 @@
-export default function Copy({ className }: { className?: string }) {
+export default function Copy({
+  size,
+  scale = 4,
+}: {
+  size: number;
+  scale?: number;
+}) {
   return (
     <svg
-      className={className}
+      width={size * scale}
+      height={size * scale}
       viewBox="0 0 20 20"
       xmlns="http://www.w3.org/2000/svg"
       fill="none"

src/components/shared/icons/credential.tsx

@@ -1,12 +1,19 @@
-export default function Credential({ className }: { className?: string }) {
+export default function Credential({
+  size,
+  scale = 4,
+}: {
+  size: number;
+  scale?: number;
+}) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       viewBox="0 0 24 24"
       stroke-width="1.5"
       stroke="currentColor"
-      className={className}
+      width={size * scale}
+      height={size * scale}
     >
       <path
         stroke-linecap="round"

src/components/shared/icons/eye-off.tsx

@@ -1,7 +1,14 @@
-export default function EyeOff({ className }: { className?: string }) {
+export default function EyeOff({
+  size,
+  scale = 4,
+}: {
+  size: number;
+  scale?: number;
+}) {
   return (
     <svg
-      className={className}
+      width={size * scale}
+      height={size * scale}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"

src/components/shared/icons/eye.tsx

@@ -1,7 +1,14 @@
-export default function Eye({ className }: { className?: string }) {
+export default function Eye({
+  size,
+  scale = 4,
+}: {
+  size: number;
+  scale?: number;
+}) {
   return (
     <svg
-      className={className}
+      width={size * scale}
+      height={size * scale}
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"