Browse Source

Fix default Link button colors

Tatiana Inama 6 năm trước cách đây
mục cha
commit
57ecc17a25

+ 2 - 1
recipes/src/components/Button/styles.scss

@@ -156,7 +156,8 @@ button.cbk-btn {
   }
 
   &--link {
-    @include link($white, $yellow, $black);
+    @include link();
+    font-weight: 600;
   }
 
   &:last-child {

+ 6 - 6
recipes/src/components/Ingredient/ScaleTool/index.tsx

@@ -56,12 +56,12 @@ const ScaleTool: React.FunctionComponent<Props> = ({ ingredients }) => {
   return (
     <div className="cbk-scale-tool">
       <div className="cbk-scale-tool__actions">
-        <Button onClick={() => { changeMultiplier(2) }}>x 2</Button>
-        <Button onClick={() => { changeMultiplier(1) }}>x 1</Button>
-        <Button onClick={() => { changeMultiplier(0.5) }}>x 1/2</Button>
-        <Button onClick={() => { changeMultiplier(0.33) }} >x 1/3</Button>
-        <Button onClick={() => { changeMultiplier(0.25) }}>x 1/4</Button>
-        <Button onClick={() => { setMode(MODE.Custom) }}>with stick</Button>
+        <Button link small active onClick={() => { changeMultiplier(2) }}>x 2</Button>
+        <Button link small onClick={() => { changeMultiplier(1) }}>x 1</Button>
+        <Button link small onClick={() => { changeMultiplier(0.5) }}>x 1/2</Button>
+        <Button link small onClick={() => { changeMultiplier(0.33) }} >x 1/3</Button>
+        <Button link small onClick={() => { changeMultiplier(0.25) }}>x 1/4</Button>
+        <Button link small onClick={() => { setMode(MODE.Custom) }}>with stick</Button>
       </div>
       <div className="cbk-scale-tool__ingredients">
         {

+ 6 - 0
recipes/src/components/Ingredient/ScaleTool/styles.scss

@@ -0,0 +1,6 @@
+.cbk-scale-tool {
+  &__actions {
+    display: flex;
+    justify-content: center;
+  }
+}

+ 3 - 73
recipes/src/components/RecipeCard/styles.scss

@@ -55,14 +55,16 @@
     }
   }
   &__content {
-    padding: $spacing-regular;
     font-size: $font-size-large;
 
     &__ingredients {
+      padding: $spacing-regular;
       font-weight: $font-weight-bold;
+      border-bottom: 3px solid black;
     }
 
     &__instructions {
+      padding: $spacing-regular;
       ol {
         padding-left: $spacing-small;
       }
@@ -74,76 +76,4 @@
       }
     }
   }
-  // &__primary {
-  //   display: flex;
-  //   justify-content: space-between;
-
-  //   &__image.mdc-card__media {
-  //     flex-grow: 1;
-  //     flex-basis: 25%;
-  //     border-top-left-radius: 0px;
-  //     border-top-right-radius: 0px;
-  //   }
-  
-  //   &__title {
-  //     flex-grow: 999;
-  //     flex-basis: 75%;
-  //     padding-left: $spacing-regular;
-  //     padding-top: $spacing-regular;
-  //     padding-bottom: $spacing-regular;
-
-  //     p {
-  //       color: $grey-500;
-  //       letter-spacing: 1px;
-  //       text-align: justify;
-  //     }
-
-  //     ul {
-  //       display: flex;
-  //       flex-direction: row;
-        
-  //       li {
-  //         display: flex;
-  //         flex-direction: row;
-  //         align-items: center;
-  //         padding-right: $spacing-small;
-  //         color: $grey-500;
-  //         .cbk-icon {
-  //           margin-right: 8px;
-  //           svg > g path {
-  //             fill: $grey-500;
-  //           }
-  //         }
-  //       }
-  //     }
-  //   }
-  // }
-
-  // &__content {
-  //   &__ingredients {
-  //     margin: $spacing-regular 0px;
-  //   }
-  //   &__instructions {
-  //     color: $grey-700;
-  //     ol {
-  //       margin: 0px;
-  //       padding-left: $spacing-small;
-  //       text-align: justify;
-
-  //       li {
-  //         margin: $spacing-small 0px;
-  //       }
-  //     }
-  //   }
-  // }
-
-  // @media #{$phone} {
-  //   padding: $spacing-small;
-  //   .cbk-recipe-card__primary {
-  //     flex-direction: column;
-  //   }
-  //   .cbk-recipe-card__primary__title {
-  //     padding: $spacing-regular 0;
-  //   }
-  // }
 }