fix(styles): enlarge SymbolInput

pearmini · Nov 13, 2021 · 99f0fbc · 99f0fbc
1 parent b240770
commit 99f0fbc
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 8 deletions.
diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
@@ -62,6 +62,8 @@ export default {
   padding: 3px;
   cursor: pointer;
   border-radius: 4px;
+  text-align: center;
+  font-size: 20px;
 }
 
 .emoji-picker-item:hover {
@@ -71,4 +73,8 @@ export default {
 .emoji-picker-container .el-tabs__header {
   margin-top: 0px !important;
 }
+
+.emoji-picker-container .el-tabs__item  {
+  font-size: 20px;
+}
 </style>
diff --git a/src/components/EmoticonPicker.vue b/src/components/EmoticonPicker.vue
@@ -44,19 +44,23 @@ export default {
 .emoticon-picker-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   margin-bottom: 10px;
 }
 
+.emoticon-picker-header span{
+  display: inline-block;
+  margin-left: 0.5em;
+}
+
 .emoticon-picker-header > span {
   display: inline-block;
-  width: 40%;
   text-align: center;
   cursor: pointer;
 }
 
 .emoticon-picker-item {
-  padding: 5px 8px;
+  padding: 8px 10px;
   display: inline-block;
   cursor: pointer;
   border-radius: 4px;

diff --git a/src/components/SymbolInput.vue b/src/components/SymbolInput.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="symbol-input-container">
-    <el-popover placement="bottom" width="200" trigger="focus">
+    <el-popover placement="bottom" width="300" trigger="focus">
       <div class="emoji-input-popover">
         <el-tabs value="first">
-          <el-tab-pane label="(//▽//)" name="first">
+          <el-tab-pane label="w(ﾟДﾟ)w" name="first">
             <emoticon-picker @input="handleInput" />
           </el-tab-pane>
-          <el-tab-pane label="😀 🍉 🌈" name="second">
+          <el-tab-pane label="Emoji 😆" name="second">
             <emoji-picker @input="handleInput" />
           </el-tab-pane>
         </el-tabs>

diff --git a/src/pages/Story.vue b/src/pages/Story.vue
@@ -120,7 +120,7 @@ export default {
       options: [
         { value: "color", label: "Color 🌈" },
         { value: "emoji", label: "Emoji 😆" },
-        { value: "emoticon", label: "Emoticon w(ﾟДﾟ)w" },
+        { value: "emoticon", label: "w(ﾟДﾟ)w" },
       ],
       selectedValue: "color",
       emojis,
@@ -298,7 +298,6 @@ export default {
 .story-emoji-container {
   display: grid;
   grid-template-columns: repeat(24, 1fr);
-  margin-bottom: 2em;
 }
 
 .story-emoji-container span {
@@ -361,4 +360,8 @@ export default {
   display: inline-block;
   margin: 0.5em 0;
 }
+
+.story-body  {
+  margin-bottom: 2.5em;
+}
 </style>