fix: Row and box styled with common CSS class row and box , changed to be more specific (#109)

fix: Row and box styled with common CSS class `row` and `box` , changed to be more specific (#109)

Signed-off-by: Remington Breeze <[email protected]>

Author: rbreeze

v2/components/box/box.scss

@@ -1,6 +1,6 @@
 @import '../../styles/colors.scss';
 
-.box {
+.argo-box {
     border: 1px solid $argo-color-gray-4;
     border-radius: 5px;
     padding: 20px;

v2/components/box/box.tsx

@@ -5,9 +5,9 @@ import {ThemeDiv} from '../theme-div/theme-div';
 import './box.scss';
 
 export const Box = (props: {children: React.ReactNode}) => {
-    return <ThemeDiv className='box'>{props.children}</ThemeDiv>;
+    return <ThemeDiv className='argo-box'>{props.children}</ThemeDiv>;
 };
 
 export const BoxTitle = (props: {children: React.ReactNode}) => {
-    return <ThemeDiv className='box__title'>{props.children}</ThemeDiv>;
+    return <ThemeDiv className='argo-box__title'>{props.children}</ThemeDiv>;
 };

v2/components/row/row.scss

@@ -1,10 +1,10 @@
-.row {
+.argo-row {
     display: flex;
     width: 100%;
     margin-bottom: 1.5em;
     justify-content: center;
 
-    .box {
+    .argo-box {
         height: auto;
         width: 400px;
         margin-right: 15px;

v2/components/row/row.tsx

@@ -4,4 +4,4 @@ import {ThemeDiv} from '../theme-div/theme-div';
 
 import './row.scss';
 
-export const CenteredRow = (props: {children: React.ReactNode}) => <ThemeDiv className='row'>{props.children}</ThemeDiv>;
+export const CenteredRow = (props: {children: React.ReactNode}) => <ThemeDiv className='argo-row'>{props.children}</ThemeDiv>;

v2/package.json

@@ -1,6 +1,6 @@
 {
     "name": "argo-ux",
-    "version": "1.1.12",
+    "version": "1.1.13",
     "main": "index.js",
     "license": "MIT",
     "dependencies": {