hw6 styles

src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css

@@ -7,13 +7,6 @@
     }
 }
 
-.default {
-    background: #06c;
-}
-
-.red {
-    background: #cc1439;
-}
 
 .disabled {
     background: #004d99;
@@ -21,6 +14,7 @@
     color: #002e5c;
 }
 
+
 .button {
     overflow: hidden;
     cursor: pointer;
@@ -34,6 +28,21 @@
     line-height: 20px;
 }
 
+.secondary {
+    background: transparent;
+    border: 1px solid #0066CC;
+    border-radius: 3px;
+    color: #0066CC;
+}
+
+.default {
+    background: #06c;
+}
+
+.red {
+    background: #cc1439;
+}
+
 .button::after {
     display: block;
     content: '';
@@ -60,13 +69,19 @@
     background: #ff1a47;
 }
 
-.button:focus {
+.secondary:hover {
+    background: #E5F0FA;
 }
 
+
 .default:active {
     background: #0059b3;
 }
 
+.secondary:active {
+    background: #C9E5FF;
+}
+
 .red:active {
     background: #b31232;
 }

src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx

@@ -18,7 +18,13 @@ const SuperButton: React.FC<SuperButtonPropsType> = ({
     ...restProps // все остальные пропсы попадут в объект restProps, там же будет children
 }) => {
     const finalClassName = `${s.button} ${
-        disabled ? s.disabled : xType === 'red' ? s.red : s.default
+        disabled
+            ? s.disabled
+            : xType === 'red'
+            ? s.red
+            : xType === 'secondary'
+            ? s.secondary
+            : s.default
     } ${className}` // задачка на смешивание классов
 
     return (