more adjustments for subclass selector

Author: dragoni7

src/app/routes/Dashboard.tsx

@@ -449,7 +449,7 @@ export const Dashboard: React.FC = () => {
               justifyContent="space-evenly"
               sx={{ width: '100vw', height: '100vh', overflowY: 'auto', paddingTop: '120px' }}
             >
-              <Grid item md={4} sx={{ marginTop: '1%' }}>
+              <Grid item md={4} sx={{ marginTop: '2%' }}>
                 <Stack spacing={1} rowGap={6} marginLeft={1} alignItems="center">
                   <SubclassSelector
                     subclasses={subclasses}

src/features/subclass/components/SubclassSelector.css

@@ -69,8 +69,8 @@
 }
 
 .single-diamond-button {
-  width: 28%;
-  height: 28%;
+  width: 20%;
+  height: 20%;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -154,7 +154,3 @@
 .prismatic-active .single-diamond-button {
   transition: all 0.3s ease;
 }
-
-.prismatic-active.single-diamond-wrapper {
-  gap: 1%;
-}

src/features/subclass/components/SubclassSelector.tsx

@@ -164,7 +164,7 @@ const SubclassSelector: React.FC<SubclassSelectorProps> = ({
         transform: x.to((x) => `translateX(${x * 40}px)`),
       }}
     >
-      <Stack direction="row" columnGap={8} justifyContent="flex-start" alignItems="center">
+      <Stack direction="row" spacing={10} justifyContent="center" alignItems="center">
         {!isPrismaticActive && (
           <Box className="diamond-grid">
             {subclasses &&
@@ -200,6 +200,19 @@ const SubclassSelector: React.FC<SubclassSelectorProps> = ({
         )}
         {isPrismaticActive ? (
           <>
+            <animated.div
+              className="single-diamond-button"
+              style={{
+                transform: x.to((x) => `scale(${1 - x * 0.4})`),
+              }}
+              onClick={() => handleSelect(lastNonPrismaticSubclass!)}
+            >
+              <img
+                src={lastNonPrismaticSubclass!.subclass.icon}
+                alt={lastNonPrismaticSubclass!.subclass.name}
+                className="diamond-icon"
+              />
+            </animated.div>
             <div
               className="prismatic-button diamond-shape"
               onClick={(event) => {
@@ -217,19 +230,7 @@ const SubclassSelector: React.FC<SubclassSelectorProps> = ({
                 className="diamond-icon"
               />
             </div>
-            <animated.div
-              className="single-diamond-button"
-              style={{
-                transform: x.to((x) => `scale(${1 - x * 0.4})`),
-              }}
-              onClick={() => handleSelect(lastNonPrismaticSubclass!)}
-            >
-              <img
-                src={lastNonPrismaticSubclass!.subclass.icon}
-                alt={lastNonPrismaticSubclass!.subclass.name}
-                className="diamond-icon"
-              />
-            </animated.div>
+            <Box className="diamond-grid" />
           </>
         ) : (
           <>
@@ -266,7 +267,9 @@ const SubclassSelector: React.FC<SubclassSelectorProps> = ({
                   className="circular-icon"
                 />
               </div>
-            ) : null}
+            ) : (
+              false
+            )}
           </>
         )}
       </Stack>