Merge pull request #1597 from sumitdaga/issue-1328

ThomasKranitsas · web-flow · commit 8089234f4be6 · 2018-09-28T19:24:41.000+03:00
fixes #1328
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +329,15 @@ $checkbox-bg-selected: $tc-dark-blue;
     -moz-user-select: none;
     -ms-user-select: none;
 
-    @include xs-to-sm {
+    @include upto-sm {
       display: none;
     }
   }
 
   .onoffswitch-mobile {
     display: none;
 
-    @include xs-to-sm {
+    @include upto-sm {
       @include switch-transition;
 
       display: block;

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@`
`24`	`24`	`line-height: 20px;`
`25`	`25`	`margin-bottom: 10px;`
`26`	`26`
`27`		`- @include xs-to-sm {`
	`27`	`+ @include upto-sm {`
`28`	`28`	`@include roboto-medium;`
`29`	`29`
`30`	`30`	`font-weight: 500;`
`@@ -40,7 +40,7 @@`
`40`	`40`	`font-weight: 400;`
`41`	`41`	`line-height: 20px;`
`42`	`42`
`43`		`- @include xs-to-sm {`
	`43`	`+ @include upto-sm {`
`44`	`44`	`font-size: 11px;`
`45`	`45`	`}`
`46`	`46`	`}`
Original file line number	Diff line number	Diff line change
`@@ -44,11 +44,11 @@ $checkbox-bg-selected: $tc-dark-blue;`
`44`	`44`	`width: 100%;`
`45`	`45`	`box-shadow: 0 1px 0 0 #f0f0f0;`
`46`	`46`
`47`		`- @include md-to-lg {`
	`47`	`+ @include from-sm-to-lg {`
`48`	`48`	`padding: 30px;`
`49`	`49`	`}`
`50`	`50`
`51`		`- @include xs-to-sm {`
	`51`	`+ @include upto-sm {`
`52`	`52`	`padding: 10px;`
`53`	`53`	`}`
`54`	`54`	`}`
`@@ -64,7 +64,7 @@ $checkbox-bg-selected: $tc-dark-blue;`
`64`	`64`	`display: flex;`
`65`	`65`	`flex-direction: column;`
`66`	`66`
`67`		`- @include xs-to-sm {`
	`67`	`+ @include upto-sm {`
`68`	`68`	`display: none;`
`69`	`69`	`}`
`70`	`70`
`@@ -77,7 +77,7 @@ $checkbox-bg-selected: $tc-dark-blue;`
`77`	`77`	`justify-content: flex-start;`
`78`	`78`
`79`	`79`	`.field {`
`80`		`- @include xs-to-sm {`
	`80`	`+ @include upto-sm {`
`81`	`81`	`display: block;`
`82`	`82`	`padding-bottom: 10px;`
`83`	`83`	`}`
`@@ -329,15 +329,15 @@ $checkbox-bg-selected: $tc-dark-blue;`
`329`	`329`	`-moz-user-select: none;`
`330`	`330`	`-ms-user-select: none;`
`331`	`331`
`332`		`- @include xs-to-sm {`
	`332`	`+ @include upto-sm {`
`333`	`333`	`display: none;`
`334`	`334`	`}`
`335`	`335`	`}`
`336`	`336`
`337`	`337`	`.onoffswitch-mobile {`
`338`	`338`	`display: none;`
`339`	`339`
`340`		`- @include xs-to-sm {`
	`340`	`+ @include upto-sm {`
`341`	`341`	`@include switch-transition;`
`342`	`342`
`343`	`343`	`display: block;`