From 2f14cfbac6b3dfef1fc7a4832c4e165d0852601f Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Mon, 14 Sep 2020 22:50:19 +0300
Subject: [PATCH 1/6] challenge submission

---
 .../Checkbox/__snapshots__/index.jsx.snap     |  24 ++
 .../components/GUIKit/Checkbox/index.jsx      |  12 +
 .../Datepicker/__snapshots__/index.jsx.snap   | 118 ++++++++++
 .../components/GUIKit/Datepicker/index.jsx    |  12 +
 .../Dropdown/__snapshots__/index.jsx.snap     |  78 +++++++
 .../components/GUIKit/Dropdown/index.jsx      |  12 +
 .../__snapshots__/index.jsx.snap              |  72 ++++++
 .../components/GUIKit/DropdownTerms/index.jsx |  12 +
 .../RadioButton/__snapshots__/index.jsx.snap  |  29 +++
 .../components/GUIKit/RadioButton/index.jsx   |  12 +
 .../TextInput/__snapshots__/index.jsx.snap    |  15 ++
 .../components/GUIKit/TextInput/index.jsx     |  12 +
 .../Textarea/__snapshots__/index.jsx.snap     |  15 ++
 .../components/GUIKit/Textarea/index.jsx      |  12 +
 .../Toggles/__snapshots__/index.jsx.snap      |  16 ++
 .../components/GUIKit/Toggles/index.jsx       |  12 +
 config/default.js                             |   3 +
 .../GUIKit/Assets/Images/icon-next.svg        |  11 +
 .../GUIKit/Assets/Images/icon-prev.svg        |  13 ++
 .../GUIKit/Assets/Styles/Includes/_mixin.scss |  72 ++++++
 .../GUIKit/Assets/Styles/Includes/index.scss  |   1 +
 .../GUIKit/Assets/Styles/_default.scss        |   7 +
 .../components/GUIKit/Checkbox/index.jsx      |  59 +++++
 .../components/GUIKit/Checkbox/style.scss     | 109 +++++++++
 .../components/GUIKit/Datepicker/index.jsx    |  88 ++++++++
 .../components/GUIKit/Datepicker/style.scss   | 203 +++++++++++++++++
 .../components/GUIKit/Dropdown/index.jsx      |  95 +++++---
 .../components/GUIKit/Dropdown/style.scss     | 208 +++++++++++++++++-
 .../components/GUIKit/DropdownTerms/index.jsx | 187 ++++++++++++++++
 .../GUIKit/DropdownTerms/style.scss           | 162 ++++++++++++++
 .../components/GUIKit/JobListCard/style.scss  |   2 +-
 .../components/GUIKit/Paginate/style.scss     |   2 +-
 .../components/GUIKit/RadioButton/index.jsx   |  66 ++++++
 .../components/GUIKit/RadioButton/style.scss  | 147 +++++++++++++
 .../components/GUIKit/SearchCombo/style.scss  |   2 +-
 .../components/GUIKit/TextInput/index.jsx     |  69 ++++++
 .../components/GUIKit/TextInput/style.scss    |  63 ++++++
 .../components/GUIKit/Textarea/index.jsx      |  68 ++++++
 .../components/GUIKit/Textarea/style.scss     |  66 ++++++
 .../components/GUIKit/Toggles/index.jsx       |  53 +++++
 .../components/GUIKit/Toggles/style.scss      | 141 ++++++++++++
 src/shared/components/GUIKit/_default.scss    |   2 -
 .../examples/GUIKit/Checkbox/index.jsx        | 189 ++++++++++++++++
 .../examples/GUIKit/Checkbox/style.scss       |  56 +++++
 .../examples/GUIKit/Datepicker/index.jsx      |  65 ++++++
 .../examples/GUIKit/Datepicker/style.scss     |  31 +++
 .../examples/GUIKit/Dropdown/index.jsx        |  87 ++++++++
 .../examples/GUIKit/Dropdown/style.scss       |  33 +++
 .../examples/GUIKit/DropdownTerms/index.jsx   |  83 +++++++
 .../examples/GUIKit/DropdownTerms/style.scss  |  33 +++
 .../examples/GUIKit/RadioButton/index.jsx     |  83 +++++++
 .../examples/GUIKit/RadioButton/style.scss    |  59 +++++
 .../examples/GUIKit/TextInput/index.jsx       |  76 +++++++
 .../examples/GUIKit/TextInput/style.scss      |  31 +++
 .../examples/GUIKit/Textarea/index.jsx        |  65 ++++++
 .../examples/GUIKit/Textarea/style.scss       |  33 +++
 .../examples/GUIKit/Toggles/index.jsx         | 127 +++++++++++
 .../examples/GUIKit/Toggles/style.scss        |  45 ++++
 .../components/examples/GUIKit/index.jsx      |  47 ++++
 .../components/examples/GUIKit/style.scss     |  16 ++
 src/shared/routes/Examples/Examples.jsx       |   2 +
 src/shared/utils/useWindowSize.js             |  26 +++
 62 files changed, 3509 insertions(+), 40 deletions(-)
 create mode 100644 __tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap
 create mode 100644 __tests__/shared/components/GUIKit/Checkbox/index.jsx
 create mode 100644 __tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap
 create mode 100644 __tests__/shared/components/GUIKit/Datepicker/index.jsx
 create mode 100644 __tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap
 create mode 100644 __tests__/shared/components/GUIKit/Dropdown/index.jsx
 create mode 100644 __tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap
 create mode 100644 __tests__/shared/components/GUIKit/DropdownTerms/index.jsx
 create mode 100644 __tests__/shared/components/GUIKit/RadioButton/__snapshots__/index.jsx.snap
 create mode 100644 __tests__/shared/components/GUIKit/RadioButton/index.jsx
 create mode 100644 __tests__/shared/components/GUIKit/TextInput/__snapshots__/index.jsx.snap
 create mode 100644 __tests__/shared/components/GUIKit/TextInput/index.jsx
 create mode 100644 __tests__/shared/components/GUIKit/Textarea/__snapshots__/index.jsx.snap
 create mode 100644 __tests__/shared/components/GUIKit/Textarea/index.jsx
 create mode 100644 __tests__/shared/components/GUIKit/Toggles/__snapshots__/index.jsx.snap
 create mode 100644 __tests__/shared/components/GUIKit/Toggles/index.jsx
 create mode 100644 src/shared/components/GUIKit/Assets/Images/icon-next.svg
 create mode 100644 src/shared/components/GUIKit/Assets/Images/icon-prev.svg
 create mode 100644 src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
 create mode 100644 src/shared/components/GUIKit/Assets/Styles/Includes/index.scss
 create mode 100644 src/shared/components/GUIKit/Assets/Styles/_default.scss
 create mode 100644 src/shared/components/GUIKit/Checkbox/index.jsx
 create mode 100644 src/shared/components/GUIKit/Checkbox/style.scss
 create mode 100644 src/shared/components/GUIKit/Datepicker/index.jsx
 create mode 100644 src/shared/components/GUIKit/Datepicker/style.scss
 create mode 100644 src/shared/components/GUIKit/DropdownTerms/index.jsx
 create mode 100644 src/shared/components/GUIKit/DropdownTerms/style.scss
 create mode 100644 src/shared/components/GUIKit/RadioButton/index.jsx
 create mode 100644 src/shared/components/GUIKit/RadioButton/style.scss
 create mode 100644 src/shared/components/GUIKit/TextInput/index.jsx
 create mode 100644 src/shared/components/GUIKit/TextInput/style.scss
 create mode 100644 src/shared/components/GUIKit/Textarea/index.jsx
 create mode 100644 src/shared/components/GUIKit/Textarea/style.scss
 create mode 100644 src/shared/components/GUIKit/Toggles/index.jsx
 create mode 100644 src/shared/components/GUIKit/Toggles/style.scss
 delete mode 100644 src/shared/components/GUIKit/_default.scss
 create mode 100644 src/shared/components/examples/GUIKit/Checkbox/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/Checkbox/style.scss
 create mode 100644 src/shared/components/examples/GUIKit/Datepicker/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/Datepicker/style.scss
 create mode 100644 src/shared/components/examples/GUIKit/Dropdown/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/Dropdown/style.scss
 create mode 100644 src/shared/components/examples/GUIKit/DropdownTerms/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/DropdownTerms/style.scss
 create mode 100644 src/shared/components/examples/GUIKit/RadioButton/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/RadioButton/style.scss
 create mode 100644 src/shared/components/examples/GUIKit/TextInput/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/TextInput/style.scss
 create mode 100644 src/shared/components/examples/GUIKit/Textarea/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/Textarea/style.scss
 create mode 100644 src/shared/components/examples/GUIKit/Toggles/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/Toggles/style.scss
 create mode 100644 src/shared/components/examples/GUIKit/index.jsx
 create mode 100644 src/shared/components/examples/GUIKit/style.scss
 create mode 100644 src/shared/utils/useWindowSize.js

diff --git a/__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..3d56855d05
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<label
+  className="src-shared-components-GUIKit-Checkbox-___style__container___2a1GZ src-shared-components-GUIKit-Checkbox-___style__smSize___3aux-"
+>
+  <input
+    checked={false}
+    onChange={[Function]}
+    type="checkbox"
+  />
+  <div
+    className="src-shared-components-GUIKit-Checkbox-___style__checkmark___1xdsj"
+  >
+    <IconCheckSolid
+      className="src-shared-components-GUIKit-Checkbox-___style__after___2rEBg"
+      height={13}
+      viewBox="0 0 15 13"
+      width={13}
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </div>
+</label>
+`;
diff --git a/__tests__/shared/components/GUIKit/Checkbox/index.jsx b/__tests__/shared/components/GUIKit/Checkbox/index.jsx
new file mode 100644
index 0000000000..e693ad4989
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Checkbox/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import Checkbox from 'components/GUIKit/Checkbox';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<Checkbox />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..6bf8ad76cf
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Datepicker/__snapshots__/index.jsx.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<div
+  className="datepickerContainer src-shared-components-GUIKit-Datepicker-___style__container___Sl58X"
+>
+  <withStyles(SingleDatePicker)
+    anchorDirection="left"
+    appendToBody={false}
+    block={false}
+    calendarInfoPosition="bottom"
+    customCloseIcon={null}
+    customInputIcon={
+      <IconCalendar
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    }
+    date={null}
+    daySize={53}
+    disableScroll={false}
+    disabled={false}
+    displayFormat="MMM DD, YYYY"
+    enableOutsideDays={true}
+    firstDayOfWeek={1}
+    focused={false}
+    hideKeyboardShortcutsPanel={true}
+    horizontalMargin={0}
+    horizontalMonthPadding={13}
+    id="null----false"
+    initialVisibleMonth={null}
+    inputIconPosition="after"
+    isDayBlocked={[Function]}
+    isDayHighlighted={[Function]}
+    isOutsideRange={[Function]}
+    isRTL={false}
+    keepFocusOnInput={false}
+    keepOpenOnDateSelect={false}
+    monthFormat="MMMM YYYY"
+    navNext={
+      <IconNext
+        height="16"
+        viewBox="0 0 10 16"
+        width="10"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    }
+    navPrev={
+      <IconPrev
+        height="16"
+        viewBox="0 0 10 16"
+        width="10"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    }
+    noBorder={false}
+    numberOfMonths={1}
+    onClose={[Function]}
+    onDateChange={[Function]}
+    onFocusChange={[Function]}
+    onNextMonthClick={[Function]}
+    onPrevMonthClick={[Function]}
+    openDirection="down"
+    orientation="horizontal"
+    phrases={
+      Object {
+        "calendarLabel": "Calendar",
+        "chooseAvailableDate": [Function],
+        "clearDate": "Clear Date",
+        "closeDatePicker": "Close",
+        "dateIsSelected": [Function],
+        "dateIsUnavailable": [Function],
+        "enterKey": "Enter key",
+        "escape": "Escape key",
+        "hideKeyboardShortcutsPanel": "Close the shortcuts panel.",
+        "homeEnd": "Home and end keys",
+        "jumpToNextMonth": "Move forward to switch to the next month.",
+        "jumpToPrevMonth": "Move backward to switch to the previous month.",
+        "keyboardNavigationInstructions": "Press the down arrow key to interact with the calendar and
+  select a date. Press the question mark key to get the keyboard shortcuts for changing dates.",
+        "keyboardShortcuts": "Keyboard Shortcuts",
+        "leftArrowRightArrow": "Right and left arrow keys",
+        "moveFocusByOneDay": "Move backward (left) and forward (right) by one day.",
+        "moveFocusByOneMonth": "Switch months.",
+        "moveFocusByOneWeek": "Move backward (up) and forward (down) by one week.",
+        "moveFocustoStartAndEndOfWeek": "Go to the first or last day of a week.",
+        "openThisPanel": "Open this panel.",
+        "pageUpPageDown": "page up and page down keys",
+        "questionMark": "Question mark",
+        "returnFocusToInput": "Return to the date input field.",
+        "selectFocusedDate": "Select the date in focus.",
+        "showKeyboardShortcutsPanel": "Open the keyboard shortcuts panel.",
+        "upArrowDownArrow": "up and down arrow keys",
+      }
+    }
+    placeholder=""
+    readOnly={false}
+    regular={false}
+    renderCalendarInfo={null}
+    renderDayContents={[Function]}
+    renderMonthElement={null}
+    renderMonthText={null}
+    reopenPickerOnClearDate={false}
+    required={false}
+    screenReaderInputMessage=""
+    showClearDate={false}
+    showDefaultInputIcon={false}
+    small={false}
+    verticalHeight={null}
+    verticalSpacing={22}
+    weekDayFormat="ddd"
+    withFullScreenPortal={false}
+    withPortal={false}
+  />
+</div>
+`;
diff --git a/__tests__/shared/components/GUIKit/Datepicker/index.jsx b/__tests__/shared/components/GUIKit/Datepicker/index.jsx
new file mode 100644
index 0000000000..c0001cce99
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Datepicker/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import Datepicker from 'components/GUIKit/Datepicker';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<Datepicker />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/__tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..694bfadb1b
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap
@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<div
+  className="dropdownContainer src-shared-components-GUIKit-Dropdown-___style__container___1qhm8 src-shared-components-GUIKit-Dropdown-___style__lgSize___1fYu0 src-shared-components-GUIKit-Dropdown-___style__haveValue___1b1qb"
+  onBlurCapture={[Function]}
+  onFocusCapture={[Function]}
+>
+  <div
+    className="src-shared-components-GUIKit-Dropdown-___style__relative___1Yq0F"
+  >
+    <Select
+      arrowRenderer={[Function]}
+      autoBlur={true}
+      autosize={false}
+      backspaceRemoves={true}
+      backspaceToRemoveMessage="Press backspace to remove {label}"
+      clearAllText="Clear all"
+      clearRenderer={[Function]}
+      clearValueText="Clear value"
+      clearable={false}
+      closeOnSelect={true}
+      deleteRemoves={true}
+      delimiter=","
+      disabled={false}
+      escapeClearsValue={true}
+      filterOptions={[Function]}
+      ignoreAccents={true}
+      ignoreCase={true}
+      inputProps={Object {}}
+      isLoading={false}
+      joinValues={false}
+      labelKey="label"
+      matchPos="any"
+      matchProp="any"
+      menuBuffer={0}
+      menuRenderer={[Function]}
+      multi={false}
+      noResultsText="No results found"
+      onBlurResetsInput={true}
+      onChange={[Function]}
+      onCloseResetsInput={true}
+      onSelectResetsInput={true}
+      openOnClick={true}
+      optionComponent={[Function]}
+      options={
+        Array [
+          Object {
+            "label": "dropdownLable",
+            "value": "dropdownLable",
+          },
+        ]
+      }
+      pageSize={5}
+      placeholder=""
+      removeSelected={true}
+      required={false}
+      rtl={false}
+      scrollMenuIntoView={true}
+      searchable={true}
+      simpleValue={false}
+      tabSelectsValue={true}
+      trimFilter={true}
+      value="dropdownLable"
+      valueComponent={[Function]}
+      valueKey="value"
+    />
+    <IconDown
+      className="src-shared-components-GUIKit-Dropdown-___style__iconDropdown___2bPox"
+      height="9"
+      viewBox="0 0 22 13"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    />
+  </div>
+</div>
+`;
diff --git a/__tests__/shared/components/GUIKit/Dropdown/index.jsx b/__tests__/shared/components/GUIKit/Dropdown/index.jsx
new file mode 100644
index 0000000000..7dd1979886
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Dropdown/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import Dropdown from 'components/GUIKit/Dropdown';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<Dropdown options={[{ label: 'dropdownLable', selected: true }]} />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/__tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..b338bc15b7
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<div
+  className="dropdownContainer src-shared-components-GUIKit-DropdownTerms-___style__container___oBZ2m src-shared-components-GUIKit-DropdownTerms-___style__haveValue___1Ppjh src-shared-components-GUIKit-DropdownTerms-___style__isEmptySelectList___CWafx"
+>
+  <div
+    className="src-shared-components-GUIKit-DropdownTerms-___style__relative___EOspV"
+  >
+    <CreatableSelect
+      autosize={false}
+      backspaceRemoves={false}
+      clearable={false}
+      filterOptions={[Function]}
+      isOptionUnique={[Function]}
+      isValidNewOption={[Function]}
+      menuRenderer={[Function]}
+      multi={true}
+      newOptionCreator={[Function]}
+      onChange={[Function]}
+      onClose={[Function]}
+      onInputKeyDown={[Function]}
+      onOpen={[Function]}
+      optionComponent={
+        Object {
+          "$$typeof": Symbol(react.forward_ref),
+          "defaultProps": Object {
+            "children": null,
+            "className": "",
+            "onSelect": [Function],
+          },
+          "propTypes": Object {
+            "children": [Function],
+            "className": [Function],
+            "onSelect": [Function],
+            "option": [Function],
+          },
+          "render": [Function],
+        }
+      }
+      options={
+        Array [
+          Object {
+            "label": "dropdownLabel",
+            "value": "dropdownLabel",
+          },
+        ]
+      }
+      placeholder=""
+      promptTextCreator={[Function]}
+      shouldKeyDownEventCreateNewOption={[Function]}
+      showNewOptionAtTop={true}
+      value={
+        Array [
+          Object {
+            "label": "dropdownLabel",
+            "value": "dropdownLabel",
+          },
+        ]
+      }
+    />
+    <IconDown
+      className="src-shared-components-GUIKit-DropdownTerms-___style__iconDropdown___25Wtg"
+      height="9"
+      viewBox="0 0 22 13"
+      width="15"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    />
+  </div>
+</div>
+`;
diff --git a/__tests__/shared/components/GUIKit/DropdownTerms/index.jsx b/__tests__/shared/components/GUIKit/DropdownTerms/index.jsx
new file mode 100644
index 0000000000..1d526db680
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/DropdownTerms/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import DropdownTerms from 'components/GUIKit/DropdownTerms';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<DropdownTerms terms={[{ label: 'dropdownLabel', selected: true }]} />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/__tests__/shared/components/GUIKit/RadioButton/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/RadioButton/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..29192cd7c7
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/RadioButton/__snapshots__/index.jsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<div
+  className="radioButtonContainer src-shared-components-GUIKit-RadioButton-___style__radioButtonContainer___3YAY0 src-shared-components-GUIKit-RadioButton-___style__smSize____lb3s"
+>
+  <div
+    className="radioButton src-shared-components-GUIKit-RadioButton-___style__radioButton___2Jtbj"
+  >
+    <label
+      className="src-shared-components-GUIKit-RadioButton-___style__container___3nVSA"
+    >
+      <input
+        checked={true}
+        onChange={[Function]}
+        type="radio"
+      />
+      <span
+        className="src-shared-components-GUIKit-RadioButton-___style__checkmark___1iCFJ"
+      />
+    </label>
+    <span
+      className="src-shared-components-GUIKit-RadioButton-___style__label___MCxnk"
+    >
+      radio
+    </span>
+  </div>
+</div>
+`;
diff --git a/__tests__/shared/components/GUIKit/RadioButton/index.jsx b/__tests__/shared/components/GUIKit/RadioButton/index.jsx
new file mode 100644
index 0000000000..f386d2bbbd
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/RadioButton/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import RadioButton from 'components/GUIKit/RadioButton';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<RadioButton options={[{ label: 'radio', value: true }]} />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/__tests__/shared/components/GUIKit/TextInput/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/TextInput/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..f85a42e507
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/TextInput/__snapshots__/index.jsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<div
+  className="textInputContainer src-shared-components-GUIKit-TextInput-___style__container___7zYbm src-shared-components-GUIKit-TextInput-___style__lgSize___1boxA"
+>
+  <input
+    className=""
+    defaultValue=""
+    onChange={[Function]}
+    placeholder=""
+    type="text"
+  />
+</div>
+`;
diff --git a/__tests__/shared/components/GUIKit/TextInput/index.jsx b/__tests__/shared/components/GUIKit/TextInput/index.jsx
new file mode 100644
index 0000000000..fb49292a71
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/TextInput/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import TextInput from 'components/GUIKit/TextInput';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<TextInput />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/__tests__/shared/components/GUIKit/Textarea/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/Textarea/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..c1aa4a9108
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Textarea/__snapshots__/index.jsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<div
+  className="textareaContainer src-shared-components-GUIKit-Textarea-___style__container___399ft"
+>
+  <textarea
+    className=""
+    defaultValue=""
+    id="textAreaInput"
+    onChange={[Function]}
+    placeholder=""
+  />
+</div>
+`;
diff --git a/__tests__/shared/components/GUIKit/Textarea/index.jsx b/__tests__/shared/components/GUIKit/Textarea/index.jsx
new file mode 100644
index 0000000000..e66da02350
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Textarea/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import Textarea from 'components/GUIKit/Textarea';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<Textarea />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/__tests__/shared/components/GUIKit/Toggles/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/Toggles/__snapshots__/index.jsx.snap
new file mode 100644
index 0000000000..a48804cb5d
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Toggles/__snapshots__/index.jsx.snap
@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Default render 1`] = `
+<label
+  className="src-shared-components-GUIKit-Toggles-___style__container___Ny137 src-shared-components-GUIKit-Toggles-___style__smSize___3FNLG"
+>
+  <input
+    checked={false}
+    onChange={[Function]}
+    type="checkbox"
+  />
+  <span
+    className="src-shared-components-GUIKit-Toggles-___style__slider___A0xAb"
+  />
+</label>
+`;
diff --git a/__tests__/shared/components/GUIKit/Toggles/index.jsx b/__tests__/shared/components/GUIKit/Toggles/index.jsx
new file mode 100644
index 0000000000..25a1a5b354
--- /dev/null
+++ b/__tests__/shared/components/GUIKit/Toggles/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import Renderer from 'react-test-renderer/shallow';
+
+import Toggles from 'components/GUIKit/Toggles';
+
+
+const rnd = new Renderer();
+
+it('Default render', () => {
+  rnd.render((<Toggles />));
+  expect(rnd.getRenderOutput()).toMatchSnapshot();
+});
diff --git a/config/default.js b/config/default.js
index e9c1df07aa..f4455f1c23 100644
--- a/config/default.js
+++ b/config/default.js
@@ -409,4 +409,7 @@ module.exports = {
   TC_EDU_SEARCH_BAR_MAX_RESULTS_EACH_GROUP: 3,
   POLICY_PAGES_PATH: '/policy',
   GIGS_PAGES_PATH: '/gigs',
+  GUIKIT: {
+    DEBOUNCE_ON_CHANGE_TIME: 150,
+  },
 };
diff --git a/src/shared/components/GUIKit/Assets/Images/icon-next.svg b/src/shared/components/GUIKit/Assets/Images/icon-next.svg
new file mode 100644
index 0000000000..cb096e3a01
--- /dev/null
+++ b/src/shared/components/GUIKit/Assets/Images/icon-next.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="16px" viewBox="0 0 10 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UI-Kit/Icons/arrow/minimal-right" transform="translate(-3.000000, 0.000000)">
+            <mask id="mask-2" fill="white">
+                <polygon points="4.9 15.7 3.4 14.3 9.7 8 3.4 1.7 4.9 0.3 12.6 8"></polygon>
+            </mask>
+            <polygon fill="#2A2A2A" points="4.9 15.7 3.4 14.3 9.7 8 3.4 1.7 4.9 0.3 12.6 8"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/shared/components/GUIKit/Assets/Images/icon-prev.svg b/src/shared/components/GUIKit/Assets/Images/icon-prev.svg
new file mode 100644
index 0000000000..6b3b226ad2
--- /dev/null
+++ b/src/shared/components/GUIKit/Assets/Images/icon-prev.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="16px" viewBox="0 0 10 16" version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UI-Kit/Icons/arrow/minimal-left" transform="translate(-3.000000, 0.000000)">
+            <mask id="mask-2" fill="white">
+                <polygon points="11.1 15.7 3.4 8 11.1 0.3 12.6 1.7 6.3 8 12.6 14.3"></polygon>
+            </mask>
+            <polygon fill="#2A2A2A" points="11.1 15.7 3.4 8 11.1 0.3 12.6 1.7 6.3 8 12.6 14.3"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss b/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
new file mode 100644
index 0000000000..3506c9a510
--- /dev/null
+++ b/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
@@ -0,0 +1,72 @@
+@mixin textInputLabel {
+  font-size: 12px;
+  line-height: 24px;
+  background-color: $tc-white;
+  position: absolute;
+  top: 0;
+  left: 8px;
+  padding: 0 8px;
+  color: $tc-gray-30;
+  display: none;
+}
+
+@mixin textInput {
+  border: 1px solid $tc-gray-30;
+  border-radius: 6px;
+  font-size: 16px;
+  padding: 15px;
+  margin-bottom: 0;
+  margin-top: 12px;
+
+  &::-webkit-input-placeholder {
+    /* Edge */
+    color: $tc-gray-30;
+    opacity: 1;
+    text-transform: none;
+    font-size: 16px;
+  }
+
+  &:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: $tc-gray-30;
+    opacity: 1;
+    text-transform: none;
+    font-size: 16px;
+  }
+
+  &::placeholder {
+    color: $tc-gray-30;
+    opacity: 1;
+    text-transform: none;
+    font-size: 16px;
+  }
+}
+
+@mixin textInputXs {
+  font-size: 14px;
+
+  &::-webkit-input-placeholder {
+    /* Edge */
+    font-size: 14px;
+  }
+
+  &:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    font-size: 14px;
+  }
+
+  &::placeholder {
+    font-size: 14px;
+  }
+}
+
+@mixin errorMessage {
+  font-size: 14px;
+  line-height: 20px;
+  margin-top: 10px;
+  margin-left: 15px;
+}
+
+@mixin errorMessageXs {
+  margin-top: 8px;
+}
diff --git a/src/shared/components/GUIKit/Assets/Styles/Includes/index.scss b/src/shared/components/GUIKit/Assets/Styles/Includes/index.scss
new file mode 100644
index 0000000000..7794723d66
--- /dev/null
+++ b/src/shared/components/GUIKit/Assets/Styles/Includes/index.scss
@@ -0,0 +1 @@
+@import 'mixin';
diff --git a/src/shared/components/GUIKit/Assets/Styles/_default.scss b/src/shared/components/GUIKit/Assets/Styles/_default.scss
new file mode 100644
index 0000000000..71f0c7cc35
--- /dev/null
+++ b/src/shared/components/GUIKit/Assets/Styles/_default.scss
@@ -0,0 +1,7 @@
+@import '~components/Contentful/default';
+@import '~components/buttons/themed/tc';
+@import './Includes';
+
+.container {
+  font-family: Roboto, sans-serif;
+}
diff --git a/src/shared/components/GUIKit/Checkbox/index.jsx b/src/shared/components/GUIKit/Checkbox/index.jsx
new file mode 100644
index 0000000000..0576ea93c7
--- /dev/null
+++ b/src/shared/components/GUIKit/Checkbox/index.jsx
@@ -0,0 +1,59 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Checkbox component.
+ */
+import React, { useRef, useState } from 'react';
+import PT from 'prop-types';
+import IconCheckSolid from 'assets/images/dashboard/ico-checkmark.svg';
+import _ from 'lodash';
+import './style.scss';
+
+import { config } from 'topcoder-react-utils';
+
+function Checkbox({
+  checked,
+  onChange,
+  size,
+}) {
+  const [checkedInternal, setCheckedInternal] = useState(checked);
+  let sizeStyle = size === 'lg' ? 'lgSize' : null;
+  let checkmarkSize = size === 'lg' ? 16 : 0;
+  if (!sizeStyle) {
+    sizeStyle = size === 'xs' ? 'xsSize' : 'smSize';
+    checkmarkSize = size === 'xs' ? 10 : 13;
+  }
+  const delayedOnChange = useRef(
+    _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME),
+  ).current;
+
+  return (
+    <label styleName={`container ${sizeStyle}`}>
+      <input
+        checked={checkedInternal}
+        type="checkbox"
+        onChange={(e) => {
+          setCheckedInternal(e.target.checked);
+          delayedOnChange(e.target.checked, onChange);
+        }}
+      />
+      <div styleName="checkmark">
+        <IconCheckSolid styleName="after" width={checkmarkSize} height={checkmarkSize} />
+      </div>
+    </label>
+  );
+}
+
+Checkbox.defaultProps = {
+  checked: false,
+  onChange: () => {},
+  size: 'sm',
+};
+
+Checkbox.propTypes = {
+  checked: PT.bool,
+  onChange: PT.func,
+  size: PT.oneOf(['xs', 'sm', 'lg']),
+};
+
+export default Checkbox;
diff --git a/src/shared/components/GUIKit/Checkbox/style.scss b/src/shared/components/GUIKit/Checkbox/style.scss
new file mode 100644
index 0000000000..c8d2f0606a
--- /dev/null
+++ b/src/shared/components/GUIKit/Checkbox/style.scss
@@ -0,0 +1,109 @@
+@import '~components/GUIKit/Assets/Styles/default';
+
+/* Create a custom checkbox */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: $tc-white;
+  border: 1px solid $tc-gray-30;
+
+  /* Create the checkmark/indicator (hidden when not checked) */
+  .after {
+    position: absolute;
+    display: none;
+    left: 50%;
+    top: 50%;
+    -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
+    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
+
+    :global {
+      path {
+        fill: $tc-white;
+      }
+    }
+  }
+}
+
+/* The container */
+.container {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  // lg size
+  &.lgSize {
+    width: 25px;
+    height: 25px;
+
+    .checkmark {
+      width: 25px;
+      height: 25px;
+      border-radius: 4px;
+
+      .after {
+        margin-left: -8px;
+        margin-top: -9px;
+      }
+    }
+  }
+
+  // sm size
+  &.smSize {
+    width: 20px;
+    height: 20px;
+
+    .checkmark {
+      width: 20px;
+      height: 20px;
+      border-radius: 3px;
+
+      .after {
+        margin-left: -6px;
+        margin-top: -7px;
+      }
+    }
+  }
+
+  // xs size
+  &.xsSize {
+    width: 15px;
+    height: 15px;
+
+    .checkmark {
+      width: 15px;
+      height: 15px;
+      border-radius: 2px;
+
+      .after {
+        margin-left: -5px;
+        margin-top: -5px;
+      }
+    }
+  }
+
+  /* Hide the browser's default checkbox */
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    /* When the checkbox is checked, add a blue background */
+    &:checked ~ .checkmark {
+      background-color: $tc-level-2;
+      border: none;
+      box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
+
+      /* Show the checkmark when checked */
+      .after {
+        display: block;
+      }
+    }
+  }
+}
diff --git a/src/shared/components/GUIKit/Datepicker/index.jsx b/src/shared/components/GUIKit/Datepicker/index.jsx
new file mode 100644
index 0000000000..53bc0887ae
--- /dev/null
+++ b/src/shared/components/GUIKit/Datepicker/index.jsx
@@ -0,0 +1,88 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Datepicker component.
+ */
+import React, { useState } from 'react';
+import PT from 'prop-types';
+import moment from 'moment';
+import './style.scss';
+
+import 'react-dates/initialize';
+import { SingleDatePicker } from 'react-dates';
+import IconCalendar from 'assets/images/tc-edu/icon-calendar.svg';
+import useWindowSize from 'utils/useWindowSize';
+import IconNext from '../Assets/Images/icon-next.svg';
+import IconPrev from '../Assets/Images/icon-prev.svg';
+
+function Datepicker({
+  value,
+  placeholder,
+  label,
+  onChange,
+  errorMsg,
+  required,
+}) {
+  const [date, setDate] = useState(value ? moment(value) : null);
+  const [focused, setFocused] = useState(false);
+  const { width } = useWindowSize();
+  return (
+    <div
+      className="datepickerContainer"
+      styleName={`container ${date ? 'haveValue' : ''} ${
+        errorMsg ? 'haveError' : ''
+      } ${focused ? 'isFocused' : ''}`}
+    >
+      <SingleDatePicker
+        hideKeyboardShortcutsPanel
+        customInputIcon={<IconCalendar />}
+        date={date}
+        onDateChange={(changedDate) => {
+          setDate(changedDate);
+          onChange(changedDate ? changedDate.toDate() : null);
+        }}
+        focused={focused}
+        onFocusChange={({ focused: changedFocused }) => setFocused(changedFocused)
+        }
+        id={`${value}-${placeholder}-${label}-${errorMsg}-${required}`}
+        placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
+        inputIconPosition="after"
+        numberOfMonths={1}
+        navPrev={<IconPrev />}
+        navNext={<IconNext />}
+        displayFormat="MMM DD, YYYY"
+        daySize={width > 600 ? 53 : 35}
+        renderDayContents={d => (<div>{d.date ? d.date() : ''}</div>)}
+        enableOutsideDays
+        firstDayOfWeek={1}
+        weekDayFormat="ddd"
+      />
+      {label ? (
+        <span styleName="label">
+          {label}
+          {required ? <span>&nbsp;*</span> : null}
+        </span>
+      ) : null}
+      {errorMsg ? <span styleName="errorMessage">{errorMsg}</span> : null}
+    </div>
+  );
+}
+
+Datepicker.defaultProps = {
+  value: null,
+  placeholder: '',
+  label: '',
+  onChange: () => {},
+  errorMsg: '',
+  required: false,
+};
+
+Datepicker.propTypes = {
+  value: PT.instanceOf(Date),
+  placeholder: PT.string,
+  label: PT.string,
+  onChange: PT.func,
+  errorMsg: PT.string,
+  required: PT.bool,
+};
+
+export default Datepicker;
diff --git a/src/shared/components/GUIKit/Datepicker/style.scss b/src/shared/components/GUIKit/Datepicker/style.scss
new file mode 100644
index 0000000000..fd3fc4ab6c
--- /dev/null
+++ b/src/shared/components/GUIKit/Datepicker/style.scss
@@ -0,0 +1,203 @@
+@import '~components/GUIKit/Assets/Styles/default';
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  .label {
+    @include textInputLabel;
+  }
+
+  &.haveValue .label,
+  &.isFocused .label {
+    display: flex;
+  }
+
+  &.isFocused .label {
+    color: $tc-level-2;
+  }
+
+  &.haveError .label,
+  &.haveError.isFocused .label {
+    color: $tc-level-5;
+  }
+
+  :global {
+    @import '~react-dates/lib/css/_datepicker.css';
+
+    button {
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .SingleDatePickerInput {
+      position: relative;
+
+      .SingleDatePickerInput_calendarIcon {
+        position: absolute;
+        top: 12px;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        width: 48px;
+        bottom: 0;
+        z-index: 1;
+      }
+
+      .DateInput {
+        input {
+          @include textInput;
+
+          height: 52px;
+          padding-right: 48px;
+        }
+
+        .DateInput_fang {
+          display: none;
+        }
+      }
+
+      .SingleDatePicker_picker {
+        z-index: 7;
+        top: 64px !important;
+
+        .DayPicker__withBorder {
+          border: 1px solid $tc-gray-30;
+          box-shadow: 2px 2px 3px 0 $tc-gray-neutral-light;
+          overflow: hidden;
+        }
+
+        .DayPickerNavigation_button {
+          position: absolute;
+          top: 18px;
+
+          &:focus {
+            outline: none;
+          }
+
+          svg {
+            path {
+              fill: $tc-level-2;
+            }
+          }
+
+          &:first-child {
+            left: 18px;
+          }
+
+          &:last-child {
+            right: 18px;
+          }
+        }
+
+        .CalendarMonth_caption {
+          font-size: 16px;
+          line-height: 26px;
+          padding-top: 13px;
+          padding-bottom: 10px;
+          margin-bottom: 45px;
+          position: relative;
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: -5px;
+            width: calc(100% + 10px);
+            height: 1px;
+            background-color: $tc-gray-20;
+          }
+        }
+
+        .DayPicker_weekHeader {
+          .DayPicker_weekHeader_ul {
+            .DayPicker_weekHeader_li {
+              small {
+                color: $tc-gray-90;
+                font-weight: 500 !important;
+              }
+            }
+          }
+        }
+
+        .DayPicker_focusRegion {
+          .DayPicker_transitionContainer {
+            &.DayPicker_transitionContainer__horizontal {
+              transition: none !important;
+            }
+
+            .CalendarMonthGrid {
+              .CalendarMonthGrid_month__horizontal {
+                .CalendarMonth {
+                  table.CalendarMonth_table {
+                    tbody {
+                      tr {
+                        td {
+                          border: none;
+                          border-radius: 50%;
+                          font-size: 16px;
+
+                          &:focus {
+                            outline: none;
+                          }
+
+                          div {
+                            width: 35px;
+                            height: 35px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            margin: auto !important;
+                            border-radius: 50%;
+                          }
+
+                          &.CalendarDay__selected {
+                            background: transparent !important;
+
+                            div {
+                              background: $tc-level-2;
+                            }
+                          }
+
+                          &.CalendarDay__outside {
+                            color: $tc-gray-20;
+                          }
+
+                          &:not(.CalendarDay__outside):not(.CalendarDay__blocked_out_of_range):not(.CalendarDay__selected):hover {
+                            background: transparent !important;
+
+                            div {
+                              background: $tc-gray-05;
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.haveError {
+    :global {
+      .SingleDatePickerInput {
+        .DateInput {
+          input {
+            border: 2px solid $tc-level-5;
+          }
+        }
+      }
+    }
+  }
+}
+
+.errorMessage {
+  @include errorMessage;
+}
diff --git a/src/shared/components/GUIKit/Dropdown/index.jsx b/src/shared/components/GUIKit/Dropdown/index.jsx
index 605f542276..74822ef77a 100644
--- a/src/shared/components/GUIKit/Dropdown/index.jsx
+++ b/src/shared/components/GUIKit/Dropdown/index.jsx
@@ -2,53 +2,98 @@
 /**
  * Dropdown component.
  */
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import PT from 'prop-types';
+import _ from 'lodash';
 import ReactSelect from 'react-select';
 import './style.scss';
+import IconDown from 'assets/images/minimal-down.svg';
+import { config } from 'topcoder-react-utils';
+
 
 function Dropdown({
   options,
-  selectedId,
-  placeholder,
   label,
+  required,
+  placeholder,
   onChange,
+  errorMsg,
+  size,
 }) {
+  const [internalOptions, setInternalOptions] = useState(options);
+  const selectedOption = _.find(internalOptions, { selected: true });
+  const [focused, setFocused] = useState(false);
+  const delayedOnChange = useRef(
+    _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME),
+  ).current;
+  const sizeStyle = size === 'lg' ? 'lgSize' : 'xsSize';
+
   return (
-    <div styleName="container">
-      <label htmlFor="dropdown-select" styleName="label">{label}</label>
-      <ReactSelect
-        placeholder={placeholder}
-        autoBlur
-        autosize
-        clearable={false}
-        id="dropdown-select"
-        onChange={onChange}
-        options={options}
-        value={selectedId}
-        valueRenderer={option => (
-          <span styleName="active-option">
-            {option.name}
-          </span>
-        )}
-      />
+    <div
+      onFocusCapture={() => setFocused(true)}
+      onBlurCapture={() => setFocused(false)}
+      className="dropdownContainer"
+      styleName={`container ${sizeStyle} ${selectedOption ? 'haveValue' : ''} ${
+        errorMsg ? 'haveError' : ''
+      } ${focused ? 'isFocused' : ''}`}
+    >
+      <div styleName="relative">
+        <ReactSelect
+          autosize={false}
+          autoBlur
+          options={internalOptions.map(o => ({ value: o.label, label: o.label }))}
+          value={selectedOption ? selectedOption.label : null}
+          onChange={(value) => {
+            if (value) {
+              const newOptions = internalOptions.map(o => ({
+                selected: value.label === o.label,
+                label: o.label,
+              }));
+              setInternalOptions(newOptions);
+              delayedOnChange(
+                _.cloneDeep(newOptions),
+                onChange,
+              );
+            }
+          }}
+          placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
+          clearable={false}
+        />
+        <IconDown width="15" height="9" styleName="iconDropdown" />
+      </div>
+      {label ? (
+        <span styleName="label">
+          {label}
+          {required ? <span>&nbsp;*</span> : null}
+        </span>
+      ) : null}
+      {errorMsg ? (<span styleName="errorMessage">{errorMsg}</span>) : null}
     </div>
   );
 }
 
 Dropdown.defaultProps = {
-  options: [],
-  selectedId: null,
   placeholder: '',
   label: '',
+  required: false,
+  onChange: () => {},
+  errorMsg: '',
+  size: 'lg',
 };
 
 Dropdown.propTypes = {
-  options: PT.arrayOf(PT.shape),
-  selectedId: PT.string,
+  options: PT.arrayOf(
+    PT.shape({
+      label: PT.string.isRequired,
+      selected: PT.bool.isRequired,
+    }),
+  ).isRequired,
   placeholder: PT.string,
   label: PT.string,
-  onChange: PT.func.isRequired,
+  required: PT.bool,
+  onChange: PT.func,
+  errorMsg: PT.string,
+  size: PT.oneOf(['xs', 'lg']),
 };
 
 export default Dropdown;
diff --git a/src/shared/components/GUIKit/Dropdown/style.scss b/src/shared/components/GUIKit/Dropdown/style.scss
index 01dc2ec294..edf101d80f 100644
--- a/src/shared/components/GUIKit/Dropdown/style.scss
+++ b/src/shared/components/GUIKit/Dropdown/style.scss
@@ -1,27 +1,215 @@
+@import '~components/GUIKit/Assets/Styles/default';
+
+.label {
+  @include textInputLabel;
+}
+
+.relative {
+  position: relative;
+}
+
+.errorMessage {
+  @include errorMessage;
+}
+
+.iconDropdown {
+  position: absolute;
+  top: 50%;
+  right: 16px;
+  pointer-events: none;
+  margin-top: -4px;
+}
+
 .container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding-top: 12px;
+
+  &.haveValue .label,
+  &.isFocused .label {
+    display: flex;
+  }
+
+  &.isFocused {
+    .label {
+      color: $tc-level-2;
+    }
+
+    .iconDropdown {
+      transform: scale(1, -1);
+    }
+  }
+
+  &.haveError .label,
+  &.haveError.isFocused .label {
+    color: $tc-level-5;
+  }
+
   :global {
     @import '~react-select/dist/react-select';
 
     width: 100%;
 
-    input.Select-input,
-    input.Select-input:focus {
-      background-color: transparent !important;
-      margin-left: 0 !important;
-      padding-right: 6px !important;
-      color: red;
+    .Select-control {
+      margin: 0;
+      padding: 0;
+      border: 1px solid $tc-gray-30 !important;
+      border-radius: 6px !important;
+      height: 52px;
+      outline: none !important;
+      box-shadow: none !important;
+    }
+
+    .Select-input {
+      input {
+        font-size: 16px;
+        padding: 0;
+        height: 22px;
+        line-height: 22px;
+      }
+    }
+
+    .Select-value {
+      .Select-value-label {
+        height: 22px;
+        line-height: 22px;
+        font-size: 16px;
+      }
+    }
+
+    .Select-placeholder,
+    .Select-value,
+    .Select-input {
+      padding: 0 15px !important;
+      height: 100% !important;
+      display: flex !important;
+      align-items: center !important;
+    }
+
+    .Select-placeholder {
+      color: $tc-gray-30;
+      opacity: 1;
+      text-transform: none;
+      font-size: 16px;
     }
 
     .Select-multi-value-wrapper {
       width: 100% !important;
+      height: 100% !important;
+    }
+
+    .Select-arrow-zone {
+      padding-right: 15px !important;
+
+      .Select-arrow {
+        background-image: none;
+        border: none;
+        width: 15px;
+        height: 9px;
+        background-size: 15px 9px;
+        top: 0 !important;
+        border-width: 0 !important;
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    .Select {
+      &.is-open {
+        .Select-arrow-zone {
+          .Select-arrow {
+            transform: scale(1, -1);
+          }
+        }
+      }
+    }
+
+    .Select-menu-outer {
+      top: calc(100% + 2px) !important;
+      border: 1px solid $tc-gray-30 !important;
+      border-radius: 0 !important;
+      max-height: 269px;
+      z-index: 7;
+
+      .Select-menu {
+        max-height: 269px;
+
+        .Select-option {
+          padding: 0 15px !important;
+          font-size: 16px !important;
+          line-height: 30px !important;
+          color: $tc-gray-90 !important;
+          background-color: transparent !important;
+
+          &.is-selected {
+            font-weight: bold !important;
+          }
+
+          &:hover {
+            background-color: $tc-level-2 !important;
+            color: $tc-white !important;
+          }
+        }
+      }
     }
   }
 
-  .label {
-    position: relative;
+  &.haveError {
+    :global {
+      .Select-control {
+        border: 2px solid $tc-level-5 !important;
+      }
+    }
+  }
+
+  // lg size
+  &.lgSize {
+    :global {
+      .Select-control {
+        height: 52px;
+      }
+    }
   }
 
-  .active-option {
-    color: red;
+  // xs size
+  &.xsSize {
+    :global {
+      .Select-control {
+        height: 40px;
+      }
+
+      .Select-input {
+        input {
+          font-size: 14px;
+        }
+      }
+
+      .Select-value {
+        .Select-value-label {
+          font-size: 14px;
+        }
+      }
+
+      .Select-placeholder {
+        font-size: 14px;
+      }
+
+      .Select-menu-outer {
+        * {
+          font-size: 14px !important;
+        }
+
+        .Select-menu {
+          .Select-option {
+            font-size: 14px !important;
+          }
+        }
+      }
+    }
+
+    .errorMessage {
+      @include errorMessageXs;
+    }
   }
 }
diff --git a/src/shared/components/GUIKit/DropdownTerms/index.jsx b/src/shared/components/GUIKit/DropdownTerms/index.jsx
new file mode 100644
index 0000000000..1969c25910
--- /dev/null
+++ b/src/shared/components/GUIKit/DropdownTerms/index.jsx
@@ -0,0 +1,187 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Dropdown terms component.
+ */
+import React, { useState, useRef, useEffect } from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import { Creatable } from 'react-select';
+import IconDown from 'assets/images/minimal-down.svg';
+import './style.scss';
+
+import { config } from 'topcoder-react-utils';
+
+function DropdownTerms({
+  terms,
+  placeholder,
+  label,
+  required,
+  onChange,
+  errorMsg,
+  addNewOptionPlaceholder,
+}) {
+  const [internalTerms, setInternalTerms] = useState(terms);
+  const selectedOption = _.filter(internalTerms, { selected: true }).map(o => ({
+    value: o.label,
+    label: o.label,
+  }));
+  const [focused, setFocused] = useState(false);
+  const delayedOnChange = useRef(
+    _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME),
+  ).current;
+  const containerRef = useRef(null);
+  let inputField;
+  useEffect(() => {
+    const selectInput = containerRef.current.getElementsByClassName('Select-input');
+    const selectMenuOuter = containerRef.current.getElementsByClassName('Select-menu-outer');
+    if (selectInput && selectInput.length) {
+      const selectControl = containerRef.current.getElementsByClassName(
+        'Select-control',
+      );
+      const height1 = selectMenuOuter && selectMenuOuter.length
+        ? selectMenuOuter[0].offsetHeight
+        : 0;
+      const height2 = selectControl && selectControl.length
+        ? selectControl[0].offsetHeight
+        : 0;
+      selectInput[0].style.top = focused ? `${height1 + height2 - 1}px` : '0';
+      inputField = selectInput[0].getElementsByTagName('input');
+      inputField[0].placeholder = focused ? addNewOptionPlaceholder : '';
+    }
+  }, [focused, selectedOption]);
+
+  const CustomReactSelectRow = React.forwardRef(({
+    className,
+    option,
+    children,
+    onSelect,
+  }, ref) => (children ? (
+    <a
+      ref={ref}
+      role="button"
+      className={className}
+      onMouseDown={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onSelect(option, event);
+      }}
+      title={option.title}
+      tabIndex={-1}
+    >
+      {children}
+    </a>
+  ) : null));
+
+  CustomReactSelectRow.defaultProps = {
+    children: null,
+    className: '',
+    onSelect: () => {},
+  };
+
+  CustomReactSelectRow.propTypes = {
+    children: PT.node,
+    className: PT.string,
+    onSelect: PT.func,
+    option: PT.object.isRequired,
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className="dropdownContainer"
+      styleName={`container ${
+        selectedOption && !!selectedOption.length ? 'haveValue' : ''
+      } ${errorMsg ? 'haveError' : ''} ${_.every(internalTerms, { selected: true }) ? 'isEmptySelectList' : ''} ${focused ? 'isFocused' : ''}`}
+    >
+      <div styleName="relative">
+        <Creatable
+          onOpen={() => setFocused(true)}
+          onClose={() => setFocused(false)}
+          autosize={false}
+          optionComponent={CustomReactSelectRow}
+          options={internalTerms
+            .map(o => ({ value: o.label, label: o.label }))
+          }
+          value={selectedOption}
+          onInputKeyDown={(e) => {
+            switch (e.keyCode) {
+              case 13: // ENTER
+                if (inputField && inputField && inputField[0]) {
+                  const { value } = inputField[0];
+                  if (
+                    !value
+                    || !value.trim()
+                    || _.find(selectedOption, { label: value })
+                    || _.find(internalTerms, { label: value })
+                  ) {
+                    e.preventDefault();
+                  }
+                }
+                break;
+              default:
+            }
+          }}
+          onChange={(value) => {
+            const newValues = _.filter(
+              value,
+              o => o.label && o.label.trim() && !_.find(internalTerms, { label: o.label }),
+            ).map(o => ({ selected: true, label: o.label }));
+            const newTerms = internalTerms
+              .map(o => ({
+                selected: !!_.find(value, { label: o.label }),
+                label: o.label,
+              }))
+              .concat(newValues);
+            setInternalTerms(newTerms);
+            delayedOnChange(
+              _.cloneDeep(newTerms),
+              onChange,
+            );
+          }}
+          placeholder={focused ? '' : `${placeholder}${placeholder && required ? ' *' : ''}`}
+          clearable={false}
+          backspaceRemoves={false}
+          multi
+          promptTextCreator={() => null}
+          filterOptions={() => _.filter(
+            internalTerms, t => !_.find(selectedOption, { label: t.label }),
+          ).map(o => ({ value: o.label, label: o.label }))}
+        />
+        <IconDown width="15" height="9" styleName="iconDropdown" />
+      </div>
+      {label ? (
+        <span styleName="label">
+          {label}
+          {required ? <span>&nbsp;*</span> : null}
+        </span>
+      ) : null}
+      {errorMsg ? <span styleName="errorMessage">{errorMsg}</span> : null}
+    </div>
+  );
+}
+
+DropdownTerms.defaultProps = {
+  placeholder: '',
+  label: '',
+  required: false,
+  onChange: () => {},
+  errorMsg: '',
+  addNewOptionPlaceholder: '',
+};
+
+DropdownTerms.propTypes = {
+  terms: PT.arrayOf(
+    PT.shape({
+      label: PT.string.isRequired,
+      selected: PT.bool.isRequired,
+    }),
+  ).isRequired,
+  placeholder: PT.string,
+  label: PT.string,
+  required: PT.bool,
+  onChange: PT.func,
+  errorMsg: PT.string,
+  addNewOptionPlaceholder: PT.string,
+};
+
+export default DropdownTerms;
diff --git a/src/shared/components/GUIKit/DropdownTerms/style.scss b/src/shared/components/GUIKit/DropdownTerms/style.scss
new file mode 100644
index 0000000000..0a982b1f0a
--- /dev/null
+++ b/src/shared/components/GUIKit/DropdownTerms/style.scss
@@ -0,0 +1,162 @@
+@import '../Dropdown/style.scss';
+
+.label {
+  z-index: 6;
+}
+
+.relative {
+  position: relative;
+}
+
+.errorMessage,
+.haveValue,
+.haveError,
+.iconDropdown,
+.isFocused {
+  font-family: Roboto, sans-serif;
+}
+
+.container {
+  :global {
+    .Select-control {
+      min-height: 52px;
+      height: auto;
+      display: flex !important;
+      overflow: visible !important;
+    }
+
+    .Select-arrow-zone {
+      flex-shrink: 0 !important;
+      display: flex !important;
+      margin: auto 0 auto 10px !important;
+      width: 30px !important;
+    }
+
+    .Select-multi-value-wrapper {
+      display: flex !important;
+      flex-wrap: wrap;
+      padding-top: 12px !important;
+      padding-left: 8px !important;
+      max-height: 104px;
+      overflow: auto;
+    }
+
+    .Select-value {
+      border: none !important;
+      background-color: $tc-gray-05 !important;
+      height: 25px !important;
+      display: flex !important;
+      flex-direction: row-reverse !important;
+      align-items: center;
+      padding: 0 !important;
+      border-radius: 5px !important;
+      font-size: 12 !important;
+      color: $tc-gray-90 !important;
+      padding-left: 7px !important;
+      margin-top: 0 !important;
+      margin-bottom: 5px !important;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      z-index: 6;
+
+      .Select-value-icon {
+        border-right: none !important;
+        padding: 0 7px !important;
+        margin: 0 !important;
+        color: $tc-gray-90 !important;
+        background: transparent !important;
+      }
+
+      .Select-value-label {
+        padding: 0 !important;
+        margin: 0 !important;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: $tc-gray-90 !important;
+        text-decoration: none !important;
+      }
+    }
+
+    .Select-input {
+      position: absolute;
+      left: 0;
+      right: 0;
+      background: transparent;
+      height: 100% !important;
+      z-index: 5;
+      margin: 0 !important;
+      cursor: pointer;
+
+      input {
+        height: 25px !important;
+        opacity: 0;
+        cursor: pointer;
+      }
+    }
+
+    .Select-option {
+      border-bottom-right-radius: 0 !important;
+      border-bottom-left-radius: 0 !important;
+    }
+  }
+
+  &.isFocused {
+    :global {
+      .Select-input {
+        background: $tc-white;
+        height: 40px !important;
+        border: 1px solid $tc-gray-30;
+        right: -1px;
+        left: -1px;
+        cursor: auto;
+        z-index: 7;
+
+        input {
+          opacity: 1;
+          cursor: auto;
+
+          &::-webkit-input-placeholder {
+            /* Edge */
+            color: $tc-gray-30;
+            opacity: 1;
+            text-transform: none;
+            font-size: 16px;
+          }
+
+          &:-ms-input-placeholder {
+            /* Internet Explorer 10-11 */
+            color: $tc-gray-30;
+            opacity: 1;
+            text-transform: none;
+            font-size: 16px;
+          }
+
+          &::placeholder {
+            color: $tc-gray-30;
+            opacity: 1;
+            text-transform: none;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+
+  &.isEmptySelectList {
+    :global {
+      .Select-menu-outer {
+        border: none !important;
+      }
+    }
+  }
+}
+
+.addAnotherSkill {
+  height: 40px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
diff --git a/src/shared/components/GUIKit/JobListCard/style.scss b/src/shared/components/GUIKit/JobListCard/style.scss
index d25dc60fd5..cadbc9ee66 100644
--- a/src/shared/components/GUIKit/JobListCard/style.scss
+++ b/src/shared/components/GUIKit/JobListCard/style.scss
@@ -1,4 +1,4 @@
-@import "~components/GUIKit/default";
+@import "~components/GUIKit/Assets/Styles/default";
 @import "~components/Contentful/default";
 
 .container {
diff --git a/src/shared/components/GUIKit/Paginate/style.scss b/src/shared/components/GUIKit/Paginate/style.scss
index 70a82393b3..f811e30912 100644
--- a/src/shared/components/GUIKit/Paginate/style.scss
+++ b/src/shared/components/GUIKit/Paginate/style.scss
@@ -1,4 +1,4 @@
-@import "~components/GUIKit/default";
+@import "~components/GUIKit/Assets/Styles/default";
 
 .container {
   display: flex;
diff --git a/src/shared/components/GUIKit/RadioButton/index.jsx b/src/shared/components/GUIKit/RadioButton/index.jsx
new file mode 100644
index 0000000000..fb2df581fb
--- /dev/null
+++ b/src/shared/components/GUIKit/RadioButton/index.jsx
@@ -0,0 +1,66 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/**
+ * Radio button component.
+ */
+import React, { useRef, useState } from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import './style.scss';
+
+import { config } from 'topcoder-react-utils';
+
+function RadioButton({ options, onChange, size }) {
+  const [internalOptions, setInternalOptions] = useState(options);
+  const optionsWithKey = internalOptions.map((o, oIndex) => ({ ...o, key: oIndex }));
+  let sizeStyle = size === 'lg' ? 'lgSize' : null;
+  if (!sizeStyle) {
+    sizeStyle = size === 'xs' ? 'xsSize' : 'smSize';
+  }
+  const delayedOnChange = useRef(
+    _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME),
+  ).current;
+
+  return (
+    <div className="radioButtonContainer" styleName={`radioButtonContainer ${sizeStyle}`}>
+      {optionsWithKey.map(o => (
+        <div key={o.key} styleName="radioButton" className="radioButton">
+          <label styleName="container">
+            <input
+              type="radio"
+              checked={o.value}
+              onChange={() => {
+                const newOptions = optionsWithKey.map(oWithKeyTmp => ({
+                  label: oWithKeyTmp.label,
+                  value: o.key === oWithKeyTmp.key,
+                }));
+                setInternalOptions(newOptions);
+                delayedOnChange(_.cloneDeep(newOptions), onChange);
+              }}
+            />
+            <span styleName="checkmark" />
+          </label>
+          {o.label ? (<span styleName="label">{o.label}</span>) : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+RadioButton.defaultProps = {
+  onChange: () => {},
+  size: 'sm',
+};
+
+RadioButton.propTypes = {
+  options: PT.arrayOf(
+    PT.shape({
+      label: PT.string,
+      value: PT.bool.isRequired,
+    }),
+  ).isRequired,
+  onChange: PT.func,
+  size: PT.oneOf(['xs', 'sm', 'lg']),
+};
+
+export default RadioButton;
diff --git a/src/shared/components/GUIKit/RadioButton/style.scss b/src/shared/components/GUIKit/RadioButton/style.scss
new file mode 100644
index 0000000000..280b4fb988
--- /dev/null
+++ b/src/shared/components/GUIKit/RadioButton/style.scss
@@ -0,0 +1,147 @@
+@import '~components/GUIKit/Assets/Styles/default';
+
+/* Create a custom radio button */
+.checkmark {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: $tc-white;
+  border-radius: 50%;
+  border: 1px solid $tc-gray-30;
+
+  /* Create the indicator (the dot/circle - hidden when not checked) */
+  &::after {
+    content: '';
+    position: absolute;
+    display: none;
+    top: 50%;
+    left: 50%;
+    margin-top: -6px;
+    margin-left: -6px;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background-color: $tc-white;
+    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
+  }
+}
+
+.radioButton {
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  font-size: 14px;
+}
+
+/* The container */
+.container {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  color: $tc-gray-90;
+
+  /* Hide the browser's default radio button */
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+
+    /* When the radio button is checked, add a blue background */
+    &:checked ~ .checkmark {
+      background-color: $tc-level-2;
+      box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
+      border: none;
+
+      /* Show the indicator (dot/circle) when checked */
+      &::after {
+        display: block;
+      }
+    }
+  }
+}
+
+.radioButtonContainer {
+  display: flex;
+  flex-direction: column;
+
+  // lg size
+  &.lgSize {
+    .container {
+      padding-left: 24px;
+      line-height: 24px;
+      height: 24px;
+
+      .checkmark {
+        height: 24px;
+        width: 24px;
+
+        &::after {
+          margin-top: -6px;
+          margin-left: -6px;
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
+
+    .label {
+      margin-left: 15px;
+    }
+  }
+
+  // sm size
+  &.smSize {
+    .container {
+      padding-left: 20px;
+      line-height: 20px;
+      height: 20px;
+
+      .checkmark {
+        height: 20px;
+        width: 20px;
+
+        &::after {
+          margin-top: -5px;
+          margin-left: -5px;
+          width: 10px;
+          height: 10px;
+        }
+      }
+    }
+
+    .label {
+      margin-left: 10px;
+    }
+  }
+
+  // xs size
+  &.xsSize {
+    .container {
+      padding-left: 15px;
+      line-height: 15px;
+      height: 15px;
+
+      .checkmark {
+        height: 16px;
+        width: 16px;
+
+        &::after {
+          margin-top: -4px;
+          margin-left: -4px;
+          width: 8px;
+          height: 8px;
+        }
+      }
+    }
+
+    .label {
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/src/shared/components/GUIKit/SearchCombo/style.scss b/src/shared/components/GUIKit/SearchCombo/style.scss
index 30d0928547..707a10e37d 100644
--- a/src/shared/components/GUIKit/SearchCombo/style.scss
+++ b/src/shared/components/GUIKit/SearchCombo/style.scss
@@ -1,4 +1,4 @@
-@import "~components/GUIKit/default";
+@import "~components/GUIKit/Assets/Styles/default";
 
 .container {
   display: flex;
diff --git a/src/shared/components/GUIKit/TextInput/index.jsx b/src/shared/components/GUIKit/TextInput/index.jsx
new file mode 100644
index 0000000000..95a86dd516
--- /dev/null
+++ b/src/shared/components/GUIKit/TextInput/index.jsx
@@ -0,0 +1,69 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Text input component.
+ */
+import React, { useState, useRef } from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import './style.scss';
+
+import { config } from 'topcoder-react-utils';
+
+function TextInput({
+  placeholder,
+  label,
+  errorMsg,
+  value,
+  onChange,
+  required,
+  size,
+}) {
+  const [val, setVal] = useState(value);
+  const delayedOnChange = useRef(
+    _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME),
+  ).current;
+  const sizeStyle = size === 'lg' ? 'lgSize' : 'xsSize';
+
+  return (
+    <div className="textInputContainer" styleName={`container ${sizeStyle}`}>
+      <input
+        defaultValue={value}
+        type="text"
+        placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
+        styleName={`${val ? 'haveValue' : ''} ${errorMsg ? 'haveError' : ''}`}
+        onChange={(e) => {
+          delayedOnChange(e.target.value, onChange);
+          setVal(e.target.value);
+        }}
+      />
+      {label ? (
+        <label htmlFor="textBoxInput">
+          {label}{required ? (<span>&nbsp;*</span>) : null}
+        </label>
+      ) : null}
+      {errorMsg ? (<span styleName="errorMessage">{errorMsg}</span>) : null}
+    </div>
+  );
+}
+
+TextInput.defaultProps = {
+  placeholder: '',
+  label: '',
+  errorMsg: '',
+  value: '',
+  onChange: () => {},
+  required: false,
+  size: 'lg',
+};
+
+TextInput.propTypes = {
+  placeholder: PT.string,
+  label: PT.string,
+  errorMsg: PT.string,
+  value: PT.string,
+  onChange: PT.func,
+  required: PT.bool,
+  size: PT.oneOf(['xs', 'lg']),
+};
+
+export default TextInput;
diff --git a/src/shared/components/GUIKit/TextInput/style.scss b/src/shared/components/GUIKit/TextInput/style.scss
new file mode 100644
index 0000000000..2320a6ab68
--- /dev/null
+++ b/src/shared/components/GUIKit/TextInput/style.scss
@@ -0,0 +1,63 @@
+@import '~components/GUIKit/Assets/Styles/default';
+
+.errorMessage {
+  @include errorMessage;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  label {
+    @include textInputLabel;
+  }
+
+  input:not([type='checkbox']) {
+    @include textInput;
+
+    height: 52px;
+  }
+
+  // lg size
+  &.lgSize {
+    input:not([type='checkbox']) {
+      height: 52px;
+    }
+  }
+
+  // xs size
+  &.xsSize {
+    input:not([type='checkbox']) {
+      @include textInputXs;
+
+      height: 40px;
+      padding: 0 15px;
+    }
+
+    .errorMessage {
+      @include errorMessageXs;
+    }
+  }
+
+  input:not([type='checkbox']).haveValue + label,
+  input:not([type='checkbox']):focus + label {
+    display: flex;
+  }
+
+  input:not([type='checkbox']):focus + label {
+    color: $tc-level-2;
+  }
+
+  input:not([type='checkbox']).haveError + label,
+  input:not([type='checkbox']).haveError:focus + label {
+    color: $tc-level-5;
+  }
+
+  input:not([type='checkbox']).haveError,
+  input:not([type='checkbox']).haveError:active,
+  input:not([type='checkbox']).haveError:focus,
+  input:not([type='checkbox']).haveError:hover {
+    border: 2px solid $tc-level-5;
+  }
+}
diff --git a/src/shared/components/GUIKit/Textarea/index.jsx b/src/shared/components/GUIKit/Textarea/index.jsx
new file mode 100644
index 0000000000..f78ac4d75b
--- /dev/null
+++ b/src/shared/components/GUIKit/Textarea/index.jsx
@@ -0,0 +1,68 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/**
+ * Textarea component.
+ */
+import React, { useState, useRef } from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import './style.scss';
+
+import { config } from 'topcoder-react-utils';
+
+function Textarea({
+  placeholder,
+  label,
+  errorMsg,
+  value,
+  onChange,
+  required,
+}) {
+  const [val, setVal] = useState(value);
+  const delayedOnChange = useRef(
+    _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME),
+  ).current;
+
+  return (
+    <div className="textareaContainer" styleName="container">
+      <textarea
+        defaultValue={value}
+        placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
+        id="textAreaInput"
+        styleName={`${val ? 'haveValue' : ''} ${errorMsg ? 'haveError' : ''}`}
+        onChange={(e) => {
+          delayedOnChange(e.target.value, onChange);
+          setVal(e.target.value);
+        }}
+      />
+      {label ? (
+        <div styleName="labelMask" />
+      ) : null}
+      {label ? (
+        <label htmlFor="textAreaInput">
+          {label}{required ? (<span>&nbsp;*</span>) : null}
+        </label>
+      ) : null}
+      {errorMsg ? (<span styleName="errorMessage">{errorMsg}</span>) : null}
+    </div>
+  );
+}
+
+Textarea.defaultProps = {
+  placeholder: '',
+  label: '',
+  errorMsg: '',
+  value: '',
+  onChange: () => {},
+  required: false,
+};
+
+Textarea.propTypes = {
+  placeholder: PT.string,
+  label: PT.string,
+  errorMsg: PT.string,
+  value: PT.string,
+  onChange: PT.func,
+  required: PT.bool,
+};
+
+export default Textarea;
diff --git a/src/shared/components/GUIKit/Textarea/style.scss b/src/shared/components/GUIKit/Textarea/style.scss
new file mode 100644
index 0000000000..6473a18c8d
--- /dev/null
+++ b/src/shared/components/GUIKit/Textarea/style.scss
@@ -0,0 +1,66 @@
+@import '~components/GUIKit/Assets/Styles/default';
+
+.labelMask {
+  position: absolute;
+  background: $tc-white;
+  height: 11px;
+  top: 13px;
+  left: 4px;
+  right: 10px;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  label {
+    @include textInputLabel;
+  }
+
+  textarea {
+    &.haveValue ~ label,
+    &:focus ~ label {
+      display: flex;
+    }
+
+    &:focus ~ label {
+      color: $tc-level-2;
+    }
+
+    &.haveError ~ label,
+    &.haveError:focus ~ label {
+      color: $tc-level-5;
+    }
+  }
+
+  textarea,
+  textarea:active,
+  textarea:focus,
+  textarea:hover {
+    @include textInput;
+
+    min-height: 52px;
+    resize: none;
+    outline: none;
+    box-shadow: none;
+    height: 100%;
+    line-height: 26px;
+  }
+
+  textarea.haveError,
+  textarea.haveError:active,
+  textarea.haveError:focus,
+  textarea.haveError:hover {
+    border: 2px solid $tc-level-5;
+  }
+
+  textarea.haveError ~ .labelMask {
+    height: 10px;
+    top: 14px;
+  }
+}
+
+.errorMessage {
+  @include errorMessage;
+}
diff --git a/src/shared/components/GUIKit/Toggles/index.jsx b/src/shared/components/GUIKit/Toggles/index.jsx
new file mode 100644
index 0000000000..a9f48b4d4e
--- /dev/null
+++ b/src/shared/components/GUIKit/Toggles/index.jsx
@@ -0,0 +1,53 @@
+/* eslint-disable jsx-a11y/label-has-for */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/**
+ * Toggles component.
+ */
+import React, { useRef, useState } from 'react';
+import PT from 'prop-types';
+import _ from 'lodash';
+import './style.scss';
+
+import { config } from 'topcoder-react-utils';
+
+function Toggles({ checked, onChange, size }) {
+  const [internalChecked, setInternalChecked] = useState(checked);
+  let sizeStyle = size === 'lg' ? 'lgSize' : null;
+  const delayedOnChange = useRef(
+    _.debounce((q, cb) => cb(q), config.GUIKIT.DEBOUNCE_ON_CHANGE_TIME),
+  );
+
+  if (!sizeStyle) {
+    sizeStyle = size === 'xs' ? 'xsSize' : 'smSize';
+  }
+
+  return (
+    <label styleName={`container ${sizeStyle}`}>
+      <input
+        checked={internalChecked}
+        type="checkbox"
+        onChange={(e) => {
+          setInternalChecked(e.target.checked);
+          delayedOnChange.current(e.target.checked, onChange);
+        }}
+      />
+      <span styleName="slider" />
+      {sizeStyle === 'lgSize' && !internalChecked ? <span styleName="off">off</span> : null}
+      {sizeStyle === 'lgSize' && internalChecked ? <span styleName="on">on</span> : null}
+    </label>
+  );
+}
+
+Toggles.defaultProps = {
+  checked: false,
+  onChange: () => {},
+  size: 'sm',
+};
+
+Toggles.propTypes = {
+  checked: PT.bool,
+  onChange: PT.func,
+  size: PT.oneOf(['xs', 'sm', 'lg']),
+};
+
+export default Toggles;
diff --git a/src/shared/components/GUIKit/Toggles/style.scss b/src/shared/components/GUIKit/Toggles/style.scss
new file mode 100644
index 0000000000..7c3a2a2012
--- /dev/null
+++ b/src/shared/components/GUIKit/Toggles/style.scss
@@ -0,0 +1,141 @@
+@import '~components/GUIKit/Assets/Styles/default';
+
+.container {
+  position: relative;
+  display: flex;
+  cursor: pointer;
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: $tc-gray-30;
+    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
+
+    &::before {
+      position: absolute;
+      content: '';
+      background-color: $tc-white;
+      box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.35);
+      border-radius: 50%;
+    }
+  }
+
+  // sm size
+  &.smSize {
+    width: 34px;
+    height: 20px;
+
+    .slider {
+      border-radius: 10px;
+
+      &::before {
+        height: 14px;
+        width: 14px;
+        left: 3px;
+        bottom: 3px;
+      }
+    }
+  }
+
+  // xs size
+  &.xsSize {
+    width: 26px;
+    height: 15px;
+
+    .slider {
+      border-radius: 7px;
+
+      &::before {
+        height: 11px;
+        width: 11px;
+        left: 2px;
+        bottom: 2px;
+      }
+    }
+  }
+
+  // lg size
+  &.lgSize {
+    width: 48px;
+    height: 25px;
+
+    .slider {
+      border-radius: 17px;
+
+      &::before {
+        height: 17px;
+        width: 17px;
+        left: 4px;
+        bottom: 4px;
+      }
+    }
+  }
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+
+    &:focus + .slider {
+      box-shadow: 0 0 1px $tc-level-2;
+    }
+
+    &:checked + .slider {
+      background-color: $tc-level-2;
+    }
+  }
+
+  // lg size
+  &.lgSize input {
+    &:checked + .slider {
+      &::before {
+        -webkit-transform: translateX(23px);
+        -ms-transform: translateX(23px);
+        transform: translateX(23px);
+      }
+    }
+  }
+
+  // sm size
+  &.smSize input {
+    &:checked + .slider {
+      &::before {
+        -webkit-transform: translateX(14px);
+        -ms-transform: translateX(14px);
+        transform: translateX(14px);
+      }
+    }
+  }
+
+  // xs size
+  &.xsSize input {
+    &:checked + .slider {
+      &::before {
+        -webkit-transform: translateX(11px);
+        -ms-transform: translateX(11px);
+        transform: translateX(11px);
+      }
+    }
+  }
+}
+
+.on,
+.off {
+  position: absolute;
+  top: 5px;
+  font-size: 12px;
+  line-height: 14px;
+  color: $tc-white;
+}
+
+.on {
+  left: 8px;
+}
+
+.off {
+  right: 8px;
+}
diff --git a/src/shared/components/GUIKit/_default.scss b/src/shared/components/GUIKit/_default.scss
deleted file mode 100644
index b88b18f6e3..0000000000
--- a/src/shared/components/GUIKit/_default.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "~components/Contentful/default";
-@import "~components/buttons/themed/tc";
diff --git a/src/shared/components/examples/GUIKit/Checkbox/index.jsx b/src/shared/components/examples/GUIKit/Checkbox/index.jsx
new file mode 100644
index 0000000000..2a0d7d4066
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Checkbox/index.jsx
@@ -0,0 +1,189 @@
+import React from 'react';
+import Checkbox from 'components/GUIKit/Checkbox';
+
+import './style.scss';
+
+export default function CheckboxExample() {
+  const checkValues = [
+    {
+      label: '',
+      key: 1,
+      checked: false,
+      size: 'lg',
+    },
+    {
+      label: '',
+      key: 2,
+      checked: true,
+      size: 'lg',
+    },
+    {
+      label: '',
+      key: 3,
+      checked: false,
+      size: 'sm',
+    },
+    {
+      label: '',
+      key: 4,
+      checked: true,
+      size: 'sm',
+    },
+    {
+      label: '',
+      key: 5,
+      checked: false,
+      size: 'xs',
+    },
+    {
+      label: '',
+      key: 6,
+      checked: true,
+      size: 'xs',
+    },
+    {
+      label: 'Option 1',
+      key: 7,
+      checked: true,
+      size: 'lg',
+    },
+    {
+      label: 'Option 1',
+      key: 8,
+      checked: true,
+      size: 'sm',
+    },
+    {
+      label: 'Option 1',
+      key: 9,
+      checked: true,
+      size: 'xs',
+    },
+    {
+      label: 'Option 2',
+      key: 10,
+      checked: false,
+      size: 'lg',
+    },
+    {
+      label: 'Option 2',
+      key: 11,
+      checked: false,
+      size: 'sm',
+    },
+    {
+      label: 'Option 2',
+      key: 12,
+      checked: false,
+      size: 'xs',
+    },
+  ];
+
+  // eslint-disable-next-line no-console
+  const onChange = value => console.log('onChange', value);
+  return (
+    <div styleName="container">
+      <div styleName="grid1">
+        <div styleName="grid11">
+          <div styleName="grid111">
+            <Checkbox
+              onChange={checked => onChange(checked)}
+              size={checkValues[0].size}
+              checked={checkValues[0].checked}
+            />
+          </div>
+          <Checkbox
+            onChange={checked => onChange(checked)}
+            size={checkValues[1].size}
+            checked={checkValues[1].checked}
+          />
+        </div>
+        <div styleName="grid11">
+          <div styleName="grid111">
+            <Checkbox
+              onChange={checked => onChange(checked)}
+              size={checkValues[2].size}
+              checked={checkValues[2].checked}
+            />
+          </div>
+          <Checkbox
+            onChange={checked => onChange(checked)}
+            size={checkValues[3].size}
+            checked={checkValues[3].checked}
+          />
+        </div>
+        <div styleName="grid11">
+          <div styleName="grid111">
+            <Checkbox
+              onChange={checked => onChange(checked)}
+              size={checkValues[4].size}
+              checked={checkValues[4].checked}
+            />
+          </div>
+          <Checkbox
+            onChange={checked => onChange(checked)}
+            size={checkValues[5].size}
+            checked={checkValues[5].checked}
+          />
+        </div>
+      </div>
+      <div styleName="grid2">
+        <span styleName="grid2Label">Examples usage</span>
+        <div styleName="grid21">
+          <div styleName="grid211">
+            <div styleName="grid2111">
+              <Checkbox
+                onChange={checked => onChange(checked)}
+                size={checkValues[6].size}
+                checked={checkValues[6].checked}
+              />
+              <span>{checkValues[6].label}</span>
+            </div>
+            <div styleName="grid2111">
+              <Checkbox
+                onChange={checked => onChange(checked)}
+                size={checkValues[7].size}
+                checked={checkValues[7].checked}
+              />
+              <span>{checkValues[7].label}</span>
+            </div>
+            <div styleName="grid2111">
+              <Checkbox
+                onChange={checked => onChange(checked)}
+                size={checkValues[8].size}
+                checked={checkValues[8].checked}
+              />
+              <span>{checkValues[8].label}</span>
+            </div>
+          </div>
+          <div styleName="grid211">
+            <div styleName="grid2111">
+              <Checkbox
+                onChange={checked => onChange(checked)}
+                size={checkValues[9].size}
+                checked={checkValues[9].checked}
+              />
+              <span>{checkValues[9].label}</span>
+            </div>
+            <div styleName="grid2111">
+              <Checkbox
+                onChange={checked => onChange(checked)}
+                size={checkValues[10].size}
+                checked={checkValues[10].checked}
+              />
+              <span>{checkValues[10].label}</span>
+            </div>
+            <div styleName="grid2111">
+              <Checkbox
+                onChange={checked => onChange(checked)}
+                size={checkValues[11].size}
+                checked={checkValues[11].checked}
+              />
+              <span>{checkValues[11].label}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/shared/components/examples/GUIKit/Checkbox/style.scss b/src/shared/components/examples/GUIKit/Checkbox/style.scss
new file mode 100644
index 0000000000..06164ce657
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Checkbox/style.scss
@@ -0,0 +1,56 @@
+@import '~styles/mixins';
+
+.container {
+  display: flex;
+  font-family: Roboto, sans-serif;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.grid1,
+.grid2,
+.grid21 {
+  display: flex;
+  flex-direction: column;
+}
+
+.grid11,
+.grid211,
+.grid2111 {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.grid111 {
+  display: flex;
+  width: 50px;
+}
+
+.grid11 {
+  margin-top: 20px;
+}
+
+.grid1 {
+  margin-right: 100px;
+}
+
+.grid2 {
+  margin-top: 20px;
+}
+
+.grid2Label {
+  font-size: 13px;
+  color: $tc-purple-110;
+  margin-bottom: 20px;
+}
+
+.grid2111 {
+  margin-right: 60px;
+  margin-bottom: 10px;
+
+  span {
+    margin-left: 15px;
+    font-size: 14px;
+  }
+}
diff --git a/src/shared/components/examples/GUIKit/Datepicker/index.jsx b/src/shared/components/examples/GUIKit/Datepicker/index.jsx
new file mode 100644
index 0000000000..b7d0309f1f
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Datepicker/index.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Datepicker from 'components/GUIKit/Datepicker';
+
+import './style.scss';
+
+export default function DatepickerExample() {
+  const values = [
+    {
+      key: 2,
+      placeholder: 'Available From',
+      label: '',
+      value: null,
+      required: false,
+      errorMsg: '',
+      sectionTitle: 'Empty',
+    },
+    {
+      key: 3,
+      placeholder: 'Available From',
+      label: 'Available From',
+      value: new Date(),
+      required: false,
+      errorMsg: '',
+      sectionTitle: 'Filled',
+    },
+    {
+      key: 4,
+      placeholder: 'Available From',
+      label: 'Available From',
+      value: new Date(),
+      required: false,
+      errorMsg: 'This date is wrong. Please check it again.',
+      sectionTitle: 'Error',
+    },
+    {
+      key: 5,
+      placeholder: 'Available From',
+      label: 'Available From',
+      value: new Date(),
+      required: true,
+      errorMsg: '',
+      sectionTitle: 'Require',
+    },
+  ];
+
+  // eslint-disable-next-line no-console
+  const onChange = value => console.log('onChange', value);
+  return (
+    <div styleName="container">
+      {values.map(value => (
+        <div styleName="rowItem" key={value.key}>
+          <span styleName="sectionTitle">{value.sectionTitle}</span>
+          <Datepicker
+            placeholder={value.placeholder}
+            label={value.label}
+            value={value.value}
+            required={value.required}
+            errorMsg={value.errorMsg}
+            onChange={onChange}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/shared/components/examples/GUIKit/Datepicker/style.scss b/src/shared/components/examples/GUIKit/Datepicker/style.scss
new file mode 100644
index 0000000000..7bb011b166
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Datepicker/style.scss
@@ -0,0 +1,31 @@
+@import '~styles/mixins';
+
+.container {
+  font-family: Roboto, sans-serif;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+
+  :global {
+    .datepickerContainer {
+      flex-grow: 1;
+    }
+  }
+}
+
+.rowItem {
+  margin-top: 20px;
+  display: flex;
+  align-items: flex-start;
+  max-width: 520px;
+  flex-shrink: 0;
+}
+
+.sectionTitle {
+  margin-right: 24px;
+  font-size: 13px;
+  color: $tc-purple-110;
+  margin-left: 27px;
+  width: 50px;
+  flex-shrink: 0;
+  margin-top: 30px;
+}
diff --git a/src/shared/components/examples/GUIKit/Dropdown/index.jsx b/src/shared/components/examples/GUIKit/Dropdown/index.jsx
new file mode 100644
index 0000000000..2eb0b7d937
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Dropdown/index.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import Dropdown from 'components/GUIKit/Dropdown';
+import _ from 'lodash';
+import PT from 'prop-types';
+
+import './style.scss';
+
+function DropdownExample({ size }) {
+  const options = [
+    { label: 'Afghanistan', selected: false },
+    { label: 'Albania', selected: true },
+    { label: 'Andorra', selected: false },
+    { label: 'Anguilla', selected: false },
+    { label: 'Belgium', selected: false },
+    { label: 'Brazil', selected: false },
+  ];
+
+  const values = [
+    {
+      key: 1,
+      options: _.cloneDeep(options.map(o => ({ ...o, selected: false }))),
+      label: 'Country',
+      required: false,
+      placeholder: 'Select country',
+      errorMsg: '',
+      sectionTitle: 'Empty',
+    },
+    {
+      key: 2,
+      options: _.cloneDeep(options),
+      label: 'Country',
+      required: false,
+      placeholder: '',
+      errorMsg: '',
+      sectionTitle: 'Filled',
+    },
+    {
+      key: 4,
+      options: _.cloneDeep(options),
+      label: 'Country',
+      required: false,
+      placeholder: '',
+      errorMsg: 'The country is wrong. Please check it again.',
+      sectionTitle: 'Error',
+    },
+    {
+      key: 3,
+      options: _.cloneDeep(options),
+      label: 'Country',
+      required: true,
+      placeholder: '',
+      errorMsg: '',
+      sectionTitle: 'Require',
+    },
+  ];
+
+  // eslint-disable-next-line no-console
+  const onChange = value => console.log('onChange', value);
+  return (
+    <div styleName="container">
+      {values.map(value => (
+        <div styleName="rowItem" key={value.key}>
+          <span styleName="sectionTitle">{value.sectionTitle}</span>
+          <Dropdown
+            onChange={changedOptions => onChange(changedOptions)}
+            options={value.options}
+            label={value.label}
+            required={value.required}
+            placeholder={value.placeholder}
+            errorMsg={value.errorMsg}
+            size={size}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+DropdownExample.defaultProps = {
+  size: 'lg',
+};
+
+DropdownExample.propTypes = {
+  size: PT.oneOf(['xs', 'lg']),
+};
+
+export default DropdownExample;
diff --git a/src/shared/components/examples/GUIKit/Dropdown/style.scss b/src/shared/components/examples/GUIKit/Dropdown/style.scss
new file mode 100644
index 0000000000..fb6a4b5201
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Dropdown/style.scss
@@ -0,0 +1,33 @@
+@import '~styles/mixins';
+
+.container {
+  font-family: Roboto, sans-serif;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+
+  :global {
+    .dropdownContainer {
+      flex-grow: 1;
+      width: 0;
+    }
+  }
+}
+
+.rowItem {
+  margin-top: 20px;
+  display: flex;
+  align-items: flex-start;
+  max-width: 520px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.sectionTitle {
+  margin-right: 24px;
+  font-size: 13px;
+  color: $tc-purple-110;
+  margin-left: 27px;
+  width: 50px;
+  flex-shrink: 0;
+  margin-top: 30px;
+}
diff --git a/src/shared/components/examples/GUIKit/DropdownTerms/index.jsx b/src/shared/components/examples/GUIKit/DropdownTerms/index.jsx
new file mode 100644
index 0000000000..110454360b
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/DropdownTerms/index.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import DropdownTerms from 'components/GUIKit/DropdownTerms';
+import _ from 'lodash';
+
+import './style.scss';
+
+export default function DropdownTermsExample() {
+  const options = [
+    { label: 'EJB', selected: false },
+    { label: 'Java', selected: true },
+    { label: 'Javascript', selected: false },
+    { label: 'MangoDB', selected: false },
+    { label: 'Oracle', selected: false },
+    { label: 'React', selected: false },
+    { label: 'Serverlet', selected: false },
+    { label: 'Web Services', selected: false },
+    { label: 'Zipkin', selected: false },
+  ];
+
+  const values = [
+    {
+      key: 1,
+      options: _.cloneDeep(options.map(o => ({ ...o, selected: false }))),
+      label: 'Tech Skills',
+      required: false,
+      placeholder: 'Tech Skills',
+      errorMsg: '',
+      sectionTitle: 'Empty',
+      addNewOptionPlaceholder: 'Type to add another skill...',
+    },
+    {
+      key: 2,
+      options: _.cloneDeep(options),
+      label: 'Tech Skills',
+      required: false,
+      placeholder: 'Tech Skills',
+      errorMsg: '',
+      sectionTitle: 'Filled',
+      addNewOptionPlaceholder: 'Type to add another skill...',
+    },
+    {
+      key: 4,
+      options: _.cloneDeep(options),
+      label: 'Tech Skills',
+      required: false,
+      placeholder: 'Tech Skills',
+      errorMsg: 'The skill is wrong. Please check it again.',
+      sectionTitle: 'Error',
+      addNewOptionPlaceholder: 'Type to add another skill...',
+    },
+    {
+      key: 5,
+      options: _.cloneDeep(options.map(o => ({ ...o, selected: false }))),
+      label: 'Tech Skills',
+      required: true,
+      placeholder: 'Tech Skills',
+      errorMsg: '',
+      sectionTitle: 'Require',
+      addNewOptionPlaceholder: 'Type to add another skill...',
+    },
+  ];
+
+  // eslint-disable-next-line no-console
+  const onChange = value => console.log('onChange', value);
+  return (
+    <div styleName="container">
+      {values.map(value => (
+        <div styleName="rowItem" key={value.key}>
+          <span styleName="sectionTitle">{value.sectionTitle}</span>
+          <DropdownTerms
+            onChange={changedOptions => onChange(changedOptions)}
+            terms={value.options}
+            label={value.label}
+            required={value.required}
+            placeholder={value.placeholder}
+            errorMsg={value.errorMsg}
+            addNewOptionPlaceholder={value.addNewOptionPlaceholder}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/shared/components/examples/GUIKit/DropdownTerms/style.scss b/src/shared/components/examples/GUIKit/DropdownTerms/style.scss
new file mode 100644
index 0000000000..cbda0d481c
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/DropdownTerms/style.scss
@@ -0,0 +1,33 @@
+@import '~styles/mixins';
+
+.container {
+  font-family: Roboto, sans-serif;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+
+  :global {
+    .dropdownContainer {
+      flex-grow: 1;
+      width: 0;
+    }
+  }
+}
+
+.rowItem {
+  margin-top: 20px;
+  display: flex;
+  align-items: flex-start;
+  max-width: 970px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+}
+
+.sectionTitle {
+  margin-right: 24px;
+  font-size: 13px;
+  color: $tc-purple-110;
+  margin-left: 27px;
+  width: 50px;
+  flex-shrink: 0;
+  margin-top: 30px;
+}
diff --git a/src/shared/components/examples/GUIKit/RadioButton/index.jsx b/src/shared/components/examples/GUIKit/RadioButton/index.jsx
new file mode 100644
index 0000000000..06906851de
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/RadioButton/index.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import RadioButton from 'components/GUIKit/RadioButton';
+
+import './style.scss';
+
+export default function RadioButtonExample() {
+  const values = [
+    {
+      key: 1,
+      options: [{ label: '', value: false }, { label: '', value: true }],
+      size: 'lg',
+    },
+    {
+      key: 3,
+      options: [{ label: '', value: false }, { label: '', value: true }],
+      size: 'sm',
+    },
+    {
+      key: 5,
+      options: [{ label: '', value: false }, { label: '', value: true }],
+      size: 'xs',
+    },
+    {
+      key: 7,
+      options: [{ label: 'Option 1', value: true }, { label: 'Option 2', value: false }],
+      size: 'lg',
+    },
+    {
+      key: 8,
+      options: [{ label: 'Option 1', value: true }, { label: 'Option 2', value: false }],
+      size: 'sm',
+    },
+    {
+      key: 9,
+      options: [{ label: 'Option 1', value: true }, { label: 'Option 2', value: false }],
+      size: 'xs',
+    },
+  ];
+
+  // eslint-disable-next-line no-console
+  const onChange = value => console.log('onChange', value);
+  return (
+    <div styleName="container">
+      <div styleName="grid1">
+        <RadioButton
+          onChange={options => onChange(options)}
+          size={values[0].size}
+          options={values[0].options}
+        />
+        <RadioButton
+          onChange={options => onChange(options)}
+          size={values[1].size}
+          options={values[1].options}
+        />
+        <RadioButton
+          onChange={options => onChange(options)}
+          size={values[2].size}
+          options={values[2].options}
+        />
+      </div>
+      <div styleName="grid2">
+        <span styleName="grid2Label">Examples usage</span>
+        <div styleName="grid21">
+          <RadioButton
+            onChange={options => onChange(options)}
+            size={values[3].size}
+            options={values[3].options}
+          />
+          <RadioButton
+            onChange={options => onChange(options)}
+            size={values[4].size}
+            options={values[4].options}
+          />
+          <RadioButton
+            onChange={options => onChange(options)}
+            size={values[5].size}
+            options={values[5].options}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/shared/components/examples/GUIKit/RadioButton/style.scss b/src/shared/components/examples/GUIKit/RadioButton/style.scss
new file mode 100644
index 0000000000..6775400632
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/RadioButton/style.scss
@@ -0,0 +1,59 @@
+@import '~styles/mixins';
+
+.container {
+  display: flex;
+  font-family: Roboto, sans-serif;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.grid2,
+.grid1 {
+  display: flex;
+  flex-direction: column;
+}
+
+.grid2Label {
+  font-size: 13px;
+  color: $tc-purple-110;
+  margin-bottom: 20px;
+}
+
+.grid21 {
+  display: flex;
+  flex-wrap: wrap;
+
+  :global {
+    .radioButtonContainer {
+      margin-right: 60px;
+      height: 60px;
+      justify-content: space-around;
+    }
+  }
+}
+
+.grid1 {
+  margin-right: 100px;
+
+  :global {
+    .radioButtonContainer {
+      display: flex;
+      flex-direction: row;
+      margin-top: 20px;
+      width: 76px;
+      justify-content: space-between;
+
+      &:nth-child(2) {
+        width: 73px;
+      }
+
+      &:nth-child(3) {
+        width: 69px;
+      }
+    }
+  }
+}
+
+.grid2 {
+  margin-top: 20px;
+}
diff --git a/src/shared/components/examples/GUIKit/TextInput/index.jsx b/src/shared/components/examples/GUIKit/TextInput/index.jsx
new file mode 100644
index 0000000000..527108f6f2
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/TextInput/index.jsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import TextInput from 'components/GUIKit/TextInput';
+import PT from 'prop-types';
+
+import './style.scss';
+
+function TextInputExample({ size }) {
+  const values = [
+    {
+      key: 2,
+      placeholder: 'Pick a username',
+      label: '',
+      value: '',
+      required: false,
+      errorMsg: '',
+      sectionTitle: 'Empty',
+    },
+    {
+      key: 3,
+      placeholder: 'Pick a username',
+      label: 'Username',
+      value: 'Adam Morehead',
+      required: false,
+      errorMsg: '',
+      sectionTitle: 'Filled',
+    },
+    {
+      key: 4,
+      placeholder: 'Pick a username',
+      label: 'Username',
+      value: 'Adam Morehead',
+      required: false,
+      errorMsg: 'This username is wrong. Please check it again.',
+      sectionTitle: 'Error',
+    },
+    {
+      key: 5,
+      placeholder: 'Pick a username',
+      label: 'Username',
+      value: 'Adam Morehead',
+      required: true,
+      errorMsg: '',
+    },
+  ];
+
+  // eslint-disable-next-line no-console
+  const onChange = value => console.log('onChange', value);
+  return (
+    <div styleName="container">
+      {values.map(value => (
+        <div styleName="rowItem" key={value.key}>
+          <span styleName="sectionTitle">{value.sectionTitle}</span>
+          <TextInput
+            placeholder={value.placeholder}
+            label={value.label}
+            value={value.value}
+            required={value.required}
+            errorMsg={value.errorMsg}
+            onChange={onChange}
+            size={size}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+TextInputExample.defaultProps = {
+  size: 'lg',
+};
+
+TextInputExample.propTypes = {
+  size: PT.oneOf(['xs', 'lg']),
+};
+
+export default TextInputExample;
diff --git a/src/shared/components/examples/GUIKit/TextInput/style.scss b/src/shared/components/examples/GUIKit/TextInput/style.scss
new file mode 100644
index 0000000000..6ee600c2c7
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/TextInput/style.scss
@@ -0,0 +1,31 @@
+@import '~styles/mixins';
+
+.container {
+  font-family: Roboto, sans-serif;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+
+  :global {
+    .textInputContainer {
+      flex-grow: 1;
+    }
+  }
+}
+
+.rowItem {
+  margin-top: 20px;
+  display: flex;
+  align-items: flex-start;
+  max-width: 520px;
+  flex-shrink: 0;
+}
+
+.sectionTitle {
+  margin-right: 24px;
+  font-size: 13px;
+  color: $tc-purple-110;
+  margin-left: 27px;
+  width: 50px;
+  flex-shrink: 0;
+  margin-top: 30px;
+}
diff --git a/src/shared/components/examples/GUIKit/Textarea/index.jsx b/src/shared/components/examples/GUIKit/Textarea/index.jsx
new file mode 100644
index 0000000000..972b0f87c9
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Textarea/index.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import Textarea from 'components/GUIKit/Textarea';
+
+import './style.scss';
+
+export default function TextareaExample() {
+  const values = [
+    {
+      key: 2,
+      placeholder: 'Briefly describe your request',
+      label: '',
+      value: '',
+      required: false,
+      errorMsg: '',
+      sectionTitle: 'Empty',
+    },
+    {
+      key: 3,
+      placeholder: 'Briefly describe your request',
+      label: 'Briefly describe your request',
+      value: 'Different members have differet reasons for joining Topcoder and that’s why I would like to propose one thing.',
+      required: false,
+      errorMsg: '',
+      sectionTitle: 'Filled',
+    },
+    {
+      key: 4,
+      placeholder: 'Briefly describe your request',
+      label: 'Briefly describe your request',
+      value: 'Different members have differet reasons for joining Topcoder and that’s why I would like to propose one thing.',
+      required: false,
+      errorMsg: 'Your request is wrong. Please check it again.',
+      sectionTitle: 'Error',
+    },
+    {
+      key: 5,
+      placeholder: 'Briefly describe your request',
+      label: 'Briefly describe your request',
+      value: 'Different members have differet reasons for joining Topcoder and that’s why I would like to propose one thing.',
+      required: true,
+      errorMsg: '',
+      sectionTitle: 'Require',
+    },
+  ];
+
+  // eslint-disable-next-line no-console
+  const onChange = value => console.log('onChange', value);
+  return (
+    <div styleName="container">
+      {values.map(value => (
+        <div styleName="rowItem" key={value.key}>
+          <span styleName="sectionTitle">{value.sectionTitle}</span>
+          <Textarea
+            placeholder={value.placeholder}
+            label={value.label}
+            value={value.value}
+            required={value.required}
+            errorMsg={value.errorMsg}
+            onChange={onChange}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/shared/components/examples/GUIKit/Textarea/style.scss b/src/shared/components/examples/GUIKit/Textarea/style.scss
new file mode 100644
index 0000000000..f82e84ed50
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Textarea/style.scss
@@ -0,0 +1,33 @@
+@import '~styles/mixins';
+
+.container {
+  font-family: Roboto, sans-serif;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+
+  :global {
+    .textareaContainer {
+      flex-grow: 1;
+      height: 176px;
+    }
+  }
+}
+
+.rowItem {
+  margin-top: 20px;
+  display: flex;
+  align-items: flex-start;
+  max-width: 520px;
+  min-height: 176px;
+  flex-shrink: 0;
+}
+
+.sectionTitle {
+  margin-right: 24px;
+  font-size: 13px;
+  color: $tc-purple-110;
+  margin-left: 27px;
+  width: 50px;
+  margin-top: 32px;
+  flex-shrink: 0;
+}
diff --git a/src/shared/components/examples/GUIKit/Toggles/index.jsx b/src/shared/components/examples/GUIKit/Toggles/index.jsx
new file mode 100644
index 0000000000..e043b124ef
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Toggles/index.jsx
@@ -0,0 +1,127 @@
+import React from 'react';
+import Toggles from 'components/GUIKit/Toggles';
+
+import './style.scss';
+
+export default function TogglesExample() {
+  const checkValues = [
+    {
+      label: '',
+      key: 1,
+      checked: false,
+      size: 'lg',
+    },
+    {
+      label: '',
+      key: 2,
+      checked: true,
+      size: 'lg',
+    },
+    {
+      label: '',
+      key: 3,
+      checked: false,
+      size: 'sm',
+    },
+    {
+      label: '',
+      key: 4,
+      checked: true,
+      size: 'sm',
+    },
+    {
+      label: '',
+      key: 5,
+      checked: false,
+      size: 'xs',
+    },
+    {
+      label: '',
+      key: 6,
+      checked: true,
+      size: 'xs',
+    },
+    {
+      label: 'Option 1',
+      key: 7,
+      checked: true,
+      size: 'lg',
+    },
+    {
+      label: 'Option 2',
+      key: 10,
+      checked: false,
+      size: 'lg',
+    },
+  ];
+
+  // eslint-disable-next-line no-console
+  const onChange = value => console.log('onChange', value);
+  return (
+    <div styleName="container">
+      <div styleName="grid1">
+        <div styleName="grid11">
+          <div styleName="grid111">
+            <Toggles
+              onChange={checked => onChange(checked)}
+              size={checkValues[0].size}
+              checked={checkValues[0].checked}
+            />
+          </div>
+          <Toggles
+            onChange={checked => onChange(checked)}
+            size={checkValues[1].size}
+            checked={checkValues[1].checked}
+          />
+        </div>
+        <div styleName="grid11">
+          <div styleName="grid111">
+            <Toggles
+              onChange={checked => onChange(checked)}
+              size={checkValues[2].size}
+              checked={checkValues[2].checked}
+            />
+          </div>
+          <Toggles
+            onChange={checked => onChange(checked)}
+            size={checkValues[3].size}
+            checked={checkValues[3].checked}
+          />
+        </div>
+        <div styleName="grid11">
+          <div styleName="grid111">
+            <Toggles
+              onChange={checked => onChange(checked)}
+              size={checkValues[4].size}
+              checked={checkValues[4].checked}
+            />
+          </div>
+          <Toggles
+            onChange={checked => onChange(checked)}
+            size={checkValues[5].size}
+            checked={checkValues[5].checked}
+          />
+        </div>
+      </div>
+      <div styleName="grid2">
+        <span styleName="grid2Label">Examples usage</span>
+        <div styleName="grid21">
+          <span styleName="grid21Label">{checkValues[6].label}</span>
+          <Toggles
+            onChange={checked => onChange(checked)}
+            size={checkValues[6].size}
+            checked={checkValues[6].checked}
+          />
+        </div>
+        <div styleName="grid21">
+          <span styleName="grid21Label">{checkValues[7].label}</span>
+          <Toggles
+            onChange={checked => onChange(checked)}
+            size={checkValues[7].size}
+            checked={checkValues[7].checked}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/shared/components/examples/GUIKit/Toggles/style.scss b/src/shared/components/examples/GUIKit/Toggles/style.scss
new file mode 100644
index 0000000000..00b21bdab6
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/Toggles/style.scss
@@ -0,0 +1,45 @@
+@import '~styles/mixins';
+
+.container {
+  display: flex;
+  font-family: Roboto, sans-serif;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.grid1,
+.grid2 {
+  display: flex;
+  flex-direction: column;
+}
+
+.grid2 {
+  margin-left: 50px;
+  margin-top: 20px;
+}
+
+.grid11 {
+  display: flex;
+  margin-top: 20px;
+}
+
+.grid111 {
+  width: 70px;
+}
+
+.grid2Label {
+  font-size: 13px;
+  color: $tc-purple-110;
+  margin-bottom: 2px;
+}
+
+.grid21 {
+  display: flex;
+  align-items: center;
+  margin-top: 18px;
+}
+
+.grid21Label {
+  font-size: 14px;
+  margin-right: 10px;
+}
diff --git a/src/shared/components/examples/GUIKit/index.jsx b/src/shared/components/examples/GUIKit/index.jsx
new file mode 100644
index 0000000000..5836630ed6
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/index.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import CheckboxExample from './Checkbox';
+import TextInputExample from './TextInput';
+import TextareaExample from './Textarea';
+import RadioButtonExample from './RadioButton';
+import DatepickerExample from './Datepicker';
+import DropdownTermsExample from './DropdownTerms';
+import TogglesExample from './Toggles';
+import DropdownExample from './Dropdown';
+
+import './style.scss';
+
+export default function GUIKit() {
+  return (
+    <div styleName="container">
+      <h2 styleName="sectionTitle">TEXTBOX</h2>
+      <TextInputExample />
+
+      <h2 styleName="sectionTitle">TEXTBOX SMALL</h2>
+      <TextInputExample size="xs" />
+
+      <h2 styleName="sectionTitle">TEXTAREA</h2>
+      <TextareaExample />
+
+      <h2 styleName="sectionTitle">CHECKBOXES</h2>
+      <CheckboxExample />
+
+      <h2 styleName="sectionTitle">RADIO BUTTONS</h2>
+      <RadioButtonExample />
+
+      <h2 styleName="sectionTitle">DATE PICKER</h2>
+      <DatepickerExample />
+
+      <h2 styleName="sectionTitle">DROPDOWN SKILLS</h2>
+      <DropdownTermsExample />
+
+      <h2 styleName="sectionTitle">TOGGLES</h2>
+      <TogglesExample />
+
+      <h2 styleName="sectionTitle">DROPDOWN</h2>
+      <DropdownExample />
+
+      <h2 styleName="sectionTitle">DROPDOWN  SMALL</h2>
+      <DropdownExample size="xs" />
+    </div>
+  );
+}
diff --git a/src/shared/components/examples/GUIKit/style.scss b/src/shared/components/examples/GUIKit/style.scss
new file mode 100644
index 0000000000..2d9af1a8b5
--- /dev/null
+++ b/src/shared/components/examples/GUIKit/style.scss
@@ -0,0 +1,16 @@
+.container {
+  padding: 20px;
+  padding-bottom: 100px;
+
+  h1 {
+    font-size: 34px;
+    font-weight: 500 !important;
+  }
+}
+
+.sectionTitle {
+  text-transform: uppercase;
+  font-size: 20px;
+  font-weight: 600 !important;
+  margin-top: 50px;
+}
diff --git a/src/shared/routes/Examples/Examples.jsx b/src/shared/routes/Examples/Examples.jsx
index 04fb03a6fe..8c9bcd1403 100644
--- a/src/shared/routes/Examples/Examples.jsx
+++ b/src/shared/routes/Examples/Examples.jsx
@@ -30,6 +30,7 @@ import SearchBarExample from 'components/examples/SearchBar';
 import TracksTreeExample from 'components/examples/TracksTree';
 import TracksFilterExample from 'components/examples/TracksFilter';
 import SearchPageFilterExample from 'components/examples/SearchPageFilter';
+import GUIKit from 'components/examples/GUIKit';
 
 import {
   Switch,
@@ -66,6 +67,7 @@ export default function Examples({
       />
       <Route path={`${base}/color-mixins`} component={ColorMixins} />
       <Route path={`${base}/contentful`} component={Contentful} />
+      <Route path={`${base}/GUIKit`} component={GUIKit} />
       <Route path={`${base}/css-modules`} component={CssModules} />
       <Route path={`${base}/data-fetch`} component={DataFetch} />
       <Route path={`${base}/editor`} component={Editor} />
diff --git a/src/shared/utils/useWindowSize.js b/src/shared/utils/useWindowSize.js
new file mode 100644
index 0000000000..3e3da98c5d
--- /dev/null
+++ b/src/shared/utils/useWindowSize.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+/**
+ * Get window size
+ */
+export default function useWindowSize() {
+  const isSSR = typeof window !== 'undefined';
+  const [windowSize, setWindowSize] = React.useState({
+    width: isSSR ? window.innerWidth : 1200,
+    height: isSSR ? window.innerHeight : 800,
+  });
+
+  function changeWindowSize() {
+    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+  }
+
+  React.useEffect(() => {
+    window.addEventListener('resize', changeWindowSize);
+
+    return () => {
+      window.removeEventListener('resize', changeWindowSize);
+    };
+  }, []);
+
+  return windowSize;
+}

From e9476a91d5979d1b0cd47c572daebc1848c01f41 Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Tue, 15 Sep 2020 10:29:37 +0300
Subject: [PATCH 2/6] GUI challenge fixes

---
 .../GUIKit/Assets/Styles/Includes/_mixin.scss | 20 ++++++++++++----
 .../components/GUIKit/Checkbox/style.scss     |  4 ++--
 .../components/GUIKit/Datepicker/style.scss   | 10 ++++----
 .../components/GUIKit/Dropdown/style.scss     | 24 ++++++++++++++-----
 .../components/GUIKit/DropdownTerms/index.jsx |  2 ++
 .../GUIKit/DropdownTerms/style.scss           | 15 ++++++------
 .../components/GUIKit/RadioButton/style.scss  |  6 ++---
 .../components/GUIKit/TextInput/style.scss    |  2 +-
 .../components/GUIKit/Textarea/style.scss     |  2 +-
 .../components/GUIKit/Toggles/style.scss      |  6 ++---
 src/shared/utils/useWindowSize.js             |  5 +++-
 11 files changed, 62 insertions(+), 34 deletions(-)

diff --git a/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss b/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
index 3506c9a510..b8c20ed703 100644
--- a/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
+++ b/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
@@ -1,3 +1,8 @@
+// GUIKit colors
+$gui-kit-gray-30: #aaa;
+$gui-kit-gray-90: #2a2a2a;
+$gui-kit-level-2: #0ab88a;
+
 @mixin textInputLabel {
   font-size: 12px;
   line-height: 24px;
@@ -6,12 +11,12 @@
   top: 0;
   left: 8px;
   padding: 0 8px;
-  color: $tc-gray-30;
+  color: $gui-kit-gray-30;
   display: none;
 }
 
 @mixin textInput {
-  border: 1px solid $tc-gray-30;
+  border: 1px solid $gui-kit-gray-30;
   border-radius: 6px;
   font-size: 16px;
   padding: 15px;
@@ -20,7 +25,7 @@
 
   &::-webkit-input-placeholder {
     /* Edge */
-    color: $tc-gray-30;
+    color: $gui-kit-gray-30;
     opacity: 1;
     text-transform: none;
     font-size: 16px;
@@ -28,18 +33,23 @@
 
   &:-ms-input-placeholder {
     /* Internet Explorer 10-11 */
-    color: $tc-gray-30;
+    color: $gui-kit-gray-30;
     opacity: 1;
     text-transform: none;
     font-size: 16px;
   }
 
   &::placeholder {
-    color: $tc-gray-30;
+    color: $gui-kit-gray-30;
     opacity: 1;
     text-transform: none;
     font-size: 16px;
   }
+
+  &:focus {
+    border: 1px solid $gui-kit-gray-30;
+    box-shadow: none;
+  }
 }
 
 @mixin textInputXs {
diff --git a/src/shared/components/GUIKit/Checkbox/style.scss b/src/shared/components/GUIKit/Checkbox/style.scss
index c8d2f0606a..7d6801f888 100644
--- a/src/shared/components/GUIKit/Checkbox/style.scss
+++ b/src/shared/components/GUIKit/Checkbox/style.scss
@@ -6,7 +6,7 @@
   top: 0;
   left: 0;
   background-color: $tc-white;
-  border: 1px solid $tc-gray-30;
+  border: 1px solid $gui-kit-gray-30;
 
   /* Create the checkmark/indicator (hidden when not checked) */
   .after {
@@ -96,7 +96,7 @@
 
     /* When the checkbox is checked, add a blue background */
     &:checked ~ .checkmark {
-      background-color: $tc-level-2;
+      background-color: $gui-kit-level-2;
       border: none;
       box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
 
diff --git a/src/shared/components/GUIKit/Datepicker/style.scss b/src/shared/components/GUIKit/Datepicker/style.scss
index fd3fc4ab6c..8f27b70db5 100644
--- a/src/shared/components/GUIKit/Datepicker/style.scss
+++ b/src/shared/components/GUIKit/Datepicker/style.scss
@@ -15,7 +15,7 @@
   }
 
   &.isFocused .label {
-    color: $tc-level-2;
+    color: $gui-kit-level-2;
   }
 
   &.haveError .label,
@@ -64,7 +64,7 @@
         top: 64px !important;
 
         .DayPicker__withBorder {
-          border: 1px solid $tc-gray-30;
+          border: 1px solid $gui-kit-gray-30;
           box-shadow: 2px 2px 3px 0 $tc-gray-neutral-light;
           overflow: hidden;
         }
@@ -79,7 +79,7 @@
 
           svg {
             path {
-              fill: $tc-level-2;
+              fill: $gui-kit-level-2;
             }
           }
 
@@ -115,7 +115,7 @@
           .DayPicker_weekHeader_ul {
             .DayPicker_weekHeader_li {
               small {
-                color: $tc-gray-90;
+                color: $gui-kit-gray-90;
                 font-weight: 500 !important;
               }
             }
@@ -157,7 +157,7 @@
                             background: transparent !important;
 
                             div {
-                              background: $tc-level-2;
+                              background: $gui-kit-level-2;
                             }
                           }
 
diff --git a/src/shared/components/GUIKit/Dropdown/style.scss b/src/shared/components/GUIKit/Dropdown/style.scss
index edf101d80f..837b2fe5e5 100644
--- a/src/shared/components/GUIKit/Dropdown/style.scss
+++ b/src/shared/components/GUIKit/Dropdown/style.scss
@@ -33,7 +33,7 @@
 
   &.isFocused {
     .label {
-      color: $tc-level-2;
+      color: $gui-kit-level-2;
     }
 
     .iconDropdown {
@@ -54,7 +54,7 @@
     .Select-control {
       margin: 0;
       padding: 0;
-      border: 1px solid $tc-gray-30 !important;
+      border: 1px solid $gui-kit-gray-30 !important;
       border-radius: 6px !important;
       height: 52px;
       outline: none !important;
@@ -67,6 +67,11 @@
         padding: 0;
         height: 22px;
         line-height: 22px;
+
+        &:focus {
+          border: none;
+          box-shadow: none;
+        }
       }
     }
 
@@ -88,7 +93,7 @@
     }
 
     .Select-placeholder {
-      color: $tc-gray-30;
+      color: $gui-kit-gray-30;
       opacity: 1;
       text-transform: none;
       font-size: 16px;
@@ -127,7 +132,7 @@
 
     .Select-menu-outer {
       top: calc(100% + 2px) !important;
-      border: 1px solid $tc-gray-30 !important;
+      border: 1px solid $gui-kit-gray-30 !important;
       border-radius: 0 !important;
       max-height: 269px;
       z-index: 7;
@@ -139,7 +144,7 @@
           padding: 0 15px !important;
           font-size: 16px !important;
           line-height: 30px !important;
-          color: $tc-gray-90 !important;
+          color: $gui-kit-gray-90 !important;
           background-color: transparent !important;
 
           &.is-selected {
@@ -147,7 +152,7 @@
           }
 
           &:hover {
-            background-color: $tc-level-2 !important;
+            background-color: #229173 !important;
             color: $tc-white !important;
           }
         }
@@ -169,6 +174,12 @@
       .Select-control {
         height: 52px;
       }
+
+      .Select-input {
+        input {
+          height: 52px;
+        }
+      }
     }
   }
 
@@ -182,6 +193,7 @@
       .Select-input {
         input {
           font-size: 14px;
+          height: 40px;
         }
       }
 
diff --git a/src/shared/components/GUIKit/DropdownTerms/index.jsx b/src/shared/components/GUIKit/DropdownTerms/index.jsx
index 1969c25910..b9e3a7a4f7 100644
--- a/src/shared/components/GUIKit/DropdownTerms/index.jsx
+++ b/src/shared/components/GUIKit/DropdownTerms/index.jsx
@@ -47,6 +47,8 @@ function DropdownTerms({
       selectInput[0].style.top = focused ? `${height1 + height2 - 1}px` : '0';
       inputField = selectInput[0].getElementsByTagName('input');
       inputField[0].placeholder = focused ? addNewOptionPlaceholder : '';
+      inputField[0].style.border = 'none';
+      inputField[0].style.boxShadow = 'none';
     }
   }, [focused, selectedOption]);
 
diff --git a/src/shared/components/GUIKit/DropdownTerms/style.scss b/src/shared/components/GUIKit/DropdownTerms/style.scss
index 0a982b1f0a..121aa54da7 100644
--- a/src/shared/components/GUIKit/DropdownTerms/style.scss
+++ b/src/shared/components/GUIKit/DropdownTerms/style.scss
@@ -51,7 +51,7 @@
       padding: 0 !important;
       border-radius: 5px !important;
       font-size: 12 !important;
-      color: $tc-gray-90 !important;
+      color: $gui-kit-gray-90 !important;
       padding-left: 7px !important;
       margin-top: 0 !important;
       margin-bottom: 5px !important;
@@ -64,7 +64,7 @@
         border-right: none !important;
         padding: 0 7px !important;
         margin: 0 !important;
-        color: $tc-gray-90 !important;
+        color: $gui-kit-gray-90 !important;
         background: transparent !important;
       }
 
@@ -74,8 +74,9 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        color: $tc-gray-90 !important;
+        color: $gui-kit-gray-90 !important;
         text-decoration: none !important;
+        font-size: 12px;
       }
     }
 
@@ -107,7 +108,7 @@
       .Select-input {
         background: $tc-white;
         height: 40px !important;
-        border: 1px solid $tc-gray-30;
+        border: 1px solid $gui-kit-gray-30;
         right: -1px;
         left: -1px;
         cursor: auto;
@@ -119,7 +120,7 @@
 
           &::-webkit-input-placeholder {
             /* Edge */
-            color: $tc-gray-30;
+            color: $gui-kit-gray-30;
             opacity: 1;
             text-transform: none;
             font-size: 16px;
@@ -127,14 +128,14 @@
 
           &:-ms-input-placeholder {
             /* Internet Explorer 10-11 */
-            color: $tc-gray-30;
+            color: $gui-kit-gray-30;
             opacity: 1;
             text-transform: none;
             font-size: 16px;
           }
 
           &::placeholder {
-            color: $tc-gray-30;
+            color: $gui-kit-gray-30;
             opacity: 1;
             text-transform: none;
             font-size: 16px;
diff --git a/src/shared/components/GUIKit/RadioButton/style.scss b/src/shared/components/GUIKit/RadioButton/style.scss
index 280b4fb988..63705c163d 100644
--- a/src/shared/components/GUIKit/RadioButton/style.scss
+++ b/src/shared/components/GUIKit/RadioButton/style.scss
@@ -7,7 +7,7 @@
   left: 0;
   background-color: $tc-white;
   border-radius: 50%;
-  border: 1px solid $tc-gray-30;
+  border: 1px solid $gui-kit-gray-30;
 
   /* Create the indicator (the dot/circle - hidden when not checked) */
   &::after {
@@ -44,7 +44,7 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  color: $tc-gray-90;
+  color: $gui-kit-gray-90;
 
   /* Hide the browser's default radio button */
   input {
@@ -54,7 +54,7 @@
 
     /* When the radio button is checked, add a blue background */
     &:checked ~ .checkmark {
-      background-color: $tc-level-2;
+      background-color: $gui-kit-level-2;
       box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
       border: none;
 
diff --git a/src/shared/components/GUIKit/TextInput/style.scss b/src/shared/components/GUIKit/TextInput/style.scss
index 2320a6ab68..b71c2b8184 100644
--- a/src/shared/components/GUIKit/TextInput/style.scss
+++ b/src/shared/components/GUIKit/TextInput/style.scss
@@ -46,7 +46,7 @@
   }
 
   input:not([type='checkbox']):focus + label {
-    color: $tc-level-2;
+    color: $gui-kit-level-2;
   }
 
   input:not([type='checkbox']).haveError + label,
diff --git a/src/shared/components/GUIKit/Textarea/style.scss b/src/shared/components/GUIKit/Textarea/style.scss
index 6473a18c8d..57f67b42a6 100644
--- a/src/shared/components/GUIKit/Textarea/style.scss
+++ b/src/shared/components/GUIKit/Textarea/style.scss
@@ -25,7 +25,7 @@
     }
 
     &:focus ~ label {
-      color: $tc-level-2;
+      color: $gui-kit-level-2;
     }
 
     &.haveError ~ label,
diff --git a/src/shared/components/GUIKit/Toggles/style.scss b/src/shared/components/GUIKit/Toggles/style.scss
index 7c3a2a2012..ca91b38f88 100644
--- a/src/shared/components/GUIKit/Toggles/style.scss
+++ b/src/shared/components/GUIKit/Toggles/style.scss
@@ -12,7 +12,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: $tc-gray-30;
+    background-color: $gui-kit-gray-30;
     box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
 
     &::before {
@@ -81,11 +81,11 @@
     height: 0;
 
     &:focus + .slider {
-      box-shadow: 0 0 1px $tc-level-2;
+      box-shadow: 0 0 1px $gui-kit-level-2;
     }
 
     &:checked + .slider {
-      background-color: $tc-level-2;
+      background-color: $gui-kit-level-2;
     }
   }
 
diff --git a/src/shared/utils/useWindowSize.js b/src/shared/utils/useWindowSize.js
index 3e3da98c5d..3c71376c9c 100644
--- a/src/shared/utils/useWindowSize.js
+++ b/src/shared/utils/useWindowSize.js
@@ -11,7 +11,10 @@ export default function useWindowSize() {
   });
 
   function changeWindowSize() {
-    setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+    setWindowSize({
+      width: isSSR ? window.innerWidth : 1200,
+      height: isSSR ? window.innerHeight : 800,
+    });
   }
 
   React.useEffect(() => {

From 47b652f967fc020b58b3839a602b6e74a93c5572 Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Tue, 15 Sep 2020 14:51:05 +0300
Subject: [PATCH 3/6] GUIKit prod fixes and implement of #4890

---
 .../Dropdown/__snapshots__/index.jsx.snap     |   7 ++-
 .../__snapshots__/index.jsx.snap              |   7 ++-
 src/assets/images/dropdown-arrow.png          | Bin 0 -> 295 bytes
 .../components/GUIKit/Dropdown/index.jsx      |   4 +-
 .../components/GUIKit/DropdownTerms/index.jsx |   4 +-
 .../components/GUIKit/SearchCombo/style.scss  |   9 ++--
 src/shared/containers/Gigs/RecruitCRMJobs.jsx |  48 +++++++++++++++++-
 .../containers/Gigs/jobLisingStyles.scss      |  22 ++++++++
 8 files changed, 81 insertions(+), 20 deletions(-)
 create mode 100644 src/assets/images/dropdown-arrow.png

diff --git a/__tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap
index 694bfadb1b..1108c3a813 100644
--- a/__tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/GUIKit/Dropdown/__snapshots__/index.jsx.snap
@@ -65,13 +65,12 @@ exports[`Default render 1`] = `
       valueComponent={[Function]}
       valueKey="value"
     />
-    <IconDown
+    <img
+      alt="dropdown-arraow-icon"
       className="src-shared-components-GUIKit-Dropdown-___style__iconDropdown___2bPox"
       height="9"
-      viewBox="0 0 22 13"
+      src="/community-app-assets/images/e740c51bb099110dff2900fa4fc94d72.png"
       width="15"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </div>
 </div>
diff --git a/__tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap
index b338bc15b7..0da839a8aa 100644
--- a/__tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/GUIKit/DropdownTerms/__snapshots__/index.jsx.snap
@@ -59,13 +59,12 @@ exports[`Default render 1`] = `
         ]
       }
     />
-    <IconDown
+    <img
+      alt="dropdown-arrow-icon"
       className="src-shared-components-GUIKit-DropdownTerms-___style__iconDropdown___25Wtg"
       height="9"
-      viewBox="0 0 22 13"
+      src="/community-app-assets/images/e740c51bb099110dff2900fa4fc94d72.png"
       width="15"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </div>
 </div>
diff --git a/src/assets/images/dropdown-arrow.png b/src/assets/images/dropdown-arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..40edda6752a1b17b799686b665bf2e5a2f5bdb6f
GIT binary patch
literal 295
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngf!3-pC1-7LEsi**-5LX~ASe_=(kicIN#n+H5
zTpcIWkRnu_DA*7O60C_8ZAccWOAxM$7p_ed0x=SVYhkDc$N-8b2-PNtzy-mK|NsB1
z{x{YInl4ik<QL4qFCZu+Eh8(Zps3Q+*4cIZ#Hll9Z{N9l@4>?#ziM-Jfa(~Nyxm=7
zUo#g@1ag8sT^vI=WLXb#Gc_rQFl_LYT=Z??lqL86p1+wEDcrC{Z(g9V!qp0i{uP`{
zq>i6hd$jK823P$F(Qm{Li|u9Dd35)lMdukVOYXN&XZWPP&zRv!HQPTcV-}MII;X>c
P#xr=j`njxgN@xNApH*a`

literal 0
HcmV?d00001

diff --git a/src/shared/components/GUIKit/Dropdown/index.jsx b/src/shared/components/GUIKit/Dropdown/index.jsx
index 74822ef77a..082cba1d5c 100644
--- a/src/shared/components/GUIKit/Dropdown/index.jsx
+++ b/src/shared/components/GUIKit/Dropdown/index.jsx
@@ -7,7 +7,7 @@ import PT from 'prop-types';
 import _ from 'lodash';
 import ReactSelect from 'react-select';
 import './style.scss';
-import IconDown from 'assets/images/minimal-down.svg';
+import iconDown from 'assets/images/dropdown-arrow.png';
 import { config } from 'topcoder-react-utils';
 
 
@@ -59,7 +59,7 @@ function Dropdown({
           placeholder={`${placeholder}${placeholder && required ? ' *' : ''}`}
           clearable={false}
         />
-        <IconDown width="15" height="9" styleName="iconDropdown" />
+        <img width="15" height="9" styleName="iconDropdown" src={iconDown} alt="dropdown-arraow-icon" />
       </div>
       {label ? (
         <span styleName="label">
diff --git a/src/shared/components/GUIKit/DropdownTerms/index.jsx b/src/shared/components/GUIKit/DropdownTerms/index.jsx
index b9e3a7a4f7..0eb25fc8ce 100644
--- a/src/shared/components/GUIKit/DropdownTerms/index.jsx
+++ b/src/shared/components/GUIKit/DropdownTerms/index.jsx
@@ -6,7 +6,7 @@ import React, { useState, useRef, useEffect } from 'react';
 import PT from 'prop-types';
 import _ from 'lodash';
 import { Creatable } from 'react-select';
-import IconDown from 'assets/images/minimal-down.svg';
+import iconDown from 'assets/images/dropdown-arrow.png';
 import './style.scss';
 
 import { config } from 'topcoder-react-utils';
@@ -149,7 +149,7 @@ function DropdownTerms({
             internalTerms, t => !_.find(selectedOption, { label: t.label }),
           ).map(o => ({ value: o.label, label: o.label }))}
         />
-        <IconDown width="15" height="9" styleName="iconDropdown" />
+        <img width="15" height="9" styleName="iconDropdown" src={iconDown} alt="dropdown-arrow-icon" />
       </div>
       {label ? (
         <span styleName="label">
diff --git a/src/shared/components/GUIKit/SearchCombo/style.scss b/src/shared/components/GUIKit/SearchCombo/style.scss
index 707a10e37d..ce03a3219c 100644
--- a/src/shared/components/GUIKit/SearchCombo/style.scss
+++ b/src/shared/components/GUIKit/SearchCombo/style.scss
@@ -30,12 +30,9 @@
       z-index: 0;
       top: 8px;
       left: 15px;
-
-      @include xs-to-sm {
-        max-width: 250px;
-        overflow: hidden;
-        white-space: nowrap;
-      }
+      overflow: hidden;
+      white-space: nowrap;
+      max-width: calc(100% - 20px);
     }
 
     .clear-search {
diff --git a/src/shared/containers/Gigs/RecruitCRMJobs.jsx b/src/shared/containers/Gigs/RecruitCRMJobs.jsx
index d09ba71afc..46b5b50d6e 100644
--- a/src/shared/containers/Gigs/RecruitCRMJobs.jsx
+++ b/src/shared/containers/Gigs/RecruitCRMJobs.jsx
@@ -8,12 +8,22 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import SearchCombo from 'components/GUIKit/SearchCombo';
 import Paginate from 'components/GUIKit/Paginate';
 import JobListCard from 'components/GUIKit/JobListCard';
+import Dropdown from 'components/GUIKit/Dropdown';
 import PT from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 import './jobLisingStyles.scss';
 
 const GIGS_PER_PAGE = 10;
+// Sort by dropdown
+const sortByOptions = [
+  { label: 'Latest Added Descending', selected: true },
+  { label: 'Latest Updated Descending', selected: false },
+];
+// Locations
+const locations = [{
+  label: 'Anywhere', selected: true,
+}];
 
 class RecruitCRMJobsContainer extends React.Component {
   constructor(props) {
@@ -23,11 +33,14 @@ class RecruitCRMJobsContainer extends React.Component {
       term: '',
       page: 0,
       sortBy: 'created_on',
+      location: 'Anywhere',
     };
-
+    // binds
     this.onSearch = this.onSearch.bind(this);
     this.onPaginate = this.onPaginate.bind(this);
     this.onFilter = this.onFilter.bind(this);
+    this.onLocation = this.onLocation.bind(this);
+    this.onSort = this.onSort.bind(this);
   }
 
   componentDidMount() {
@@ -69,6 +82,22 @@ class RecruitCRMJobsContainer extends React.Component {
     });
   }
 
+  onLocation(newLocation) {
+    const selected = _.find(newLocation, { selected: true });
+    this.onFilter({
+      location: selected.label,
+      page: 0,
+    });
+  }
+
+  onSort(newSort) {
+    const selected = _.find(newSort, { selected: true });
+    this.onFilter({
+      sortBy: selected.label === 'Latest Updated Descending' ? 'updated_on' : 'created_on',
+      page: 0,
+    });
+  }
+
   render() {
     const {
       loading,
@@ -78,6 +107,7 @@ class RecruitCRMJobsContainer extends React.Component {
       term,
       page,
       sortBy,
+      location,
     } = this.state;
 
     if (loading) {
@@ -85,9 +115,21 @@ class RecruitCRMJobsContainer extends React.Component {
     }
 
     let jobsToDisplay = jobs;
+    // build current locations dropdown based on all data
+    // and filter by selected location
+    jobsToDisplay = _.filter(jobs, (job) => {
+      // build dropdown
+      const found = _.find(locations, { label: job.country });
+      if (!found) {
+        locations.push({ label: job.country, selected: location === job.country });
+      }
+      // filter
+      if (location === 'Anywhere' || location === 'Any' || location === 'Any Location') return true;
+      return location.toLowerCase() === job.country.toLowerCase();
+    });
     // Filter by term
     if (term) {
-      jobsToDisplay = _.filter(jobs, (job) => {
+      jobsToDisplay = _.filter(jobsToDisplay, (job) => {
         // eslint-disable-next-line no-underscore-dangle
         const _term = term.toLowerCase();
         // name search
@@ -115,6 +157,8 @@ class RecruitCRMJobsContainer extends React.Component {
       <div styleName="container">
         <div styleName="filters">
           <SearchCombo placeholder="Search Gig Listings by Name, Skills, or Location" onSearch={this.onSearch} term={term} />
+          <Dropdown label="Location" onChange={this.onLocation} options={locations} size="xs" />
+          <Dropdown label="Sort by" onChange={this.onSort} options={sortByOptions} size="xs" />
         </div>
         <div styleName="jobs-list-container">
           {
diff --git a/src/shared/containers/Gigs/jobLisingStyles.scss b/src/shared/containers/Gigs/jobLisingStyles.scss
index 4edc9b7c5b..1d909ee9c1 100644
--- a/src/shared/containers/Gigs/jobLisingStyles.scss
+++ b/src/shared/containers/Gigs/jobLisingStyles.scss
@@ -10,6 +10,28 @@
 
   .filters {
     display: flex;
+    align-items: flex-end;
+
+    @include xs-to-sm {
+      flex-direction: column;
+    }
+
+    > div {
+      margin-right: 30px;
+      flex: 1;
+
+      @include xs-to-sm {
+        margin-right: 0;
+      }
+
+      &:first-child {
+        flex: 3;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
   }
 
   .jobs-list-container {

From 45a4d8f3ce7c40a0c3d8025a09aec188cd319ed0 Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Wed, 16 Sep 2020 08:59:47 +0300
Subject: [PATCH 4/6] Location dropdown final fixes

---
 .../components/Contentful/AppComponent/index.jsx      |  2 +-
 src/shared/containers/Gigs/RecruitCRMJobs.jsx         | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/shared/components/Contentful/AppComponent/index.jsx b/src/shared/components/Contentful/AppComponent/index.jsx
index 5238ae7638..bc9971fa63 100644
--- a/src/shared/components/Contentful/AppComponent/index.jsx
+++ b/src/shared/components/Contentful/AppComponent/index.jsx
@@ -32,7 +32,7 @@ export function AppComponentSwitch(appComponent) {
     );
   }
   if (appComponent.fields.type === 'RecruitCRM-Jobs') {
-    return <RecruitCRMJobs {...appComponent.fields.props} />;
+    return <RecruitCRMJobs {...appComponent.fields.props} key={appComponent.sys.id} />;
   }
   fireErrorMessage('Unsupported app component type from contentful', '');
   return null;
diff --git a/src/shared/containers/Gigs/RecruitCRMJobs.jsx b/src/shared/containers/Gigs/RecruitCRMJobs.jsx
index 46b5b50d6e..59b2973ba8 100644
--- a/src/shared/containers/Gigs/RecruitCRMJobs.jsx
+++ b/src/shared/containers/Gigs/RecruitCRMJobs.jsx
@@ -21,9 +21,7 @@ const sortByOptions = [
   { label: 'Latest Updated Descending', selected: false },
 ];
 // Locations
-const locations = [{
-  label: 'Anywhere', selected: true,
-}];
+let locations = [];
 
 class RecruitCRMJobsContainer extends React.Component {
   constructor(props) {
@@ -33,7 +31,7 @@ class RecruitCRMJobsContainer extends React.Component {
       term: '',
       page: 0,
       sortBy: 'created_on',
-      location: 'Anywhere',
+      location: 'Any Location',
     };
     // binds
     this.onSearch = this.onSearch.bind(this);
@@ -127,6 +125,8 @@ class RecruitCRMJobsContainer extends React.Component {
       if (location === 'Anywhere' || location === 'Any' || location === 'Any Location') return true;
       return location.toLowerCase() === job.country.toLowerCase();
     });
+    // sort location dropdown
+    locations = _.sortBy(locations, ['label']);
     // Filter by term
     if (term) {
       jobsToDisplay = _.filter(jobsToDisplay, (job) => {
@@ -178,11 +178,12 @@ class RecruitCRMJobsContainer extends React.Component {
 
 RecruitCRMJobsContainer.defaultProps = {
   jobs: [],
+  loading: true,
 };
 
 RecruitCRMJobsContainer.propTypes = {
   getJobs: PT.func.isRequired,
-  loading: PT.bool.isRequired,
+  loading: PT.bool,
   jobs: PT.arrayOf(PT.shape),
 };
 

From 5023f5e958a549c10529dacbf1d6cd4557e0a687 Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Wed, 16 Sep 2020 16:52:03 +0300
Subject: [PATCH 5/6] Implement #4921

---
 .../Checkbox/__snapshots__/index.jsx.snap     |   3 +-
 src/assets/images/check-mark.svg              |  24 ++++
 src/assets/images/l4.png                      | Bin 1902 -> 0 bytes
 .../GUIKit/Assets/Styles/Includes/_mixin.scss |  10 ++
 .../components/GUIKit/Checkbox/index.jsx      |   2 +-
 .../components/GUIKit/Datepicker/style.scss   |  13 +-
 .../components/GUIKit/Dropdown/style.scss     |   6 +-
 .../components/GUIKit/TextInput/style.scss    |   4 +-
 .../components/GUIKit/Textarea/style.scss     |   4 +-
 src/shared/components/Gigs/GigDetails.jsx     |  14 +-
 src/shared/components/Gigs/style.scss         |  19 ++-
 .../examples/GUIKit/TextInput/index.jsx       |   1 +
 .../SubscribeMailChimpTag/index.jsx           | 129 ++++++++++++++++++
 .../SubscribeMailChimpTag/style.scss          |  57 ++++++++
 src/shared/utils/tc.js                        |   9 ++
 15 files changed, 277 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/images/check-mark.svg
 delete mode 100644 src/assets/images/l4.png
 create mode 100644 src/shared/containers/SubscribeMailChimpTag/index.jsx
 create mode 100644 src/shared/containers/SubscribeMailChimpTag/style.scss

diff --git a/__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap b/__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap
index 3d56855d05..94a5da518a 100644
--- a/__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap
+++ b/__tests__/shared/components/GUIKit/Checkbox/__snapshots__/index.jsx.snap
@@ -15,9 +15,10 @@ exports[`Default render 1`] = `
     <IconCheckSolid
       className="src-shared-components-GUIKit-Checkbox-___style__after___2rEBg"
       height={13}
-      viewBox="0 0 15 13"
+      viewBox="0 0 18 15"
       width={13}
       xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
     />
   </div>
 </label>
diff --git a/src/assets/images/check-mark.svg b/src/assets/images/check-mark.svg
new file mode 100644
index 0000000000..b4e1f7b3a6
--- /dev/null
+++ b/src/assets/images/check-mark.svg
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="15px" viewBox="0 0 18 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 63.1 (101010) - https://sketch.com -->
+    <title>21742205-DC86-42C6-AD5E-D5ADCDBB3E3F</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <path d="M10.6,14 L8.10710678,11.5071068 C7.71658249,11.1165825 7.08341751,11.1165825 6.69289322,11.5071068 L5.70710678,12.4928932 C5.31658249,12.8834175 5.31658249,13.5165825 5.70710678,13.9071068 L10.6,18.8 L10.6,18.8 L20.2928932,9.10710678 C20.6834175,8.71658249 20.6834175,8.08341751 20.2928932,7.69289322 L19.3071068,6.70710678 C18.9165825,6.31658249 18.2834175,6.31658249 17.8928932,6.70710678 L10.6,14 L10.6,14 Z" id="path-1"></path>
+        <filter x="-9.9%" y="-4.6%" width="119.8%" height="128.0%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.35 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="UI-Kit" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Forms" transform="translate(-762.000000, -188.000000)" fill-rule="nonzero">
+            <g id="checkbox/lg/checked" transform="translate(758.000000, 182.000000)">
+                <g id="check-mark">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
+                    <use fill="#FFFFFF" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/src/assets/images/l4.png b/src/assets/images/l4.png
deleted file mode 100644
index 2e066b7f5d093af8097c5aa54899114c3c531acc..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1902
zcmV-!2a))RP)<h;3K|Lk000e1NJLTq001Ze001Ni1^@s6`#g9S000LyNkl<Zc$}@6
ze{5D~6~{m4-20ZbtcbK!)OP5=jg7#7Od^Z8EIPY3Ooq5j|5&Cm5uM_%Y$G$eG>gH1
zG{npw5!}XzGPh`gnL|OtvL$5x*jUM|hy=%CwiPS`IxKDJ`yBtc_qq3Z?)%n(`XtT0
zz4tlie4q34dtc$dTo2#!!tALr*K2Cm8n)b^TabAOtq4;N`4`GD;3#6xs`Au^Utas-
z#oCdJ+5GseLoH`U$NCIzH<2}FHUk0knnXarc>(qB#J~TWVGky4wQYCqTzcyN25`si
z2WOrenf#hKKI?=zNG9g60+<JB04jxclNh7{qVi8O?*7s*mOt`81KisGr}fUU#h|AI
zW4Xcd-U3gC9<9EY_}SAU>F2)k*pfpR4e-bP2j)+i+iKW{y#W9d0kOg>HVq&mz*2bA
zKQCld$H8v7Yv-~(7YuOg&4Y{UR^RK)y+iWwd4L7j;<+IrS>9E>h7rn#auS4JRL4za
z?LChy+54sdf4F9FrIV@MK!=4MAvO?)vIG`;tC>f`1C;WnIxg^$P1~3Jc3OZxSa;xh
zbNtG%OJfktl=|>C9-s(g==G|+=AMmmR7O*&UA5_<MX!2H>TkAv^kBDh_Vc>frB1+9
zFcq8%PQen*uYx7{vwV-KM9=F2u8^le-X%i4V#8D*Vb)Y~{(GU*3V`RV{*$`WnHkeu
zv0yon@_#7+_-9U`uHX+wQUY^Y0(Y8$^ZP;@!NJyjbHmWuD8vtZ?1fwFW{-y<t%lcx
zDB-L5wRrVgS@EF`0QT&7mDi4)D=akYh12Q<Q2ECPx~{(bh5?yM0qWTOrnx~4i$J2Q
zt5z~uFO(Wwf7{!cIV)v+tj@^s37q=()jTVKW*`NJA(~&aj?nYW$-njiPo&@d#Nhj<
zoGr=>Yka~&IYol|NfEY?YgW%;=ByNe!Dn7)V$!lu7sVpk-X=xo9pDO^*}f^^lfV<{
z6tdpbhawlORB$F3G-m+SV$`kd?F67cW&B~^N$Q%*c@VjGV)^pG9(>ruMQzRIdk=M_
zrnb_%IUM*FwvJG7q)d3vvUWP=%>ZENxigH8*0Dr#fK{)7Xq<0GUd@GL#5eVpbLXWm
zbt+d_9^Nnq!#?Qq!}q%|!B^ch7r*xZZX~PN+?YQ|7*gjwmdiIDyxdzy7N;(ewh~YP
zAar?AD0#8u3c44x(X*fpfTM@ba(s9a1ZH>5;JO>;0Px5Cr#Ue^QOH{$A2s!$kP!7S
zu1ZZg@BDCVGRzyML!N&Ct8VNly|?dV)~tc<cek=~bq4VGiAjb}Og5Ddolvr)(zd8v
zojR4H1}nTkm?sV6EKt_b)xx5s?EnnFGR~1BV<iaB2O%pEUo_1+M7}3tI3=N&mzr|W
zkQF7J3L9&zu*^SL^}#tvo)Y_?emzU{K!;x@6rL?T<-@6svpl-$SX$TgNvMCSaXR?>
zDxVY58eH?<w-g}y*S(G2o4fGTqgE>>C^z-b<y{Nf`01msMb%vORx>h;*jU=BZqJD7
zMDcx5oGJqrS6ud2YfT~$t*r^ut(F$0v$K}X-=IB7C4EYerF}%k1mM1nhkk=tZ+x<#
zaaZz36ngvSQfrYSJOr{`T`erUJge?wFQ4PN!BKwy{Ak>$y*~BfY_ugRyHfy5_?ba(
z<3KOlOLS6T_nwicJ%k5Xv8=rSc;L@(@a%y%GVg`cqd6a}0(?pVlG%%Pn(8YBEfNAQ
z81lh@_esnLBU%-N*rdWI^L+&$%=w|GX`XsnBG?SwrvL*3GHI!8DU627JjwL@E|HA;
zB{3f?4wgvy*-2T&*?TGEGGL8-&^y3HPR;%D{J|pATiQB)M4Fs(!3jdox!{DQ*8+uF
zdiLyi>BF<*j!<VLFC_^M<(&vF)yD=zoCML}o_i19VZ!z({}jw9e<kpVUMVF1WhcRS
zEb=Lk_e=(8D8w+&rIs$;y0PcQ2q3`S-#D_%VQWh!5)?s2S;X=3e2d0oUIf)~+3agC
z90aI5x$TSd*8rqdfR@N-oZ~tZGMb{{j0`H-^Fat$c-}K}?-aBx02|8tz2#^HgGp63
zc|2ve&DXaF7M{>l`YhE`Sswaa3Gyw-C6|<yUKW`|x#{Iy@I0*O@B_?h$>wcem_IZv
zK!ESuxA1vO?M72M?J5=PE3HU;^({wn36a6NR0__25mx1kJ+e2|?#&^Vh8zsn#%~>4
z?!-L`T-oeLq6QjP$-lVa(}W#GLt$6@Wj!B%pkF2~7$CsF!!KQOd_?X?_^O#pq5=rn
zM-#Bq7DG6Dl_4>{zJ0@GyPDa5Q-FTmx#gv04*9$@yA6@{W_&IL8;{Klq==k#VuwZa
zF9-)z<<}2=`kjaWlidpj=+|94hG(8WJ+U6_eIjzD!4)Pl&#<!yXABud83z6?Do34h
oR3tgpc8PoW`*(DoyjXkx2Eh3c7|GcIi2wiq07*qoM6N<$f}T#fu>b%7

diff --git a/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss b/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
index b8c20ed703..d6d93533d2 100644
--- a/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
+++ b/src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss
@@ -2,6 +2,7 @@
 $gui-kit-gray-30: #aaa;
 $gui-kit-gray-90: #2a2a2a;
 $gui-kit-level-2: #0ab88a;
+$gui-kit-level-5: #ef476f;
 
 @mixin textInputLabel {
   font-size: 12px;
@@ -22,6 +23,7 @@ $gui-kit-level-2: #0ab88a;
   padding: 15px;
   margin-bottom: 0;
   margin-top: 12px;
+  color: $gui-kit-gray-90;
 
   &::-webkit-input-placeholder {
     /* Edge */
@@ -50,6 +52,12 @@ $gui-kit-level-2: #0ab88a;
     border: 1px solid $gui-kit-gray-30;
     box-shadow: none;
   }
+
+  &:focus-within {
+    label {
+      color: #229174;
+    }
+  }
 }
 
 @mixin textInputXs {
@@ -75,8 +83,10 @@ $gui-kit-level-2: #0ab88a;
   line-height: 20px;
   margin-top: 10px;
   margin-left: 15px;
+  color: $gui-kit-gray-90;
 }
 
 @mixin errorMessageXs {
   margin-top: 8px;
+  color: $gui-kit-gray-90;
 }
diff --git a/src/shared/components/GUIKit/Checkbox/index.jsx b/src/shared/components/GUIKit/Checkbox/index.jsx
index 0576ea93c7..be44e9fcde 100644
--- a/src/shared/components/GUIKit/Checkbox/index.jsx
+++ b/src/shared/components/GUIKit/Checkbox/index.jsx
@@ -5,7 +5,7 @@
  */
 import React, { useRef, useState } from 'react';
 import PT from 'prop-types';
-import IconCheckSolid from 'assets/images/dashboard/ico-checkmark.svg';
+import IconCheckSolid from 'assets/images/check-mark.svg';
 import _ from 'lodash';
 import './style.scss';
 
diff --git a/src/shared/components/GUIKit/Datepicker/style.scss b/src/shared/components/GUIKit/Datepicker/style.scss
index 8f27b70db5..25a0f7a9e5 100644
--- a/src/shared/components/GUIKit/Datepicker/style.scss
+++ b/src/shared/components/GUIKit/Datepicker/style.scss
@@ -20,7 +20,7 @@
 
   &.haveError .label,
   &.haveError.isFocused .label {
-    color: $tc-level-5;
+    color: $gui-kit-level-5;
   }
 
   :global {
@@ -153,8 +153,17 @@
                             border-radius: 50%;
                           }
 
+                          &.CalendarDay__default {
+                            color: #2a2a2a;
+                          }
+
+                          &.CalendarDay__blocked_out_of_range {
+                            color: #aaa;
+                          }
+
                           &.CalendarDay__selected {
                             background: transparent !important;
+                            color: #fff;
 
                             div {
                               background: $gui-kit-level-2;
@@ -190,7 +199,7 @@
       .SingleDatePickerInput {
         .DateInput {
           input {
-            border: 2px solid $tc-level-5;
+            border: 2px solid $gui-kit-level-5;
           }
         }
       }
diff --git a/src/shared/components/GUIKit/Dropdown/style.scss b/src/shared/components/GUIKit/Dropdown/style.scss
index 837b2fe5e5..7ca3bf762b 100644
--- a/src/shared/components/GUIKit/Dropdown/style.scss
+++ b/src/shared/components/GUIKit/Dropdown/style.scss
@@ -43,7 +43,7 @@
 
   &.haveError .label,
   &.haveError.isFocused .label {
-    color: $tc-level-5;
+    color: $gui-kit-level-5;
   }
 
   :global {
@@ -80,6 +80,7 @@
         height: 22px;
         line-height: 22px;
         font-size: 16px;
+        color: $gui-kit-gray-90 !important;
       }
     }
 
@@ -163,7 +164,7 @@
   &.haveError {
     :global {
       .Select-control {
-        border: 2px solid $tc-level-5 !important;
+        border: 2px solid $gui-kit-level-5 !important;
       }
     }
   }
@@ -200,6 +201,7 @@
       .Select-value {
         .Select-value-label {
           font-size: 14px;
+          color: $gui-kit-gray-90 !important;
         }
       }
 
diff --git a/src/shared/components/GUIKit/TextInput/style.scss b/src/shared/components/GUIKit/TextInput/style.scss
index b71c2b8184..453370fbb8 100644
--- a/src/shared/components/GUIKit/TextInput/style.scss
+++ b/src/shared/components/GUIKit/TextInput/style.scss
@@ -51,13 +51,13 @@
 
   input:not([type='checkbox']).haveError + label,
   input:not([type='checkbox']).haveError:focus + label {
-    color: $tc-level-5;
+    color: $gui-kit-level-5;
   }
 
   input:not([type='checkbox']).haveError,
   input:not([type='checkbox']).haveError:active,
   input:not([type='checkbox']).haveError:focus,
   input:not([type='checkbox']).haveError:hover {
-    border: 2px solid $tc-level-5;
+    border: 2px solid $gui-kit-level-5;
   }
 }
diff --git a/src/shared/components/GUIKit/Textarea/style.scss b/src/shared/components/GUIKit/Textarea/style.scss
index 57f67b42a6..9346db5130 100644
--- a/src/shared/components/GUIKit/Textarea/style.scss
+++ b/src/shared/components/GUIKit/Textarea/style.scss
@@ -30,7 +30,7 @@
 
     &.haveError ~ label,
     &.haveError:focus ~ label {
-      color: $tc-level-5;
+      color: $gui-kit-level-5;
     }
   }
 
@@ -52,7 +52,7 @@
   textarea.haveError:active,
   textarea.haveError:focus,
   textarea.haveError:hover {
-    border: 2px solid $tc-level-5;
+    border: 2px solid $gui-kit-level-5;
   }
 
   textarea.haveError ~ .labelMask {
diff --git a/src/shared/components/Gigs/GigDetails.jsx b/src/shared/components/Gigs/GigDetails.jsx
index 0181be5132..df0b06f343 100644
--- a/src/shared/components/Gigs/GigDetails.jsx
+++ b/src/shared/components/Gigs/GigDetails.jsx
@@ -8,6 +8,7 @@ import PT from 'prop-types';
 import { isomorphy, Link, config } from 'topcoder-react-utils';
 import ReactHtmlParser from 'react-html-parser';
 import { getSalaryType, getCustomField } from 'utils/gigs';
+import SubscribeMailChimpTag from 'containers/SubscribeMailChimpTag';
 import './style.scss';
 import IconFacebook from 'assets/images/icon-facebook.svg';
 import IconTwitter from 'assets/images/icon-twitter.svg';
@@ -21,7 +22,6 @@ import iconSkills from 'assets/images/icon-skills-blue.png';
 import iconLabel1 from 'assets/images/l1.png';
 import iconLabel2 from 'assets/images/l2.png';
 import iconLabel3 from 'assets/images/l3.png';
-import iconLabel4 from 'assets/images/l4.png';
 
 // Cleanup HTML from style tags
 // so it won't affect other parts of the UI
@@ -127,8 +127,12 @@ export default function GigDetails(props) {
                     <IconTwitter />
                   </a>
                 </div>
+                <div styleName="subscribe-area">
+                  <h6>SUBSCRIBE TO WEEKLY UPDATES</h6>
+                  <p>Not ready to apply? Want to stay tuned for any new gigs that may be upcoming? Join our weekly Gig Work list.</p>
+                  <SubscribeMailChimpTag listId="28bfd3c062" tags={['Gig Work']} />
+                </div>
                 <div styleName="info-area">
-                  <p>Thank you for checking out our latest gig at Topcoder. Gig work through us is simple and effective for those that would like traditional freelance work. To learn more about how Gigs work with us, go <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/thrive/tracks?track=Topcoder&amp;tax=Gig%20Work">here</a>.</p>
                   <p>At Topcoder, we pride ourselves in bringing our customers the very best candidates to help fill their needs. Want to improve your chances? You can do a few things:</p>
                   <ul>
                     <li>
@@ -137,14 +141,10 @@ export default function GigDetails(props) {
                     </li>
                     <li>
                       <img src={iconLabel2} alt="label 2" />
-                      <div><strong>Subscribe to our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/community/taas">Gig notifications email</a>.</strong> We’ll send you a weekly update on gigs available so you don’t miss a beat.</div>
+                      <div><strong>Let us know you’re here!</strong> Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/?module=ThreadList&forumID=703475">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team.</div>
                     </li>
                     <li>
                       <img src={iconLabel3} alt="label 3" />
-                      <div><strong>Let us know you’re here!</strong> Check in on our <a target="_blank" rel="noreferrer" href="https://apps.topcoder.com/forums/">Gig Work forum</a> and tell us you’re looking for a gig. It’s great visibility for the Gig team.</div>
-                    </li>
-                    <li>
-                      <img src={iconLabel4} alt="label 4" />
                       <div><strong>Check out our <a target="_blank" rel="noreferrer" href="https://www.topcoder.com/challenges">Topcoder challenges</a> and participate.</strong> Challenges showing your technology skills make you a “qualified” candidate so we know you’re good. The proof is in the pudding!</div>
                     </li>
                   </ul>
diff --git a/src/shared/components/Gigs/style.scss b/src/shared/components/Gigs/style.scss
index 9859cdc418..74c0cf3502 100644
--- a/src/shared/components/Gigs/style.scss
+++ b/src/shared/components/Gigs/style.scss
@@ -101,6 +101,7 @@
         .shareButtons {
           display: flex;
           align-items: center;
+          margin-bottom: 12px;
 
           a {
             margin-right: 5px;
@@ -111,11 +112,27 @@
           }
         }
 
+        .subscribe-area {
+          background-image: linear-gradient(135.29deg, #2c95d7 0%, #06d6a0 100%);
+          border-radius: 10px;
+          padding: 25px 32px 30px 20px;
+
+          h6 {
+            margin: 0 0 6px;
+            color: #fff;
+          }
+
+          p {
+            color: #fff;
+            margin-bottom: 15px;
+          }
+        }
+
         .info-area {
           background-color: #f4f4f4;
           padding: 20px;
           border-radius: 10px;
-          margin-top: 18px;
+          margin-top: 20px;
 
           /* stylelint-disable */
           p,
diff --git a/src/shared/components/examples/GUIKit/TextInput/index.jsx b/src/shared/components/examples/GUIKit/TextInput/index.jsx
index 527108f6f2..d8b932b049 100644
--- a/src/shared/components/examples/GUIKit/TextInput/index.jsx
+++ b/src/shared/components/examples/GUIKit/TextInput/index.jsx
@@ -40,6 +40,7 @@ function TextInputExample({ size }) {
       value: 'Adam Morehead',
       required: true,
       errorMsg: '',
+      sectionTitle: 'Required',
     },
   ];
 
diff --git a/src/shared/containers/SubscribeMailChimpTag/index.jsx b/src/shared/containers/SubscribeMailChimpTag/index.jsx
new file mode 100644
index 0000000000..d698bcf8a4
--- /dev/null
+++ b/src/shared/containers/SubscribeMailChimpTag/index.jsx
@@ -0,0 +1,129 @@
+/**
+ * Genetic subscribe for MailChimp tags component
+ */
+import React from 'react';
+import PT from 'prop-types';
+import { isValidEmail } from 'utils/tc';
+import { config } from 'topcoder-react-utils';
+import { Modal } from 'topcoder-react-ui-kit';
+import modalStyle from 'components/NewsletterSignupForMembers/modal.scss';
+import defaulTheme from './style.scss';
+
+/* Holds the base URL of Community App endpoints that proxy HTTP request to
+ * mailchimp APIs. */
+const PROXY_ENDPOINT = `${config.URL.COMMUNITY_APP}/api/mailchimp`;
+
+class SubscribeMailChimpTagContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: '',
+      subsribed: false,
+      disabled: true,
+      inputVal: '',
+    };
+    this.onSubscribeClick = this.onSubscribeClick.bind(this);
+    this.onInputChange = this.onInputChange.bind(this);
+  }
+
+  onSubscribeClick() {
+    const { inputVal } = this.state;
+    const { listId, tags } = this.props;
+    const fetchUrl = `${PROXY_ENDPOINT}/${listId}/members/${inputVal}/tags`;
+    const data = {
+      email_address: inputVal,
+      status: 'subscribed',
+      tags: tags.map(t => ({ name: t, status: 'active' })),
+    };
+    const formData = JSON.stringify(data);
+    fetch(fetchUrl, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: formData,
+    }).then(result => result.json()).then((dataResponse) => {
+      if (dataResponse.status === 204) {
+        // regist success
+        return this.setState({
+          subsribed: true,
+          error: '',
+        });
+      }
+      if (dataResponse.status === 404) {
+        // new email register it for list and add tags
+        return fetch(`${PROXY_ENDPOINT}/${listId}/members`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            email_address: inputVal,
+            status: 'subscribed',
+            tags,
+          }),
+        })
+          .then(result => result.json()).then(() => {
+            this.setState({
+              subsribed: true,
+              error: '',
+            });
+          });
+      }
+      return this.setState({
+        subsribed: false,
+        error: `Error ${dataResponse.status} when assign to tags`,
+      });
+    })
+      .catch((e) => {
+        this.setState({
+          subsribed: false,
+          error: e.message,
+        });
+      });
+  }
+
+  onInputChange(event) {
+    this.setState({
+      inputVal: event.target.value,
+      disabled: !isValidEmail(event.target.value),
+    });
+  }
+
+  render() {
+    const {
+      disabled, inputVal, error, subsribed,
+    } = this.state;
+    return (
+      <div className={defaulTheme.wrapper}>
+        {
+          subsribed || error ? (
+            <Modal
+              theme={modalStyle}
+              onCancel={() => this.setState({
+                subsribed: false,
+                error: false,
+                inputVal: '',
+                disabled: true,
+              })}
+            >
+              <div className={modalStyle.modalMsg}>
+                <h4>{subsribed ? 'Congratulations!' : 'Ops :('}</h4>
+                <p style={{ fontSize: '24px' }}>{error || 'You are now subscribed.'}</p>
+              </div>
+            </Modal>
+          ) : null
+        }
+        <input type="email" placeholder="Email" value={inputVal} onChange={this.onInputChange} />
+        <button type="button" onClick={this.onSubscribeClick} disabled={disabled} className={defaulTheme.button}>Subscribe</button>
+      </div>
+    );
+  }
+}
+
+SubscribeMailChimpTagContainer.propTypes = {
+  listId: PT.string.isRequired,
+  tags: PT.arrayOf(PT.string).isRequired,
+};
+
+export default SubscribeMailChimpTagContainer;
diff --git a/src/shared/containers/SubscribeMailChimpTag/style.scss b/src/shared/containers/SubscribeMailChimpTag/style.scss
new file mode 100644
index 0000000000..4bf7d215ec
--- /dev/null
+++ b/src/shared/containers/SubscribeMailChimpTag/style.scss
@@ -0,0 +1,57 @@
+.wrapper {
+  display: flex;
+
+  input {
+    background-color: #fff !important;
+    border: 1px solid #aaa !important;
+    border-radius: 6px !important;
+    margin-right: 8px;
+    color: #2a2a2a;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 22px;
+
+    &::placeholder,
+    &::-moz-placeholder,
+    &::-webkit-input-placeholder,
+    &::-webkit-placeholder {
+      color: #aaa !important;
+      font-family: Roboto, sans-serif !important;
+      font-size: 14px !important;
+      line-height: 40px !important;
+      text-transform: none;
+    }
+
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+
+  .button {
+    color: #229174;
+    font-family: Roboto, sans-serif;
+    font-size: 14px;
+    font-weight: bold;
+    letter-spacing: 0.8px;
+    line-height: 40px;
+    background-color: #fff;
+    border-radius: 20px;
+    border: none;
+    text-transform: uppercase;
+    max-height: 40px;
+    padding: 0 20px;
+    cursor: pointer;
+    outline: none;
+
+    &:disabled {
+      background-color: #e9e9e9;
+      color: #fff;
+    }
+
+    &:hover:not(:disabled) {
+      color: #229174;
+      background-color: #fff !important;
+      box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
+    }
+  }
+}
diff --git a/src/shared/utils/tc.js b/src/shared/utils/tc.js
index 92c93c9ca6..776729a973 100644
--- a/src/shared/utils/tc.js
+++ b/src/shared/utils/tc.js
@@ -287,4 +287,13 @@ export function formatDate(date, abbreviate, showDay) {
   return `${month} ${y}`;
 }
 
+/**
+ * Test if a string is valid email
+ * @param {String} email The string to test
+ */
+export function isValidEmail(email) {
+  const pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
+  return pattern.test(email);
+}
+
 export default undefined;

From 655d666e0250c7a0fb874141d44cf202d54d8b9e Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Wed, 16 Sep 2020 23:24:20 +0300
Subject: [PATCH 6/6] fixed cors on test

---
 .../SubscribeMailChimpTag/index.jsx           |  3 +--
 .../SubscribeMailChimpTag/style.scss          | 24 +++++++++----------
 2 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/shared/containers/SubscribeMailChimpTag/index.jsx b/src/shared/containers/SubscribeMailChimpTag/index.jsx
index d698bcf8a4..1b7117e348 100644
--- a/src/shared/containers/SubscribeMailChimpTag/index.jsx
+++ b/src/shared/containers/SubscribeMailChimpTag/index.jsx
@@ -4,14 +4,13 @@
 import React from 'react';
 import PT from 'prop-types';
 import { isValidEmail } from 'utils/tc';
-import { config } from 'topcoder-react-utils';
 import { Modal } from 'topcoder-react-ui-kit';
 import modalStyle from 'components/NewsletterSignupForMembers/modal.scss';
 import defaulTheme from './style.scss';
 
 /* Holds the base URL of Community App endpoints that proxy HTTP request to
  * mailchimp APIs. */
-const PROXY_ENDPOINT = `${config.URL.COMMUNITY_APP}/api/mailchimp`;
+const PROXY_ENDPOINT = '/api/mailchimp';
 
 class SubscribeMailChimpTagContainer extends React.Component {
   constructor(props) {
diff --git a/src/shared/containers/SubscribeMailChimpTag/style.scss b/src/shared/containers/SubscribeMailChimpTag/style.scss
index 4bf7d215ec..9aa4059fba 100644
--- a/src/shared/containers/SubscribeMailChimpTag/style.scss
+++ b/src/shared/containers/SubscribeMailChimpTag/style.scss
@@ -10,21 +10,19 @@
     font-family: Roboto, sans-serif;
     font-size: 14px;
     line-height: 22px;
+  }
 
-    &::placeholder,
-    &::-moz-placeholder,
-    &::-webkit-input-placeholder,
-    &::-webkit-placeholder {
-      color: #aaa !important;
-      font-family: Roboto, sans-serif !important;
-      font-size: 14px !important;
-      line-height: 40px !important;
-      text-transform: none;
-    }
+  input::-webkit-input-placeholder,
+  input::placeholder {
+    color: #aaa !important;
+    font-family: Roboto, sans-serif !important;
+    font-size: 14px !important;
+    line-height: 40px !important;
+    text-transform: none;
+  }
 
-    &:focus {
-      box-shadow: none !important;
-    }
+  input:focus {
+    box-shadow: none !important;
   }
 
   .button {