v12

README.md

@@ -5,6 +5,10 @@
 [![GitHub license](https://img.shields.io/github/license/pluginsky/invert-color?style=flat-square)](https://github.com/pluginsky/invert-color)
 [![Travis](https://img.shields.io/travis/pluginsky/invert-color/master?style=flat-square)](https://travis-ci.org/pluginsky/invert-color)
 
+<p align="center">
+  <img width="420" src="https://raw.githubusercontent.com/pluginsky/invert-color/main/assets/preview.jpg" alt="TODO">
+</p>
+
 ## About
 
 Simply invert fills, strokes & effects colors in Figma

src/ui/components/Configurator/Configurator.module.scss

@@ -1,4 +1,5 @@
 .configurator {
+  // TODO
   margin-top: var(--size-xxsmall);
   margin-bottom: var(--size-xsmall);
 }

src/ui/components/Elements/Elements.module.scss

@@ -1,7 +1,17 @@
 .toolbar {
   display: flex;
-  margin: var(--size-xxsmall) 0 var(--size-xsmall);
+  background-color: var(--white);
+  padding: var(--size-xxsmall);
+  // margin-bottom: var(--size-xxsmall); // TODO
   gap: var(--size-xxsmall);
+  border-bottom: 1px solid var(--silver);
+  z-index: 10;
+  position: sticky;
+  top: 0;
+}
+
+.elementsContent {
+  padding: 0 var(--size-xxsmall);
 }
 
 .search {

src/ui/components/Elements/Elements.tsx

@@ -5,6 +5,7 @@ import { Configurator } from '../Configurator/Configurator';
 import { availableOptions } from '../../../shared/constants/availableOptions';
 import { prepareOptionName } from '../../utils/prepareOptionName';
 import { MessageScreen } from '../MessageScreen/MessageScreen';
+import { useSearch } from '../../hooks/useSearch';
 import type { Group } from '../../types/Group';
 
 import styles from './Elements.module.scss';
@@ -16,7 +17,7 @@ const configuratorsEntries = Object.entries(
 ) as OptionsEntries[];
 
 export const Elements = () => {
-  const [searchValue, setSearchValue] = useState('');
+  const { searchValue, setSearchValue } = useSearch();
 
   const [configurators, setConfigurators] = useState(configuratorsEntries);
 
@@ -34,6 +35,7 @@ export const Elements = () => {
   }, [searchValue]);
 
   return (
+    // TODO classnames
     <div className={configurators.length > 0 ? undefined : styles.fullLayout}>
       <div className={styles.toolbar}>
         <Input
@@ -45,16 +47,18 @@ export const Elements = () => {
         />
       </div>
 
-      {configurators.length > 0 ? (
-        configurators.map(([group, options]) => (
-          <Configurator group={group} options={options} key={group} />
-        ))
-      ) : (
-        <MessageScreen
-          title="No results"
-          message="Parts, Nodes and Paints not found"
-        />
-      )}
+      <div className={styles.elementsContent}>
+        {configurators.length > 0 ? (
+          configurators.map(([group, options]) => (
+            <Configurator group={group} options={options} key={group} />
+          ))
+        ) : (
+          <MessageScreen
+            title="No results"
+            message="Parts, Nodes and Paints not found"
+          />
+        )}
+      </div>
     </div>
   );
 };

src/ui/hooks/useSearch.ts

@@ -0,0 +1,11 @@
+import create from 'zustand';
+
+type State = {
+  readonly searchValue: string;
+  setSearchValue: (searchValue: string) => void;
+};
+
+export const useSearch = create<State>((set) => ({
+  searchValue: '',
+  setSearchValue: (searchValue) => set(() => ({ searchValue })),
+}));

src/ui/ui.module.scss

@@ -6,6 +6,6 @@
 
 .tabsContent {
   flex: 1;
-  padding: 0 var(--size-xxsmall);
+  // padding: 0 var(--size-xxsmall); // TODO
   overflow: auto;
 }