Us/7 : Creating Talk Page

src/atoms/Forms/Duplicate/duplicate.scss

@@ -11,7 +11,8 @@
 		}
 	}
 
-	.add-button {
+	.add-button, .delete-button {
 		width: auto;
+		background-color: white;
 	}
 }

src/atoms/Forms/Duplicate/duplicateNode.tsx

@@ -58,7 +58,7 @@ export default (props: Props) => {
 				{React.createElement(props.element as any, elementProperties)}
 			</div>
 			{props.removeDisplayed && props.isRemovable && (
-				<Button onClick={onDelete} className="buttonContainer">
+				<Button onClick={onDelete} className="buttonContainer delete-button">
 					{props.deleteButtonContent || '-'}
 				</Button>
 			)}

src/atoms/Forms/form.scss

@@ -120,9 +120,7 @@
     white-space: nowrap;
   }
 
-  .input-component {
-    width: 300px;
-  }
+
 
   .table-cell {
     .input-component {

src/atoms/Forms/index.tsx

@@ -724,6 +724,8 @@ export default class GenericForm<
 		throw new Error(
 			'GenericForm has no render method. You need to extend from GenericForm to create a form.',
 		);
+
+		return <div />;
 	}
 }
 

src/atoms/Input/index.tsx

@@ -6,6 +6,8 @@ import { Event } from 'tools/types';
 
 import './input.scss';
 
+const KEY_ENTER = 13;
+
 export interface IInputProps {
 	autoComplete?: string; // HTML5 Property
 	autoCompleteList?: boolean;
@@ -137,6 +139,10 @@ export default class Input extends Component<IInputProps, State> {
 	private onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
 		const key = e.keyCode || e.charCode;
 
+		if (key === KEY_ENTER) {
+			e.preventDefault();
+		}
+
 		if (this.props.onKeyDown) {
 			this.props.onKeyDown({
 				name: this.props.name,
@@ -211,12 +217,11 @@ export default class Input extends Component<IInputProps, State> {
 
 	public componentDidUpdate(prevProps, prevState) {
 		const { value } = this.props;
-		if (
-			(value || value === 0) &&
-			prevProps.value !== value &&
-			(typeof value === 'number' || value.length > 0)
-		) {
-			this.setState({ value, isEmpty: false });
+		if (value !== undefined && value !== null && prevProps.value !== value) {
+			this.setState({
+				isEmpty: this.props.type !== 'number' && (value as string).length < 1,
+				value,
+			});
 		}
 	}
 
@@ -319,4 +324,4 @@ export default class Input extends Component<IInputProps, State> {
 			</div>
 		);
 	}
-}
+}

src/atoms/Select/index.tsx

@@ -7,6 +7,7 @@ import { Event } from 'tools/types';
 import './select.scss';
 
 interface ISelectProps<T> {
+	className?: string;
 	disabled?: boolean;
 	isMandatory?: boolean;
 	label?: string;
@@ -88,7 +89,7 @@ export default class Select<T extends string | number> extends React.Component<
 
 	public render() {
 		return (
-			<div className="select">
+			<div className={`select ${this.props.className || ''}`}>
 				{this.props.label && (
 					<label>{`${this.props.label}${this.props.isMandatory ? ' *' : ''}`}</label>
 				)}

src/atoms/Select/select.scss

@@ -1,67 +1,75 @@
 .select {
-  position: relative;
-  user-select: none;
+	position: relative;
+	user-select: none;
 
-  &-clickable-view {
-    cursor: pointer;
-    padding: 7px 12px;
-    padding-right: 40px;
-    border: 1px solid var(--input-border-color);
-    border-radius: 2px;
-    box-sizing: border-box;
-    position: relative;
+	svg {
+		.internal-path {
+			fill: white;
+		}
+	}
 
-    &.with-dropdown {
-      border-radius: 2px 2px 0 0;
-    }
+	&-clickable-view {
+		cursor: pointer;
+		padding: 7px 12px;
+		padding-right: 40px;
+		border: 2px solid #f0f0f0;
+		border-top: 0px;
+		border-left: 0px;
+		border-right: 0px;
+		box-sizing: border-box;
+		position: relative;
 
-    &:focus {
-      outline-color: var(--main-color);
-    }
+		&.with-dropdown {
+			border-radius: 2px 2px 0 0;
+		}
 
-    .svg-icon {
-      position: absolute;
-      right: 8px;
-      margin: 0;
-      width: 16px;
-      height: 16px;
-      top: 6px;
-    }
-  }
+		&:focus {
+			outline-color: var(--main-color);
+		}
 
-  @keyframes selectDropdownAppear {
-    0% {
-      opacity: 0;
-    }
+		.svg-icon {
+			position: absolute;
+			right: 8px;
+			margin: 0;
+			width: 16px;
+			height: 16px;
+			top: 6px;
+		}
+	}
 
-    100% {
-      opacity: 1;
-    }
-  }
+	@keyframes selectDropdownAppear {
+		0% {
+			opacity: 0;
+		}
 
-  .select-dropdown {
-    position: absolute;
-    width: 100%;
-    border-radius: 0 0 2px 2px;
-    z-index: 10;
-    max-height: 0;
-    animation: selectDropdownAppear 0.25s ease-in-out forwards;
+		100% {
+			opacity: 1;
+		}
+	}
 
-    .option {
-      padding: 8px;
-      width: 100%;
-      box-sizing: border-box;
-      background-color: var(--select-option-background-color);
-      cursor: pointer;
-      transition: var(--t-fastest-ease-in-out);
+	.select-dropdown {
+		position: absolute;
+		width: 100%;
+		border-radius: 0 0 2px 2px;
+		z-index: 10;
+		max-height: 0;
+		animation: selectDropdownAppear 0.25s ease-in-out forwards;
 
-      &:hover {
-        background-color: var(--select-option-hover-background-color);
-      }
+		.option {
+			padding: 8px;
+			width: 100%;
+			box-sizing: border-box;
+			background-color: #2f2429;
+			cursor: pointer;
+			transition: all 1s ease;
 
-      &:last-child {
-        border-radius: 0 0 2px 2px;
-      }
-    }
-  }
+			&:hover {
+				background-color: #2f2429;
+			}
+
+			&:last-child {
+				border-radius: 0 0 2px 2px;
+			}
+		}
+	}
 }

src/atoms/TextArea/index.tsx

@@ -1,27 +1,47 @@
 'use strict';
 
-import React, { CSSProperties, Component } from 'react';
+import React, { CSSProperties, Component, useRef } from 'react';
 
 import { Event } from 'tools/types';
 
 import './textarea.scss';
 
 export interface ITextAreaProps {
 	className?: string;
+	label?: string;
+	focus?: boolean;
 	name: string;
 	placeholder?: string;
 	readOnly?: boolean;
 	rows?: number;
 	style?: CSSProperties;
 	value?: string;
 
-	textAreaRef?(e: HTMLTextAreaElement): void;
 	onChange?(e: Event): void;
 	onSelect?(e: Event<{ start: number; end: number }>): void;
 }
 
 export default (props: ITextAreaProps) => {
-	const { className, value, onChange, onSelect, textAreaRef, ...attributes } = props;
+	const {className, label, value, onChange, onSelect, ...attributes } = props;
+	let nameDiv;
+
+	const textAreaRef = useRef(null);
+
+	const onLabelClick = () => {
+		const textArea: any = textAreaRef.current;
+
+		if (textArea) {
+			textArea.focus();
+		}
+	};
+
+	if (label) {
+		nameDiv = (
+			<label onClick={onLabelClick} htmlFor={props.name}>
+				{`${label}`}
+			</label>
+		);
+	}
 
 	const internalOnChange = (e: React.SyntheticEvent<HTMLTextAreaElement>) => {
 		if (props.onChange) {
@@ -42,13 +62,17 @@ export default (props: ITextAreaProps) => {
 	};
 
 	return (
-		<textarea
-			ref={props.textAreaRef}
-			value={value || ''}
-			className={`textarea ${className}`}
-			onChange={internalOnChange}
-			onSelect={internalOnSelect}
-			{...attributes}
-		/>
+		<div
+			className={`input-component ${className || ''}`}>
+			{label && nameDiv}
+			<textarea
+				ref={textAreaRef}
+				value={value || ''}
+				className={`textarea ${className}`}
+				onChange={internalOnChange}
+				onSelect={internalOnSelect}
+				{...attributes}
+			/>
+		</div>
 	);
-};
+};

src/atoms/TextArea/textarea.scss

@@ -1,11 +1,12 @@
 .textarea {
   border-radius: 8px;
   border: none;
-  background-color: var(--input-background-color);
-  border: 1px solid var(--input-border-color);
-  color: var(--input-font-color);
+  color: white;
   border-radius: 2px;
   font-family: 'Roboto';
   padding: 7px 12px;
   box-sizing: border-box;
+  border: solid 2px #f0f0f0;
+  background-color: rgba(0, 0, 0, 0.5);
+
 }

src/components/LeftBar/LeftBar.scss

@@ -1,7 +1,7 @@
 .left-bar-container {
+	display:flex;
 	.left-bar {
-		width: 399px;
-		height: 1945px;
+		width: 400px;
 		border-radius: 2px;
 		background-color: rgba(0, 0, 0, 0.15);
 		z-index: 3;
@@ -176,3 +176,9 @@
 		background-color: white;
 	}
 }
+
+@media (max-width:1025px) {
+	.left-bar-container {
+		display: none;
+	}
+}