feat(app): 2-column color picker buttons for mobile UI

Author: ful1e5

src/components/ColorPicker/index.tsx

@@ -85,7 +85,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   return (
     <>
       <div className='flex items-center justify-center'>
-        <div className='w-full md:w-2/3 lg:w-1/2 sm:mx-32 grid grid-cols-4 gap-2 sm:gap-7'>
+        <div className='w-full md:w-2/3 lg:w-1/2 sm:mx-32 grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-7'>
           {Object.entries(props.colors).map(([name, color], i) => (
             <ColorPickerButton
               key={i}

src/components/svgs/gems.tsx

@@ -11,7 +11,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
   if (props.gems === 'Amber') {
     return (
       <svg
-        className='fill-current h-7 sm:h-16'
+        className='fill-current h-10 md:h-16'
         viewBox='0 0 500 500'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'>
@@ -86,7 +86,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
   } else if (props.gems === 'Ice') {
     return (
       <svg
-        className='fill-current h-7 sm:h-16'
+        className='fill-current h-10 md:h-16'
         viewBox='0 0 500 500'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'>
@@ -169,7 +169,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
   } else if (props.gems === 'Classic') {
     return (
       <svg
-        className='fill-current h-7 sm:h-16'
+        className='fill-current h-10 md:h-16'
         viewBox='0 0 500 500'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'>
@@ -250,7 +250,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
   } else {
     return (
       <svg
-        className='fill-current h-7 sm:h-16'
+        className='fill-current h-10 md:h-16'
         viewBox='0 0 500 500'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'>