show colorBox

src/client/js/components/Admin/Customize/CustomizeThemeForm.jsx

@@ -16,11 +16,20 @@ class CustomizeThemeForm extends React.Component {
       <div id="themeOptions">
         {/* Light Themes  */}
         <div className="d-flex">
-          <ThemeColorBox />
+          <ThemeColorBox name="default" bg="#ffffff" topbar="#334455" theme="#112744" />
+          <ThemeColorBox name="nature" bg="#f9fff3" topbar="#118050" theme="#460039" />
+          <ThemeColorBox name="mono-blue" bg="#F7FBFD" topbar="#00587A" theme="#00587A" />
+          <ThemeColorBox name="wood" bg="#fffefb" topbar="#aaa45f" theme="#dddebf" />
+          <ThemeColorBox name="island" bg="#8ecac0" topbar="#0c2a44" theme="#cef2ef" />
+          <ThemeColorBox name="christmas" bg="#fffefb" topbar="#b3000c" theme="#017e20" />
+          <ThemeColorBox name="antarctic" bg="#ffffff" topbar="#000080" theme="#99cccc" />
         </div>
         {/* Dark Themes  */}
         <div className="d-flex mt-3">
-
+          <ThemeColorBox name="default-dark" bg="#212731" topbar="#151515" theme="#f75b36" />
+          <ThemeColorBox name="future" bg="#16282D" topbar="#011414" theme="#04B4AE" />
+          <ThemeColorBox name="blue-night" bg="#061F2F" topbar="#27343B" theme="#0090C8" />
+          <ThemeColorBox name="halloween" bg="#030003" topbar="#cc5d1f" theme="#e9af2b" />
         </div>
       </div>
     );

src/client/js/components/Admin/Customize/ThemeColorBox.jsx

@@ -12,7 +12,21 @@ class ThemeColorBox extends React.Component {
 
   render() {
     return (
-      <p>hoge</p>
+      <div id={`theme-option-${this.props.name}`} className="theme-option-container d-flex flex-column align-items-center">
+        <a
+          className={`m-0 ${this.props.name} theme-button`}
+          id={this.props.name}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+            <g>
+              <path d="M -1 -1 L65 -1 L65 65 L-1 65 L-1 -1 Z" fill={this.props.bg}></path>
+              <path d="M -1 -1 L65 -1 L65 15 L-1 15 L-1 -1 Z" fill={this.props.topbar}></path>
+              <path d="M 44 15 L65 15 L65 65 L44 65 L44 15 Z" fill={this.props.theme}></path>
+            </g>
+          </svg>
+        </a>
+        <span className="theme-option-name"><b>{ this.props.name }</b></span>
+      </div>
     );
   }
 
@@ -26,6 +40,11 @@ ThemeColorBox.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
+
+  name: PropTypes.string.isRequired,
+  bg: PropTypes.string.isRequired,
+  topbar: PropTypes.string.isRequired,
+  theme: PropTypes.string.isRequired,
 };
 
 export default withTranslation()(ThemeColorBoxWrapper);