Responsive

ealush · Nov 4, 2023 · 70cfc0b · 70cfc0b
1 parent 889962f
commit 70cfc0b
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 5 deletions.
diff --git a/src/components/PickerControls.tsx b/src/components/PickerControls.tsx
@@ -74,6 +74,7 @@ export function PickerControls({
           updateState("customEmojis", customEmojis)
         }
       />
+      <div className={styles.spacer} />
       <button onClick={reset} className={styles.ButtonReset}>
         Reset
       </button>

diff --git a/src/components/PickerDemo.tsx b/src/components/PickerDemo.tsx
@@ -13,7 +13,7 @@ import styles from "@/styles/PickerDemo.module.css";
 const DEFAULT_SKIN_TONES_DISABLED = false;
 const DEFAULT_SEARCH_DISABLED = false;
 const DEFAULT_EMOJI_STYLE = EmojiStyle.NATIVE;
-const DEFAULT_THEME = Theme.LIGHT;
+const DEFAULT_THEME = Theme.AUTO;
 const DEFAULT_SUGGESTED_EMOJIS_MODE = SuggestionMode.RECENT;
 const DEFAULT_HEIGHT = 450;
 const DEFAULT_WIDTH = 350;
@@ -67,7 +67,7 @@ export default function PickerDemo() {
 const defaultProps = {
   skinTonesDisabled: DEFAULT_SKIN_TONES_DISABLED,
   searchDisabled: DEFAULT_SEARCH_DISABLED,
-  searchPlaceholder: "Search emojis",
+  searchPlaceholder: undefined,
   emojiStyle: DEFAULT_EMOJI_STYLE,
   theme: DEFAULT_THEME,
   suggestedEmojisMode: DEFAULT_SUGGESTED_EMOJIS_MODE,

diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
@@ -18,6 +18,15 @@
   font-family: var(--font-mono);
 }
 
+@media (max-width: 768px) {
+  .headerRow {
+    flex-direction: column;
+    gap: 1rem;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
 .footerRow {
   text-align: center;
   display: flex;

diff --git a/src/styles/PickerControls.module.css b/src/styles/PickerControls.module.css
@@ -3,6 +3,8 @@
   background-color: #fff;
   border-radius: 5px;
   border: 1px solid #e7e7e7;
+  display: flex;
+  flex-direction: column;
 }
 
 .PickerControls,
@@ -17,11 +19,15 @@
   border: none;
   border-radius: 5px;
   box-sizing: border-box;
-  height: 25px;
   background-color: #f6f6f6;
   color: #858585;
 }
 
+.Label input,
+.Label select {
+  height: 25px;
+}
+
 .Label input {
   padding: 0 5px;
 }
@@ -57,12 +63,22 @@
   margin-bottom: 0.5em;
 }
 
+.spacer {
+  flex-grow: 1;
+}
+
 .ButtonReset {
   border-radius: 5px;
   cursor: pointer;
-  font-size: 14px;
-  padding: 5px 10px;
+  font-size: 15px;
+  font-weight: bold;
+  padding: 10px;
   display: block;
   width: 100%;
   border: none;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.ButtonReset:hover {
+  background-color: #e7e7e7;
 }
diff --git a/src/styles/PickerDemo.module.css b/src/styles/PickerDemo.module.css
@@ -3,6 +3,13 @@
   flex-direction: row;
   justify-content: space-between;
   gap: 1rem;
+  margin-top: 1rem;
+}
+
+@media (max-width: 767px) {
+  .PickerDemo {
+    flex-direction: column;
+  }
 }
 
 .pickerTextarea {
@@ -17,6 +24,7 @@
   border-radius: 5px;
   color: #858585;
   outline: none;
+  margin-bottom: 1rem;
 }
 
 @media (prefers-color-scheme: dark) {