From 9f4752ae99605c9a92eb973a5f25f257392186e0 Mon Sep 17 00:00:00 2001
From: sumitdaga <sumit.daga66@gmail.com>
Date: Fri, 28 Sep 2018 21:44:25 +0530
Subject: [PATCH] fixes #1328

---
 .../Settings/Account/MyAccount/styles.scss           |  2 +-
 .../components/Settings/ToggleableItem/styles.scss   |  4 ++--
 .../components/Settings/Tools/Devices/index.jsx      |  6 ++++++
 .../components/Settings/Tools/Devices/styles.scss    |  6 ++++++
 .../Settings/Tools/ServiceProviders/index.jsx        |  2 ++
 .../Settings/Tools/ServiceProviders/styles.scss      |  6 ++++++
 .../components/Settings/Tools/Software/index.jsx     |  2 ++
 .../components/Settings/Tools/Software/styles.scss   |  6 ++++++
 .../Settings/Tools/Subscriptions/index.jsx           |  1 +
 .../Settings/Tools/Subscriptions/styles.scss         |  6 ++++++
 src/shared/components/Settings/style.scss            | 12 ++++++------
 11 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/shared/components/Settings/Account/MyAccount/styles.scss b/src/shared/components/Settings/Account/MyAccount/styles.scss
index ff3e1870fd..63a66a806a 100644
--- a/src/shared/components/Settings/Account/MyAccount/styles.scss
+++ b/src/shared/components/Settings/Account/MyAccount/styles.scss
@@ -71,7 +71,7 @@
   .form-mobile {
     display: none;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: block;
 
       .row {
diff --git a/src/shared/components/Settings/ToggleableItem/styles.scss b/src/shared/components/Settings/ToggleableItem/styles.scss
index 032b93ba20..d5c493eae4 100644
--- a/src/shared/components/Settings/ToggleableItem/styles.scss
+++ b/src/shared/components/Settings/ToggleableItem/styles.scss
@@ -24,7 +24,7 @@
     line-height: 20px;
     margin-bottom: 10px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       @include roboto-medium;
 
       font-weight: 500;
@@ -40,7 +40,7 @@
     font-weight: 400;
     line-height: 20px;
 
-    @include xs-to-sm {
+    @include upto-sm {
       font-size: 11px;
     }
   }
diff --git a/src/shared/components/Settings/Tools/Devices/index.jsx b/src/shared/components/Settings/Tools/Devices/index.jsx
index 30947803eb..0d45347078 100644
--- a/src/shared/components/Settings/Tools/Devices/index.jsx
+++ b/src/shared/components/Settings/Tools/Devices/index.jsx
@@ -393,6 +393,7 @@ export default class Devices extends ConsentComponent {
               <div styleName="field col-1">
                 <label htmlFor="deviceType">
                   Device Type
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <Select
                   name="deviceType"
@@ -408,6 +409,7 @@ export default class Devices extends ConsentComponent {
               <div styleName="field col-1">
                 <label htmlFor="manufacturer">
                   Manufacturer
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <input id="manufacturer" name="manufacturer" type="text" placeholder="Manufacturer" value={newDevice.manufacturer} onChange={this.onUpdateInput} maxLength="64" required />
               </div>
@@ -416,12 +418,14 @@ export default class Devices extends ConsentComponent {
               <div styleName="field col-2">
                 <label htmlFor="model">
                   Model
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <input id="model" name="model" type="text" placeholder="Model" onChange={this.onUpdateInput} value={newDevice.model} maxLength="64" required />
               </div>
               <div styleName="field col-2">
                 <label htmlFor="operating-system">
                   Operating System
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <input id="operating-system" name="operatingSystem" type="text" onChange={this.onUpdateInput} placeholder="Operating System" value={newDevice.operatingSystem} maxLength="64" required />
               </div>
@@ -430,12 +434,14 @@ export default class Devices extends ConsentComponent {
               <div styleName="field col-2">
                 <label htmlFor="osVersion">
                   OS version
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <input id="os-version" name="osVersion" type="text" onChange={this.onUpdateInput} placeholder="OS version" value={newDevice.osVersion} maxLength="64" required />
               </div>
               <div styleName="field col-2">
                 <label htmlFor="osLanguage">
                   OS Language
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <input id="os-language" name="osLanguage" type="text" onChange={this.onUpdateInput} placeholder="OS Language" value={newDevice.osLanguage} maxLength="64" required />
               </div>
diff --git a/src/shared/components/Settings/Tools/Devices/styles.scss b/src/shared/components/Settings/Tools/Devices/styles.scss
index 2ff6e2fb51..4d515b19b0 100644
--- a/src/shared/components/Settings/Tools/Devices/styles.scss
+++ b/src/shared/components/Settings/Tools/Devices/styles.scss
@@ -146,6 +146,12 @@
         font-weight: 500;
         color: $tc-gray-80;
         margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+
+        .text-required {
+          color: $tc-red-110;
+        }
       }
 
       &.col-1 {
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
index 32989810c1..6a2b670846 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
+++ b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
@@ -321,6 +321,7 @@ export default class ServiceProviders extends ConsentComponent {
               <div styleName="field col-1">
                 <label htmlFor="serviceProviderType">
                   Type
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <Select
                   name="serviceProviderType"
@@ -336,6 +337,7 @@ export default class ServiceProviders extends ConsentComponent {
               <div styleName="field col-2">
                 <label htmlFor="name">
                   Provider Name
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <input id="name" name="name" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newServiceProvider.name} maxLength="64" required />
               </div>
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/styles.scss b/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
index 3b58588951..a8ecd65aaa 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
+++ b/src/shared/components/Settings/Tools/ServiceProviders/styles.scss
@@ -146,6 +146,12 @@
         font-weight: 500;
         color: $tc-gray-80;
         margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+
+        .text-required {
+          color: $tc-red-110;
+        }
       }
 
       &.col-1 {
diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx
index 83fee1798a..8d35789cf6 100644
--- a/src/shared/components/Settings/Tools/Software/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/index.jsx
@@ -321,6 +321,7 @@ export default class Software extends ConsentComponent {
               <div styleName="field col-1">
                 <label htmlFor="softwareType">
                   Software Type
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <Select
                   name="softwareType"
@@ -336,6 +337,7 @@ export default class Software extends ConsentComponent {
               <div styleName="field col-2">
                 <label htmlFor="name">
                   Name
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <input id="name" name="name" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newSoftware.name} maxLength="64" required />
               </div>
diff --git a/src/shared/components/Settings/Tools/Software/styles.scss b/src/shared/components/Settings/Tools/Software/styles.scss
index 6d7537bb7c..b9f0329827 100644
--- a/src/shared/components/Settings/Tools/Software/styles.scss
+++ b/src/shared/components/Settings/Tools/Software/styles.scss
@@ -148,6 +148,12 @@
         font-weight: 500;
         color: $tc-gray-80;
         margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+
+        .text-required {
+          color: $tc-red-110;
+        }
       }
 
       &.col-1 {
diff --git a/src/shared/components/Settings/Tools/Subscriptions/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
index 411d792c8b..fd96d6be50 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/index.jsx
+++ b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
@@ -291,6 +291,7 @@ export default class Subscription extends ConsentComponent {
               <div styleName="field col-1">
                 <label htmlFor="name">
                   Name
+                  <span styleName="text-required">* Required</span>
                 </label>
                 <input id="name" name="name" type="text" placeholder="Name" onChange={this.onUpdateInput} value={newSubscription.name} maxLength="128" required />
               </div>
diff --git a/src/shared/components/Settings/Tools/Subscriptions/styles.scss b/src/shared/components/Settings/Tools/Subscriptions/styles.scss
index 2f484d67b5..3dba8c0177 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/styles.scss
+++ b/src/shared/components/Settings/Tools/Subscriptions/styles.scss
@@ -146,6 +146,12 @@
         font-weight: 500;
         color: $tc-gray-80;
         margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+
+        .text-required {
+          color: $tc-red-110;
+        }
       }
 
       &.col-1 {
diff --git a/src/shared/components/Settings/style.scss b/src/shared/components/Settings/style.scss
index 188dd980b5..c4be3061c0 100644
--- a/src/shared/components/Settings/style.scss
+++ b/src/shared/components/Settings/style.scss
@@ -44,11 +44,11 @@ $checkbox-bg-selected: $tc-dark-blue;
   width: 100%;
   box-shadow: 0 1px 0 0 #f0f0f0;
 
-  @include md-to-lg {
+  @include from-sm-to-lg {
     padding: 30px;
   }
 
-  @include xs-to-sm {
+  @include upto-sm {
     padding: 10px;
   }
 }
@@ -64,7 +64,7 @@ $checkbox-bg-selected: $tc-dark-blue;
   display: flex;
   flex-direction: column;
 
-  @include xs-to-sm {
+  @include upto-sm {
     display: none;
   }
 
@@ -77,7 +77,7 @@ $checkbox-bg-selected: $tc-dark-blue;
     justify-content: flex-start;
 
     .field {
-      @include xs-to-sm {
+      @include upto-sm {
         display: block;
         padding-bottom: 10px;
       }
@@ -329,7 +329,7 @@ $checkbox-bg-selected: $tc-dark-blue;
     -moz-user-select: none;
     -ms-user-select: none;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
@@ -337,7 +337,7 @@ $checkbox-bg-selected: $tc-dark-blue;
   .onoffswitch-mobile {
     display: none;
 
-    @include xs-to-sm {
+    @include upto-sm {
       @include switch-transition;
 
       display: block;