Increase face overlap of banner, and add theme which does not overlap faces at all

Author: davidje13

src/frontend/src/components/form.less

@@ -69,7 +69,7 @@
 
   .fixed-column {
     display: inline-block;
-    width: 120px;
+    width: 150px;
   }
 
   .prefixed-input {

src/frontend/src/components/retro-formats/mood/MoodRetro.less

@@ -59,12 +59,16 @@
 
       .face-icon {
         position: relative;
-        margin-top: -20px;
+        margin-top: -0.4em;
         text-shadow:
           0 4px 8px rgba(0, 0, 0, 0.2),
           0 2px 3px rgba(0, 0, 0, 0.2);
         z-index: 1;
       }
+
+      .face-icon.boring {
+        margin-top: -0.05em;
+      }
     }
   }
 

src/frontend/src/components/retro-formats/mood/categories/FaceIcon.tsx

@@ -1,11 +1,13 @@
 import React, { memo } from 'react';
+import classNames from 'classnames';
 import './FaceIcon.less';
 
 type Type = 'happy' | 'meh' | 'sad';
 
 interface Theme {
   name: string;
   icons: Record<Type, string>;
+  extraClassName?: string;
 }
 
 const THEMES = new Map<string, Theme>();
@@ -73,6 +75,16 @@ THEMES.set('silly', {
   },
 });
 
+THEMES.set('boring-faces', {
+  name: 'Faces (padded)',
+  icons: {
+    happy: '\uD83D\uDE03',
+    meh: '\uD83E\uDD28',
+    sad: '\uD83D\uDE22',
+  },
+  extraClassName: 'boring',
+});
+
 const DEFAULT_THEME = THEMES.values().next().value;
 
 export function getTheme(name: string): Theme {
@@ -91,8 +103,11 @@ interface PropsT {
 export default memo(({
   theme,
   type,
-}: PropsT) => (
-  <div className="face-icon">
-    { getTheme(theme).icons[type as Type] }
-  </div>
-));
+}: PropsT) => {
+  const { icons, extraClassName } = getTheme(theme);
+  return (
+    <div className={classNames('face-icon', extraClassName)}>
+      { icons[type as Type] }
+    </div>
+  );
+});