Merge pull request #647 from topcoder-platform/accounts-app

MP-35 member devices -> dev

Author: kkartunov

src/apps/accounts/src/lib/assets/tools/index.ts

@@ -9,7 +9,7 @@ import { ReactComponent as WearableIcon } from './wearable.svg'
 import { ReactComponent as FinancialInstitutionIcon } from './Financial Institution.svg'
 import { ReactComponent as OtherServiceProviderIcon } from './other_service_provider.svg'
 import { ReactComponent as TelevisionServiceProviderIcon } from './Television.svg'
-import { ReactComponent as MobileCarierServiceProviderIcon } from './Mobile Carrier.svg'
+import { ReactComponent as MobileCarrierServiceProviderIcon } from './Mobile Carrier.svg'
 import { ReactComponent as InternetServiceProviderIcon } from './Internet Service Provider.svg'
 import { ReactComponent as SubscriptionsIcon } from './subscription.svg'
 
@@ -18,7 +18,7 @@ export {
     DesktopIncon,
     FinancialInstitutionIcon,
     InternetServiceProviderIcon,
-    MobileCarierServiceProviderIcon,
+    MobileCarrierServiceProviderIcon,
     LaptopIcon,
     OtherDeviceIcon,
     OtherServiceProviderIcon,

src/apps/accounts/src/settings/tabs/tools/devices/Devices.module.scss

@@ -16,6 +16,10 @@
             align-self: flex-start;
             width: 64px;
             height: 64px;
+
+            svg {
+                margin: auto;
+            }
         }
 
         .actionElements {
@@ -36,10 +40,37 @@
             }
         }
 
-        .deviceForm {
+        .formWrap {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            margin: $sp-4 0;
+            margin: $sp-13 0 $sp-4;
+
+            @include ltelg {
+                grid-template-columns: 1fr;
+
+                p {
+                    margin-bottom: $sp-4;
+                }
+            }
+
+            &.formNoTop {
+                margin-top: 0;
+            }
+
+            .formCTAs {
+                display: flex;
+                align-items: center;
+
+                svg {
+                    width: 14px;
+                    height: 14px;
+                    margin-right: $sp-1;
+                }
+
+                .ctaBtnCancel {
+                    margin-left: $sp-8;
+                }
+            }
         }
     }
 }