add styles for fantasy buttons

moved avatar styles to theme config apply avatar fantasy style
Sitecore · Feb 7, 2024 · afefc07 · afefc07
1 parent 18d00f4
commit afefc07
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git a/src/chakra/theme/corporate/button.ts b/src/chakra/theme/corporate/button.ts
@@ -7,4 +7,13 @@ export const buttonTheme = defineStyleConfig({
     whiteSpace: 'normal',
     wordBreak: 'break-word',
   },
+  variants: {
+    avatar: {
+      borderRadius: '50%',
+      boxShadow: '0 4px 15px 0 rgba(45, 54, 65, 0.5)',
+      _active: {
+        boxShadow: '0 0 5px 5px #5548D9',
+      },
+    },
+  },
 });
diff --git a/src/chakra/theme/fantasy/button.ts b/src/chakra/theme/fantasy/button.ts
@@ -15,7 +15,7 @@ export const buttonTheme = defineStyleConfig({
   variants: {
     iconOnly: {
       background: 'none',
-      backgroundImage: '/fantasy/icon-button-default.svg',
+      //backgroundImage: '/fantasy/icon-button-default.svg',
       backgroundRepeat: 'no-repeat',
       backgroundSize: 'contain',
       backgroundPosition: 'center center',
@@ -48,25 +48,26 @@ export const buttonTheme = defineStyleConfig({
       overflow: 'hidden',
       color: '#ffffff',
       position: 'relative',
+      background: '#522d5b',
+      fontFamily: 'var(--font-fondamento)',
+      paddingX: '1.5em',
+      clipPath: 'polygon(5% 50%,10% 0,90% 0,95% 50%,90% 90%,90% 90%,5% 90%,10% 90%,5% 50%)',
       _hover: {
-        boxShadow: '1px 1px 25px 10px rgba(146, 148, 248, 0.4)',
-        _before: {
-          left: '100%',
-        },
-      },
-      _before: {
-        content: `''`,
-        position: 'absolute',
-        top: 0,
-        left: '-100%',
-        width: '100%',
-        height: '100%',
-        background: 'linear-gradient(120deg,transparent,rgba(146, 148, 248, 0.4),transparent)',
-        transition: 'all 650ms',
+        backgroundImage: 'linear-gradient(90deg, rgba(41,50,60,1) 0%, rgba(38,152,31,.6) 50%, rgba(78,67,118,1) 100%)',
       },
       _active: {
         backgroundImage: 'linear-gradient(90deg, rgba(41,50,60,1) 0%, rgba(38,152,31,1) 50%, rgba(78,67,118,1) 100%)',
       },
     },
+    avatar: {
+      borderRadius: '50%',
+      boxShadow: '0 4px 15px 0 rgba(45, 54, 65, 0.5)',
+      _active: {
+        borderColor: '#522d5b',
+        borderWidth: '4px',
+        borderStyle: 'outset',
+        boxShadow: '0 0 5px 5px #26981f',
+      },
+    },
   },
 });
diff --git a/src/components/ui/ChooseCharacterDisplay/AvatarGallery/AvatarGallery.tsx b/src/components/ui/ChooseCharacterDisplay/AvatarGallery/AvatarGallery.tsx
@@ -31,7 +31,6 @@ export const AvatarGallery: FC<AvatarGalleryProps> = ({ avatars, toggledAvatarId
                     shadow={'md'}
                     width={['60px', '80px', '100px']}
                     height={['60px', '80px', '100px']}
-                    boxShadow={isToggled ? '0 0 5px 5px #5548D9' : '0 4px 15px 0 rgba(45, 54, 65, 0.5)'}
                     isActive={avatar.id === toggledAvatarId}
                     variant={'avatar'}
                   />