Design: 숫자 + 단위 계산/계산 x 스타일 변경

k-roffle · Apr 15, 2021 · 418990f · 418990f
1 parent a6be072
commit 418990f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/plugins/unitDecorator/types.ts b/src/plugins/unitDecorator/types.ts
@@ -1,11 +1,12 @@
+import { palette } from 'themes/palatte';
+
 export const CustomInline = {
   NOT_CALCULATE: 'NOT_CALCULATE',
 };
 
 export const UnitDecoratorStyleMap = {
   NOT_CALCULATE: {
-    background: 'transparent',
-    margin: '0',
-    padding: '0',
+    background: palette.action.disabledBackground,
+    color: palette.text.primary,
   },
 };
diff --git a/src/plugins/unitDecorator/unitDecorator.tsx b/src/plugins/unitDecorator/unitDecorator.tsx
@@ -26,11 +26,17 @@ export interface UnitDecoratorProps {
 
 const DecoratorWrapper = styled.span`
   > span {
-    background: ${palette.grey[400]};
+    background: ${palette.primary.main};
     margin: ${theme.spacing(0, 0.5)};
     padding: ${theme.spacing(0.5, 1)};
-    border-radius: ${theme.spacing(1)};
+    border-radius: ${theme.spacing(0.5)};
+    color: ${theme.palette.background.paper};
+    box-shadow: ${theme.shadows[2]};
     cursor: pointer;
+
+    &:hover {
+      box-shadow: ${theme.shadows[4]};
+    }
   }
 `;