Use flairup in PickerMain.tsx

ealush · Jan 4, 2024 · 4217c63 · 4217c63
1 parent 712a4cf
commit 4217c63
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 21 deletions.
diff --git a/src/components/body/EmojiList.css b/src/components/body/EmojiList.css
diff --git a/src/components/body/EmojiList.tsx b/src/components/body/EmojiList.tsx
@@ -1,6 +1,8 @@
+import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   Categories,
   CategoryConfig,
@@ -25,14 +27,12 @@ import { ClickableEmoji } from '../emoji/Emoji';
 import { EmojiCategory } from './EmojiCategory';
 import { Suggested } from './Suggested';
 
-import './EmojiList.css';
-
 export function EmojiList() {
   const categories = useCategoriesConfig();
   const renderdCategoriesCountRef = React.useRef(0);
 
   return (
-    <ul className={ClassNames.emojiList}>
+    <ul className={cx(styles.emojiList)}>
       {categories.map(categoryConfig => {
         const category = categoryFromCategoryConfig(categoryConfig);
 
@@ -124,3 +124,12 @@ function RenderCategory({
     </EmojiCategory>
   );
 }
+
+const styles = stylesheet.create({
+  emojiList: {
+    '.': ClassNames.emojiList,
+    listStyle: 'none',
+    margin: 0,
+    padding: 0
+  }
+});
diff --git a/src/components/main/PickerMain.css b/src/components/main/PickerMain.css
diff --git a/src/components/main/PickerMain.tsx b/src/components/main/PickerMain.tsx
@@ -2,6 +2,7 @@ import { cx } from 'flairup';
 import * as React from 'react';
 
 import { ClassNames } from '../../DomUtils/classNames';
+import { stylesheet } from '../../Stylesheet/stylesheet';
 import {
   useClassNameConfig,
   useStyleConfig,
@@ -14,8 +15,6 @@ import { Theme } from '../../types/exposedTypes';
 import { usePickerMainRef } from '../context/ElementRefContext';
 import { PickerContextProvider } from '../context/PickerContext';
 
-import './PickerMain.css';
-
 type Props = Readonly<{
   children: React.ReactNode;
 }>;
@@ -47,8 +46,7 @@ function PickerRootElement({ children }: RootProps) {
   return (
     <aside
       className={cx(
-        ClassNames.emojiPicker,
-        'epr-main',
+        styles.main,
         {
           [ClassNames.searchActive]: searchModeActive,
           [ClassNames.darkTheme]: theme === Theme.DARK,
@@ -63,3 +61,16 @@ function PickerRootElement({ children }: RootProps) {
     </aside>
   );
 }
+
+const styles = stylesheet.create({
+  main: {
+    '.': ['epr-main', ClassNames.emojiPicker],
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderRadius: 'var(--epr-picker-border-radius)',
+    borderColor: 'var(--epr-picker-border-color)'
+  }
+});