mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-01-30 19:52:20 +01:00
Fix button color + standardise class names
This commit is contained in:
parent
5e61e9c409
commit
be6ba8deff
@ -54,12 +54,12 @@ export const ManageProductCategory: React.FC<ManageProductCategoryProps> = ({ pr
|
|||||||
case 'update':
|
case 'update':
|
||||||
return (<FabButton type='button'
|
return (<FabButton type='button'
|
||||||
icon={<i className="fas fa-pen" />}
|
icon={<i className="fas fa-pen" />}
|
||||||
className="edit-button"
|
className="edit-btn"
|
||||||
onClick={toggleModal} />);
|
onClick={toggleModal} />);
|
||||||
case 'delete':
|
case 'delete':
|
||||||
return (<FabButton type='button'
|
return (<FabButton type='button'
|
||||||
icon={<i className="fa fa-trash" />}
|
icon={<i className="fa fa-trash" />}
|
||||||
className="delete-button"
|
className="delete-btn"
|
||||||
onClick={toggleModal} />);
|
onClick={toggleModal} />);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -36,7 +36,7 @@ export const ProductCategoriesItem: React.FC<ProductCategoriesItemProps> = ({ pr
|
|||||||
<p className='itemInfo-name'>{category.name}</p>
|
<p className='itemInfo-name'>{category.name}</p>
|
||||||
<span className='itemInfo-count'>[count]</span>
|
<span className='itemInfo-count'>[count]</span>
|
||||||
</div>
|
</div>
|
||||||
<div className='action'>
|
<div className='actions'>
|
||||||
<div className='manage'>
|
<div className='manage'>
|
||||||
<ManageProductCategory action='update'
|
<ManageProductCategory action='update'
|
||||||
productCategories={productCategories}
|
productCategories={productCategories}
|
||||||
|
@ -65,22 +65,22 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
.actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.manage {
|
.manage {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius-sm);
|
||||||
button {
|
button {
|
||||||
@include btn;
|
@include btn;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: var(--gray-soft-lightest);
|
color: var(--gray-soft-lightest);
|
||||||
&:hover { opacity: 0.75; }
|
&:hover { opacity: 0.75; }
|
||||||
}
|
}
|
||||||
.edit-button {background: var(--gray-hard-darkest) }
|
.edit-btn {background: var(--gray-hard-darkest) }
|
||||||
.delete-button {background: var(--error) }
|
.delete-btn {background: var(--error) }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -113,11 +113,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.save-btn {
|
.save-btn {
|
||||||
background-color: var(--secondary-dark);
|
float: right;
|
||||||
border-color: var(--secondary-dark);
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
float: right;
|
background-color: var(--secondary);
|
||||||
|
border-color: var(--secondary);
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--secondary-dark);
|
||||||
|
border-color: var(--secondary-dark);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user