Merge pull request #24 from WDAqua/feature/itzbund-theme

Add new itzbund theme

src/components/App/App.css

@@ -19,3 +19,9 @@
 #root * {
   font-family: BundesSans, sans-serif;
 }
+
+.theme {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}

src/components/App/App.js

@@ -9,7 +9,11 @@ import {
   defaultChatbotComponents,
   initialQuestionParameter,
 } from "../../helpers/constants";
-import { supportedServiceNames, supportedServices } from "../../services";
+import {
+  supportedServiceNames,
+  supportedServices,
+  supportedThemes,
+} from "../../services";
 
 class App extends Component {
   constructor(props) {
@@ -31,6 +35,7 @@ class App extends Component {
         defaultBackendType in supportedServiceNames
           ? defaultBackendType
           : supportedServiceNames[0],
+      currentTheme: "default",
     };
 
     this.texts = textsHelper.getTexts();
@@ -39,6 +44,7 @@ class App extends Component {
     this.setBackendUrl = this.setBackendUrl.bind(this);
     this.setComponents = this.setComponents.bind(this);
     this.setBackendType = this.setBackendType.bind(this);
+    this.setTheme = this.setTheme.bind(this);
     // TODO: Add back in once we move on from the MVP
     // this.toggleComponent = this.toggleComponent.bind(this);
   }
@@ -150,6 +156,14 @@ class App extends Component {
     );
   }
 
+  setTheme(themeName) {
+    if (!supportedThemes.includes(themeName)) return;
+
+    this.setState({
+      currentTheme: themeName,
+    });
+  }
+
   setComponents(components) {
     // is array and only contains strings, if it has elements
     // TODO: Edit string check back once we move on from the MVP
@@ -234,16 +248,18 @@ class App extends Component {
         ].replace("{{url}}", this.state.backendUrl)
       : this.texts["default-responses"]["initial-message"]["is-not-configured"];
     return (
-      <>
+      <div className={`theme ${this.state.currentTheme}`}>
         <PageHeader
           sendMessage={this.sendMessage}
           // toggleComponent={this.toggleComponent} // TODO: Add back in once we move on from the MVP
           setBackendUrl={this.setBackendUrl}
           setComponents={this.setComponents}
           setBackendType={this.setBackendType}
+          setTheme={this.setTheme}
           components={this.state.components}
           backendUrl={this.state.backendUrl}
           backendType={this.state.backendType}
+          currentTheme={this.state.currentTheme}
         />
         <MessagePanel
           messages={[
@@ -263,7 +279,7 @@ class App extends Component {
           sendMessage={this.sendMessage}
           isSending={this.state.isSending}
         />
-      </>
+      </div>
     );
   }
 }

src/components/Button/Button.css

@@ -1,13 +1,28 @@
 .button {
-  background-color: var(--bright-blue);
-  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
-  border-radius: 7px;
   min-height: fit-content;
   min-width: fit-content;
   cursor: pointer;
 }
 
+.default.theme .button {
+  background-color: var(--bright-blue);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 7px;
+}
+
+.itzbund.theme .button {
+  background-color: var(--green);
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  color: var(--light-white);
+  border: none;
+  border-radius: 2px;
+  padding: 0.5rem;
+}
+
 .button:focus {
-  box-shadow: 0 6px 2px -4px rgba(0,0,0,.4),0 4px 4px 0 rgba(0,0,0,.28),0 2px 10px 0 rgba(0,0,0,.24);
+  box-shadow: 0 6px 2px -4px rgba(0, 0, 0, 0.4), 0 4px 4px 0 rgba(0, 0, 0, 0.28),
+    0 2px 10px 0 rgba(0, 0, 0, 0.24);
   outline: none;
-}
+}

src/components/Button/Button.jsx

@@ -3,7 +3,7 @@ import "./Button.css";
 
 /**
  * @description a styled, robust button component
- * 
+ *
  * @property {string} className A string containing all complementary classes. This will not replace the button's classes, it will only add to them.
  * @property {object} style An object containing the "inline" style of the object
  * @property {function} onClick The function that should be called when the button is clicked

src/components/Message/Message.css

@@ -11,26 +11,60 @@
   flex-direction: row;
 }
 
-.messageContainer.reply .messageDataContainer {
+.default.theme .messageContainer.reply .messageDataContainer {
   background-color: var(--bright-teal);
 }
 
+.itzbund.theme .messageContainer.reply .messageDataContainer {
+  background-color: var(--gray-100);
+}
+
+.itzbund.theme .messageContainer:not(.reply) .messageDataContainer,
+.itzbund.theme .messageContainer:not(.reply) .messageDataContainer * {
+  background-color: var(--green);
+  color: var(--light-white);
+}
+
 .messageDataContainer {
   height: fit-content;
   border-radius: 14px;
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
   display: flex;
   flex-direction: column;
   overflow-x: scroll;
 }
 
+.default.theme .messageDataContainer {
+  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  color: var(--light-white);
+}
+
+.itzbund.theme .messageDataContainer {
+  background-color: var(--gray-100);
+  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.2);
+  color: var(--light-black);
+  border: none;
+  border-radius: 2px;
+  position: relative;
+}
+
 .messageContainer.reply .messageDataContainer:focus {
-  background-color: var(--dark-teal);
   outline: none;
 }
 
-.messageContainer:not(.reply) .messageDataContainer:focus {
+.default.theme
+  .messageContainer.messageContainer.reply
+  .messageDataContainer:focus {
+  background-color: var(--dark-teal);
+}
+
+.itzbund.theme
+  .messageContainer.messageContainer.reply
+  .messageDataContainer:focus {
+  background-color: var(--gray-100);
+}
+
+.default.theme .messageContainer:not(.reply) .messageDataContainer:focus {
   background-color: rgb(230, 230, 230);
 }
 
@@ -52,11 +86,20 @@
   text-align: right;
 }
 
-.messageContainer.reply .messageTimeSent {
-  color: white;
+.itzbund.theme .messageContainer.reply .messageTimeSent {
+  color: var(--light-black);
   outline: none;
 }
 
-.messageContainer:not(.reply) .messageTimeSent {
+.default .messageContainer.reply .messageTimeSent {
+  color: var(--light-white);
+  outline: none;
+}
+
+.itzbund.theme .messageContainer:not(.reply) .messageTimeSent {
+  color: var(--light-white);
+}
+
+.default.theme .messageContainer:not(.reply) .messageTimeSent {
   color: var(--bright-teal);
 }

src/components/MessageInput/MessageInput.css

@@ -2,23 +2,50 @@
 
 #messageInput {
   position: relative;
-  height: 150px;
+  height: 100px;
   width: 100%;
-  border-top: 2px solid #f0f0f0;
+  border-top: 2px solid var(--gray-100);
+  box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.2);
   display: flex;
   flex-wrap: nowrap;
+}
+
+.default.theme #messageInput {
   align-items: stretch;
 }
 
+.itzbund.theme #messageInput {
+  background-color: var(--gray-300);
+  align-items: center;
+  justify-content: center;
+}
+
+.itzbund.theme #messageInput > * {
+  margin-inline: 0.5rem;
+}
+
 #inputTextBox {
   position: relative;
-  font-size: x-large;
-  width: 90%;
   resize: none;
-  display: inline-block;
   padding: 1ex;
 }
 
+.default.theme #inputTextBox {
+  width: 90%;
+  font-size: x-large;
+  display: inline-block;
+}
+
+.itzbund.theme #inputTextBox {
+  background-color: var(--light-white);
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+  width: 33%;
+  font-size: 1em;
+  height: 25%;
+}
+
 #inputTextBox::placeholder {
   color: rgb(100, 100, 100);
 }
@@ -65,7 +92,7 @@
 }
 
 #loadingBar.visible::before {
-  content: '';
+  content: "";
   position: relative;
   display: block;
   left: 0%;
@@ -75,4 +102,4 @@
   height: 7.5px;
   background-color: #aa2941;
   animation: load 1.75s infinite;
-}
+}

src/components/MessageInput/MessageInput.jsx

@@ -4,7 +4,7 @@ import "./MessageInput.css";
 import { textsHelper } from "../../helpers";
 
 /**
- * 
+ *
  * @property {function} sendMessage The callback to be called using the message input's text
  * @property {boolean} isSending Value determining if loading bar is displayed
  */
@@ -27,7 +27,7 @@ export default class MessageInput extends Component {
     this.listenerId = textsHelper.addListener(() => {
       this.texts = textsHelper.getTexts();
       this.forceUpdate();
-    })
+    });
   }
 
   componentWillUnmount() {
@@ -42,7 +42,8 @@ export default class MessageInput extends Component {
   }
 
   inputTextChange(changeEvent) {
-    if (changeEvent.target.value !== "\n") this.setState({ query: changeEvent.target.value });
+    if (changeEvent.target.value !== "\n")
+      this.setState({ query: changeEvent.target.value });
   }
 
   inputKeyPress(keyPressEvent) {
@@ -77,7 +78,7 @@ export default class MessageInput extends Component {
                 height: "40px",
                 marginRight: "10px",
               }}
-              className={"light-gray black-text vertical-center right-side"}
+              className={"vertical-center right-side"}
             />
           </div>
         </div>