refactor: rename files

Author: lokesh-coder

src/@chakra-ui/gatsby-plugin/theme.js

@@ -1,10 +1,6 @@
 import { extendTheme } from '@chakra-ui/react';
 
 const theme = extendTheme({
-  config: {
-    useSystemColorMode: true,
-    initialColorMode: 'light',
-  },
   colors: {
     primary: '#d7819b',
     dark: {

src/components/actions.js renamed to src/components/BlobActionBar.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Container, Box, HStack } from '@chakra-ui/react';
-import RandomizerBtn from './randomizer-btn';
-import HtmlCodeModalButton from './Settings/HtmlCodeModalButton';
+import RandomizerBtn from './Controls/RandomizerButton';
+import HtmlCodeModalButton from './Controls/HtmlCodeModalButton';
 import { dynamic } from '../state';
-import FlutterCodeModalButton from './Settings/FlutterCodeModalButton';
+import FlutterCodeModalButton from './Controls/FlutterCodeModalButton';
 
-const Actions = () => (
+const BlobActionBar = () => (
   <Box mt="10">
     <Container centerContent maxW="sm">
       <HStack spacing="24px">
@@ -17,4 +17,4 @@ const Actions = () => (
   </Box>
 );
 
-export default dynamic(Actions);
+export default dynamic(BlobActionBar);

src/components/BlobContainer.js

@@ -1,7 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { dynamic } from '../state';
-import { createFixedBlob, createInitialBlob, setBlobTheme } from '../utilities';
-import Blob from './blob';
+import {
+  createFixedBlob,
+  createInitialBlob,
+  setBlobTheme,
+} from '../utils/blob.utils';
+import Blob from './Blob';
 
 const BlobContainer = (props) => {
   const { edges, growth, color, colors, type, isOutline, svgPath } = props;

src/components/BlobSettingsSection.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box, Divider, HStack } from '@chakra-ui/react';
+
+import RandomnessSlider from './Controls/RandomnessSlider';
+import ComplexitySlider from './Controls/ComplexitySlider';
+import SolidColorPicker from './Controls/SolidColorPicker';
+import GradientColorsPicker from './Controls/GradientColorsPicker';
+import OutlineToggleButton from './Controls/OutlineToggleButton';
+import ImageSetter from './Controls/ImageSetter';
+import PatternSetter from './Controls/PatternSetter';
+
+const BlobSettingsSection = () => (
+  <Box px={{ lg: 10 }} py="5">
+    <RandomnessSlider />
+    <ComplexitySlider />
+    <Divider my="5" />
+    <HStack justifyContent="center" alignItems="center">
+      <SolidColorPicker />
+      <GradientColorsPicker />
+      <PatternSetter />
+      <ImageSetter />
+      <OutlineToggleButton />
+    </HStack>
+    <Divider mt="5" />
+  </Box>
+);
+
+export default BlobSettingsSection;

src/components/Common/Hint.js

@@ -9,7 +9,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 import React from 'react';
-import { QuestionIcon } from '../icons';
+import { QuestionIcon } from './Icons';
 
 const Hint = ({ text }) => (
   <Popover autoFocus={false}>

src/components/icons.js renamed to src/components/Common/Icons.js

@@ -1,6 +1,6 @@
 import { Box, Input as ChakInput } from '@chakra-ui/react';
 import React from 'react';
-import { validateHex } from '../../utilities';
+import { validateHex } from '../../utils/code.utils';
 
 const Input = ({ value, onEnter }) => (
   <Box key={value}>

src/components/Common/Input.js

@@ -10,7 +10,7 @@ import React from 'react';
 import { dynamic } from '../../state';
 import Highlight from '../Common/Highlight';
 import Modal from '../Common/Modal';
-import { FlutterIcon, CopyIcon } from '../icons';
+import { FlutterIcon, CopyIcon } from '../Common/Icons';
 
 const FlutterCodeModalButton = ({ edges, growth, seed }) => {
   const ID = `${edges}-${growth}-${seed}`;