diff --git a/src/components/main/SidePane/index.tsx b/src/components/main/SidePane/index.tsx index 1d1276d7..83546dc0 100644 --- a/src/components/main/SidePane/index.tsx +++ b/src/components/main/SidePane/index.tsx @@ -55,9 +55,7 @@ export const SidePane: FC = ({
-
-
-
+
S
); }; diff --git a/src/components/main/SidePane/styles.scss b/src/components/main/SidePane/styles.scss index 7a6d3be7..13a3826d 100644 --- a/src/components/main/SidePane/styles.scss +++ b/src/components/main/SidePane/styles.scss @@ -54,11 +54,15 @@ display: flex; align-items: center; justify-content: center; - font: $font_24_semibold; + font: $font_24_medium; &:global(.orange) { background: linear-gradient(280deg, $red, $orange); color: transparentize(black, 0.7); + width: 66px; + border-radius: 6px 0 0 6px; + position: relative; + left: 0; } } diff --git a/src/components/node/NodePanel/styles.scss b/src/components/node/NodePanel/styles.scss index 75abcab4..0995b1bb 100644 --- a/src/components/node/NodePanel/styles.scss +++ b/src/components/node/NodePanel/styles.scss @@ -59,8 +59,9 @@ right: 4px; width: 24px; height: 52px; - background: $olive; + background: $green_gradient; box-shadow: transparentize(black, 0.8) 4px 2px; + border-radius: 2px; } } diff --git a/src/components/node/NodeRelated/styles.scss b/src/components/node/NodeRelated/styles.scss index 6ff356b0..d875df53 100644 --- a/src/components/node/NodeRelated/styles.scss +++ b/src/components/node/NodeRelated/styles.scss @@ -1,6 +1,7 @@ .wrap { padding: $gap; background: transparentize(black, 0.8); + border-radius: $panel_radius; } .grid { @@ -21,7 +22,7 @@ .title { font: $font_14_semibold; text-transform: uppercase; - color: transparentize(white, 0.7); + color: transparentize(white, 0.3); flex-direction: row; display: flex; align-items: center; diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx index c56b29c7..24666009 100644 --- a/src/containers/examples/ImageExample/index.tsx +++ b/src/containers/examples/ImageExample/index.tsx @@ -84,9 +84,7 @@ const ImageExample: FC = () => ( - - @@ -96,8 +94,6 @@ const ImageExample: FC = () => ( title="First album" /> -
- diff --git a/src/styles/colors.scss b/src/styles/colors.scss index a815eab0..7dca1671 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss @@ -5,10 +5,11 @@ $blue: #3ca1ff; $green: #00d2b9; $olive: #8bc12a; $orange: #ff7549; +$grass: #41800d; -$red_gradient: linear-gradient(170deg, $orange, $red); +$red_gradient: linear-gradient(170deg, $orange -50%, $red 150%); $blue_gradient: linear-gradient(170deg, $green, $dark_blue); -$green_gradient: linear-gradient(170deg, $green, $olive); +$green_gradient: linear-gradient(170deg, $olive -20%, $grass 120%); $purple_gradient: linear-gradient(170deg, $red, $dark_blue); //$color_yellow: complement($color_red); //$color_yellow: yellow; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index ec94aa5c..2c5c8561 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -30,6 +30,7 @@ $font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helve $font_48_semibold: $semibold 48px $font; $font_24_bold: $bold 24px $font; $font_24_semibold: $bold 24px $font; +$font_24_medium: $medium 24px $font; $font_24_regular: $regular 24px $font; $font_18_regular: $regular 18px $font; $font_18_extra_light: $extra_light 18px $font;